@proximus/lavender-banner 1.4.5-alpha.9 → 1.4.5-beta.2

package/dist/Banner.d.ts

@@ -5,11 +5,13 @@ import '@proximus/lavender-grid';
 import { VerticallyExtendedElement } from '@proximus/lavender-common';
 export declare class Banner extends VerticallyExtendedElement<HTMLDivElement> {
     static nativeName: string;
+    observer: MutationObserver;
     private template;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
     createGridTemplateAreas(): void;
     createGridding(value?: string): void;
     get $grid(): Grid;

package/dist/index.es.js

@@ -2,7 +2,7 @@ import "@proximus/lavender-container";
 import { cssTokenBreakpoints as b, gapValues as m, PxElement as h, log as c, VerticallyExtendedElement as f, backgroundSizeValues as y, gradientValues as j, backgroundColorValues as k } from "@proximus/lavender-common";
 const A = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em;height:100%}.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}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="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))}}', v = ":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 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: 48em) and (max-width: 64em){.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: 64.0625em){.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}}", g = new CSSStyleSheet();
 g.replaceSync(v);
-const x = [
+const C = [
   "1",
   "2",
   "3",
@@ -15,7 +15,7 @@ const x = [
   "10",
   "11",
   "12"
-], C = [
+], x = [
   "",
   "start",
   "end",
@@ -24,15 +24,15 @@ const x = [
   "space-around",
   "space-evenly",
   "stretch"
-], $ = ["", "start", "end", "center", "stretch"], I = (u, t, i) => `:host([${u}${i ? `--${i}` : ""}='${t}']) .grid`, S = "px-spacing", T = b(
+], $ = ["", "start", "end", "center", "stretch"], I = (u, t, i) => `:host([${u}${i ? `--${i}` : ""}='${t}']) .grid`, T = "px-spacing", S = b(
   "gap",
   I,
   m,
-  S,
+  T,
   "--grid-gap"
 ), o = class o extends h {
   constructor() {
-    super(g, T), this.template = () => `<div class="grid">
+    super(g, S), this.template = () => `<div class="grid">
     <slot></slot>
     </div>`, this.shadowRoot.innerHTML = this.template();
   }
@@ -75,7 +75,7 @@ const x = [
         case "grid-cols--mobile":
         case "grid-cols--tablet":
         case "grid-cols--laptop":
-          this.updateAttribute(t, i, e, x);
+          this.updateAttribute(t, i, e, C);
           break;
         case "justify-content":
         case "align-content":
@@ -91,7 +91,7 @@ const x = [
             t,
             i,
             e,
-            C
+            x
           );
           break;
         case "justify-items":
@@ -330,6 +330,7 @@ const l = class l extends f {
                 <slot name="title"></slot>
                 <slot name="description"></slot>
                 <slot name="content"></slot>
+                
               </div>
             </px-container>
           </px-grid>
@@ -361,7 +362,12 @@ const l = class l extends f {
   }
   connectedCallback() {
     var t;
-    (t = super.connectedCallback) == null || t.call(this), this.reduced ? this.$container.setAttribute("padding", "m") : this.$container.setAttribute("padding", "l"), this.createGridTemplateAreas(), this.createGridding();
+    (t = super.connectedCallback) == null || t.call(this), this.createGridTemplateAreas(), this.createGridding(), this.observer = new MutationObserver(() => {
+      this.createGridTemplateAreas(), this.createGridding();
+    }), this.observer.observe(this, {
+      childList: !0,
+      subtree: !0
+    });
   }
   attributeChangedCallback(t, i, e) {
     if (i !== e)
@@ -409,6 +415,9 @@ const l = class l extends f {
           break;
       }
   }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
   createGridTemplateAreas() {
     const t = this.shadowRoot.querySelector(
       ".banner-content"
@@ -433,29 +442,29 @@ const l = class l extends f {
   }
   createGridding(t) {
     const i = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ], e = this.shadowRoot.querySelector(
       "px-grid > px-container"
     );
-    t !== null ? i.forEach(({ prop: n, gridAttr: s, attr: p }) => {
-      this[n] && (this.$grid.setAttribute(s, "3"), e == null || e.setAttribute(p, "2"));
-    }) : i.forEach(({ gridAttr: n, attr: s }) => {
-      this.$grid.setAttribute(n, "1"), e == null || e.setAttribute(s, "1");
+    t !== null ? i.forEach(({ prop: n, gridProp: s, attr: p }) => {
+      this[n] && (this.$grid[s] = "3", e.setAttribute(p, "2"));
+    }) : i.forEach(({ gridProp: n, attr: s }) => {
+      this.$grid[n] = "1", e.removeAttribute(s);
     });
   }
   get $grid() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-banner",
-  "version": "1.4.5-alpha.9",
+  "version": "1.4.5-beta.2",
   "description": "",
   "files": [
     "dist"