@proximus/lavender-section 2.0.0-alpha.12 → 2.0.0-alpha.121

package/dist/Section.d.ts

@@ -1,14 +1,23 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
 import type { Container } from '@proximus/lavender-container';
 import '@proximus/lavender-container';
 import '@proximus/lavender-layout';
-export declare class Section extends HTMLElement {
+export declare class Section extends WithExtraAttributes {
     private template;
     constructor();
     connectedCallback(): void;
     static get observedAttributes(): string[];
-    get $container(): Container;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
+    toggleOverlapSpacing(): void;
+    private isNotEmptyNode;
+    setHeadingSpacing(): void;
+    get $container(): Container;
+    get $mainContentWrapper(): HTMLElement;
     get $slotOverlap(): HTMLSlotElement;
+    get $slottedOverlap(): HTMLSlotElement;
+    get $slotHeading(): HTMLSlotElement;
+    get $slottedHeading(): HTMLSlotElement;
     get backgroundColor(): string;
     set backgroundColor(value: string);
     get gradient(): string;

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { backgroundColorValues as a } from "@proximus/lavender-common";
+import { WithExtraAttributes as r, backgroundColorValues as d } from "@proximus/lavender-common";
 import "@proximus/lavender-container";
 import "@proximus/lavender-layout";
-const d = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', o = new CSSStyleSheet();
-o.replaceSync(d);
-class r extends HTMLElement {
+const n = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', a = new CSSStyleSheet();
+a.replaceSync(n);
+class s extends r {
   constructor() {
-    super(), this.template = () => `
-    <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
-      <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
+    super(a), this.template = () => `
+    <px-container border-radius="none" padding-inline="none">
+      <div class="content-wrapper">
         <px-vstack gap="heading-to-content">
           <slot name="heading"></slot>
           <px-vstack gap="none">
@@ -19,14 +19,18 @@ class r extends HTMLElement {
     <div class="content-wrapper">
       <slot name="overlap"></slot>
     </div>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
+  `, this.shadowRoot.innerHTML = this.template();
   }
   connectedCallback() {
-    const t = this.querySelector('[slot="heading"]');
-    !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+    var t, i;
+    this.$container.setAttribute("background-color", this.backgroundColor), !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (i = this.$slotOverlap) == null || i.addEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -54,14 +58,11 @@ class r extends HTMLElement {
       "border-side--laptop"
     ];
   }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
   attributeChangedCallback(t, i, e) {
     if (i !== e)
       switch (t) {
         case "background-color":
-          this.$container.backgroundColor = a.indexOf(e) > 0 ? e : "none";
+          this.$container.backgroundColor = d.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
           this.$container.gradient = this.gradient;
@@ -135,11 +136,61 @@ class r extends HTMLElement {
         case "border-side--laptop":
           this.$container.borderSideLaptop = e;
           break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+          break;
       }
   }
+  disconnectedCallback() {
+    var t, i;
+    (t = this.$slotHeading) == null || t.removeEventListener(
+      "slotchange",
+      this.setHeadingSpacing
+    ), (i = this.$slotOverlap) == null || i.removeEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
+  }
+  toggleOverlapSpacing() {
+    const t = this.$slotOverlap, i = this.$mainContentWrapper;
+    if (!t || !i) return;
+    const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
+    i.classList.toggle("overlapped", o);
+  }
+  isNotEmptyNode(t) {
+    return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
+  }
+  setHeadingSpacing() {
+    var e;
+    const t = this.$slotHeading, i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("px-vstack");
+    t && i && (t.assignedElements().length > 0 ? i.setAttribute("gap", "heading-to-content") : i.setAttribute("gap", "none"));
+  }
+  get $container() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
+  }
+  get $mainContentWrapper() {
+    var t;
+    return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
+  }
   get $slotOverlap() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      'slot[name="overlap"]'
+    );
+  }
+  get $slottedOverlap() {
     return this.querySelector('[slot="overlap"]');
   }
+  get $slotHeading() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      'slot[name="heading"]'
+    );
+  }
+  get $slottedHeading() {
+    return this.querySelector('[slot="heading"]');
+  }
   get backgroundColor() {
     return this.getAttribute("background-color") || "none";
   }
@@ -291,7 +342,7 @@ class r extends HTMLElement {
     this.setAttribute("border-side--laptop", t);
   }
 }
-customElements.get("px-section") || customElements.define("px-section", r);
+customElements.get("px-section") || customElements.define("px-section", s);
 export {
-  r as Section
+  s as Section
 };

package/package.json

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