@proximus/lavender-header 1.4.1 → 1.4.2-beta.1

package/dist/Header.d.ts

@@ -2,14 +2,12 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
 import '@proximus/lavender-layout';
 import '@proximus/lavender-container';
 import '@proximus/lavender-button';
-import '@proximus/lavender-button-icon';
 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';
 export declare class Header extends WithExtraAttributes {
     #private;
     internals: ElementInternals;

package/dist/index.d.ts

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

package/dist/index.es.js

@@ -1,18 +1,18 @@
 var K = (o) => {
   throw TypeError(o);
 };
-var B = (o, t, e) => t.has(o) || K("Cannot " + e);
-var d = (o, t, e) => (B(o, t, "read from private field"), e ? e.call(o) : t.get(o)), h = (o, t, e) => t.has(o) ? K("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), A = (o, t, e, r) => (B(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), b = (o, t, e) => (B(o, t, "access private method"), e);
-import { WithExtraAttributes as U, fontsizeValues as mt, PxElement as kt, transferAccessibilityAttributes as yt, fontweightValues as zt, colorValues as wt, checkName as $t } from "@proximus/lavender-common";
+var H = (o, t, e) => t.has(o) || K("Cannot " + e);
+var d = (o, t, e) => (H(o, t, "read from private field"), e ? e.call(o) : t.get(o)), h = (o, t, e) => t.has(o) ? K("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), A = (o, t, e, r) => (H(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), b = (o, t, e) => (H(o, t, "access private method"), e);
+import "@proximus/lavender-button-icon";
+import "@proximus/lavender-cell";
+import { WithExtraAttributes as Y, fontsizeValues as mt, PxElement as kt, transferAccessibilityAttributes as yt, fontweightValues as zt, colorValues as wt, checkName as $t } from "@proximus/lavender-common";
 import "@proximus/lavender-layout";
 import "@proximus/lavender-container";
 import "@proximus/lavender-button";
-import "@proximus/lavender-button-icon";
 import "@proximus/lavender-section";
-import "@proximus/lavender-cell";
 const At = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:calc(2em - 2px)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", et = new CSSStyleSheet();
 et.replaceSync(At);
-class St extends U {
+class St extends Y {
   constructor() {
     var t;
     super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
@@ -77,10 +77,10 @@ const Lt = [...mt, "link-m", "link-s"], Mt = [
   "btn-secondary",
   "btn-tertiary",
   "icon-link"
-], Rt = ["", "default", "alternative"], Y = class Y extends kt {
+], Rt = ["", "default", "alternative"], N = class N extends kt {
   constructor() {
     super(ot, rt, at), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
-    const t = document.createElement(this.nativeName);
+    const t = document.createElement(N.nativeName);
     t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
   static get observedAttributes() {
@@ -106,7 +106,7 @@ const Lt = [...mt, "link-m", "link-s"], Mt = [
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), yt(this, this.$el, !1);
+    this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), yt(this, this.$el, !1);
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r)
@@ -297,9 +297,9 @@ const Lt = [...mt, "link-m", "link-s"], Mt = [
     t ? this.setAttribute("title", t) : this.removeAttribute("title");
   }
 };
-Y.nativeName = "a";
-let _ = Y;
-customElements.get("px-a") || customElements.define("px-a", _);
+N.nativeName = "a";
+let F = N;
+customElements.get("px-a") || customElements.define("px-a", F);
 class qt extends HTMLElement {
   constructor() {
     super(), this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
@@ -317,7 +317,7 @@ function R(o) {
   var t = typeof o;
   return o != null && (t == "object" || t == "function");
 }
-var jt = typeof global == "object" && global && global.Object === Object && global, Ot = typeof self == "object" && self && self.Object === Object && self, it = jt || Ot || Function("return this")(), H = function() {
+var jt = typeof global == "object" && global && global.Object === Object && global, Ot = typeof self == "object" && self && self.Object === Object && self, it = jt || Ot || Function("return this")(), _ = function() {
   return it.Date.now();
 }, It = /\s/;
 function Pt(o) {
@@ -373,16 +373,16 @@ function V(o) {
 }
 var re = "Expected a function", ae = Math.max, ie = Math.min;
 function ne(o, t, e) {
-  var r, n, s, i, l, c, g = 0, w = !1, u = !1, O = !0;
+  var r, n, s, i, l, c, g = 0, w = !1, u = !1, I = !0;
   if (typeof o != "function")
     throw new TypeError(re);
-  t = V(t) || 0, R(e) && (w = !!e.leading, u = "maxWait" in e, s = u ? ae(V(e.maxWait) || 0, t) : s, O = "trailing" in e ? !!e.trailing : O);
-  function I(p) {
+  t = V(t) || 0, R(e) && (w = !!e.leading, u = "maxWait" in e, s = u ? ae(V(e.maxWait) || 0, t) : s, I = "trailing" in e ? !!e.trailing : I);
+  function P(p) {
     var x = r, $ = n;
     return r = n = void 0, g = p, i = o.apply($, x), i;
   }
   function xt(p) {
-    return g = p, l = setTimeout(L, t), w ? I(p) : i;
+    return g = p, l = setTimeout(L, t), w ? P(p) : i;
   }
   function gt(p) {
     var x = p - c, $ = p - g, J = t - x;
@@ -393,31 +393,31 @@ function ne(o, t, e) {
     return c === void 0 || x >= t || x < 0 || u && $ >= s;
   }
   function L() {
-    var p = H();
+    var p = _();
     if (Z(p))
       return X(p);
     l = setTimeout(L, gt(p));
   }
   function X(p) {
-    return l = void 0, O && r ? I(p) : (r = n = void 0, i);
+    return l = void 0, I && r ? P(p) : (r = n = void 0, i);
   }
   function vt() {
     l !== void 0 && clearTimeout(l), g = 0, r = c = n = l = void 0;
   }
   function ft() {
-    return l === void 0 ? i : X(H());
+    return l === void 0 ? i : X(_());
   }
-  function P() {
-    var p = H(), x = Z(p);
+  function B() {
+    var p = _(), x = Z(p);
     if (r = arguments, n = this, c = p, x) {
       if (l === void 0)
         return xt(c);
       if (u)
-        return clearTimeout(l), l = setTimeout(L, t), I(c);
+        return clearTimeout(l), l = setTimeout(L, t), P(c);
     }
     return l === void 0 && (l = setTimeout(L, t)), i;
   }
-  return P.cancel = vt, P.flush = ft, P;
+  return B.cancel = vt, B.flush = ft, B;
 }
 var se = "Expected a function";
 function de(o, t, e) {
@@ -433,8 +433,8 @@ function de(o, t, e) {
 const st = new CSSStyleSheet();
 st.replaceSync(Nt);
 const le = "Menu";
-var T, a, dt, F, W, lt, D, v, E, C, f;
-class pe extends U {
+var T, a, dt, W, D, lt, U, v, E, C, f;
+class pe extends Y {
   constructor() {
     var e;
     super(st);
@@ -490,21 +490,21 @@ class pe extends U {
       );
       r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", d(this, a, E).forEach((n) => {
         n.checked = !1;
-      }), r.checked = !0, b(this, a, F).call(this, e.target.for)) : b(this, a, D).call(this));
+      }), r.checked = !0, b(this, a, W).call(this, e.target.for)) : b(this, a, U).call(this));
     }), this.addEventListener("section-item-click", (e) => {
       this.$backdropFilter.style.display = "block", d(this, a, E).forEach((r) => {
         r.checked = !1;
       }), this.querySelector(
         `px-header-item[for="${e.detail.for}"]`
-      ).checked = !0, b(this, a, F).call(this, e.detail.for);
+      ).checked = !0, b(this, a, W).call(this, e.detail.for);
     }), this.addEventListener("back-to-mobile-menu", () => {
       this.$backdropFilter.style.display = "block", d(this, a, E).forEach((e) => {
         e.checked = !1;
-      }), b(this, a, W).call(this);
+      }), b(this, a, D).call(this);
     }), this.shadowRoot.addEventListener("click", (e) => {
-      e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), b(this, a, W).call(this));
+      e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), b(this, a, D).call(this));
     }), this.addEventListener("close-panel", () => {
-      b(this, a, D).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
+      b(this, a, U).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
     }), this.addEventListener(
       "close-panel-from-dialog",
       (e) => {
@@ -598,17 +598,17 @@ T = new WeakMap(), a = new WeakSet(), dt = function() {
   e.forEach((n) => {
     n.dialogOffsetTop = `${r}px`;
   });
-}, F = function(e) {
+}, W = function(e) {
   d(this, a, v).$megaDropDown.hidden = !0, d(this, a, f).forEach((r) => {
     r.name === e && r.hidden && (r.dialogOffsetTop = `${d(this, a, C).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !r.hidden, document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== e && !r.hidden && (r.hidden = !0);
   });
-}, W = function() {
+}, D = function() {
   this.$backdropFilter.style.display = "none", d(this, a, f).forEach((e) => {
     e.hidden || (e.hidden = !0);
   }), d(this, a, v).$megaDropDown.dialogOffsetTop = `${d(this, a, C).getBoundingClientRect().bottom}px`, d(this, a, v).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
 }, lt = function() {
   d(this, a, v) && (d(this, a, v).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
-}, D = function() {
+}, U = function() {
   this.$backdropFilter.style.display = "none", d(this, a, v).$megaDropDown.hidden = !0, d(this, a, E).forEach((e) => {
     e.checked = !1;
   }), d(this, a, f).forEach((e) => {
@@ -645,7 +645,7 @@ const pt = new CSSStyleSheet();
 pt.replaceSync(ce);
 const M = "bottom-left";
 var z, ct, m, k, y, bt;
-class he extends U {
+class he extends Y {
   constructor() {
     super(pt);
     h(this, z);
@@ -800,12 +800,12 @@ ht.replaceSync(`
     }
   }
 `);
-var N, j, ut;
+var j, O, ut;
 class ue extends HTMLElement {
   constructor() {
     super();
-    h(this, j);
-    h(this, N, `<px-mdd
+    h(this, O);
+    h(this, j, `<px-mdd
     name="__lavender_mobile_menu"
     hidden--tablet
     hidden--laptop
@@ -814,7 +814,7 @@ class ue extends HTMLElement {
     <span slot="title"><slot name="title"></slot></span>
     <px-mdd-section title-hidden></px-mdd-section>
   </px-mdd>`);
-    this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = d(this, N), this.shadowRoot.adoptedStyleSheets = [ht];
+    this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = d(this, j), this.shadowRoot.adoptedStyleSheets = [ht];
   }
   connectedCallback() {
     this.setAttribute("slot", "header-panels");
@@ -831,7 +831,7 @@ class ue extends HTMLElement {
     }).join("")}
           ${[...n].filter((i) => !i.hasAttribute("promoted")).map(
       (i) => `<px-mdd-a  href="${i.getAttribute("href")}" slot="footer">${i.innerText}</px-mdd-a>`
-    ).join("")}`, b(this, j, ut).call(this).forEach((i) => {
+    ).join("")}`, b(this, O, ut).call(this).forEach((i) => {
       i && this.$megaDropDown.appendChild(i);
     });
   }
@@ -839,7 +839,7 @@ class ue extends HTMLElement {
     return this.shadowRoot.querySelector("px-mdd");
   }
 }
-N = new WeakMap(), j = new WeakSet(), ut = function() {
+j = new WeakMap(), O = new WeakSet(), ut = function() {
   const e = this.closest("px-header"), r = e.querySelector(
     'px-dropdown[slot="target-group"]'
   ), n = e.querySelector(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-header",
-  "version": "1.4.1",
+  "version": "1.4.2-beta.1",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",