@proximus/lavender-tile 1.0.0-alpha.12

package/dist/index.js

@@ -0,0 +1,701 @@
+import { WithFlexAttributes as u, backgroundColorValues as x } from "@proximus/lavender-common";
+const m = '.tile__container{display:flex;flex-direction:column;font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-m-mobile);font-weight:700;color:var(--px-text-color-action-neutral-default)}.tile__container,.tile__container *{box-sizing:border-box}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-mobile)}.tile__container ::slotted([slot="prefix"]){font-weight:400}.tile__container ::slotted([slot="description"]){font-weight:400}@media only screen and (min-width: 768px){.tile__container{font-size:var(--px-text-size-label-m-tablet)}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-tablet)}}@media only screen and (min-width: 1025px){.tile__container{font-size:var(--px-text-size-label-m-desktop)}.tile__container .tile__header:not(.tile__header--empty)+.tile__content:not(.tile__content--empty){margin-top:var(--px-spacing-inside-section-default-desktop)}}:host([inverted]) .tile__container{color:var(--px-text-color-action-neutral-inverted)}', k = ".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)}}", g = new CSSStyleSheet();
+g.replaceSync(k);
+const v = [
+  "after-element-none",
+  "after-element-2xs",
+  "after-element-xs",
+  "after-element-s",
+  "after-element-default",
+  "after-element-l",
+  "heading-to-subtitle",
+  "heading-to-content",
+  "inside-section-none",
+  "inside-section-xs",
+  "inside-section-s",
+  "inside-section-default",
+  "inside-section-l",
+  "between-sections"
+], y = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], A = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+], w = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], $ = ["", "default", "nowrap", "wrap", "wrap-reverse"];
+class c extends u {
+  constructor() {
+    super(g), this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`, this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    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 [
+      ...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, e, i) {
+    if (t.indexOf("direction") > -1 && !["column", "row"].includes(i))
+      throw new Error("Invalid direction");
+    switch (t) {
+      case "gap":
+      case "gap--mobile":
+      case "gap--tablet":
+      case "gap--laptop":
+      case "gap--desktop":
+        this.updateFlexProperties(t, e, i, v);
+        break;
+      case "justify-content":
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+        this.updateFlexProperties(
+          t,
+          e,
+          i,
+          w
+        );
+        break;
+      case "align-items":
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+        this.updateFlexProperties(t, e, i, A);
+        break;
+      case "wrap":
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, e, i, $);
+        break;
+      case "direction":
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+        this.updateFlexProperties(t, e, i, y);
+        break;
+      default:
+        super.attributeChangedCallback(t, e, i);
+        break;
+    }
+  }
+  updateFlexProperties(t, e, i, r) {
+    this.checkName(r, i) || console.error(`Bad ${t} value for`, this.$el);
+    const o = t.indexOf("--") > -1, s = o ? t.split("--")[0] : t, n = [];
+    if (!o)
+      this.getAttribute(s + "--mobile") || n.push("mobile"), this.getAttribute(s + "--tablet") || n.push("tablet"), this.getAttribute(s + "--laptop") || n.push("laptop"), this.getAttribute(s + "--desktop") || n.push("desktop"), n.forEach((l) => {
+        this.updateStyle(s, l, e, r), this.updateStyle(s, l, i, r);
+      });
+    else {
+      const l = t.split("--")[1];
+      this.updateStyle(s, l, e, r), this.updateStyle(s, l, i, r);
+    }
+  }
+  updateStyle(t, e, i, r) {
+    i !== null && i !== "" && i !== "default" && (t === "gap" && r.includes(i) ? this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
+    ) : this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      i
+    ));
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  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", c);
+class C extends c {
+  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", C);
+class S extends c {
+  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", S);
+class _ extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["grow"];
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "grow" && (this.style.flexGrow = i);
+  }
+  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", _);
+const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", b = new CSSStyleSheet();
+b.replaceSync(j);
+class z extends u {
+  constructor() {
+    super(b), this.template = (t) => `
+    <px-container border-radius="none" padding="none">
+      <px-vstack>
+        <px-container id="header-container" border-radius="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"
+          border-radius="none"
+          padding="none"
+          padding-top="xl"
+          id="image-box"
+          background-size="cover"
+          background-position="top center"
+          padding-bottom="xl"
+          border-radius="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 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>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
+        <px-container
+          id="body-container"
+          id="main"
+          background-color="${this.backgroundColor}"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="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"
+          border-radius="none"
+          id="main"
+          background-color="container-weak"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="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"
+          background-color="none"
+          border-radius="none"
+          style="background-color: rgb(108, 66, 156)"
+          padding-top="xl"
+          padding-bottom="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, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "background-image":
+          this.$imageContainer.setAttribute("background-image", i);
+          break;
+        case "gap":
+          this.$bodyVStackContainer.setAttribute("gap", i);
+          break;
+        case "background-color":
+          this.$bodyContainer.setAttribute(
+            "background-color",
+            x.indexOf(i) > 0 ? i : "none"
+          );
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(i);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(i);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+      }
+  }
+  handlePaddingVerticalChange(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;
+  }
+}
+customElements.get("px-page") === void 0 && customElements.define("px-page", z);
+const h = new CSSStyleSheet();
+h.replaceSync(m);
+const d = ["", "default", "xs", "s", "l", "2xl"], p = ["", "default", "s", "m", "l"], H = ["", "default", "left", "center"], I = ["", "default", "left", "center"];
+class L extends HTMLElement {
+  template() {
+    return `
+      <div class="tile__container">
+        <px-hstack gap="after-element-s" justify-content="space-between" align-items="center" class="tile__header">
+          <slot name="prefix"></slot>
+          <slot name="action"></slot>
+        </px-hstack>
+        <px-vstack gap="after-element-2xs" class="tile__content">
+          <slot></slot>
+          <slot name="description"></slot>
+        </px-vstack>
+      </div>
+    `;
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [h];
+  }
+  connectedCallback() {
+    if (!this.$slotPrefix && !this.$slotAction && this.$tileHeader.classList.toggle("tile__header--empty"), this.$slotAction && !this.$slotPrefix && this.$tileHeader && this.$tileHeader.setAttribute("justify-content", "flex-end"), this.$slotPrefix) {
+      const t = this.querySelector("px-icon"), e = this.querySelector("px-img");
+      t && (t.hasAttribute("size") ? d.includes(
+        t.getAttribute("size")
+      ) ? (t.getAttribute("size") === "" || t.getAttribute("size") === "default") && t.setAttribute("size", "s") : (console.error(
+        `Wrong icon size value for prefix. Allowed values are: ${d.join(
+          ", "
+        )}.`
+      ), t.setAttribute("size", "s")) : t.setAttribute("size", "s"), t.setAttribute("color", "content-brand")), e && (e.hasAttribute("width") ? p.includes(
+        e.getAttribute("width")
+      ) ? (e.getAttribute("width") === "" || e.getAttribute("width") === "default") && e.setAttribute("width", "s") : (console.error(
+        `Wrong img width value for prefix. Allowed values are: ${p.join(
+          ", "
+        )}.`
+      ), e.setAttribute("width", "s")) : e.setAttribute("width", "s"), e.setAttribute("border-radius", "pill"));
+    }
+  }
+  static get observedAttributes() {
+    return ["header-alignment", "content-alignment", "inverted"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "header-alignment":
+          this.updateHeaderAlignment(e, i, H);
+          break;
+        case "content-alignment":
+          this.updateContentAlignment(
+            e,
+            i,
+            I
+          );
+          break;
+      }
+  }
+  checkName(t, e) {
+    return t.includes(e);
+  }
+  updateHeaderAlignment(t, e, i) {
+    this.checkName(i, e) || console.error(`${e} is not an allowed header-alignment value.`), this.$tileHeader && !this.$slotAction && (t !== null && t !== "" && t !== "default" && (t === "left" && (t = "flex-start"), this.$tileHeader.setAttribute("justify-content", t)), e !== null && e !== "" && e !== "default" && (e === "left" && (e = "flex-start"), this.$tileHeader.setAttribute("justify-content", e)));
+  }
+  updateContentAlignment(t, e, i) {
+    this.checkName(i, e) || console.error(`${e} is not an allowed content-alignment value.`), this.$tileContent && (t !== null && t !== "" && t !== "default" && (this.$tileContent.style.textAlign = t), e !== null && e !== "" && e !== "default" && (this.$tileContent.style.textAlign = e));
+  }
+  get $tileHeader() {
+    return this.shadowRoot.querySelector(".tile__header");
+  }
+  get $tileContent() {
+    return this.shadowRoot.querySelector(".tile__content");
+  }
+  get $slotPrefix() {
+    return this.querySelector('[slot="prefix"]');
+  }
+  get $slotAction() {
+    return this.querySelector('[slot="action"]');
+  }
+  get headerAlignment() {
+    return this.getAttribute("header-alignment");
+  }
+  set headerAlignment(t) {
+    this.setAttribute("header-alignment", t);
+  }
+  get contentAlignment() {
+    return this.getAttribute("content-alignment");
+  }
+  set contentAlignment(t) {
+    this.setAttribute("content-alignment", t);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+}
+const R = ":host{display:inline-block}.tile{display:inline-block;padding:var(--px-padding-s-mobile);text-align:left;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-background-color-action-primary-inverted) )}.tile,.tile *{box-sizing:border-box}.tile:hover:not([disabled],[aria-disabled=true],.loading){background-color:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default)}.tile:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.tile[disabled],.tile[aria-disabled=true]{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){.tile{padding:var(--px-padding-s-tablet)}.tile:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){.tile{padding:var(--px-padding-s-desktop)}.tile:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile{background:var( --tile-background-color-inverted, var(--px-background-color-action-primary-default) )}:host([inverted]) .tile:hover:not([disabled],[aria-disabled=true],.loading){background-color:var( --px-background-color-action-hover-bordered-inverted );border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .tile:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}", f = new CSSStyleSheet();
+f.replaceSync(R);
+const P = ["", "default", "action-neutral"];
+class T extends L {
+  template() {
+    return `
+      <button class="tile">
+        ${super.template()}
+      </button>
+    `;
+  }
+  constructor() {
+    super(), this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      f
+    ];
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "background-color"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (super.attributeChangedCallback(t, e, i), e !== i)
+      switch (t) {
+        case "background-color":
+          this.updateBackgroundColor(e, i, P);
+          break;
+      }
+  }
+  updateBackgroundColor(t, e, i) {
+    if (!this.checkName(i, e)) {
+      console.error("Bad color value for", this.$el);
+      return;
+    }
+    const r = (o) => {
+      o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
+        "--tile-background-color-default",
+        `var(--px-background-color-${o}-default)`
+      ), this.$el.style.setProperty(
+        "--tile-background-color-inverted",
+        `var(--px-background-color-${o}-inverted)`
+      ));
+    };
+    r(t), r(e);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".tile");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color");
+  }
+  set backgroundColor(t) {
+    this.setAttribute("background-color", t);
+  }
+}
+customElements.define("px-tile", T);
+export {
+  T as Tile,
+  P as backgroundColorValues
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-tile",
+  "version": "1.0.0-alpha.12",
+  "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": "747626981362ce4c17f746ff6e88bc104ba6aebd",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}