@genesislcap/foundation-header 14.179.0 → 14.180.0

package/dist/foundation-header.api.json

@@ -184,6 +184,103 @@
       "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 *   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",
@@ -229,6 +326,134 @@
             "endIndex": 6
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@genesislcap/foundation-header!FoundationHeader:class",
+          "docComment": "/**\n * FoundationHeader.\n *\n * @remarks\n *\n * Base MF export used by host application `configure` calls. It does not set up a design system or components. Both are expected to be registered in the host application, which should provide the details of which to the MF via TemplateOptions.\n *\n * See the {@link configure} hook for more information on how to set up and use this micro frontend in your application.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class FoundationHeader extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "Navigation",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "isAbstract": false,
+          "name": "FoundationHeader",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-header!FoundationHeader#loadRemotes:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "loadRemotes(): "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Promise",
+                  "canonicalReference": "!Promise:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<void>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "loadRemotes"
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
+        {
+          "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",
@@ -507,6 +732,37 @@
               "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",
@@ -1241,6 +1497,37 @@
             "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": []
         }
       ]
     }

package/dist/foundation-header.d.ts

@@ -6,8 +6,58 @@ 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.
  *
@@ -15,6 +65,53 @@ import { ViewTemplate } from '@microsoft/fast-element';
  */
 export declare type ElementTargetId = HeaderTargetId | NavTargetId | SideNavTargetId;
 
+/**
+ * FoundationHeader.
+ *
+ * @remarks
+ * Base MF export used by host application `configure` calls. It does not set up a design system or components. Both are
+ * expected to be registered in the host application, which should provide the details of which to the MF via
+ * TemplateOptions.
+ *
+ * See the {@link configure} hook for more information on how to set up and use this micro frontend in your application.
+ *
+ * @privateRemarks
+ * We will override loadRemotes to remove zero. This setup is the inverse of FoundationAuth.
+ * We're doing this to avoid a breaking change, so consumers can continue to use Navigation which bundles zero.
+ *
+ * @public
+ */
+export declare class FoundationHeader extends Navigation {
+    loadRemotes(): Promise<void>;
+}
+
+/**
+ * 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.
  *
@@ -31,6 +128,21 @@ 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
  *
@@ -40,6 +152,21 @@ export declare type LanguageOptions = {
  */
 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
@@ -88,6 +215,7 @@ export declare class Navigation extends Navigation_base {
     auth: Auth;
     credentialManager: CredentialManager;
     i18next: I18next;
+    headerConfig: HeaderConfig;
     ready: boolean;
     /**
      * Username of the logged in user
@@ -310,9 +438,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly classList: DOMTokenList;
     className: string;
     readonly clientHeight: number;
-    readonly clientLeft: number; /**
-    * Username of the logged in user
-    */
+    readonly clientLeft: number;
     readonly clientTop: number;
     readonly clientWidth: number;
     id: string;
@@ -326,6 +452,14 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly prefix: string;
     readonly scrollHeight: number;
     scrollLeft: number;
+    /**
+     * Optional attribute which controls the icon to show on the navigation bar and flyout
+     * Control via `logo-src`
+     *
+     * @remarks
+     *
+     * If this attribute is not set then the Genesis logo is shown instead
+     */
     scrollTop: number;
     readonly scrollWidth: number;
     readonly shadowRoot: ShadowRoot;
@@ -420,7 +554,17 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly ELEMENT_NODE: number;
     readonly ENTITY_NODE: number;
     readonly ENTITY_REFERENCE_NODE: number;
-    readonly NOTATION_NODE: number;
+    readonly NOTATION_NODE: number; /**
+    * Changes the route of the current page
+    *
+    * @remarks
+    *
+    * Requires setup of the Router and usage of the FAST Router
+    *
+    * @param path - string represeting the new route to move to
+    *
+    * @public
+    */
     readonly PROCESSING_INSTRUCTION_NODE: number;
     readonly TEXT_NODE: number;
     dispatchEvent(event: Event): boolean;
@@ -445,7 +589,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaModal: string;
     ariaMultiLine: string;
     ariaMultiSelectable: string;
-    ariaOrientation: string;
+    ariaOrientation: 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
+    */
     ariaPlaceholder: string;
     ariaPosInSet: string;
     ariaPressed: string;
@@ -463,16 +616,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaValueMin: string;
     ariaValueNow: string;
     ariaValueText: 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
-    */
+    role: string;
     animate(keyframes: PropertyIndexedKeyframes | Keyframe[], options?: number | KeyframeAnimationOptions): Animation;
     getAnimations(options?: GetAnimationsOptions): Animation[];
     after(...nodes: (string | Node)[]): void;
@@ -643,4 +787,61 @@ 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;
+    provider: 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 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.
+ *
+ * @example
+ * ```ts
+ * import { ZeroHeader } from '@genesislcap/foundation-header';
+ * ...
+ * ZeroHeader
+ * ```
+ *
+ * @example Load the micro frontend on-demand
+ * ```ts
+ *   const { ZeroHeader } = await import('@genesislcap/foundation-header');
+ * },
+ * ```
+ *
+ * @privateRemarks
+ * For now we just extend Navigation as is, given that is ZeroHeader really.
+ *
+ * @public
+ */
+export declare class ZeroHeader extends Navigation {
+}
+
 export { }

package/docs/api/foundation-header.configure.md

@@ -0,0 +1,45 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [configure](./foundation-header.configure.md)
+
+## configure() function
+
+A function that allows configuring the header micro-frontend with name and templateOptions.
+
+**Signature:**
+
+```typescript
+export declare function configure(config: Partial<HeaderConfig>): Promise<typeof import("../main").Navigation>;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  config | Partial&lt;[HeaderConfig](./foundation-header.headerconfig.md)<!-- -->&gt; | A partial HeaderConfig. |
+
+**Returns:**
+
+Promise&lt;typeof import("../main").[Navigation](./foundation-header.navigation.md)<!-- -->&gt;
+
+## 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',
+    },
+  });
+},
+```
+

package/docs/api/foundation-header.defaultheaderconfig.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [defaultHeaderConfig](./foundation-header.defaultheaderconfig.md)
+
+## defaultHeaderConfig variable
+
+Default HeaderConfig DI implementation.
+
+**Signature:**
+
+```typescript
+defaultHeaderConfig: HeaderConfig
+```

package/docs/api/foundation-header.foundationheader.loadremotes.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [FoundationHeader](./foundation-header.foundationheader.md) &gt; [loadRemotes](./foundation-header.foundationheader.loadremotes.md)
+
+## FoundationHeader.loadRemotes() method
+
+**Signature:**
+
+```typescript
+loadRemotes(): Promise<void>;
+```
+**Returns:**
+
+Promise&lt;void&gt;
+