4.34.1

Locale Switcher

Locale switcher

This component is in beta. Use it at your own risk. Breaking changes may be introduced in a future release without a major version bump.

Demo

const locale = document.querySelector('aui-locale-switcher'); locale.optionsList = [ {code:'en-US', label: "English"}, {code:'de-DE', label: "German"}, ]

API

Tag

Name Description
<aui-locale-switcher>

Custom Element to show the current locale setting and allow a user to change it to another configured locale.

Attributes

Name Value Required Description
optionslist

Stringified JSON array of option objects. See Guidelines below.
l10npath string

Path to the app's localization file relative to assets.avalara.io or assets.avalara.com
icononly boolean

When present, only show the international (world) icon.
user String

Stringified JSON of user object, see Guidelines below.
skylabversion string

The current version of skylab-sdk used in your project. This will be deprecated in the near future.

Properties

Name Value Required Description
optionsList

Stringified JSON array of option objects. See Guidelines below.
l10nPath string

Path to the app's localization file relative to assets.avalara.io or assets.avalara.com
iconOnly boolean

When present, only show the international (world) icon.
user JSON

Set this to user object JSON, see Guidelines below.
requestCurrentAccessToken Function

Function that returns a Promise resolving to {accessToken: "<avalara-ui-access-token>"}. The access token must have at least 5 seconds of life remaining.

Events

Name Detail Description
s-localeselect 
            
  {
    locale: string;
    messages: object;
    failedFiles: [
    {
      url: string;
      httpStatusCode: number;
      httpStatusText: string;
    }]
  }

Fired when a locale is selected. The event detail contains the selected locale, messages with key mapped to translations, and an array of failed files with url and status codes and text.

Demo

API

Tag

Name Description
<AuiLocaleSwitcher>

Custom Element to show the current locale setting and allow a user to change it to another configured locale.

Props

Name Value Required Description
optionsList

Stringified JSON array of option objects. See Guidelines below.
l10nPath string

Path to the app's localization file relative to assets.avalara.io or assets.avalara.com
iconOnly boolean

When present, only show the international (world) icon.
user JSON

Set this to user object JSON, see Guidelines below.
requestCurrentAccessToken Function

Function that returns a Promise resolving to {accessToken: "<avalara-ui-access-token>"}. The access token must have at least 5 seconds of life remaining.

onS-localeselect Function Handles the s-localeselect event that fires when a locale is selected.

Skylab React links

General information about using our React package

Guidelines

Options list

The options list sets the available locales.

const optionsList = [{ code: string, // use the 5 character locale code label: string, }] document.querySelector('aui-locale-switcher').optionsList = optionsList;

User object

If your app doesn't already have access to the Avalara Identity user data, then use AUI Identity to get it. API for <aui-locale-switcher> user data is provided below.

const user = { accountId: string, // use product account ID (e.g. avataxAccountId) username: string, // optional, will be displayed in header menu if provided givenName: string, familyName: string, email: string, isLoggedIn: boolean, isTechSupport: boolean, name: string, locale: string, emitSwitchAccountsNavEvent: boolean, // optional, prevents default/emits s-navigate event on "Switch accounts" click switchAccountsUrl: string, // optional, overrides existing default } document.querySelector('aui-locale-switcher').user = user;

or data can be assigned as attribute using stringified JSON

Design

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