@proximus/lavender-selectablebox 2.0.0-alpha.4 → 2.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/SelectableBoxRadio.d.ts +2 -2
  2. package/dist/index.es.js +75 -74
  3. package/package.json +1 -1
package/dist/SelectableBoxRadio.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { WithExtraAttributes } from '@proximus/lavender-common';
2
2
  import '@proximus/lavender-layout';
3
3
  import { SelectableBox } from './SelectableBox';
4
- import { type RadioBase } from '@proximus/lavender-radio-group';
4
+ import { type Radio } from '@proximus/lavender-radio-group';
5
5
  export declare class SelectableBoxRadio extends WithExtraAttributes {
6
6
  protected internals: ElementInternals;
7
7
  protected template(): string;
@@ -23,7 +23,7 @@ export declare class SelectableBoxRadio extends WithExtraAttributes {
23
23
  formData(): FormData;
24
24
  get $el(): HTMLElement;
25
25
  get $selectableBox(): SelectableBox;
26
- get $radio(): RadioBase;
26
+ get $radio(): Radio;
27
27
  get $slotFooter(): HTMLSlotElement;
28
28
  get $slottedFooter(): HTMLElement;
29
29
  get inverted(): boolean;
package/dist/index.es.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as f, gapValues as v, checkName as m, backgroundColorValues as k } from "@proximus/lavender-common";
2
- 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();
3
- b.replaceSync(A);
4
- const y = [
2
+ const y = ':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();
3
+ b.replaceSync(y);
4
+ const A = [
5
5
  "",
6
6
  "default",
7
7
  "row",
@@ -75,14 +75,14 @@ class c extends n {
75
75
  "overflow-x--desktop"
76
76
  ];
77
77
  }
78
- attributeChangedCallback(t, e, i) {
78
+ attributeChangedCallback(t, i, e) {
79
79
  switch (t) {
80
80
  case "gap":
81
81
  case "gap--mobile":
82
82
  case "gap--tablet":
83
83
  case "gap--laptop":
84
84
  case "gap--desktop":
85
- this.updateFlexProperties(t, e, i, v);
85
+ this.updateFlexProperties(t, i, e, v);
86
86
  break;
87
87
  case "justify-content":
88
88
  case "justify-content--mobile":
@@ -91,8 +91,8 @@ class c extends n {
91
91
  case "justify-content--desktop":
92
92
  this.updateFlexProperties(
93
93
  t,
94
- e,
95
94
  i,
95
+ e,
96
96
  $
97
97
  );
98
98
  break;
@@ -101,64 +101,64 @@ class c extends n {
101
101
  case "align-items--tablet":
102
102
  case "align-items--laptop":
103
103
  case "align-items--desktop":
104
- this.updateFlexProperties(t, e, i, w);
104
+ this.updateFlexProperties(t, i, e, w);
105
105
  break;
106
106
  case "wrap":
107
107
  case "wrap--mobile":
108
108
  case "wrap--tablet":
109
109
  case "wrap--laptop":
110
110
  case "wrap--desktop":
111
- this.updateFlexProperties(t, e, i, C);
111
+ this.updateFlexProperties(t, i, e, C);
112
112
  break;
113
113
  case "direction":
114
114
  case "direction--mobile":
115
115
  case "direction--tablet":
116
116
  case "direction--laptop":
117
117
  case "direction--desktop":
118
- this.updateFlexProperties(t, e, i, y);
118
+ this.updateFlexProperties(t, i, e, A);
119
119
  break;
120
120
  case "overflow-x":
121
121
  case "overflow-x--mobile":
122
122
  case "overflow-x--tablet":
123
123
  case "overflow-x--laptop":
124
124
  case "overflow-x--desktop":
125
- this.updateOverflowX(t, e, i, S);
125
+ this.updateOverflowX(t, i, e, S);
126
126
  break;
127
127
  default:
128
- super.attributeChangedCallback(t, e, i);
128
+ super.attributeChangedCallback(t, i, e);
129
129
  break;
130
130
  }
131
131
  }
132
- updateOverflowX(t, e, i, o) {
133
- if (!m(o, i)) {
134
- console.error(`${i} is not an allowed ${t} value`);
132
+ updateOverflowX(t, i, e, o) {
133
+ if (!m(o, e)) {
134
+ console.error(`${e} is not an allowed ${t} value`);
135
135
  return;
136
136
  }
137
137
  this.overflowXAttributeDelegate.attributeChangedCallback(
138
138
  t,
139
- e,
140
- i
139
+ i,
140
+ e
141
141
  );
142
142
  }
143
- updateFlexProperties(t, e, i, o) {
144
- this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
143
+ updateFlexProperties(t, i, e, o) {
144
+ this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
145
145
  const d = t.indexOf("--") > -1, s = d ? t.split("--")[0] : t, a = [];
146
146
  if (!d)
147
147
  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) => {
148
- this.updateStyle(s, l, e, o), this.updateStyle(s, l, i, o);
148
+ this.updateStyle(s, l, i, o), this.updateStyle(s, l, e, o);
149
149
  });
150
150
  else {
151
151
  const l = t.split("--")[1];
152
- this.updateStyle(s, l, e, o), this.updateStyle(s, l, i, o);
152
+ this.updateStyle(s, l, i, o), this.updateStyle(s, l, e, o);
153
153
  }
154
154
  }
155
- updateStyle(t, e, i, o) {
156
- i && (t === "gap" && o && o.includes(i) ? this.$el.style.setProperty(
157
- `--flex-${t}--${e}-value`,
158
- `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
155
+ updateStyle(t, i, e, o) {
156
+ e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
157
+ `--flex-${t}--${i}-value`,
158
+ `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
159
159
  ) : this.$el.style.setProperty(
160
- `--flex-${t}--${e}-value`,
161
- i
160
+ `--flex-${t}--${i}-value`,
161
+ e
162
162
  ));
163
163
  }
164
164
  get direction() {
@@ -371,8 +371,8 @@ class L extends HTMLElement {
371
371
  static get observedAttributes() {
372
372
  return ["grow"];
373
373
  }
374
- attributeChangedCallback(t, e, i) {
375
- t === "grow" && (this.style.flexGrow = i);
374
+ attributeChangedCallback(t, i, e) {
375
+ t === "grow" && (this.style.flexGrow = e);
376
376
  }
377
377
  connectedCallback() {
378
378
  this.style.flexGrow = this.getAttribute("grow") || "1";
@@ -554,29 +554,29 @@ class D extends n {
554
554
  connectedCallback() {
555
555
  this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
556
556
  }
557
- attributeChangedCallback(t, e, i) {
558
- if (e !== i)
557
+ attributeChangedCallback(t, i, e) {
558
+ if (i !== e)
559
559
  switch (t) {
560
560
  case "background-image":
561
- this.$imageContainer.setAttribute("background-image", i);
561
+ this.$imageContainer.setAttribute("background-image", e);
562
562
  break;
563
563
  case "gap":
564
- this.$bodyVStackContainer.setAttribute("gap", i);
564
+ this.$bodyVStackContainer.setAttribute("gap", e);
565
565
  break;
566
566
  case "background-color":
567
567
  this.$bodyContainer.setAttribute(
568
568
  "background-color",
569
- k.indexOf(i) > 0 ? i : "none"
569
+ k.indexOf(e) > 0 ? e : "none"
570
570
  );
571
571
  break;
572
572
  case "padding-vertical":
573
- this.handlePaddingVerticalChange(i);
573
+ this.handlePaddingVerticalChange(e);
574
574
  break;
575
575
  case "padding-horizontal":
576
- this.handlePaddingHorizontalChange(i);
576
+ this.handlePaddingHorizontalChange(e);
577
577
  break;
578
578
  default:
579
- super.attributeChangedCallback(t, e, i);
579
+ super.attributeChangedCallback(t, i, e);
580
580
  }
581
581
  }
582
582
  handlePaddingVerticalChange(t) {
@@ -589,7 +589,7 @@ class D extends n {
589
589
  customElements.get("px-page") === void 0 && customElements.define("px-page", D);
590
590
  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();
591
591
  p.replaceSync(z);
592
- class R extends n {
592
+ class F extends n {
593
593
  template() {
594
594
  return `
595
595
  <div class="selectable-box">
@@ -620,11 +620,11 @@ class R extends n {
620
620
  static get observedAttributes() {
621
621
  return [...super.observedAttributes, "inverted", "hide-footer"];
622
622
  }
623
- attributeChangedCallback(t, e, i) {
624
- if (e !== i)
623
+ attributeChangedCallback(t, i, e) {
624
+ if (i !== e)
625
625
  switch (t) {
626
626
  default:
627
- super.attributeChangedCallback(t, e, i);
627
+ super.attributeChangedCallback(t, i, e);
628
628
  break;
629
629
  }
630
630
  }
@@ -644,10 +644,10 @@ class R extends n {
644
644
  t ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
645
645
  }
646
646
  }
647
- customElements.get("px-selectable-box") || customElements.define("px-selectable-box", R);
648
- 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();
647
+ customElements.get("px-selectable-box") || customElements.define("px-selectable-box", F);
648
+ 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;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 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,: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)}', g = new CSSStyleSheet();
649
649
  g.replaceSync(u);
650
- class F extends n {
650
+ class R extends n {
651
651
  template() {
652
652
  return `
653
653
  <div class="selectable-box-checkbox">
@@ -670,10 +670,10 @@ class F extends n {
670
670
  }
671
671
  constructor() {
672
672
  var t;
673
- 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}`);
673
+ super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
674
674
  }
675
675
  connectedCallback() {
676
- this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
676
+ this.tabIndex = 0, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
677
677
  "slotchange",
678
678
  this.toggleFooterVisibility
679
679
  ), 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);
@@ -688,24 +688,24 @@ class F extends n {
688
688
  "disabled"
689
689
  ];
690
690
  }
691
- attributeChangedCallback(t, e, i) {
692
- if (e !== i)
691
+ attributeChangedCallback(t, i, e) {
692
+ if (i !== e)
693
693
  switch (t) {
694
694
  case "inverted":
695
695
  this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$checkbox.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$checkbox.removeAttribute("inverted"));
696
696
  break;
697
697
  case "name":
698
698
  case "value":
699
- this.$checkbox && this.$checkbox.setAttribute(t, i);
699
+ this.$checkbox && this.$checkbox.setAttribute(t, e);
700
700
  break;
701
701
  case "disabled":
702
- this.handleDisabledAttributeChange(i !== null);
702
+ this.handleDisabledAttributeChange(e !== null);
703
703
  break;
704
704
  case "checked":
705
- this.handleCheckedAttributeChange(i);
705
+ this.handleCheckedAttributeChange(e);
706
706
  break;
707
707
  default:
708
- super.attributeChangedCallback(t, e, i);
708
+ super.attributeChangedCallback(t, i, e);
709
709
  break;
710
710
  }
711
711
  }
@@ -738,8 +738,8 @@ class F extends n {
738
738
  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"));
739
739
  }
740
740
  handleCheckedAttributeChange(t) {
741
- var e;
742
- (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(
741
+ var i;
742
+ (i = this.internals) == null || i.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(
743
743
  new Event("change", {
744
744
  bubbles: !0,
745
745
  composed: !0
@@ -760,8 +760,8 @@ class F extends n {
760
760
  }
761
761
  formData() {
762
762
  if (this.name) {
763
- const t = new FormData(), e = this.getAttribute("name");
764
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
763
+ const t = new FormData(), i = this.getAttribute("name");
764
+ return i && (this.checked ? t.set(i, this.value) : t.delete(i)), t;
765
765
  }
766
766
  }
767
767
  get $el() {
@@ -814,7 +814,7 @@ class F extends n {
814
814
  t ? this.setAttribute("value", t) : this.removeAttribute("value");
815
815
  }
816
816
  }
817
- customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", F);
817
+ customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", R);
818
818
  const x = new CSSStyleSheet();
819
819
  x.replaceSync(u);
820
820
  class H extends n {
@@ -823,11 +823,11 @@ class H extends n {
823
823
  <div class="selectable-box-radio">
824
824
  <px-selectable-box>
825
825
  <slot name="media" slot="media"></slot>
826
- <px-radio-base
826
+ <px-radio
827
827
  slot="action" aria-hidden="true" tabindex="-1"
828
828
  name="${this.name}"
829
829
  value="${this.value}"
830
- ></px-radio-base>
830
+ ></px-radio>
831
831
  <slot name="icon" slot="icon"></slot>
832
832
  <slot name="logo" slot="logo"></slot>
833
833
  <slot name="title" slot="title"></slot>
@@ -839,11 +839,12 @@ class H extends n {
839
839
  `;
840
840
  }
841
841
  constructor() {
842
- var t, e;
843
- 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}`);
842
+ var t;
843
+ super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
844
844
  }
845
845
  connectedCallback() {
846
- this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
846
+ var t;
847
+ this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
847
848
  "slotchange",
848
849
  this.toggleFooterVisibility
849
850
  ), 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);
@@ -858,24 +859,24 @@ class H extends n {
858
859
  "disabled"
859
860
  ];
860
861
  }
861
- attributeChangedCallback(t, e, i) {
862
- if (e !== i)
862
+ attributeChangedCallback(t, i, e) {
863
+ if (i !== e)
863
864
  switch (t) {
864
865
  case "inverted":
865
866
  this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$radio.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$radio.removeAttribute("inverted"));
866
867
  break;
867
868
  case "name":
868
869
  case "value":
869
- this.$radio && this.$radio.setAttribute(t, i);
870
+ this.$radio && this.$radio.setAttribute(t, e);
870
871
  break;
871
872
  case "disabled":
872
- this.handleDisabledAttributeChange(i !== null);
873
+ this.handleDisabledAttributeChange(e !== null);
873
874
  break;
874
875
  case "checked":
875
- this.handleCheckedAttributeChange(i);
876
+ this.handleCheckedAttributeChange(e);
876
877
  break;
877
878
  default:
878
- super.attributeChangedCallback(t, e, i);
879
+ super.attributeChangedCallback(t, i, e);
879
880
  break;
880
881
  }
881
882
  }
@@ -908,8 +909,8 @@ class H extends n {
908
909
  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"));
909
910
  }
910
911
  handleCheckedAttributeChange(t) {
911
- var e;
912
- (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(
912
+ var i;
913
+ (i = this.internals) == null || i.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
913
914
  new Event("change", {
914
915
  bubbles: !0,
915
916
  composed: !0
@@ -930,8 +931,8 @@ class H extends n {
930
931
  }
931
932
  formData() {
932
933
  if (this.name) {
933
- const t = new FormData(), e = this.getAttribute("name");
934
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
934
+ const t = new FormData(), i = this.getAttribute("name");
935
+ return i && (this.checked ? t.set(i, this.value) : t.delete(i)), t;
935
936
  }
936
937
  }
937
938
  get $el() {
@@ -943,7 +944,7 @@ class H extends n {
943
944
  return this.shadowRoot.querySelector("px-selectable-box");
944
945
  }
945
946
  get $radio() {
946
- return this.shadowRoot.querySelector("px-radio-base");
947
+ return this.shadowRoot.querySelector("px-radio");
947
948
  }
948
949
  get $slotFooter() {
949
950
  return this.shadowRoot.querySelector(
@@ -986,7 +987,7 @@ class H extends n {
986
987
  }
987
988
  customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", H);
988
989
  export {
989
- R as SelectableBox,
990
- F as SelectableBoxCheckbox,
990
+ F as SelectableBox,
991
+ R as SelectableBoxCheckbox,
991
992
  H as SelectableBoxRadio
992
993
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-selectablebox",
3
- "version": "2.0.0-alpha.4",
3
+ "version": "2.0.0-alpha.5",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",