@genesislcap/foundation-header 14.17.0 → 14.19.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 (15) hide show
  1. package/dist/custom-elements.json +181 -163
  2. package/dist/dts/main/main.d.ts +16 -4
  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 +9 -0
  7. package/dist/esm/main/main.styles.js +4 -0
  8. package/dist/esm/main/main.template.js +5 -0
  9. package/dist/foundation-header.api.json +30 -0
  10. package/dist/foundation-header.d.ts +16 -4
  11. package/docs/api/foundation-header.navigation.md +1 -0
  12. package/docs/api/foundation-header.navigation.showconnectionindicator.md +13 -0
  13. package/docs/api-report.md +1 -0
  14. package/package.json +8 -8
  15. package/test/e2e/pages/header.ts +2 -0
package/dist/custom-elements.json CHANGED
@@ -71,167 +71,6 @@
71
71
  }
72
72
  ]
73
73
  },
74
- {
75
- "kind": "javascript-module",
76
- "path": "src/styles/colors.ts",
77
- "declarations": [
78
- {
79
- "kind": "function",
80
- "name": "getWebRGBA",
81
- "parameters": [
82
- {
83
- "name": "rgb",
84
- "type": {
85
- "text": "ColorRGBA64"
86
- }
87
- },
88
- {
89
- "name": "alpha",
90
- "default": "1.0",
91
- "type": {
92
- "text": "number"
93
- }
94
- }
95
- ]
96
- },
97
- {
98
- "kind": "variable",
99
- "name": "defaultBackgroundHover"
100
- },
101
- {
102
- "kind": "variable",
103
- "name": "defaultBackgroundItem"
104
- },
105
- {
106
- "kind": "variable",
107
- "name": "backgroundNavOption"
108
- }
109
- ],
110
- "exports": [
111
- {
112
- "kind": "js",
113
- "name": "getWebRGBA",
114
- "declaration": {
115
- "name": "getWebRGBA",
116
- "module": "src/styles/colors.ts"
117
- }
118
- },
119
- {
120
- "kind": "js",
121
- "name": "defaultBackgroundHover",
122
- "declaration": {
123
- "name": "defaultBackgroundHover",
124
- "module": "src/styles/colors.ts"
125
- }
126
- },
127
- {
128
- "kind": "js",
129
- "name": "defaultBackgroundItem",
130
- "declaration": {
131
- "name": "defaultBackgroundItem",
132
- "module": "src/styles/colors.ts"
133
- }
134
- },
135
- {
136
- "kind": "js",
137
- "name": "backgroundNavOption",
138
- "declaration": {
139
- "name": "backgroundNavOption",
140
- "module": "src/styles/colors.ts"
141
- }
142
- }
143
- ]
144
- },
145
- {
146
- "kind": "javascript-module",
147
- "path": "src/styles/index.ts",
148
- "declarations": [],
149
- "exports": [
150
- {
151
- "kind": "js",
152
- "name": "*",
153
- "declaration": {
154
- "name": "*",
155
- "package": "./colors"
156
- }
157
- },
158
- {
159
- "kind": "js",
160
- "name": "*",
161
- "declaration": {
162
- "name": "*",
163
- "package": "./styles"
164
- }
165
- }
166
- ]
167
- },
168
- {
169
- "kind": "javascript-module",
170
- "path": "src/styles/styles.ts",
171
- "declarations": [
172
- {
173
- "kind": "function",
174
- "name": "mixinScreen",
175
- "parameters": [
176
- {
177
- "name": "display",
178
- "default": "'block'",
179
- "type": {
180
- "text": "string"
181
- }
182
- }
183
- ],
184
- "description": "TODO: Bring all the style and typography mixins into the design system package"
185
- },
186
- {
187
- "kind": "function",
188
- "name": "genesisLogo",
189
- "parameters": [
190
- {
191
- "name": "slot",
192
- "default": "'start'"
193
- }
194
- ],
195
- "description": "TODO"
196
- },
197
- {
198
- "kind": "function",
199
- "name": "settingsIcon",
200
- "parameters": [
201
- {
202
- "name": "slot",
203
- "default": "'start'"
204
- }
205
- ]
206
- }
207
- ],
208
- "exports": [
209
- {
210
- "kind": "js",
211
- "name": "mixinScreen",
212
- "declaration": {
213
- "name": "mixinScreen",
214
- "module": "src/styles/styles.ts"
215
- }
216
- },
217
- {
218
- "kind": "js",
219
- "name": "genesisLogo",
220
- "declaration": {
221
- "name": "genesisLogo",
222
- "module": "src/styles/styles.ts"
223
- }
224
- },
225
- {
226
- "kind": "js",
227
- "name": "settingsIcon",
228
- "declaration": {
229
- "name": "settingsIcon",
230
- "module": "src/styles/styles.ts"
231
- }
232
- }
233
- ]
234
- },
235
74
  {
236
75
  "kind": "javascript-module",
237
76
  "path": "src/main/index.ts",
@@ -270,7 +109,7 @@
270
109
  {
271
110
  "kind": "variable",
272
111
  "name": "MainStyles",
273
- "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: 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 .open-nav {\n width: 300px;\n }\n\n .top-layout {\n background: 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: 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: 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`",
274
113
  "description": "Base styles for the foundation-header",
275
114
  "return": {
276
115
  "type": {
@@ -298,7 +137,7 @@
298
137
  {
299
138
  "kind": "variable",
300
139
  "name": "NavTemplate",
301
- "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\"></zero-icon>\n </div>\n `\n )}\n <div class=\"logo-container\">\n <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" data-test-id=\"nav-bar-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 class=\"icon-container\" data-test-id=\"luminance-toggle-button\">\n <zero-icon\n @click=${(x) => x.luminanceIconEvent()}\n variant=\"regular\"\n name=\"moon\"\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\">\n <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\"></zero-icon>\n </div>\n `\n )}\n ${when(\n (x) => x.showNotificationsButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"notifications-button\">\n <zero-icon\n variant=\"regular\"\n @click=${(x) => x.notificationIconEvent()}\n name=\"bell\"\n ></zero-icon>\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\"></zero-icon>\n </div>\n `\n )}\n <div class=\"logo-container\">\n <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" data-test-id=\"nav-bar-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 class=\"icon-container\" data-test-id=\"luminance-toggle-button\">\n <zero-icon\n @click=${(x) => x.luminanceIconEvent()}\n variant=\"regular\"\n name=\"moon\"\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\">\n <zero-icon @click=${(x) => x.miscIconEvent()} name=\"th\"></zero-icon>\n </div>\n `\n )}\n ${when(\n (x) => x.showNotificationsButton,\n html<Navigation>`\n <div class=\"icon-container\" data-test-id=\"notifications-button\">\n <zero-icon\n variant=\"regular\"\n @click=${(x) => x.notificationIconEvent()}\n name=\"bell\"\n ></zero-icon>\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`",
302
141
  "description": "Template for Navigation class",
303
142
  "return": {
304
143
  "type": {
@@ -407,6 +246,15 @@
407
246
  },
408
247
  "description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`"
409
248
  },
249
+ {
250
+ "kind": "field",
251
+ "name": "showConnectionIndicator",
252
+ "type": {
253
+ "text": "boolean"
254
+ },
255
+ "default": "true",
256
+ "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`"
257
+ },
410
258
  {
411
259
  "kind": "field",
412
260
  "name": "hideSideBar",
@@ -486,6 +334,15 @@
486
334
  "description": "Boolean attribute which controls whether to show the notification (bell) icon on the navigation bar\nControl via `show-notification-button`",
487
335
  "fieldName": "showNotificationsButton"
488
336
  },
337
+ {
338
+ "name": "show-connection-indicator",
339
+ "type": {
340
+ "text": "boolean"
341
+ },
342
+ "default": "true",
343
+ "description": "Boolean attribute which controls whether to show the connection indicator on the navigation bar\nControl via `show-connection-indicator`",
344
+ "fieldName": "showConnectionIndicator"
345
+ },
489
346
  {
490
347
  "name": "hide-side-bar",
491
348
  "type": {
@@ -528,6 +385,167 @@
528
385
  }
529
386
  ]
530
387
  },
388
+ {
389
+ "kind": "javascript-module",
390
+ "path": "src/styles/colors.ts",
391
+ "declarations": [
392
+ {
393
+ "kind": "function",
394
+ "name": "getWebRGBA",
395
+ "parameters": [
396
+ {
397
+ "name": "rgb",
398
+ "type": {
399
+ "text": "ColorRGBA64"
400
+ }
401
+ },
402
+ {
403
+ "name": "alpha",
404
+ "default": "1.0",
405
+ "type": {
406
+ "text": "number"
407
+ }
408
+ }
409
+ ]
410
+ },
411
+ {
412
+ "kind": "variable",
413
+ "name": "defaultBackgroundHover"
414
+ },
415
+ {
416
+ "kind": "variable",
417
+ "name": "defaultBackgroundItem"
418
+ },
419
+ {
420
+ "kind": "variable",
421
+ "name": "backgroundNavOption"
422
+ }
423
+ ],
424
+ "exports": [
425
+ {
426
+ "kind": "js",
427
+ "name": "getWebRGBA",
428
+ "declaration": {
429
+ "name": "getWebRGBA",
430
+ "module": "src/styles/colors.ts"
431
+ }
432
+ },
433
+ {
434
+ "kind": "js",
435
+ "name": "defaultBackgroundHover",
436
+ "declaration": {
437
+ "name": "defaultBackgroundHover",
438
+ "module": "src/styles/colors.ts"
439
+ }
440
+ },
441
+ {
442
+ "kind": "js",
443
+ "name": "defaultBackgroundItem",
444
+ "declaration": {
445
+ "name": "defaultBackgroundItem",
446
+ "module": "src/styles/colors.ts"
447
+ }
448
+ },
449
+ {
450
+ "kind": "js",
451
+ "name": "backgroundNavOption",
452
+ "declaration": {
453
+ "name": "backgroundNavOption",
454
+ "module": "src/styles/colors.ts"
455
+ }
456
+ }
457
+ ]
458
+ },
459
+ {
460
+ "kind": "javascript-module",
461
+ "path": "src/styles/index.ts",
462
+ "declarations": [],
463
+ "exports": [
464
+ {
465
+ "kind": "js",
466
+ "name": "*",
467
+ "declaration": {
468
+ "name": "*",
469
+ "package": "./colors"
470
+ }
471
+ },
472
+ {
473
+ "kind": "js",
474
+ "name": "*",
475
+ "declaration": {
476
+ "name": "*",
477
+ "package": "./styles"
478
+ }
479
+ }
480
+ ]
481
+ },
482
+ {
483
+ "kind": "javascript-module",
484
+ "path": "src/styles/styles.ts",
485
+ "declarations": [
486
+ {
487
+ "kind": "function",
488
+ "name": "mixinScreen",
489
+ "parameters": [
490
+ {
491
+ "name": "display",
492
+ "default": "'block'",
493
+ "type": {
494
+ "text": "string"
495
+ }
496
+ }
497
+ ],
498
+ "description": "TODO: Bring all the style and typography mixins into the design system package"
499
+ },
500
+ {
501
+ "kind": "function",
502
+ "name": "genesisLogo",
503
+ "parameters": [
504
+ {
505
+ "name": "slot",
506
+ "default": "'start'"
507
+ }
508
+ ],
509
+ "description": "TODO"
510
+ },
511
+ {
512
+ "kind": "function",
513
+ "name": "settingsIcon",
514
+ "parameters": [
515
+ {
516
+ "name": "slot",
517
+ "default": "'start'"
518
+ }
519
+ ]
520
+ }
521
+ ],
522
+ "exports": [
523
+ {
524
+ "kind": "js",
525
+ "name": "mixinScreen",
526
+ "declaration": {
527
+ "name": "mixinScreen",
528
+ "module": "src/styles/styles.ts"
529
+ }
530
+ },
531
+ {
532
+ "kind": "js",
533
+ "name": "genesisLogo",
534
+ "declaration": {
535
+ "name": "genesisLogo",
536
+ "module": "src/styles/styles.ts"
537
+ }
538
+ },
539
+ {
540
+ "kind": "js",
541
+ "name": "settingsIcon",
542
+ "declaration": {
543
+ "name": "settingsIcon",
544
+ "module": "src/styles/styles.ts"
545
+ }
546
+ }
547
+ ]
548
+ },
531
549
  {
532
550
  "kind": "javascript-module",
533
551
  "path": "src/utils/index.ts",
package/dist/dts/main/main.d.ts CHANGED
@@ -90,9 +90,6 @@ declare const Navigation_base: new (...args: any[]) => {
90
90
  hasAttributeNS(namespace: string, localName: string): boolean;
91
91
  hasAttributes(): boolean;
92
92
  hasPointerCapture(pointerId: number): boolean;
93
- /**
94
- * If present the defined route buttons will be rendered in the header 'routes' slot
95
- */
96
93
  insertAdjacentElement(where: InsertPosition, element: Element): Element;
97
94
  insertAdjacentHTML(position: InsertPosition, text: string): void;
98
95
  insertAdjacentText(where: InsertPosition, data: string): void;
@@ -149,7 +146,16 @@ declare const Navigation_base: new (...args: any[]) => {
149
146
  readonly CDATA_SECTION_NODE: number;
150
147
  readonly COMMENT_NODE: number;
151
148
  readonly DOCUMENT_FRAGMENT_NODE: number;
152
- readonly DOCUMENT_NODE: number;
149
+ readonly DOCUMENT_NODE: number; /**
150
+ * Emits the event corresponding to the notification icon being clicked
151
+ *
152
+ * @remarks
153
+ *
154
+ * Activated when the user clicks on the bell icon on the navigation
155
+ * bar right hand side
156
+ *
157
+ * @internal
158
+ */
153
159
  readonly DOCUMENT_POSITION_CONTAINED_BY: number;
154
160
  readonly DOCUMENT_POSITION_CONTAINS: number;
155
161
  readonly DOCUMENT_POSITION_DISCONNECTED: number;
@@ -399,6 +405,12 @@ export declare class Navigation extends Navigation_base {
399
405
  * If the user clicks the icon when shown then this class will emit the 'notification-icon-clicked' event
400
406
  */
401
407
  showNotificationsButton: boolean;
408
+ /**
409
+ * Boolean attribute which controls whether to show the connection indicator on the navigation bar
410
+ * Control via `show-connection-indicator`
411
+ *
412
+ */
413
+ showConnectionIndicator: boolean;
402
414
  /**
403
415
  * Boolean attribute which controls whether to include the sideNav component
404
416
  * Control via`hide-side-bar`
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAyEA;;;;;;;OAOG;;;;;;;;;;;;IAsBH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnGL;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAKa,UAAW,SAAQ,eAAmC;IAC3D,IAAI,EAAG,IAAI,CAAC;IACC,iBAAiB,EAAG,iBAAiB,CAAC;IAC7C,QAAQ,EAAG,GAAG,CAAC;IACf,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,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;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCAyEA;;;;;;;OAOG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAmJH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvOL;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAKa,UAAW,SAAQ,eAAmC;IAC3D,IAAI,EAAG,IAAI,CAAC;IACC,iBAAiB,EAAG,iBAAiB,CAAC;IAC7C,QAAQ,EAAG,GAAG,CAAC;IACf,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"}
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":"AAEA,OAAO,YAAY,CAAC;AASpB;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA2OtB,CAAC"}
1
+ {"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAEA,OAAO,YAAY,CAAC;AASpB;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,iDA+OtB,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,+BA8DvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,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;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAiEzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BAsEvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,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
@@ -41,6 +41,12 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
41
41
  * If this attribute is not set then the Genesis logo is shown instead
42
42
  */
43
43
  this.logoSrc = logo;
44
+ /**
45
+ * Boolean attribute which controls whether to show the connection indicator on the navigation bar
46
+ * Control via `show-connection-indicator`
47
+ *
48
+ */
49
+ this.showConnectionIndicator = true;
44
50
  }
45
51
  connectedCallback() {
46
52
  const _super = Object.create(null, {
@@ -204,6 +210,9 @@ __decorate([
204
210
  __decorate([
205
211
  attr({ mode: 'boolean', attribute: 'show-notification-button' })
206
212
  ], Navigation.prototype, "showNotificationsButton", void 0);
213
+ __decorate([
214
+ attr({ mode: 'boolean', attribute: 'show-connection-indicator' })
215
+ ], Navigation.prototype, "showConnectionIndicator", void 0);
207
216
  __decorate([
208
217
  attr({ mode: 'boolean', attribute: 'hide-side-bar' })
209
218
  ], Navigation.prototype, "hideSideBar", void 0);
package/dist/esm/main/main.styles.js CHANGED
@@ -164,6 +164,10 @@ export const MainStyles = css `
164
164
  cursor: pointer;
165
165
  }
166
166
 
167
+ .connection-indicator-container {
168
+ margin-right: calc(var(--design-unit) * 4px);
169
+ }
170
+
167
171
  .open-nav {
168
172
  width: 300px;
169
173
  }
package/dist/esm/main/main.template.js CHANGED
@@ -113,6 +113,11 @@ export const NavTemplate = html `
113
113
  ></zero-icon>
114
114
  </div>
115
115
  `)}
116
+ ${when((x) => x.showConnectionIndicator, html `
117
+ <div class="connection-indicator-container" data-test-id="connection-indicator">
118
+ <zero-connection-indicator show-label="false"></zero-connection-indicator>
119
+ </div>
120
+ `)}
116
121
  <zero-button appearance="neutral-grey" data-test-id="user-button">
117
122
  <zero-icon name="user-circle"></zero-icon>
118
123
  ${(x) => x.userName}
package/dist/foundation-header.api.json CHANGED
@@ -637,6 +637,36 @@
637
637
  "isAbstract": false,
638
638
  "name": "selectTemplate"
639
639
  },
640
+ {
641
+ "kind": "Property",
642
+ "canonicalReference": "@genesislcap/foundation-header!Navigation#showConnectionIndicator:member",
643
+ "docComment": "/**\n * Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via `show-connection-indicator`\n */\n",
644
+ "excerptTokens": [
645
+ {
646
+ "kind": "Content",
647
+ "text": "showConnectionIndicator: "
648
+ },
649
+ {
650
+ "kind": "Content",
651
+ "text": "boolean"
652
+ },
653
+ {
654
+ "kind": "Content",
655
+ "text": ";"
656
+ }
657
+ ],
658
+ "isReadonly": false,
659
+ "isOptional": false,
660
+ "releaseTag": "Public",
661
+ "name": "showConnectionIndicator",
662
+ "propertyTypeTokenRange": {
663
+ "startIndex": 1,
664
+ "endIndex": 2
665
+ },
666
+ "isStatic": false,
667
+ "isProtected": false,
668
+ "isAbstract": false
669
+ },
640
670
  {
641
671
  "kind": "Property",
642
672
  "canonicalReference": "@genesislcap/foundation-header!Navigation#showLuminanceToggleButton:member",
package/dist/foundation-header.d.ts CHANGED
@@ -91,6 +91,12 @@ export declare class Navigation extends Navigation_base {
91
91
  * If the user clicks the icon when shown then this class will emit the 'notification-icon-clicked' event
92
92
  */
93
93
  showNotificationsButton: boolean;
94
+ /**
95
+ * Boolean attribute which controls whether to show the connection indicator on the navigation bar
96
+ * Control via `show-connection-indicator`
97
+ *
98
+ */
99
+ showConnectionIndicator: boolean;
94
100
  /**
95
101
  * Boolean attribute which controls whether to include the sideNav component
96
102
  * Control via`hide-side-bar`
@@ -269,9 +275,6 @@ declare const Navigation_base: new (...args: any[]) => {
269
275
  hasAttributeNS(namespace: string, localName: string): boolean;
270
276
  hasAttributes(): boolean;
271
277
  hasPointerCapture(pointerId: number): boolean;
272
- /**
273
- * If present the defined route buttons will be rendered in the header 'routes' slot
274
- */
275
278
  insertAdjacentElement(where: InsertPosition, element: Element): Element;
276
279
  insertAdjacentHTML(position: InsertPosition, text: string): void;
277
280
  insertAdjacentText(where: InsertPosition, data: string): void;
@@ -328,7 +331,16 @@ declare const Navigation_base: new (...args: any[]) => {
328
331
  readonly CDATA_SECTION_NODE: number;
329
332
  readonly COMMENT_NODE: number;
330
333
  readonly DOCUMENT_FRAGMENT_NODE: number;
331
- readonly DOCUMENT_NODE: number;
334
+ readonly DOCUMENT_NODE: number; /**
335
+ * Emits the event corresponding to the notification icon being clicked
336
+ *
337
+ * @remarks
338
+ *
339
+ * Activated when the user clicks on the bell icon on the navigation
340
+ * bar right hand side
341
+ *
342
+ * @internal
343
+ */
332
344
  readonly DOCUMENT_POSITION_CONTAINED_BY: number;
333
345
  readonly DOCUMENT_POSITION_CONTAINS: number;
334
346
  readonly DOCUMENT_POSITION_DISCONNECTED: number;
package/docs/api/foundation-header.navigation.md CHANGED
@@ -28,6 +28,7 @@ export declare class Navigation extends Navigation_base
28
28
  | [provider](./foundation-header.navigation.provider.md) | | any | |
29
29
  | [ready](./foundation-header.navigation.ready.md) | | boolean | |
30
30
  | [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 |
31
+ | [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> |
31
32
  | [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
33
  | [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
34
  | [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> |
package/docs/api/foundation-header.navigation.showconnectionindicator.md ADDED
@@ -0,0 +1,13 @@
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; [showConnectionIndicator](./foundation-header.navigation.showconnectionindicator.md)
4
+
5
+ ## Navigation.showConnectionIndicator property
6
+
7
+ Boolean attribute which controls whether to show the connection indicator on the navigation bar Control via `show-connection-indicator`
8
+
9
+ **Signature:**
10
+
11
+ ```typescript
12
+ showConnectionIndicator: boolean;
13
+ ```
package/docs/api-report.md CHANGED
@@ -57,6 +57,7 @@ export class Navigation extends Navigation_base {
57
57
  }>;
58
58
  // (undocumented)
59
59
  selectTemplate(): ViewTemplate<Navigation, any>;
60
+ showConnectionIndicator: boolean;
60
61
  showLuminanceToggleButton: boolean;
61
62
  showMiscToggleButton: boolean;
62
63
  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.17.0",
4
+ "version": "14.19.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-header.d.ts",
@@ -52,8 +52,8 @@
52
52
  },
53
53
  "devDependencies": {
54
54
  "@custom-elements-manifest/analyzer": "^0.8.2",
55
- "@genesislcap/foundation-testing": "^14.17.0",
56
- "@genesislcap/genx": "^14.17.0",
55
+ "@genesislcap/foundation-testing": "^14.19.0",
56
+ "@genesislcap/genx": "^14.19.0",
57
57
  "@microsoft/api-documenter": "^7.19.13",
58
58
  "@microsoft/api-extractor": "^7.31.1",
59
59
  "@playwright/test": "^1.18.1",
@@ -93,10 +93,10 @@
93
93
  "webpack-merge": "^5.7.3"
94
94
  },
95
95
  "dependencies": {
96
- "@genesislcap/foundation-comms": "^14.17.0",
97
- "@genesislcap/foundation-events": "^14.17.0",
98
- "@genesislcap/foundation-utils": "^14.17.0",
99
- "@genesislcap/foundation-zero": "^14.17.0",
96
+ "@genesislcap/foundation-comms": "^14.19.0",
97
+ "@genesislcap/foundation-events": "^14.19.0",
98
+ "@genesislcap/foundation-utils": "^14.19.0",
99
+ "@genesislcap/foundation-zero": "^14.19.0",
100
100
  "@microsoft/fast-colors": "^5.1.4",
101
101
  "@microsoft/fast-components": "^2.21.3",
102
102
  "@microsoft/fast-element": "^1.7.0",
@@ -108,5 +108,5 @@
108
108
  "access": "public"
109
109
  },
110
110
  "customElements": "dist/custom-elements.json",
111
- "gitHead": "45aa1d24a4fabc0d90c868f8e77f71df24609180"
111
+ "gitHead": "39baddc0d618b2ceb964f5382821d8901f5194b3"
112
112
  }
package/test/e2e/pages/header.ts CHANGED
@@ -13,6 +13,7 @@ export class HeaderPage {
13
13
  luminanceToggleButton: Locator;
14
14
  miscToggleButton: Locator;
15
15
  notificationsButton: Locator;
16
+ connectionIndicator: Locator;
16
17
  userButton: Locator;
17
18
 
18
19
  constructor(config: PackageConfig, port: number, page: Page) {
@@ -29,6 +30,7 @@ export class HeaderPage {
29
30
  this.luminanceToggleButton = this.page.locator('data-test-id=luminance-toggle-button');
30
31
  this.miscToggleButton = this.page.locator('data-test-id=misc-toggle-button');
31
32
  this.notificationsButton = this.page.locator('data-test-id=notifications-button');
33
+ this.connectionIndicator = this.page.locator('data-test-id=connection-indicator');
32
34
  this.userButton = this.page.locator('data-test-id=user-button');
33
35
  }
34
36