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

package/dist/index.js

@@ -1,7 +1,7 @@
-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 = [
+import { WithFlexAttributes as r, bgColorValues as l } from "@proximus/lavender-common";
+const p = ".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(p);
+const c = [
   // Vertical
   "between-section-vertical",
   "between-options-vertical",
@@ -30,7 +30,7 @@ const g = [
   "component-compact-horizontal-mobile",
   "component-default-horizontal-mobile"
 ];
-class r extends o {
+class o extends r {
   constructor() {
     super(s), this.template = `<div class="flex-container">
       <slot></slot>
@@ -168,7 +168,7 @@ class r extends o {
     }
   }
   getGapCSSVariable(t) {
-    return g.includes(t) ? `var(--px-spacing-${t})` : t;
+    return c.includes(t) ? `var(--px-spacing-${t})` : t;
   }
   get direction() {
     return this.getAttribute("direction");
@@ -318,8 +318,8 @@ class r extends o {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
-customElements.get("px-stack") || customElements.define("px-stack", r);
-class d extends r {
+customElements.get("px-stack") || customElements.define("px-stack", o);
+class d extends o {
   constructor() {
     super();
   }
@@ -328,7 +328,7 @@ class d extends r {
   }
 }
 customElements.get("px-vstack") || customElements.define("px-vstack", d);
-class b extends r {
+class g extends o {
   constructor() {
     super();
   }
@@ -336,8 +336,8 @@ class b extends r {
     super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
   }
 }
-customElements.get("px-hstack") || customElements.define("px-hstack", b);
-class u extends HTMLElement {
+customElements.get("px-hstack") || customElements.define("px-hstack", g);
+class b extends HTMLElement {
   constructor() {
     super();
   }
@@ -357,45 +357,12 @@ class u extends HTMLElement {
     this.setAttribute("grow", t);
   }
 }
-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 o {
+customElements.define("px-spacer", b);
+const u = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", n = new CSSStyleSheet();
+n.replaceSync(u);
+class h extends r {
   constructor() {
-    super(n), this.template = `
-  <section>
-    <slot name="heading"></slot>
-    <px-stack direction="column" gap="1rem">
-      <slot></slot>
-    </px-stack>
-  </section>`, this.shadowRoot.innerHTML = this.template;
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "gap"];
-  }
-  attributeChangedCallback(t, i, e) {
-    if (t === "gap" && i !== e) {
-      this.$el.gap = e;
-      return;
-    }
-    super.attributeChangedCallback(t, i, e);
-  }
-  get gap() {
-    return this.getAttribute("gap");
-  }
-  set gap(t) {
-    this.setAttribute("gap", t);
-  }
-  get $el() {
-    return this.shadowRoot.querySelector('px-stack[direction="column"]');
-  }
-}
-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 o {
-  constructor() {
-    super(l), this.template = (t) => `
+    super(n), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -466,7 +433,7 @@ class f extends o {
           id="contact-container"
           border-radius="none"
           id="main"
-          background-color="weak"
+          background-color="container-weak"
           padding="none"
           padding-top="xl"
           padding-bottom="xl"
@@ -481,7 +448,7 @@ class f extends o {
         </px-container>
         <px-container
           id="footer-container"
-          background-color="none"
+          background-color="container-none"
           border-radius="none"
           style="background-color: rgb(108, 66, 156)"
           padding-top="xl"
@@ -564,10 +531,7 @@ class f extends o {
     if (i !== e)
       switch (t) {
         case "background-image":
-          this.$imageContainer.setAttribute(
-            "background-image-mobile",
-            e
-          );
+          this.$imageContainer.setAttribute("background-image", e);
           break;
         case "gap":
           this.$bodyVStackContainer.setAttribute("gap", e);
@@ -575,7 +539,7 @@ class f extends o {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            p.indexOf(e) > 0 ? e : "none"
+            l.indexOf(e) > 0 ? e : "none"
           );
           break;
         case "padding-vertical":
@@ -595,13 +559,12 @@ class f extends o {
     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;
   }
 }
-customElements.get("px-page") === void 0 && customElements.define("px-page", f);
+customElements.get("px-page") === void 0 && customElements.define("px-page", h);
 export {
-  b as HStack,
-  f as Page,
-  m as Section,
-  u as Spacer,
-  r as Stack,
+  g as HStack,
+  h as Page,
+  b as Spacer,
+  o as Stack,
   d as VStack,
-  g as gapValues
+  c as gapValues
 };

package/package.json

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