@genesislcap/foundation-header 14.408.0 → 14.409.0-FUI-2495.2

package/dist/esm/main/main.js

@@ -454,13 +454,23 @@ let Navigation = class Navigation extends EventEmitter(GenesisElement) {
      * @param routeNavItem - The navigation item that was clicked
      */
     handleNavButtonClick(routeNavItem) {
-        if (routeNavItem.onClick) {
-            routeNavItem.onClick({ item: routeNavItem, context: this });
-        }
-        else if (routeNavItem.routePath) {
-            this.navigateTo(routeNavItem.routePath);
-        }
-        this.$emit('nav-button-clicked', { item: routeNavItem, context: this });
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const detail = {
+                item: routeNavItem,
+                oldPath: this.pathName,
+                newPath: routeNavItem.routePath,
+                context: this,
+            };
+            yield ((_a = this.onBeforeNavButtonClick) === null || _a === void 0 ? void 0 : _a.call(this, detail));
+            if (routeNavItem.onClick) {
+                routeNavItem.onClick({ item: routeNavItem, context: this });
+            }
+            else if (routeNavItem.routePath) {
+                this.navigateTo(routeNavItem.routePath);
+            }
+            this.$emit('nav-button-clicked', detail);
+        });
     }
     /**
      * Current pathname for route highlighting
@@ -578,6 +588,9 @@ __decorate([
 __decorate([
     observable
 ], Navigation.prototype, "layoutItemCheck", void 0);
+__decorate([
+    observable
+], Navigation.prototype, "onBeforeNavButtonClick", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'show-account-menu' })
 ], Navigation.prototype, "showAccountMenu", void 0);

package/dist/foundation-header.api.json

@@ -534,6 +534,41 @@
             "endIndex": 3
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@genesislcap/foundation-header!NavButtonClickDetail:type",
+          "docComment": "/**\n * Detail payload for nav button click events and callbacks\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type NavButtonClickDetail = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    item: "
+            },
+            {
+              "kind": "Reference",
+              "text": "FoundationRouteNavItem",
+              "canonicalReference": "@genesislcap/foundation-ui!FoundationRouteNavItem:type"
+            },
+            {
+              "kind": "Content",
+              "text": ";\n    oldPath: string;\n    newPath: string | undefined;\n    context: any;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/main/main.ts",
+          "releaseTag": "Public",
+          "name": "NavButtonClickDetail",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 4
+          }
+        },
         {
           "kind": "TypeAlias",
           "canonicalReference": "@genesislcap/foundation-header!NavEventDetailMap:type",
@@ -545,16 +580,16 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    'luminance-icon-clicked': void;\n    'logout-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n    'language-changed': void;\n    'nav-button-clicked': {\n        item: "
+              "text": "{\n    'luminance-icon-clicked': void;\n    'logout-clicked': void;\n    'misc-icon-clicked': void;\n    'notification-icon-clicked': void;\n    'language-changed': void;\n    'nav-button-clicked': "
             },
             {
               "kind": "Reference",
-              "text": "FoundationRouteNavItem",
-              "canonicalReference": "@genesislcap/foundation-ui!FoundationRouteNavItem:type"
+              "text": "NavButtonClickDetail",
+              "canonicalReference": "@genesislcap/foundation-header!NavButtonClickDetail:type"
             },
             {
               "kind": "Content",
-              "text": ";\n        context: any;\n    };\n}"
+              "text": ";\n}"
             },
             {
               "kind": "Content",
@@ -851,9 +886,14 @@
                   "kind": "Content",
                   "text": "): "
                 },
+                {
+                  "kind": "Reference",
+                  "text": "Promise",
+                  "canonicalReference": "!Promise:interface"
+                },
                 {
                   "kind": "Content",
-                  "text": "void"
+                  "text": "<void>"
                 },
                 {
                   "kind": "Content",
@@ -863,7 +903,7 @@
               "isStatic": false,
               "returnTypeTokenRange": {
                 "startIndex": 3,
-                "endIndex": 4
+                "endIndex": 5
               },
               "releaseTag": "Public",
               "isProtected": false,
@@ -1428,6 +1468,54 @@
               "isAbstract": false,
               "name": "navigateTo"
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#onBeforeNavButtonClick:member",
+              "docComment": "/**\n * Callback invoked before navigation occurs when a nav button is clicked. Awaited before the route changes, so async cleanup is supported.\n *\n * @remarks\n *\n * DOM events cannot be awaited, so this callback is the only way to guarantee execution before the route changes. The `nav-button-clicked` event fires after navigation and is suitable for informational use only.\n *\n * @example\n * ```ts\n * <foundation-header\n *   :onBeforeNavButtonClick=${(x) => async (detail) => {\n *     await x.cleanup();\n *     console.log(`Navigating from ${detail.oldPath} to ${detail.newPath}`);\n *   }}\n * />\n * ```\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "onBeforeNavButtonClick?: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "(detail: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "NavButtonClickDetail",
+                  "canonicalReference": "@genesislcap/foundation-header!NavButtonClickDetail:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": ") => void | "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Promise",
+                  "canonicalReference": "!Promise:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "<void>"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": true,
+              "releaseTag": "Public",
+              "name": "onBeforeNavButtonClick",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 6
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#pathName:member",

package/dist/foundation-header.d.ts

@@ -287,6 +287,21 @@ export declare const MainStyles: ElementStyles;
  */
 export declare const mainTemplate: ViewTemplate<Navigation, any>;
 
+/**
+ * Detail payload for nav button click events and callbacks
+ * @public
+ */
+export declare type NavButtonClickDetail = {
+    /** The navigation item that was clicked */
+    item: FoundationRouteNavItem;
+    /** The pathname before navigation */
+    oldPath: string;
+    /** The destination path (`routeNavItem.routePath`). Undefined for items with a custom `onClick` that don't navigate. */
+    newPath: string | undefined;
+    /** The header component instance */
+    context: any;
+};
+
 /**
  * Events dispatched by the navigation control buttons
  * @public
@@ -297,10 +312,7 @@ export declare type NavEventDetailMap = {
     'misc-icon-clicked': void;
     'notification-icon-clicked': void;
     'language-changed': void;
-    'nav-button-clicked': {
-        item: FoundationRouteNavItem;
-        context: any;
-    };
+    'nav-button-clicked': NavButtonClickDetail;
 };
 
 /**
@@ -557,6 +569,28 @@ export declare class Navigation extends Navigation_base {
      * @beta
      */
     layoutItemCheck?: (registration: string) => boolean;
+    /**
+     * Callback invoked before navigation occurs when a nav button is clicked.
+     * Awaited before the route changes, so async cleanup is supported.
+     *
+     * @remarks
+     * DOM events cannot be awaited, so this callback is the only way to guarantee
+     * execution before the route changes. The `nav-button-clicked` event fires after
+     * navigation and is suitable for informational use only.
+     *
+     * @example
+     * ```ts
+     * <foundation-header
+     *   :onBeforeNavButtonClick=${(x) => async (detail) => {
+     *     await x.cleanup();
+     *     console.log(`Navigating from ${detail.oldPath} to ${detail.newPath}`);
+     *   }}
+     * />
+     * ```
+     *
+     * @public
+     */
+    onBeforeNavButtonClick?: (detail: NavButtonClickDetail) => void | Promise<void>;
     /**
      * Check if a layout item is currently active in the layout
      * @param item - The navigation item to check
@@ -701,7 +735,7 @@ export declare class Navigation extends Navigation_base {
      * Handles the click event for a navigation button
      * @param routeNavItem - The navigation item that was clicked
      */
-    handleNavButtonClick(routeNavItem: FoundationRouteNavItem): void;
+    handleNavButtonClick(routeNavItem: FoundationRouteNavItem): Promise<void>;
     /**
      * Current pathname for route highlighting
      * @public

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.408.0",
+  "version": "14.409.0-FUI-2495.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -79,29 +79,29 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.408.0",
-    "@genesislcap/genx": "14.408.0",
-    "@genesislcap/rollup-builder": "14.408.0",
-    "@genesislcap/ts-builder": "14.408.0",
-    "@genesislcap/uvu-playwright-builder": "14.408.0",
-    "@genesislcap/vite-builder": "14.408.0",
-    "@genesislcap/webpack-builder": "14.408.0"
+    "@genesislcap/foundation-testing": "14.409.0-FUI-2495.2",
+    "@genesislcap/genx": "14.409.0-FUI-2495.2",
+    "@genesislcap/rollup-builder": "14.409.0-FUI-2495.2",
+    "@genesislcap/ts-builder": "14.409.0-FUI-2495.2",
+    "@genesislcap/uvu-playwright-builder": "14.409.0-FUI-2495.2",
+    "@genesislcap/vite-builder": "14.409.0-FUI-2495.2",
+    "@genesislcap/webpack-builder": "14.409.0-FUI-2495.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.408.0",
-    "@genesislcap/foundation-auth": "14.408.0",
-    "@genesislcap/foundation-comms": "14.408.0",
-    "@genesislcap/foundation-events": "14.408.0",
-    "@genesislcap/foundation-i18n": "14.408.0",
-    "@genesislcap/foundation-logger": "14.408.0",
-    "@genesislcap/foundation-login": "14.408.0",
-    "@genesislcap/foundation-shell": "14.408.0",
-    "@genesislcap/foundation-ui": "14.408.0",
-    "@genesislcap/foundation-user": "14.408.0",
-    "@genesislcap/foundation-utils": "14.408.0",
-    "@genesislcap/foundation-zero": "14.408.0",
-    "@genesislcap/rapid-design-system": "14.408.0",
-    "@genesislcap/web-core": "14.408.0"
+    "@genesislcap/foundation-ai": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-auth": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-comms": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-events": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-i18n": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-logger": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-login": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-shell": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-ui": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-user": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-utils": "14.409.0-FUI-2495.2",
+    "@genesislcap/foundation-zero": "14.409.0-FUI-2495.2",
+    "@genesislcap/rapid-design-system": "14.409.0-FUI-2495.2",
+    "@genesislcap/web-core": "14.409.0-FUI-2495.2"
   },
   "repository": {
     "type": "git",
@@ -112,5 +112,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "26b08831fd001b4ee95c8a0d3364a18c0ec4005b"
+  "gitHead": "1fcaf08e9b7559024b25dc6ccc27e3bc62f1512b"
 }

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

@@ -1,75 +0,0 @@
-<!-- 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
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-config
-
-
-</td><td>
-
-Partial&lt;[HeaderConfig](./foundation-header.headerconfig.md)<!-- -->&gt;
-
-
-</td><td>
-
-A partial HeaderConfig.
-
-
-</td></tr>
-</tbody></table>
-
-**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

@@ -1,13 +0,0 @@
-<!-- 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.elementtargetid.md

@@ -1,15 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [ElementTargetId](./foundation-header.elementtargetid.md)
-
-## ElementTargetId type
-
-Package element integration targets.
-
-**Signature:**
-
-```typescript
-export type ElementTargetId = HeaderTargetId | NavTargetId | SideNavTargetId;
-```
-**References:** [HeaderTargetId](./foundation-header.headertargetid.md)<!-- -->, [NavTargetId](./foundation-header.navtargetid.md)<!-- -->, [SideNavTargetId](./foundation-header.sidenavtargetid.md)
-

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

@@ -1,15 +0,0 @@
-<!-- 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;
-

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

@@ -1,53 +0,0 @@
-<!-- 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)
-
-## FoundationHeader class
-
-FoundationHeader.
-
-**Signature:**
-
-```typescript
-export declare class FoundationHeader extends Navigation 
-```
-**Extends:** [Navigation](./foundation-header.navigation.md)
-
-## 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 [configure()](./foundation-header.configure.md) hook for more information on how to set up and use this micro frontend in your application.
-
-## Methods
-
-<table><thead><tr><th>
-
-Method
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[loadRemotes()](./foundation-header.foundationheader.loadremotes.md)
-
-
-</td><td>
-
-
-</td><td>
-
-
-</td></tr>
-</tbody></table>
-

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

@@ -1,59 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [HeaderConfig](./foundation-header.headerconfig.md)
-
-## HeaderConfig interface
-
-HeaderConfig DI interface.
-
-**Signature:**
-
-```typescript
-export interface HeaderConfig extends PartialGenesisElementDefinition 
-```
-**Extends:** PartialGenesisElementDefinition
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[templateOptions](./foundation-header.headerconfig.templateoptions.md)
-
-
-</td><td>
-
-
-</td><td>
-
-TemplateOptions
-
-
-</td><td>
-
-Template options.
-
-
-</td></tr>
-</tbody></table>
-

package/docs/api/foundation-header.headerconfig.templateoptions.md

@@ -1,18 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [HeaderConfig](./foundation-header.headerconfig.md) &gt; [templateOptions](./foundation-header.headerconfig.templateoptions.md)
-
-## HeaderConfig.templateOptions property
-
-Template options.
-
-**Signature:**
-
-```typescript
-templateOptions: TemplateOptions;
-```
-
-## Remarks
-
-Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
-

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [HeaderTargetId](./foundation-header.headertargetid.md)
-
-## HeaderTargetId type
-
-Header integration targets.
-
-**Signature:**
-
-```typescript
-export type HeaderTargetId = 'header-start' | 'header' | 'header-end';
-```

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

@@ -1,16 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [LanguageOptions](./foundation-header.languageoptions.md)
-
-## LanguageOptions type
-
-Options for the language selector
-
-**Signature:**
-
-```typescript
-export type LanguageOptions = {
-    availableLanguages: string[];
-    selectedLanguage: string;
-};
-```

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

@@ -1,13 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [MainStyles](./foundation-header.mainstyles.md)
-
-## MainStyles variable
-
-Base styles for the foundation-header
-
-**Signature:**
-
-```typescript
-MainStyles: import("@microsoft/fast-element").ElementStyles
-```