@proximus/lavender-header 2.0.0-alpha.2 → 2.0.0-alpha.200

package/dist/Header.d.ts

@@ -3,15 +3,17 @@ import '@proximus/lavender-layout';
 import '@proximus/lavender-container';
 import '@proximus/lavender-button';
 import '@proximus/lavender-section';
-import '@proximus/lavender-cell';
+import './HeaderItem';
+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 './HeaderItem';
-import './Link.ts';
+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;
@@ -20,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/custom-elements.json

@@ -0,0 +1,473 @@
+{
+  "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"
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML"
+            }
+          ],
+          "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",
+              "default": "`<px-a font-weight=\"title\" font-size=\"body-m\" color=\"brand\" variant=\"no-style\"> <slot></slot> </px-a>`"
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML"
+            }
+          ],
+          "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": "private",
+              "default": "`<px-mdd name=\"__lavender_mobile_menu\" hidden--laptop hidden--desktop > <span slot=\"title\"><slot name=\"title\"></slot></span> <px-mdd-section title-hidden></px-mdd-section> </px-mdd>`"
+            },
+            {
+              "kind": "method",
+              "name": "#createMobileMenuPanelDropDowns",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "$megaDropDown",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "innerHTML"
+            },
+            {
+              "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

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