@proximus/lavender-layout 1.1.0-alpha.7 → 1.1.0-alpha.8

package/dist/index.js

@@ -1,7 +1,7 @@
-import { WithFlexAttributes as r, backgroundColorValues 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)}}", o = new CSSStyleSheet();
-o.replaceSync(p);
-const c = [
+import { WithFlexAttributes as l, backgroundColorValues as b } from "@proximus/lavender-common";
+const u = ".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)}}", d = new CSSStyleSheet();
+d.replaceSync(u);
+const h = [
   "after-element-none",
   "after-element-2xs",
   "after-element-xs",
@@ -16,15 +16,39 @@ const c = [
   "inside-section-default",
   "inside-section-l",
   "between-sections"
-];
-class s extends r {
+], x = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], m = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+], f = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], k = ["", "default", "nowrap", "wrap", "wrap-reverse"];
+class p extends l {
   constructor() {
-    super(o), this.template = `<div class="flex-container">
+    super(d), this.template = `<div class="flex-container">
       <slot></slot>
   </div>`, this.shadowRoot.innerHTML = this.template;
   }
   connectedCallback() {
-    this.hasAttribute("direction") || (this.direction = "row");
+    this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "inside-section-none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap");
   }
   static get observedAttributes() {
     return [
@@ -35,6 +59,10 @@ class s extends r {
       "direction--laptop",
       "direction--desktop",
       "gap",
+      "gap--mobile",
+      "gap--tablet",
+      "gap--laptop",
+      "gap--desktop",
       "justify-content",
       "justify-content--mobile",
       "justify-content--tablet",
@@ -46,10 +74,10 @@ class s extends r {
       "align-items--laptop",
       "align-items--desktop",
       "wrap",
-      "wrap-mobile",
-      "wrap-tablet",
-      "wrap-laptop",
-      "wrap-desktop"
+      "wrap--mobile",
+      "wrap--tablet",
+      "wrap--laptop",
+      "wrap--desktop"
     ];
   }
   attributeChangedCallback(t, i, e) {
@@ -57,101 +85,73 @@ class s extends r {
       throw new Error("Invalid direction");
     switch (t) {
       case "gap":
-        this.$el.style.setProperty(
-          "--flex-gap-mobile-value",
-          this.getGapCSSVariable(e, "mobile")
-        ), this.$el.style.setProperty(
-          "--flex-gap-tablet-value",
-          this.getGapCSSVariable(e, "tablet")
-        ), this.$el.style.setProperty(
-          "--flex-gap-laptop-value",
-          this.getGapCSSVariable(e, "desktop")
-        ), this.$el.style.setProperty(
-          "--flex-gap-desktop-value",
-          this.getGapCSSVariable(e, "desktop")
-        );
-        break;
-      case "direction":
-        this.$el.style.getPropertyValue("--flex-direction--mobile-value") || this.$el.style.setProperty(
-          "--flex-direction--mobile-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-direction--tablet-value") || this.$el.style.setProperty(
-          "--flex-direction--tablet-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-direction--laptop-value") || this.$el.style.setProperty(
-          "--flex-direction--laptop-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-direction--desktop-value") || this.$el.style.setProperty(
-          "--flex-direction--desktop-value",
-          e
-        );
+      case "gap--mobile":
+      case "gap--tablet":
+      case "gap--laptop":
+      case "gap--desktop":
+        this.updateFlexProperties(t, i, e, h);
         break;
       case "justify-content":
-        this.$el.style.getPropertyValue(
-          "--flex-justify-content--mobile-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content--mobile-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content--tablet-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content--tablet-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content--laptop-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content--laptop-value",
-          e
-        ), this.$el.style.getPropertyValue(
-          "--flex-justify-content--desktop-value"
-        ) || this.$el.style.setProperty(
-          "--flex-justify-content--desktop-value",
-          e
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+        this.updateFlexProperties(
+          t,
+          i,
+          e,
+          f
         );
         break;
       case "align-items":
-        this.$el.style.getPropertyValue("--flex-align-items--mobile-value") || this.$el.style.setProperty(
-          "--flex-align-items--mobile-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items--tablet-value") || this.$el.style.setProperty(
-          "--flex-align-items--tablet-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items--laptop-value") || this.$el.style.setProperty(
-          "--flex-align-items--laptop-value",
-          e
-        ), this.$el.style.getPropertyValue("--flex-align-items--desktop-value") || this.$el.style.setProperty(
-          "--flex-align-items--desktop-value",
-          e
-        );
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+        this.updateFlexProperties(t, i, e, m);
         break;
       case "wrap":
-        this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, i, e, k);
         break;
+      case "direction":
       case "direction--mobile":
       case "direction--tablet":
       case "direction--laptop":
       case "direction--desktop":
-      case "justify-content--mobile":
-      case "justify-content--tablet":
-      case "justify-content--laptop":
-      case "justify-content--desktop":
-      case "align-items--mobile":
-      case "align-items--tablet":
-      case "align-items--laptop":
-      case "align-items--desktop":
-      case "wrap-mobile":
-      case "wrap-tablet":
-      case "wrap-laptop":
-      case "wrap-desktop":
-        this.$el.style.setProperty(`--flex-${t}-value`, e);
+        this.updateFlexProperties(t, i, e, x);
         break;
       default:
         super.attributeChangedCallback(t, i, e);
         break;
     }
   }
-  getGapCSSVariable(t, i = "mobile") {
-    return c.includes(t) ? `var(--px-spacing-${t}-${i})` : t;
+  updateFlexProperties(t, i, e, s) {
+    this.checkName(s, e) || console.error(`Bad ${t} value for`, this.$el);
+    const c = t.indexOf("--") > -1, a = c ? t.split("--")[0] : t, r = [];
+    if (!c)
+      this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((o) => {
+        this.updateStyle(a, o, i, s), this.updateStyle(a, o, e, s);
+      });
+    else {
+      const o = t.split("--")[1];
+      this.updateStyle(a, o, i, s), this.updateStyle(a, o, e, s);
+    }
+  }
+  updateStyle(t, i, e, s) {
+    e !== null && e !== "" && e !== "default" && (t === "gap" && s.includes(e) ? this.$el.style.setProperty(
+      `--flex-${t}--${i}-value`,
+      `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
+    ) : this.$el.style.setProperty(
+      `--flex-${t}--${i}-value`,
+      e
+    ));
+  }
+  checkName(t, i) {
+    return t.includes(i);
   }
   get direction() {
     return this.getAttribute("direction");
@@ -274,35 +274,35 @@ class s extends r {
     this.setAttribute("wrap", t);
   }
   get wrapMobile() {
-    return this.getAttribute("wrap-mobile");
+    return this.getAttribute("wrap--mobile");
   }
   set wrapMobile(t) {
-    this.setAttribute("wrap-mobile", t);
+    this.setAttribute("wrap--mobile", t);
   }
   get wrapTablet() {
-    return this.getAttribute("wrap-tablet");
+    return this.getAttribute("wrap--tablet");
   }
   set wrapTablet(t) {
-    this.setAttribute("wrap-tablet", t);
+    this.setAttribute("wrap--tablet", t);
   }
   get wrapLaptop() {
-    return this.getAttribute("wrap-laptop");
+    return this.getAttribute("wrap--laptop");
   }
   set wrapLaptop(t) {
-    this.setAttribute("wrap-laptop", t);
+    this.setAttribute("wrap--laptop", t);
   }
   get wrapDesktop() {
-    return this.getAttribute("wrap-desktop");
+    return this.getAttribute("wrap--desktop");
   }
   set wrapDesktop(t) {
-    this.setAttribute("wrap-desktop", t);
+    this.setAttribute("wrap--desktop", t);
   }
   get $el() {
     return this.shadowRoot.querySelector(".flex-container");
   }
 }
-customElements.get("px-stack") || customElements.define("px-stack", s);
-class d extends s {
+customElements.get("px-stack") || customElements.define("px-stack", p);
+class y extends p {
   constructor() {
     super();
   }
@@ -310,8 +310,8 @@ class d extends s {
     super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
   }
 }
-customElements.get("px-vstack") || customElements.define("px-vstack", d);
-class g extends s {
+customElements.get("px-vstack") || customElements.define("px-vstack", y);
+class A extends p {
   constructor() {
     super();
   }
@@ -319,8 +319,8 @@ class g extends s {
     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", g);
-class u extends HTMLElement {
+customElements.get("px-hstack") || customElements.define("px-hstack", A);
+class v extends HTMLElement {
   constructor() {
     super();
   }
@@ -340,12 +340,12 @@ class u extends HTMLElement {
     this.setAttribute("grow", t);
   }
 }
-customElements.define("px-spacer", u);
-const b = ":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(b);
-class h extends r {
+customElements.define("px-spacer", v);
+const w = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", g = new CSSStyleSheet();
+g.replaceSync(w);
+class C extends l {
   constructor() {
-    super(n), this.template = (t) => `
+    super(g), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -522,7 +522,7 @@ class h extends r {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            l.indexOf(e) > 0 ? e : "none"
+            b.indexOf(e) > 0 ? e : "none"
           );
           break;
         case "padding-vertical":
@@ -542,12 +542,16 @@ class h extends r {
     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", h);
+customElements.get("px-page") === void 0 && customElements.define("px-page", C);
 export {
-  g as HStack,
-  h as Page,
-  u as Spacer,
-  s as Stack,
-  d as VStack,
-  c as gapValues
+  A as HStack,
+  C as Page,
+  v as Spacer,
+  p as Stack,
+  y as VStack,
+  m as alignItemsValues,
+  x as directionValues,
+  h as gapValues,
+  f as justifyContentValues,
+  k as wrapValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-layout",
-  "version": "1.1.0-alpha.7",
+  "version": "1.1.0-alpha.8",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84",
+  "gitHead": "74b23a0ad9d5ab4f454d38eaa0c043d2f0c2128e",
   "lerna": {
     "command": {
       "publish": {