@genesislcap/foundation-header 14.143.1 → 14.143.2

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

@@ -1,9 +1,8 @@
 import { getApp } from '@genesislcap/foundation-shell/app';
 import { html, repeat, when } from '@microsoft/fast-element';
-import { buttonTag, iconTag, flyoutTag, optionTag, connectionIndicatorTag, selectTag, } from '../tags';
 const app = getApp();
 const sideNavTemplate = html `
-  <${flyoutTag}
+  <zero-flyout
     position="left"
     ?closed=${(x) => !x.sideNavOpen}
     @closed=${(x) => x.toggleNavVisibility()}
@@ -23,43 +22,40 @@ const sideNavTemplate = html `
       data-test-id="logout-button"
       @click=${(x) => x.logout()}
     >
-      <${iconTag} name="sign-out-alt"></${iconTag}>
+      <zero-icon name="sign-out-alt"></zero-icon>
       Sign out
     </div>
-  </${flyoutTag}>
+  </zero-flyout>
 `;
 const defaultRouteNavItemsTemplate = html `
-  <${buttonTag}
+  <zero-button
     appearance="neutral-grey"
-    class="nav-button"
-    value="1"
     @click=${(x) => x.navigateTo('protected')}
     data-test-id="home-button"
   >
-    <${iconTag} name="home"></${iconTag}>
+    <zero-icon name="home"></zero-icon>
     Home
-  </${buttonTag}>
-  <${optionTag} @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
-    <${iconTag} name="users"></${iconTag}>
+  </zero-button>
+  <zero-button @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
+    <zero-icon name="users"></zero-icon>
     Profiles
-</${optionTag}>
+  </zero-button>
 `;
 const routeNavItemsTemplate = html `
   <template>
     ${repeat((x) => x.routeNavItems, html `
-        <${buttonTag}
+        <zero-button
           appearance="neutral-grey"
-          class="nav-button"
           slot="routes"
           @click=${(x, c) => c.parent.navigateTo(x.routePath)}
           data-test-id="${(x) => `${x.routePath}-button`}"
         >
           ${when((x) => x.icon, html `
-              <${iconTag}
+              <zero-icon
                 name="${(x) => x.icon.name}"
                 variant="${(x) => x.icon.variant}"
                 size="${(x) => x.icon.size}"
-              ></${iconTag}>
+              ></zero-icon>
             `)}
           ${(x, c) => c.parent.toLocalisedText(x.title)}
         </zero-button>
@@ -91,7 +87,7 @@ export const NavTemplate = html `
             @click=${(x) => x.toggleNavVisibility()}
             data-test-id="hamburger-menu"
           >
-            <${iconTag} name="bars" part="nav-visibility-icon" class="nav-visibility-icon"></${iconTag}>
+            <zero-icon name="bars" part="nav-visibility-icon"></zero-icon>
           </div>
         `)}
       <div class="logo-container" data-test-id="nav-bar-logo">
@@ -110,41 +106,41 @@ export const NavTemplate = html `
             data-test-id="luminance-toggle-button"
             part="luminance-button"
           >
-            <${iconTag}
+            <zero-icon
               @click=${(x) => x.luminanceIconEvent()}
               variant="regular"
               name="moon"
               part="luminance-icon"
-            ></${iconTag}>
+            ></zero-icon>
           </div>
         `)}
       ${when((x) => x.showMiscToggleButton, html `
           <div class="icon-container" data-test-id="misc-toggle-button" part="misc-button">
-            <${iconTag} @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon"></${iconTag}>
+            <zero-icon @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon"></zero-icon>
           </div>
         `)}
-      <!-- ${when((x) => x.showNotificationsButton, html `
+      ${when((x) => x.showNotificationsButton, html `
           <div
             class="icon-container"
             data-test-id="notifications-button"
             part="notifications-button"
           >
-            <${iconTag}
+            <zero-icon
               variant="regular"
               @click=${(x) => x.notificationIconEvent()}
               name="bell"
               part="notifications-icon"
-            ></${iconTag}>
+            ></zero-icon>
             <slot name="notifications-icon-end"></slot>
           </div>
-        `)} -->
+        `)}
       ${when((x) => x.showConnectionIndicator, html `
           <div class="connection-indicator-container" data-test-id="connection-indicator">
-            <${connectionIndicatorTag} show-label="false"></${connectionIndicatorTag}>
+            <zero-connection-indicator show-label="false"></zero-connection-indicator>
           </div>
         `)}
       ${when((x) => x.showLanguageSelector && x.languageOptions, html `
-          <${selectTag}
+          <zero-select
             class="language-selector"
             position="below"
             data-test-id="language-selector"
@@ -152,20 +148,20 @@ export const NavTemplate = html `
             @change="${(x, c) => x.changeLanguage(c.event)}"
           >
             ${repeat((x) => x.languageOptions.availableLanguages, html `
-                <${optionTag}
+                <zero-option
                   value="${(x) => x}"
                   ?selected="${(x, c) => x === c.parent.languageOptions.selectedLanguage}"
                 >
                   ${(x) => x.toUpperCase()}
-                </${optionTag}>
+                </zero-option>
               `)}
-          </${selectTag}>
+          </zero-select>
         `)}
 
-      <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button">
-        <${iconTag} name="user-circle"></${iconTag}>
+      <zero-button appearance="neutral-grey" data-test-id="user-button">
+        <zero-icon name="user-circle"></zero-icon>
         ${(x) => x.userName}
-      </${buttonTag}>
+      </zero-button>
     </div>
     ${app.registerElementsTarget(['header', 'header-end'])}
   </div>

package/dist/foundation-header.api.json

@@ -184,103 +184,6 @@
       "name": "",
       "preserveMemberOrder": false,
       "members": [
-        {
-          "kind": "Function",
-          "canonicalReference": "@genesislcap/foundation-header!configure:function(1)",
-          "docComment": "/**\n * A function that allows configuring the header micro-frontend with name and templateOptions.\n *\n * @remarks\n *\n * Configure the Header micro frontend for host app integration.\n *\n * @param config - A partial HeaderConfig.\n *\n * @example\n *\n * Providing template options to align to your host application.\n * ```ts\n *\n *   const { configure } = await import('@genesislcap/foundation-header/config'); // < import from the subpath\n *   return configure({\n *     name: `nexus-app-header`,\n *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.\n *     templateOptions: {\n *       button: 'nexus-button',\n *       icon: 'nexus-icon-next',\n *     },\n *   });\n * },\n * ```\n *\n * @public\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "export declare function configure(config: "
-            },
-            {
-              "kind": "Reference",
-              "text": "Partial",
-              "canonicalReference": "!Partial:type"
-            },
-            {
-              "kind": "Content",
-              "text": "<"
-            },
-            {
-              "kind": "Reference",
-              "text": "HeaderConfig",
-              "canonicalReference": "@genesislcap/foundation-header!HeaderConfig:interface"
-            },
-            {
-              "kind": "Content",
-              "text": ">"
-            },
-            {
-              "kind": "Content",
-              "text": "): "
-            },
-            {
-              "kind": "Reference",
-              "text": "Promise",
-              "canonicalReference": "!Promise:interface"
-            },
-            {
-              "kind": "Content",
-              "text": "<typeof import(\"../main\")."
-            },
-            {
-              "kind": "Reference",
-              "text": "Navigation",
-              "canonicalReference": "@genesislcap/foundation-header!Navigation:class"
-            },
-            {
-              "kind": "Content",
-              "text": ">"
-            },
-            {
-              "kind": "Content",
-              "text": ";"
-            }
-          ],
-          "fileUrlPath": "src/config/configure.ts",
-          "returnTypeTokenRange": {
-            "startIndex": 6,
-            "endIndex": 10
-          },
-          "releaseTag": "Public",
-          "overloadIndex": 1,
-          "parameters": [
-            {
-              "parameterName": "config",
-              "parameterTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 5
-              },
-              "isOptional": false
-            }
-          ],
-          "name": "configure"
-        },
-        {
-          "kind": "Variable",
-          "canonicalReference": "@genesislcap/foundation-header!defaultHeaderConfig:var",
-          "docComment": "/**\n * Default HeaderConfig DI implementation.\n *\n * @public\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "defaultHeaderConfig: "
-            },
-            {
-              "kind": "Reference",
-              "text": "HeaderConfig",
-              "canonicalReference": "@genesislcap/foundation-header!HeaderConfig:interface"
-            }
-          ],
-          "fileUrlPath": "src/config/config.ts",
-          "isReadonly": true,
-          "releaseTag": "Public",
-          "name": "defaultHeaderConfig",
-          "variableTypeTokenRange": {
-            "startIndex": 1,
-            "endIndex": 2
-          }
-        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@genesislcap/foundation-header!ElementTargetId:type",
@@ -326,66 +229,6 @@
             "endIndex": 6
           }
         },
-        {
-          "kind": "Interface",
-          "canonicalReference": "@genesislcap/foundation-header!HeaderConfig:interface",
-          "docComment": "/**\n * HeaderConfig DI interface.\n *\n * @public\n */\n",
-          "excerptTokens": [
-            {
-              "kind": "Content",
-              "text": "export interface HeaderConfig extends "
-            },
-            {
-              "kind": "Reference",
-              "text": "PartialFASTElementDefinition",
-              "canonicalReference": "@microsoft/fast-element!PartialFASTElementDefinition:interface"
-            },
-            {
-              "kind": "Content",
-              "text": " "
-            }
-          ],
-          "fileUrlPath": "src/config/config.ts",
-          "releaseTag": "Public",
-          "name": "HeaderConfig",
-          "preserveMemberOrder": false,
-          "members": [
-            {
-              "kind": "PropertySignature",
-              "canonicalReference": "@genesislcap/foundation-header!HeaderConfig#templateOptions:member",
-              "docComment": "/**\n * Template options.\n *\n * @remarks\n *\n * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.\n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "templateOptions: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "TemplateOptions",
-                  "canonicalReference": "@genesislcap/foundation-header!~TemplateOptions:type"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "templateOptions",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              }
-            }
-          ],
-          "extendsTokenRanges": [
-            {
-              "startIndex": 1,
-              "endIndex": 2
-            }
-          ]
-        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@genesislcap/foundation-header!HeaderTargetId:type",
@@ -664,37 +507,6 @@
               "isProtected": false,
               "isAbstract": false
             },
-            {
-              "kind": "Property",
-              "canonicalReference": "@genesislcap/foundation-header!Navigation#headerConfig:member",
-              "docComment": "",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "headerConfig: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "HeaderConfig",
-                  "canonicalReference": "@genesislcap/foundation-header!HeaderConfig:interface"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isReadonly": false,
-              "isOptional": false,
-              "releaseTag": "Public",
-              "name": "headerConfig",
-              "propertyTypeTokenRange": {
-                "startIndex": 1,
-                "endIndex": 2
-              },
-              "isStatic": false,
-              "isProtected": false,
-              "isAbstract": false
-            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#hideSideBar:member",
@@ -1429,37 +1241,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. 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 *\n *   const { ZeroHeader } = await import('@genesislcap/foundation-header');\n *   return ZeroHeader;\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": []
         }
       ]
     }

package/dist/foundation-header.d.ts

@@ -6,59 +6,8 @@ import { EmitOptions } from '@genesislcap/foundation-events';
 import { EmitReturn } from '@genesislcap/foundation-events';
 import type { FoundationRouteNavItem } from '@genesislcap/foundation-ui';
 import { I18next } from '@genesislcap/foundation-i18n';
-import { InterfaceSymbol } from '@microsoft/fast-foundation';
-import { PartialFASTElementDefinition } from '@microsoft/fast-element';
-import { SyntheticViewTemplate } from '@microsoft/fast-element';
-import { TemplateElementDependency } from '@genesislcap/foundation-ui';
 import { ViewTemplate } from '@microsoft/fast-element';
 
-/**
- * A function that allows configuring the header micro-frontend with name and templateOptions.
- *
- * @remarks
- * Configure the Header micro frontend for host app integration.
- *
- * @example Providing template options to align to your host application.
- * ```ts
-
- *   const { configure } = await import('@genesislcap/foundation-header/config'); // < import from the subpath
- *   return configure({
- *     name: `nexus-app-header`,
- *     // These will be merged with the packages `defaultTemplateOptions`. You will need to have these components registered in your application.
- *     templateOptions: {
- *       button: 'nexus-button',
- *       icon: 'nexus-icon-next',
- *     },
- *   });
- * },
- * ```
- *
- * @param config - A partial HeaderConfig.
- * @public
- */
-export declare function configure(config: Partial<HeaderConfig>): Promise<Navigation>;
-
-/**
- * Default HeaderConfig DI implementation.
- * @public
- */
-export declare const defaultHeaderConfig: HeaderConfig;
-
-/**
- * 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 declare const DynamicTemplate: ViewTemplate<Navigation>;
-
 /**
  * Package element integration targets.
  *
@@ -66,33 +15,6 @@ export declare const DynamicTemplate: ViewTemplate<Navigation>;
  */
 export declare type ElementTargetId = HeaderTargetId | NavTargetId | SideNavTargetId;
 
-/**
- * Do not reference any ../main files here. We must avoid ../tags being referenced and therefore setup pre-configuration.
- */
-/**
- * HeaderConfig DI interface.
- *
- * @public
- */
-export declare interface HeaderConfig extends PartialFASTElementDefinition {
-    /**
-     * Template options.
-     *
-     * @remarks
-     * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
-     */
-    templateOptions: TemplateOptions;
-}
-
-/**
- * HeaderConfig DI key.
- *
- * @internal
- * @privateRemarks
- * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
- */
-export declare const HeaderConfig: InterfaceSymbol<HeaderConfig>;
-
 /**
  * Header integration targets.
  *
@@ -109,21 +31,6 @@ export declare type LanguageOptions = {
     selectedLanguage: string;
 };
 
-/**
- * Loading template for the Navigation class
- *
- * @remarks
- *
- * Template used to indicate loading to the user
- *
- * @typeParam Navigation - Navigation class
- *
- * @returns ViewTemplate instance of the Loading html
- *
- * @internal
- */
-export declare const LoadingTemplate: ViewTemplate<Navigation>;
-
 /**
  * Base styles for the foundation-header
  *
@@ -133,21 +40,6 @@ export declare const LoadingTemplate: ViewTemplate<Navigation>;
  */
 export declare const MainStyles: ElementStyles;
 
-/**
- * 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 declare const MainTemplate: ViewTemplate<Navigation>;
-
 /**
  * Events dispatched by the navigation control buttons
  * @public
@@ -196,7 +88,6 @@ export declare class Navigation extends Navigation_base {
     auth: Auth;
     credentialManager: CredentialManager;
     i18next: I18next;
-    headerConfig: HeaderConfig;
     ready: boolean;
     /**
      * Username of the logged in user
@@ -289,6 +180,16 @@ export declare class Navigation extends Navigation_base {
      * If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
      */
     routeNavItems: FoundationRouteNavItem[];
+    /**
+     * Load remote components
+     *
+     * @remarks
+     *
+     * With regards to module federation
+     *
+     * @internal
+     */
+    loadRemotes(): Promise<void>;
     selectTemplate(): ViewTemplate<Navigation, any>;
     /**
      * Logs the user out of their session
@@ -409,7 +310,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly classList: DOMTokenList;
     className: string;
     readonly clientHeight: number;
-    readonly clientLeft: number;
+    readonly clientLeft: number; /**
+    * Username of the logged in user
+    */
     readonly clientTop: number;
     readonly clientWidth: number;
     id: string;
@@ -467,11 +370,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
     scrollTo(options?: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
-    /**
-     * If present the defined route buttons will be rendered in the header 'routes' slot
-     *
-     * @deprecated - Use `routeNavItems` instead.
-     */
     setAttribute(qualifiedName: string, value: string): void;
     setAttributeNS(namespace: string, qualifiedName: string, value: string): void;
     setAttributeNode(attr: Attr): Attr;
@@ -532,16 +430,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaChecked: string;
     ariaColCount: string;
     ariaColIndex: string;
-    ariaColIndexText: string; /**
-    * Emits the event corresponding to the luminance icon being clicked
-    *
-    * @remarks
-    *
-    * Activated when the user clicks on the moon icon on the navigation
-    * bar right hand side
-    *
-    * @internal
-    */
+    ariaColIndexText: string;
     ariaColSpan: string;
     ariaCurrent: string;
     ariaDisabled: string;
@@ -574,7 +463,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaValueMin: string;
     ariaValueNow: string;
     ariaValueText: string;
-    role: string;
+    role: string; /**
+    * Emits the event corresponding to the notification icon being clicked
+    *
+    * @remarks
+    *
+    * Activated when the user clicks on the bell icon on the navigation
+    * bar right hand side
+    *
+    * @internal
+    */
     animate(keyframes: PropertyIndexedKeyframes | Keyframe[], options?: number | KeyframeAnimationOptions): Animation;
     getAnimations(options?: GetAnimationsOptions): Animation[];
     after(...nodes: (string | Node)[]): void;
@@ -745,65 +643,4 @@ export declare type SideNavTargetId = 'side-nav-start' | 'side-nav' | 'side-nav-
  */
 export declare type StyleTargetId = 'header';
 
-/**
- * TemplateComponents.
- * @public
- */
-declare type TemplateComponents = {
-    icon: TemplateElementDependency;
-    button: TemplateElementDependency;
-    connectionIndicator: TemplateElementDependency;
-    select: TemplateElementDependency;
-    option: TemplateElementDependency;
-    flyout: TemplateElementDependency;
-};
-
-/**
- * TemplateOptions.
- * @public
- */
-declare type TemplateOptions = Partial<TemplateComponents> & {
-    /**
-     * @remarks
-     * Just for reference that template options may be more than tags.
-     * @internal
-     */
-    somePartial?: string | SyntheticViewTemplate;
-};
-
-/**
- * ZeroHeader is a zero version of the header micro-frontend.
- *
- * @remarks
- * A zero version that pre-registers zero components and uses the zero design system. ZeroHeader and its components won't bloat the core bundle as
- * these are only loaded on-demand when in use.
- *
- * @example
- * ```ts
- * import { ZeroHeader } from '@genesislcap/foundation-header';
- * ...
- * ZeroHeader
- * ```
- *
- * @example Load the micro frontend on-demand
- * ```ts
-
- *   const { ZeroHeader } = await import('@genesislcap/foundation-header');
- *   return ZeroHeader;
- * },
- * ```
- *
- * @public
- */
-export declare class ZeroHeader extends Navigation {
-    /**
-     * @internal
-     */
-    connectedCallback(): Promise<void>;
-    /**
-     * @internal
-     */
-    loadRemotes(): Promise<void>;
-}
-
 export { }