@proximus/lavender-section 2.0.0-alpha.100 → 2.0.0-alpha.102

package/dist/Section.d.ts

@@ -1,7 +1,8 @@
+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;

package/dist/index.es.js

@@ -1,11 +1,11 @@
-import { backgroundColorValues as r } 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 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(d);
-class n 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 = () => `
+    super(a), this.template = () => `
     <px-container border-radius="none" padding-inline="none">
       <div class="content-wrapper">
         <px-vstack gap="heading-to-content">
@@ -19,17 +19,18 @@ class n extends HTMLElement {
     <div class="content-wrapper">
       <slot name="overlap"></slot>
     </div>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [a];
+  `, this.shadowRoot.innerHTML = this.template();
   }
   connectedCallback() {
-    var t, o;
-    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(), (o = this.$slotOverlap) == null || o.addEventListener(
+    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",
@@ -57,11 +58,11 @@ class n extends HTMLElement {
       "border-side--laptop"
     ];
   }
-  attributeChangedCallback(t, o, e) {
-    if (o !== e)
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
       switch (t) {
         case "background-color":
-          this.$container.backgroundColor = r.indexOf(e) > 0 ? e : "none";
+          this.$container.backgroundColor = d.indexOf(e) > 0 ? e : "none";
           break;
         case "background-gradient":
           this.$container.gradient = this.gradient;
@@ -135,31 +136,34 @@ class n extends HTMLElement {
         case "border-side--laptop":
           this.$container.borderSideLaptop = e;
           break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+          break;
       }
   }
   disconnectedCallback() {
-    var t, o;
+    var t, i;
     (t = this.$slotHeading) == null || t.removeEventListener(
       "slotchange",
       this.setHeadingSpacing
-    ), (o = this.$slotOverlap) == null || o.removeEventListener(
+    ), (i = this.$slotOverlap) == null || i.removeEventListener(
       "slotchange",
       this.toggleOverlapSpacing
     );
   }
   toggleOverlapSpacing() {
-    const t = this.$slotOverlap, o = this.$mainContentWrapper;
-    if (!t || !o) return;
-    const i = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
-    o.classList.toggle("overlapped", i);
+    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, o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("px-vstack");
-    t && o && (t.assignedElements().length > 0 ? o.setAttribute("gap", "heading-to-content") : o.setAttribute("gap", "none"));
+    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;
@@ -338,7 +342,7 @@ class n extends HTMLElement {
     this.setAttribute("border-side--laptop", t);
   }
 }
-customElements.get("px-section") || customElements.define("px-section", n);
+customElements.get("px-section") || customElements.define("px-section", s);
 export {
-  n as Section
+  s as Section
 };

package/package.json

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