@proximus/lavender-selectablebox 1.0.2 → 1.0.4
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.
- package/dist/SelectableBoxRadio.d.ts +2 -2
- package/dist/index.es.js +75 -74
- package/package.json +1 -1
|
@@ -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
|
|
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():
|
|
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
|
|
3
|
-
b.replaceSync(
|
|
4
|
-
const
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
125
|
+
this.updateOverflowX(t, i, e, S);
|
|
126
126
|
break;
|
|
127
127
|
default:
|
|
128
|
-
super.attributeChangedCallback(t,
|
|
128
|
+
super.attributeChangedCallback(t, i, e);
|
|
129
129
|
break;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
updateOverflowX(t,
|
|
133
|
-
if (!m(o,
|
|
134
|
-
console.error(`${
|
|
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
|
-
|
|
140
|
-
|
|
139
|
+
i,
|
|
140
|
+
e
|
|
141
141
|
);
|
|
142
142
|
}
|
|
143
|
-
updateFlexProperties(t,
|
|
144
|
-
this.checkName(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,
|
|
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,
|
|
152
|
+
this.updateStyle(s, l, i, o), this.updateStyle(s, l, e, o);
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
|
-
updateStyle(t,
|
|
156
|
-
|
|
157
|
-
`--flex-${t}--${
|
|
158
|
-
`var(--px-spacing-${
|
|
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}--${
|
|
161
|
-
|
|
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,
|
|
375
|
-
t === "grow" && (this.style.flexGrow =
|
|
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,
|
|
558
|
-
if (
|
|
557
|
+
attributeChangedCallback(t, i, e) {
|
|
558
|
+
if (i !== e)
|
|
559
559
|
switch (t) {
|
|
560
560
|
case "background-image":
|
|
561
|
-
this.$imageContainer.setAttribute("background-image",
|
|
561
|
+
this.$imageContainer.setAttribute("background-image", e);
|
|
562
562
|
break;
|
|
563
563
|
case "gap":
|
|
564
|
-
this.$bodyVStackContainer.setAttribute("gap",
|
|
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(
|
|
569
|
+
k.indexOf(e) > 0 ? e : "none"
|
|
570
570
|
);
|
|
571
571
|
break;
|
|
572
572
|
case "padding-vertical":
|
|
573
|
-
this.handlePaddingVerticalChange(
|
|
573
|
+
this.handlePaddingVerticalChange(e);
|
|
574
574
|
break;
|
|
575
575
|
case "padding-horizontal":
|
|
576
|
-
this.handlePaddingHorizontalChange(
|
|
576
|
+
this.handlePaddingHorizontalChange(e);
|
|
577
577
|
break;
|
|
578
578
|
default:
|
|
579
|
-
super.attributeChangedCallback(t,
|
|
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
|
|
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,
|
|
624
|
-
if (
|
|
623
|
+
attributeChangedCallback(t, i, e) {
|
|
624
|
+
if (i !== e)
|
|
625
625
|
switch (t) {
|
|
626
626
|
default:
|
|
627
|
-
super.attributeChangedCallback(t,
|
|
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",
|
|
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:
|
|
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
|
|
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.
|
|
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,
|
|
692
|
-
if (
|
|
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,
|
|
699
|
+
this.$checkbox && this.$checkbox.setAttribute(t, e);
|
|
700
700
|
break;
|
|
701
701
|
case "disabled":
|
|
702
|
-
this.handleDisabledAttributeChange(
|
|
702
|
+
this.handleDisabledAttributeChange(e !== null);
|
|
703
703
|
break;
|
|
704
704
|
case "checked":
|
|
705
|
-
this.handleCheckedAttributeChange(
|
|
705
|
+
this.handleCheckedAttributeChange(e);
|
|
706
706
|
break;
|
|
707
707
|
default:
|
|
708
|
-
super.attributeChangedCallback(t,
|
|
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
|
|
742
|
-
(
|
|
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(),
|
|
764
|
-
return
|
|
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",
|
|
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
|
|
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
|
|
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
|
|
843
|
-
super(x), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.
|
|
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
|
-
|
|
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,
|
|
862
|
-
if (
|
|
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,
|
|
870
|
+
this.$radio && this.$radio.setAttribute(t, e);
|
|
870
871
|
break;
|
|
871
872
|
case "disabled":
|
|
872
|
-
this.handleDisabledAttributeChange(
|
|
873
|
+
this.handleDisabledAttributeChange(e !== null);
|
|
873
874
|
break;
|
|
874
875
|
case "checked":
|
|
875
|
-
this.handleCheckedAttributeChange(
|
|
876
|
+
this.handleCheckedAttributeChange(e);
|
|
876
877
|
break;
|
|
877
878
|
default:
|
|
878
|
-
super.attributeChangedCallback(t,
|
|
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
|
|
912
|
-
(
|
|
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(),
|
|
934
|
-
return
|
|
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
|
|
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
|
-
|
|
990
|
-
|
|
990
|
+
F as SelectableBox,
|
|
991
|
+
R as SelectableBoxCheckbox,
|
|
991
992
|
H as SelectableBoxRadio
|
|
992
993
|
};
|