npm - @genesislcap/foundation-header - Versions diffs - 14.112.0 → 14.113.0 - Mend

@genesislcap/foundation-header 14.112.0 → 14.113.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/custom-elements.json +51 -2
package/dist/dts/main/main.d.ts +63 -23
package/dist/dts/main/main.d.ts.map +1 -1
package/dist/dts/main/main.styles.d.ts.map +1 -1
package/dist/dts/main/main.template.d.ts.map +1 -1
package/dist/esm/main/main.js +42 -1
package/dist/esm/main/main.styles.js +12 -0
package/dist/esm/main/main.template.js +23 -1
package/dist/foundation-header.api.json +169 -2
package/dist/foundation-header.d.ts +64 -23
package/docs/.gitattributes +2 -0
package/docs/api/foundation-header.languageoptions.md +16 -0
package/docs/api/foundation-header.md +1 -0
package/docs/api/foundation-header.naveventdetailmap.md +1 -0
package/docs/api/foundation-header.navigation.changelanguage.md +28 -0
package/docs/api/foundation-header.navigation.i18next.md +11 -0
package/docs/api/foundation-header.navigation.languageoptions.md +11 -0
package/docs/api/foundation-header.navigation.md +4 -0
package/docs/api/foundation-header.navigation.showlanguageselector.md +18 -0
package/docs/api-report.md +14 -0
package/package.json +10 -8

package/dist/custom-elements.json CHANGED Viewed

@@ -109,7 +109,7 @@
         {
           "kind": "variable",
           "name": "MainStyles",
-          "default": "css`\n  :host {\n    display: flex;\n    flex-direction: row;\n\n    --primary-gradient-angle: -113.5deg;\n    --design-unit: 2.5;\n  }\n\n  zero-design-system-provider,\n  .dynamic-template {\n    width: 100%;\n  }\n\n  .nav-listbox {\n    background: ${neutralLayer2};\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);\n  }\n\n  fast-listbox {\n    border-color: var(--rapid-ag-background-color);\n  }\n\n  .nav-leftside {\n    background: ${neutralLayer2};\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    margin-left: calc(var(--design-unit) * 6px);\n    display: flex;\n  }\n\n  .nav-leftside:focus-within {\n    box-shadow: none;\n  }\n\n  ::slotted(fast-option),\n  .nav-listbox fast-option {\n    margin: 0 calc(var(--design-unit) * 2px);\n    padding: 0 calc(var(--design-unit) * 6px);\n\n    --focus-stroke-width: 0;\n  }\n\n  ::slotted(fast-option.selected),\n  .nav-listbox fast-option.selected {\n    background: ${backgroundNavOption};\n    color: ${ColorHEX.white};\n  }\n\n  ::slotted(fast-option:not(.selected)),\n  .nav-listbox fast-option:not(.selected) {\n    background-color: ${defaultBackgroundItem};\n    color: #c9c9c9;\n  }\n\n  ::slotted(fast-option:not(.selected):hover),\n  .nav-listbox fast-option:not(.selected):hover {\n    background-color: ${defaultBackgroundHover};\n    color: ${ColorHEX.white};\n  }\n\n  .top-layout zero-icon {\n    position: absolute;\n    right: calc(var(--design-unit) * 6px);\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 25px;\n    opacity: 80%;\n    cursor: pointer;\n  }\n\n  .logout-container zero-icon {\n    padding: 0 calc(var(--design-unit) * 3px);\n  }\n\n  .nav-listbox .bars-container {\n    margin-right: calc(var(--design-unit) * 3px);\n  }\n\n  .user-container zero-icon {\n    font-size: 20px;\n    margin-right: calc(var(--design-unit) * 2px);\n    color: #879ba6;\n  }\n\n  .group-container zero-icon {\n    padding-right: 10px;\n    color: #879ba6;\n  }\n\n  .nav-listbox .bars-container zero-icon {\n    cursor: pointer;\n    font-size: calc(var(--design-unit) * 8px);\n    background:\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        top/100% 1px,\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        bottom/100% 1px;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .logo-container {\n    display: flex;\n    align-items: center;\n    margin-right: calc(var(--design-unit) * 3px);\n  }\n\n  .logo {\n    height: calc(var(--design-unit) * 8px);\n    width: calc(var(--design-unit) * 10px);\n  }\n\n  .nav-rightside {\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    margin-right: calc(var(--design-unit) * 6px);\n    color: #c9c9c9;\n  }\n\n  .user-container {\n    background-color: ${defaultBackgroundItem};\n    padding: calc(var(--design-unit) * 1px);\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    cursor: pointer;\n  }\n\n  .icon-container {\n    font-size: 20px;\n    padding: calc(var(--design-unit) * 3px);\n    margin-right: calc(var(--design-unit) * 4px);\n    color: #879ba6;\n    cursor: pointer;\n  }\n\n  .connection-indicator-container {\n    margin-right: calc(var(--design-unit) * 4px);\n  }\n\n  .open-nav {\n    width: 300px;\n  }\n\n  .top-layout {\n    background:\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        top/100% 1px,\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        bottom/100% 1px;\n    background-origin: border-box;\n    background-size: cover;\n    background-repeat: no-repeat;\n    width: 100%;\n    height: 15%;\n    max-height: 120px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n  }\n\n  .top-layout img {\n    width: 50px;\n    margin-left: calc(var(--design-unit) * 6px);\n  }\n\n  .top-layout zero-icon:hover {\n    opacity: 100%;\n  }\n\n  .group-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::slotted(zero-tree-view) {\n    --type-ramp-base-font-size: 12px;\n  }\n\n  ::slotted(div) {\n    color: ${PrimaryRapidColorHEX.blue};\n    font-size: var(--type-ramp-minus-1-font-size);\n    margin-bottom: calc(var(--design-unit) * 4px);\n    padding-left: calc(var(--design-unit) * 4px);\n    padding-right: calc(var(--design-unit) * 4px);\n  }\n\n  .nav-preferences {\n    width: 100%;\n    height: 25%;\n    max-height: 250px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .logout-container {\n    align-items: center;\n    background-color: var(--neutral-fill-rest);\n    border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    height: 8%;\n    max-height: 80px;\n    padding: 3%;\n  }\n\n  .logout-container:hover {\n    background-color: var(--neutral-fill-hover);\n  }\n`",
+          "default": "css`\n  :host {\n    display: flex;\n    flex-direction: row;\n\n    --primary-gradient-angle: -113.5deg;\n    --design-unit: 2.5;\n  }\n\n  zero-design-system-provider,\n  .dynamic-template {\n    width: 100%;\n  }\n\n  .nav-listbox {\n    background: ${neutralLayer2};\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    box-shadow: 0 0 15px 0 rgb(0 0 0 / 30%);\n  }\n\n  fast-listbox {\n    border-color: var(--rapid-ag-background-color);\n  }\n\n  .nav-leftside {\n    background: ${neutralLayer2};\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    margin-left: calc(var(--design-unit) * 6px);\n    display: flex;\n  }\n\n  .nav-leftside:focus-within {\n    box-shadow: none;\n  }\n\n  ::slotted(fast-option),\n  .nav-listbox fast-option {\n    margin: 0 calc(var(--design-unit) * 2px);\n    padding: 0 calc(var(--design-unit) * 6px);\n\n    --focus-stroke-width: 0;\n  }\n\n  ::slotted(fast-option.selected),\n  .nav-listbox fast-option.selected {\n    background: ${backgroundNavOption};\n    color: ${ColorHEX.white};\n  }\n\n  ::slotted(fast-option:not(.selected)),\n  .nav-listbox fast-option:not(.selected) {\n    background-color: ${defaultBackgroundItem};\n    color: #c9c9c9;\n  }\n\n  ::slotted(fast-option:not(.selected):hover),\n  .nav-listbox fast-option:not(.selected):hover {\n    background-color: ${defaultBackgroundHover};\n    color: ${ColorHEX.white};\n  }\n\n  .top-layout zero-icon {\n    position: absolute;\n    right: calc(var(--design-unit) * 6px);\n    top: 50%;\n    transform: translateY(-50%);\n    font-size: 25px;\n    opacity: 80%;\n    cursor: pointer;\n  }\n\n  .logout-container zero-icon {\n    padding: 0 calc(var(--design-unit) * 3px);\n  }\n\n  .nav-listbox .bars-container {\n    margin-right: calc(var(--design-unit) * 3px);\n  }\n\n  .user-container zero-icon {\n    font-size: 20px;\n    margin-right: calc(var(--design-unit) * 2px);\n    color: #879ba6;\n  }\n\n  .group-container zero-icon {\n    padding-right: 10px;\n    color: #879ba6;\n  }\n\n  .nav-listbox .bars-container zero-icon {\n    cursor: pointer;\n    font-size: calc(var(--design-unit) * 8px);\n    background:\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        top/100% 1px,\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        bottom/100% 1px;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .logo-container {\n    display: flex;\n    align-items: center;\n    margin-right: calc(var(--design-unit) * 3px);\n  }\n\n  .logo {\n    height: calc(var(--design-unit) * 8px);\n    width: calc(var(--design-unit) * 10px);\n  }\n\n  .nav-rightside {\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-end;\n    margin-right: calc(var(--design-unit) * 6px);\n    color: #c9c9c9;\n  }\n\n  .user-container {\n    background-color: ${defaultBackgroundItem};\n    padding: calc(var(--design-unit) * 1px);\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    cursor: pointer;\n  }\n\n  .icon-container {\n    font-size: 20px;\n    padding: calc(var(--design-unit) * 3px);\n    margin-right: calc(var(--design-unit) * 4px);\n    color: #879ba6;\n    cursor: pointer;\n  }\n\n  .connection-indicator-container {\n    margin-right: calc(var(--design-unit) * 4px);\n  }\n\n  .open-nav {\n    width: 300px;\n  }\n\n  .top-layout {\n    background:\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        top/100% 1px,\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        bottom/100% 1px;\n    background-origin: border-box;\n    background-size: cover;\n    background-repeat: no-repeat;\n    width: 100%;\n    height: 15%;\n    max-height: 120px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n  }\n\n  .top-layout img {\n    width: 50px;\n    margin-left: calc(var(--design-unit) * 6px);\n  }\n\n  .top-layout zero-icon:hover {\n    opacity: 100%;\n  }\n\n  .group-container {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  ::slotted(zero-tree-view) {\n    --type-ramp-base-font-size: 12px;\n  }\n\n  ::slotted(div) {\n    color: ${PrimaryRapidColorHEX.blue};\n    font-size: var(--type-ramp-minus-1-font-size);\n    margin-bottom: calc(var(--design-unit) * 4px);\n    padding-left: calc(var(--design-unit) * 4px);\n    padding-right: calc(var(--design-unit) * 4px);\n  }\n\n  .nav-preferences {\n    width: 100%;\n    height: 25%;\n    max-height: 250px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n\n  .logout-container {\n    align-items: center;\n    background-color: var(--neutral-fill-rest);\n    border: calc(var(--stroke-width) * 1px) solid ${defaultBackgroundItem};\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    height: 8%;\n    max-height: 80px;\n    padding: 3%;\n  }\n\n  .logout-container:hover {\n    background-color: var(--neutral-fill-hover);\n  }\n\n  .language-selector {\n    min-width: 80px;\n    width: 80px;\n  }\n\n  .language-selector:hover,\n  .language-selector:active,\n  .language-selector:visited,\n  .language-selector:focus-within {\n    border-color: #333;\n  }\n`",
           "description": "Base styles for the foundation-header",
           "return": {
             "type": {
@@ -137,7 +137,7 @@
         {
           "kind": "variable",
           "name": "NavTemplate",
-          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n    <div class=\"nav-leftside\">\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <div\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n          >\n            <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}\n      </slot>\n    </div>\n    <div class=\"nav-rightside\">\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n          >\n            <zero-icon\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></zero-icon>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\">\n            <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showNotificationsButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"notifications-button\"\n            part=\"notifications-button\"\n          >\n            <zero-icon\n              variant=\"regular\"\n              @click=${(x) => x.notificationIconEvent()}\n              name=\"bell\"\n              part=\"notifications-icon\"\n            ></zero-icon>\n            <slot name=\"notifications-icon-end\"></slot>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <zero-connection-indicator show-label=\"false\"></zero-connection-indicator>\n          </div>\n        `,\n      )}\n      <zero-button appearance=\"neutral-grey\" data-test-id=\"user-button\">\n        <zero-icon name=\"user-circle\"></zero-icon>\n        ${(x) => x.userName}\n      </zero-button>\n    </div>\n  </div>\n`",
+          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n    <div class=\"nav-leftside\">\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <div\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n          >\n            <zero-icon name=\"bars\" part=\"nav-visibility-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeButtons ? routeButtonsTemplate : defaultRouteButtonsTemplate)}\n      </slot>\n    </div>\n    <div class=\"nav-rightside\">\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n          >\n            <zero-icon\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></zero-icon>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\">\n            <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></zero-icon>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showNotificationsButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"notifications-button\"\n            part=\"notifications-button\"\n          >\n            <zero-icon\n              variant=\"regular\"\n              @click=${(x) => x.notificationIconEvent()}\n              name=\"bell\"\n              part=\"notifications-icon\"\n            ></zero-icon>\n            <slot name=\"notifications-icon-end\"></slot>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <zero-connection-indicator show-label=\"false\"></zero-connection-indicator>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <zero-select\n            class=\"language-selector\"\n            position=\"below\"\n            data-test-id=\"language-selector\"\n            part=\"language-selector\"\n            @change=\"${(x, c) => x.changeLanguage(c.event as CustomEvent)}\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <zero-option\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </zero-option>\n              `,\n            )}\n          </zero-select>\n        `,\n      )}\n\n      <zero-button appearance=\"neutral-grey\" data-test-id=\"user-button\">\n        <zero-icon name=\"user-circle\"></zero-icon>\n        ${(x) => x.userName}\n      </zero-button>\n    </div>\n  </div>\n`",
           "description": "Template for Navigation class",
           "return": {
             "type": {
@@ -181,6 +181,13 @@
                 "text": "CredentialManager"
               }
             },
+            {
+              "kind": "field",
+              "name": "i18next",
+              "type": {
+                "text": "I18next"
+              }
+            },
             {
               "kind": "field",
               "name": "ready",
@@ -248,6 +255,22 @@
               "default": "true",
               "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`"
             },
+            {
+              "kind": "field",
+              "name": "showLanguageSelector",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`"
+            },
+            {
+              "kind": "field",
+              "name": "languageOptions",
+              "type": {
+                "text": "LanguageOptions"
+              }
+            },
             {
               "kind": "field",
               "name": "hideSideBar",
@@ -288,6 +311,19 @@
                 }
               ],
               "description": "Changes the route of the current page"
+            },
+            {
+              "kind": "method",
+              "name": "changeLanguage",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "Changes the language of the application"
             }
           ],
           "events": [
@@ -302,6 +338,10 @@
             {
               "description": "Dispatched when the user clicks on the notification icon in the navigation bar.",
               "name": "notification-icon-clicked"
+            },
+            {
+              "description": "Dispatched when the user changes the language in the language selector.",
+              "name": "language-changed"
             }
           ],
           "attributes": [
@@ -350,6 +390,15 @@
               "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`",
               "fieldName": "showConnectionIndicator"
             },
+            {
+              "name": "show-language-selector",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`",
+              "fieldName": "showLanguageSelector"
+            },
             {
               "name": "hide-side-bar",
               "type": {

package/dist/dts/main/main.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
+import { I18next } from '@genesislcap/foundation-i18n';
 /**
  * Events dispatched by the navigation control buttons
  * @public
@@ -7,9 +8,18 @@ export type NavEventDetailMap = {
     'luminance-icon-clicked': void;
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
+    'language-changed': void;
+};
+/**
+ * Options for the language selector
+ * @public
+ */
+export type LanguageOptions = {
+    availableLanguages: string[];
+    selectedLanguage: string;
 };
 declare const Navigation_base: abstract new (...args: any[]) => {
-    $emit<K extends "luminance-icon-clicked" | "misc-icon-clicked" | "notification-icon-clicked">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: import("@genesislcap/foundation-events").EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: import("@genesislcap/foundation-events").EmitOptions]): import("@genesislcap/foundation-events").EmitReturn;
+    $emit<K extends "luminance-icon-clicked" | "misc-icon-clicked" | "notification-icon-clicked" | "language-changed">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: import("@genesislcap/foundation-events").EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: import("@genesislcap/foundation-events").EmitOptions]): import("@genesislcap/foundation-events").EmitReturn;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -94,27 +104,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollBy(options?: ScrollToOptions): void;
     scrollBy(x: number, y: number): void;
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-    /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
     scrollTo(options?: ScrollToOptions): void;
-    /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
     scrollTo(x: number, y: number): void;
     setAttribute(qualifiedName: string, value: string): void;
     setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
@@ -130,7 +120,17 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly lastChild: ChildNode;
     readonly nextSibling: ChildNode;
     readonly nodeName: string;
-    readonly nodeType: number;
+    readonly nodeType: number; /**
+     * Changes the route of the current page
+     *
+     * @remarks
+     *
+     * Requires setup of the Router and usage of the FAST Router
+     *
+     * @param path - string represeting the new route to move to
+     *
+     * @public
+     */
     nodeValue: string;
     readonly parentElement: HTMLElement;
     readonly parentNode: ParentNode;
@@ -142,6 +142,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     contains(other: Node): boolean;
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
+    /**
+     * Opens the flyout menu on the left hand side
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu button on the navigation
+     * bar left hand side
+     *
+     * @internal
+     */
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
     isDefaultNamespace(namespace: string): boolean;
     isEqualNode(otherNode: Node): boolean;
@@ -358,18 +368,27 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ *
+ * @param userName - String which defines the username to be displayed in the navigation bar.
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
  *
  * @public
  *
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
  *
  */
 export declare class Navigation extends Navigation_base {
     auth: Auth;
     credentialManager: CredentialManager;
+    i18next: I18next;
     ready: boolean;
     /**
      * Username of the logged in user
@@ -419,6 +438,17 @@ export declare class Navigation extends Navigation_base {
      *
      */
     showConnectionIndicator: boolean;
+    /**
+     * Boolean attribute which controls whether to show the language selector on the navigation bar
+     * Control via `show-language-selector`
+     *
+     * @experimental
+     * @remarks
+     *
+     * Requires `i18nextOptions` to be set
+     */
+    showLanguageSelector: boolean;
+    languageOptions: LanguageOptions;
     /**
      * Boolean attribute which controls whether to include the sideNav component
      * Control via`hide-side-bar`
@@ -513,6 +543,16 @@ export declare class Navigation extends Navigation_base {
      * @internal
      */
     notificationIconEvent(): void;
+    /**
+     * Changes the language of the application
+     *
+     * @remarks
+     *
+     * Activated when the user selects a language from the language selector that uses the I18next service.
+     *
+     * @experimental
+     */
+    changeLanguage(e: CustomEvent): void;
 }
 export {};
 //# sourceMappingURL=main.d.ts.map

package/dist/dts/main/main.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAgB,MAAM,+BAA+B,CAAC;~~AAUtF~~;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wBAAwB,EAAE,IAAI,CAAC;IAC/B,mBAAmB,EAAE,IAAI,CAAC;IAC1B,2BAA2B,EAAE,IAAI,CAAC;~~CACnC~~,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2MA~~;;;;;;;;;OASG;;IATH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/ML;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAKa,UAAW,SAAQ,eAAmC;IAC3D,IAAI,EAAG,IAAI,CAAC;IACC,iBAAiB,EAAG,iBAAiB,CAAC;~~IAC7C~~,KAAK,EAAE,OAAO,CAAS;IAEnC;;OAEG;IACgB,QAAQ,EAAE,MAAM,CAAC;IAExB,WAAW,UAAS;IAEnB,iBAAiB;IAU9B;;;;;;;OAOG;IAC8B,OAAO,EAAE,GAAG,CAAQ;IAErD;;;;;;;OAOG;IAEH,yBAAyB,EAAE,OAAO,CAAC;IAEnC;;;;;;;OAOG;IAC8D,oBAAoB,EAAE,OAAO,CAAC;IAE/F;;;;;;;OAOG;IAEH,uBAAuB,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IAEH,uBAAuB,EAAE,OAAO,CAAQ;IAExC;;;;OAIG;IAEH,WAAW,EAAE,OAAO,CAAC;IAErB;;OAEG;IACS,YAAY,EAAE,KAAK,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IAEH;;;;;;;;OAQG;IACG,WAAW;IAKjB,cAAc;IAId;;;;;;;;;OASG;IACU,MAAM;IAgBnB;;;;;;;;;;OAUG;IACI,UAAU,CAAC,IAAI,EAAE,MAAM;IAS9B;;;;;;;;;OASG;IACH,mBAAmB;IAInB;;;;;;;;;OASG;IACH,kBAAkB;IAIlB;;;;;;;;;OASG;IACH,aAAa;IAIb;;;;;;;;;OASG;IACH,qBAAqB;~~CAGtB~~"}
1	+ {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAgB,MAAM,+BAA+B,CAAC;AAEtF,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AASvD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wBAAwB,EAAE,IAAI,CAAC;IAC/B,mBAAmB,EAAE,IAAI,CAAC;IAC1B,2BAA2B,EAAE,IAAI,CAAC;IAClC,kBAAkB,EAAE,IAAI,CAAC;CAC1B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,kBAAkB,EAAE,MAAM,EAAE,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;CAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAiMA;;;;;;;;;;OAUG;;;;;;;;;;;;IAUH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAzNL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAKa,UAAW,SAAQ,eAAmC;IAC3D,IAAI,EAAG,IAAI,CAAC;IACC,iBAAiB,EAAG,iBAAiB,CAAC;IAChD,OAAO,EAAG,OAAO,CAAC;IAEf,KAAK,EAAE,OAAO,CAAS;IAEnC;;OAEG;IACgB,QAAQ,EAAE,MAAM,CAAC;IAExB,WAAW,UAAS;IAEnB,iBAAiB;IAU9B;;;;;;;OAOG;IAC8B,OAAO,EAAE,GAAG,CAAQ;IAErD;;;;;;;OAOG;IAEH,yBAAyB,EAAE,OAAO,CAAC;IAEnC;;;;;;;OAOG;IAC8D,oBAAoB,EAAE,OAAO,CAAC;IAE/F;;;;;;;OAOG;IAEH,uBAAuB,EAAE,OAAO,CAAC;IAEjC;;;;OAIG;IAEH,uBAAuB,EAAE,OAAO,CAAQ;IAExC;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,CAAS;IAE1B,eAAe,EAAE,eAAe,CAAC;IAE7C;;;;OAIG;IAEH,WAAW,EAAE,OAAO,CAAC;IAErB;;OAEG;IACS,YAAY,EAAE,KAAK,CAAC;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IAEH;;;;;;;;OAQG;IACG,WAAW;IAKjB,cAAc;IAId;;;;;;;;;OASG;IACU,MAAM;IAgBnB;;;;;;;;;;OAUG;IACI,UAAU,CAAC,IAAI,EAAE,MAAM;IAS9B;;;;;;;;;OASG;IACH,mBAAmB;IAInB;;;;;;;;;OASG;IACH,kBAAkB;IAIlB;;;;;;;;;OASG;IACH,aAAa;IAIb;;;;;;;;;OASG;IACH,qBAAqB;IAIrB;;;;;;;;OAQG;IACH,cAAc,CAAC,CAAC,EAAE,WAAW;CAI9B"}

package/dist/dts/main/main.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAUA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,~~iDAiPtB~~,CAAC"}
1	+ {"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAUA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA6PtB,CAAC"}

package/dist/dts/main/main.template.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;~~AAC5D~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;~~AAiEzC~~;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+~~BAiFvB~~,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}
1	+ {"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAoEzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA0GvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}

package/dist/esm/main/main.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { __awaiter, __decorate } from "tslib";
 import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
 import { EventEmitter } from '@genesislcap/foundation-events';
+import { I18next } from '@genesislcap/foundation-i18n';
 import { FASTElement, customElement, observable, attr } from '@microsoft/fast-element';
 import { Route } from '@microsoft/fast-router';
 import logo from '../assets/logo.svg';
@@ -23,13 +24,21 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ *
+ * @param userName - String which defines the username to be displayed in the navigation bar.
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
  *
  * @public
  *
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
  *
  */
 let Navigation = class Navigation extends EventEmitter(FASTElement) {
@@ -52,6 +61,16 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
          *
          */
         this.showConnectionIndicator = true;
+        /**
+         * Boolean attribute which controls whether to show the language selector on the navigation bar
+         * Control via `show-language-selector`
+         *
+         * @experimental
+         * @remarks
+         *
+         * Requires `i18nextOptions` to be set
+         */
+        this.showLanguageSelector = false;
     }
     connectedCallback() {
         const _super = Object.create(null, {
@@ -184,6 +203,19 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
     notificationIconEvent() {
         this.$emit('notification-icon-clicked');
     }
+    /**
+     * Changes the language of the application
+     *
+     * @remarks
+     *
+     * Activated when the user selects a language from the language selector that uses the I18next service.
+     *
+     * @experimental
+     */
+    changeLanguage(e) {
+        this.$emit('language-changed', e.detail.value);
+        this.i18next.changeLanguageTo(e.detail.value);
+    }
 };
 __decorate([
     Auth
@@ -191,6 +223,9 @@ __decorate([
 __decorate([
     CredentialManager
 ], Navigation.prototype, "credentialManager", void 0);
+__decorate([
+    I18next
+], Navigation.prototype, "i18next", void 0);
 __decorate([
     observable
 ], Navigation.prototype, "ready", void 0);
@@ -215,6 +250,12 @@ __decorate([
 __decorate([
     attr({ mode: 'boolean', attribute: 'show-connection-indicator' })
 ], Navigation.prototype, "showConnectionIndicator", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'show-language-selector' })
+], Navigation.prototype, "showLanguageSelector", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "languageOptions", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'hide-side-bar' })
 ], Navigation.prototype, "hideSideBar", void 0);

package/dist/esm/main/main.styles.js CHANGED Viewed

@@ -249,4 +249,16 @@ export const MainStyles = css `
   .logout-container:hover {
     background-color: var(--neutral-fill-hover);
   }
+  .language-selector {
+    min-width: 80px;
+    width: 80px;
+  }
+  .language-selector:hover,
+  .language-selector:active,
+  .language-selector:visited,
+  .language-selector:focus-within {
+    border-color: #333;
+  }
 `;

package/dist/esm/main/main.template.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { html, repeat, when } from '@microsoft/fast-element';
+import { camelCase } from 'change-case';
 const sideNavTemplate = html `
   <zero-flyout
     position="left"
@@ -51,7 +52,9 @@ const routeButtonsTemplate = html `
           data-test-id="${(x) => x.testId}"
         >
           <zero-icon variant="${(x) => x.variant}" name="${(x) => x.icon}"></zero-icon>
-          ${(x) => x.title}
+          ${(x, c) => c.parent.showLanguageSelector && c.parent.languageOptions
+    ? c.parent.i18next.t(camelCase(x.title), { lng: c.parent.i18next.language })
+    : x.title}
         </zero-button>
       `)}
   </template>
@@ -129,6 +132,25 @@ export const NavTemplate = html `
             <zero-connection-indicator show-label="false"></zero-connection-indicator>
           </div>
         `)}
+      ${when((x) => x.showLanguageSelector && x.languageOptions, html `
+          <zero-select
+            class="language-selector"
+            position="below"
+            data-test-id="language-selector"
+            part="language-selector"
+            @change="${(x, c) => x.changeLanguage(c.event)}"
+          >
+            ${repeat((x) => x.languageOptions.availableLanguages, html `
+                <zero-option
+                  value="${(x) => x}"
+                  ?selected="${(x, c) => x === c.parent.languageOptions.selectedLanguage}"
+                >
+                  ${(x) => x.toUpperCase()}
+                </zero-option>
+              `)}
+          </zero-select>
+        `)}
       <zero-button appearance="neutral-grey" data-test-id="user-button">
         <zero-icon name="user-circle"></zero-icon>
         ${(x) => x.userName}

package/dist/foundation-header.api.json CHANGED Viewed

@@ -184,6 +184,32 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-header!LanguageOptions:type",
+          "docComment": "/**\n * Options for the language selector\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type LanguageOptions = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    availableLanguages: string[];\n    selectedLanguage: string;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "name": "LanguageOptions",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@genesislcap/foundation-header!MainStyles:var",
@@ -223,7 +249,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    'luminance-icon-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n}"
+              "text": "{\n    'luminance-icon-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n    'language-changed': void;\n}"
             },
             {
               "kind": "Content",
@@ -241,7 +267,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-header!Navigation:class",
-          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -294,6 +320,55 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#changeLanguage:member(1)",
+              "docComment": "/**\n * Changes the language of the application\n *\n * @remarks\n *\n * Activated when the user selects a language from the language selector that uses the I18next service.\n *\n * @experimental\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "changeLanguage(e: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "CustomEvent",
+                  "canonicalReference": "!CustomEvent:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "e",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "changeLanguage"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#connectedCallback:member(1)",
@@ -391,6 +466,68 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#i18next:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "i18next: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "I18next",
+                  "canonicalReference": "@genesislcap/foundation-i18n!I18next:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "i18next",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#languageOptions:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "languageOptions: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "LanguageOptions",
+                  "canonicalReference": "@genesislcap/foundation-header!LanguageOptions:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "languageOptions",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#logoSrc:member",
@@ -649,6 +786,36 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#showLanguageSelector:member",
+              "docComment": "/**\n * Boolean attribute which controls whether to show the language selector on the navigation bar Control via `show-language-selector`\n *\n * @remarks\n *\n * Requires `i18nextOptions` to be set\n *\n * @experimental\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "showLanguageSelector: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "showLanguageSelector",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#showLuminanceToggleButton:member",

package/dist/foundation-header.d.ts CHANGED Viewed

@@ -4,8 +4,18 @@ import { CredentialManager } from '@genesislcap/foundation-comms';
 import { ElementStyles } from '@microsoft/fast-element';
 import { EmitOptions } from '@genesislcap/foundation-events';
 import { EmitReturn } from '@genesislcap/foundation-events';
+import { I18next } from '@genesislcap/foundation-i18n';
 import { ViewTemplate } from '@microsoft/fast-element';
+/**
+ * Options for the language selector
+ * @public
+ */
+export declare type LanguageOptions = {
+    availableLanguages: string[];
+    selectedLanguage: string;
+};
 /**
  * Base styles for the foundation-header
  *
@@ -23,6 +33,7 @@ export declare type NavEventDetailMap = {
     'luminance-icon-clicked': void;
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
+    'language-changed': void;
 };
 /**
@@ -40,18 +51,27 @@ export declare type NavEventDetailMap = {
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
+ *
+ * @param userName - String which defines the username to be displayed in the navigation bar.
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
  *
  * @public
  *
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
  *
  */
 export declare class Navigation extends Navigation_base {
     auth: Auth;
     credentialManager: CredentialManager;
+    i18next: I18next;
     ready: boolean;
     /**
      * Username of the logged in user
@@ -101,6 +121,17 @@ export declare class Navigation extends Navigation_base {
      *
      */
     showConnectionIndicator: boolean;
+    /**
+     * Boolean attribute which controls whether to show the language selector on the navigation bar
+     * Control via `show-language-selector`
+     *
+     * @experimental
+     * @remarks
+     *
+     * Requires `i18nextOptions` to be set
+     */
+    showLanguageSelector: boolean;
+    languageOptions: LanguageOptions;
     /**
      * Boolean attribute which controls whether to include the sideNav component
      * Control via`hide-side-bar`
@@ -195,10 +226,20 @@ export declare class Navigation extends Navigation_base {
      * @internal
      */
     notificationIconEvent(): void;
+    /**
+     * Changes the language of the application
+     *
+     * @remarks
+     *
+     * Activated when the user selects a language from the language selector that uses the I18next service.
+     *
+     * @experimental
+     */
+    changeLanguage(e: CustomEvent): void;
 }
 declare const Navigation_base: abstract new (...args: any[]) => {
-    $emit<K extends "luminance-icon-clicked" | "misc-icon-clicked" | "notification-icon-clicked">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: EmitOptions]): EmitReturn;
+    $emit<K extends "luminance-icon-clicked" | "misc-icon-clicked" | "notification-icon-clicked" | "language-changed">(...args: NavEventDetailMap[K] extends void ? [type: K, options?: EmitOptions] : [type: K, detail: NavEventDetailMap[K], options?: EmitOptions]): EmitReturn;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -283,27 +324,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollBy(options?: ScrollToOptions): void;
     scrollBy(x: number, y: number): void;
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
-    /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
     scrollTo(options?: ScrollToOptions): void;
-    /**
-     * Emits the event corresponding to the luminance icon being clicked
-     *
-     * @remarks
-     *
-     * Activated when the user clicks on the moon icon on the navigation
-     * bar right hand side
-     *
-     * @internal
-     */
     scrollTo(x: number, y: number): void;
     setAttribute(qualifiedName: string, value: string): void;
     setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
@@ -319,7 +340,17 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly lastChild: ChildNode;
     readonly nextSibling: ChildNode;
     readonly nodeName: string;
-    readonly nodeType: number;
+    readonly nodeType: number; /**
+    * Changes the route of the current page
+    *
+    * @remarks
+    *
+    * Requires setup of the Router and usage of the FAST Router
+    *
+    * @param path - string represeting the new route to move to
+    *
+    * @public
+    */
     nodeValue: string;
     readonly parentElement: HTMLElement;
     readonly parentNode: ParentNode;
@@ -331,6 +362,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     contains(other: Node): boolean;
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
+    /**
+     * Opens the flyout menu on the left hand side
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu button on the navigation
+     * bar left hand side
+     *
+     * @internal
+     */
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
     isDefaultNamespace(namespace: string): boolean;
     isEqualNode(otherNode: Node): boolean;

package/docs/.gitattributes ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ *.md -diff
2	+ *.md linguist-generated

package/docs/api/foundation-header.languageoptions.md ADDED Viewed

@@ -0,0 +1,16 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [LanguageOptions](./foundation-header.languageoptions.md)
+## LanguageOptions type
+Options for the language selector
+**Signature:**
+```typescript
+export type LanguageOptions = {
+    availableLanguages: string[];
+    selectedLanguage: string;
+};
+```

package/docs/api/foundation-header.md CHANGED Viewed

@@ -21,5 +21,6 @@
 |  Type Alias | Description |
 |  --- | --- |
+|  [LanguageOptions](./foundation-header.languageoptions.md) | Options for the language selector |
 |  [NavEventDetailMap](./foundation-header.naveventdetailmap.md) | Events dispatched by the navigation control buttons |

package/docs/api/foundation-header.naveventdetailmap.md CHANGED Viewed

@@ -13,5 +13,6 @@ export type NavEventDetailMap = {
     'luminance-icon-clicked': void;
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
+    'language-changed': void;
 };
 ```

package/docs/api/foundation-header.navigation.changelanguage.md ADDED Viewed

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [changeLanguage](./foundation-header.navigation.changelanguage.md)
+## Navigation.changeLanguage() method
+Changes the language of the application
+**Signature:**
+```typescript
+changeLanguage(e: CustomEvent): void;
+```
+## Parameters
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  e | CustomEvent |  |
+**Returns:**
+void
+## Remarks
+Activated when the user selects a language from the language selector that uses the I18next service.

package/docs/api/foundation-header.navigation.i18next.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [i18next](./foundation-header.navigation.i18next.md)
+## Navigation.i18next property
+**Signature:**
+```typescript
+i18next: I18next;
+```

package/docs/api/foundation-header.navigation.languageoptions.md ADDED Viewed

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [languageOptions](./foundation-header.navigation.languageoptions.md)
+## Navigation.languageOptions property
+**Signature:**
+```typescript
+languageOptions: LanguageOptions;
+```

package/docs/api/foundation-header.navigation.md CHANGED Viewed

@@ -24,10 +24,13 @@ export declare class Navigation extends Navigation_base
 |  [auth](./foundation-header.navigation.auth.md) |  | Auth |  |
 |  [credentialManager](./foundation-header.navigation.credentialmanager.md) |  | CredentialManager |  |
 |  [hideSideBar](./foundation-header.navigation.hidesidebar.md) |  | boolean | Boolean attribute which controls whether to include the sideNav component Control via<code>hide-side-bar</code> |
+|  [i18next](./foundation-header.navigation.i18next.md) |  | I18next |  |
+|  [languageOptions](./foundation-header.navigation.languageoptions.md) |  | [LanguageOptions](./foundation-header.languageoptions.md) |  |
 |  [logoSrc](./foundation-header.navigation.logosrc.md) |  | any | Optional attribute which controls the icon to show on the navigation bar and flyout Control via <code>logo-src</code> |
 |  [ready](./foundation-header.navigation.ready.md) |  | boolean |  |
 |  [routeButtons](./foundation-header.navigation.routebuttons.md) |  | Array&lt;{ index: number; path: string; title: string; icon: string; variant: string; }&gt; | If present the defined route buttons will be rendered in the header 'routes' slot |
 |  [showConnectionIndicator](./foundation-header.navigation.showconnectionindicator.md) |  | boolean | Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via <code>show-connection-indicator</code> |
+|  [showLanguageSelector](./foundation-header.navigation.showlanguageselector.md) |  | boolean | Boolean attribute which controls whether to show the language selector on the navigation bar Control via <code>show-language-selector</code> |
 |  [showLuminanceToggleButton](./foundation-header.navigation.showluminancetogglebutton.md) |  | boolean | Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar Control via<code>show-luminance-toggle-button</code> |
 |  [showMiscToggleButton](./foundation-header.navigation.showmisctogglebutton.md) |  | boolean | Boolean attribute which controls whether to show the miscellaneous (menu) icon on the navigation bar Control via <code>show-luminance-toggle-button</code> |
 |  [showNotificationsButton](./foundation-header.navigation.shownotificationsbutton.md) |  | boolean | Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar Control via <code>show-notification-button</code> |
@@ -38,6 +41,7 @@ export declare class Navigation extends Navigation_base
 |  Method | Modifiers | Description |
 |  --- | --- | --- |
+|  [changeLanguage(e)](./foundation-header.navigation.changelanguage.md) |  | Changes the language of the application |
 |  [connectedCallback()](./foundation-header.navigation.connectedcallback.md) |  |  |
 |  [logout()](./foundation-header.navigation.logout.md) |  | Logs the user out of their session |
 |  [navigateTo(path)](./foundation-header.navigation.navigateto.md) |  | Changes the route of the current page |

package/docs/api/foundation-header.navigation.showlanguageselector.md ADDED Viewed

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [showLanguageSelector](./foundation-header.navigation.showlanguageselector.md)
+## Navigation.showLanguageSelector property
+Boolean attribute which controls whether to show the language selector on the navigation bar Control via `show-language-selector`
+**Signature:**
+```typescript
+showLanguageSelector: boolean;
+```
+## Remarks
+Requires `i18nextOptions` to be set

package/docs/api-report.md CHANGED Viewed

@@ -10,8 +10,15 @@ import { CredentialManager } from '@genesislcap/foundation-comms';
 import { ElementStyles } from '@microsoft/fast-element';
 import { EmitOptions } from '@genesislcap/foundation-events';
 import { EmitReturn } from '@genesislcap/foundation-events';
+import { I18next } from '@genesislcap/foundation-i18n';
 import { ViewTemplate } from '@microsoft/fast-element';
+// @public
+export type LanguageOptions = {
+    availableLanguages: string[];
+    selectedLanguage: string;
+};
 // @public
 export const MainStyles: ElementStyles;
@@ -20,6 +27,7 @@ export type NavEventDetailMap = {
     'luminance-icon-clicked': void;
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
+    'language-changed': void;
 };
 // Warning: (ae-forgotten-export) The symbol "Navigation_base" needs to be exported by the entry point index.d.ts
@@ -28,11 +36,16 @@ export type NavEventDetailMap = {
 export class Navigation extends Navigation_base {
     // (undocumented)
     auth: Auth;
+    changeLanguage(e: CustomEvent): void;
     // (undocumented)
     connectedCallback(): Promise<void>;
     // (undocumented)
     credentialManager: CredentialManager;
     hideSideBar: boolean;
+    // (undocumented)
+    i18next: I18next;
+    // (undocumented)
+    languageOptions: LanguageOptions;
     // @internal
     loadRemotes(): Promise<void>;
     logoSrc: any;
@@ -56,6 +69,7 @@ export class Navigation extends Navigation_base {
     // (undocumented)
     selectTemplate(): ViewTemplate<Navigation, any>;
     showConnectionIndicator: boolean;
+    showLanguageSelector: boolean;
     showLuminanceToggleButton: boolean;
     showMiscToggleButton: boolean;
     showNotificationsButton: boolean;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.112.0",
+  "version": "14.113.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -60,19 +60,21 @@
     "test:debug": "genx test --debug"
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.112.0",
-    "@genesislcap/genx": "14.112.0",
+    "@genesislcap/foundation-testing": "14.113.0",
+    "@genesislcap/genx": "14.113.0",
     "rimraf": "^3.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.112.0",
-    "@genesislcap/foundation-events": "14.112.0",
-    "@genesislcap/foundation-logger": "14.112.0",
-    "@genesislcap/foundation-zero": "14.112.0",
+    "@genesislcap/foundation-comms": "14.113.0",
+    "@genesislcap/foundation-events": "14.113.0",
+    "@genesislcap/foundation-i18n": "14.113.0",
+    "@genesislcap/foundation-logger": "14.113.0",
+    "@genesislcap/foundation-zero": "14.113.0",
     "@microsoft/fast-colors": "^5.1.4",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-router": "^0.4.2",
+    "change-case": "^4.1.2",
     "tslib": "^2.3.1"
   },
   "repository": {
@@ -84,5 +86,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "66629088a1ce30f4e56479756ad1e78a8152142f"
+  "gitHead": "df9615f43db021677cd2b7090d80478f456a5def"
 }