@proximus/lavender-selectablebox 2.0.0-alpha.203 → 2.0.0-alpha.204
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/SelectableBox.d.ts +1 -1
- package/dist/SelectableBoxCheckbox.d.ts +1 -1
- package/dist/SelectableBoxRadio.d.ts +1 -1
- package/dist/index.es.js +142 -122
- package/package.json +1 -1
package/dist/SelectableBox.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import '@proximus/lavender-layout';
|
|
|
3
3
|
export declare const selectableBoxFooterPosition: string[];
|
|
4
4
|
export declare class SelectableBox extends WithExtraAttributes {
|
|
5
5
|
#private;
|
|
6
|
-
protected template
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
7
7
|
constructor();
|
|
8
8
|
static get observedAttributes(): string[];
|
|
9
9
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
@@ -3,8 +3,8 @@ import '@proximus/lavender-layout';
|
|
|
3
3
|
import { SelectableBox } from './SelectableBox';
|
|
4
4
|
import { type Checkbox } from '@proximus/lavender-checkbox';
|
|
5
5
|
export declare class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
protected internals: ElementInternals;
|
|
7
|
-
protected template(): string;
|
|
8
8
|
constructor();
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
static get observedAttributes(): string[];
|
|
@@ -5,8 +5,8 @@ import { type Radio } from '@proximus/lavender-radio-group';
|
|
|
5
5
|
export declare const SELECTABLE_BOX_RADIO_CONNECTED_EVENT = "px-selectable-box-radio-connected";
|
|
6
6
|
export declare const SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT = "px-selectable-box-radio-disconnected";
|
|
7
7
|
export declare class SelectableBoxRadio extends WithExtraAttributes {
|
|
8
|
+
protected static readonly template: HTMLTemplateElement;
|
|
8
9
|
protected internals: ElementInternals;
|
|
9
|
-
protected template(): string;
|
|
10
10
|
constructor();
|
|
11
11
|
connectedCallback(): void;
|
|
12
12
|
static get observedAttributes(): string[];
|
package/dist/index.es.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, booleanPropertyToAttributeSetter as r, checkName as i,
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, booleanPropertyToAttributeSetter as r, checkName as i, createTemplate as a, gapValues as o, log as s, propertyToAttributeSetter as c, renderTemplate as l } from "@proximus/lavender-common";
|
|
2
2
|
//#region ../Layout/src/Stack.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var u = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;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{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (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 (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 (width>=48rem) and (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 (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 (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (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))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", d = new CSSStyleSheet();
|
|
4
|
+
d.replaceSync(u);
|
|
5
|
+
var f = document.createElement("template");
|
|
6
|
+
f.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
|
|
7
|
+
var p = [
|
|
6
8
|
"",
|
|
7
9
|
"default",
|
|
8
10
|
"row",
|
|
9
11
|
"row-reverse",
|
|
10
12
|
"column",
|
|
11
13
|
"column-reverse"
|
|
12
|
-
],
|
|
14
|
+
], m = [
|
|
13
15
|
"",
|
|
14
16
|
"default",
|
|
15
17
|
"stretch",
|
|
@@ -19,7 +21,7 @@ var u = [
|
|
|
19
21
|
"end",
|
|
20
22
|
"center",
|
|
21
23
|
"baseline"
|
|
22
|
-
],
|
|
24
|
+
], h = [
|
|
23
25
|
"",
|
|
24
26
|
"default",
|
|
25
27
|
"flex-start",
|
|
@@ -30,25 +32,23 @@ var u = [
|
|
|
30
32
|
"space-between",
|
|
31
33
|
"space-around",
|
|
32
34
|
"space-evenly"
|
|
33
|
-
],
|
|
35
|
+
], g = [
|
|
34
36
|
"",
|
|
35
37
|
"default",
|
|
36
38
|
"nowrap",
|
|
37
39
|
"wrap",
|
|
38
40
|
"wrap-reverse"
|
|
39
|
-
],
|
|
41
|
+
], _ = [
|
|
40
42
|
"",
|
|
41
43
|
"visible",
|
|
42
44
|
"hidden",
|
|
43
45
|
"scroll",
|
|
44
46
|
"auto"
|
|
45
|
-
],
|
|
47
|
+
], v = class n extends t {
|
|
46
48
|
constructor() {
|
|
47
|
-
super(
|
|
48
|
-
}
|
|
49
|
-
connectedCallback() {
|
|
50
|
-
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");
|
|
49
|
+
super(d), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(f.content, !0));
|
|
51
50
|
}
|
|
51
|
+
connectedCallback() {}
|
|
52
52
|
static get observedAttributes() {
|
|
53
53
|
return [
|
|
54
54
|
...super.observedAttributes,
|
|
@@ -91,273 +91,293 @@ var u = [
|
|
|
91
91
|
case "gap--tablet":
|
|
92
92
|
case "gap--laptop":
|
|
93
93
|
case "gap--desktop":
|
|
94
|
-
this.updateFlexProperties(e, t, n,
|
|
94
|
+
this.updateFlexProperties(e, t, n, o);
|
|
95
95
|
break;
|
|
96
96
|
case "justify-content":
|
|
97
97
|
case "justify-content--mobile":
|
|
98
98
|
case "justify-content--tablet":
|
|
99
99
|
case "justify-content--laptop":
|
|
100
100
|
case "justify-content--desktop":
|
|
101
|
-
this.updateFlexProperties(e, t, n,
|
|
101
|
+
this.updateFlexProperties(e, t, n, h);
|
|
102
102
|
break;
|
|
103
103
|
case "align-items":
|
|
104
104
|
case "align-items--mobile":
|
|
105
105
|
case "align-items--tablet":
|
|
106
106
|
case "align-items--laptop":
|
|
107
107
|
case "align-items--desktop":
|
|
108
|
-
this.updateFlexProperties(e, t, n,
|
|
108
|
+
this.updateFlexProperties(e, t, n, m);
|
|
109
109
|
break;
|
|
110
110
|
case "wrap":
|
|
111
111
|
case "wrap--mobile":
|
|
112
112
|
case "wrap--tablet":
|
|
113
113
|
case "wrap--laptop":
|
|
114
114
|
case "wrap--desktop":
|
|
115
|
-
this.updateFlexProperties(e, t, n,
|
|
115
|
+
this.updateFlexProperties(e, t, n, g);
|
|
116
116
|
break;
|
|
117
117
|
case "direction":
|
|
118
118
|
case "direction--mobile":
|
|
119
119
|
case "direction--tablet":
|
|
120
120
|
case "direction--laptop":
|
|
121
121
|
case "direction--desktop":
|
|
122
|
-
this.updateFlexProperties(e, t, n,
|
|
122
|
+
this.updateFlexProperties(e, t, n, p);
|
|
123
123
|
break;
|
|
124
124
|
case "overflow-x":
|
|
125
125
|
case "overflow-x--mobile":
|
|
126
126
|
case "overflow-x--tablet":
|
|
127
127
|
case "overflow-x--laptop":
|
|
128
128
|
case "overflow-x--desktop":
|
|
129
|
-
this.updateOverflowX(e, t, n,
|
|
129
|
+
this.updateOverflowX(e, t, n, _);
|
|
130
130
|
break;
|
|
131
131
|
default: super.attributeChangedCallback(e, t, n);
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
updateOverflowX(e, t, n, r) {
|
|
135
135
|
if (!i(r, n)) {
|
|
136
|
-
|
|
136
|
+
s(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
137
137
|
return;
|
|
138
138
|
}
|
|
139
139
|
this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
|
|
140
140
|
}
|
|
141
|
-
updateFlexProperties(e, t,
|
|
142
|
-
this.checkName(
|
|
143
|
-
let
|
|
144
|
-
if (
|
|
145
|
-
this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
|
|
146
|
-
});
|
|
141
|
+
updateFlexProperties(e, t, r, i) {
|
|
142
|
+
r !== null && !this.checkName(i, r) && s(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
143
|
+
let a = e.indexOf("--");
|
|
144
|
+
if (a === -1) for (let t of n.breakpoints) this.getAttribute(`${e}--${t}`) || this.updateStyle(e, t, r, i);
|
|
147
145
|
else {
|
|
148
|
-
let
|
|
149
|
-
this.updateStyle(
|
|
146
|
+
let t = e.slice(0, a), n = e.slice(a + 2);
|
|
147
|
+
this.updateStyle(t, n, r || this.getAttribute(t), i);
|
|
150
148
|
}
|
|
151
149
|
}
|
|
152
150
|
updateStyle(e, t, n, r) {
|
|
153
|
-
|
|
151
|
+
let i = `--flex-${e}--${t}-value`, a = e === "gap";
|
|
152
|
+
if (!n) {
|
|
153
|
+
this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
if (a && r && r.includes(n)) {
|
|
157
|
+
let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
|
|
158
|
+
this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
|
|
159
|
+
} else this.$el.style.setProperty(i, n);
|
|
160
|
+
}
|
|
161
|
+
static {
|
|
162
|
+
this.breakpoints = [
|
|
163
|
+
"mobile",
|
|
164
|
+
"tablet",
|
|
165
|
+
"laptop",
|
|
166
|
+
"desktop"
|
|
167
|
+
];
|
|
154
168
|
}
|
|
155
169
|
get direction() {
|
|
156
|
-
return this.getAttribute("direction");
|
|
170
|
+
return this.getAttribute("direction") ?? "row";
|
|
157
171
|
}
|
|
158
172
|
set direction(e) {
|
|
159
|
-
|
|
173
|
+
c(this, "direction", e);
|
|
160
174
|
}
|
|
161
175
|
get directionMobile() {
|
|
162
176
|
return this.getAttribute("direction--mobile");
|
|
163
177
|
}
|
|
164
178
|
set directionMobile(e) {
|
|
165
|
-
|
|
179
|
+
c(this, "direction--mobile", e);
|
|
166
180
|
}
|
|
167
181
|
get directionTablet() {
|
|
168
182
|
return this.getAttribute("direction--tablet");
|
|
169
183
|
}
|
|
170
184
|
set directionTablet(e) {
|
|
171
|
-
|
|
185
|
+
c(this, "direction--tablet", e);
|
|
172
186
|
}
|
|
173
187
|
get directionLaptop() {
|
|
174
188
|
return this.getAttribute("direction--laptop");
|
|
175
189
|
}
|
|
176
190
|
set directionLaptop(e) {
|
|
177
|
-
|
|
191
|
+
c(this, "direction--laptop", e);
|
|
178
192
|
}
|
|
179
193
|
get directionDesktop() {
|
|
180
194
|
return this.getAttribute("direction--desktop");
|
|
181
195
|
}
|
|
182
196
|
set directionDesktop(e) {
|
|
183
|
-
|
|
197
|
+
c(this, "direction--desktop", e);
|
|
184
198
|
}
|
|
185
199
|
get gap() {
|
|
186
|
-
return this.getAttribute("gap");
|
|
200
|
+
return this.getAttribute("gap") ?? "none";
|
|
187
201
|
}
|
|
188
202
|
set gap(e) {
|
|
189
|
-
|
|
203
|
+
c(this, "gap", e);
|
|
190
204
|
}
|
|
191
205
|
get gapMobile() {
|
|
192
206
|
return this.getAttribute("gap--mobile");
|
|
193
207
|
}
|
|
194
208
|
set gapMobile(e) {
|
|
195
|
-
|
|
209
|
+
c(this, "gap--mobile", e);
|
|
196
210
|
}
|
|
197
211
|
get gapTablet() {
|
|
198
212
|
return this.getAttribute("gap--tablet");
|
|
199
213
|
}
|
|
200
214
|
set gapTablet(e) {
|
|
201
|
-
|
|
215
|
+
c(this, "gap--tablet", e);
|
|
202
216
|
}
|
|
203
217
|
get gapLaptop() {
|
|
204
218
|
return this.getAttribute("gap--laptop");
|
|
205
219
|
}
|
|
206
220
|
set gapLaptop(e) {
|
|
207
|
-
|
|
221
|
+
c(this, "gap--laptop", e);
|
|
208
222
|
}
|
|
209
223
|
get gapDesktop() {
|
|
210
224
|
return this.getAttribute("gap--desktop");
|
|
211
225
|
}
|
|
212
226
|
set gapDesktop(e) {
|
|
213
|
-
|
|
227
|
+
c(this, "gap--desktop", e);
|
|
214
228
|
}
|
|
215
229
|
get justifyContent() {
|
|
216
|
-
return this.getAttribute("justify-content");
|
|
230
|
+
return this.getAttribute("justify-content") ?? "flex-start";
|
|
217
231
|
}
|
|
218
232
|
set justifyContent(e) {
|
|
219
|
-
|
|
233
|
+
c(this, "justify-content", e);
|
|
220
234
|
}
|
|
221
235
|
get justifyContentMobile() {
|
|
222
236
|
return this.getAttribute("justify-content--mobile");
|
|
223
237
|
}
|
|
224
238
|
set justifyContentMobile(e) {
|
|
225
|
-
|
|
239
|
+
c(this, "justify-content--mobile", e);
|
|
226
240
|
}
|
|
227
241
|
get justifyContentTablet() {
|
|
228
242
|
return this.getAttribute("justify-content--tablet");
|
|
229
243
|
}
|
|
230
244
|
set justifyContentTablet(e) {
|
|
231
|
-
|
|
245
|
+
c(this, "justify-content--tablet", e);
|
|
232
246
|
}
|
|
233
247
|
get justifyContentLaptop() {
|
|
234
248
|
return this.getAttribute("justify-content--laptop");
|
|
235
249
|
}
|
|
236
250
|
set justifyContentLaptop(e) {
|
|
237
|
-
|
|
251
|
+
c(this, "justify-content--laptop", e);
|
|
238
252
|
}
|
|
239
253
|
get justifyContentDesktop() {
|
|
240
254
|
return this.getAttribute("justify-content--desktop");
|
|
241
255
|
}
|
|
242
256
|
set justifyContentDesktop(e) {
|
|
243
|
-
|
|
257
|
+
c(this, "justify-content--desktop", e);
|
|
244
258
|
}
|
|
245
259
|
get alignItems() {
|
|
246
|
-
return this.getAttribute("align-items");
|
|
260
|
+
return this.getAttribute("align-items") ?? "stretch";
|
|
247
261
|
}
|
|
248
262
|
set alignItems(e) {
|
|
249
|
-
|
|
263
|
+
c(this, "align-items", e);
|
|
250
264
|
}
|
|
251
265
|
get alignItemsMobile() {
|
|
252
266
|
return this.getAttribute("align-items--mobile");
|
|
253
267
|
}
|
|
254
268
|
set alignItemsMobile(e) {
|
|
255
|
-
|
|
269
|
+
c(this, "align-items--mobile", e);
|
|
256
270
|
}
|
|
257
271
|
get alignItemsTablet() {
|
|
258
272
|
return this.getAttribute("align-items--tablet");
|
|
259
273
|
}
|
|
260
274
|
set alignItemsTablet(e) {
|
|
261
|
-
|
|
275
|
+
c(this, "align-items--tablet", e);
|
|
262
276
|
}
|
|
263
277
|
get alignItemsLaptop() {
|
|
264
278
|
return this.getAttribute("align-items--laptop");
|
|
265
279
|
}
|
|
266
280
|
set alignItemsLaptop(e) {
|
|
267
|
-
|
|
281
|
+
c(this, "align-items--laptop", e);
|
|
268
282
|
}
|
|
269
283
|
get alignItemsDesktop() {
|
|
270
284
|
return this.getAttribute("align-items--desktop");
|
|
271
285
|
}
|
|
272
286
|
set alignItemsDesktop(e) {
|
|
273
|
-
|
|
287
|
+
c(this, "align-items--desktop", e);
|
|
274
288
|
}
|
|
275
289
|
get wrap() {
|
|
276
|
-
return this.getAttribute("wrap");
|
|
290
|
+
return this.getAttribute("wrap") ?? "nowrap";
|
|
277
291
|
}
|
|
278
292
|
set wrap(e) {
|
|
279
|
-
|
|
293
|
+
c(this, "wrap", e);
|
|
280
294
|
}
|
|
281
295
|
get wrapMobile() {
|
|
282
296
|
return this.getAttribute("wrap--mobile");
|
|
283
297
|
}
|
|
284
298
|
set wrapMobile(e) {
|
|
285
|
-
|
|
299
|
+
c(this, "wrap--mobile", e);
|
|
286
300
|
}
|
|
287
301
|
get wrapTablet() {
|
|
288
302
|
return this.getAttribute("wrap--tablet");
|
|
289
303
|
}
|
|
290
304
|
set wrapTablet(e) {
|
|
291
|
-
|
|
305
|
+
c(this, "wrap--tablet", e);
|
|
292
306
|
}
|
|
293
307
|
get wrapLaptop() {
|
|
294
308
|
return this.getAttribute("wrap--laptop");
|
|
295
309
|
}
|
|
296
310
|
set wrapLaptop(e) {
|
|
297
|
-
|
|
311
|
+
c(this, "wrap--laptop", e);
|
|
298
312
|
}
|
|
299
313
|
get wrapDesktop() {
|
|
300
314
|
return this.getAttribute("wrap--desktop");
|
|
301
315
|
}
|
|
302
316
|
set wrapDesktop(e) {
|
|
303
|
-
|
|
317
|
+
c(this, "wrap--desktop", e);
|
|
304
318
|
}
|
|
305
319
|
get overflowX() {
|
|
306
|
-
return this.getAttribute("overflow-x");
|
|
320
|
+
return this.getAttribute("overflow-x") ?? "visible";
|
|
307
321
|
}
|
|
308
322
|
set overflowX(e) {
|
|
309
|
-
|
|
323
|
+
c(this, "overflow-x", e);
|
|
310
324
|
}
|
|
311
325
|
get overflowXMobile() {
|
|
312
326
|
return this.getAttribute("overflow-x--mobile");
|
|
313
327
|
}
|
|
314
328
|
set overflowXMobile(e) {
|
|
315
|
-
|
|
329
|
+
c(this, "overflow-x--mobile", e);
|
|
316
330
|
}
|
|
317
331
|
get overflowXTablet() {
|
|
318
332
|
return this.getAttribute("overflow-x--tablet");
|
|
319
333
|
}
|
|
320
334
|
set overflowXTablet(e) {
|
|
321
|
-
|
|
335
|
+
c(this, "overflow-x--tablet", e);
|
|
322
336
|
}
|
|
323
337
|
get overflowXLaptop() {
|
|
324
338
|
return this.getAttribute("overflow-x--laptop");
|
|
325
339
|
}
|
|
326
340
|
set overflowXLaptop(e) {
|
|
327
|
-
|
|
341
|
+
c(this, "overflow-x--laptop", e);
|
|
328
342
|
}
|
|
329
343
|
get overflowXDesktop() {
|
|
330
344
|
return this.getAttribute("overflow-x--desktop");
|
|
331
345
|
}
|
|
332
346
|
set overflowXDesktop(e) {
|
|
333
|
-
|
|
347
|
+
c(this, "overflow-x--desktop", e);
|
|
334
348
|
}
|
|
335
349
|
get $el() {
|
|
336
|
-
return this.shadowRoot.
|
|
350
|
+
return this.shadowRoot.firstElementChild;
|
|
337
351
|
}
|
|
338
352
|
};
|
|
339
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
340
|
-
var
|
|
341
|
-
|
|
342
|
-
|
|
353
|
+
customElements.get("px-stack") || customElements.define("px-stack", v);
|
|
354
|
+
var y = (e) => e === "direction" || e.startsWith("direction--"), b = class extends v {
|
|
355
|
+
get direction() {
|
|
356
|
+
return "column";
|
|
343
357
|
}
|
|
344
|
-
|
|
345
|
-
|
|
358
|
+
set direction(e) {
|
|
359
|
+
c(this, "direction", e);
|
|
360
|
+
}
|
|
361
|
+
attributeChangedCallback(e, t, n) {
|
|
362
|
+
y(e) || super.attributeChangedCallback(e, t, n);
|
|
346
363
|
}
|
|
347
364
|
};
|
|
348
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
349
|
-
var
|
|
350
|
-
|
|
351
|
-
|
|
365
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", b);
|
|
366
|
+
var x = class extends v {
|
|
367
|
+
get direction() {
|
|
368
|
+
return "row";
|
|
352
369
|
}
|
|
353
|
-
|
|
354
|
-
|
|
370
|
+
set direction(e) {
|
|
371
|
+
c(this, "direction", e);
|
|
372
|
+
}
|
|
373
|
+
attributeChangedCallback(e, t, n) {
|
|
374
|
+
y(e) || super.attributeChangedCallback(e, t, n);
|
|
355
375
|
}
|
|
356
376
|
};
|
|
357
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
377
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", x);
|
|
358
378
|
//#endregion
|
|
359
379
|
//#region ../Layout/src/Spacer.ts
|
|
360
|
-
var
|
|
380
|
+
var S = class extends HTMLElement {
|
|
361
381
|
constructor() {
|
|
362
382
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
363
383
|
}
|
|
@@ -403,14 +423,14 @@ var v = class extends HTMLElement {
|
|
|
403
423
|
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
404
424
|
}
|
|
405
425
|
};
|
|
406
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
426
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", S);
|
|
407
427
|
//#endregion
|
|
408
428
|
//#region ../Layout/src/Page.css?inline
|
|
409
|
-
var
|
|
410
|
-
|
|
411
|
-
var
|
|
429
|
+
var C = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", w = new CSSStyleSheet();
|
|
430
|
+
w.replaceSync(C);
|
|
431
|
+
var T = class extends t {
|
|
412
432
|
constructor() {
|
|
413
|
-
super(
|
|
433
|
+
super(w), this.template = () => `
|
|
414
434
|
<px-container border-radius="none" padding="none">
|
|
415
435
|
<px-vstack>
|
|
416
436
|
<px-container id="header-container" border-radius="none">
|
|
@@ -503,7 +523,7 @@ var x = class extends t {
|
|
|
503
523
|
</px-container>
|
|
504
524
|
</px-vstack>
|
|
505
525
|
</px-container>
|
|
506
|
-
`, this.shadowRoot
|
|
526
|
+
`, l(this.shadowRoot, this.template());
|
|
507
527
|
}
|
|
508
528
|
static get observedAttributes() {
|
|
509
529
|
return [
|
|
@@ -590,21 +610,21 @@ var x = class extends t {
|
|
|
590
610
|
this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
|
|
591
611
|
}
|
|
592
612
|
};
|
|
593
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
613
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", T);
|
|
594
614
|
//#endregion
|
|
595
615
|
//#region src/selectable-box.css?inline
|
|
596
|
-
var
|
|
597
|
-
|
|
598
|
-
var
|
|
616
|
+
var E = ":host{font-family:var(--px-font-family);font-size:var(--px-font-size-base);display:block}:host *{box-sizing:border-box}.selectable-box{flex-direction:column;height:100%;display:flex}::slotted([slot=media]){width:100%;height:auto}.info{flex-grow:1;display:flex}.info .info__body{gap:var(--px-spacing-default-mobile);padding:var(--px-padding-s-mobile);flex-direction:column;flex:7 1 0;display:flex}.info .info__body .header{align-items:center;gap:var(--px-spacing-s-mobile);display:flex}.info .info__body .header ::slotted([slot=action]),.info .info__body .header ::slotted([slot=icon]),.info .info__body .header ::slotted([slot=logo]){flex-shrink:0}.info .info__body .header .titles{gap:var(--px-spacing-xs-mobile);flex-direction:column;display:flex}.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{padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center;flex:3 1 0;align-items:center;display:flex}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}:host([footer-position=bottom]) .info{flex-direction:column}:host([footer-position=bottom]) .info__body{flex-basis:auto}:host([footer-position=bottom]) .info__footer{flex:none;justify-content:center}:host([footer-position=right]) .info{flex-direction:row}:host([footer-position=right]) .info__body{flex:7 1 0}:host([footer-position=right]) .info__footer{flex:3 1 0;align-items:center;display:flex}@media screen and (width>=48rem){.info{flex-direction:column}.info .info__body{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-s-tablet);flex-basis:auto}.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]),.info .info__body .header .titles ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{padding:var(--px-padding-s-tablet);flex:none;justify-content:center}}@media screen and (width>=64.0625rem){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-s-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]),.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 screen and (width>=90.0625rem){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-s-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]),.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)}", D = new CSSStyleSheet();
|
|
617
|
+
D.replaceSync(E);
|
|
618
|
+
var O = [
|
|
599
619
|
"",
|
|
600
620
|
"right",
|
|
601
621
|
"bottom"
|
|
602
|
-
],
|
|
603
|
-
|
|
604
|
-
|
|
622
|
+
], k = class e extends t {
|
|
623
|
+
static {
|
|
624
|
+
this.template = a("<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>");
|
|
605
625
|
}
|
|
606
626
|
constructor() {
|
|
607
|
-
super(
|
|
627
|
+
super(D), l(this.shadowRoot, e.template);
|
|
608
628
|
}
|
|
609
629
|
static get observedAttributes() {
|
|
610
630
|
return [
|
|
@@ -617,14 +637,14 @@ var w = [
|
|
|
617
637
|
attributeChangedCallback(e, t, n) {
|
|
618
638
|
if (t !== n) switch (e) {
|
|
619
639
|
case "footer-position":
|
|
620
|
-
this.#e(n,
|
|
640
|
+
this.#e(n, O);
|
|
621
641
|
break;
|
|
622
642
|
default: super.attributeChangedCallback(e, t, n);
|
|
623
643
|
}
|
|
624
644
|
}
|
|
625
645
|
#e(e, t) {
|
|
626
646
|
if (!i(t, e)) {
|
|
627
|
-
|
|
647
|
+
s(`
|
|
628
648
|
"${e}" is not a valid footer-position value for ${this.tagName.toLowerCase()}.
|
|
629
649
|
Allowed values are: "${t.join("\", \"")}".
|
|
630
650
|
`);
|
|
@@ -653,11 +673,11 @@ var w = [
|
|
|
653
673
|
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
654
674
|
}
|
|
655
675
|
};
|
|
656
|
-
customElements.get("px-selectable-box") || customElements.define("px-selectable-box",
|
|
676
|
+
customElements.get("px-selectable-box") || customElements.define("px-selectable-box", k);
|
|
657
677
|
//#endregion
|
|
658
678
|
//#region src/clickEventGuards.ts
|
|
659
|
-
var
|
|
660
|
-
function
|
|
679
|
+
var A = ["px-a", "px-button"];
|
|
680
|
+
function j(e, t, n = A) {
|
|
661
681
|
let r = new Set(n), i = e.composedPath();
|
|
662
682
|
for (let e of i) {
|
|
663
683
|
if (e === t) break;
|
|
@@ -667,14 +687,14 @@ function D(e, t, n = E) {
|
|
|
667
687
|
}
|
|
668
688
|
//#endregion
|
|
669
689
|
//#region src/common.css?inline
|
|
670
|
-
var
|
|
671
|
-
|
|
672
|
-
var
|
|
673
|
-
|
|
674
|
-
|
|
690
|
+
var M = ":host{outline:none;display:block}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;cursor:pointer;border-radius:var(--px-radius-main);--btn-transition:all .2s ease-in-out 0s;height:100%;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);overflow:hidden}:is(.selectable-box-checkbox,.selectable-box-radio) px-selectable-box{background-color:var(--px-color-background-container-light-default);height:100%}:host([parent-has-anchor-full]) :is(.selectable-box-checkbox,.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)}:is(:host(:not([disabled])):host(:hover) .selectable-box-checkbox,: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:#0000}:is(:host([disabled]) .selectable-box-checkbox,: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 (width>=48rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media screen and (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)}:is(:host([inverted]) .selectable-box-checkbox,: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)}:is(:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,: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:#0000}:is(:host([inverted]):host([disabled]) .selectable-box-checkbox,: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)}", N = new CSSStyleSheet();
|
|
691
|
+
N.replaceSync(M);
|
|
692
|
+
var P = class e extends t {
|
|
693
|
+
static {
|
|
694
|
+
this.template = a("<div class=\"selectable-box-checkbox\"><px-selectable-box><slot name=\"media\" slot=\"media\"></slot><px-checkbox \n slot=\"action\" inert \n ></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>");
|
|
675
695
|
}
|
|
676
696
|
constructor() {
|
|
677
|
-
super(
|
|
697
|
+
super(N), l(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
678
698
|
}
|
|
679
699
|
connectedCallback() {
|
|
680
700
|
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "checkbox", this.internals && (this.internals.role = "checkbox"), this.tabIndex = 0, this.ariaChecked = `${this.checked}`, 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);
|
|
@@ -724,7 +744,7 @@ var A = class extends t {
|
|
|
724
744
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
725
745
|
}
|
|
726
746
|
setClickEvent(e) {
|
|
727
|
-
|
|
747
|
+
j(e, this) || (this.checked = !this.checked, e.stopPropagation(), e.preventDefault());
|
|
728
748
|
}
|
|
729
749
|
toggleFooterVisibility() {
|
|
730
750
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -786,7 +806,7 @@ var A = class extends t {
|
|
|
786
806
|
return this.getAttribute("name");
|
|
787
807
|
}
|
|
788
808
|
set name(e) {
|
|
789
|
-
|
|
809
|
+
c(this, "name", e);
|
|
790
810
|
}
|
|
791
811
|
get disabled() {
|
|
792
812
|
return this.hasAttribute("disabled");
|
|
@@ -798,7 +818,7 @@ var A = class extends t {
|
|
|
798
818
|
return this.getAttribute("value");
|
|
799
819
|
}
|
|
800
820
|
set value(e) {
|
|
801
|
-
|
|
821
|
+
c(this, "value", e);
|
|
802
822
|
}
|
|
803
823
|
get footerPosition() {
|
|
804
824
|
return this.getAttribute("footer-position") ?? "";
|
|
@@ -807,20 +827,20 @@ var A = class extends t {
|
|
|
807
827
|
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
808
828
|
}
|
|
809
829
|
};
|
|
810
|
-
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox",
|
|
830
|
+
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", P);
|
|
811
831
|
//#endregion
|
|
812
832
|
//#region src/SelectableBoxRadio.ts
|
|
813
|
-
var
|
|
814
|
-
|
|
815
|
-
var
|
|
816
|
-
|
|
817
|
-
|
|
833
|
+
var F = new CSSStyleSheet();
|
|
834
|
+
F.replaceSync(M);
|
|
835
|
+
var I = "px-selectable-box-radio-connected", L = "px-selectable-box-radio-disconnected", R = class e extends t {
|
|
836
|
+
static {
|
|
837
|
+
this.template = a("<div class=\"selectable-box-radio\"><px-selectable-box><slot name=\"media\" slot=\"media\"></slot><px-radio \n slot=\"action\" inert \n ></px-radio><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>");
|
|
818
838
|
}
|
|
819
839
|
constructor() {
|
|
820
|
-
super(
|
|
840
|
+
super(F), l(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
821
841
|
}
|
|
822
842
|
connectedCallback() {
|
|
823
|
-
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(
|
|
843
|
+
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.dispatchEvent(new CustomEvent(I, {
|
|
824
844
|
bubbles: !0,
|
|
825
845
|
composed: !0
|
|
826
846
|
})), this.ariaChecked = `${this.checked}`, this.toggleFooterVisibility(), this.$slotFooter.addEventListener("slotchange", this.toggleFooterVisibility), this.$radio.addEventListener("change", this.stopInternalRadioChange), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent);
|
|
@@ -858,7 +878,7 @@ var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-discon
|
|
|
858
878
|
}
|
|
859
879
|
}
|
|
860
880
|
disconnectedCallback() {
|
|
861
|
-
this.$slotFooter.removeEventListener("slotchange", this.toggleFooterVisibility), this.$radio.removeEventListener("change", this.stopInternalRadioChange), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent), this.dispatchEvent(new CustomEvent(
|
|
881
|
+
this.$slotFooter.removeEventListener("slotchange", this.toggleFooterVisibility), this.$radio.removeEventListener("change", this.stopInternalRadioChange), this.removeEventListener("mouseover", this.setHoverAttribute), this.removeEventListener("mouseout", this.removeHoverAttribute), this.removeEventListener("keypress", this.setKeypressEvent), this.removeEventListener("click", this.setClickEvent), this.dispatchEvent(new CustomEvent(L, {
|
|
862
882
|
bubbles: !0,
|
|
863
883
|
composed: !0
|
|
864
884
|
}));
|
|
@@ -876,7 +896,7 @@ var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-discon
|
|
|
876
896
|
e.preventDefault(), e.code === "Space" && this.click();
|
|
877
897
|
}
|
|
878
898
|
setClickEvent(e) {
|
|
879
|
-
|
|
899
|
+
j(e, this) || (this.checked ||= !0, e.stopPropagation(), e.preventDefault());
|
|
880
900
|
}
|
|
881
901
|
toggleFooterVisibility() {
|
|
882
902
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
@@ -938,7 +958,7 @@ var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-discon
|
|
|
938
958
|
return this.getAttribute("name");
|
|
939
959
|
}
|
|
940
960
|
set name(e) {
|
|
941
|
-
|
|
961
|
+
c(this, "name", e);
|
|
942
962
|
}
|
|
943
963
|
get disabled() {
|
|
944
964
|
return this.hasAttribute("disabled");
|
|
@@ -950,7 +970,7 @@ var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-discon
|
|
|
950
970
|
return this.getAttribute("value");
|
|
951
971
|
}
|
|
952
972
|
set value(e) {
|
|
953
|
-
|
|
973
|
+
c(this, "value", e);
|
|
954
974
|
}
|
|
955
975
|
get footerPosition() {
|
|
956
976
|
return this.getAttribute("footer-position") ?? "";
|
|
@@ -959,6 +979,6 @@ var M = "px-selectable-box-radio-connected", N = "px-selectable-box-radio-discon
|
|
|
959
979
|
e ? this.setAttribute("footer-position", e) : this.removeAttribute("footer-position");
|
|
960
980
|
}
|
|
961
981
|
};
|
|
962
|
-
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio",
|
|
982
|
+
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", R);
|
|
963
983
|
//#endregion
|
|
964
|
-
export {
|
|
984
|
+
export { I as SELECTABLE_BOX_RADIO_CONNECTED_EVENT, L as SELECTABLE_BOX_RADIO_DISCONNECTED_EVENT, k as SelectableBox, P as SelectableBoxCheckbox, R as SelectableBoxRadio, O as selectableBoxFooterPosition };
|