@proximus/lavender-header 2.0.0-alpha.21 → 2.0.0-alpha.210

package/dist/Header.d.ts

@@ -8,9 +8,12 @@ import './Link.ts';
 import type { Dropdown } from '@proximus/lavender-dropdown';
 import type { Stack } from '@proximus/lavender-layout';
 import type { ButtonIcon } from '@proximus/lavender-button-icon';
+import type { HeaderEventMap } from './events.ts';
 export declare class Header extends WithExtraAttributes {
     #private;
     internals: ElementInternals;
+    /** Narrows listener types for the Header specific custom events. */
+    addEventListener: <K extends keyof HeaderEventMap>(type: K, listener: (ev: HeaderEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions) => void;
     template: string;
     constructor();
     connectedCallback(): void;
@@ -19,16 +22,16 @@ export declare class Header extends WithExtraAttributes {
     get $backdropFilter(): HTMLDivElement;
     get $burgerMenu(): ButtonIcon;
     get $slotMain(): HTMLSlotElement;
-    get $targetGroupDropdown(): Dropdown;
-    get $userLanguageDropdown(): Dropdown;
+    get $targetGroupDropdown(): Dropdown | null;
+    get $userLanguageDropdown(): Dropdown | null;
     get $dropDownZoneDesktop(): Stack;
     get $primaryNavigation(): Element;
-    get closeButtonAriaLabel(): string;
-    set closeButtonAriaLabel(value: string);
-    get burgerMenuAriaLabel(): string;
-    set burgerMenuAriaLabel(value: string);
-    get backToMenuLabel(): string;
-    set backToMenuLabel(value: string);
-    get primaryNavigationAriaLabel(): string;
-    set primaryNavigationAriaLabel(value: string);
+    get closeButtonAriaLabel(): string | null;
+    set closeButtonAriaLabel(value: string | null);
+    get burgerMenuAriaLabel(): string | null;
+    set burgerMenuAriaLabel(value: string | null);
+    get backToMenuLabel(): string | null;
+    set backToMenuLabel(value: string | null);
+    get primaryNavigationAriaLabel(): string | null;
+    set primaryNavigationAriaLabel(value: string | null);
 }

package/dist/HeaderItem.d.ts

@@ -1,6 +1,6 @@
 import { WithExtraAttributes } from '@proximus/lavender-common';
 export declare class HeaderItem extends WithExtraAttributes {
-    private contentObserver;
+    #private;
     internals: ElementInternals;
     template: () => string;
     constructor();
@@ -9,11 +9,12 @@ export declare class HeaderItem extends WithExtraAttributes {
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private setupButtonA11y;
-    private updateDataLabel;
-    get for(): string;
-    set for(value: string);
+    get for(): string | null;
+    set for(value: string | null);
     get checked(): boolean;
     set checked(value: boolean);
-    get $button(): HTMLButtonElement;
-    get $a(): HTMLAnchorElement;
+    get current(): boolean;
+    set current(value: boolean);
+    get $button(): HTMLButtonElement | null;
+    get $a(): HTMLAnchorElement | null;
 }

package/dist/Link.d.ts

@@ -1,5 +1,5 @@
 import '@proximus/lavender-link';
 export declare class MDDLink extends HTMLElement {
-    template: string;
+    protected static readonly template: HTMLTemplateElement;
     constructor();
 }

package/dist/MobileMenu.d.ts

@@ -2,7 +2,10 @@ import type { MegaDropDown } from '@proximus/lavender-mega-dropdown';
 import '@proximus/lavender-dropdown';
 export declare class HeaderMobileMenu extends HTMLElement {
     #private;
+    protected static readonly template: HTMLTemplateElement;
     constructor();
     connectedCallback(): void;
+    /** Builds the menu content from the header items. Runs only once. */
+    render(): void;
     get $megaDropDown(): MegaDropDown;
 }

package/dist/custom-elements.json

@@ -0,0 +1,478 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/Header.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Header",
+          "members": [
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "addEventListener",
+              "type": {
+                "text": "<K extends keyof HeaderEventMap>(\n    type: K,\n    listener: (ev: HeaderEventMap[K]) => unknown,\n    options?: boolean | AddEventListenerOptions\n  ) => void"
+              },
+              "description": "Narrows listener types for the Header specific custom events."
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "default": "` <div> <header> <slot name=\"skip\"></slot> <px-section id=\"navigation-container\" padding-bottom=\"none\" padding-bottom--mobile=\"s\" padding-bottom--tablet=\"s\" padding-top=\"s\" background-color=\"none\" > <div id=\"dropdown-zone--desktop\"> <slot name=\"target-group\"></slot> <px-spacer></px-spacer> <slot name=\"user-language\"></slot> </div> <px-hstack gap=\"default\" wrap=\"wrap\" id=\"navigation-wrapper\"> <px-hstack align-items=\"center\"> <slot name=\"header-logo\"></slot> </px-hstack> <slot name=\"header-logo\"></slot> <nav id=\"primary-navigation\" aria-label=\"${this.primaryNavigationAriaLabel}\"> <div role=\"list\"> <px-hstack gap=\"default\" wrap=\"wrap\" align-items=\"center\"> <slot name=\"header-entries\"></slot> </px-hstack> </div> </nav> <px-spacer></px-spacer> <px-hstack align-items=\"center\" gap=\"xs\"> <slot name=\"header-actions\"></slot> <px-button-icon id=\"burger-menu\" variant=\"naked\" aria-label=\"${this.burgerMenuAriaLabel ?? 'Open menu'}\" aria-expanded=\"false\" hidden--laptop hidden--desktop > <px-icon name=\"burger_menu\" from=\"lavender\" size=\"m\"></px-icon> </px-button-icon> </px-hstack> </px-hstack> </px-section> <px-section id=\"panel-container\" background-color=\"surface-default\" padding=\"none\" background-color=\"none\"> <slot name=\"header-panels\"> </px-section> </header> <div id=\"backdrop-filter\"></div> <slot name=\"main\"></slot> </div> `"
+            },
+            {
+              "kind": "field",
+              "name": "#onResize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#setMDDDialogOffset",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#togglePanel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "id",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#showMobileMenu",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#hideMobileMenu",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#hidePanel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#$mobileMenu",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#$navigationItems",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#$headerWrapper",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#$megaDropdowns",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$backdropFilter",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$burgerMenu",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$slotMain",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$targetGroupDropdown",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$userLanguageDropdown",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$dropDownZoneDesktop",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$primaryNavigation",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "closeButtonAriaLabel"
+            },
+            {
+              "kind": "field",
+              "name": "burgerMenuAriaLabel"
+            },
+            {
+              "kind": "field",
+              "name": "backToMenuLabel"
+            },
+            {
+              "kind": "field",
+              "name": "primaryNavigationAriaLabel"
+            }
+          ],
+          "events": [
+            {
+              "name": "close-panel",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "burger-menu-aria-label"
+            },
+            {
+              "name": "close-button-aria-label"
+            },
+            {
+              "name": "primary-navigation-aria-label"
+            },
+            {
+              "name": "back-to-menu-label"
+            }
+          ],
+          "superclass": {
+            "name": "WithExtraAttributes",
+            "package": "@proximus/lavender-common"
+          },
+          "tagName": "px-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/Header.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/HeaderItem.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "HeaderItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "internals",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "template"
+            },
+            {
+              "kind": "method",
+              "name": "setupButtonA11y",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#updateDataLabel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#contentObserver",
+              "privacy": "private",
+              "default": "new MutationObserver(this.#updateDataLabel)"
+            },
+            {
+              "kind": "field",
+              "name": "for"
+            },
+            {
+              "kind": "field",
+              "name": "checked"
+            },
+            {
+              "kind": "field",
+              "name": "current"
+            },
+            {
+              "kind": "field",
+              "name": "$button",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "$a",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "adoptedStyleSheets",
+              "type": {
+                "text": "array"
+              },
+              "default": "[stylesheet]"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "for"
+            },
+            {
+              "name": "href"
+            },
+            {
+              "name": "current"
+            }
+          ],
+          "superclass": {
+            "name": "WithExtraAttributes",
+            "package": "@proximus/lavender-common"
+          },
+          "tagName": "px-header-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HeaderItem",
+          "declaration": {
+            "name": "HeaderItem",
+            "module": "src/HeaderItem.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-header-item",
+          "declaration": {
+            "name": "HeaderItem",
+            "module": "src/HeaderItem.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/Link.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MDDLink",
+          "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "px-mdd-a",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MDDLink",
+          "declaration": {
+            "name": "MDDLink",
+            "module": "src/Link.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-mdd-a",
+          "declaration": {
+            "name": "MDDLink",
+            "module": "src/Link.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/MobileMenu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "HeaderMobileMenu",
+          "members": [
+            {
+              "kind": "field",
+              "name": "template",
+              "privacy": "protected",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#rendered",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "render",
+              "description": "Builds the menu content from the header items. Runs only once."
+            },
+            {
+              "kind": "method",
+              "name": "#createMobileMenuPanelDropDowns",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "$megaDropDown",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "adoptedStyleSheets",
+              "type": {
+                "text": "array"
+              },
+              "default": "[stylesheet]"
+            }
+          ],
+          "superclass": {
+            "name": "HTMLElement"
+          },
+          "tagName": "px-header-mobile-menu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HeaderMobileMenu",
+          "declaration": {
+            "name": "HeaderMobileMenu",
+            "module": "src/MobileMenu.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "px-header-mobile-menu",
+          "declaration": {
+            "name": "HeaderMobileMenu",
+            "module": "src/MobileMenu.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/events.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/header-item.css",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/header.css",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/Header"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/MobileMenu"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/HeaderItem"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/events"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/events.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Custom events handled by the Header, on top of the standard DOM events.
+ * Declared locally (instead of augmenting the global `HTMLElementEventMap`)
+ * so these event names are only typed on the elements that actually use them.
+ */
+export interface HeaderEventMap extends HTMLElementEventMap {
+    'close-panel-from-dialog': CustomEvent<{
+        clientX: number;
+        clientY: number;
+    }>;
+    'section-item-click': CustomEvent<{
+        for: string;
+    }>;
+    'back-to-mobile-menu': CustomEvent;
+    'close-panel': CustomEvent;
+}

package/dist/index.d.ts

@@ -3,3 +3,4 @@ import '@proximus/lavender-cell';
 export * from './Header';
 export * from './MobileMenu';
 export * from './HeaderItem';
+export type * from './events';