@proximus/lavender 1.0.0-alpha.12 → 1.0.0-alpha.13

package/dist/lavender.es.js

@@ -6,14 +6,6 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet = new CSSStyleSheet();
 commonStyleSheet.replaceSync(commonStyles);
-function replayAttributes(element, observedAttributes, callback) {
-  observedAttributes.forEach((name) => {
-    const value = element.getAttribute(name);
-    if (value !== null) {
-      callback(name, value);
-    }
-  });
-}
 class WithFlexAttributes extends HTMLElement {
   static get observedAttributes() {
     return [
@@ -174,11 +166,6 @@ class WithFlexAttributes extends HTMLElement {
   }
 }
 class PxElement extends WithFlexAttributes {
-  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
-    super(semanticTokensStylesheet, ...adoptedStylesheets);
-    this.replayAttributes = false;
-    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
-  }
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -186,12 +173,6 @@ class PxElement extends WithFlexAttributes {
     ];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.shadowRoot) {
-      console.warn(
-        "shadowRoot not available yet, replaying attributes once connected"
-      );
-      this.replayAttributes = true;
-    }
     super.attributeChangedCallback(name, oldValue, newValue);
     if (newValue === null) {
       this.$el.toggleAttribute(name);
@@ -199,18 +180,11 @@ class PxElement extends WithFlexAttributes {
       this.$el.setAttribute(name, newValue);
     }
   }
+  constructor(semanticTokensStylesheet, ...adoptedStylesheets) {
+    super(semanticTokensStylesheet, ...adoptedStylesheets);
+    this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
+  }
   connectedCallback() {
-    if (this.replayAttributes) {
-      replayAttributes(
-        this,
-        Object.getPrototypeOf(this).constructor.observedAttributes,
-        (name, value) => {
-          if (this.getAttribute(name) !== null) {
-            this.attributeChangedCallback(name, null, value);
-          }
-        }
-      );
-    }
     for (const name of getSupportedAttributeNames(this.nativeName)) {
       if (name === "constructor") {
         continue;
@@ -439,9 +413,6 @@ class Stack extends WithFlexAttributes {
     this.shadowRoot.innerHTML = this.template;
   }
   connectedCallback() {
-    replayAttributes(this, Stack.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     if (!this.hasAttribute("direction")) {
       this.direction = "row";
     }
@@ -1071,13 +1042,16 @@ class Page extends WithFlexAttributes {
     if (oldValue !== newValue) {
       switch (name) {
         case "background-image":
-          this.$imageContainer.bgImgMobile = newValue;
+          this.$imageContainer.setAttribute("bgimg-mobile", newValue);
           break;
         case "gap":
-          this.$bodyVStackContainer.gap = newValue;
+          this.$bodyVStackContainer.setAttribute("gap", newValue);
           break;
         case "background-color":
-          this.$bodyContainer.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "none";
+          this.$bodyContainer.setAttribute(
+            "bgcolor",
+            bgColorValues.indexOf(newValue) > 0 ? newValue : "none"
+          );
           break;
         case "padding-vertical":
           this.handlePaddingVerticalChange(newValue);
@@ -1091,8 +1065,8 @@ class Page extends WithFlexAttributes {
     }
   }
   handlePaddingVerticalChange(newValue) {
-    this.$headerContainer.paddingTop = newValue;
-    this.$footerContainer.paddingBottom = newValue;
+    this.$headerContainer.setAttribute("paddingtop", newValue);
+    this.$footerContainer.setAttribute("paddingbottom", newValue);
   }
   handlePaddingHorizontalChange(newValue) {
     this.$headerContainer.paddingLeft = newValue;
@@ -1683,9 +1657,6 @@ class Section2 extends HTMLElement {
     this.shadowRoot.adoptedStyleSheets = [semanticTokensStylesheet, styleSheet$9];
   }
   connectedCallback() {
-    replayAttributes(this, Section2.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     const headingSlot = this.querySelector('[slot="heading"]');
     if (!headingSlot) {
       this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
@@ -2250,11 +2221,6 @@ class Patch extends HTMLElement {
       }
     }
   }
-  connectedCallback() {
-    replayAttributes(this, Patch.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
-  }
   _toggleClass(oldValue, newValue) {
     if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
       this.$el.classList.toggle(oldValue);
@@ -2613,9 +2579,6 @@ class Tabs extends HTMLElement {
     }
   }
   connectedCallback() {
-    replayAttributes(this, Tabs.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     this.addEventListener("click", (event) => {
       var _a;
       if ((_a = event.target.localName) == null ? void 0 : _a.endsWith("-tab")) {
@@ -2698,9 +2661,6 @@ class Tab extends HTMLElement {
     return ["selected", "for", "name"];
   }
   connectedCallback() {
-    replayAttributes(this, Tab.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     if (!this.name) {
       console.error("Tab needs a name attribute");
     }
@@ -2867,9 +2827,6 @@ class Timeline extends HTMLElement {
     return ["inverted"];
   }
   connectedCallback() {
-    replayAttributes(this, Timeline.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     this.configureChildren();
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -2939,11 +2896,6 @@ class TimelineItem extends HTMLElement {
   static get observedAttributes() {
     return ["inverted", "lastchild", "item"];
   }
-  connectedCallback() {
-    replayAttributes(this, TimelineItem.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
-  }
   attributeChangedCallback(attrName, oldValue, newValue) {
     if (oldValue !== newValue) {
       switch (attrName) {
@@ -3535,6 +3487,5 @@ export {
   isFalsy,
   paddingValues,
   proximusSemanticStyleSheet,
-  replayAttributes,
   shadowValues
 };