@proximus/lavender 1.0.0-alpha.11 → 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 [
@@ -193,9 +185,6 @@ class PxElement extends WithFlexAttributes {
     this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
   }
   connectedCallback() {
-    replayAttributes(this, PxElement.observedAttributes, (name, value) => {
-      this.attributeChangedCallback(name, null, value);
-    });
     for (const name of getSupportedAttributeNames(this.nativeName)) {
       if (name === "constructor") {
         continue;
@@ -424,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";
     }
@@ -1056,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);
@@ -1076,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;
@@ -1395,10 +1384,20 @@ const _Container = class _Container extends PxElement {
           this.updateAttribute(attrName, oldValue, newValue, borderValues);
           break;
         case "borderradius":
-          this.updateAttribute(attrName, oldValue, newValue, borderRadiusValues);
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            borderRadiusValues
+          );
           break;
         case "noborderradius":
-          this.updateAttribute(attrName, oldValue, newValue, noBorderRadiusValues);
+          this.updateAttribute(
+            attrName,
+            oldValue,
+            newValue,
+            noBorderRadiusValues
+          );
           break;
         case "bgcolor":
           this.updateAttribute(attrName, oldValue, newValue, bgColorValues);
@@ -1444,7 +1443,9 @@ const _Container = class _Container extends PxElement {
     if (this.checkName(gradientValues, newValue)) {
       this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${newValue}))`;
     } else {
-      console.error(`${newValue} is not an allowed gradient value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed gradient value for ${this.$el}`
+      );
     }
   }
   updateAttribute(attrName, oldValue, newValue, attrValues) {
@@ -1455,7 +1456,9 @@ const _Container = class _Container extends PxElement {
       this.$el.classList.toggle(`${attrName}-${newValue}`);
     }
     if (!this.checkName(attrValues, newValue)) {
-      console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
+      console.error(
+        `${newValue} is not an allowed ${attrName} value for ${this.$el}`
+      );
     }
   }
   checkName(values, value) {
@@ -1654,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");
@@ -2221,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);
@@ -2584,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")) {
@@ -2669,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");
     }
@@ -2838,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) {
@@ -2910,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) {
@@ -3506,6 +3487,5 @@ export {
   isFalsy,
   paddingValues,
   proximusSemanticStyleSheet,
-  replayAttributes,
   shadowValues
 };