@proximus/lavender-container 1.0.0-alpha.32

package/dist/index.js

@@ -0,0 +1,240 @@
+import { PxElement as n, shadowValues as g, bgColorValues as l, borderRadiusValues as s, borderValues as p, paddingValues as b, gradientValues as c } from "@proximus/lavender-common";
+const h = '.container{font-family:var(--px-font-family);background-color:var(--px-color-bg-container-rich-inverted);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.paddingblock-2xs{padding-block:var(--px-padding-2xs)}.paddingblock-xs{padding-block:var(--px-padding-xs)}.paddingblock-s{padding-block:var(--px-padding-s)}.paddingblock-m{padding-block:var(--px-padding-m)}.paddingblock-l{padding-block:var(--px-padding-l)}.paddingblock-xl{padding-block:var(--px-padding-xl)}.paddingblock-none{padding-block:var(--px-padding-none)}.paddinginline-2xs{padding-inline:var(--px-padding-2xs)}.paddinginline-xs{padding-inline:var(--px-padding-xs)}.paddinginline-s{padding-inline:var(--px-padding-s)}.paddinginline-m{padding-inline:var(--px-padding-m)}.paddinginline-l{padding-inline:var(--px-padding-l)}.paddinginline-xl{padding-inline:var(--px-padding-xl)}.paddinginline-none{padding-inline:var(--px-padding-none)}.paddingtop-2xs{padding-top:var(--px-padding-2xs)}.paddingtop-xs{padding-top:var(--px-padding-xs)}.paddingtop-s{padding-top:var(--px-padding-s)}.paddingtop-m{padding-top:var(--px-padding-m)}.paddingtop-l{padding-top:var(--px-padding-l)}.paddingtop-xl{padding-top:var(--px-padding-xl)}.paddingtop-none{padding-top:var(--px-padding-none)}.paddingright-2xs{padding-right:var(--px-padding-2xs)}.paddingright-xs{padding-right:var(--px-padding-xs)}.paddingright-s{padding-right:var(--px-padding-s)}.paddingright-m{padding-right:var(--px-padding-m)}.paddingright-l{padding-right:var(--px-padding-l)}.paddingright-xl{padding-right:var(--px-padding-xl)}.paddingright-none{padding-right:var(--px-padding-none)}.paddingbottom-2xs{padding-bottom:var(--px-padding-2xs)}.paddingbottom-xs{padding-bottom:var(--px-padding-xs)}.paddingbottom-s{padding-bottom:var(--px-padding-s)}.paddingbottom-m{padding-bottom:var(--px-padding-m)}.paddingbottom-l{padding-bottom:var(--px-padding-l)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl)}.paddingbottom-none{padding-bottom:var(--px-padding-none)}.paddingleft-2xs{padding-left:var(--px-padding-2xs)}.paddingleft-xs{padding-left:var(--px-padding-xs)}.paddingleft-s{padding-left:var(--px-padding-s)}.paddingleft-m{padding-left:var(--px-padding-m)}.paddingleft-l{padding-left:var(--px-padding-l)}.paddingleft-xl{padding-left:var(--px-padding-xl)}.paddingleft-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.borderradius-main{border-radius:var(--px-radius-main)}.borderradius-pill{border-radius:var(--px-radius-pill)}.noborderradius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.noborderradius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.noborderradius-all,.borderradius-none{border-radius:var(--px-radius-none)}.bgcolor-none{background-color:var(--px-color-bg-container-none-default)}.bgcolor-weak{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-default)}.bgcolor-strong{background-color:var(--px-color-bg-container-strong-default)}.bgcolor-rich{background-color:var(--px-color-bg-container-rich-default)}.bgcolor-main{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-canvas-weak{background-color:var(--px-color-canvas-weak)}.bgcolor-canvas-light{background-color:var(--px-color-canvas-light)}.bgcolor-canvas-soft{background-color:var(--px-color-canvas-soft)}.bgcolor-canvas-moderate{background-color:var(--px-color-canvas-moderate)}.bgcolor-canvas-strong{background-color:var(--px-color-canvas-strong)}.bgcolor-canvas-deep{background-color:var(--px-color-canvas-deep)}.bgcolor-canvas-rich{background-color:var(--px-color-canvas-rich)}.bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-default)}.bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-default)}.bgcolor-action-hover-bordered{background-color:var(--px-color-bg-action-hover-bordered-default)}.bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-default)}.bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-default)}.bgcolor-action-active{background-color:var(--px-color-bg-action-active-default)}.bgcolor-notification{background-color:var(--px-color-bg-notification-default)}.bgcolor-promo{background-color:var(--px-color-bg-promo-default)}.bgcolor-success{background-color:var(--px-color-bg-success-default)}.bgcolor-error{background-color:var(--px-color-bg-error-default)}.bgcolor-warning{background-color:var(--px-color-bg-warning-default)}.bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-default)}:host([inverted]) .bgcolor-none{background-color:var(--px-color-bg-container-none-inverted)}:host([inverted]) .bgcolor-weak{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) .bgcolor-strong{background-color:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .bgcolor-rich{background-color:var(--px-color-bg-container-rich-inverted)}:host([inverted]) .bgcolor-main{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-bordered-default)}:host([inverted]) .bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .bgcolor-action-active{background-color:var(--px-color-bg-action-active-inverted)}:host([inverted]) .bgcolor-notification{background-color:var(--px-color-bg-notification-inverted)}:host([inverted]) .bgcolor-promo{background-color:var(--px-color-bg-promo-inverted)}:host([inverted]) .bgcolor-success{background-color:var(--px-color-bg-success-inverted)}:host([inverted]) .bgcolor-error{background-color:var(--px-color-bg-error-inverted)}:host([inverted]) .bgcolor-warning{background-color:var(--px-color-bg-warning-inverted)}:host([inverted]) .bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-inverted)}.bgimg{background-repeat:no-repeat}.bgimgsize-cover{background-size:cover;background-position:center center}.bgimgsize-contain{background-size:contain}.shadow-none{box-shadow:var(--px-shadow-none)}.shadow-s{box-shadow:var(--px-shadow-s)}.shadow-m{box-shadow:var(--px-shadow-m)}.shadow-l{box-shadow:var(--px-shadow-l)}.shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.paddingtop-l{padding-top:var(--px-padding-l-mobile)}.paddingtop-xl{padding-top:var(--px-padding-xl-mobile)}.paddingright-l{padding-right:var(--px-padding-l-mobile)}.paddingright-xl{padding-right:var(--px-padding-xl-mobile)}.paddingbottom-l{padding-bottom:var(--px-padding-l-mobile)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.paddingleft-l{padding-left:var(--px-padding-l-mobile)}.paddingleft-xl{padding-left:var(--px-padding-xl-mobile)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}', e = new CSSStyleSheet();
+e.replaceSync(h);
+const x = ["anchor-right", "anchor-left", "anchor-full"], v = ["", "all", "top", "right", "bottom", "left"], u = ["", "cover", "contain", "default"], a = class a extends n {
+  constructor() {
+    super(e), this.template = () => `<div class="container">
+    <slot name="anchor-left"></slot>
+    <slot name="anchor-right"></slot>
+    <slot name="anchor-full"></slot>
+    <slot></slot>
+    </div>`, this.onWindowResize = () => {
+      this.hasAttribute("bgimg-mobile") && this.loadImg("bgimg-mobile", this.getAttribute("bgimg-mobile")), this.hasAttribute("bgimg-tablet") && this.loadImg("bgimg-tablet", this.getAttribute("bgimg-tablet")), this.hasAttribute("bgimg-laptop") && this.loadImg("bgimg-laptop", this.getAttribute("bgimg-laptop"));
+    }, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "padding",
+      "paddinginline",
+      "paddingblock",
+      "paddingtop",
+      "paddingright",
+      "paddingbottom",
+      "paddingleft",
+      "border",
+      "borderradius",
+      "noborderradius",
+      "bgcolor",
+      "gradient",
+      "bgimg-mobile",
+      "bgimg-tablet",
+      "bgimg-laptop",
+      "bgimgsize",
+      "bgimgposition",
+      "shadow",
+      "inverted"
+    ];
+  }
+  get padding() {
+    return this.getAttribute("padding");
+  }
+  set padding(t) {
+    this.setAttribute("padding", t);
+  }
+  get paddingBlock() {
+    return this.getAttribute("paddingblock");
+  }
+  set paddingBlock(t) {
+    this.setAttribute("paddingblock", t);
+  }
+  get paddingInline() {
+    return this.getAttribute("paddinginline");
+  }
+  set paddingInline(t) {
+    this.setAttribute("paddinginline", t);
+  }
+  get paddingTop() {
+    return this.getAttribute("paddingtop");
+  }
+  set paddingTop(t) {
+    this.setAttribute("paddingtop", t);
+  }
+  get paddingRight() {
+    return this.getAttribute("paddingright");
+  }
+  set paddingRight(t) {
+    this.setAttribute("paddingright", t);
+  }
+  get paddingBottom() {
+    return this.getAttribute("paddingbottom");
+  }
+  set paddingBottom(t) {
+    this.setAttribute("paddingbottom", t);
+  }
+  get paddingLeft() {
+    return this.getAttribute("paddingleft");
+  }
+  set paddingLeft(t) {
+    this.setAttribute("paddingleft", t);
+  }
+  get border() {
+    return this.getAttribute("border");
+  }
+  set border(t) {
+    this.setAttribute("border", t);
+  }
+  get borderRadius() {
+    return this.getAttribute("borderradius");
+  }
+  set borderRadius(t) {
+    this.setAttribute("borderradius", t);
+  }
+  get noBorderRadius() {
+    return this.getAttribute("noborderradius");
+  }
+  set noBorderRadius(t) {
+    this.setAttribute("noborderradius", t);
+  }
+  get bgColor() {
+    return this.getAttribute("bgcolor");
+  }
+  set bgColor(t) {
+    this.setAttribute("bgcolor", t);
+  }
+  get gradient() {
+    return this.getAttribute("gradient");
+  }
+  set gradient(t) {
+    this.setAttribute("gradient", t);
+  }
+  get bgImgMobile() {
+    return this.getAttribute("bgimg-mobile");
+  }
+  set bgImgMobile(t) {
+    this.setAttribute("bgimg-mobile", t);
+  }
+  get bgImgTablet() {
+    return this.getAttribute("bgimg-tablet");
+  }
+  set bgImgTablet(t) {
+    this.setAttribute("bgimg-tablet", t);
+  }
+  get bgImgLaptop() {
+    return this.getAttribute("bgimg-laptop");
+  }
+  set bgImgLaptop(t) {
+    this.setAttribute("bgimg-laptop", t);
+  }
+  get bgImgSize() {
+    return this.getAttribute("bgimgsize");
+  }
+  set bgImgSize(t) {
+    this.setAttribute("bgimgsize", t);
+  }
+  get bgImgPosition() {
+    return this.getAttribute("bgimgposition");
+  }
+  set bgImgPosition(t) {
+    this.setAttribute("bgimgposition", t);
+  }
+  get shadow() {
+    return this.getAttribute("shadow");
+  }
+  set shadow(t) {
+    this.setAttribute("shadow", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  connectedCallback() {
+    var o, r, d;
+    super.connectedCallback();
+    const t = this.querySelector("[slot]");
+    t && x.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), ((o = this.parentElement) == null ? void 0 : o.getAttribute("align-items")) === "stretch" && (((r = this.parentElement) == null ? void 0 : r.getAttribute("direction")) === "column" ? this.$el.style.width = "100%" : this.$el.style.height = "100%"), ((d = this.parentElement) == null ? void 0 : d.localName) === "px-grid-item" && (this.$el.style.height = "100%"), (this.hasAttribute("bgimg-mobile") || this.hasAttribute("bgimg-tablet") || this.hasAttribute("bgimg-laptop")) && window.addEventListener("resize", this.onWindowResize);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.onWindowResize);
+  }
+  attributeChangedCallback(t, o, r) {
+    if (o !== r)
+      switch (t) {
+        case "padding":
+        case "paddingblock":
+        case "paddinginline":
+        case "paddingtop":
+        case "paddingright":
+        case "paddingbottom":
+        case "paddingleft":
+          this.updateAttribute(t, o, r, b);
+          break;
+        case "border":
+          this.updateAttribute(t, o, r, p);
+          break;
+        case "borderradius":
+          this.updateAttribute(
+            t,
+            o,
+            r,
+            s
+          );
+          break;
+        case "noborderradius":
+          this.updateAttribute(
+            t,
+            o,
+            r,
+            v
+          );
+          break;
+        case "bgcolor":
+          this.updateAttribute(t, o, r, l);
+          break;
+        case "gradient":
+          this.updateGradient(o, r);
+          break;
+        case "bgimgsize":
+          this.updateAttribute(t, o, r, u);
+          break;
+        case "bgimg-mobile":
+        case "bgimg-tablet":
+        case "bgimg-laptop":
+          r !== "" && (this.$el.classList.toggle("bgimg"), this.loadImg(t, r));
+          break;
+        case "bgimgposition":
+          r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
+          break;
+        case "shadow":
+          this.updateAttribute(t, o, r, g);
+          break;
+        default:
+          super.attributeChangedCallback(t, o, r);
+          break;
+      }
+  }
+  loadImg(t, o) {
+    t === "bgimg-mobile" ? this.$el.style.backgroundImage = `url("${o}")` : window.matchMedia("only screen and (min-width: 768px)").matches && t === "bgimg-tablet" ? this.$el.style.backgroundImage = `url("${o}")` : window.matchMedia("only screen and (min-width: 1025px)").matches && t === "bgimg-laptop" && (this.$el.style.backgroundImage = `url("${o}")`);
+  }
+  updateGradient(t, o) {
+    this.checkName(c, o) ? this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${o}))` : console.error(
+      `${o} is not an allowed gradient value for ${this.$el}`
+    );
+  }
+  updateAttribute(t, o, r, d) {
+    o !== null && o !== "" && this.$el.classList.toggle(`${t}-${o}`), r !== null && r !== "" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(d, r) || console.error(
+      `${r} is not an allowed ${t} value for ${this.$el}`
+    );
+  }
+  checkName(t, o) {
+    return t.includes(o);
+  }
+};
+a.nativeName = "div";
+let i = a;
+customElements.define("px-container", i);
+export {
+  i as Container
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-container",
+  "version": "1.0.0-alpha.32",
+  "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"
+        ]
+      }
+    }
+  }
+}