@proximus/lavender-layout 1.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,604 @@
+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);
+const g = [
+  // Vertical
+  "between-section-vertical",
+  "between-options-vertical",
+  "under-text-vertical",
+  "display-to-subtitle-vertical",
+  "under-display-vertical",
+  "component-default-vertical",
+  "component-expanded-vertical",
+  "between-section-vertical-mobile",
+  "between-options-vertical-mobile",
+  "under-text-vertical-mobile",
+  "display-to-subtitle-vertical-mobile",
+  "under-display-vertical-mobile",
+  "component-default-vertical-mobile",
+  "component-expanded-vertical-mobile",
+  // Horizontal
+  "between-icon-horizontal",
+  "text-to-icon-compact-horizontal",
+  "text-to-icon-horizontal",
+  "component-compact-horizontal",
+  "component-default-horizontal",
+  "component-expanded-horizontal",
+  "between-icon-horizontal-mobile",
+  "text-to-icon-compact-horizontal-mobile",
+  "text-to-icon-horizontal-mobile",
+  "component-compact-horizontal-mobile",
+  "component-default-horizontal-mobile"
+];
+class o extends s {
+  constructor() {
+    super(r), this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`, this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    this.hasAttribute("direction") || (this.direction = "row");
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction-mobile",
+      "direction-tablet",
+      "direction-laptop",
+      "direction-desktop",
+      "gap",
+      "gap-mobile",
+      "gap-tablet",
+      "gap-laptop",
+      "gap-desktop",
+      "justify-content",
+      "justify-content-mobile",
+      "justify-content-tablet",
+      "justify-content-laptop",
+      "justify-content-desktop",
+      "align-items",
+      "align-items-mobile",
+      "align-items-tablet",
+      "align-items-laptop",
+      "align-items-desktop",
+      "wrap",
+      "wrap-mobile",
+      "wrap-tablet",
+      "wrap-laptop",
+      "wrap-desktop"
+    ];
+  }
+  attributeChangedCallback(t, i, e) {
+    if (t.indexOf("direction") > -1 && !["column", "row"].includes(e))
+      throw new Error("Invalid direction");
+    switch (t) {
+      case "gap":
+        this.$el.style.getPropertyValue("--flex-gap-mobile-value") || this.$el.style.setProperty(
+          "--flex-gap-mobile-value",
+          this.getGapCSSVariable(e)
+        ), this.$el.style.getPropertyValue("--flex-gap-tablet-value") || this.$el.style.setProperty(
+          "--flex-gap-tablet-value",
+          this.getGapCSSVariable(e)
+        ), this.$el.style.getPropertyValue("--flex-gap-laptop-value") || this.$el.style.setProperty(
+          "--flex-gap-laptop-value",
+          this.getGapCSSVariable(e)
+        ), this.$el.style.getPropertyValue("--flex-gap-desktop-value") || this.$el.style.setProperty(
+          "--flex-gap-desktop-value",
+          this.getGapCSSVariable(e)
+        );
+        break;
+      case "gap-mobile":
+      case "gap-tablet":
+      case "gap-laptop":
+      case "gap-desktop":
+        this.$el.style.setProperty(
+          `--flex-${t}-value`,
+          this.getGapCSSVariable(e)
+        );
+        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
+        );
+        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
+        );
+        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
+        );
+        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);
+        break;
+      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);
+        break;
+      default:
+        super.attributeChangedCallback(t, i, e);
+        break;
+    }
+  }
+  getGapCSSVariable(t) {
+    return g.includes(t) ? `var(--px-spacing-${t})` : t;
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get directionMobile() {
+    return this.getAttribute("direction-mobile");
+  }
+  set directionMobile(t) {
+    this.setAttribute("direction-mobile", t);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction-tablet");
+  }
+  set directionTablet(t) {
+    this.setAttribute("direction-tablet", t);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction-laptop");
+  }
+  set directionLaptop(t) {
+    this.setAttribute("direction-laptop", t);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction-desktop");
+  }
+  set directionDesktop(t) {
+    this.setAttribute("direction-desktop", t);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get gapMobile() {
+    return this.getAttribute("gap-mobile");
+  }
+  set gapMobile(t) {
+    this.setAttribute("gap-mobile", t);
+  }
+  get gapTablet() {
+    return this.getAttribute("gap-tablet");
+  }
+  set gapTablet(t) {
+    this.setAttribute("gap-tablet", t);
+  }
+  get gapLaptop() {
+    return this.getAttribute("gap-laptop");
+  }
+  set gapLaptop(t) {
+    this.setAttribute("gap-laptop", t);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content-mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content-mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content-tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content-tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content-laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content-laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content-desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content-desktop", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items-mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items-mobile", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items-tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items-tablet", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items-laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items-laptop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items-desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items-desktop", t);
+  }
+  get wrap() {
+    return this.getAttribute("wrap");
+  }
+  set wrap(t) {
+    this.setAttribute("wrap", t);
+  }
+  get wrapMobile() {
+    return this.getAttribute("wrap-mobile");
+  }
+  set wrapMobile(t) {
+    this.setAttribute("wrap-mobile", t);
+  }
+  get wrapTablet() {
+    return this.getAttribute("wrap-tablet");
+  }
+  set wrapTablet(t) {
+    this.setAttribute("wrap-tablet", t);
+  }
+  get wrapLaptop() {
+    return this.getAttribute("wrap-laptop");
+  }
+  set wrapLaptop(t) {
+    this.setAttribute("wrap-laptop", t);
+  }
+  get wrapDesktop() {
+    return this.getAttribute("wrap-desktop");
+  }
+  set wrapDesktop(t) {
+    this.setAttribute("wrap-desktop", t);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".flex-container");
+  }
+}
+customElements.get("px-stack") || customElements.define("px-stack", o);
+class d extends o {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    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 b extends o {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    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 {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(t, i, e) {
+    t === "grow" && (this.style.flexGrow = e);
+  }
+  connectedCallback() {
+    this.style.flexGrow = this.getAttribute("grow") || "1";
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    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 s {
+  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 s {
+  constructor() {
+    super(l), this.template = (t) => `
+    <px-container borderradius="none" padding="none">
+      <px-vstack>
+        <px-container id="header-container" borderradius="none">
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="header-vstack-container"
+              gap="1rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="header-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="image-container"
+          borderradius="none"
+          padding="none"
+          paddingtop="xl"
+          id="image-box"
+          bgimgsize="cover"
+          bgimgposition="top center"
+          paddingbottom="xl"
+          borderradius="none"
+          bgimg="${this.backgroundImage}"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack grow="${this.grow}" basis="${this.basis}">
+              <slot name="image-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </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-vstack gap="1rem">
+            <slot name="image-sticky-container"></slot>
+          </px-vstack>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
+        <px-container
+          id="body-container"
+          id="main"
+          bgcolor="${this.backgroundColor}"
+          padding="none"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack
+              id="body-vstack-container"
+              gap="3rem"
+              grow="${this.grow}"
+              basis="${this.basis}"
+            >
+              <slot name="body-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="contact-container"
+          borderradius="none"
+          id="main"
+          bgcolor="weak"
+          padding="none"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="contact-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+        <px-container
+          id="footer-container"
+          bgcolor="none"
+          borderradius="none"
+          style="background-color: rgb(108, 66, 156)"
+          paddingtop="xl"
+          paddingbottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
+              <slot name="footer-container"></slot>
+            </px-vstack>
+            <px-spacer></px-spacer>
+          </px-hstack>
+        </px-container>
+      </px-vstack>
+    </px-container>
+  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "background-image",
+      "gap",
+      "background-color",
+      "padding-vertical",
+      "padding-horizontal"
+    ];
+  }
+  get $wideImage() {
+    return this.shadowRoot.querySelector("#image-box");
+  }
+  get $bodyVStackContainer() {
+    return this.shadowRoot.querySelector("#header-vstack-container");
+  }
+  get $bodyContainer() {
+    return this.shadowRoot.querySelector("#body-container");
+  }
+  get $contactContainer() {
+    return this.shadowRoot.querySelector("#contact-container");
+  }
+  get $footerContainer() {
+    return this.shadowRoot.querySelector("#footer-container");
+  }
+  get $headerContainer() {
+    return this.shadowRoot.querySelector("#header-container");
+  }
+  get $imageContainer() {
+    return this.shadowRoot.querySelector("#image-container");
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  get $imageStickySlot() {
+    return this.querySelector('*[slot="image-sticky-container"]');
+  }
+  get $main() {
+    return this.shadowRoot.querySelector("#main");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  get paddingVertical() {
+    return this.getAttribute("padding-vertical");
+  }
+  get paddingHorizontal() {
+    return this.getAttribute("padding-horizontal");
+  }
+  set paddingVertical(t) {
+    this.setAttribute("padding-vertical", t);
+  }
+  set paddingHorizontal(t) {
+    this.setAttribute("padding-horizontal", t);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  connectedCallback() {
+    this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e)
+      switch (t) {
+        case "background-image":
+          this.$imageContainer.setAttribute("bgimg-mobile", e);
+          break;
+        case "gap":
+          this.$bodyVStackContainer.setAttribute("gap", e);
+          break;
+        case "background-color":
+          this.$bodyContainer.setAttribute(
+            "bgcolor",
+            p.indexOf(e) > 0 ? e : "none"
+          );
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(e);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(e);
+          break;
+        default:
+          super.attributeChangedCallback(t, i, e);
+      }
+  }
+  handlePaddingVerticalChange(t) {
+    this.$headerContainer.setAttribute("paddingtop", t), this.$footerContainer.setAttribute("paddingbottom", 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;
+  }
+}
+customElements.get("px-page") === void 0 && customElements.define("px-page", f);
+export {
+  b as HStack,
+  f as Page,
+  m as Section,
+  u as Spacer,
+  o as Stack,
+  d as VStack,
+  g as gapValues
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-layout",
+  "version": "1.1.0-alpha.0",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist/*"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}