@genesislcap/foundation-header 14.132.0 → 14.133.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.
- package/dist/custom-elements.json +64 -6
- package/dist/dts/config/index.d.ts +2 -0
- package/dist/dts/config/index.d.ts.map +1 -0
- package/dist/dts/config/targetId.d.ts +31 -0
- package/dist/dts/config/targetId.d.ts.map +1 -0
- package/dist/dts/index.d.ts +2 -1
- package/dist/dts/index.d.ts.map +1 -1
- package/dist/dts/main/main.d.ts +42 -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/config/index.js +1 -0
- package/dist/esm/config/targetId.js +1 -0
- package/dist/esm/index.js +2 -1
- package/dist/esm/main/main.js +48 -0
- package/dist/esm/main/main.styles.js +2 -1
- package/dist/esm/main/main.template.js +23 -15
- package/dist/foundation-header.api.json +235 -3
- package/dist/foundation-header.d.ts +77 -23
- package/docs/api/foundation-header.elementtargetid.md +15 -0
- package/docs/api/foundation-header.headertargetid.md +13 -0
- package/docs/api/foundation-header.md +5 -0
- package/docs/api/foundation-header.navigation.md +2 -0
- package/docs/api/foundation-header.navigation.routebuttons.md +5 -0
- package/docs/api/foundation-header.navigation.routenavitems.md +13 -0
- package/docs/api/foundation-header.navigation.shownotificationsbutton.md +5 -0
- package/docs/api/foundation-header.navigation.tolocalisedtext.md +28 -0
- package/docs/api/foundation-header.navtargetid.md +13 -0
- package/docs/api/foundation-header.sidenavtargetid.md +13 -0
- package/docs/api/foundation-header.styletargetid.md +13 -0
- package/docs/api-report.md +24 -0
- package/package.json +19 -10
|
@@ -18,11 +18,40 @@
|
|
|
18
18
|
"name": "*",
|
|
19
19
|
"declaration": {
|
|
20
20
|
"name": "*",
|
|
21
|
-
"package": "./
|
|
21
|
+
"package": "./config"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"kind": "js",
|
|
26
|
+
"name": "*",
|
|
27
|
+
"declaration": {
|
|
28
|
+
"name": "*",
|
|
29
|
+
"package": "./main"
|
|
22
30
|
}
|
|
23
31
|
}
|
|
24
32
|
]
|
|
25
33
|
},
|
|
34
|
+
{
|
|
35
|
+
"kind": "javascript-module",
|
|
36
|
+
"path": "src/config/index.ts",
|
|
37
|
+
"declarations": [],
|
|
38
|
+
"exports": [
|
|
39
|
+
{
|
|
40
|
+
"kind": "js",
|
|
41
|
+
"name": "*",
|
|
42
|
+
"declaration": {
|
|
43
|
+
"name": "*",
|
|
44
|
+
"package": "./targetId"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
]
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"kind": "javascript-module",
|
|
51
|
+
"path": "src/config/targetId.ts",
|
|
52
|
+
"declarations": [],
|
|
53
|
+
"exports": []
|
|
54
|
+
},
|
|
26
55
|
{
|
|
27
56
|
"kind": "javascript-module",
|
|
28
57
|
"path": "src/components/components.ts",
|
|
@@ -109,7 +138,6 @@
|
|
|
109
138
|
{
|
|
110
139
|
"kind": "variable",
|
|
111
140
|
"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\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
141
|
"description": "Base styles for the foundation-header",
|
|
114
142
|
"return": {
|
|
115
143
|
"type": {
|
|
@@ -137,7 +165,7 @@
|
|
|
137
165
|
{
|
|
138
166
|
"kind": "variable",
|
|
139
167
|
"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.
|
|
168
|
+
"default": "html<Navigation>`\n ${when((x) => !x.hideSideBar, sideNavTemplate)}\n <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n ${app.registerElementsTarget<HeaderTargetId>('header-start')}\n <div class=\"nav-leftside\">\n ${app.registerElementsTarget<NavTargetId>('nav-start')}\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.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}\n </slot>\n ${app.registerElementsTarget<NavTargetId>('nav')}\n </div>\n <div class=\"nav-rightside\">\n ${app.registerElementsTarget<NavTargetId>('nav-end')}\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 ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n </div>\n`",
|
|
141
169
|
"description": "Template for Navigation class",
|
|
142
170
|
"return": {
|
|
143
171
|
"type": {
|
|
@@ -244,7 +272,8 @@
|
|
|
244
272
|
"type": {
|
|
245
273
|
"text": "boolean"
|
|
246
274
|
},
|
|
247
|
-
"description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`"
|
|
275
|
+
"description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`",
|
|
276
|
+
"deprecated": "- Add/Remove PBC Notify via `genx` instead."
|
|
248
277
|
},
|
|
249
278
|
{
|
|
250
279
|
"kind": "field",
|
|
@@ -269,7 +298,8 @@
|
|
|
269
298
|
"name": "languageOptions",
|
|
270
299
|
"type": {
|
|
271
300
|
"text": "LanguageOptions"
|
|
272
|
-
}
|
|
301
|
+
},
|
|
302
|
+
"default": "{\n availableLanguages: Object.keys(this.i18next.config.resources ?? {}),\n selectedLanguage: this.i18next.config.lng,\n }"
|
|
273
303
|
},
|
|
274
304
|
{
|
|
275
305
|
"kind": "field",
|
|
@@ -285,7 +315,16 @@
|
|
|
285
315
|
"type": {
|
|
286
316
|
"text": "Array<{\n index: number;\n path: string;\n title: string;\n icon: string;\n variant: string;\n }>"
|
|
287
317
|
},
|
|
288
|
-
"description": "If present the defined route buttons will be rendered in the header 'routes' slot"
|
|
318
|
+
"description": "If present the defined route buttons will be rendered in the header 'routes' slot",
|
|
319
|
+
"deprecated": "- Use `routeNavItems` instead."
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
"kind": "field",
|
|
323
|
+
"name": "routeNavItems",
|
|
324
|
+
"type": {
|
|
325
|
+
"text": "FoundationRouteNavItem[]"
|
|
326
|
+
},
|
|
327
|
+
"description": "If present the defined @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems will be rendered in the header 'routes' slot"
|
|
289
328
|
},
|
|
290
329
|
{
|
|
291
330
|
"kind": "method",
|
|
@@ -324,6 +363,24 @@
|
|
|
324
363
|
}
|
|
325
364
|
],
|
|
326
365
|
"description": "Changes the language of the application"
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
"kind": "method",
|
|
369
|
+
"name": "toLocalisedText",
|
|
370
|
+
"return": {
|
|
371
|
+
"type": {
|
|
372
|
+
"text": "string"
|
|
373
|
+
}
|
|
374
|
+
},
|
|
375
|
+
"parameters": [
|
|
376
|
+
{
|
|
377
|
+
"name": "text",
|
|
378
|
+
"type": {
|
|
379
|
+
"text": "string"
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
],
|
|
383
|
+
"description": "To localised text"
|
|
327
384
|
}
|
|
328
385
|
],
|
|
329
386
|
"events": [
|
|
@@ -379,6 +436,7 @@
|
|
|
379
436
|
"text": "boolean"
|
|
380
437
|
},
|
|
381
438
|
"description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`",
|
|
439
|
+
"deprecated": "- Add/Remove PBC Notify via `genx` instead.",
|
|
382
440
|
"fieldName": "showNotificationsButton"
|
|
383
441
|
},
|
|
384
442
|
{
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Header integration targets.
|
|
3
|
+
*
|
|
4
|
+
* @public
|
|
5
|
+
*/
|
|
6
|
+
export type HeaderTargetId = 'header-start' | 'header' | 'header-end';
|
|
7
|
+
/**
|
|
8
|
+
* Nav integration targets.
|
|
9
|
+
*
|
|
10
|
+
* @public
|
|
11
|
+
*/
|
|
12
|
+
export type NavTargetId = 'nav-start' | 'nav' | 'nav-end';
|
|
13
|
+
/**
|
|
14
|
+
* Side nav integration targets.
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
export type SideNavTargetId = 'side-nav-start' | 'side-nav' | 'side-nav-end';
|
|
19
|
+
/**
|
|
20
|
+
* Package element integration targets.
|
|
21
|
+
*
|
|
22
|
+
* @public
|
|
23
|
+
*/
|
|
24
|
+
export type ElementTargetId = HeaderTargetId | NavTargetId | SideNavTargetId;
|
|
25
|
+
/**
|
|
26
|
+
* Package style integration targets.
|
|
27
|
+
*
|
|
28
|
+
* @public
|
|
29
|
+
*/
|
|
30
|
+
export type StyleTargetId = 'header';
|
|
31
|
+
//# sourceMappingURL=targetId.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"targetId.d.ts","sourceRoot":"","sources":["../../../src/config/targetId.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,KAAK,GAAG,SAAS,CAAC;AAE1D;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,UAAU,GAAG,cAAc,CAAC;AAE7E;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,GAAG,eAAe,CAAC;AAE7E;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC"}
|
package/dist/dts/index.d.ts
CHANGED
package/dist/dts/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}
|
package/dist/dts/main/main.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Auth, CredentialManager } from '@genesislcap/foundation-comms';
|
|
2
2
|
import { I18next } from '@genesislcap/foundation-i18n';
|
|
3
|
+
import type { FoundationRouteNavItem } from '@genesislcap/foundation-ui';
|
|
3
4
|
/**
|
|
4
5
|
* Events dispatched by the navigation control buttons
|
|
5
6
|
* @public
|
|
@@ -48,7 +49,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
|
|
|
48
49
|
readonly classList: DOMTokenList;
|
|
49
50
|
className: string;
|
|
50
51
|
readonly clientHeight: number;
|
|
51
|
-
readonly clientLeft: number;
|
|
52
|
+
readonly clientLeft: number; /**
|
|
53
|
+
* Username of the logged in user
|
|
54
|
+
*/
|
|
52
55
|
readonly clientTop: number;
|
|
53
56
|
readonly clientWidth: number;
|
|
54
57
|
id: string;
|
|
@@ -120,17 +123,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
|
|
|
120
123
|
readonly lastChild: ChildNode;
|
|
121
124
|
readonly nextSibling: ChildNode;
|
|
122
125
|
readonly nodeName: string;
|
|
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
|
-
*/
|
|
126
|
+
readonly nodeType: number;
|
|
134
127
|
nodeValue: string;
|
|
135
128
|
readonly parentElement: HTMLElement;
|
|
136
129
|
readonly parentNode: ParentNode;
|
|
@@ -142,16 +135,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
|
|
|
142
135
|
contains(other: Node): boolean;
|
|
143
136
|
getRootNode(options?: GetRootNodeOptions): Node;
|
|
144
137
|
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
|
-
*/
|
|
155
138
|
insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
|
|
156
139
|
isDefaultNamespace(namespace: string): boolean;
|
|
157
140
|
isEqualNode(otherNode: Node): boolean;
|
|
@@ -219,7 +202,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
|
|
|
219
202
|
ariaValueMin: string;
|
|
220
203
|
ariaValueNow: string;
|
|
221
204
|
ariaValueText: string;
|
|
222
|
-
role: string;
|
|
205
|
+
role: string; /**
|
|
206
|
+
* Emits the event corresponding to the notification icon being clicked
|
|
207
|
+
*
|
|
208
|
+
* @remarks
|
|
209
|
+
*
|
|
210
|
+
* Activated when the user clicks on the bell icon on the navigation
|
|
211
|
+
* bar right hand side
|
|
212
|
+
*
|
|
213
|
+
* @internal
|
|
214
|
+
*/
|
|
223
215
|
animate(keyframes: PropertyIndexedKeyframes | Keyframe[], options?: number | KeyframeAnimationOptions): Animation;
|
|
224
216
|
getAnimations(options?: GetAnimationsOptions): Animation[];
|
|
225
217
|
after(...nodes: (string | Node)[]): void;
|
|
@@ -375,6 +367,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
|
|
|
375
367
|
*
|
|
376
368
|
* @param userName - String which defines the username to be displayed in the navigation bar.
|
|
377
369
|
* @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
|
|
370
|
+
* @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.
|
|
378
371
|
* @param languageOptions - Object which defines the language options to be displayed in the language selector.
|
|
379
372
|
*
|
|
380
373
|
* @public
|
|
@@ -430,8 +423,14 @@ export declare class Navigation extends Navigation_base {
|
|
|
430
423
|
* @remarks
|
|
431
424
|
*
|
|
432
425
|
* If the user clicks the icon when shown then this class will emit the 'notification-icon-clicked' event
|
|
426
|
+
*
|
|
427
|
+
* @deprecated - Add/Remove PBC Notify via `genx` instead.
|
|
433
428
|
*/
|
|
434
429
|
showNotificationsButton: boolean;
|
|
430
|
+
/**
|
|
431
|
+
* @internal
|
|
432
|
+
*/
|
|
433
|
+
showNotificationsButtonChanged(): void;
|
|
435
434
|
/**
|
|
436
435
|
* Boolean attribute which controls whether to show the connection indicator on the navigation bar
|
|
437
436
|
* Control via `show-connection-indicator`
|
|
@@ -457,6 +456,8 @@ export declare class Navigation extends Navigation_base {
|
|
|
457
456
|
hideSideBar: boolean;
|
|
458
457
|
/**
|
|
459
458
|
* If present the defined route buttons will be rendered in the header 'routes' slot
|
|
459
|
+
*
|
|
460
|
+
* @deprecated - Use `routeNavItems` instead.
|
|
460
461
|
*/
|
|
461
462
|
routeButtons: Array<{
|
|
462
463
|
index: number;
|
|
@@ -465,6 +466,14 @@ export declare class Navigation extends Navigation_base {
|
|
|
465
466
|
icon: string;
|
|
466
467
|
variant: string;
|
|
467
468
|
}>;
|
|
469
|
+
/**
|
|
470
|
+
* @internal
|
|
471
|
+
*/
|
|
472
|
+
routeButtonsChanged(): void;
|
|
473
|
+
/**
|
|
474
|
+
* If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
|
|
475
|
+
*/
|
|
476
|
+
routeNavItems: FoundationRouteNavItem[];
|
|
468
477
|
/**
|
|
469
478
|
* Load remote components
|
|
470
479
|
*
|
|
@@ -553,6 +562,16 @@ export declare class Navigation extends Navigation_base {
|
|
|
553
562
|
* @experimental
|
|
554
563
|
*/
|
|
555
564
|
changeLanguage(e: CustomEvent): void;
|
|
565
|
+
/**
|
|
566
|
+
* To localised text
|
|
567
|
+
* @remarks
|
|
568
|
+
* Returns localised version of the text if available.
|
|
569
|
+
* @experimental
|
|
570
|
+
* @privateRemarks
|
|
571
|
+
* Perhaps move things like showLanguageSelector into the config and just call i18next directly for translations.
|
|
572
|
+
* Is languageOptions needed.
|
|
573
|
+
*/
|
|
574
|
+
toLocalisedText(text: string): string;
|
|
556
575
|
}
|
|
557
576
|
export {};
|
|
558
577
|
//# sourceMappingURL=main.d.ts.map
|
|
@@ -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;AAEtF,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;
|
|
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;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAuB,MAAM,4BAA4B,CAAC;AAS9F;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAkDA;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmPH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA3SL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;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;;;;;;;;;OASG;IAEH,uBAAuB,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,8BAA8B;IAI9B;;;;OAIG;IAEH,uBAAuB,EAAE,OAAO,CAAQ;IAExC;;;;;;;;OAQG;IAEH,oBAAoB,EAAE,OAAO,CAAS;IAE1B,eAAe,EAAE,eAAe,CAG1C;IAEF;;;;OAIG;IAEH,WAAW,EAAE,OAAO,CAAC;IAErB;;;;OAIG;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;;OAEG;IACH,mBAAmB;IAiBnB;;OAEG;IACS,aAAa,EAAE,sBAAsB,EAAE,CAAC;IAEpD;;;;;;;;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;IAK7B;;;;;;;;OAQG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;CAKtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAYA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA6PgD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA0EzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA+GvB,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './targetId';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from './
|
|
1
|
+
export * from './config';
|
|
2
|
+
export * from './main';
|
package/dist/esm/main/main.js
CHANGED
|
@@ -31,6 +31,7 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
|
|
|
31
31
|
*
|
|
32
32
|
* @param userName - String which defines the username to be displayed in the navigation bar.
|
|
33
33
|
* @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.
|
|
34
|
+
* @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.
|
|
34
35
|
* @param languageOptions - Object which defines the language options to be displayed in the language selector.
|
|
35
36
|
*
|
|
36
37
|
* @public
|
|
@@ -43,6 +44,7 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
|
|
|
43
44
|
*/
|
|
44
45
|
let Navigation = class Navigation extends EventEmitter(FASTElement) {
|
|
45
46
|
constructor() {
|
|
47
|
+
var _a;
|
|
46
48
|
super(...arguments);
|
|
47
49
|
this.ready = false;
|
|
48
50
|
this.sideNavOpen = false;
|
|
@@ -71,6 +73,10 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
|
|
|
71
73
|
* Requires `i18nextOptions` to be set
|
|
72
74
|
*/
|
|
73
75
|
this.showLanguageSelector = false;
|
|
76
|
+
this.languageOptions = {
|
|
77
|
+
availableLanguages: Object.keys((_a = this.i18next.config.resources) !== null && _a !== void 0 ? _a : {}),
|
|
78
|
+
selectedLanguage: this.i18next.config.lng,
|
|
79
|
+
};
|
|
74
80
|
}
|
|
75
81
|
connectedCallback() {
|
|
76
82
|
const _super = Object.create(null, {
|
|
@@ -85,6 +91,31 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
|
|
|
85
91
|
: 'Genesis User';
|
|
86
92
|
});
|
|
87
93
|
}
|
|
94
|
+
/**
|
|
95
|
+
* @internal
|
|
96
|
+
*/
|
|
97
|
+
showNotificationsButtonChanged() {
|
|
98
|
+
logger.deprecated('show-notification-button', 'Leave unset and add/remove PBC Notify instead.');
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* @internal
|
|
102
|
+
*/
|
|
103
|
+
routeButtonsChanged() {
|
|
104
|
+
logger.deprecated('routeButtons', 'Use routeNavItems instead.');
|
|
105
|
+
if (!this.routeNavItems) {
|
|
106
|
+
this.routeNavItems = this.routeButtons.map((button) => ({
|
|
107
|
+
title: button.title,
|
|
108
|
+
routePath: button.path,
|
|
109
|
+
placementIndex: button.index,
|
|
110
|
+
icon: button.icon
|
|
111
|
+
? {
|
|
112
|
+
name: button.icon,
|
|
113
|
+
variant: button.variant,
|
|
114
|
+
}
|
|
115
|
+
: undefined,
|
|
116
|
+
}));
|
|
117
|
+
}
|
|
118
|
+
}
|
|
88
119
|
/**
|
|
89
120
|
* Load remote components
|
|
90
121
|
*
|
|
@@ -216,6 +247,20 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
|
|
|
216
247
|
this.$emit('language-changed', e.detail.value);
|
|
217
248
|
this.i18next.changeLanguageTo(e.detail.value);
|
|
218
249
|
}
|
|
250
|
+
/**
|
|
251
|
+
* To localised text
|
|
252
|
+
* @remarks
|
|
253
|
+
* Returns localised version of the text if available.
|
|
254
|
+
* @experimental
|
|
255
|
+
* @privateRemarks
|
|
256
|
+
* Perhaps move things like showLanguageSelector into the config and just call i18next directly for translations.
|
|
257
|
+
* Is languageOptions needed.
|
|
258
|
+
*/
|
|
259
|
+
toLocalisedText(text) {
|
|
260
|
+
return this.showLanguageSelector && this.languageOptions
|
|
261
|
+
? this.i18next.t(text, { lng: this.i18next.language })
|
|
262
|
+
: text;
|
|
263
|
+
}
|
|
219
264
|
};
|
|
220
265
|
__decorate([
|
|
221
266
|
Auth
|
|
@@ -262,6 +307,9 @@ __decorate([
|
|
|
262
307
|
__decorate([
|
|
263
308
|
observable
|
|
264
309
|
], Navigation.prototype, "routeButtons", void 0);
|
|
310
|
+
__decorate([
|
|
311
|
+
observable
|
|
312
|
+
], Navigation.prototype, "routeNavItems", void 0);
|
|
265
313
|
Navigation = __decorate([
|
|
266
314
|
customElement({
|
|
267
315
|
name: 'foundation-header',
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getApp } from '@genesislcap/foundation-shell/app';
|
|
1
2
|
import { neutralLayer2 } from '@microsoft/fast-components';
|
|
2
3
|
import { css } from '@microsoft/fast-element';
|
|
3
4
|
import { backgroundNavOption, ColorHEX, defaultBackgroundHover, defaultBackgroundItem, PrimaryRapidColorHEX, } from '../styles/colors';
|
|
@@ -261,4 +262,4 @@ export const MainStyles = css `
|
|
|
261
262
|
.language-selector:focus-within {
|
|
262
263
|
border-color: #333;
|
|
263
264
|
}
|
|
264
|
-
|
|
265
|
+
`.withBehaviors(getApp().registerStylesTarget('header'));
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { getApp } from '@genesislcap/foundation-shell/app';
|
|
1
2
|
import { html, repeat, when } from '@microsoft/fast-element';
|
|
2
|
-
|
|
3
|
+
const app = getApp();
|
|
3
4
|
const sideNavTemplate = html `
|
|
4
5
|
<zero-flyout
|
|
5
6
|
position="left"
|
|
@@ -26,35 +27,37 @@ const sideNavTemplate = html `
|
|
|
26
27
|
</div>
|
|
27
28
|
</zero-flyout>
|
|
28
29
|
`;
|
|
29
|
-
const
|
|
30
|
+
const defaultRouteNavItemsTemplate = html `
|
|
30
31
|
<zero-button
|
|
31
32
|
appearance="neutral-grey"
|
|
32
|
-
value="1"
|
|
33
33
|
@click=${(x) => x.navigateTo('protected')}
|
|
34
34
|
data-test-id="home-button"
|
|
35
35
|
>
|
|
36
36
|
<zero-icon name="home"></zero-icon>
|
|
37
37
|
Home
|
|
38
38
|
</zero-button>
|
|
39
|
-
<
|
|
39
|
+
<zero-button @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
|
|
40
40
|
<zero-icon name="users"></zero-icon>
|
|
41
41
|
Profiles
|
|
42
|
-
</
|
|
42
|
+
</zero-button>
|
|
43
43
|
`;
|
|
44
|
-
const
|
|
44
|
+
const routeNavItemsTemplate = html `
|
|
45
45
|
<template>
|
|
46
|
-
${repeat((x) => x.
|
|
46
|
+
${repeat((x) => x.routeNavItems, html `
|
|
47
47
|
<zero-button
|
|
48
48
|
appearance="neutral-grey"
|
|
49
49
|
slot="routes"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
data-test-id="${(x) => x.testId}"
|
|
50
|
+
@click=${(x, c) => c.parent.navigateTo(x.routePath)}
|
|
51
|
+
data-test-id="${(x) => `${x.routePath}-button`}"
|
|
53
52
|
>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
53
|
+
${when((x) => x.icon, html `
|
|
54
|
+
<zero-icon
|
|
55
|
+
name="${(x) => x.icon.name}"
|
|
56
|
+
variant="${(x) => x.icon.variant}"
|
|
57
|
+
size="${(x) => x.icon.size}"
|
|
58
|
+
></zero-icon>
|
|
59
|
+
`)}
|
|
60
|
+
${(x, c) => c.parent.toLocalisedText(x.title)}
|
|
58
61
|
</zero-button>
|
|
59
62
|
`)}
|
|
60
63
|
</template>
|
|
@@ -75,7 +78,9 @@ const routeButtonsTemplate = html `
|
|
|
75
78
|
export const NavTemplate = html `
|
|
76
79
|
${when((x) => !x.hideSideBar, sideNavTemplate)}
|
|
77
80
|
<div class="nav-listbox" data-test-id="nav-bar">
|
|
81
|
+
${app.registerElementsTarget('header-start')}
|
|
78
82
|
<div class="nav-leftside">
|
|
83
|
+
${app.registerElementsTarget('nav-start')}
|
|
79
84
|
${when((x) => !x.hideSideBar, html `
|
|
80
85
|
<div
|
|
81
86
|
class="bars-container"
|
|
@@ -89,10 +94,12 @@ export const NavTemplate = html `
|
|
|
89
94
|
<img src=${(x) => x.logoSrc} class="logo" part="logo" />
|
|
90
95
|
</div>
|
|
91
96
|
<slot name="routes" data-test-id="route-buttons">
|
|
92
|
-
${(x) => (x.
|
|
97
|
+
${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}
|
|
93
98
|
</slot>
|
|
99
|
+
${app.registerElementsTarget('nav')}
|
|
94
100
|
</div>
|
|
95
101
|
<div class="nav-rightside">
|
|
102
|
+
${app.registerElementsTarget('nav-end')}
|
|
96
103
|
${when((x) => x.showLuminanceToggleButton, html `
|
|
97
104
|
<div
|
|
98
105
|
class="icon-container"
|
|
@@ -156,6 +163,7 @@ export const NavTemplate = html `
|
|
|
156
163
|
${(x) => x.userName}
|
|
157
164
|
</zero-button>
|
|
158
165
|
</div>
|
|
166
|
+
${app.registerElementsTarget(['header', 'header-end'])}
|
|
159
167
|
</div>
|
|
160
168
|
`;
|
|
161
169
|
/**
|