@genesislcap/foundation-header 14.219.0 → 14.219.1

package/dist/esm/templates/rapid.template.js

@@ -0,0 +1,246 @@
+import { getApp } from '@genesislcap/foundation-shell/app';
+import { html, repeat, when } from '@genesislcap/web-core';
+import { getTagHelper } from '../tags';
+const app = getApp();
+const getTagHelperRapid = getTagHelper.bind(null, 'rapid');
+const providerTag = getTagHelperRapid('provider');
+const flyoutTag = getTagHelperRapid('flyout');
+const iconTag = getTagHelperRapid('icon');
+const buttonTag = getTagHelperRapid('button');
+const connectionIndicatorTag = getTagHelperRapid('connectionIndicator');
+const optionTag = getTagHelperRapid('option');
+const selectTag = getTagHelperRapid('select');
+/**
+ * Top level template for Navigation class
+ *
+ * @remarks
+ *
+ * Dynamic template which wraps the code in a provider
+ *
+ * @typeParam Navigation - Navigation class
+ *
+ * @returns ViewTemplate instance of the Navigation html
+ *
+ * @internal
+ */
+export const dynamicTemplate = html `
+  <${providerTag} data-test-id="header-provider">
+    <div class="dynamic-template">${(x) => x.selectTemplate()}</div>
+  </${providerTag}>
+`;
+/**
+ * Render template for default route nav items
+ *
+ * @returns Default route nav items template
+ *
+ * @internal
+ */
+const defaultRouteNavItemsTemplate = html `
+  <${buttonTag}
+    appearance="neutral-grey"
+    class="nav-button"
+    @click=${(x) => x.navigateTo('protected')}
+    data-test-id="home-button"
+    aria-label="Home"
+  >
+    <${iconTag} name="home"></${iconTag}>
+    Home
+  </${buttonTag}>
+  <${buttonTag}
+    appearance="neutral-grey"
+    class="nav-button"
+    @click=${(x) => x.navigateTo('not-found')}
+    data-test-id="profiles-button"
+    aria-label="Profiles"
+  >
+    <${iconTag} name="users"></${iconTag}>
+    Profiles
+  </${buttonTag}>
+`;
+/**
+ * Render template for route nav items
+ *
+ * @param navId - Navigation id
+ *
+ * @returns Route nav items template
+ *
+ * @internal
+ */
+const routeNavItemsTemplate = (navId) => html `
+  <template>
+    ${repeat((x) => x.routeNavItems, html `
+        ${when((x, c) => x.navId === navId &&
+    (!x.permission || (x.permission && c.parent.isUserPermitted(x.permission))), html `        
+            <${buttonTag}
+              appearance="neutral-grey"
+              class="nav-button"
+              slot="routes"
+              @click=${(x, c) => c.parent.navigateTo(x.routePath)}
+              data-test-id="${(x) => `${x.routePath}-button`}"
+              aria-label=${(x) => x.title}
+            >
+              ${when((x) => x.icon, html `
+                  <${iconTag}
+                    name="${(x) => x.icon.name}"
+                    variant="${(x) => x.icon.variant}"
+                    size="${(x) => x.icon.size}"
+                  ></${iconTag}}>
+                `)}
+              ${(x, c) => c.parent.toLocalisedText(x.title)}
+            </${buttonTag}>`)}
+      `)}
+  </template>
+`;
+/**
+ * Render template for the Navigation class
+ *
+ * @internal
+ */
+const sideNavTemplate = html `
+  <${flyoutTag}
+    position="left"
+    ?closed=${(x) => !x.sideNavOpen}
+    @closed=${(x) => x.toggleNavVisibility()}
+    id="side-nav"
+    data-test-id="side-nav"
+    role="navigation"
+    aria-label="Side navigation"
+  >
+    <img
+      slot="title"
+      src=${(x) => x.logoSrc}
+      class="logo"
+      part="side-nav-logo"
+      data-test-id="side-nav-logo"
+      alt="${(x) => x.logoAltText}"
+    />
+
+    ${app.registerElementsTarget('side-nav')}
+    <slot name="menu-contents">
+      <div class='side-nav-buttons-container'>
+        ${routeNavItemsTemplate('side-nav')}
+      </div>
+    </slot>
+
+    <${buttonTag}
+      slot="footer"
+      class="logout-container"
+      data-test-id="logout-button"
+      @click=${(x) => x.logout()}
+      aria-label="Sign out"
+    >
+      <${iconTag} name="sign-out-alt"></${iconTag}>
+      Sign out
+    </${buttonTag}>
+  </${flyoutTag}>
+`;
+/**
+ * Render template for the Navigation class
+ *
+ * @remarks
+ *
+ * Template used when the class has finished loading
+ *
+ * @typeParam Navigation - Navigation class
+ *
+ * @returns ViewTemplate instance of the Main html
+ *
+ * @internal
+ */
+export const rapidTemplate = html `
+${when((x) => !x.hideSideBar, sideNavTemplate)}
+<div class="nav-listbox" data-test-id="nav-bar" role="navigation" aria-label="Main menu">
+  ${app.registerElementsTarget('header-start')}
+  <div class="nav-leftside">
+    ${app.registerElementsTarget('nav-start')}
+    ${when((x) => !x.hideSideBar, html `
+        <${buttonTag}
+          class="bars-container"
+          @click=${(x) => x.toggleNavVisibility()}
+          data-test-id="hamburger-menu"
+          aria-label="Toggle side menu"
+          aria-controls="side-nav"
+          aria-expanded=${(x) => x.sideNavOpen}
+          appearance="stealth"
+          @focusin=${(x) => x.closeNav()}
+        >
+          <${iconTag}
+            name="bars"
+            part="nav-visibility-icon"
+            class="nav-visibility-icon"
+          >
+          </${iconTag}>
+        </${buttonTag}>
+      `)}
+    <div class="logo-container" data-test-id="nav-bar-logo">
+      <img
+        src=${(x) => x.logoSrc}
+        class="logo"
+        part="logo"
+        data-test-id="logo"
+        alt="${(x) => x.logoAltText}"
+      />
+    </div>
+    <slot name="routes" data-test-id="route-buttons">
+      ${(x) => (x.routeNavItems ? routeNavItemsTemplate('header') : defaultRouteNavItemsTemplate)}
+    </slot>
+    ${app.registerElementsTarget('nav')}
+  </div>
+  <div class="nav-rightside">
+    ${app.registerElementsTarget('nav-end')}
+    <slot name="routes-end" data-test-id="route-end-buttons"></slot>
+    ${when((x) => x.showLuminanceToggleButton, html `
+        <div
+          class="icon-container"
+          data-test-id="luminance-toggle-button"
+          part="luminance-button"
+          aria-label="Luminance toggle"
+        >
+          <${iconTag}
+            @click=${(x) => x.luminanceIconEvent()}
+            variant="regular"
+            name="moon"
+            part="luminance-icon"
+          ></${iconTag}>
+        </div>
+      `)}
+    ${when((x) => x.showMiscToggleButton, html `
+        <div class="icon-container" data-test-id="misc-toggle-button" part="misc-button" aria-label="Misc icon">
+          <${iconTag} @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon">
+          </${iconTag}>
+        </div>
+      `)}
+    ${when((x) => x.showConnectionIndicator, html `
+        <div class="connection-indicator-container" data-test-id="connection-indicator">
+          <${connectionIndicatorTag} show-label="false">
+          </${connectionIndicatorTag}>
+        </div>
+      `)}
+    ${when((x) => x.showLanguageSelector && x.languageOptions, html `
+        <${selectTag}
+          class="language-selector"
+          position="below"
+          data-test-id="language-selector"
+          part="language-selector"
+          @change="${(x, c) => x.changeLanguage(c.event)}"
+          aria-label="Language selector"
+        >
+          ${repeat((x) => x.languageOptions.availableLanguages, html `
+              <${optionTag}
+                value="${(x) => x}"
+                ?selected="${(x, c) => x === c.parent.languageOptions.selectedLanguage}"
+              >
+                ${(x) => x.toUpperCase()}
+              </${optionTag}>
+            `)}
+        </${selectTag}>
+      `)}
+
+    <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button" aria-label="User button">
+      <${iconTag} name="user-circle"></${iconTag}>
+      ${(x) => x.userName}
+    </${buttonTag}>
+  </div>
+  ${app.registerElementsTarget(['header', 'header-end'])}
+</div>
+`;

package/dist/foundation-header.api.json

@@ -405,7 +405,7 @@
             },
             {
               "kind": "Reference",
-              "text": "PartialFASTElementDefinition",
+              "text": "PartialGenesisElementDefinition",
               "canonicalReference": "@microsoft/fast-element!PartialFASTElementDefinition:interface"
             },
             {
@@ -668,7 +668,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#connectedCallback:member(1)",
-              "docComment": "",
+              "docComment": "/**\n * Called when the component is connected to the DOM\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -796,7 +796,7 @@
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#languageOptions:member",
-              "docComment": "",
+              "docComment": "/**\n * Object which defines the language options to be displayed in the language selector\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -827,7 +827,7 @@
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#logoAltText:member",
-              "docComment": "",
+              "docComment": "/**\n * Optional attribute which controls the alt text of the logo Control via `logo-alt-text`\n *\n * @remarks\n *\n * If this attribute is not set then the alt text is set to 'Corporate Logo'\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -923,7 +923,7 @@
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#navigateTo:member(1)",
-              "docComment": "/**\n * Changes the route of the current page\n *\n * @remarks\n *\n * Requires setup of the Router and usage of the FAST Router\n *\n * @param path - string represeting the new route to move to\n *\n * @public\n */\n",
+              "docComment": "/**\n * Changes the route of the current page\n *\n * @remarks\n *\n * Requires setup of the Router and usage of the Router\n *\n * @param path - string representing the new route to move to\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -968,36 +968,6 @@
               "isAbstract": false,
               "name": "navigateTo"
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@genesislcap/foundation-header!Navigation#ready:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "ready: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "ready",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#routeButtons:member",
@@ -1071,16 +1041,12 @@
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#selectTemplate:member(1)",
-              "docComment": "",
+              "docComment": "/**\n * Selects the appropriate template based on the component's state\n *\n * @returns \\{ViewTemplate<Navigation>\\}\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
                   "text": "selectTemplate(): "
                 },
-                {
-                  "kind": "Content",
-                  "text": "import(\"@microsoft/fast-element\")."
-                },
                 {
                   "kind": "Reference",
                   "text": "ViewTemplate",
@@ -1097,7 +1063,7 @@
                 },
                 {
                   "kind": "Content",
-                  "text": ", any>"
+                  "text": ">"
                 },
                 {
                   "kind": "Content",
@@ -1107,7 +1073,7 @@
               "isStatic": false,
               "returnTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 6
+                "endIndex": 5
               },
               "releaseTag": "Public",
               "isProtected": false,
@@ -1267,36 +1233,6 @@
               "isProtected": false,
               "isAbstract": false
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@genesislcap/foundation-header!Navigation#sideNavOpen:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "sideNavOpen: "
-                },
-                {
-                  "kind": "Content",
-                  "text": "boolean"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "sideNavOpen",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
             {
               "kind": "Method",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#toLocalisedText:member(1)",
@@ -1441,12 +1377,12 @@
         },
         {
           "kind": "Variable",
-          "canonicalReference": "@genesislcap/foundation-header!NavTemplate:var",
+          "canonicalReference": "@genesislcap/foundation-header!navTemplate:var",
           "docComment": "/**\n * Template for Navigation class\n *\n * @remarks\n *\n * Contains the template for both the sidenav and the navigation bar\n *\n * @typeParam Navigation - Navigation class\n *\n * @returns ViewTemplate instance of the Navigation html\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "NavTemplate: "
+              "text": "navTemplate: "
             },
             {
               "kind": "Reference",
@@ -1470,12 +1406,89 @@
           "fileUrlPath": "src/main/main.template.ts",
           "isReadonly": true,
           "releaseTag": "Public",
-          "name": "NavTemplate",
+          "name": "navTemplate",
           "variableTypeTokenRange": {
             "startIndex": 1,
             "endIndex": 5
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@genesislcap/foundation-header!RapidHeader:class",
+          "docComment": "/**\n * RapidHeader is a rapid version of the header micro-frontend.\n *\n * @remarks\n *\n * A rapid version that pre-registers rapid components and uses the rapid design system so that it can run standalone. Generally this is used for development purposes, but can be deployed as a standalone application if required or be used by a host application that is already using rapid. RapidHeader and its components won't bloat the core bundle as these are only loaded on-demand when in use.\n *\n * @example\n * ```ts\n * import { RapidHeader } from '@genesislcap/foundation-header';\n * ...\n * RapidHeader\n * ```\n *\n * @example\n *\n * Load the micro frontend on-demand\n * ```ts\n *   const { RapidHeader } = await import('@genesislcap/foundation-header');\n * },\n * ```\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class RapidHeader extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "Navigation",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "isAbstract": false,
+          "name": "RapidHeader",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!RapidHeader#selectTemplate:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "selectTemplate(): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "ViewTemplate",
+                  "canonicalReference": "@microsoft/fast-element!ViewTemplate:class"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<"
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Navigation",
+                  "canonicalReference": "@genesislcap/foundation-header!Navigation:class"
+                },
+                {
+                  "kind": "Content",
+                  "text": ">"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 5
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "selectTemplate"
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@genesislcap/foundation-header!SideNavTargetId:type",
@@ -1527,37 +1540,6 @@
             "startIndex": 1,
             "endIndex": 2
           }
-        },
-        {
-          "kind": "Class",
-          "canonicalReference": "@genesislcap/foundation-header!ZeroHeader:class",
-          "docComment": "/**\n * ZeroHeader is a zero version of the header micro-frontend.\n *\n * @remarks\n *\n * A zero version that pre-registers zero components and uses the zero design system so that it can run standalone. Generally this is used for development purposes, but can be deployed as a standalone application if required or be used by a host application that is already using zero. ZeroHeader and its components won't bloat the core bundle as these are only loaded on-demand when in use.\n *\n * @example\n * ```ts\n * import { ZeroHeader } from '@genesislcap/foundation-header';\n * ...\n * ZeroHeader\n * ```\n *\n * @example\n *\n * Load the micro frontend on-demand\n * ```ts\n *   const { ZeroHeader } = await import('@genesislcap/foundation-header');\n * },\n * ```\n *\n * @public\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "export declare class ZeroHeader extends "
-            },
-            {
-              "kind": "Reference",
-              "text": "Navigation",
-              "canonicalReference": "@genesislcap/foundation-header!Navigation:class"
-            },
-            {
-              "kind": "Content",
-              "text": " "
-            }
-          ],
-          "fileUrlPath": "src/main/main.ts",
-          "releaseTag": "Public",
-          "isAbstract": false,
-          "name": "ZeroHeader",
-          "preserveMemberOrder": false,
-          "members": [],
-          "extendsTokenRange": {
-            "startIndex": 1,
-            "endIndex": 2
-          },
-          "implementsTokenRanges": []
         }
       ]
     }