@proximus/lavender-light 2.0.0-alpha.123 → 2.0.0-alpha.124

package/dist/lavender-light.es.js

@@ -5613,7 +5613,7 @@ $megaDropdowns_get = function() {
 if (!customElements.get("px-header")) {
   customElements.define("px-header", Header);
 }
-const contentHeaderCss = ":host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
+const contentHeaderCss = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}';
 const gridCss = ":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;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)}.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 screen and (max-width: 47.938rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.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 screen and (min-width: 64.0625rem){.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}}";
 const gridStyles = new CSSStyleSheet();
 gridStyles.replaceSync(gridCss);
@@ -5976,6 +5976,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
                 <px-h1><slot></slot></px-h1>
                 <slot name="subtitle"></slot>
               </px-vstack>
+              <px-stack gap="s" direction="row" direction--mobile="column">
+                <slot name="patch" shrink></slot>
+                <slot name="patch-description"></slot>
+              </px-stack>
             </div>
           </px-container>
         </px-grid>
@@ -6001,38 +6005,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "has-gridding--mobile",
       "has-gridding--tablet",
       "has-gridding--laptop",
+      "has-gridding--desktop",
       "inverted"
     ];
   }
   connectedCallback() {
-    if (this.$patchDescriptionSlot) {
-      this.shadowRoot.querySelector(
-        ".content-header-content"
-      ).insertAdjacentHTML(
-        "beforeend",
-        `<px-stack gap="s" direction="row" direction--mobile="column">
-          <slot name="patch" shrink></slot>
-          <slot name="patch-description"></slot>
-        </px-stack>`
-      );
-    }
-    if (this.$subtitleSlot) {
-      this.$subtitleSlot.setAttribute("variant", "subtitle");
-    }
-    if (this.$patchDescriptionSlot) {
-      if (this.$patchDescriptionSlot.localName === "px-p") {
-        this.$patchDescriptionSlot.setAttribute("variant", "default");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
-        this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
-        this.$patchDescriptionSlot.removeAttribute("font-weight");
-        this.$patchDescriptionSlot.removeAttribute("color");
-      }
-      if (this.$patchDescriptionSlot.localName === "px-price") {
-        this.$patchDescriptionSlot.setAttribute("size", "m");
-      }
-    }
+    var _a, _b;
+    this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
+    this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
+    this.styleSubtitleSlot();
+    this.stylepatchDescriptionSlotted();
     this.createGridding();
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -6065,6 +6053,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         case "has-gridding--mobile":
         case "has-gridding--tablet":
         case "has-gridding--laptop":
+        case "has-gridding--desktop":
           this.createGridding(newValue);
           break;
         case "inverted":
@@ -6082,6 +6071,37 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       }
     }
   }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
+      "slotchange",
+      this.styleSubtitleSlot
+    );
+    (_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.stylepatchDescriptionSlotted
+    );
+  }
+  stylepatchDescriptionSlotted() {
+    if (this.$patchDescriptionSlotted) {
+      if (this.$patchDescriptionSlotted.localName === "px-p") {
+        this.$patchDescriptionSlotted.setAttribute("variant", "default");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
+        this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
+        this.$patchDescriptionSlotted.removeAttribute("font-weight");
+        this.$patchDescriptionSlotted.removeAttribute("color");
+      }
+      if (this.$patchDescriptionSlotted.localName === "px-price") {
+        this.$patchDescriptionSlotted.setAttribute("size", "m");
+      }
+    }
+  }
+  styleSubtitleSlot() {
+    if (this.$subtitleSlotted) {
+      this.$subtitleSlotted.setAttribute("variant", "subtitle");
+    }
+  }
   createGridding(value) {
     const breakpoints = [
       { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
@@ -6099,6 +6119,11 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         prop: "hasGriddingLaptop",
         gridAttr: "grid-cols--laptop",
         attr: "col-span--laptop"
+      },
+      {
+        prop: "hasGriddingDesktop",
+        gridAttr: "grid-cols--desktop",
+        attr: "col-span--desktop"
       }
     ];
     const spanElement = this.shadowRoot.querySelector(
@@ -6128,9 +6153,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     return this.shadowRoot.querySelector("px-h1");
   }
   get $subtitleSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="subtitle"]'
+    );
+  }
+  get $subtitleSlotted() {
     return this.querySelector('[slot="subtitle"]');
   }
   get $patchDescriptionSlot() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'slot[name="patch-description"]'
+    );
+  }
+  get $patchDescriptionSlotted() {
     return this.querySelector('[slot="patch-description"]');
   }
   get $overlapSlot() {
@@ -6247,6 +6284,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       this.removeAttribute("has-gridding--laptop");
     }
   }
+  get hasGriddingDesktop() {
+    return this.hasAttribute("has-gridding--desktop");
+  }
+  set hasGriddingDesktop(value) {
+    if (value) {
+      this.setAttribute("has-gridding--desktop", "");
+    } else {
+      this.removeAttribute("has-gridding--desktop");
+    }
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }