@proximus/lavender 2.0.0-alpha.20 → 2.0.0-alpha.22

package/dist/lavender.es.js

@@ -14123,7 +14123,7 @@ let Card = _Card;
 if (!customElements.get("px-card")) {
   customElements.define("px-card", Card);
 }
-const contentHeaderCss = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}: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;border-radius:var(--px-radius-main)}[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 only screen and (min-width: 48em){.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 only screen and (min-width: 64.0625em){.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.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}: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 only screen and (min-width: 48em){.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 only screen and (min-width: 64.0625em){.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 contentHeaderStyles = new CSSStyleSheet();
 contentHeaderStyles.replaceSync(contentHeaderCss);
 const _ContentHeader = class _ContentHeader extends PxElement {
@@ -14132,16 +14132,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
     this.template = () => `<div class="content-header">
       <div class="contrast-helper"></div>
       <px-section padding-block="l">
-        <div class="content-header-content">
-          <px-vstack gap="heading-to-subtitle">
-            <px-h1 variant="title-3xl"><slot></slot></px-h1>
-            <slot name="subtitle"></slot>
-          </px-vstack>
-          ${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
-            <slot name="patch" shrink></slot>
-            <slot name="patch-description"></slot>
-          </px-stack>` : ""}
-        </div>
+      <px-grid gap="none">
+        <px-container padding="none" border-radius="none" background-color="none" background-image="none" background-image--mobile="none" background-image--tablet="none" background-image--laptop="none" >
+          <div class="content-header-content">
+            <px-vstack gap="heading-to-subtitle">
+              <px-h1 variant="title-3xl"><slot></slot></px-h1>
+              <slot name="subtitle"></slot>
+            </px-vstack>
+            ${this.$patchDescriptionSlot ? `<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>
         ${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
       </px-section>
     </div>`;
@@ -14160,6 +14164,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "contrast-helper-gradient",
       "contrast-helper-overlay",
       "min-height",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
       "inverted"
     ];
   }
@@ -14182,6 +14190,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         this.$patchDescriptionSlot.setAttribute("size", "m");
       }
     }
+    this.createGridding();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
@@ -14210,6 +14219,12 @@ const _ContentHeader = class _ContentHeader extends PxElement {
         case "background-position":
           this.$section.backgroundPosition = newValue;
           break;
+        case "has-gridding":
+        case "has-gridding--mobile":
+        case "has-gridding--tablet":
+        case "has-gridding--laptop":
+          this.createGridding();
+          break;
         case "inverted":
           for (let i = 0; i < this.$children.length; i++) {
             if (!this.$children[i].hasAttribute("inverted")) {
@@ -14225,6 +14240,38 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       }
     }
   }
+  createGridding() {
+    const breakpoints = [
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
+      {
+        prop: "hasGriddingMobile",
+        gridProp: "gridColsMobile",
+        attr: "col-span--mobile"
+      },
+      {
+        prop: "hasGriddingTablet",
+        gridProp: "gridColsTablet",
+        attr: "col-span--tablet"
+      },
+      {
+        prop: "hasGriddingLaptop",
+        gridProp: "gridColsLaptop",
+        attr: "col-span--laptop"
+      }
+    ];
+    const spanElement = this.shadowRoot.querySelector(
+      "px-grid > px-container"
+    );
+    breakpoints.forEach(({ prop, gridProp, attr }) => {
+      if (this[prop]) {
+        this.$grid[gridProp] = "3";
+        spanElement.setAttribute(attr, "2");
+      }
+    });
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
+  }
   get $section() {
     return this.shadowRoot.querySelector("px-section");
   }
@@ -14311,6 +14358,46 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       this.removeAttribute("contrast-helper-overlay");
     }
   }
+  get hasGridding() {
+    return this.hasAttribute("has-gridding");
+  }
+  set hasGridding(value) {
+    if (value) {
+      this.setAttribute("has-gridding", "");
+    } else {
+      this.removeAttribute("has-gridding");
+    }
+  }
+  get hasGriddingMobile() {
+    return this.hasAttribute("has-gridding--mobile");
+  }
+  set hasGriddingMobile(value) {
+    if (value) {
+      this.setAttribute("has-gridding--mobile", "");
+    } else {
+      this.removeAttribute("has-gridding--mobile");
+    }
+  }
+  get hasGriddingTablet() {
+    return this.hasAttribute("has-gridding--tablet");
+  }
+  set hasGriddingTablet(value) {
+    if (value) {
+      this.setAttribute("has-gridding--tablet", "");
+    } else {
+      this.removeAttribute("has-gridding--tablet");
+    }
+  }
+  get hasGriddingLaptop() {
+    return this.hasAttribute("has-gridding--laptop");
+  }
+  set hasGriddingLaptop(value) {
+    if (value) {
+      this.setAttribute("has-gridding--laptop", "");
+    } else {
+      this.removeAttribute("has-gridding--laptop");
+    }
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }