@proximus/lavender-selectablebox 1.4.11-alpha.5 → 1.4.11-alpha.7

package/dist/SelectableBoxRadio.d.ts

@@ -2,6 +2,8 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
 import '@proximus/lavender-layout';
 import { SelectableBox } from './SelectableBox';
 import { type Radio } from '@proximus/lavender-radio-group';
+export declare const SELECTABLE_BOX_RADIO_CONNECTED_EVENT = "px-selectable-box-radio-connected";
+export declare const SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT = "px-selectable-box-radio-disconnected";
 export declare class SelectableBoxRadio extends WithExtraAttributes {
     protected internals: ElementInternals;
     protected template(): string;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as m, gapValues as k, checkName as y, log as h, backgroundColorValues as A } from "@proximus/lavender-common";
+import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as m, gapValues as k, checkName as A, log as h, backgroundColorValues as y } from "@proximus/lavender-common";
 const w = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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(w);
 const C = [
@@ -134,7 +134,7 @@ class d extends c {
     }
   }
   updateOverflowX(t, e, i, o) {
-    if (!y(o, i)) {
+    if (!A(o, i)) {
       h(
         `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
@@ -366,7 +366,7 @@ class L extends d {
   }
 }
 customElements.get("px-vstack") || customElements.define("px-vstack", L);
-class z extends d {
+class D extends d {
   constructor() {
     super();
   }
@@ -374,8 +374,8 @@ class z extends d {
     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", z);
-class D extends HTMLElement {
+customElements.get("px-hstack") || customElements.define("px-hstack", D);
+class z extends HTMLElement {
   constructor() {
     super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
@@ -422,7 +422,7 @@ class D extends HTMLElement {
     t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
   }
 }
-customElements.get("px-spacer") || customElements.define("px-spacer", D);
+customElements.get("px-spacer") || customElements.define("px-spacer", z);
 const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", p = new CSSStyleSheet();
 p.replaceSync(j);
 class R extends c {
@@ -604,7 +604,7 @@ class R extends c {
         case "background-color":
           this.$bodyContainer.setAttribute(
             "background-color",
-            A.indexOf(i) > 0 ? i : "none"
+            y.indexOf(i) > 0 ? i : "none"
           );
           break;
         case "padding-vertical":
@@ -683,8 +683,8 @@ class H extends c {
   }
 }
 customElements.get("px-selectable-box") || customElements.define("px-selectable-box", H);
-const P = ["px-a", "px-button"];
-function g(s, t, e = P) {
+const T = ["px-a", "px-button"];
+function g(s, t, e = T) {
   const i = new Set(e), o = s.composedPath();
   for (const r of o) {
     if (r === t)
@@ -696,7 +696,7 @@ function g(s, t, e = P) {
 }
 const x = ':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([parent-has-anchor-full]) .selectable-box-checkbox,:host([parent-has-anchor-full]) .selectable-box-radio{border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}: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;border-color:transparent}: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 screen and (min-width: 48rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){.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,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}: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)}', f = new CSSStyleSheet();
 f.replaceSync(x);
-class q extends c {
+class I extends c {
   template() {
     return `
       <div class="selectable-box-checkbox">
@@ -861,10 +861,11 @@ class q extends c {
     t ? this.setAttribute("value", t) : this.removeAttribute("value");
   }
 }
-customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", q);
+customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", I);
 const v = new CSSStyleSheet();
 v.replaceSync(x);
-class I extends c {
+const P = "px-selectable-box-radio-connected", q = "px-selectable-box-radio-disconnected";
+class B extends c {
   template() {
     return `
       <div class="selectable-box-radio">
@@ -888,8 +889,12 @@ class I extends c {
     super(v), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
   }
   connectedCallback() {
-    var t;
-    this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.querySelector("px-selectable-box-radio")) === this ? 0 : -1, this.ariaChecked = "false", this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
+    this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(
+      new CustomEvent(P, {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.ariaChecked = "false", 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);
@@ -929,7 +934,12 @@ class I extends c {
     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);
+    ), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent), this.dispatchEvent(
+      new CustomEvent(q, {
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
   removeHoverAttribute() {
     this.$radio.removeAttribute("hover");
@@ -955,7 +965,7 @@ class I extends c {
   }
   handleCheckedAttributeChange(t) {
     var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
+    (e = this.internals) == null || e.setFormValue(this.formData()), t == null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
       new Event("change", {
         bubbles: !0,
         composed: !0
@@ -1030,9 +1040,11 @@ class I extends c {
     t ? this.setAttribute("value", t) : this.removeAttribute("value");
   }
 }
-customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", I);
+customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", B);
 export {
+  P as SELECTABLE_BOX_RADIO_CONNECTED_EVENT,
+  q as SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT,
   H as SelectableBox,
-  q as SelectableBoxCheckbox,
-  I as SelectableBoxRadio
+  I as SelectableBoxCheckbox,
+  B as SelectableBoxRadio
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-selectablebox",
-  "version": "1.4.11-alpha.5",
+  "version": "1.4.11-alpha.7",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",