@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
  1. package/dist/custom-elements.json +51 -2
  2. package/dist/dts/main/main.d.ts +63 -23
  3. package/dist/dts/main/main.d.ts.map +1 -1
  4. package/dist/dts/main/main.styles.d.ts.map +1 -1
  5. package/dist/dts/main/main.template.d.ts.map +1 -1
  6. package/dist/esm/main/main.js +42 -1
  7. package/dist/esm/main/main.styles.js +12 -0
  8. package/dist/esm/main/main.template.js +23 -1
  9. package/dist/foundation-header.api.json +169 -2
  10. package/dist/foundation-header.d.ts +64 -23
  11. package/docs/.gitattributes +2 -0
  12. package/docs/api/foundation-header.languageoptions.md +16 -0
  13. package/docs/api/foundation-header.md +1 -0
  14. package/docs/api/foundation-header.naveventdetailmap.md +1 -0
  15. package/docs/api/foundation-header.navigation.changelanguage.md +28 -0
  16. package/docs/api/foundation-header.navigation.i18next.md +11 -0
  17. package/docs/api/foundation-header.navigation.languageoptions.md +11 -0
  18. package/docs/api/foundation-header.navigation.md +4 -0
  19. package/docs/api/foundation-header.navigation.showlanguageselector.md +18 -0
  20. package/docs/api-report.md +14 -0
  21. package/package.json +10 -8
package/dist/custom-elements.json CHANGED
@@ -109,7 +109,7 @@
109
109
  {
110
110
  "kind": "variable",
111
111
  "name": "MainStyles",
112
- "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`",
112
+ "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`",
113
113
  "description": "Base styles for the foundation-header",
114
114
  "return": {
115
115
  "type": {
@@ -137,7 +137,7 @@
137
137
  {
138
138
  "kind": "variable",
139
139
  "name": "NavTemplate",
140
- "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`",
140
+ "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`",
141
141
  "description": "Template for Navigation class",
142
142
  "return": {
143
143
  "type": {
@@ -181,6 +181,13 @@
181
181
  "text": "CredentialManager"
182
182
  }
183
183
  },
184
+ {
185
+ "kind": "field",
186
+ "name": "i18next",
187
+ "type": {
188
+ "text": "I18next"
189
+ }
190
+ },
184
191
  {
185
192
  "kind": "field",
186
193
  "name": "ready",
@@ -248,6 +255,22 @@
248
255
  "default": "true",
249
256
  "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`"
250
257
  },
258
+ {
259
+ "kind": "field",
260
+ "name": "showLanguageSelector",
261
+ "type": {
262
+ "text": "boolean"
263
+ },
264
+ "default": "false",
265
+ "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`"
266
+ },
267
+ {
268
+ "kind": "field",
269
+ "name": "languageOptions",
270
+ "type": {
271
+ "text": "LanguageOptions"
272
+ }
273
+ },
251
274
  {
252
275
  "kind": "field",
253
276
  "name": "hideSideBar",
@@ -288,6 +311,19 @@
288
311
  }
289
312
  ],
290
313
  "description": "Changes the route of the current page"
314
+ },
315
+ {
316
+ "kind": "method",
317
+ "name": "changeLanguage",
318
+ "parameters": [
319
+ {
320
+ "name": "e",
321
+ "type": {
322
+ "text": "CustomEvent"
323
+ }
324
+ }
325
+ ],
326
+ "description": "Changes the language of the application"
291
327
  }
292
328
  ],
293
329
  "events": [
@@ -302,6 +338,10 @@
302
338
  {
303
339
  "description": "Dispatched when the user clicks on the notification icon in the navigation bar.",
304
340
  "name": "notification-icon-clicked"
341
+ },
342
+ {
343
+ "description": "Dispatched when the user changes the language in the language selector.",
344
+ "name": "language-changed"
305
345
  }
306
346
  ],
307
347
  "attributes": [
@@ -350,6 +390,15 @@
350
390
  "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`",
351
391
  "fieldName": "showConnectionIndicator"
352
392
  },
393
+ {
394
+ "name": "show-language-selector",
395
+ "type": {
396
+ "text": "boolean"
397
+ },
398
+ "default": "false",
399
+ "description": "Boolean attribute which controls whether to show the language selector on the navigation bar\nControl via `show-language-selector`",
400
+ "fieldName": "showLanguageSelector"
401
+ },
353
402
  {
354
403
  "name": "hide-side-bar",
355
404
  "type": {
package/dist/dts/main/main.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
2
+ import { I18next } from '@genesislcap/foundation-i18n';
2
3
  /**
3
4
  * Events dispatched by the navigation control buttons
4
5
  * @public
@@ -7,9 +8,18 @@ export type NavEventDetailMap = {
7
8
  'luminance-icon-clicked': void;
8
9
  'misc-icon-clicked': void;
9
10
  'notification-icon-clicked': void;
11
+ 'language-changed': void;
12
+ };
13
+ /**
14
+ * Options for the language selector
15
+ * @public
16
+ */
17
+ export type LanguageOptions = {
18
+ availableLanguages: string[];
19
+ selectedLanguage: string;
10
20
  };
11
21
  declare const Navigation_base: abstract new (...args: any[]) => {
12
- $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;
22
+ $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;
13
23
  accessKey: string;
14
24
  readonly accessKeyLabel: string;
15
25
  autocapitalize: string;
@@ -94,27 +104,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
94
104
  scrollBy(options?: ScrollToOptions): void;
95
105
  scrollBy(x: number, y: number): void;
96
106
  scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
97
- /**
98
- * Emits the event corresponding to the luminance icon being clicked
99
- *
100
- * @remarks
101
- *
102
- * Activated when the user clicks on the moon icon on the navigation
103
- * bar right hand side
104
- *
105
- * @internal
106
- */
107
107
  scrollTo(options?: ScrollToOptions): void;
108
- /**
109
- * Emits the event corresponding to the luminance icon being clicked
110
- *
111
- * @remarks
112
- *
113
- * Activated when the user clicks on the moon icon on the navigation
114
- * bar right hand side
115
- *
116
- * @internal
117
- */
118
108
  scrollTo(x: number, y: number): void;
119
109
  setAttribute(qualifiedName: string, value: string): void;
120
110
  setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
@@ -130,7 +120,17 @@ declare const Navigation_base: abstract new (...args: any[]) => {
130
120
  readonly lastChild: ChildNode;
131
121
  readonly nextSibling: ChildNode;
132
122
  readonly nodeName: string;
133
- readonly nodeType: number;
123
+ readonly nodeType: number; /**
124
+ * Changes the route of the current page
125
+ *
126
+ * @remarks
127
+ *
128
+ * Requires setup of the Router and usage of the FAST Router
129
+ *
130
+ * @param path - string represeting the new route to move to
131
+ *
132
+ * @public
133
+ */
134
134
  nodeValue: string;
135
135
  readonly parentElement: HTMLElement;
136
136
  readonly parentNode: ParentNode;
@@ -142,6 +142,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
142
142
  contains(other: Node): boolean;
143
143
  getRootNode(options?: GetRootNodeOptions): Node;
144
144
  hasChildNodes(): boolean;
145
+ /**
146
+ * Opens the flyout menu on the left hand side
147
+ *
148
+ * @remarks
149
+ *
150
+ * Activated when the user clicks on the menu button on the navigation
151
+ * bar left hand side
152
+ *
153
+ * @internal
154
+ */
145
155
  insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
146
156
  isDefaultNamespace(namespace: string): boolean;
147
157
  isEqualNode(otherNode: Node): boolean;
@@ -358,18 +368,27 @@ declare const Navigation_base: abstract new (...args: any[]) => {
358
368
  * @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.
359
369
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
360
370
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
361
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
371
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
372
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
373
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
374
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
375
+ *
376
+ * @param userName - String which defines the username to be displayed in the navigation bar.
377
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
378
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
362
379
  *
363
380
  * @public
364
381
  *
365
382
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
366
383
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
367
384
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
385
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
368
386
  *
369
387
  */
370
388
  export declare class Navigation extends Navigation_base {
371
389
  auth: Auth;
372
390
  credentialManager: CredentialManager;
391
+ i18next: I18next;
373
392
  ready: boolean;
374
393
  /**
375
394
  * Username of the logged in user
@@ -419,6 +438,17 @@ export declare class Navigation extends Navigation_base {
419
438
  *
420
439
  */
421
440
  showConnectionIndicator: boolean;
441
+ /**
442
+ * Boolean attribute which controls whether to show the language selector on the navigation bar
443
+ * Control via `show-language-selector`
444
+ *
445
+ * @experimental
446
+ * @remarks
447
+ *
448
+ * Requires `i18nextOptions` to be set
449
+ */
450
+ showLanguageSelector: boolean;
451
+ languageOptions: LanguageOptions;
422
452
  /**
423
453
  * Boolean attribute which controls whether to include the sideNav component
424
454
  * Control via`hide-side-bar`
@@ -513,6 +543,16 @@ export declare class Navigation extends Navigation_base {
513
543
  * @internal
514
544
  */
515
545
  notificationIconEvent(): void;
546
+ /**
547
+ * Changes the language of the application
548
+ *
549
+ * @remarks
550
+ *
551
+ * Activated when the user selects a language from the language selector that uses the I18next service.
552
+ *
553
+ * @experimental
554
+ */
555
+ changeLanguage(e: CustomEvent): void;
516
556
  }
517
557
  export {};
518
558
  //# sourceMappingURL=main.d.ts.map
package/dist/dts/main/main.d.ts.map CHANGED
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,7 @@
1
1
  import { __awaiter, __decorate } from "tslib";
2
2
  import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
3
3
  import { EventEmitter } from '@genesislcap/foundation-events';
4
+ import { I18next } from '@genesislcap/foundation-i18n';
4
5
  import { FASTElement, customElement, observable, attr } from '@microsoft/fast-element';
5
6
  import { Route } from '@microsoft/fast-router';
6
7
  import logo from '../assets/logo.svg';
@@ -23,13 +24,21 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
23
24
  * @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.
24
25
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
25
26
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
26
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
27
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
28
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
29
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
30
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
31
+ *
32
+ * @param userName - String which defines the username to be displayed in the navigation bar.
33
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
34
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
27
35
  *
28
36
  * @public
29
37
  *
30
38
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
31
39
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
32
40
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
41
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
33
42
  *
34
43
  */
35
44
  let Navigation = class Navigation extends EventEmitter(FASTElement) {
@@ -52,6 +61,16 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
52
61
  *
53
62
  */
54
63
  this.showConnectionIndicator = true;
64
+ /**
65
+ * Boolean attribute which controls whether to show the language selector on the navigation bar
66
+ * Control via `show-language-selector`
67
+ *
68
+ * @experimental
69
+ * @remarks
70
+ *
71
+ * Requires `i18nextOptions` to be set
72
+ */
73
+ this.showLanguageSelector = false;
55
74
  }
56
75
  connectedCallback() {
57
76
  const _super = Object.create(null, {
@@ -184,6 +203,19 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
184
203
  notificationIconEvent() {
185
204
  this.$emit('notification-icon-clicked');
186
205
  }
206
+ /**
207
+ * Changes the language of the application
208
+ *
209
+ * @remarks
210
+ *
211
+ * Activated when the user selects a language from the language selector that uses the I18next service.
212
+ *
213
+ * @experimental
214
+ */
215
+ changeLanguage(e) {
216
+ this.$emit('language-changed', e.detail.value);
217
+ this.i18next.changeLanguageTo(e.detail.value);
218
+ }
187
219
  };
188
220
  __decorate([
189
221
  Auth
@@ -191,6 +223,9 @@ __decorate([
191
223
  __decorate([
192
224
  CredentialManager
193
225
  ], Navigation.prototype, "credentialManager", void 0);
226
+ __decorate([
227
+ I18next
228
+ ], Navigation.prototype, "i18next", void 0);
194
229
  __decorate([
195
230
  observable
196
231
  ], Navigation.prototype, "ready", void 0);
@@ -215,6 +250,12 @@ __decorate([
215
250
  __decorate([
216
251
  attr({ mode: 'boolean', attribute: 'show-connection-indicator' })
217
252
  ], Navigation.prototype, "showConnectionIndicator", void 0);
253
+ __decorate([
254
+ attr({ mode: 'boolean', attribute: 'show-language-selector' })
255
+ ], Navigation.prototype, "showLanguageSelector", void 0);
256
+ __decorate([
257
+ observable
258
+ ], Navigation.prototype, "languageOptions", void 0);
218
259
  __decorate([
219
260
  attr({ mode: 'boolean', attribute: 'hide-side-bar' })
220
261
  ], Navigation.prototype, "hideSideBar", void 0);
package/dist/esm/main/main.styles.js CHANGED
@@ -249,4 +249,16 @@ export const MainStyles = css `
249
249
  .logout-container:hover {
250
250
  background-color: var(--neutral-fill-hover);
251
251
  }
252
+
253
+ .language-selector {
254
+ min-width: 80px;
255
+ width: 80px;
256
+ }
257
+
258
+ .language-selector:hover,
259
+ .language-selector:active,
260
+ .language-selector:visited,
261
+ .language-selector:focus-within {
262
+ border-color: #333;
263
+ }
252
264
  `;
package/dist/esm/main/main.template.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { html, repeat, when } from '@microsoft/fast-element';
2
+ import { camelCase } from 'change-case';
2
3
  const sideNavTemplate = html `
3
4
  <zero-flyout
4
5
  position="left"
@@ -51,7 +52,9 @@ const routeButtonsTemplate = html `
51
52
  data-test-id="${(x) => x.testId}"
52
53
  >
53
54
  <zero-icon variant="${(x) => x.variant}" name="${(x) => x.icon}"></zero-icon>
54
- ${(x) => x.title}
55
+ ${(x, c) => c.parent.showLanguageSelector && c.parent.languageOptions
56
+ ? c.parent.i18next.t(camelCase(x.title), { lng: c.parent.i18next.language })
57
+ : x.title}
55
58
  </zero-button>
56
59
  `)}
57
60
  </template>
@@ -129,6 +132,25 @@ export const NavTemplate = html `
129
132
  <zero-connection-indicator show-label="false"></zero-connection-indicator>
130
133
  </div>
131
134
  `)}
135
+ ${when((x) => x.showLanguageSelector && x.languageOptions, html `
136
+ <zero-select
137
+ class="language-selector"
138
+ position="below"
139
+ data-test-id="language-selector"
140
+ part="language-selector"
141
+ @change="${(x, c) => x.changeLanguage(c.event)}"
142
+ >
143
+ ${repeat((x) => x.languageOptions.availableLanguages, html `
144
+ <zero-option
145
+ value="${(x) => x}"
146
+ ?selected="${(x, c) => x === c.parent.languageOptions.selectedLanguage}"
147
+ >
148
+ ${(x) => x.toUpperCase()}
149
+ </zero-option>
150
+ `)}
151
+ </zero-select>
152
+ `)}
153
+
132
154
  <zero-button appearance="neutral-grey" data-test-id="user-button">
133
155
  <zero-icon name="user-circle"></zero-icon>
134
156
  ${(x) => x.userName}
package/dist/foundation-header.api.json CHANGED
@@ -184,6 +184,32 @@
184
184
  "name": "",
185
185
  "preserveMemberOrder": false,
186
186
  "members": [
187
+ {
188
+ "kind": "TypeAlias",
189
+ "canonicalReference": "@genesislcap/foundation-header!LanguageOptions:type",
190
+ "docComment": "/**\n * Options for the language selector\n *\n * @public\n */\n",
191
+ "excerptTokens": [
192
+ {
193
+ "kind": "Content",
194
+ "text": "export type LanguageOptions = "
195
+ },
196
+ {
197
+ "kind": "Content",
198
+ "text": "{\n availableLanguages: string[];\n selectedLanguage: string;\n}"
199
+ },
200
+ {
201
+ "kind": "Content",
202
+ "text": ";"
203
+ }
204
+ ],
205
+ "fileUrlPath": "src/main/main.ts",
206
+ "releaseTag": "Public",
207
+ "name": "LanguageOptions",
208
+ "typeTokenRange": {
209
+ "startIndex": 1,
210
+ "endIndex": 2
211
+ }
212
+ },
187
213
  {
188
214
  "kind": "Variable",
189
215
  "canonicalReference": "@genesislcap/foundation-header!MainStyles:var",
@@ -223,7 +249,7 @@
223
249
  },
224
250
  {
225
251
  "kind": "Content",
226
- "text": "{\n 'luminance-icon-clicked': void;\n 'misc-icon-clicked': void;\n 'notification-icon-clicked': void;\n}"
252
+ "text": "{\n 'luminance-icon-clicked': void;\n 'misc-icon-clicked': void;\n 'notification-icon-clicked': void;\n 'language-changed': void;\n}"
227
253
  },
228
254
  {
229
255
  "kind": "Content",
@@ -241,7 +267,7 @@
241
267
  {
242
268
  "kind": "Class",
243
269
  "canonicalReference": "@genesislcap/foundation-header!Navigation:class",
244
- "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",
270
+ "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",
245
271
  "excerptTokens": [
246
272
  {
247
273
  "kind": "Content",
@@ -294,6 +320,55 @@
294
320
  "isProtected": false,
295
321
  "isAbstract": false
296
322
  },
323
+ {
324
+ "kind": "Method",
325
+ "canonicalReference": "@genesislcap/foundation-header!Navigation#changeLanguage:member(1)",
326
+ "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",
327
+ "excerptTokens": [
328
+ {
329
+ "kind": "Content",
330
+ "text": "changeLanguage(e: "
331
+ },
332
+ {
333
+ "kind": "Reference",
334
+ "text": "CustomEvent",
335
+ "canonicalReference": "!CustomEvent:interface"
336
+ },
337
+ {
338
+ "kind": "Content",
339
+ "text": "): "
340
+ },
341
+ {
342
+ "kind": "Content",
343
+ "text": "void"
344
+ },
345
+ {
346
+ "kind": "Content",
347
+ "text": ";"
348
+ }
349
+ ],
350
+ "isStatic": false,
351
+ "returnTypeTokenRange": {
352
+ "startIndex": 3,
353
+ "endIndex": 4
354
+ },
355
+ "releaseTag": "Public",
356
+ "isProtected": false,
357
+ "overloadIndex": 1,
358
+ "parameters": [
359
+ {
360
+ "parameterName": "e",
361
+ "parameterTypeTokenRange": {
362
+ "startIndex": 1,
363
+ "endIndex": 2
364
+ },
365
+ "isOptional": false
366
+ }
367
+ ],
368
+ "isOptional": false,
369
+ "isAbstract": false,
370
+ "name": "changeLanguage"
371
+ },
297
372
  {
298
373
  "kind": "Method",
299
374
  "canonicalReference": "@genesislcap/foundation-header!Navigation#connectedCallback:member(1)",
@@ -391,6 +466,68 @@
391
466
  "isProtected": false,
392
467
  "isAbstract": false
393
468
  },
469
+ {
470
+ "kind": "Property",
471
+ "canonicalReference": "@genesislcap/foundation-header!Navigation#i18next:member",
472
+ "docComment": "",
473
+ "excerptTokens": [
474
+ {
475
+ "kind": "Content",
476
+ "text": "i18next: "
477
+ },
478
+ {
479
+ "kind": "Reference",
480
+ "text": "I18next",
481
+ "canonicalReference": "@genesislcap/foundation-i18n!I18next:interface"
482
+ },
483
+ {
484
+ "kind": "Content",
485
+ "text": ";"
486
+ }
487
+ ],
488
+ "isReadonly": false,
489
+ "isOptional": false,
490
+ "releaseTag": "Public",
491
+ "name": "i18next",
492
+ "propertyTypeTokenRange": {
493
+ "startIndex": 1,
494
+ "endIndex": 2
495
+ },
496
+ "isStatic": false,
497
+ "isProtected": false,
498
+ "isAbstract": false
499
+ },
500
+ {
501
+ "kind": "Property",
502
+ "canonicalReference": "@genesislcap/foundation-header!Navigation#languageOptions:member",
503
+ "docComment": "",
504
+ "excerptTokens": [
505
+ {
506
+ "kind": "Content",
507
+ "text": "languageOptions: "
508
+ },
509
+ {
510
+ "kind": "Reference",
511
+ "text": "LanguageOptions",
512
+ "canonicalReference": "@genesislcap/foundation-header!LanguageOptions:type"
513
+ },
514
+ {
515
+ "kind": "Content",
516
+ "text": ";"
517
+ }
518
+ ],
519
+ "isReadonly": false,
520
+ "isOptional": false,
521
+ "releaseTag": "Public",
522
+ "name": "languageOptions",
523
+ "propertyTypeTokenRange": {
524
+ "startIndex": 1,
525
+ "endIndex": 2
526
+ },
527
+ "isStatic": false,
528
+ "isProtected": false,
529
+ "isAbstract": false
530
+ },
394
531
  {
395
532
  "kind": "Property",
396
533
  "canonicalReference": "@genesislcap/foundation-header!Navigation#logoSrc:member",
@@ -649,6 +786,36 @@
649
786
  "isProtected": false,
650
787
  "isAbstract": false
651
788
  },
789
+ {
790
+ "kind": "Property",
791
+ "canonicalReference": "@genesislcap/foundation-header!Navigation#showLanguageSelector:member",
792
+ "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",
793
+ "excerptTokens": [
794
+ {
795
+ "kind": "Content",
796
+ "text": "showLanguageSelector: "
797
+ },
798
+ {
799
+ "kind": "Content",
800
+ "text": "boolean"
801
+ },
802
+ {
803
+ "kind": "Content",
804
+ "text": ";"
805
+ }
806
+ ],
807
+ "isReadonly": false,
808
+ "isOptional": false,
809
+ "releaseTag": "Public",
810
+ "name": "showLanguageSelector",
811
+ "propertyTypeTokenRange": {
812
+ "startIndex": 1,
813
+ "endIndex": 2
814
+ },
815
+ "isStatic": false,
816
+ "isProtected": false,
817
+ "isAbstract": false
818
+ },
652
819
  {
653
820
  "kind": "Property",
654
821
  "canonicalReference": "@genesislcap/foundation-header!Navigation#showLuminanceToggleButton:member",
package/dist/foundation-header.d.ts CHANGED
@@ -4,8 +4,18 @@ import { CredentialManager } from '@genesislcap/foundation-comms';
4
4
  import { ElementStyles } from '@microsoft/fast-element';
5
5
  import { EmitOptions } from '@genesislcap/foundation-events';
6
6
  import { EmitReturn } from '@genesislcap/foundation-events';
7
+ import { I18next } from '@genesislcap/foundation-i18n';
7
8
  import { ViewTemplate } from '@microsoft/fast-element';
8
9
 
10
+ /**
11
+ * Options for the language selector
12
+ * @public
13
+ */
14
+ export declare type LanguageOptions = {
15
+ availableLanguages: string[];
16
+ selectedLanguage: string;
17
+ };
18
+
9
19
  /**
10
20
  * Base styles for the foundation-header
11
21
  *
@@ -23,6 +33,7 @@ export declare type NavEventDetailMap = {
23
33
  'luminance-icon-clicked': void;
24
34
  'misc-icon-clicked': void;
25
35
  'notification-icon-clicked': void;
36
+ 'language-changed': void;
26
37
  };
27
38
 
28
39
  /**
@@ -40,18 +51,27 @@ export declare type NavEventDetailMap = {
40
51
  * @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.
41
52
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
42
53
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
43
- * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the show notification icon.
54
+ * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
55
+ * @param show-connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.
56
+ * @param show-language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.
57
+ * @param hide-side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.
58
+ *
59
+ * @param userName - String which defines the username to be displayed in the navigation bar.
60
+ * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
61
+ * @param languageOptions - Object which defines the language options to be displayed in the language selector.
44
62
  *
45
63
  * @public
46
64
  *
47
65
  * @fires luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.
48
66
  * @fires misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.
49
67
  * @fires notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.
68
+ * @fires language-changed - Dispatched when the user changes the language in the language selector.
50
69
  *
51
70
  */
52
71
  export declare class Navigation extends Navigation_base {
53
72
  auth: Auth;
54
73
  credentialManager: CredentialManager;
74
+ i18next: I18next;
55
75
  ready: boolean;
56
76
  /**
57
77
  * Username of the logged in user
@@ -101,6 +121,17 @@ export declare class Navigation extends Navigation_base {
101
121
  *
102
122
  */
103
123
  showConnectionIndicator: boolean;
124
+ /**
125
+ * Boolean attribute which controls whether to show the language selector on the navigation bar
126
+ * Control via `show-language-selector`
127
+ *
128
+ * @experimental
129
+ * @remarks
130
+ *
131
+ * Requires `i18nextOptions` to be set
132
+ */
133
+ showLanguageSelector: boolean;
134
+ languageOptions: LanguageOptions;
104
135
  /**
105
136
  * Boolean attribute which controls whether to include the sideNav component
106
137
  * Control via`hide-side-bar`
@@ -195,10 +226,20 @@ export declare class Navigation extends Navigation_base {
195
226
  * @internal
196
227
  */
197
228
  notificationIconEvent(): void;
229
+ /**
230
+ * Changes the language of the application
231
+ *
232
+ * @remarks
233
+ *
234
+ * Activated when the user selects a language from the language selector that uses the I18next service.
235
+ *
236
+ * @experimental
237
+ */
238
+ changeLanguage(e: CustomEvent): void;
198
239
  }
199
240
 
200
241
  declare const Navigation_base: abstract new (...args: any[]) => {
201
- $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;
242
+ $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;
202
243
  accessKey: string;
203
244
  readonly accessKeyLabel: string;
204
245
  autocapitalize: string;
@@ -283,27 +324,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
283
324
  scrollBy(options?: ScrollToOptions): void;
284
325
  scrollBy(x: number, y: number): void;
285
326
  scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
286
- /**
287
- * Emits the event corresponding to the luminance icon being clicked
288
- *
289
- * @remarks
290
- *
291
- * Activated when the user clicks on the moon icon on the navigation
292
- * bar right hand side
293
- *
294
- * @internal
295
- */
296
327
  scrollTo(options?: ScrollToOptions): void;
297
- /**
298
- * Emits the event corresponding to the luminance icon being clicked
299
- *
300
- * @remarks
301
- *
302
- * Activated when the user clicks on the moon icon on the navigation
303
- * bar right hand side
304
- *
305
- * @internal
306
- */
307
328
  scrollTo(x: number, y: number): void;
308
329
  setAttribute(qualifiedName: string, value: string): void;
309
330
  setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
@@ -319,7 +340,17 @@ declare const Navigation_base: abstract new (...args: any[]) => {
319
340
  readonly lastChild: ChildNode;
320
341
  readonly nextSibling: ChildNode;
321
342
  readonly nodeName: string;
322
- readonly nodeType: number;
343
+ readonly nodeType: number; /**
344
+ * Changes the route of the current page
345
+ *
346
+ * @remarks
347
+ *
348
+ * Requires setup of the Router and usage of the FAST Router
349
+ *
350
+ * @param path - string represeting the new route to move to
351
+ *
352
+ * @public
353
+ */
323
354
  nodeValue: string;
324
355
  readonly parentElement: HTMLElement;
325
356
  readonly parentNode: ParentNode;
@@ -331,6 +362,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
331
362
  contains(other: Node): boolean;
332
363
  getRootNode(options?: GetRootNodeOptions): Node;
333
364
  hasChildNodes(): boolean;
365
+ /**
366
+ * Opens the flyout menu on the left hand side
367
+ *
368
+ * @remarks
369
+ *
370
+ * Activated when the user clicks on the menu button on the navigation
371
+ * bar left hand side
372
+ *
373
+ * @internal
374
+ */
334
375
  insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
335
376
  isDefaultNamespace(namespace: string): boolean;
336
377
  isEqualNode(otherNode: Node): boolean;
package/docs/.gitattributes ADDED
@@ -0,0 +1,2 @@
1
+ *.md -diff
2
+ *.md linguist-generated
package/docs/api/foundation-header.languageoptions.md ADDED
@@ -0,0 +1,16 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [LanguageOptions](./foundation-header.languageoptions.md)
4
+
5
+ ## LanguageOptions type
6
+
7
+ Options for the language selector
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ export type LanguageOptions = {
13
+ availableLanguages: string[];
14
+ selectedLanguage: string;
15
+ };
16
+ ```
package/docs/api/foundation-header.md CHANGED
@@ -21,5 +21,6 @@
21
21
 
22
22
  | Type Alias | Description |
23
23
  | --- | --- |
24
+ | [LanguageOptions](./foundation-header.languageoptions.md) | Options for the language selector |
24
25
  | [NavEventDetailMap](./foundation-header.naveventdetailmap.md) | Events dispatched by the navigation control buttons |
25
26
 
package/docs/api/foundation-header.naveventdetailmap.md CHANGED
@@ -13,5 +13,6 @@ export type NavEventDetailMap = {
13
13
  'luminance-icon-clicked': void;
14
14
  'misc-icon-clicked': void;
15
15
  'notification-icon-clicked': void;
16
+ 'language-changed': void;
16
17
  };
17
18
  ```
package/docs/api/foundation-header.navigation.changelanguage.md ADDED
@@ -0,0 +1,28 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [changeLanguage](./foundation-header.navigation.changelanguage.md)
4
+
5
+ ## Navigation.changeLanguage() method
6
+
7
+ Changes the language of the application
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ changeLanguage(e: CustomEvent): void;
13
+ ```
14
+
15
+ ## Parameters
16
+
17
+ | Parameter | Type | Description |
18
+ | --- | --- | --- |
19
+ | e | CustomEvent | |
20
+
21
+ **Returns:**
22
+
23
+ void
24
+
25
+ ## Remarks
26
+
27
+ Activated when the user selects a language from the language selector that uses the I18next service.
28
+
package/docs/api/foundation-header.navigation.i18next.md ADDED
@@ -0,0 +1,11 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [i18next](./foundation-header.navigation.i18next.md)
4
+
5
+ ## Navigation.i18next property
6
+
7
+ **Signature:**
8
+
9
+ ```typescript
10
+ i18next: I18next;
11
+ ```
package/docs/api/foundation-header.navigation.languageoptions.md ADDED
@@ -0,0 +1,11 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [languageOptions](./foundation-header.navigation.languageoptions.md)
4
+
5
+ ## Navigation.languageOptions property
6
+
7
+ **Signature:**
8
+
9
+ ```typescript
10
+ languageOptions: LanguageOptions;
11
+ ```
package/docs/api/foundation-header.navigation.md CHANGED
@@ -24,10 +24,13 @@ export declare class Navigation extends Navigation_base
24
24
  | [auth](./foundation-header.navigation.auth.md) | | Auth | |
25
25
  | [credentialManager](./foundation-header.navigation.credentialmanager.md) | | CredentialManager | |
26
26
  | [hideSideBar](./foundation-header.navigation.hidesidebar.md) | | boolean | Boolean attribute which controls whether to include the sideNav component Control via<code>hide-side-bar</code> |
27
+ | [i18next](./foundation-header.navigation.i18next.md) | | I18next | |
28
+ | [languageOptions](./foundation-header.navigation.languageoptions.md) | | [LanguageOptions](./foundation-header.languageoptions.md) | |
27
29
  | [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> |
28
30
  | [ready](./foundation-header.navigation.ready.md) | | boolean | |
29
31
  | [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 |
30
32
  | [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> |
33
+ | [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> |
31
34
  | [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> |
32
35
  | [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> |
33
36
  | [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
38
41
 
39
42
  | Method | Modifiers | Description |
40
43
  | --- | --- | --- |
44
+ | [changeLanguage(e)](./foundation-header.navigation.changelanguage.md) | | Changes the language of the application |
41
45
  | [connectedCallback()](./foundation-header.navigation.connectedcallback.md) | | |
42
46
  | [logout()](./foundation-header.navigation.logout.md) | | Logs the user out of their session |
43
47
  | [navigateTo(path)](./foundation-header.navigation.navigateto.md) | | Changes the route of the current page |
package/docs/api/foundation-header.navigation.showlanguageselector.md ADDED
@@ -0,0 +1,18 @@
1
+ <!-- Do not edit this file. It is automatically generated by API Documenter. -->
2
+
3
+ [Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [showLanguageSelector](./foundation-header.navigation.showlanguageselector.md)
4
+
5
+ ## Navigation.showLanguageSelector property
6
+
7
+ Boolean attribute which controls whether to show the language selector on the navigation bar Control via `show-language-selector`
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ showLanguageSelector: boolean;
13
+ ```
14
+
15
+ ## Remarks
16
+
17
+ Requires `i18nextOptions` to be set
18
+
package/docs/api-report.md CHANGED
@@ -10,8 +10,15 @@ import { CredentialManager } from '@genesislcap/foundation-comms';
10
10
  import { ElementStyles } from '@microsoft/fast-element';
11
11
  import { EmitOptions } from '@genesislcap/foundation-events';
12
12
  import { EmitReturn } from '@genesislcap/foundation-events';
13
+ import { I18next } from '@genesislcap/foundation-i18n';
13
14
  import { ViewTemplate } from '@microsoft/fast-element';
14
15
 
16
+ // @public
17
+ export type LanguageOptions = {
18
+ availableLanguages: string[];
19
+ selectedLanguage: string;
20
+ };
21
+
15
22
  // @public
16
23
  export const MainStyles: ElementStyles;
17
24
 
@@ -20,6 +27,7 @@ export type NavEventDetailMap = {
20
27
  'luminance-icon-clicked': void;
21
28
  'misc-icon-clicked': void;
22
29
  'notification-icon-clicked': void;
30
+ 'language-changed': void;
23
31
  };
24
32
 
25
33
  // 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 = {
28
36
  export class Navigation extends Navigation_base {
29
37
  // (undocumented)
30
38
  auth: Auth;
39
+ changeLanguage(e: CustomEvent): void;
31
40
  // (undocumented)
32
41
  connectedCallback(): Promise<void>;
33
42
  // (undocumented)
34
43
  credentialManager: CredentialManager;
35
44
  hideSideBar: boolean;
45
+ // (undocumented)
46
+ i18next: I18next;
47
+ // (undocumented)
48
+ languageOptions: LanguageOptions;
36
49
  // @internal
37
50
  loadRemotes(): Promise<void>;
38
51
  logoSrc: any;
@@ -56,6 +69,7 @@ export class Navigation extends Navigation_base {
56
69
  // (undocumented)
57
70
  selectTemplate(): ViewTemplate<Navigation, any>;
58
71
  showConnectionIndicator: boolean;
72
+ showLanguageSelector: boolean;
59
73
  showLuminanceToggleButton: boolean;
60
74
  showMiscToggleButton: boolean;
61
75
  showNotificationsButton: boolean;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-header",
3
3
  "description": "Genesis Foundation Header",
4
- "version": "14.112.0",
4
+ "version": "14.113.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-header.d.ts",
@@ -60,19 +60,21 @@
60
60
  "test:debug": "genx test --debug"
61
61
  },
62
62
  "devDependencies": {
63
- "@genesislcap/foundation-testing": "14.112.0",
64
- "@genesislcap/genx": "14.112.0",
63
+ "@genesislcap/foundation-testing": "14.113.0",
64
+ "@genesislcap/genx": "14.113.0",
65
65
  "rimraf": "^3.0.2"
66
66
  },
67
67
  "dependencies": {
68
- "@genesislcap/foundation-comms": "14.112.0",
69
- "@genesislcap/foundation-events": "14.112.0",
70
- "@genesislcap/foundation-logger": "14.112.0",
71
- "@genesislcap/foundation-zero": "14.112.0",
68
+ "@genesislcap/foundation-comms": "14.113.0",
69
+ "@genesislcap/foundation-events": "14.113.0",
70
+ "@genesislcap/foundation-i18n": "14.113.0",
71
+ "@genesislcap/foundation-logger": "14.113.0",
72
+ "@genesislcap/foundation-zero": "14.113.0",
72
73
  "@microsoft/fast-colors": "^5.1.4",
73
74
  "@microsoft/fast-components": "^2.21.3",
74
75
  "@microsoft/fast-element": "^1.7.0",
75
76
  "@microsoft/fast-router": "^0.4.2",
77
+ "change-case": "^4.1.2",
76
78
  "tslib": "^2.3.1"
77
79
  },
78
80
  "repository": {
@@ -84,5 +86,5 @@
84
86
  "access": "public"
85
87
  },
86
88
  "customElements": "dist/custom-elements.json",
87
- "gitHead": "66629088a1ce30f4e56479756ad1e78a8152142f"
89
+ "gitHead": "df9615f43db021677cd2b7090d80478f456a5def"
88
90
  }