@proximus/lavender-content-header 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/ContentHeader.d.ts

@@ -1,5 +1,6 @@
 import { Section } from '@proximus/lavender-section';
 import { H1 } from '@proximus/lavender-heading';
+import { Grid } from '@proximus/lavender-grid';
 import { PxElement } from '@proximus/lavender-common';
 export declare class ContentHeader extends PxElement<HTMLDivElement> {
     static nativeName: string;
@@ -8,6 +9,8 @@ export declare class ContentHeader extends PxElement<HTMLDivElement> {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    createGridding(): void;
+    get $grid(): Grid;
     get $section(): Section;
     get $h1(): H1;
     get $subtitleSlot(): HTMLSlotElement;
@@ -34,6 +37,14 @@ export declare class ContentHeader extends PxElement<HTMLDivElement> {
     set gradientContrastHelper(value: boolean);
     get overlayContrastHelper(): boolean;
     set overlayContrastHelper(value: boolean);
+    get hasGridding(): boolean;
+    set hasGridding(value: boolean);
+    get hasGriddingMobile(): boolean;
+    set hasGriddingMobile(value: boolean);
+    get hasGriddingTablet(): boolean;
+    set hasGriddingTablet(value: boolean);
+    get hasGriddingLaptop(): boolean;
+    set hasGriddingLaptop(value: boolean);
     get inverted(): boolean;
     set inverted(value: boolean);
     get minHeight(): boolean;

package/dist/index.es.js

@@ -1,21 +1,25 @@
-import { PxElement as s, backgroundSizeValues as c, gradientValues as l, backgroundColorValues as g } from "@proximus/lavender-common";
-const h = ":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))}}", n = new CSSStyleSheet();
+import { PxElement as g, backgroundSizeValues as d, gradientValues as c, backgroundColorValues as l } from "@proximus/lavender-common";
+const h = ":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))}}", n = new CSSStyleSheet();
 n.replaceSync(h);
-const o = class o extends s {
+const o = class o extends g {
   constructor() {
     super(n), 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>`, this.shadowRoot.innerHTML = this.template();
@@ -33,21 +37,25 @@ const o = class o extends s {
       "contrast-helper-gradient",
       "contrast-helper-overlay",
       "min-height",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
       "inverted"
     ];
   }
   connectedCallback() {
     var t;
-    (t = super.connectedCallback) == null || t.call(this), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (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")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m"));
+    (t = super.connectedCallback) == null || t.call(this), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (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")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
   }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e)
+  attributeChangedCallback(t, r, e) {
+    if (r !== e)
       switch (t) {
         case "background-color":
-          this.$section.backgroundColor = g.indexOf(e) > 0 ? e : "none";
+          this.$section.backgroundColor = l.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
-          this.$section.gradient = l.indexOf(e) > 0 ? e : "none";
+          this.$section.gradient = c.indexOf(e) > 0 ? e : "none";
           break;
         case "background-image":
           this.$section.backgroundImage = e;
@@ -62,21 +70,55 @@ const o = class o extends s {
           this.$section.backgroundImageLaptop = e;
           break;
         case "background-size":
-          this.$section.backgroundSize = c.indexOf(e) > 0 ? e : "";
+          this.$section.backgroundSize = d.indexOf(e) > 0 ? e : "";
           break;
         case "background-position":
           this.$section.backgroundPosition = e;
           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++)
             this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
           this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
           break;
         default:
-          super.attributeChangedCallback(t, a, e);
+          super.attributeChangedCallback(t, r, e);
           break;
       }
   }
+  createGridding() {
+    const t = [
+      { 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"
+      }
+    ], r = this.shadowRoot.querySelector(
+      "px-grid > px-container"
+    );
+    t.forEach(({ prop: e, gridProp: i, attr: s }) => {
+      this[e] && (this.$grid[i] = "3", r.setAttribute(s, "2"));
+    });
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
+  }
   get $section() {
     return this.shadowRoot.querySelector("px-section");
   }
@@ -155,6 +197,30 @@ const o = class o extends s {
   set overlayContrastHelper(t) {
     t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
   }
+  get hasGridding() {
+    return this.hasAttribute("has-gridding");
+  }
+  set hasGridding(t) {
+    t ? this.setAttribute("has-gridding", "") : this.removeAttribute("has-gridding");
+  }
+  get hasGriddingMobile() {
+    return this.hasAttribute("has-gridding--mobile");
+  }
+  set hasGriddingMobile(t) {
+    t ? this.setAttribute("has-gridding--mobile", "") : this.removeAttribute("has-gridding--mobile");
+  }
+  get hasGriddingTablet() {
+    return this.hasAttribute("has-gridding--tablet");
+  }
+  set hasGriddingTablet(t) {
+    t ? this.setAttribute("has-gridding--tablet", "") : this.removeAttribute("has-gridding--tablet");
+  }
+  get hasGriddingLaptop() {
+    return this.hasAttribute("has-gridding--laptop");
+  }
+  set hasGriddingLaptop(t) {
+    t ? this.setAttribute("has-gridding--laptop", "") : this.removeAttribute("has-gridding--laptop");
+  }
   get inverted() {
     return this.hasAttribute("inverted");
   }
@@ -169,8 +235,8 @@ const o = class o extends s {
   }
 };
 o.nativeName = "div";
-let r = o;
-customElements.get("px-content-header") || customElements.define("px-content-header", r);
+let a = o;
+customElements.get("px-content-header") || customElements.define("px-content-header", a);
 export {
-  r as ContentHeader
+  a as ContentHeader
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-content-header",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",