@proximus/lavender-footer-sitemap 1.0.0-alpha.1

package/dist/index.js

@@ -0,0 +1,628 @@
+import { PxElement as x, gridGapValues as Y, textalignValues as Z, fontweightValues as _, fontsizeValues as N, colorValues as V, headingValues as tt } from "@proximus/lavender-common";
+import "@proximus/lavender-layout";
+import "@proximus/lavender-accordion";
+import "@proximus/lavender-link";
+const et = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;gap:var(--grid-gap--mobile, var(--px-spacing-inside-section-default-mobile));grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}@media screen and (min-width: 768px){.grid{gap:var( --grid-gap--tablet, var(--px-spacing-inside-section-default-tablet) )}}@media screen and (min-width: 1025px){.grid{gap:var( --grid-gap--laptop, var(--px-spacing-inside-section-default-desktop) )}}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 1025px){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", W = new CSSStyleSheet();
+W.replaceSync(et);
+const it = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12"
+], nt = [
+  "",
+  "start",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+  "stretch"
+], st = ["", "start", "end", "center", "stretch"], T = class T extends x {
+  constructor() {
+    super(W), this.template = () => `<div class="grid">
+    <slot></slot>
+    </div>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "gap",
+      "grid-cols",
+      "grid-cols--mobile",
+      "grid-cols--tablet",
+      "grid-cols--laptop",
+      "justify-content",
+      "justify-items",
+      "align-content",
+      "align-items",
+      "justify-content--mobile",
+      "justify-items--mobile",
+      "align-content--mobile",
+      "align-items--mobile",
+      "justify-content--tablet",
+      "justify-items--tablet",
+      "align-content--tablet",
+      "align-items--tablet",
+      "justify-content--laptop",
+      "justify-items--laptop",
+      "align-content--laptop",
+      "align-items--laptop",
+      "justify-content--desktop",
+      "justify-items--desktop",
+      "align-content--desktop",
+      "align-items--desktop"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.gap || (this.gap = "inside-section-default"), this.alignItems || (this.alignItems = "stretch");
+  }
+  attributeChangedCallback(t, e, n) {
+    if (e !== n)
+      switch (t) {
+        case "gap":
+          this.updateGap(e, n, Y);
+          break;
+        case "grid-cols":
+        case "grid-cols--mobile":
+        case "grid-cols--tablet":
+        case "grid-cols--laptop":
+          this.updateAttribute(t, e, n, it);
+          break;
+        case "justify-content":
+        case "align-content":
+        case "justify-content--mobile":
+        case "align-content--mobile":
+        case "justify-content--tablet":
+        case "align-content--tablet":
+        case "justify-content--laptop":
+        case "align-content--laptop":
+        case "justify-content--desktop":
+        case "align-content--desktop":
+          this.updateAttribute(
+            t,
+            e,
+            n,
+            nt
+          );
+          break;
+        case "justify-items":
+        case "align-items":
+        case "justify-items--mobile":
+        case "align-items--mobile":
+        case "justify-items--tablet":
+        case "align-items--tablet":
+        case "justify-items--laptop":
+        case "align-items--laptop":
+        case "justify-items--desktop":
+        case "align-items--desktop":
+          this.updateAttribute(
+            t,
+            e,
+            n,
+            st
+          );
+          break;
+        default:
+          super.attributeChangedCallback(t, e, n);
+          break;
+      }
+  }
+  updateGap(t, e, n) {
+    if (!this.checkName(n, e)) {
+      console.error("Bad gap value for", this.$el);
+      return;
+    }
+    const s = (l) => {
+      l !== null && l !== "" && l !== "default" && (this.$el.style.setProperty(
+        "--grid-gap--mobile",
+        `var(--px-spacing-${l}-mobile)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--tablet",
+        `var(--px-spacing-${l}-tablet)`
+      ), this.$el.style.setProperty(
+        "--grid-gap--laptop",
+        `var(--px-spacing-${l}-desktop)`
+      ));
+    };
+    s(t), s(e);
+  }
+  updateAttribute(t, e, n, s) {
+    this.checkName(s, n) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" ? this.$el.style.setProperty(`--${t}`, n) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`)) : console.error(
+      `${n} is not an allowed ${t} value for ${this.$el}`
+    );
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get gridCols() {
+    return this.getAttribute("grid-cols");
+  }
+  set gridCols(t) {
+    this.setAttribute("grid-cols", t);
+  }
+  get gridColsMobile() {
+    return this.getAttribute("grid-cols--mobile");
+  }
+  set gridColsMobile(t) {
+    this.setAttribute("grid-cols--mobile", t);
+  }
+  get gridColsTablet() {
+    return this.getAttribute("grid-cols--tablet");
+  }
+  set gridColsTablet(t) {
+    this.setAttribute("grid-cols--tablet", t);
+  }
+  get gridColsLaptop() {
+    return this.getAttribute("grid-cols--laptop");
+  }
+  set gridColsLaptop(t) {
+    this.setAttribute("grid-cols--laptop", t);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyItems() {
+    return this.getAttribute("justify-items");
+  }
+  set justifyItems(t) {
+    this.setAttribute("justify-items", t);
+  }
+  get alignContent() {
+    return this.getAttribute("align-content");
+  }
+  set alignContent(t) {
+    this.setAttribute("align-content", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content--mobile", t);
+  }
+  get justifyItemsMobile() {
+    return this.getAttribute("justify-items--mobile");
+  }
+  set justifyItemsMobile(t) {
+    this.setAttribute("justify-items--mobile", t);
+  }
+  get alignContentMobile() {
+    return this.getAttribute("align-content--mobile");
+  }
+  set alignContentMobile(t) {
+    this.setAttribute("align-content--mobile", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items--mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content--tablet", t);
+  }
+  get justifyItemsTablet() {
+    return this.getAttribute("justify-items--tablet");
+  }
+  set justifyItemsTablet(t) {
+    this.setAttribute("justify-items--tablet", t);
+  }
+  get alignContentTablet() {
+    return this.getAttribute("align-content--tablet");
+  }
+  set alignContentTablet(t) {
+    this.setAttribute("align-content--tablet", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items--tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content--laptop", t);
+  }
+  get justifyItemsLaptop() {
+    return this.getAttribute("justify-items--laptop");
+  }
+  set justifyItemsLaptop(t) {
+    this.setAttribute("justify-items--laptop", t);
+  }
+  get alignContentLaptop() {
+    return this.getAttribute("align-content--laptop");
+  }
+  set alignContentLaptop(t) {
+    this.setAttribute("align-content--laptop", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items--laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content--desktop", t);
+  }
+  get justifyItemsDesktop() {
+    return this.getAttribute("justify-items--desktop");
+  }
+  set justifyItemsDesktop(t) {
+    this.setAttribute("justify-items--desktop", t);
+  }
+  get alignContentDesktop() {
+    return this.getAttribute("align-content--desktop");
+  }
+  set alignContentDesktop(t) {
+    this.setAttribute("align-content--desktop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items--desktop", t);
+  }
+};
+T.nativeName = "div";
+let k = T;
+customElements.define("px-grid", k);
+const ot = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-text-color-body-neutral-strong-default);font-size:var(--px-text-size-body-m-mobile);font-weight:400;line-height:var(--px-line-height-m);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-text-color-body-neutral-strong-inverted)}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}}", lt = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", rt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var( --heading-color-default, var(--px-text-color-heading-brand-default) );text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var( --heading-color-inverted, var(--px-text-color-heading-brand-inverted) )}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}", B = new CSSStyleSheet(), H = new CSSStyleSheet(), q = new CSSStyleSheet();
+B.replaceSync(ot);
+H.replaceSync(lt);
+q.replaceSync(rt);
+const $ = class $ extends x {
+  constructor() {
+    super(H, q, B), this.template = () => "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "variant",
+      "color",
+      "font-size",
+      "font-weight",
+      "text-align",
+      "inverted",
+      "disabled"
+    ];
+  }
+  attributeChangedCallback(t, e, n) {
+    if (e !== n)
+      switch (t) {
+        case "variant":
+          this.updateVariant(t, e, n, tt);
+          break;
+        case "color":
+          this.updateTypography(t, e, n, V);
+          break;
+        case "font-size":
+          this.updateTypography(t, e, n, N);
+          break;
+        case "font-weight":
+          this.updateTypography(t, e, n, _);
+          break;
+        case "text-align":
+          this.updateTypography(t, e, n, Z);
+          break;
+        case "disabled":
+          this.color = "action-disabled";
+          break;
+        default:
+          super.attributeChangedCallback(t, e, n);
+          break;
+      }
+  }
+  toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  updateVariant(t, e, n, s) {
+    this.checkName(s, n) ? this.toggleClass(e, n) : console.error(`Bad ${t} value for ${this.$el}`);
+  }
+  updateTypography(t, e, n, s) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`), this.checkName(s, n) || console.error(`Bad ${t} value for ${this.$el}`);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(t) {
+    this.setAttribute("color", t);
+  }
+  get fontsize() {
+    return this.getAttribute("font-size");
+  }
+  set fontsize(t) {
+    this.setAttribute("font-size", t);
+  }
+  get fontweight() {
+    return this.getAttribute("font-weight");
+  }
+  set fontweight(t) {
+    this.setAttribute("font-weight", t);
+  }
+  get textalign() {
+    return this.getAttribute("text-align");
+  }
+  set textalign(t) {
+    this.setAttribute("text-align", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(t) {
+    this.setAttribute("disabled", t);
+  }
+};
+$.nativeName = "p";
+let A = $;
+customElements.define("px-p", A);
+const S = class S extends x {
+  constructor() {
+    super(), this.template = () => `<div class="footer-sitemap">
+      <px-grid grid-cols="4" grid-cols--mobile="1" role="list" gap="inside-section-none">
+          <slot></slot>
+      </px-grid>
+    </div>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
+  }
+  attributeChangedCallback(t, e, n) {
+    if (e !== n)
+      switch (t) {
+        case "inverted":
+          for (let s = 0; s < this.$children.length; s++)
+            this.$children[s].hasAttribute("inverted") || this.$children[s].toggleAttribute("inverted");
+          break;
+        default:
+          super.attributeChangedCallback(t, e, n);
+          break;
+      }
+  }
+  get $children() {
+    return this.querySelectorAll("px-footer-sitemap > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+};
+S.nativeName = "div";
+let w = S;
+customElements.define("px-footer-sitemap", w);
+const at = ":host,:host>*{display:block;box-sizing:border-box}::slotted(ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}::slotted(ul.link-list-img){display:flex;flex-wrap:wrap;flex-direction:row;gap:20px}";
+function b(i) {
+  var t = typeof i;
+  return i != null && (t == "object" || t == "function");
+}
+var ct = typeof global == "object" && global && global.Object === Object && global, dt = typeof self == "object" && self && self.Object === Object && self, G = ct || dt || Function("return this")(), z = function() {
+  return G.Date.now();
+}, gt = /\s/;
+function pt(i) {
+  for (var t = i.length; t-- && gt.test(i.charAt(t)); )
+    ;
+  return t;
+}
+var ht = /^\s+/;
+function ut(i) {
+  return i && i.slice(0, pt(i) + 1).replace(ht, "");
+}
+var m = G.Symbol, U = Object.prototype, ft = U.hasOwnProperty, bt = U.toString, u = m ? m.toStringTag : void 0;
+function mt(i) {
+  var t = ft.call(i, u), e = i[u];
+  try {
+    i[u] = void 0;
+    var n = !0;
+  } catch {
+  }
+  var s = bt.call(i);
+  return n && (t ? i[u] = e : delete i[u]), s;
+}
+var xt = Object.prototype, yt = xt.toString;
+function vt(i) {
+  return yt.call(i);
+}
+var jt = "[object Null]", zt = "[object Undefined]", R = m ? m.toStringTag : void 0;
+function kt(i) {
+  return i == null ? i === void 0 ? zt : jt : R && R in Object(i) ? mt(i) : vt(i);
+}
+function At(i) {
+  return i != null && typeof i == "object";
+}
+var wt = "[object Symbol]";
+function Ct(i) {
+  return typeof i == "symbol" || At(i) && kt(i) == wt;
+}
+var D = NaN, Tt = /^[-+]0x[0-9a-f]+$/i, $t = /^0b[01]+$/i, St = /^0o[0-7]+$/i, It = parseInt;
+function P(i) {
+  if (typeof i == "number")
+    return i;
+  if (Ct(i))
+    return D;
+  if (b(i)) {
+    var t = typeof i.valueOf == "function" ? i.valueOf() : i;
+    i = b(t) ? t + "" : t;
+  }
+  if (typeof i != "string")
+    return i === 0 ? i : +i;
+  i = ut(i);
+  var e = $t.test(i);
+  return e || St.test(i) ? It(i.slice(2), e ? 2 : 8) : Tt.test(i) ? D : +i;
+}
+var Lt = "Expected a function", Mt = Math.max, Et = Math.min;
+function Ot(i, t, e) {
+  var n, s, l, d, r, c, g = 0, L = !1, p = !1, y = !0;
+  if (typeof i != "function")
+    throw new TypeError(Lt);
+  t = P(t) || 0, b(e) && (L = !!e.leading, p = "maxWait" in e, l = p ? Mt(P(e.maxWait) || 0, t) : l, y = "trailing" in e ? !!e.trailing : y);
+  function v(o) {
+    var a = n, h = s;
+    return n = s = void 0, g = o, d = i.apply(h, a), d;
+  }
+  function F(o) {
+    return g = o, r = setTimeout(f, t), L ? v(o) : d;
+  }
+  function J(o) {
+    var a = o - c, h = o - g, O = t - a;
+    return p ? Et(O, l - h) : O;
+  }
+  function M(o) {
+    var a = o - c, h = o - g;
+    return c === void 0 || a >= t || a < 0 || p && h >= l;
+  }
+  function f() {
+    var o = z();
+    if (M(o))
+      return E(o);
+    r = setTimeout(f, J(o));
+  }
+  function E(o) {
+    return r = void 0, y && n ? v(o) : (n = s = void 0, d);
+  }
+  function K() {
+    r !== void 0 && clearTimeout(r), g = 0, n = c = s = r = void 0;
+  }
+  function Q() {
+    return r === void 0 ? d : E(z());
+  }
+  function j() {
+    var o = z(), a = M(o);
+    if (n = arguments, s = this, c = o, a) {
+      if (r === void 0)
+        return F(c);
+      if (p)
+        return clearTimeout(r), r = setTimeout(f, t), v(c);
+    }
+    return r === void 0 && (r = setTimeout(f, t)), d;
+  }
+  return j.cancel = K, j.flush = Q, j;
+}
+var Rt = "Expected a function";
+function Dt(i, t, e) {
+  var n = !0, s = !0;
+  if (typeof i != "function")
+    throw new TypeError(Rt);
+  return b(e) && (n = "leading" in e ? !!e.leading : n, s = "trailing" in e ? !!e.trailing : s), Ot(i, t, {
+    leading: n,
+    maxWait: t,
+    trailing: s
+  });
+}
+const X = new CSSStyleSheet();
+X.replaceSync(at);
+const I = class I extends x {
+  constructor() {
+    super(X), this.templateMobile = () => `<div role="listitem">
+  <px-accordion ${this.inverted ? "inverted" : ""}>
+    <span slot="title"><slot name="title-list"></slot></span>
+    <span slot="content">
+      <slot name="links-list"></slot>
+    </span>
+  </px-accordion>
+  </div>`, this.templateDesktop = () => `<div role="listitem">
+  <px-vstack gap="after-element-default">
+    <px-p variant="title-l" ${this.inverted ? "inverted" : ""}>
+      <slot name="title-list"></slot>
+    </px-p>
+    <slot name="links-list"></slot>
+  </px-vstack>
+  </div>`, this.throttledLoadTemplate = Dt(this.loadTemplate.bind(this), 50), this.loadTemplate();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.loadTemplate(), window.addEventListener("resize", this.throttledLoadTemplate), this.$ul ? this.$ul.querySelector("px-img") && this.$ul.classList.add("link-list-img") : console.error(
+      "The footer sitemap item must contain a <ul> element with links."
+    );
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.throttledLoadTemplate);
+  }
+  loadTemplate() {
+    const t = this.lastSize, e = window.innerWidth < 768 ? "mobile" : "desktop";
+    t !== e && (e === "mobile" ? this.shadowRoot.innerHTML = this.templateMobile() : this.shadowRoot.innerHTML = this.templateDesktop(), this.lastSize = e);
+  }
+  attributeChangedCallback(t, e, n) {
+    if (e !== n)
+      switch (t) {
+        case "inverted":
+          for (let s = 0; s < this.$children.length; s++)
+            this.$children[s].hasAttribute("inverted") || this.$children[s].toggleAttribute("inverted");
+          this.$ul.querySelectorAll("px-a").forEach((s) => {
+            s.toggleAttribute("inverted");
+          });
+          break;
+        default:
+          super.attributeChangedCallback(t, e, n);
+          break;
+      }
+  }
+  get $ul() {
+    return this.querySelector("ul");
+  }
+  get $children() {
+    return this.querySelectorAll("px-footer-sitemap-item > *");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+};
+I.nativeName = "div";
+let C = I;
+customElements.define("px-footer-sitemap-item", C);
+export {
+  w as FooterSitemap,
+  C as FooterSitemapItem,
+  X as styleSheet
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@proximus/lavender-footer-sitemap",
+  "version": "1.0.0-alpha.1",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/*.cjs",
+          "dist/css/**/*.css",
+          "dist/js/**/*.js",
+          "dist/*.svg",
+          "dist/*.ttf",
+          "dist/glyphmap.json",
+          "dist/*.d.ts"
+        ]
+      }
+    }
+  },
+  "gitHead": "2fc723ebfd00568f7be8573c3e910f202fd94e2a"
+}