@proximus/lavender-layout 1.1.0-alpha.1 → 1.1.0-alpha.2

package/dist/index.js

@@ -1,6 +1,6 @@
-import { WithFlexAttributes as s, bgColorValues as p } from "@proximus/lavender-common";
-const c = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}", r = new CSSStyleSheet();
-r.replaceSync(c);
+import { WithFlexAttributes as o, bgColorValues as p } from "@proximus/lavender-common";
+const c = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}", s = new CSSStyleSheet();
+s.replaceSync(c);
 const g = [
   // Vertical
   "between-section-vertical",
@@ -30,9 +30,9 @@ const g = [
   "component-compact-horizontal-mobile",
   "component-default-horizontal-mobile"
 ];
-class o extends s {
+class r extends o {
   constructor() {
-    super(r), this.template = `<div class="flex-container">
+    super(s), this.template = `<div class="flex-container">
       <slot></slot>
   </div>`, this.shadowRoot.innerHTML = this.template;
   }
@@ -318,8 +318,8 @@ class o extends s {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
-customElements.get("px-stack") || customElements.define("px-stack", o);
-class d extends o {
+customElements.get("px-stack") || customElements.define("px-stack", r);
+class d extends r {
   constructor() {
     super();
   }
@@ -328,7 +328,7 @@ class d extends o {
   }
 }
 customElements.get("px-vstack") || customElements.define("px-vstack", d);
-class b extends o {
+class b extends r {
   constructor() {
     super();
   }
@@ -360,7 +360,7 @@ class u extends HTMLElement {
 customElements.define("px-spacer", u);
 const h = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}", n = new CSSStyleSheet();
 n.replaceSync(h);
-class m extends s {
+class m extends o {
   constructor() {
     super(n), this.template = `
   <section>
@@ -393,12 +393,12 @@ class m extends s {
 customElements.define("px-section-damien", m);
 const x = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", l = new CSSStyleSheet();
 l.replaceSync(x);
-class f extends s {
+class f extends o {
   constructor() {
     super(l), this.template = (t) => `
-    <px-container borderradius="none" padding="none">
+    <px-container border-radius="none" padding="none">
       <px-vstack>
-        <px-container id="header-container" borderradius="none">
+        <px-container id="header-container" border-radius="none">
           <px-hstack>
             <px-spacer></px-spacer>
             <px-vstack
@@ -414,14 +414,14 @@ class f extends s {
         </px-container>
         <px-container
           id="image-container"
-          borderradius="none"
+          border-radius="none"
           padding="none"
-          paddingtop="xl"
+          padding-top="xl"
           id="image-box"
-          bgimgsize="cover"
-          bgimgposition="top center"
-          paddingbottom="xl"
-          borderradius="none"
+          background-size="cover"
+          background-position="top center"
+          padding-bottom="xl"
+          border-radius="none"
           bgimg="${this.backgroundImage}"
         >
           <px-hstack>
@@ -434,7 +434,7 @@ class f extends s {
         </px-container>
         ${t ? ` <px-hstack>
         <px-spacer></px-spacer>
-        <px-container borderradius="none" shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" borderradius="m">
+        <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
           <px-vstack gap="1rem">
             <slot name="image-sticky-container"></slot>
           </px-vstack>
@@ -444,10 +444,10 @@ class f extends s {
         <px-container
           id="body-container"
           id="main"
-          bgcolor="${this.backgroundColor}"
+          background-color="${this.backgroundColor}"
           padding="none"
-          paddingtop="xl"
-          paddingbottom="xl"
+          padding-top="xl"
+          padding-bottom="xl"
         >
           <px-hstack>
             <px-spacer></px-spacer>
@@ -464,12 +464,12 @@ class f extends s {
         </px-container>
         <px-container
           id="contact-container"
-          borderradius="none"
+          border-radius="none"
           id="main"
-          bgcolor="weak"
+          background-color="weak"
           padding="none"
-          paddingtop="xl"
-          paddingbottom="xl"
+          padding-top="xl"
+          padding-bottom="xl"
         >
           <px-hstack>
             <px-spacer></px-spacer>
@@ -481,11 +481,11 @@ class f extends s {
         </px-container>
         <px-container
           id="footer-container"
-          bgcolor="none"
-          borderradius="none"
+          background-color="none"
+          border-radius="none"
           style="background-color: rgb(108, 66, 156)"
-          paddingtop="xl"
-          paddingbottom="xl"
+          padding-top="xl"
+          padding-bottom="xl"
         >
           <px-hstack>
             <px-spacer></px-spacer>
@@ -564,14 +564,17 @@ class f extends s {
     if (i !== e)
       switch (t) {
         case "background-image":
-          this.$imageContainer.setAttribute("bgimg-mobile", e);
+          this.$imageContainer.setAttribute(
+            "background-image-mobile",
+            e
+          );
           break;
         case "gap":
           this.$bodyVStackContainer.setAttribute("gap", e);
           break;
         case "background-color":
           this.$bodyContainer.setAttribute(
-            "bgcolor",
+            "background-color",
             p.indexOf(e) > 0 ? e : "none"
           );
           break;
@@ -586,7 +589,7 @@ class f extends s {
       }
   }
   handlePaddingVerticalChange(t) {
-    this.$headerContainer.setAttribute("paddingtop", t), this.$footerContainer.setAttribute("paddingbottom", t);
+    this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
   }
   handlePaddingHorizontalChange(t) {
     this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
@@ -598,7 +601,7 @@ export {
   f as Page,
   m as Section,
   u as Spacer,
-  o as Stack,
+  r as Stack,
   d as VStack,
   g as gapValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-layout",
-  "version": "1.1.0-alpha.1",
+  "version": "1.1.0-alpha.2",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3bf7639ce5c999b5c8e5b0b12b9e2a5913b9c76b",
+  "gitHead": "08fb9ddab89cd17f18333bee8be670cf03f369d5",
   "lerna": {
     "command": {
       "publish": {