@proximus/lavender-section 1.0.0-alpha.7 → 1.0.0-alpha.8

package/dist/PxSection.es.js

@@ -1,12 +1,12 @@
-import { bgColorValues as g } from "@proximus/lavender-common";
+import { bgColorValues as a } from "@proximus/lavender-common";
 import "@proximus/lavender-container";
 import "@proximus/lavender-layout";
-const s = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", i = new CSSStyleSheet();
-i.replaceSync(s);
-class r extends HTMLElement {
+const r = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", i = new CSSStyleSheet();
+i.replaceSync(r);
+class n extends HTMLElement {
   constructor() {
     super(), this.template = () => `
-    <px-container borderradius="none" padding="none" bgcolor="${this.bgColor}">
+    <px-container border-radius="none" padding="none" background-color="${this.bgColor}">
       <div class="content-wrapper">
         <px-vstack gap="under-display-vertical">
           <slot name="heading"></slot>
@@ -23,16 +23,16 @@ class r extends HTMLElement {
   }
   static get observedAttributes() {
     return [
-      "bgcolor",
-      "gradient",
-      "bgimg-mobile",
-      "bgimg-tablet",
-      "bgimg-laptop",
-      "bgimgsize",
-      "bgimgposition",
-      "paddingblock",
-      "paddingtop",
-      "paddingbottom"
+      "background-color",
+      "background-gradient",
+      "background-image-mobile",
+      "background-image-tablet",
+      "background-image-laptop",
+      "background-size",
+      "background-position",
+      "padding-block",
+      "padding-top",
+      "padding-bottom"
     ];
   }
   get $container() {
@@ -41,100 +41,100 @@ class r extends HTMLElement {
   attributeChangedCallback(t, o, e) {
     if (o !== e)
       switch (t) {
-        case "bgcolor":
-          this.$container.bgColor = g.indexOf(e) > 0 ? e : "none";
+        case "background-color":
+          this.$container.bgColor = a.indexOf(e) > 0 ? e : "none";
           break;
-        case "gradient":
+        case "background-gradient":
           this.$container.gradient = this.gradient;
           break;
-        case "bgimg-mobile":
+        case "background-image-mobile":
           this.$container.bgImgMobile = e;
           break;
-        case "bgimg-tablet":
+        case "background-image-tablet":
           this.$container.bgImgTablet = e;
           break;
-        case "bgimg-laptop":
+        case "background-image-laptop":
           this.$container.bgImgLaptop = e;
           break;
-        case "bgimgsize":
+        case "background-size":
           this.$container.bgImgSize = e;
           break;
-        case "bgimgposition":
+        case "background-position":
           this.$container.bgImgPosition = e;
           break;
-        case "paddingblock":
+        case "padding-block":
           this.$container.paddingBlock = e;
           break;
-        case "paddingtop":
+        case "padding-top":
           this.$container.paddingTop = e;
           break;
-        case "paddingbottom":
+        case "padding-bottom":
           this.$container.paddingBottom = e;
           break;
       }
   }
   get bgColor() {
-    return this.getAttribute("bgcolor") || "none";
+    return this.getAttribute("background-color") || "none";
   }
   set bgColor(t) {
-    this.setAttribute("bgcolor", t);
+    this.setAttribute("background-color", t);
   }
   get gradient() {
-    return this.getAttribute("gradient");
+    return this.getAttribute("background-gradient");
   }
   set gradient(t) {
-    this.setAttribute("gradient", t);
+    this.setAttribute("background-gradient", t);
   }
   get bgImgMobile() {
-    return this.getAttribute("bgimg-mobile");
+    return this.getAttribute("background-image-mobile");
   }
   set bgImgMobile(t) {
-    this.setAttribute("bgimg-mobile", t);
+    this.setAttribute("background-image-mobile", t);
   }
   get bgImgTablet() {
-    return this.getAttribute("bgimg-tablet");
+    return this.getAttribute("background-image-tablet");
   }
   set bgImgTablet(t) {
-    this.setAttribute("bgimg-tablet", t);
+    this.setAttribute("background-image-tablet", t);
   }
   get bgImgLaptop() {
-    return this.getAttribute("bgimg-laptop");
+    return this.getAttribute("background-image-laptop");
   }
   set bgImgLaptop(t) {
-    this.setAttribute("bgimg-laptop", t);
+    this.setAttribute("background-image-laptop", t);
   }
   get bgImgSize() {
-    return this.getAttribute("bgimgsize");
+    return this.getAttribute("background-size");
   }
   set bgImgSize(t) {
-    this.setAttribute("bgimgsize", t);
+    this.setAttribute("background-size", t);
   }
   get bgImgPosition() {
-    return this.getAttribute("bgimgposition");
+    return this.getAttribute("background-position");
   }
   set bgImgPosition(t) {
-    this.setAttribute("bgimgposition", t);
+    this.setAttribute("background-position", t);
   }
   get paddingBlock() {
-    return this.getAttribute("paddingblock");
+    return this.getAttribute("padding-block");
   }
   set paddingBlock(t) {
-    this.setAttribute("paddingblock", t);
+    this.setAttribute("padding-block", t);
   }
   get paddingTop() {
-    return this.getAttribute("paddingtop");
+    return this.getAttribute("padding-top");
   }
   set paddingTop(t) {
-    this.setAttribute("paddingtop", t);
+    this.setAttribute("padding-top", t);
   }
   get paddingBottom() {
-    return this.getAttribute("paddingbottom");
+    return this.getAttribute("padding-bottom");
   }
   set paddingBottom(t) {
-    this.setAttribute("paddingbottom", t);
+    this.setAttribute("padding-bottom", t);
   }
 }
-customElements.define("px-section", r);
+customElements.define("px-section", n);
 export {
-  r as Section
+  n as Section
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-section",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -36,5 +36,5 @@
       }
     }
   },
-  "gitHead": "3bf7639ce5c999b5c8e5b0b12b9e2a5913b9c76b"
+  "gitHead": "08fb9ddab89cd17f18333bee8be670cf03f369d5"
 }