@proximus/lavender-banner 1.0.0-alpha.15 → 1.0.0-alpha.17

package/dist/Banner.d.ts

@@ -1,4 +1,5 @@
 import { Container } from '@proximus/lavender-container';
+import { Grid } from '@proximus/lavender-grid';
 import { PxElement } from '@proximus/lavender-common';
 export declare class Banner extends PxElement<HTMLDivElement> {
     static nativeName: string;
@@ -8,6 +9,8 @@ export declare class Banner extends PxElement<HTMLDivElement> {
     connectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     createGridTemplateAreas(): void;
+    createGridding(): void;
+    get $grid(): Grid;
     get $container(): Container;
     get $children(): NodeListOf<Element>;
     get backgroundColor(): string;
@@ -34,4 +37,12 @@ export declare class Banner extends PxElement<HTMLDivElement> {
     set inverted(value: boolean);
     get reduced(): boolean;
     set reduced(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);
 }

package/dist/index.es.js

@@ -1,19 +1,23 @@
-import { PxElement as d, backgroundSizeValues as c, gradientValues as g, backgroundColorValues as l } from "@proximus/lavender-common";
+import { PxElement as d, backgroundSizeValues as g, gradientValues as c, backgroundColorValues as l } from "@proximus/lavender-common";
 const b = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.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){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}', s = new CSSStyleSheet();
 s.replaceSync(b);
 const o = class o extends d {
   constructor() {
     super(s), this.template = () => `<div class="banner">
       <div class="contrast-helper"></div>
-      <px-container padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
-        <div class="banner-content">
-          <slot name="tag"></slot>
-          <slot name="media"></slot>
-          <slot name="title"></slot>
-          <slot name="description"></slot>
-          <slot name="content"></slot>
-          <slot name="action"></slot>
-        </div>
+      <px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
+        <px-grid gap="none">
+          <px-container padding="none" background-color="none" background-image="none" background-image--mobile="none" background-image--tablet="none" background-image--laptop="none" >
+            <div class="banner-content">
+              <slot name="tag"></slot>
+              <slot name="media"></slot>
+              <slot name="title"></slot>
+              <slot name="description"></slot>
+              <slot name="content"></slot>
+              <slot name="action"></slot>
+            </div>
+          </px-container>
+        </px-grid>
       </px-container>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
@@ -29,22 +33,26 @@ const o = class o extends d {
       "background-position",
       "contrast-helper-gradient",
       "contrast-helper-overlay",
+      "has-gridding",
+      "has-gridding--mobile",
+      "has-gridding--tablet",
+      "has-gridding--laptop",
       "reduced",
       "inverted"
     ];
   }
   connectedCallback() {
     var t;
-    (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas();
+    (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding();
   }
-  attributeChangedCallback(t, a, e) {
-    if (a !== e)
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
       switch (t) {
         case "background-color":
           this.$container.backgroundColor = l.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
-          this.$container.gradient = g.indexOf(e) > 0 ? e : "none";
+          this.$container.gradient = c.indexOf(e) > 0 ? e : "none";
           break;
         case "background-image":
           this.$container.backgroundImage = e;
@@ -59,7 +67,7 @@ const o = class o extends d {
           this.$container.backgroundImageLaptop = e;
           break;
         case "background-size":
-          this.$container.backgroundSize = c.indexOf(e) > 0 ? e : "";
+          this.$container.backgroundSize = g.indexOf(e) > 0 ? e : "";
           break;
         case "background-position":
           this.$container.backgroundPosition = e;
@@ -67,40 +75,74 @@ const o = class o extends d {
         case "reduced":
           this.$el.toggleAttribute("reduced", e !== null), this.createGridTemplateAreas();
           break;
+        case "has-gridding":
+        case "has-gridding--mobile":
+        case "has-gridding--tablet":
+        case "has-gridding--laptop":
+          this.createGridding();
+          break;
         case "inverted":
           for (let r = 0; r < this.$children.length; r++)
             this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
           this.$el.toggleAttribute("inverted", e !== null);
           break;
         default:
-          super.attributeChangedCallback(t, a, e);
+          super.attributeChangedCallback(t, i, e);
           break;
       }
   }
   createGridTemplateAreas() {
     const t = this.shadowRoot.querySelector(
       ".banner-content"
-    ), a = ["tag", "media", "title", "description", "content", "action"];
+    ), i = ["tag", "media", "title", "description", "content", "action"];
     let e = "";
-    this.reduced ? a.forEach((r) => {
-      const n = this.shadowRoot.querySelector(
+    this.reduced ? i.forEach((r) => {
+      const a = this.shadowRoot.querySelector(
         `slot[name="${r}"]`
       );
-      if (n && n.assignedElements().length > 0) {
+      if (a && a.assignedElements().length > 0) {
         if (r === "media") return;
         e += `'media ${r}'
 `;
       }
-    }) : a.forEach((r) => {
-      const n = this.shadowRoot.querySelector(
+    }) : i.forEach((r) => {
+      const a = this.shadowRoot.querySelector(
         `slot[name="${r}"]`
       );
-      n && n.assignedElements().length > 0 && (e += `'${r}'
+      a && a.assignedElements().length > 0 && (e += `'${r}'
 `);
     }), e || (e = "'content'"), t.style.gridTemplateAreas = e;
   }
+  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"
+      }
+    ], i = this.shadowRoot.querySelector(
+      "px-grid > px-container"
+    );
+    t.forEach(({ prop: e, gridProp: r, attr: a }) => {
+      this[e] && (this.$grid[r] = "3", i.setAttribute(a, "2"));
+    });
+  }
+  get $grid() {
+    return this.shadowRoot.querySelector("px-grid");
+  }
   get $container() {
-    return this.shadowRoot.querySelector("px-container");
+    return this.shadowRoot.querySelector(".banner-container");
   }
   get $children() {
     return this.querySelectorAll("px-banner > *");
@@ -177,10 +219,34 @@ const o = class o extends d {
   set reduced(t) {
     t ? this.setAttribute("reduced", "") : this.removeAttribute("reduced");
   }
+  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");
+  }
 };
 o.nativeName = "div";
-let i = o;
-customElements.get("px-banner") || customElements.define("px-banner", i);
+let n = o;
+customElements.get("px-banner") || customElements.define("px-banner", n);
 export {
-  i as Banner
+  n as Banner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-banner",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.17",
   "description": "",
   "files": [
     "dist"