@proximus/lavender-selectablebox 1.0.0-alpha.10

package/dist/SelectableBox.d.ts

@@ -0,0 +1,13 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+import '@proximus/lavender-layout';
+export declare class SelectableBox extends WithExtraAttributes {
+    protected template(): string;
+    constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    get $el(): HTMLElement;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get hideFooter(): boolean;
+    set hideFooter(value: boolean);
+}

package/dist/SelectableBoxCheckbox.d.ts

@@ -0,0 +1,39 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+import '@proximus/lavender-layout';
+import { SelectableBox } from './SelectableBox';
+import { type Checkbox } from '@proximus/lavender-checkbox';
+export declare class SelectableBoxCheckbox extends WithExtraAttributes {
+    protected internals: ElementInternals;
+    protected template(): string;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
+    private removeHoverAttribute;
+    private setHoverAttribute;
+    private setKeypressEvent;
+    private setClickEvent;
+    toggleFooterVisibility(): void;
+    handleDisabledAttributeChange(disabled: boolean): void;
+    handleCheckedAttributeChange(newValue: string): void;
+    static get formAssociated(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: any): void;
+    formData(): FormData;
+    get $el(): HTMLElement;
+    get $selectableBox(): SelectableBox;
+    get $checkbox(): Checkbox;
+    get $slotFooter(): HTMLSlotElement;
+    get $slottedFooter(): HTMLElement;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get value(): string;
+    set value(value: string);
+}

package/dist/SelectableBoxRadio.d.ts

@@ -0,0 +1,39 @@
+import { WithExtraAttributes } from '@proximus/lavender-common';
+import '@proximus/lavender-layout';
+import { SelectableBox } from './SelectableBox';
+import { type RadioBase } from '@proximus/lavender-radio-group';
+export declare class SelectableBoxRadio extends WithExtraAttributes {
+    protected internals: ElementInternals;
+    protected template(): string;
+    constructor();
+    connectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
+    disconnectedCallback(): void;
+    private removeHoverAttribute;
+    private setHoverAttribute;
+    private setKeypressEvent;
+    private setClickEvent;
+    toggleFooterVisibility(): void;
+    handleDisabledAttributeChange(disabled: boolean): void;
+    handleCheckedAttributeChange(newValue: string): void;
+    static get formAssociated(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: any): void;
+    formData(): FormData;
+    get $el(): HTMLElement;
+    get $selectableBox(): SelectableBox;
+    get $radio(): RadioBase;
+    get $slotFooter(): HTMLSlotElement;
+    get $slottedFooter(): HTMLElement;
+    get inverted(): boolean;
+    set inverted(value: boolean);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get value(): string;
+    set value(value: string);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectableBox';
+export * from './SelectableBoxCheckbox';
+export * from './SelectableBoxRadio';

package/dist/index.es.js

@@ -0,0 +1,992 @@
+import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as f, gapValues as v, checkName as m, backgroundColorValues as k } from "@proximus/lavender-common";
+const A = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.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);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', b = new CSSStyleSheet();
+b.replaceSync(A);
+const y = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], w = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "flex-end",
+  "center",
+  "baseline"
+], $ = [
+  "",
+  "default",
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], C = ["", "default", "nowrap", "wrap", "wrap-reverse"], S = ["", "visible", "hidden", "scroll", "auto"];
+class c extends n {
+  constructor() {
+    super(b), this.overflowXAttributeDelegate = new f(
+      this,
+      "overflow-x",
+      (t) => t,
+      "--overflow-x"
+    ), 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 = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
+  }
+  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",
+      "overflow-x",
+      "overflow-x--mobile",
+      "overflow-x--tablet",
+      "overflow-x--laptop",
+      "overflow-x--desktop"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    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,
+          $
+        );
+        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, w);
+        break;
+      case "wrap":
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, e, i, C);
+        break;
+      case "direction":
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+        this.updateFlexProperties(t, e, i, y);
+        break;
+      case "overflow-x":
+      case "overflow-x--mobile":
+      case "overflow-x--tablet":
+      case "overflow-x--laptop":
+      case "overflow-x--desktop":
+        this.updateOverflowX(t, e, i, S);
+        break;
+      default:
+        super.attributeChangedCallback(t, e, i);
+        break;
+    }
+  }
+  updateOverflowX(t, e, i, o) {
+    if (!m(o, i)) {
+      console.error(`${i} is not an allowed ${t} value`);
+      return;
+    }
+    this.overflowXAttributeDelegate.attributeChangedCallback(
+      t,
+      e,
+      i
+    );
+  }
+  updateFlexProperties(t, e, i, o) {
+    this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
+    const d = t.indexOf("--") > -1, s = d ? t.split("--")[0] : t, a = [];
+    if (!d)
+      this.getAttribute(s + "--mobile") || a.push("mobile"), this.getAttribute(s + "--tablet") || a.push("tablet"), this.getAttribute(s + "--laptop") || a.push("laptop"), this.getAttribute(s + "--desktop") || a.push("desktop"), a.forEach((l) => {
+        this.updateStyle(s, l, e, o), this.updateStyle(s, l, i, o);
+      });
+    else {
+      const l = t.split("--")[1];
+      this.updateStyle(s, l, e, o), this.updateStyle(s, l, i, o);
+    }
+  }
+  updateStyle(t, e, i, o) {
+    i && (t === "gap" && o && o.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
+    ));
+  }
+  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 gapDesktop() {
+    return this.getAttribute("gap--desktop");
+  }
+  set gapDesktop(t) {
+    this.setAttribute("gap--desktop", 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 overflowX() {
+    return this.getAttribute("overflow-x");
+  }
+  set overflowX(t) {
+    this.setAttribute("overflow-x", t);
+  }
+  get overflowXMobile() {
+    return this.getAttribute("overflow-x--mobile");
+  }
+  set overflowXMobile(t) {
+    this.setAttribute("overflow-x--mobile", t);
+  }
+  get overflowXTablet() {
+    return this.getAttribute("overflow-x--tablet");
+  }
+  set overflowXTablet(t) {
+    this.setAttribute("overflow-x--tablet", t);
+  }
+  get overflowXLaptop() {
+    return this.getAttribute("overflow-x--laptop");
+  }
+  set overflowXLaptop(t) {
+    this.setAttribute("overflow-x--laptop", t);
+  }
+  get overflowXDesktop() {
+    return this.getAttribute("overflow-x--desktop");
+  }
+  set overflowXDesktop(t) {
+    this.setAttribute("overflow-x--desktop", t);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".flex-container");
+  }
+}
+customElements.get("px-stack") || customElements.define("px-stack", c);
+class _ 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", _);
+class E 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", E);
+class L 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.get("px-spacer") || customElements.define("px-spacer", L);
+const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", h = new CSSStyleSheet();
+h.replaceSync(j);
+class D extends n {
+  constructor() {
+    super(h), 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="s"
+              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="s">
+            <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="l"
+              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="surface-default"
+          padding="none"
+          padding-top="xl"
+          padding-bottom="xl"
+        >
+          <px-hstack>
+            <px-spacer></px-spacer>
+            <px-vstack gap="l" 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="l" 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",
+            k.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", D);
+const z = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-m-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile);flex-grow:1}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media only screen and (min-width: 48em){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-m-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media only screen and (min-width: 64.0625em){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-m-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-m-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}', p = new CSSStyleSheet();
+p.replaceSync(z);
+class R extends n {
+  template() {
+    return `
+      <div class="selectable-box">
+        <slot name="media"></slot>
+        <div class="info">
+          <div class="info__body">
+            <div class="header">
+              <slot name="action"></slot>
+              <slot name="icon"></slot>
+              <slot name="logo"></slot>
+              <div class="titles">
+                <slot name="title"></slot>
+                <slot name="description"></slot>
+              </div>
+            </div>
+            <slot name="content"></slot>
+          </div>
+          <div class="info__footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  constructor() {
+    super(p), this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "inverted", "hide-footer"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".selectable-box");
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get hideFooter() {
+    return this.hasAttribute("hide-footer");
+  }
+  set hideFooter(t) {
+    t ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
+  }
+}
+customElements.get("px-selectable-box") || customElements.define("px-selectable-box", R);
+const u = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 48em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}', g = new CSSStyleSheet();
+g.replaceSync(u);
+class F extends n {
+  template() {
+    return `
+      <div class="selectable-box-checkbox">
+        <px-selectable-box>
+          <slot name="media" slot="media"></slot>
+          <px-checkbox 
+            slot="action" aria-hidden="true" tabindex="-1" 
+            name="${this.name}"
+            value="${this.value}"
+          ></px-checkbox>
+          <slot name="icon" slot="icon"></slot>
+          <slot name="logo" slot="logo"></slot>
+          <slot name="title" slot="title"></slot>
+          <slot name="description" slot="description"></slot>
+          <slot name="content" slot="content"></slot>
+          <slot name="footer" slot="footer"></slot>
+        </px-selectable-box>
+      </div>
+    `;
+  }
+  constructor() {
+    var t;
+    super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
+  }
+  connectedCallback() {
+    this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent), this.hasAttribute("checked") && (this.checked = !0);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "name",
+      "value",
+      "checked",
+      "disabled"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "inverted":
+          this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$checkbox.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$checkbox.removeAttribute("inverted"));
+          break;
+        case "name":
+        case "value":
+          this.$checkbox && this.$checkbox.setAttribute(t, i);
+          break;
+        case "disabled":
+          this.handleDisabledAttributeChange(i !== null);
+          break;
+        case "checked":
+          this.handleCheckedAttributeChange(i);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  disconnectedCallback() {
+    this.$slotFooter.removeEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
+  }
+  removeHoverAttribute() {
+    this.$checkbox.removeAttribute("hover");
+  }
+  setHoverAttribute() {
+    this.$checkbox.setAttribute("hover", "");
+  }
+  setKeypressEvent(t) {
+    switch (t.stopPropagation(), t.preventDefault(), t.code) {
+      case "Space":
+        this.click();
+        break;
+    }
+  }
+  setClickEvent(t) {
+    this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
+  }
+  toggleFooterVisibility() {
+    this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
+  }
+  handleDisabledAttributeChange(t) {
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$checkbox.removeAttribute("disabled"));
+  }
+  handleCheckedAttributeChange(t) {
+    var e;
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    ));
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  formData() {
+    if (this.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(
+      ".selectable-box-checkbox"
+    );
+  }
+  get $selectableBox() {
+    return this.shadowRoot.querySelector("px-selectable-box");
+  }
+  get $checkbox() {
+    return this.shadowRoot.querySelector("px-checkbox");
+  }
+  get $slotFooter() {
+    return this.shadowRoot.querySelector(
+      'slot[name="footer"]'
+    );
+  }
+  get $slottedFooter() {
+    return this.querySelector('[slot="footer"]');
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+}
+customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", F);
+const x = new CSSStyleSheet();
+x.replaceSync(u);
+class H extends n {
+  template() {
+    return `
+      <div class="selectable-box-radio">
+        <px-selectable-box>
+          <slot name="media" slot="media"></slot>
+          <px-radio-base 
+            slot="action" aria-hidden="true" tabindex="-1" 
+            name="${this.name}"
+            value="${this.value}"
+          ></px-radio-base>
+          <slot name="icon" slot="icon"></slot>
+          <slot name="logo" slot="logo"></slot>
+          <slot name="title" slot="title"></slot>
+          <slot name="description" slot="description"></slot>
+          <slot name="content" slot="content"></slot>
+          <slot name="footer" slot="footer"></slot>
+        </px-selectable-box>
+      </div>
+    `;
+  }
+  constructor() {
+    var t, e;
+    super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
+  }
+  connectedCallback() {
+    this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent), this.hasAttribute("checked") && (this.checked = !0);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "inverted",
+      "name",
+      "value",
+      "checked",
+      "disabled"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "inverted":
+          this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$radio.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$radio.removeAttribute("inverted"));
+          break;
+        case "name":
+        case "value":
+          this.$radio && this.$radio.setAttribute(t, i);
+          break;
+        case "disabled":
+          this.handleDisabledAttributeChange(i !== null);
+          break;
+        case "checked":
+          this.handleCheckedAttributeChange(i);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  disconnectedCallback() {
+    this.$slotFooter.removeEventListener(
+      "slotchange",
+      this.toggleFooterVisibility
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent);
+  }
+  removeHoverAttribute() {
+    this.$radio.removeAttribute("hover");
+  }
+  setHoverAttribute() {
+    this.$radio.setAttribute("hover", "");
+  }
+  setKeypressEvent(t) {
+    switch (t.preventDefault(), t.code) {
+      case "Space":
+        this.click();
+        break;
+    }
+  }
+  setClickEvent(t) {
+    this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
+  }
+  toggleFooterVisibility() {
+    this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
+  }
+  handleDisabledAttributeChange(t) {
+    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$radio.removeAttribute("disabled"));
+  }
+  handleCheckedAttributeChange(t) {
+    var e;
+    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.setAttribute("tabIndex", "-1"), this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("tabIndex", "0"), this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    ));
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(t) {
+    this.checked = t;
+  }
+  formData() {
+    if (this.name) {
+      const t = new FormData(), e = this.getAttribute("name");
+      return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
+    }
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(
+      ".selectable-box-radio"
+    );
+  }
+  get $selectableBox() {
+    return this.shadowRoot.querySelector("px-selectable-box");
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector("px-radio-base");
+  }
+  get $slotFooter() {
+    return this.shadowRoot.querySelector(
+      'slot[name="footer"]'
+    );
+  }
+  get $slottedFooter() {
+    return this.querySelector('[slot="footer"]');
+  }
+  get inverted() {
+    return this.hasAttribute("inverted");
+  }
+  set inverted(t) {
+    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(t) {
+    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(t) {
+    t ? this.setAttribute("name", t) : this.removeAttribute("name");
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+}
+customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", H);
+export {
+  R as SelectableBox,
+  F as SelectableBoxCheckbox,
+  H as SelectableBoxRadio
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@proximus/lavender-selectablebox",
+  "version": "1.0.0-alpha.10",
+  "description": "",
+  "main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && NODE_ENV=development vite build &&  tsc && npm run transform-package-json",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}