@genesislcap/foundation-header 14.203.2 → 14.204.1

package/dist/custom-elements.json

@@ -31,27 +31,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/zero-components.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "registerCommonZeroComponents",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerCommonZeroComponents",
-          "declaration": {
-            "name": "registerCommonZeroComponents",
-            "module": "src/components/zero-components.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/config/config.ts",
@@ -172,6 +151,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/zero-components.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerCommonZeroComponents",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerCommonZeroComponents",
+          "declaration": {
+            "name": "registerCommonZeroComponents",
+            "module": "src/components/zero-components.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/main/index.ts",
@@ -237,7 +237,7 @@
         {
           "kind": "variable",
           "name": "NavTemplate",
-          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\" role=\"navigation\" aria-label=\"Main menu\">\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          <${buttonTag}\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n            aria-label=\"Toggle side menu\"\n            aria-controls=\"side-nav\"\n            aria-expanded=${(x) => x.sideNavOpen}\n            appearance=\"stealth\"\n            @focusin=${(x) => x.closeNav()}\n          >\n            <${iconTag} name=\"bars\" part=\"nav-visibility-icon\" class=\"nav-visibility-icon\"></${iconTag}>\n          </${buttonTag}>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img\n          src=${(x) => x.logoSrc}\n          class=\"logo\"\n          part=\"logo\"\n          data-test-id=\"logo\"\n          alt=\"${(x) => x.logoAltText}\"\n        />\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      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\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            aria-label=\"Luminance toggle\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\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\" aria-label=\"Misc icon\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></${iconTag}>\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            <${connectionIndicatorTag} show-label=\"false\"></${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\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            aria-label=\"Language selector\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n\n      <${buttonTag} appearance=\"neutral-grey\" data-test-id=\"user-button\" class=\"nav-button\" aria-label=\"User button\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
+          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\" role=\"navigation\" aria-label=\"Main menu\">\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          <${buttonTag}\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n            aria-label=\"Toggle side menu\"\n            aria-controls=\"side-nav\"\n            aria-expanded=${(x) => x.sideNavOpen}\n            appearance=\"stealth\"\n            @focusin=${(x) => x.closeNav()}\n          >\n            <${iconTag} name=\"bars\" part=\"nav-visibility-icon\" class=\"nav-visibility-icon\"></${iconTag}>\n          </${buttonTag}>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img\n          src=${(x) => x.logoSrc}\n          class=\"logo\"\n          part=\"logo\"\n          data-test-id=\"logo\"\n          alt=\"${(x) => x.logoAltText}\"\n        />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate('header') : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\n      <slot name=\"routes-end\" data-test-id=\"route-end-buttons\"></slot>\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            aria-label=\"Luminance toggle\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\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\" aria-label=\"Misc icon\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></${iconTag}>\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            <${connectionIndicatorTag} show-label=\"false\"></${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\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            aria-label=\"Language selector\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n\n      <${buttonTag} appearance=\"neutral-grey\" data-test-id=\"user-button\" class=\"nav-button\" aria-label=\"User button\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
           "description": "Template for Navigation class",
           "return": {
             "type": {

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

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

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

@@ -1 +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;AAW5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA6FzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA2GvB,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"}
+{"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;AAW5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAuGzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA2GvB,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.styles.js

@@ -200,4 +200,9 @@ export const MainStyles = css `
   .notifications-button {
     padding-right: calc((var(--design-unit) - 1) * 2px);
   }
+
+  .side-nav-buttons-container {
+    display: flex;
+    flex-direction: column;
+  }
 `.withBehaviors(getApp().registerStylesTarget('header'));

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

@@ -20,7 +20,15 @@ const sideNavTemplate = html `
       data-test-id="side-nav-logo"
       alt="${(x) => x.logoAltText}"
     />
-    <slot name="menu-contents"></slot>
+
+    ${app.registerElementsTarget('side-nav')}
+    <slot name="menu-contents">
+      <div class='side-nav-buttons-container'>
+        ${(x) => routeNavItemsTemplate('side-nav')}
+      </div>
+    </slot>
+
+  
     <${buttonTag}
       slot="footer"
       class="logout-container"
@@ -55,10 +63,11 @@ const defaultRouteNavItemsTemplate = html `
     Profiles
   </${buttonTag}>
 `;
-const routeNavItemsTemplate = html `
+const routeNavItemsTemplate = (navId) => html `
   <template>
     ${repeat((x) => x.routeNavItems, html `
-        ${when((x, c) => !x.permission || (x.permission && c.parent.isUserPermitted(x.permission)), html `        
+        ${when((x, c) => x.navId === navId &&
+    (!x.permission || (x.permission && c.parent.isUserPermitted(x.permission))), html `        
             <${buttonTag}
               appearance="neutral-grey"
               class="nav-button"
@@ -122,7 +131,7 @@ export const NavTemplate = html `
         />
       </div>
       <slot name="routes" data-test-id="route-buttons">
-        ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}
+        ${(x) => (x.routeNavItems ? routeNavItemsTemplate('header') : defaultRouteNavItemsTemplate)}
       </slot>
       ${app.registerElementsTarget('nav')}
     </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.203.2",
+  "version": "14.204.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -76,24 +76,24 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.203.2",
-    "@genesislcap/genx": "14.203.2",
-    "@genesislcap/rollup-builder": "14.203.2",
-    "@genesislcap/ts-builder": "14.203.2",
-    "@genesislcap/uvu-playwright-builder": "14.203.2",
-    "@genesislcap/vite-builder": "14.203.2",
-    "@genesislcap/webpack-builder": "14.203.2",
+    "@genesislcap/foundation-testing": "14.204.1",
+    "@genesislcap/genx": "14.204.1",
+    "@genesislcap/rollup-builder": "14.204.1",
+    "@genesislcap/ts-builder": "14.204.1",
+    "@genesislcap/uvu-playwright-builder": "14.204.1",
+    "@genesislcap/vite-builder": "14.204.1",
+    "@genesislcap/webpack-builder": "14.204.1",
     "rimraf": "^5.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.203.2",
-    "@genesislcap/foundation-events": "14.203.2",
-    "@genesislcap/foundation-i18n": "14.203.2",
-    "@genesislcap/foundation-logger": "14.203.2",
-    "@genesislcap/foundation-shell": "14.203.2",
-    "@genesislcap/foundation-ui": "14.203.2",
-    "@genesislcap/foundation-utils": "14.203.2",
-    "@genesislcap/foundation-zero": "14.203.2",
+    "@genesislcap/foundation-comms": "14.204.1",
+    "@genesislcap/foundation-events": "14.204.1",
+    "@genesislcap/foundation-i18n": "14.204.1",
+    "@genesislcap/foundation-logger": "14.204.1",
+    "@genesislcap/foundation-shell": "14.204.1",
+    "@genesislcap/foundation-ui": "14.204.1",
+    "@genesislcap/foundation-utils": "14.204.1",
+    "@genesislcap/foundation-zero": "14.204.1",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "^2.49.4",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "8a31c5b68f7b0eecff3e23762c63c3d869ae25bb"
+  "gitHead": "1f3614a366ea8d325af73488ce8ce713402538e4"
 }