@proximus/lavender-container 1.4.1-alpha.1 → 1.4.1-alpha.11

package/dist/Container.d.ts

@@ -1,11 +1,10 @@
-import { PxElement } from '@proximus/lavender-common';
-declare const anchorValues: readonly ["anchor-right", "anchor-left", "anchor-full"];
-export type AnchorValue = (typeof anchorValues)[number];
-export declare class Container extends PxElement<HTMLDivElement> {
+import { VerticallyExtendedElement } from '@proximus/lavender-common';
+export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
     static nativeName: string;
     private template;
     private _bgObserver;
     private _isInViewport;
+    private contentObserver;
     constructor();
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -23,6 +22,8 @@ export declare class Container extends PxElement<HTMLDivElement> {
         breakpoint: string;
     };
     updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
+    addAnchorClass(): void;
+    get $slotAnchor(): HTMLSlotElement;
     get padding(): string;
     set padding(value: string);
     get paddingBlock(): string;
@@ -136,4 +137,3 @@ export declare class Container extends PxElement<HTMLDivElement> {
     get inverted(): string;
     set inverted(value: string);
 }
-export {};

package/dist/index.es.js

@@ -1,56 +1,55 @@
-import { PxElement as c, cssTokenBreakpoints as a, paddingValues as d, boxShadowValues as h, backgroundSizeValues as k, noBorderRadiusValues as m, borderRadiusValues as f, borderSideValues as v, borderValues as A, gradientValues as y, backgroundColorValues as x, borderColorValues as $, checkName as B } from "@proximus/lavender-common";
+import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as c, boxShadowValues as h, backgroundSizeValues as k, noBorderRadiusValues as m, borderRadiusValues as f, borderSideValues as v, borderValues as A, gradientValues as y, backgroundColorValues as x, borderColorValues as $, checkName as B } from "@proximus/lavender-common";
 const L = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', p = new CSSStyleSheet();
 p.replaceSync(L);
-const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", g = class g extends c {
+const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
+  a(
+    "padding",
+    n,
+    d,
+    s,
+    "--container-padding"
+  ),
+  a(
+    "padding-inline",
+    n,
+    d,
+    s
+  ),
+  a(
+    "padding-block",
+    n,
+    d,
+    s
+  ),
+  a(
+    "padding-top",
+    n,
+    d,
+    s
+  ),
+  a(
+    "padding-right",
+    n,
+    d,
+    s,
+    "--container-padding-right"
+  ),
+  a(
+    "padding-bottom",
+    n,
+    d,
+    s
+  ),
+  a(
+    "padding-left",
+    n,
+    d,
+    s,
+    "--container-padding-left"
+  )
+], g = class g extends c {
   constructor() {
-    super(
-      p,
-      a(
-        "padding",
-        n,
-        d,
-        s,
-        "--container-padding"
-      ),
-      a(
-        "padding-inline",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-block",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-top",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-right",
-        n,
-        d,
-        s,
-        "--container-padding-right"
-      ),
-      a(
-        "padding-bottom",
-        n,
-        d,
-        s
-      ),
-      a(
-        "padding-left",
-        n,
-        d,
-        s,
-        "--container-padding-left"
-      )
-    ), this.template = () => `<div class="container">
+    super(p, ...T), this.template = () => `<div class="container">
       <slot></slot>
       <slot name="anchor-left"></slot>
       <slot name="anchor-right"></slot>
@@ -91,18 +90,22 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
-    const t = this.querySelector("[slot]");
-    t && T.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
-      e.forEach((r) => {
-        var i;
-        r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (i = this._bgObserver) == null || i.disconnect());
+    super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
+      this.$slotAnchor && this.addAnchorClass();
+    }), this.contentObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      characterData: !0
+    }), this._bgObserver = new IntersectionObserver((t) => {
+      t.forEach((e) => {
+        var r;
+        e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
       });
     }), this._bgObserver.observe(this.$el);
   }
   disconnectedCallback() {
     var t;
-    (t = this._bgObserver) == null || t.disconnect();
+    (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
   }
   attributeChangedCallback(t, e, r) {
     if (e !== r)
@@ -280,6 +283,12 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
     };
     i(t), i(e);
   }
+  addAnchorClass() {
+    this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
+  }
+  get $slotAnchor() {
+    return this.querySelector('[slot^="anchor"]');
+  }
   get padding() {
     return this.getAttribute("padding");
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-container",
-  "version": "1.4.1-alpha.1",
+  "version": "1.4.1-alpha.11",
   "description": "",
   "files": [
     "dist"