@proximus/lavender-section 1.4.9-beta.2 → 1.4.9

package/dist/Section.d.ts

@@ -1,23 +1,14 @@
-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 WithExtraAttributes {
+export declare class Section extends HTMLElement {
     private template;
     constructor();
     connectedCallback(): void;
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    disconnectedCallback(): void;
-    toggleOverlapSpacing(): void;
-    private isNotEmptyNode;
-    setHeadingSpacing(): void;
     get $container(): Container;
-    get $mainContentWrapper(): HTMLElement;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     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,11 +1,11 @@
-import { WithExtraAttributes as r, backgroundColorValues as d } from "@proximus/lavender-common";
+import { backgroundColorValues as a } from "@proximus/lavender-common";
 import "@proximus/lavender-container";
 import "@proximus/lavender-layout";
-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-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}', a = new CSSStyleSheet();
-a.replaceSync(n);
-class s extends r {
+const r = ':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(r);
+class d extends HTMLElement {
   constructor() {
-    super(a), this.template = () => `
+    super(), this.template = () => `
     <px-container border-radius="none" padding-inline="none">
       <div class="content-wrapper">
         <px-vstack gap="heading-to-content">
@@ -19,18 +19,15 @@ class s extends r {
     <div class="content-wrapper">
       <slot name="overlap"></slot>
     </div>
-  `, this.shadowRoot.innerHTML = this.template();
+  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
   }
   connectedCallback() {
-    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
-    );
+    this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
+    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");
   }
   static get observedAttributes() {
     return [
-      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -58,11 +55,14 @@ class s extends r {
       "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 = d.indexOf(e) > 0 ? e : "none";
+          this.$container.backgroundColor = a.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
           this.$container.gradient = this.gradient;
@@ -136,61 +136,11 @@ class s extends r {
         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";
   }
@@ -342,7 +292,7 @@ class s extends r {
     this.setAttribute("border-side--laptop", t);
   }
 }
-customElements.get("px-section") || customElements.define("px-section", s);
+customElements.get("px-section") || customElements.define("px-section", d);
 export {
-  s as Section
+  d as Section
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-section",
-  "version": "1.4.9-beta.2",
+  "version": "1.4.9",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",