4.46.4

Language Support Dialog

A dialog component for displaying language support information.

Demo

Cookie status: Checking... (you will need to run the JavaScript code to see the status)

 const localeswitcheroptionslist=[{"code":"en-US","label":"English"},{"code":"da-DK","label":"Dansk"}]; const languageSupportDialog = document.querySelector("aui-language-support-dialog"); languageSupportDialog.localeSwitcherOptionsList = localeswitcheroptionslist; // Function to check cookie status and update display function updateCookieStatus() { const cookieName = 'language-support-dialog-dismissed'; const cookies = document.cookie.split(';'); const cookieExists = cookies.some(cookie => cookie.trim().startsWith(cookieName + '=')); const statusText = document.getElementById('cookie-status-text'); if (cookieExists) { statusText.textContent = 'Cookie is set'; } else { statusText.textContent = 'Cookie is not set'; } } // Update status on page load updateCookieStatus(); // Listen for dialog dismiss event to update status when cookie is set languageSupportDialog.addEventListener('s-dismiss', () => { // Wait a moment for cookie to be set setTimeout(updateCookieStatus, 100); }); // Clear cookie and update component without reloading document.getElementById('clear-cookie').addEventListener('click', () => { // Determine the domain (same logic as getDefaultSharedCookieOptions) const domainMatch = window.location.host.match(/\.avalara\.com/) || window.location.host.match(/\.avalara\.io/) || ['/']; const isUnrecognizedDomain = domainMatch[0] === '/'; const domain = isUnrecognizedDomain ? '' : domainMatch[0]; // Clear the cookie with matching attributes const cookieString = [ 'language-support-dialog-dismissed=', 'expires=Thu, 01 Jan 1970 00:00:00 UTC', 'path=/', domain ? `domain=${domain}` : '', !isUnrecognizedDomain ? 'secure' : '', 'sameSite=lax' ].filter(Boolean).join('; '); document.cookie = cookieString; updateCookieStatus(); }); document.getElementById('reload-component').addEventListener('click', () => { languageSupportDialog.localeSwitcherOptionsList = localeswitcheroptionslist; // Call the component's update method to re-check cookies languageSupportDialog.resetState(); // Update status display updateCookieStatus(); });

API

Tag

Name Description
<aui-language-support-dialog>

Custom Element for displaying language support information in a dialog.

Attributes

Name Value Required Description
localeswitcheroptionslist Array of LocaleSwitcherOption objects or JSON string Yes

A list of locale options available to the user. Each option should have a code (e.g., "en-US") and label (e.g., "English"). Can be set as a property (array) or as an attribute (JSON string). The dialog will only display if there are 2 or more locales in the list.

Example: [{"code":"en-US","label":"English"},{"code":"fr-FR","label":"Français"}]

currentlocale String (locale code) Yes

The current locale code (e.g., "fr-FR", "en-US"). The dialog may automatically display when the current locale does not start with "en" (i.e., when English is not selected). When the current locale starts with "en", the dialog will not be shown.

disabled Boolean No

Disable the language support dialog. When unset, the dialog may automatically display when other conditions are met.

Behavior

The Language Support Dialog automatically opens when all of the following conditions are met:

  • The current locale is not English (does not start with "en")
  • There are 2 or more locales in the localeswitcheroptionslist
  • The component is not disabled
  • The user has not previously dismissed the dialog (tracked via the language-support-dialog-dismissed cookie)

When the user closes the dialog (by clicking "Got it" or the X button), a cookie named language-support-dialog-dismissed is set to prevent the dialog from showing again.

Events

Name Detail Description
s-dismiss The closed Dialog's id and returnValue

Fires after the Dialog was closed, which happens when the user presses the Escape key or clicks the dismiss button or when the application calls close(). There is no "open" event because the application manages if and when the Dialog gets opened.

Methods

Name Description
resetState()

Forces the component to re-check the language-support-dialog-dismissed cookie and update accordingly. This is useful when cookies are changed externally (e.g., cleared programmatically). The method resets the internal wasClosed state and triggers a re-render to check the current cookie state.

Demo

API

Tag

Name
<AuiLanguageSupportDialog>

Props

Name Value Required Description
localeSwitcherOptionsList Array of LocaleSwitcherOption objects Yes

A list of locale options available to the user. Each option should have a code (e.g., "en-US") and label (e.g., "English"). The dialog will only display if there are 2 or more locales in the list.

Example: [{code:"en-US",label:"English"},{code:"fr-FR",label:"Français"}]

currentLocale String (locale code) Yes

The current locale code (e.g., "fr-FR", "en-US"). The dialog may automatically display when the current locale does not start with "en" (i.e., when English is not selected). When the current locale starts with "en", the dialog will not be shown.

disabled Boolean No

Disable the language support dialog. When unset, the dialog may automatically display when other conditions are met.

onSDismiss Function

Handles the s-dismiss event that fires after the Dialog was closed, which happens when the user presses the Escape key or clicks the dismiss button. The closed Dialog's id and returnValue are available on e.detail.

Behavior

The Language Support Dialog automatically opens when all of the following conditions are met:

  • The current locale is not English (does not start with "en")
  • There are 2 or more locales in the localeSwitcherOptionsList
  • The component is not disabled
  • The user has not previously dismissed the dialog (tracked via the language-support-dialog-dismissed cookie)

When the user closes the dialog (by clicking "Got it" or the X button), a cookie named language-support-dialog-dismissed is set to prevent the dialog from showing again.

Skylab React links

General information about using our React package

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com