@proximus/lavender-cell 2.0.0-alpha.19 → 2.0.0-alpha.190

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 (8) hide show
  1. package/dist/Cell.d.ts +24 -24
  2. package/dist/CellButton.d.ts +31 -24
  3. package/dist/CellCheckbox.d.ts +33 -33
  4. package/dist/CellLink.d.ts +26 -26
  5. package/dist/CellRadio.d.ts +31 -31
  6. package/dist/CellSwitch.d.ts +31 -31
  7. package/dist/index.es.js +1409 -1538
  8. package/package.json +2 -2
package/dist/index.es.js CHANGED
@@ -1,1550 +1,1421 @@
1
- import { checkName as p, log as l, PxElement as m, WithExtraAttributes as A } from "@proximus/lavender-common";
1
+ import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSetter as n, checkName as r, log as i, propertyToAttributeSetter as a } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-layout";
3
- import { checkboxStateValues as q } from "@proximus/lavender-checkbox";
4
- import { stateValues as M } from "@proximus/lavender-radio-group";
5
- const R = ["", "default", "naked", "contained"], z = [
6
- "",
7
- "container-light",
8
- "container-default"
3
+ import { checkboxStateValues as o } from "@proximus/lavender-checkbox";
4
+ import { stateValues as s } from "@proximus/lavender-radio-group";
5
+ //#region src/Common.ts
6
+ var c = [
7
+ "",
8
+ "default",
9
+ "naked",
10
+ "contained"
11
+ ], l = [
12
+ "",
13
+ "container-light",
14
+ "container-default"
9
15
  ];
10
- function c(r) {
11
- r.hasAttribute("width") || r.setAttribute("width", "s"), r.setAttribute("border-radius", "pill");
16
+ function u(e) {
17
+ e.hasAttribute("width") || e.setAttribute("width", "s"), e.setAttribute("border-radius", "pill");
12
18
  }
13
- function d(r) {
14
- r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
19
+ function d(e) {
20
+ e.getAttribute("variant") === "contained" && !e.getAttribute("background-color") && e.setAttribute("background-color", "container-light");
15
21
  }
16
- function P(r, t, e) {
17
- if (!p(R, e)) {
18
- l(`${e} is not an allowed variant value.`);
19
- return;
20
- }
21
- t !== null && t !== "" && t !== "default" && r.classList.toggle(t), e !== null && e !== "" && e !== "default" && r.classList.toggle(e);
22
+ function f(e, t, n) {
23
+ if (!r(c, n)) {
24
+ i(`"${n}" is not a valid variant value for a cell. Allowed values are: "${c.join("\", \"")}".`);
25
+ return;
26
+ }
27
+ t !== null && t !== "" && t !== "default" && e.classList.toggle(t), n !== null && n !== "" && n !== "default" && e.classList.toggle(n);
22
28
  }
23
- function u(r, t, e, s = []) {
24
- e ? (r.setAttribute("inverted", ""), s.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
25
- i.hasAttribute("inverted") || i.setAttribute("inverted", "");
26
- })) : (r.removeAttribute("inverted"), s.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
27
- i.hasAttribute("inverted") && i.removeAttribute("inverted");
28
- }));
29
+ function p(e, t, n, r = []) {
30
+ n ? (e.setAttribute("inverted", ""), r.forEach((e) => e.setAttribute("inverted", "")), t.forEach((e) => {
31
+ e.hasAttribute("inverted") || e.setAttribute("inverted", "");
32
+ })) : (e.removeAttribute("inverted"), r.forEach((e) => e.removeAttribute("inverted")), t.forEach((e) => {
33
+ e.hasAttribute("inverted") && e.removeAttribute("inverted");
34
+ }));
29
35
  }
30
- function B(r, t, e, s, i) {
31
- if (!p(i, s)) {
32
- l(
33
- `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
34
- );
35
- return;
36
- }
37
- const a = (o) => {
38
- o !== null && o !== "" && o !== "default" && (r.style.setProperty(
39
- "--cell-contained-background-color-default",
40
- `var(--px-color-background-${o}-default)`
41
- ), r.style.setProperty(
42
- "--cell-contained-background-color-inverted",
43
- `var(--px-color-background-${o}-inverted)`
44
- ));
45
- };
46
- a(e), a(s);
36
+ function m(e, t, n, a, o) {
37
+ if (!r(o, a)) {
38
+ i(`"${a}" is not a valid ${t} value for a cell. Allowed values are: "${o.join("\", \"")}".`);
39
+ return;
40
+ }
41
+ let s = (t) => {
42
+ t !== null && t !== "" && t !== "default" && (e.style.setProperty("--cell-contained-background-color-default", `var(--px-color-background-${t}-default)`), e.style.setProperty("--cell-contained-background-color-inverted", `var(--px-color-background-${t}-inverted)`));
43
+ };
44
+ s(n), s(a);
47
45
  }
48
- function $(r, t, e, s = [], i = {}) {
49
- e ? (r.setAttribute("disabled", ""), s.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
50
- a.hasAttribute("disabled") || a.setAttribute("disabled", "");
51
- }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (r.removeAttribute("disabled"), s.forEach((a) => a.removeAttribute("disabled")), t.forEach((a) => {
52
- a.hasAttribute("disabled") && a.removeAttribute("disabled");
53
- }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
46
+ function h(e, t, n, r = [], i = {}) {
47
+ n ? (e.setAttribute("disabled", ""), r.forEach((e) => e.setAttribute("disabled", "")), t.forEach((e) => {
48
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
49
+ }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (e.removeAttribute("disabled"), r.forEach((e) => e.removeAttribute("disabled")), t.forEach((e) => {
50
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
51
+ }), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
54
52
  }
55
- const n = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", H = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', C = new CSSStyleSheet(), S = new CSSStyleSheet();
56
- C.replaceSync(n);
57
- S.replaceSync(H);
58
- const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class x extends m {
59
- template() {
60
- return `
61
- <px-hstack gap="s" justify-content="space-between" align-items="center">
62
- <px-hstack gap="s" align-items="center">
63
- <slot name="prefix"></slot>
64
- <slot name="visual"></slot>
65
- <px-vstack gap="2xs">
66
- <slot name="label"></slot>
67
- <slot name="description"></slot>
68
- </px-vstack>
69
- </px-hstack>
70
- <px-hstack gap="s" align-items="center" class="cell-layout__suffix-action-container">
71
- <px-stack direction="column" gap="2xs" align-items="flex-end" class="cell__suffix-container">
72
- <slot name="suffix"></slot>
73
- </px-stack>
74
- <slot name="action-indicator"></slot>
75
- </px-hstack>
76
- </px-hstack>
77
- `;
78
- }
79
- constructor() {
80
- super(S, C);
81
- const t = document.createElement("div");
82
- t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
83
- }
84
- connectedCallback() {
85
- if (this.$slotVisual) {
86
- const t = this.querySelector('px-img[slot="visual"]');
87
- t && c(t);
88
- }
89
- if (this.$slotSuffix) {
90
- const t = this.querySelectorAll(
91
- 'px-button-icon[slot="suffix"]'
92
- ), e = t.length > 0, s = t.length > 1;
93
- e && t.forEach((i) => {
94
- this.configureSlotSuffixButtonIcon(i);
95
- }), s && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
96
- }
97
- d(this);
98
- }
99
- static get observedAttributes() {
100
- return [
101
- ...super.observedAttributes,
102
- "inverted",
103
- "variant",
104
- "disabled",
105
- "separator",
106
- "separator--mobile",
107
- "separator--tablet",
108
- "separator--laptop",
109
- "separator--desktop",
110
- "radius",
111
- "radius--mobile",
112
- "radius--tablet",
113
- "radius--laptop",
114
- "radius--desktop",
115
- "background-color",
116
- "compact"
117
- ];
118
- }
119
- attributeChangedCallback(t, e, s) {
120
- if (e !== s)
121
- switch (t) {
122
- case "variant":
123
- P(this.$el, e, s);
124
- break;
125
- case "inverted":
126
- for (let i = 0; i < this.$children.length; i++)
127
- this.$children[i].hasAttribute("inverted") ? this.$children[i].removeAttribute("inverted") : this.$children[i].setAttribute("inverted", "");
128
- break;
129
- case "radius":
130
- case "radius--mobile":
131
- case "radius--tablet":
132
- case "radius--laptop":
133
- case "radius--desktop":
134
- this.updateRadius(t, e, s, _);
135
- break;
136
- case "background-color":
137
- B(
138
- this.$el,
139
- t,
140
- e,
141
- s,
142
- z
143
- );
144
- break;
145
- default:
146
- super.attributeChangedCallback(t, e, s);
147
- break;
148
- }
149
- }
150
- configureSlotSuffixButtonIcon(t) {
151
- t.hasAttribute("variant") && p(
152
- F,
153
- t.getAttribute("variant")
154
- ) || t.setAttribute("variant", "secondary");
155
- }
156
- updateRadius(t, e, s, i) {
157
- if (!p(i, s)) {
158
- l(
159
- `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
160
- );
161
- return;
162
- }
163
- const a = t.includes("--"), o = [];
164
- if (!a)
165
- this.separatorMobile || o.push("mobile"), this.separatorTablet || o.push("tablet"), this.separatorLaptop || o.push("laptop"), this.separatorDesktop || o.push("desktop");
166
- else {
167
- const b = t.split("--")[1];
168
- o.push(b);
169
- }
170
- o.forEach((b) => {
171
- e !== null && e !== "" && e !== "default" && this.updateStyle(b, e), s !== null && s !== "" && s !== "default" && this.updateStyle(b, s);
172
- });
173
- }
174
- updateStyle(t, e) {
175
- let s = [];
176
- e === "top" ? s = ["bottom-right", "bottom-left"] : e === "bottom" ? s = ["top-right", "top-left"] : e === "none" && (s = ["top-right", "bottom-right", "bottom-left", "top-left"]), s.forEach((i) => {
177
- this.$el.style.setProperty(
178
- `--cell-contained-border-radius-${i}--${t}`,
179
- "0"
180
- );
181
- });
182
- }
183
- get $children() {
184
- return this.querySelectorAll("px-cell > *");
185
- }
186
- get $slotVisual() {
187
- return this.querySelector('[slot="visual"]');
188
- }
189
- get $slotSuffix() {
190
- return this.querySelector('[slot="suffix"]');
191
- }
192
- get $suffixContainer() {
193
- return this.shadowRoot.querySelector(".cell__suffix-container");
194
- }
195
- get inverted() {
196
- return this.hasAttribute("inverted");
197
- }
198
- set inverted(t) {
199
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
200
- }
201
- get variant() {
202
- return this.getAttribute("variant");
203
- }
204
- set variant(t) {
205
- this.setAttribute("variant", t);
206
- }
207
- get disabled() {
208
- return this.hasAttribute("disabled");
209
- }
210
- set disabled(t) {
211
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
212
- }
213
- get separator() {
214
- return this.getAttribute("separator");
215
- }
216
- set separator(t) {
217
- this.setAttribute("separator", t);
218
- }
219
- get separatorMobile() {
220
- return this.getAttribute("separator--mobile");
221
- }
222
- set separatorMobile(t) {
223
- this.setAttribute("separator--mobile", t);
224
- }
225
- get separatorTablet() {
226
- return this.getAttribute("separator--tablet");
227
- }
228
- set separatorTablet(t) {
229
- this.setAttribute("separator--tablet", t);
230
- }
231
- get separatorLaptop() {
232
- return this.getAttribute("separator--laptop");
233
- }
234
- set separatorLaptop(t) {
235
- this.setAttribute("separator--laptop", t);
236
- }
237
- get separatorDesktop() {
238
- return this.getAttribute("separator--desktop");
239
- }
240
- set separatorDesktop(t) {
241
- this.setAttribute("separator--desktop", t);
242
- }
243
- get radius() {
244
- return this.getAttribute("radius");
245
- }
246
- set radius(t) {
247
- this.setAttribute("radius", t);
248
- }
249
- get radiusMobile() {
250
- return this.getAttribute("radius--mobile");
251
- }
252
- set radiusMobile(t) {
253
- this.setAttribute("radius--mobile", t);
254
- }
255
- get radiusTablet() {
256
- return this.getAttribute("radius--tablet");
257
- }
258
- set radiusTablet(t) {
259
- this.setAttribute("radius--tablet", t);
260
- }
261
- get radiusLaptop() {
262
- return this.getAttribute("radius--laptop");
263
- }
264
- set radiusLaptop(t) {
265
- this.setAttribute("radius--laptop", t);
266
- }
267
- get radiusDesktop() {
268
- return this.getAttribute("radius--desktop");
269
- }
270
- set radiusDesktop(t) {
271
- this.setAttribute("radius--desktop", t);
272
- }
273
- get backgroundColor() {
274
- return this.getAttribute("background-color");
275
- }
276
- set backgroundColor(t) {
277
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
278
- }
279
- get compact() {
280
- return this.hasAttribute("compact");
281
- }
282
- set compact(t) {
283
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
284
- }
53
+ //#endregion
54
+ //#region src/common.css?inline
55
+ var g = ":host{outline:none;display:block}:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch),:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch) *{box-sizing:border-box}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);display:block}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);width:100%}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:is(:host:host(:not([disabled])) .cell-link,:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media screen and (width>=48rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(:scope:host:host(:not([disabled])) .cell-link,:scope:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .cell-link,:scope:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", _ = ":host([separator]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=description]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=suffix]){text-align:right;font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var(--cell-contained-background-color-default,var(--px-color-background-container-light-default))}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media screen and (width<=47.938rem){:host([separator--mobile]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--mobile,var(--px-radius-main))}}@media screen and (width>=48rem){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media screen and (width>=48rem) and (width<=64rem){:host([separator--tablet]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--tablet,var(--px-radius-main))}}@media screen and (width>=64.0625rem){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([separator--laptop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--laptop,var(--px-radius-main))}}@media screen and (width>=90.0625rem){:host{display:block}:host([separator--desktop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var(--cell-contained-border-radius-top-left--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--desktop,var(--px-radius-main))}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var(--cell-contained-background-color-inverted,var(--px-color-background-container-light-inverted))}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}", v = new CSSStyleSheet(), y = new CSSStyleSheet();
56
+ v.replaceSync(g), y.replaceSync(_);
57
+ var b = ["secondary"], x = [
58
+ "",
59
+ "default",
60
+ "top",
61
+ "bottom",
62
+ "none"
63
+ ], S = class extends e {
64
+ static {
65
+ this.nativeName = "div";
66
+ }
67
+ template() {
68
+ return "\n <px-hstack gap=\"s\" justify-content=\"space-between\" align-items=\"center\">\n <px-hstack gap=\"s\" align-items=\"center\">\n <slot name=\"prefix\"></slot>\n <slot name=\"visual\"></slot>\n <px-vstack gap=\"2xs\">\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </px-vstack>\n </px-hstack>\n <px-hstack gap=\"s\" align-items=\"center\" class=\"cell-layout__suffix-action-container\">\n <px-stack direction=\"column\" gap=\"2xs\" align-items=\"flex-end\" class=\"cell__suffix-container\">\n <slot name=\"suffix\"></slot>\n </px-stack>\n <slot name=\"action-indicator\"></slot>\n </px-hstack>\n </px-hstack>\n ";
69
+ }
70
+ constructor() {
71
+ super(y, v);
72
+ let e = document.createElement("div");
73
+ e.classList.add("cell"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
74
+ }
75
+ connectedCallback() {
76
+ if (this.$slotVisual) {
77
+ let e = this.querySelector("px-img[slot=\"visual\"]");
78
+ e && u(e);
79
+ }
80
+ if (this.$slotSuffix) {
81
+ let e = this.querySelectorAll("px-button-icon[slot=\"suffix\"]"), t = e.length > 0, n = e.length > 1;
82
+ t && e.forEach((e) => {
83
+ this.configureSlotSuffixButtonIcon(e);
84
+ }), n && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
85
+ }
86
+ d(this);
87
+ }
88
+ static get observedAttributes() {
89
+ return [
90
+ ...super.observedAttributes,
91
+ "inverted",
92
+ "variant",
93
+ "disabled",
94
+ "separator",
95
+ "separator--mobile",
96
+ "separator--tablet",
97
+ "separator--laptop",
98
+ "separator--desktop",
99
+ "radius",
100
+ "radius--mobile",
101
+ "radius--tablet",
102
+ "radius--laptop",
103
+ "radius--desktop",
104
+ "background-color",
105
+ "compact"
106
+ ];
107
+ }
108
+ attributeChangedCallback(e, t, n) {
109
+ if (t !== n) switch (e) {
110
+ case "variant":
111
+ f(this.$el, t, n);
112
+ break;
113
+ case "inverted":
114
+ for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") ? this.$children[e].removeAttribute("inverted") : this.$children[e].setAttribute("inverted", "");
115
+ break;
116
+ case "radius":
117
+ case "radius--mobile":
118
+ case "radius--tablet":
119
+ case "radius--laptop":
120
+ case "radius--desktop":
121
+ this.updateRadius(e, t, n, x);
122
+ break;
123
+ case "background-color":
124
+ m(this.$el, e, t, n, l);
125
+ break;
126
+ default: super.attributeChangedCallback(e, t, n);
127
+ }
128
+ }
129
+ configureSlotSuffixButtonIcon(e) {
130
+ e.hasAttribute("variant") && r(b, e.getAttribute("variant")) || e.setAttribute("variant", "secondary");
131
+ }
132
+ updateRadius(e, t, n, a) {
133
+ if (!r(a, n)) {
134
+ i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${a.join("\", \"")}".`);
135
+ return;
136
+ }
137
+ let o = e.includes("--"), s = [];
138
+ if (!o) this.separatorMobile || s.push("mobile"), this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop"), this.separatorDesktop || s.push("desktop");
139
+ else {
140
+ let t = e.split("--")[1];
141
+ s.push(t);
142
+ }
143
+ s.forEach((e) => {
144
+ t !== null && t !== "" && t !== "default" && this.updateStyle(e, t), n !== null && n !== "" && n !== "default" && this.updateStyle(e, n);
145
+ });
146
+ }
147
+ updateStyle(e, t) {
148
+ let n = [];
149
+ t === "top" ? n = ["bottom-right", "bottom-left"] : t === "bottom" ? n = ["top-right", "top-left"] : t === "none" && (n = [
150
+ "top-right",
151
+ "bottom-right",
152
+ "bottom-left",
153
+ "top-left"
154
+ ]), n.forEach((t) => {
155
+ this.$el.style.setProperty(`--cell-contained-border-radius-${t}--${e}`, "0");
156
+ });
157
+ }
158
+ get $children() {
159
+ return this.querySelectorAll("px-cell > *");
160
+ }
161
+ get $slotVisual() {
162
+ return this.querySelector("[slot=\"visual\"]");
163
+ }
164
+ get $slotSuffix() {
165
+ return this.querySelector("[slot=\"suffix\"]");
166
+ }
167
+ get $suffixContainer() {
168
+ return this.shadowRoot.querySelector(".cell__suffix-container");
169
+ }
170
+ get inverted() {
171
+ return this.hasAttribute("inverted");
172
+ }
173
+ set inverted(e) {
174
+ this._updateBooleanAttribute("inverted", e);
175
+ }
176
+ get variant() {
177
+ return this.getAttribute("variant");
178
+ }
179
+ set variant(e) {
180
+ this._updateAttribute("variant", e);
181
+ }
182
+ get disabled() {
183
+ return this.hasAttribute("disabled");
184
+ }
185
+ set disabled(e) {
186
+ this._updateBooleanAttribute("disabled", e);
187
+ }
188
+ get separator() {
189
+ return this.getAttribute("separator");
190
+ }
191
+ set separator(e) {
192
+ this._updateAttribute("separator", e);
193
+ }
194
+ get separatorMobile() {
195
+ return this.getAttribute("separator--mobile");
196
+ }
197
+ set separatorMobile(e) {
198
+ this._updateAttribute("separator--mobile", e);
199
+ }
200
+ get separatorTablet() {
201
+ return this.getAttribute("separator--tablet");
202
+ }
203
+ set separatorTablet(e) {
204
+ this._updateAttribute("separator--tablet", e);
205
+ }
206
+ get separatorLaptop() {
207
+ return this.getAttribute("separator--laptop");
208
+ }
209
+ set separatorLaptop(e) {
210
+ this._updateAttribute("separator--laptop", e);
211
+ }
212
+ get separatorDesktop() {
213
+ return this.getAttribute("separator--desktop");
214
+ }
215
+ set separatorDesktop(e) {
216
+ this._updateAttribute("separator--desktop", e);
217
+ }
218
+ get radius() {
219
+ return this.getAttribute("radius");
220
+ }
221
+ set radius(e) {
222
+ this._updateAttribute("radius", e);
223
+ }
224
+ get radiusMobile() {
225
+ return this.getAttribute("radius--mobile");
226
+ }
227
+ set radiusMobile(e) {
228
+ this._updateAttribute("radius--mobile", e);
229
+ }
230
+ get radiusTablet() {
231
+ return this.getAttribute("radius--tablet");
232
+ }
233
+ set radiusTablet(e) {
234
+ this._updateAttribute("radius--tablet", e);
235
+ }
236
+ get radiusLaptop() {
237
+ return this.getAttribute("radius--laptop");
238
+ }
239
+ set radiusLaptop(e) {
240
+ this._updateAttribute("radius--laptop", e);
241
+ }
242
+ get radiusDesktop() {
243
+ return this.getAttribute("radius--desktop");
244
+ }
245
+ set radiusDesktop(e) {
246
+ this._updateAttribute("radius--desktop", e);
247
+ }
248
+ get backgroundColor() {
249
+ return this.getAttribute("background-color");
250
+ }
251
+ set backgroundColor(e) {
252
+ this._updateAttribute("background-color", e);
253
+ }
254
+ get compact() {
255
+ return this.hasAttribute("compact");
256
+ }
257
+ set compact(e) {
258
+ this._updateBooleanAttribute("compact", e);
259
+ }
285
260
  };
286
- x.nativeName = "div";
287
- let g = x;
288
- customElements.get("px-cell") || customElements.define("px-cell", g);
289
- const O = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', y = new CSSStyleSheet();
290
- y.replaceSync(n);
291
- const w = new CSSStyleSheet();
292
- w.replaceSync(O);
293
- const f = class f extends m {
294
- template() {
295
- return `
296
- <px-cell hoverable>
297
- <slot name="visual" slot="visual"></slot>
298
- <slot name="label" slot="label"></slot>
299
- <slot name="description" slot="description"></slot>
300
- <slot name="suffix" slot="suffix"></slot>
301
- <px-icon
302
- name="chevron_right"
303
- slot="action-indicator"
304
- from="lavender"
305
- size="m"
306
- color="inherit"
307
- ></px-icon>
308
- </px-cell>
309
- `;
310
- }
311
- constructor() {
312
- super(w, y);
313
- const t = document.createElement(f.nativeName);
314
- t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
315
- }
316
- connectedCallback() {
317
- if (this.$slotVisual) {
318
- const e = this.querySelector('px-img[slot="visual"]');
319
- e && c(e);
320
- }
321
- this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
322
- "aria-label",
323
- this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
324
- )), d(this);
325
- }
326
- static get observedAttributes() {
327
- return [
328
- ...super.observedAttributes,
329
- "inverted",
330
- "variant",
331
- "disabled",
332
- "separator",
333
- "separator--mobile",
334
- "separator--tablet",
335
- "separator--laptop",
336
- "separator--desktop",
337
- "radius",
338
- "radius--mobile",
339
- "radius--tablet",
340
- "radius--laptop",
341
- "radius--desktop",
342
- "target-blank-aria-label",
343
- "background-color",
344
- "noicon",
345
- "compact"
346
- ];
347
- }
348
- attributeChangedCallback(t, e, s) {
349
- if (e !== s)
350
- switch (t) {
351
- case "variant":
352
- this.$cell.variant = this.variant;
353
- break;
354
- case "inverted":
355
- u(this.$cell, this.$children, this.inverted, [
356
- this.$pxIcon
357
- ]);
358
- break;
359
- case "disabled":
360
- $(this.$cell, this.$children, this.disabled, [], {
361
- ariaEl: this.$el,
362
- setAria: !0,
363
- setTabIndex: !0
364
- });
365
- break;
366
- case "radius":
367
- case "radius--mobile":
368
- case "radius--tablet":
369
- case "radius--laptop":
370
- case "radius--desktop":
371
- case "separator":
372
- case "separator--mobile":
373
- case "separator--tablet":
374
- case "separator--laptop":
375
- case "separator--desktop":
376
- case "background-color":
377
- case "compact":
378
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
379
- break;
380
- case "target-blank-aria-label":
381
- this.$pxIcon && this.$pxIcon.setAttribute(
382
- "aria-label",
383
- this.targetBlankAriaLabel || "Opens in a new tab"
384
- );
385
- break;
386
- default:
387
- super.attributeChangedCallback(t, e, s);
388
- break;
389
- }
390
- }
391
- get $cell() {
392
- return this.shadowRoot.querySelector("px-cell");
393
- }
394
- get $slotVisual() {
395
- return this.querySelector('[slot="visual"]');
396
- }
397
- get $children() {
398
- return this.querySelectorAll("px-cell-link > *");
399
- }
400
- get $pxIcon() {
401
- return this.shadowRoot.querySelector("px-icon");
402
- }
403
- get inverted() {
404
- return this.hasAttribute("inverted");
405
- }
406
- set inverted(t) {
407
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
408
- }
409
- get variant() {
410
- return this.getAttribute("variant");
411
- }
412
- set variant(t) {
413
- this.setAttribute("variant", t);
414
- }
415
- get disabled() {
416
- return this.hasAttribute("disabled");
417
- }
418
- set disabled(t) {
419
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
420
- }
421
- get separator() {
422
- return this.getAttribute("separator");
423
- }
424
- set separator(t) {
425
- this.setAttribute("separator", t);
426
- }
427
- get separatorMobile() {
428
- return this.getAttribute("separator--mobile");
429
- }
430
- set separatorMobile(t) {
431
- this.setAttribute("separator--mobile", t);
432
- }
433
- get separatorTablet() {
434
- return this.getAttribute("separator--tablet");
435
- }
436
- set separatorTablet(t) {
437
- this.setAttribute("separator--tablet", t);
438
- }
439
- get separatorLaptop() {
440
- return this.getAttribute("separator--laptop");
441
- }
442
- set separatorLaptop(t) {
443
- this.setAttribute("separator--laptop", t);
444
- }
445
- get separatorDesktop() {
446
- return this.getAttribute("separator--desktop");
447
- }
448
- set separatorDesktop(t) {
449
- this.setAttribute("separator--desktop", t);
450
- }
451
- get radius() {
452
- return this.getAttribute("radius");
453
- }
454
- set radius(t) {
455
- this.setAttribute("radius", t);
456
- }
457
- get radiusMobile() {
458
- return this.getAttribute("radius--mobile");
459
- }
460
- set radiusMobile(t) {
461
- this.setAttribute("radius--mobile", t);
462
- }
463
- get radiusTablet() {
464
- return this.getAttribute("radius--tablet");
465
- }
466
- set radiusTablet(t) {
467
- this.setAttribute("radius--tablet", t);
468
- }
469
- get radiusLaptop() {
470
- return this.getAttribute("radius--laptop");
471
- }
472
- set radiusLaptop(t) {
473
- this.setAttribute("radius--laptop", t);
474
- }
475
- get radiusDesktop() {
476
- return this.getAttribute("radius--desktop");
477
- }
478
- set radiusDesktop(t) {
479
- this.setAttribute("radius--desktop", t);
480
- }
481
- get targetBlankAriaLabel() {
482
- return this.getAttribute("target-blank-aria-label");
483
- }
484
- set targetBlankAriaLabel(t) {
485
- this.setAttribute("target-blank-aria-label", t);
486
- }
487
- get backgroundColor() {
488
- return this.getAttribute("background-color");
489
- }
490
- set backgroundColor(t) {
491
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
492
- }
493
- get compact() {
494
- return this.hasAttribute("compact");
495
- }
496
- set compact(t) {
497
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
498
- }
261
+ customElements.get("px-cell") || customElements.define("px-cell", S);
262
+ //#endregion
263
+ //#region src/cell-link.css?inline
264
+ var C = ".cell-link{text-decoration:none}.cell-link[noicon=\"\"] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", w = new CSSStyleSheet();
265
+ w.replaceSync(g);
266
+ var T = new CSSStyleSheet();
267
+ T.replaceSync(C);
268
+ var E = class t extends e {
269
+ static {
270
+ this.nativeName = "a";
271
+ }
272
+ template() {
273
+ return "\n <px-cell hoverable>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <px-icon\n name=\"chevron_right\"\n slot=\"action-indicator\"\n from=\"lavender\"\n size=\"m\"\n color=\"inherit\"\n ></px-icon>\n </px-cell>\n ";
274
+ }
275
+ constructor() {
276
+ super(T, w);
277
+ let e = document.createElement(t.nativeName);
278
+ e.classList.add("cell-link"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
279
+ }
280
+ connectedCallback() {
281
+ if (this.$slotVisual) {
282
+ let e = this.querySelector("px-img[slot=\"visual\"]");
283
+ e && u(e);
284
+ }
285
+ this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab")), d(this);
286
+ }
287
+ static get observedAttributes() {
288
+ return [
289
+ ...super.observedAttributes,
290
+ "inverted",
291
+ "variant",
292
+ "disabled",
293
+ "separator",
294
+ "separator--mobile",
295
+ "separator--tablet",
296
+ "separator--laptop",
297
+ "separator--desktop",
298
+ "radius",
299
+ "radius--mobile",
300
+ "radius--tablet",
301
+ "radius--laptop",
302
+ "radius--desktop",
303
+ "target-blank-aria-label",
304
+ "background-color",
305
+ "noicon",
306
+ "compact"
307
+ ];
308
+ }
309
+ attributeChangedCallback(e, t, n) {
310
+ if (t !== n) switch (e) {
311
+ case "variant":
312
+ this.$cell.variant = this.variant;
313
+ break;
314
+ case "inverted":
315
+ p(this.$cell, this.$children, this.inverted, [this.$pxIcon]);
316
+ break;
317
+ case "disabled":
318
+ h(this.$cell, this.$children, this.disabled, [], {
319
+ ariaEl: this.$el,
320
+ setAria: !0,
321
+ setTabIndex: !0
322
+ });
323
+ break;
324
+ case "radius":
325
+ case "radius--mobile":
326
+ case "radius--tablet":
327
+ case "radius--laptop":
328
+ case "radius--desktop":
329
+ case "separator":
330
+ case "separator--mobile":
331
+ case "separator--tablet":
332
+ case "separator--laptop":
333
+ case "separator--desktop":
334
+ case "background-color":
335
+ case "compact":
336
+ this.$cell.setAttribute(e, this.getAttribute(e) || "");
337
+ break;
338
+ case "target-blank-aria-label":
339
+ this.$pxIcon && this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel || "Opens in a new tab");
340
+ break;
341
+ default: super.attributeChangedCallback(e, t, n);
342
+ }
343
+ }
344
+ get $cell() {
345
+ return this.shadowRoot.querySelector("px-cell");
346
+ }
347
+ get $slotVisual() {
348
+ return this.querySelector("[slot=\"visual\"]");
349
+ }
350
+ get $children() {
351
+ return this.querySelectorAll("px-cell-link > *");
352
+ }
353
+ get $pxIcon() {
354
+ return this.shadowRoot.querySelector("px-icon");
355
+ }
356
+ get inverted() {
357
+ return this.hasAttribute("inverted");
358
+ }
359
+ set inverted(e) {
360
+ this._updateBooleanAttribute("inverted", e);
361
+ }
362
+ get variant() {
363
+ return this.getAttribute("variant");
364
+ }
365
+ set variant(e) {
366
+ this._updateAttribute("variant", e);
367
+ }
368
+ get disabled() {
369
+ return this.hasAttribute("disabled");
370
+ }
371
+ set disabled(e) {
372
+ this._updateBooleanAttribute("disabled", e);
373
+ }
374
+ get separator() {
375
+ return this.getAttribute("separator");
376
+ }
377
+ set separator(e) {
378
+ this._updateAttribute("separator", e);
379
+ }
380
+ get separatorMobile() {
381
+ return this.getAttribute("separator--mobile");
382
+ }
383
+ set separatorMobile(e) {
384
+ this._updateAttribute("separator--mobile", e);
385
+ }
386
+ get separatorTablet() {
387
+ return this.getAttribute("separator--tablet");
388
+ }
389
+ set separatorTablet(e) {
390
+ this._updateAttribute("separator--tablet", e);
391
+ }
392
+ get separatorLaptop() {
393
+ return this.getAttribute("separator--laptop");
394
+ }
395
+ set separatorLaptop(e) {
396
+ this._updateAttribute("separator--laptop", e);
397
+ }
398
+ get separatorDesktop() {
399
+ return this.getAttribute("separator--desktop");
400
+ }
401
+ set separatorDesktop(e) {
402
+ this._updateAttribute("separator--desktop", e);
403
+ }
404
+ get radius() {
405
+ return this.getAttribute("radius");
406
+ }
407
+ set radius(e) {
408
+ this._updateAttribute("radius", e);
409
+ }
410
+ get radiusMobile() {
411
+ return this.getAttribute("radius--mobile");
412
+ }
413
+ set radiusMobile(e) {
414
+ this._updateAttribute("radius--mobile", e);
415
+ }
416
+ get radiusTablet() {
417
+ return this.getAttribute("radius--tablet");
418
+ }
419
+ set radiusTablet(e) {
420
+ this._updateAttribute("radius--tablet", e);
421
+ }
422
+ get radiusLaptop() {
423
+ return this.getAttribute("radius--laptop");
424
+ }
425
+ set radiusLaptop(e) {
426
+ this._updateAttribute("radius--laptop", e);
427
+ }
428
+ get radiusDesktop() {
429
+ return this.getAttribute("radius--desktop");
430
+ }
431
+ set radiusDesktop(e) {
432
+ this._updateAttribute("radius--desktop", e);
433
+ }
434
+ get targetBlankAriaLabel() {
435
+ return this.getAttribute("target-blank-aria-label");
436
+ }
437
+ set targetBlankAriaLabel(e) {
438
+ this._updateAttribute("target-blank-aria-label", e);
439
+ }
440
+ get backgroundColor() {
441
+ return this.getAttribute("background-color");
442
+ }
443
+ set backgroundColor(e) {
444
+ this._updateAttribute("background-color", e);
445
+ }
446
+ get compact() {
447
+ return this.hasAttribute("compact");
448
+ }
449
+ set compact(e) {
450
+ this._updateBooleanAttribute("compact", e);
451
+ }
499
452
  };
500
- f.nativeName = "a";
501
- let v = f;
502
- customElements.get("px-cell-link") || customElements.define("px-cell-link", v);
503
- const j = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", E = new CSSStyleSheet();
504
- E.replaceSync(n);
505
- const D = new CSSStyleSheet();
506
- D.replaceSync(j);
507
- const h = class h extends m {
508
- template() {
509
- return `
510
- <px-cell hoverable>
511
- <slot name="visual" slot="visual"></slot>
512
- <slot name="label" slot="label"></slot>
513
- <slot name="description" slot="description"></slot>
514
- <slot name="suffix" slot="suffix"></slot>
515
- </px-cell>
516
- `;
517
- }
518
- constructor() {
519
- super(D, E);
520
- const t = document.createElement(h.nativeName);
521
- t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
522
- }
523
- connectedCallback() {
524
- if (this.$slotVisual) {
525
- const t = this.querySelector('px-img[slot="visual"]');
526
- t && c(t);
527
- }
528
- d(this);
529
- }
530
- static get observedAttributes() {
531
- return [
532
- ...super.observedAttributes,
533
- "inverted",
534
- "variant",
535
- "disabled",
536
- "separator",
537
- "separator--mobile",
538
- "separator--tablet",
539
- "separator--laptop",
540
- "separator--desktop",
541
- "radius",
542
- "radius--mobile",
543
- "radius--tablet",
544
- "radius--laptop",
545
- "radius--desktop",
546
- "background-color",
547
- "compact"
548
- ];
549
- }
550
- attributeChangedCallback(t, e, s) {
551
- if (e !== s)
552
- switch (t) {
553
- case "variant":
554
- this.$cell.variant = this.variant;
555
- break;
556
- case "inverted":
557
- u(this.$cell, this.$children, this.inverted);
558
- break;
559
- case "disabled":
560
- $(this.$cell, this.$children, this.disabled, [], {
561
- ariaEl: this.$el,
562
- setAria: !0,
563
- setTabIndex: !0
564
- });
565
- break;
566
- case "radius":
567
- case "radius--mobile":
568
- case "radius--tablet":
569
- case "radius--laptop":
570
- case "radius--desktop":
571
- case "separator":
572
- case "separator--mobile":
573
- case "separator--tablet":
574
- case "separator--laptop":
575
- case "separator--desktop":
576
- case "background-color":
577
- case "compact":
578
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
579
- break;
580
- default:
581
- super.attributeChangedCallback(t, e, s);
582
- break;
583
- }
584
- }
585
- get $cell() {
586
- return this.shadowRoot.querySelector("px-cell");
587
- }
588
- get $slotVisual() {
589
- return this.querySelector('[slot="visual"]');
590
- }
591
- get $children() {
592
- return this.querySelectorAll("px-cell-button > *");
593
- }
594
- get inverted() {
595
- return this.hasAttribute("inverted");
596
- }
597
- set inverted(t) {
598
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
599
- }
600
- get variant() {
601
- return this.getAttribute("variant");
602
- }
603
- set variant(t) {
604
- this.setAttribute("variant", t);
605
- }
606
- get disabled() {
607
- return this.hasAttribute("disabled");
608
- }
609
- set disabled(t) {
610
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
611
- }
612
- get separator() {
613
- return this.getAttribute("separator");
614
- }
615
- set separator(t) {
616
- this.setAttribute("separator", t);
617
- }
618
- get separatorMobile() {
619
- return this.getAttribute("separator--mobile");
620
- }
621
- set separatorMobile(t) {
622
- this.setAttribute("separator--mobile", t);
623
- }
624
- get separatorTablet() {
625
- return this.getAttribute("separator--tablet");
626
- }
627
- set separatorTablet(t) {
628
- this.setAttribute("separator--tablet", t);
629
- }
630
- get separatorLaptop() {
631
- return this.getAttribute("separator--laptop");
632
- }
633
- set separatorLaptop(t) {
634
- this.setAttribute("separator--laptop", t);
635
- }
636
- get separatorDesktop() {
637
- return this.getAttribute("separator--desktop");
638
- }
639
- set separatorDesktop(t) {
640
- this.setAttribute("separator--desktop", t);
641
- }
642
- get radius() {
643
- return this.getAttribute("radius");
644
- }
645
- set radius(t) {
646
- this.setAttribute("radius", t);
647
- }
648
- get radiusMobile() {
649
- return this.getAttribute("radius--mobile");
650
- }
651
- set radiusMobile(t) {
652
- this.setAttribute("radius--mobile", t);
653
- }
654
- get radiusTablet() {
655
- return this.getAttribute("radius--tablet");
656
- }
657
- set radiusTablet(t) {
658
- this.setAttribute("radius--tablet", t);
659
- }
660
- get radiusLaptop() {
661
- return this.getAttribute("radius--laptop");
662
- }
663
- set radiusLaptop(t) {
664
- this.setAttribute("radius--laptop", t);
665
- }
666
- get radiusDesktop() {
667
- return this.getAttribute("radius--desktop");
668
- }
669
- set radiusDesktop(t) {
670
- this.setAttribute("radius--desktop", t);
671
- }
672
- get backgroundColor() {
673
- return this.getAttribute("background-color");
674
- }
675
- set backgroundColor(t) {
676
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
677
- }
678
- get compact() {
679
- return this.hasAttribute("compact");
680
- }
681
- set compact(t) {
682
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
683
- }
453
+ customElements.get("px-cell-link") || customElements.define("px-cell-link", E);
454
+ //#endregion
455
+ //#region src/cell-button.css?inline
456
+ var D = ".cell-button{text-align:left;font-size:inherit;background:0 0;border:none;padding:0}", O = new CSSStyleSheet();
457
+ O.replaceSync(g);
458
+ var k = new CSSStyleSheet();
459
+ k.replaceSync(D);
460
+ var A = class t extends e {
461
+ static {
462
+ this.nativeName = "button";
463
+ }
464
+ static {
465
+ this.accessorExclusions = ["disabled"];
466
+ }
467
+ template() {
468
+ return "\n <px-cell hoverable>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n </px-cell>\n ";
469
+ }
470
+ constructor() {
471
+ super(k, O);
472
+ let e = document.createElement(t.nativeName);
473
+ e.classList.add("cell-button"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
474
+ }
475
+ connectedCallback() {
476
+ if (this.$slotVisual) {
477
+ let e = this.querySelector("px-img[slot=\"visual\"]");
478
+ e && u(e);
479
+ }
480
+ d(this);
481
+ }
482
+ static get observedAttributes() {
483
+ return [
484
+ ...super.observedAttributes,
485
+ "inverted",
486
+ "variant",
487
+ "disabled",
488
+ "separator",
489
+ "separator--mobile",
490
+ "separator--tablet",
491
+ "separator--laptop",
492
+ "separator--desktop",
493
+ "radius",
494
+ "radius--mobile",
495
+ "radius--tablet",
496
+ "radius--laptop",
497
+ "radius--desktop",
498
+ "background-color",
499
+ "compact"
500
+ ];
501
+ }
502
+ attributeChangedCallback(e, t, n) {
503
+ if (t !== n) switch (e) {
504
+ case "variant":
505
+ this.$cell.variant = this.variant;
506
+ break;
507
+ case "inverted":
508
+ p(this.$cell, this.$children, this.inverted);
509
+ break;
510
+ case "disabled":
511
+ h(this.$cell, this.$children, this.disabled, [], {
512
+ ariaEl: this.$el,
513
+ setAria: !0,
514
+ setTabIndex: !0
515
+ });
516
+ break;
517
+ case "radius":
518
+ case "radius--mobile":
519
+ case "radius--tablet":
520
+ case "radius--laptop":
521
+ case "radius--desktop":
522
+ case "separator":
523
+ case "separator--mobile":
524
+ case "separator--tablet":
525
+ case "separator--laptop":
526
+ case "separator--desktop":
527
+ case "background-color":
528
+ case "compact":
529
+ this.$cell.setAttribute(e, this.getAttribute(e) || "");
530
+ break;
531
+ default: super.attributeChangedCallback(e, t, n);
532
+ }
533
+ }
534
+ get $cell() {
535
+ return this.shadowRoot.querySelector("px-cell");
536
+ }
537
+ get $slotVisual() {
538
+ return this.querySelector("[slot=\"visual\"]");
539
+ }
540
+ get $children() {
541
+ return this.querySelectorAll("px-cell-button > *");
542
+ }
543
+ get inverted() {
544
+ return this.hasAttribute("inverted");
545
+ }
546
+ set inverted(e) {
547
+ this._updateBooleanAttribute("inverted", e);
548
+ }
549
+ get variant() {
550
+ return this.getAttribute("variant");
551
+ }
552
+ set variant(e) {
553
+ this._updateAttribute("variant", e);
554
+ }
555
+ get disabled() {
556
+ return this.hasAttribute("disabled");
557
+ }
558
+ set disabled(e) {
559
+ this._updateBooleanAttribute("disabled", e);
560
+ }
561
+ get separator() {
562
+ return this.getAttribute("separator");
563
+ }
564
+ set separator(e) {
565
+ this._updateAttribute("separator", e);
566
+ }
567
+ get separatorMobile() {
568
+ return this.getAttribute("separator--mobile");
569
+ }
570
+ set separatorMobile(e) {
571
+ this._updateAttribute("separator--mobile", e);
572
+ }
573
+ get separatorTablet() {
574
+ return this.getAttribute("separator--tablet");
575
+ }
576
+ set separatorTablet(e) {
577
+ this._updateAttribute("separator--tablet", e);
578
+ }
579
+ get separatorLaptop() {
580
+ return this.getAttribute("separator--laptop");
581
+ }
582
+ set separatorLaptop(e) {
583
+ this._updateAttribute("separator--laptop", e);
584
+ }
585
+ get separatorDesktop() {
586
+ return this.getAttribute("separator--desktop");
587
+ }
588
+ set separatorDesktop(e) {
589
+ this._updateAttribute("separator--desktop", e);
590
+ }
591
+ get radius() {
592
+ return this.getAttribute("radius");
593
+ }
594
+ set radius(e) {
595
+ this._updateAttribute("radius", e);
596
+ }
597
+ get radiusMobile() {
598
+ return this.getAttribute("radius--mobile");
599
+ }
600
+ set radiusMobile(e) {
601
+ this._updateAttribute("radius--mobile", e);
602
+ }
603
+ get radiusTablet() {
604
+ return this.getAttribute("radius--tablet");
605
+ }
606
+ set radiusTablet(e) {
607
+ this._updateAttribute("radius--tablet", e);
608
+ }
609
+ get radiusLaptop() {
610
+ return this.getAttribute("radius--laptop");
611
+ }
612
+ set radiusLaptop(e) {
613
+ this._updateAttribute("radius--laptop", e);
614
+ }
615
+ get radiusDesktop() {
616
+ return this.getAttribute("radius--desktop");
617
+ }
618
+ set radiusDesktop(e) {
619
+ this._updateAttribute("radius--desktop", e);
620
+ }
621
+ get backgroundColor() {
622
+ return this.getAttribute("background-color");
623
+ }
624
+ set backgroundColor(e) {
625
+ this._updateAttribute("background-color", e);
626
+ }
627
+ get compact() {
628
+ return this.hasAttribute("compact");
629
+ }
630
+ set compact(e) {
631
+ this._updateBooleanAttribute("compact", e);
632
+ }
684
633
  };
685
- h.nativeName = "button", h.accessorExclusions = ["disabled"];
686
- let k = h;
687
- customElements.get("px-cell-button") || customElements.define("px-cell-button", k);
688
- const L = new CSSStyleSheet();
689
- L.replaceSync(n);
690
- const W = ["", "left", "right"];
691
- class G extends A {
692
- template() {
693
- return `
694
- <div class="cell-checkbox">
695
- <px-cell hoverable>
696
- <px-checkbox slot="prefix" inert></px-checkbox>
697
- <slot name="visual" slot="visual"></slot>
698
- <slot name="label" slot="label"></slot>
699
- <slot name="description" slot="description"></slot>
700
- <slot name="suffix" slot="suffix"></slot>
701
- </px-cell>
702
- `;
703
- }
704
- constructor() {
705
- var t;
706
- super(L), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
707
- }
708
- connectedCallback() {
709
- if (this.name && this.$checkbox.setAttribute("name", this.name), this.value && this.$checkbox.setAttribute("value", this.value), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
710
- const t = this.querySelector('px-img[slot="visual"]');
711
- t && c(t);
712
- }
713
- this.addEventListener("mouseover", () => {
714
- this.$checkbox.setAttribute("hover", "");
715
- }), this.addEventListener("mouseout", () => {
716
- this.$checkbox.removeAttribute("hover");
717
- }), this.addEventListener("keypress", (t) => {
718
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
719
- case "Space":
720
- this.click();
721
- break;
722
- }
723
- }), this.addEventListener("click", (t) => {
724
- this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
725
- }), this.hasAttribute("checked") && (this.checked = !0), d(this);
726
- }
727
- static get observedAttributes() {
728
- return [
729
- "inverted",
730
- "variant",
731
- "disabled",
732
- "separator",
733
- "separator--mobile",
734
- "separator--tablet",
735
- "separator--laptop",
736
- "separator--desktop",
737
- "radius",
738
- "radius--mobile",
739
- "radius--tablet",
740
- "radius--laptop",
741
- "radius--desktop",
742
- "name",
743
- "value",
744
- "state",
745
- "checked",
746
- "checkbox-position",
747
- "background-color",
748
- "compact"
749
- ];
750
- }
751
- attributeChangedCallback(t, e, s) {
752
- if (e !== s)
753
- switch (t) {
754
- case "variant":
755
- this.$cell.variant = this.variant;
756
- break;
757
- case "inverted":
758
- u(this.$cell, this.$children, this.inverted, [
759
- this.$checkbox
760
- ]);
761
- break;
762
- case "disabled":
763
- this.handleDisabledAttributeChange(s !== null);
764
- break;
765
- case "radius":
766
- case "radius--mobile":
767
- case "radius--tablet":
768
- case "radius--laptop":
769
- case "radius--desktop":
770
- case "separator":
771
- case "separator--mobile":
772
- case "separator--tablet":
773
- case "separator--laptop":
774
- case "separator--desktop":
775
- case "background-color":
776
- case "compact":
777
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
778
- break;
779
- case "name":
780
- case "value":
781
- this.$checkbox && this.$checkbox.setAttribute(t, s);
782
- break;
783
- case "state":
784
- if (this.$checkbox)
785
- if (this.checkName(q, s))
786
- this.$checkbox.setAttribute("state", s);
787
- else {
788
- l(
789
- `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
790
- );
791
- return;
792
- }
793
- break;
794
- case "checked":
795
- this.handleCheckedAttributeChange(s);
796
- break;
797
- case "checkbox-position":
798
- this.handleCheckboxPositionChange(s);
799
- break;
800
- }
801
- }
802
- handleDisabledAttributeChange(t) {
803
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
804
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
805
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
806
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
807
- }));
808
- }
809
- handleCheckedAttributeChange(t) {
810
- var e;
811
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
812
- new Event("change", {
813
- bubbles: !0,
814
- composed: !0
815
- // Allow the event to pass through shadow DOM boundaries
816
- })
817
- ));
818
- }
819
- handleCheckboxPositionChange(t) {
820
- if (!this.checkName(W, t)) {
821
- l(
822
- `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
823
- );
824
- return;
825
- }
826
- this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
827
- }
828
- // Form-associated callbacks
829
- static get formAssociated() {
830
- return !0;
831
- }
832
- // Set default behavior when the element is attached to a form
833
- formResetCallback() {
834
- this.checked = !1;
835
- }
836
- formStateRestoreCallback(t) {
837
- this.checked = t;
838
- }
839
- formData() {
840
- if (this.name) {
841
- const t = new FormData(), e = this.getAttribute("name");
842
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
843
- }
844
- }
845
- get $cell() {
846
- return this.shadowRoot.querySelector("px-cell");
847
- }
848
- get $el() {
849
- return this.shadowRoot.querySelector(".cell-checkbox");
850
- }
851
- get $checkbox() {
852
- return this.shadowRoot.querySelector("px-checkbox");
853
- }
854
- get $slotVisual() {
855
- return this.querySelector('[slot="visual"]');
856
- }
857
- get $children() {
858
- return this.querySelectorAll("px-cell-checkbox > *");
859
- }
860
- get inverted() {
861
- return this.hasAttribute("inverted");
862
- }
863
- set inverted(t) {
864
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
865
- }
866
- get variant() {
867
- return this.getAttribute("variant");
868
- }
869
- set variant(t) {
870
- this.setAttribute("variant", t);
871
- }
872
- get disabled() {
873
- return this.hasAttribute("disabled");
874
- }
875
- set disabled(t) {
876
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
877
- }
878
- get separator() {
879
- return this.getAttribute("separator");
880
- }
881
- set separator(t) {
882
- this.setAttribute("separator", t);
883
- }
884
- get separatorMobile() {
885
- return this.getAttribute("separator--mobile");
886
- }
887
- set separatorMobile(t) {
888
- this.setAttribute("separator--mobile", t);
889
- }
890
- get separatorTablet() {
891
- return this.getAttribute("separator--tablet");
892
- }
893
- set separatorTablet(t) {
894
- this.setAttribute("separator--tablet", t);
895
- }
896
- get separatorLaptop() {
897
- return this.getAttribute("separator--laptop");
898
- }
899
- set separatorLaptop(t) {
900
- this.setAttribute("separator--laptop", t);
901
- }
902
- get separatorDesktop() {
903
- return this.getAttribute("separator--desktop");
904
- }
905
- set separatorDesktop(t) {
906
- this.setAttribute("separator--desktop", t);
907
- }
908
- get radius() {
909
- return this.getAttribute("radius");
910
- }
911
- set radius(t) {
912
- this.setAttribute("radius", t);
913
- }
914
- get radiusMobile() {
915
- return this.getAttribute("radius--mobile");
916
- }
917
- set radiusMobile(t) {
918
- this.setAttribute("radius--mobile", t);
919
- }
920
- get radiusTablet() {
921
- return this.getAttribute("radius--tablet");
922
- }
923
- set radiusTablet(t) {
924
- this.setAttribute("radius--tablet", t);
925
- }
926
- get radiusLaptop() {
927
- return this.getAttribute("radius--laptop");
928
- }
929
- set radiusLaptop(t) {
930
- this.setAttribute("radius--laptop", t);
931
- }
932
- get radiusDesktop() {
933
- return this.getAttribute("radius--desktop");
934
- }
935
- set radiusDesktop(t) {
936
- this.setAttribute("radius--desktop", t);
937
- }
938
- get checked() {
939
- return this.hasAttribute("checked");
940
- }
941
- set checked(t) {
942
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
943
- }
944
- get name() {
945
- return this.getAttribute("name");
946
- }
947
- set name(t) {
948
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
949
- }
950
- get state() {
951
- return this.getAttribute("state");
952
- }
953
- set state(t) {
954
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
955
- }
956
- get value() {
957
- return this.getAttribute("value");
958
- }
959
- set value(t) {
960
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
961
- }
962
- get checkboxPosition() {
963
- return this.getAttribute("checkbox-position");
964
- }
965
- set checkboxPosition(t) {
966
- t ? this.setAttribute("checkbox-position", t) : this.removeAttribute("checkbox-position");
967
- }
968
- get backgroundColor() {
969
- return this.getAttribute("background-color");
970
- }
971
- set backgroundColor(t) {
972
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
973
- }
974
- get compact() {
975
- return this.hasAttribute("compact");
976
- }
977
- set compact(t) {
978
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
979
- }
980
- }
981
- customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", G);
982
- const I = new CSSStyleSheet();
983
- I.replaceSync(n);
984
- class J extends A {
985
- template() {
986
- return `
987
- <div class="cell-switch">
988
- <px-cell hoverable>
989
- <px-switch slot="action-indicator" inert></px-switch>
990
- <slot name="visual" slot="visual"></slot>
991
- <slot name="label" slot="label"></slot>
992
- <slot name="description" slot="description"></slot>
993
- <slot name="suffix" slot="suffix"></slot>
994
- </px-cell>
995
- `;
996
- }
997
- constructor() {
998
- var t;
999
- super(I), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
1000
- }
1001
- connectedCallback() {
1002
- if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
1003
- const t = this.querySelector('px-img[slot="visual"]');
1004
- t && c(t);
1005
- }
1006
- this.addEventListener("mouseover", () => {
1007
- this.$switch.setAttribute("hover", "");
1008
- }), this.addEventListener("mouseout", () => {
1009
- this.$switch.removeAttribute("hover");
1010
- }), this.addEventListener("keypress", (t) => {
1011
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
1012
- case "Space":
1013
- this.click();
1014
- break;
1015
- }
1016
- }), this.addEventListener("click", (t) => {
1017
- this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1018
- }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1019
- }
1020
- static get observedAttributes() {
1021
- return [
1022
- "inverted",
1023
- "variant",
1024
- "disabled",
1025
- "separator",
1026
- "separator--mobile",
1027
- "separator--tablet",
1028
- "separator--laptop",
1029
- "separator--desktop",
1030
- "radius",
1031
- "radius--mobile",
1032
- "radius--tablet",
1033
- "radius--laptop",
1034
- "radius--desktop",
1035
- "name",
1036
- "value",
1037
- "checked",
1038
- "background-color",
1039
- "compact"
1040
- ];
1041
- }
1042
- attributeChangedCallback(t, e, s) {
1043
- if (e !== s)
1044
- switch (t) {
1045
- case "variant":
1046
- this.$cell.variant = this.variant;
1047
- break;
1048
- case "inverted":
1049
- u(this.$cell, this.$children, this.inverted, [
1050
- this.$switch
1051
- ]);
1052
- break;
1053
- case "disabled":
1054
- this.handleDisabledAttributeChange(s !== null);
1055
- break;
1056
- case "radius":
1057
- case "radius--mobile":
1058
- case "radius--tablet":
1059
- case "radius--laptop":
1060
- case "radius--desktop":
1061
- case "separator":
1062
- case "separator--mobile":
1063
- case "separator--tablet":
1064
- case "separator--laptop":
1065
- case "separator--desktop":
1066
- case "background-color":
1067
- case "compact":
1068
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
1069
- break;
1070
- case "name":
1071
- case "value":
1072
- this.$switch && this.$switch.setAttribute(t, s);
1073
- break;
1074
- case "checked":
1075
- this.handleCheckedAttributeChange(s);
1076
- break;
1077
- }
1078
- }
1079
- handleDisabledAttributeChange(t) {
1080
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
1081
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1082
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
1083
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
1084
- }));
1085
- }
1086
- handleCheckedAttributeChange(t) {
1087
- var e;
1088
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
1089
- new Event("change", {
1090
- bubbles: !0,
1091
- composed: !0
1092
- // Allow the event to pass through shadow DOM boundaries
1093
- })
1094
- ));
1095
- }
1096
- // Form-associated callbacks
1097
- static get formAssociated() {
1098
- return !0;
1099
- }
1100
- // Set default behavior when the element is attached to a form
1101
- formResetCallback() {
1102
- this.checked = !1;
1103
- }
1104
- formStateRestoreCallback(t) {
1105
- this.checked = t;
1106
- }
1107
- formData() {
1108
- if (this.name) {
1109
- const t = new FormData(), e = this.getAttribute("name");
1110
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
1111
- }
1112
- }
1113
- get $cell() {
1114
- return this.shadowRoot.querySelector("px-cell");
1115
- }
1116
- get $el() {
1117
- return this.shadowRoot.querySelector(".cell-switch");
1118
- }
1119
- get $switch() {
1120
- return this.shadowRoot.querySelector("px-switch");
1121
- }
1122
- get $slotVisual() {
1123
- return this.querySelector('[slot="visual"]');
1124
- }
1125
- get $children() {
1126
- return this.querySelectorAll("px-cell-switch > *");
1127
- }
1128
- get inverted() {
1129
- return this.hasAttribute("inverted");
1130
- }
1131
- set inverted(t) {
1132
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1133
- }
1134
- get variant() {
1135
- return this.getAttribute("variant");
1136
- }
1137
- set variant(t) {
1138
- this.setAttribute("variant", t);
1139
- }
1140
- get disabled() {
1141
- return this.hasAttribute("disabled");
1142
- }
1143
- set disabled(t) {
1144
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1145
- }
1146
- get separator() {
1147
- return this.getAttribute("separator");
1148
- }
1149
- set separator(t) {
1150
- this.setAttribute("separator", t);
1151
- }
1152
- get separatorMobile() {
1153
- return this.getAttribute("separator--mobile");
1154
- }
1155
- set separatorMobile(t) {
1156
- this.setAttribute("separator--mobile", t);
1157
- }
1158
- get separatorTablet() {
1159
- return this.getAttribute("separator--tablet");
1160
- }
1161
- set separatorTablet(t) {
1162
- this.setAttribute("separator--tablet", t);
1163
- }
1164
- get separatorLaptop() {
1165
- return this.getAttribute("separator--laptop");
1166
- }
1167
- set separatorLaptop(t) {
1168
- this.setAttribute("separator--laptop", t);
1169
- }
1170
- get separatorDesktop() {
1171
- return this.getAttribute("separator--desktop");
1172
- }
1173
- set separatorDesktop(t) {
1174
- this.setAttribute("separator--desktop", t);
1175
- }
1176
- get radius() {
1177
- return this.getAttribute("radius");
1178
- }
1179
- set radius(t) {
1180
- this.setAttribute("radius", t);
1181
- }
1182
- get radiusMobile() {
1183
- return this.getAttribute("radius--mobile");
1184
- }
1185
- set radiusMobile(t) {
1186
- this.setAttribute("radius--mobile", t);
1187
- }
1188
- get radiusTablet() {
1189
- return this.getAttribute("radius--tablet");
1190
- }
1191
- set radiusTablet(t) {
1192
- this.setAttribute("radius--tablet", t);
1193
- }
1194
- get radiusLaptop() {
1195
- return this.getAttribute("radius--laptop");
1196
- }
1197
- set radiusLaptop(t) {
1198
- this.setAttribute("radius--laptop", t);
1199
- }
1200
- get radiusDesktop() {
1201
- return this.getAttribute("radius--desktop");
1202
- }
1203
- set radiusDesktop(t) {
1204
- this.setAttribute("radius--desktop", t);
1205
- }
1206
- get checked() {
1207
- return this.hasAttribute("checked");
1208
- }
1209
- set checked(t) {
1210
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1211
- }
1212
- get name() {
1213
- return this.getAttribute("name");
1214
- }
1215
- set name(t) {
1216
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
1217
- }
1218
- get state() {
1219
- return this.getAttribute("state");
1220
- }
1221
- set state(t) {
1222
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
1223
- }
1224
- get value() {
1225
- return this.getAttribute("value");
1226
- }
1227
- set value(t) {
1228
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
1229
- }
1230
- get backgroundColor() {
1231
- return this.getAttribute("background-color");
1232
- }
1233
- set backgroundColor(t) {
1234
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1235
- }
1236
- get compact() {
1237
- return this.hasAttribute("compact");
1238
- }
1239
- set compact(t) {
1240
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1241
- }
1242
- }
1243
- customElements.get("px-cell-switch") || customElements.define("px-cell-switch", J);
1244
- const T = new CSSStyleSheet();
1245
- T.replaceSync(n);
1246
- const K = ["", "left", "right"];
1247
- class Q extends A {
1248
- template() {
1249
- return `
1250
- <div class="cell-radio">
1251
- <px-cell hoverable>
1252
- <px-radio slot="prefix" inert></px-radio>
1253
- <slot name="visual" slot="visual"></slot>
1254
- <slot name="label" slot="label"></slot>
1255
- <slot name="description" slot="description"></slot>
1256
- <slot name="suffix" slot="suffix"></slot>
1257
- </px-cell>
1258
- `;
1259
- }
1260
- constructor() {
1261
- var t;
1262
- super(T), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
1263
- }
1264
- connectedCallback() {
1265
- var t;
1266
- if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
1267
- const e = this.querySelector('px-img[slot="visual"]');
1268
- e && c(e);
1269
- }
1270
- this.addEventListener("mouseover", () => {
1271
- this.$radio.setAttribute("hover", "");
1272
- }), this.addEventListener("mouseout", () => {
1273
- this.$radio.removeAttribute("hover");
1274
- }), this.addEventListener("keypress", (e) => {
1275
- switch (e.stopPropagation(), e.preventDefault(), e.code) {
1276
- case "Space":
1277
- this.click();
1278
- break;
1279
- }
1280
- }), this.addEventListener("click", (e) => {
1281
- this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
1282
- }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1283
- }
1284
- static get observedAttributes() {
1285
- return [
1286
- "inverted",
1287
- "variant",
1288
- "disabled",
1289
- "separator",
1290
- "separator--mobile",
1291
- "separator--tablet",
1292
- "separator--laptop",
1293
- "separator--desktop",
1294
- "radius",
1295
- "radius--mobile",
1296
- "radius--tablet",
1297
- "radius--laptop",
1298
- "radius--desktop",
1299
- "name",
1300
- "value",
1301
- "state",
1302
- "checked",
1303
- "radio-position",
1304
- "background-color",
1305
- "compact"
1306
- ];
1307
- }
1308
- attributeChangedCallback(t, e, s) {
1309
- if (e !== s)
1310
- switch (t) {
1311
- case "variant":
1312
- this.$cell.variant = this.variant;
1313
- break;
1314
- case "inverted":
1315
- u(this.$cell, this.$children, this.inverted, [
1316
- this.$radio
1317
- ]);
1318
- break;
1319
- case "disabled":
1320
- this.handleDisabledAttributeChange(s !== null);
1321
- break;
1322
- case "radius":
1323
- case "radius--mobile":
1324
- case "radius--tablet":
1325
- case "radius--laptop":
1326
- case "radius--desktop":
1327
- case "separator":
1328
- case "separator--mobile":
1329
- case "separator--tablet":
1330
- case "separator--laptop":
1331
- case "separator--desktop":
1332
- case "background-color":
1333
- case "compact":
1334
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
1335
- break;
1336
- case "name":
1337
- case "value":
1338
- this.$radio && this.$radio.setAttribute(t, s);
1339
- break;
1340
- case "state":
1341
- if (this.$radio)
1342
- if (this.checkName(M, s))
1343
- this.$radio.setAttribute("state", s);
1344
- else {
1345
- l(
1346
- `${s} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
1347
- );
1348
- return;
1349
- }
1350
- break;
1351
- case "checked":
1352
- this.handleCheckedAttributeChange(s);
1353
- break;
1354
- case "radio-position":
1355
- this.handleRadioPositionChange(s);
1356
- break;
1357
- }
1358
- }
1359
- handleDisabledAttributeChange(t) {
1360
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
1361
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1362
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
1363
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
1364
- }));
1365
- }
1366
- handleCheckedAttributeChange(t) {
1367
- var e;
1368
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
1369
- new Event("change", {
1370
- bubbles: !0,
1371
- composed: !0
1372
- // Allow the event to pass through shadow DOM boundaries
1373
- })
1374
- ));
1375
- }
1376
- handleRadioPositionChange(t) {
1377
- if (!this.checkName(K, t)) {
1378
- l(
1379
- `${t} is not an allowed position value for ${this.tagName.toLowerCase()}`
1380
- );
1381
- return;
1382
- }
1383
- this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
1384
- }
1385
- // Form-associated callbacks
1386
- static get formAssociated() {
1387
- return !0;
1388
- }
1389
- // Set default behavior when the element is attached to a form
1390
- formResetCallback() {
1391
- this.checked = !1;
1392
- }
1393
- formStateRestoreCallback(t) {
1394
- this.checked = t;
1395
- }
1396
- formData() {
1397
- if (this.name) {
1398
- const t = new FormData(), e = this.getAttribute("name");
1399
- return e && (this.checked ? t.set(e, this.$radio.value) : t.delete(e)), t;
1400
- }
1401
- }
1402
- get $cell() {
1403
- return this.shadowRoot.querySelector("px-cell");
1404
- }
1405
- get $el() {
1406
- return this.shadowRoot.querySelector(".cell-radio");
1407
- }
1408
- get $radio() {
1409
- return this.shadowRoot.querySelector("px-radio");
1410
- }
1411
- get $slotVisual() {
1412
- return this.querySelector('[slot="visual"]');
1413
- }
1414
- get $children() {
1415
- return this.querySelectorAll("px-cell-radio > *");
1416
- }
1417
- get inverted() {
1418
- return this.hasAttribute("inverted");
1419
- }
1420
- set inverted(t) {
1421
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1422
- }
1423
- get variant() {
1424
- return this.getAttribute("variant");
1425
- }
1426
- set variant(t) {
1427
- this.setAttribute("variant", t);
1428
- }
1429
- get disabled() {
1430
- return this.hasAttribute("disabled");
1431
- }
1432
- set disabled(t) {
1433
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1434
- }
1435
- get separator() {
1436
- return this.getAttribute("separator");
1437
- }
1438
- set separator(t) {
1439
- this.setAttribute("separator", t);
1440
- }
1441
- get separatorMobile() {
1442
- return this.getAttribute("separator--mobile");
1443
- }
1444
- set separatorMobile(t) {
1445
- this.setAttribute("separator--mobile", t);
1446
- }
1447
- get separatorTablet() {
1448
- return this.getAttribute("separator--tablet");
1449
- }
1450
- set separatorTablet(t) {
1451
- this.setAttribute("separator--tablet", t);
1452
- }
1453
- get separatorLaptop() {
1454
- return this.getAttribute("separator--laptop");
1455
- }
1456
- set separatorLaptop(t) {
1457
- this.setAttribute("separator--laptop", t);
1458
- }
1459
- get separatorDesktop() {
1460
- return this.getAttribute("separator--desktop");
1461
- }
1462
- set separatorDesktop(t) {
1463
- this.setAttribute("separator--desktop", t);
1464
- }
1465
- get radius() {
1466
- return this.getAttribute("radius");
1467
- }
1468
- set radius(t) {
1469
- this.setAttribute("radius", t);
1470
- }
1471
- get radiusMobile() {
1472
- return this.getAttribute("radius--mobile");
1473
- }
1474
- set radiusMobile(t) {
1475
- this.setAttribute("radius--mobile", t);
1476
- }
1477
- get radiusTablet() {
1478
- return this.getAttribute("radius--tablet");
1479
- }
1480
- set radiusTablet(t) {
1481
- this.setAttribute("radius--tablet", t);
1482
- }
1483
- get radiusLaptop() {
1484
- return this.getAttribute("radius--laptop");
1485
- }
1486
- set radiusLaptop(t) {
1487
- this.setAttribute("radius--laptop", t);
1488
- }
1489
- get radiusDesktop() {
1490
- return this.getAttribute("radius--desktop");
1491
- }
1492
- set radiusDesktop(t) {
1493
- this.setAttribute("radius--desktop", t);
1494
- }
1495
- get checked() {
1496
- return this.hasAttribute("checked");
1497
- }
1498
- set checked(t) {
1499
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1500
- }
1501
- get name() {
1502
- return this.getAttribute("name");
1503
- }
1504
- set name(t) {
1505
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
1506
- }
1507
- get state() {
1508
- return this.getAttribute("state");
1509
- }
1510
- set state(t) {
1511
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
1512
- }
1513
- get value() {
1514
- return this.getAttribute("value");
1515
- }
1516
- set value(t) {
1517
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
1518
- }
1519
- get radioPosition() {
1520
- return this.getAttribute("radio-position");
1521
- }
1522
- set radioPosition(t) {
1523
- t ? this.setAttribute("radio-position", t) : this.removeAttribute("radio-position");
1524
- }
1525
- get backgroundColor() {
1526
- return this.getAttribute("background-color");
1527
- }
1528
- set backgroundColor(t) {
1529
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1530
- }
1531
- get compact() {
1532
- return this.hasAttribute("compact");
1533
- }
1534
- set compact(t) {
1535
- t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
1536
- }
1537
- }
1538
- customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
1539
- export {
1540
- g as Cell,
1541
- k as CellButton,
1542
- G as CellCheckbox,
1543
- v as CellLink,
1544
- Q as CellRadio,
1545
- J as CellSwitch,
1546
- W as cellCheckboxPosition,
1547
- K as cellRadioPosition,
1548
- _ as radiusValues,
1549
- F as suffixButtonIconVariantValues
634
+ customElements.get("px-cell-button") || customElements.define("px-cell-button", A);
635
+ //#endregion
636
+ //#region src/CellCheckbox.ts
637
+ var j = new CSSStyleSheet();
638
+ j.replaceSync(g);
639
+ var M = [
640
+ "",
641
+ "left",
642
+ "right"
643
+ ], N = class extends t {
644
+ template() {
645
+ return "\n <div class=\"cell-checkbox\">\n <px-cell hoverable>\n <px-checkbox slot=\"prefix\" inert></px-checkbox>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n </px-cell>\n </div>\n ";
646
+ }
647
+ constructor() {
648
+ super(j), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.(), this.tabIndex = 0;
649
+ }
650
+ connectedCallback() {
651
+ if (this.name && this.$checkbox.setAttribute("name", this.name), this.value && this.$checkbox.setAttribute("value", this.value), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
652
+ let e = this.querySelector("px-img[slot=\"visual\"]");
653
+ e && u(e);
654
+ }
655
+ this.addEventListener("mouseover", () => {
656
+ this.$checkbox.setAttribute("hover", "");
657
+ }), this.addEventListener("mouseout", () => {
658
+ this.$checkbox.removeAttribute("hover");
659
+ }), this.addEventListener("keypress", (e) => {
660
+ e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
661
+ }), this.addEventListener("click", (e) => {
662
+ this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
663
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
664
+ }
665
+ static get observedAttributes() {
666
+ return [
667
+ "inverted",
668
+ "variant",
669
+ "disabled",
670
+ "separator",
671
+ "separator--mobile",
672
+ "separator--tablet",
673
+ "separator--laptop",
674
+ "separator--desktop",
675
+ "radius",
676
+ "radius--mobile",
677
+ "radius--tablet",
678
+ "radius--laptop",
679
+ "radius--desktop",
680
+ "name",
681
+ "value",
682
+ "state",
683
+ "checked",
684
+ "checkbox-position",
685
+ "background-color",
686
+ "compact"
687
+ ];
688
+ }
689
+ attributeChangedCallback(e, t, n) {
690
+ if (t !== n) switch (e) {
691
+ case "variant":
692
+ this.$cell.variant = this.variant;
693
+ break;
694
+ case "inverted":
695
+ p(this.$cell, this.$children, this.inverted, [this.$checkbox]);
696
+ break;
697
+ case "disabled":
698
+ this.handleDisabledAttributeChange(n !== null);
699
+ break;
700
+ case "radius":
701
+ case "radius--mobile":
702
+ case "radius--tablet":
703
+ case "radius--laptop":
704
+ case "radius--desktop":
705
+ case "separator":
706
+ case "separator--mobile":
707
+ case "separator--tablet":
708
+ case "separator--laptop":
709
+ case "separator--desktop":
710
+ case "background-color":
711
+ case "compact":
712
+ this.$cell.setAttribute(e, this.getAttribute(e) || "");
713
+ break;
714
+ case "name":
715
+ case "value":
716
+ this.$checkbox && this.$checkbox.setAttribute(e, n);
717
+ break;
718
+ case "state":
719
+ if (this.$checkbox) {
720
+ if (this.checkName(o, n)) this.$checkbox.setAttribute("state", n);
721
+ else {
722
+ i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
723
+ return;
724
+ }
725
+ }
726
+ break;
727
+ case "checked":
728
+ this.handleCheckedAttributeChange(n);
729
+ break;
730
+ case "checkbox-position": this.handleCheckboxPositionChange(n);
731
+ }
732
+ }
733
+ handleDisabledAttributeChange(e) {
734
+ e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
735
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
736
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
737
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
738
+ }));
739
+ }
740
+ handleCheckedAttributeChange(e) {
741
+ this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
742
+ bubbles: !0,
743
+ composed: !0
744
+ })));
745
+ }
746
+ handleCheckboxPositionChange(e) {
747
+ if (!this.checkName(M, e)) {
748
+ i(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${M.join("\", \"")}".`);
749
+ return;
750
+ }
751
+ this.$checkbox && (e === "" || e === "left" ? this.$checkbox.setAttribute("slot", "prefix") : e === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
752
+ }
753
+ static get formAssociated() {
754
+ return !0;
755
+ }
756
+ formResetCallback() {
757
+ this.checked = !1;
758
+ }
759
+ formStateRestoreCallback(e) {
760
+ this.checked = e;
761
+ }
762
+ formData() {
763
+ let e = new FormData();
764
+ if (this.name) {
765
+ let t = this.getAttribute("name");
766
+ t && (this.checked ? e.set(t, this.value ?? "") : e.delete(t));
767
+ }
768
+ return e;
769
+ }
770
+ get $cell() {
771
+ return this.shadowRoot.querySelector("px-cell");
772
+ }
773
+ get $el() {
774
+ return this.shadowRoot.querySelector(".cell-checkbox");
775
+ }
776
+ get $checkbox() {
777
+ return this.shadowRoot.querySelector("px-checkbox");
778
+ }
779
+ get $slotVisual() {
780
+ return this.querySelector("[slot=\"visual\"]");
781
+ }
782
+ get $children() {
783
+ return this.querySelectorAll("px-cell-checkbox > *");
784
+ }
785
+ get inverted() {
786
+ return this.hasAttribute("inverted");
787
+ }
788
+ set inverted(e) {
789
+ n(this, "inverted", e);
790
+ }
791
+ get variant() {
792
+ return this.getAttribute("variant");
793
+ }
794
+ set variant(e) {
795
+ a(this, "variant", e);
796
+ }
797
+ get disabled() {
798
+ return this.hasAttribute("disabled");
799
+ }
800
+ set disabled(e) {
801
+ n(this, "disabled", e);
802
+ }
803
+ get separator() {
804
+ return this.getAttribute("separator");
805
+ }
806
+ set separator(e) {
807
+ a(this, "separator", e);
808
+ }
809
+ get separatorMobile() {
810
+ return this.getAttribute("separator--mobile");
811
+ }
812
+ set separatorMobile(e) {
813
+ a(this, "separator--mobile", e);
814
+ }
815
+ get separatorTablet() {
816
+ return this.getAttribute("separator--tablet");
817
+ }
818
+ set separatorTablet(e) {
819
+ a(this, "separator--tablet", e);
820
+ }
821
+ get separatorLaptop() {
822
+ return this.getAttribute("separator--laptop");
823
+ }
824
+ set separatorLaptop(e) {
825
+ a(this, "separator--laptop", e);
826
+ }
827
+ get separatorDesktop() {
828
+ return this.getAttribute("separator--desktop");
829
+ }
830
+ set separatorDesktop(e) {
831
+ a(this, "separator--desktop", e);
832
+ }
833
+ get radius() {
834
+ return this.getAttribute("radius");
835
+ }
836
+ set radius(e) {
837
+ a(this, "radius", e);
838
+ }
839
+ get radiusMobile() {
840
+ return this.getAttribute("radius--mobile");
841
+ }
842
+ set radiusMobile(e) {
843
+ a(this, "radius--mobile", e);
844
+ }
845
+ get radiusTablet() {
846
+ return this.getAttribute("radius--tablet");
847
+ }
848
+ set radiusTablet(e) {
849
+ a(this, "radius--tablet", e);
850
+ }
851
+ get radiusLaptop() {
852
+ return this.getAttribute("radius--laptop");
853
+ }
854
+ set radiusLaptop(e) {
855
+ a(this, "radius--laptop", e);
856
+ }
857
+ get radiusDesktop() {
858
+ return this.getAttribute("radius--desktop");
859
+ }
860
+ set radiusDesktop(e) {
861
+ a(this, "radius--desktop", e);
862
+ }
863
+ get checked() {
864
+ return this.hasAttribute("checked");
865
+ }
866
+ set checked(e) {
867
+ n(this, "checked", e);
868
+ }
869
+ get name() {
870
+ return this.getAttribute("name");
871
+ }
872
+ set name(e) {
873
+ a(this, "name", e);
874
+ }
875
+ get state() {
876
+ return this.getAttribute("state");
877
+ }
878
+ set state(e) {
879
+ a(this, "state", e);
880
+ }
881
+ get value() {
882
+ return this.getAttribute("value");
883
+ }
884
+ set value(e) {
885
+ a(this, "value", e);
886
+ }
887
+ get checkboxPosition() {
888
+ return this.getAttribute("checkbox-position");
889
+ }
890
+ set checkboxPosition(e) {
891
+ a(this, "checkbox-position", e);
892
+ }
893
+ get backgroundColor() {
894
+ return this.getAttribute("background-color");
895
+ }
896
+ set backgroundColor(e) {
897
+ a(this, "background-color", e);
898
+ }
899
+ get compact() {
900
+ return this.hasAttribute("compact");
901
+ }
902
+ set compact(e) {
903
+ n(this, "compact", e);
904
+ }
905
+ };
906
+ customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", N);
907
+ //#endregion
908
+ //#region src/CellSwitch.ts
909
+ var P = new CSSStyleSheet();
910
+ P.replaceSync(g);
911
+ var F = class extends t {
912
+ template() {
913
+ return "\n <div class=\"cell-switch\">\n <px-cell hoverable>\n <px-switch slot=\"action-indicator\" inert></px-switch>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n </px-cell>\n </div>\n ";
914
+ }
915
+ constructor() {
916
+ super(P), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.(), this.tabIndex = 0;
917
+ }
918
+ connectedCallback() {
919
+ if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
920
+ let e = this.querySelector("px-img[slot=\"visual\"]");
921
+ e && u(e);
922
+ }
923
+ this.addEventListener("mouseover", () => {
924
+ this.$switch.setAttribute("hover", "");
925
+ }), this.addEventListener("mouseout", () => {
926
+ this.$switch.removeAttribute("hover");
927
+ }), this.addEventListener("keypress", (e) => {
928
+ e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
929
+ }), this.addEventListener("click", (e) => {
930
+ this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
931
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
932
+ }
933
+ static get observedAttributes() {
934
+ return [
935
+ "inverted",
936
+ "variant",
937
+ "disabled",
938
+ "separator",
939
+ "separator--mobile",
940
+ "separator--tablet",
941
+ "separator--laptop",
942
+ "separator--desktop",
943
+ "radius",
944
+ "radius--mobile",
945
+ "radius--tablet",
946
+ "radius--laptop",
947
+ "radius--desktop",
948
+ "name",
949
+ "value",
950
+ "checked",
951
+ "background-color",
952
+ "compact"
953
+ ];
954
+ }
955
+ attributeChangedCallback(e, t, n) {
956
+ if (t !== n) switch (e) {
957
+ case "variant":
958
+ this.$cell.variant = this.variant;
959
+ break;
960
+ case "inverted":
961
+ p(this.$cell, this.$children, this.inverted, [this.$switch]);
962
+ break;
963
+ case "disabled":
964
+ this.handleDisabledAttributeChange(n !== null);
965
+ break;
966
+ case "radius":
967
+ case "radius--mobile":
968
+ case "radius--tablet":
969
+ case "radius--laptop":
970
+ case "radius--desktop":
971
+ case "separator":
972
+ case "separator--mobile":
973
+ case "separator--tablet":
974
+ case "separator--laptop":
975
+ case "separator--desktop":
976
+ case "background-color":
977
+ case "compact":
978
+ this.$cell.setAttribute(e, this.getAttribute(e) || "");
979
+ break;
980
+ case "name":
981
+ case "value":
982
+ this.$switch && this.$switch.setAttribute(e, n);
983
+ break;
984
+ case "checked": this.handleCheckedAttributeChange(n);
985
+ }
986
+ }
987
+ handleDisabledAttributeChange(e) {
988
+ e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
989
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
990
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
991
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
992
+ }));
993
+ }
994
+ handleCheckedAttributeChange(e) {
995
+ this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
996
+ bubbles: !0,
997
+ composed: !0
998
+ })));
999
+ }
1000
+ static get formAssociated() {
1001
+ return !0;
1002
+ }
1003
+ formResetCallback() {
1004
+ this.checked = !1;
1005
+ }
1006
+ formStateRestoreCallback(e) {
1007
+ this.checked = e;
1008
+ }
1009
+ formData() {
1010
+ let e = new FormData();
1011
+ if (this.name) {
1012
+ let t = this.getAttribute("name");
1013
+ t && (this.checked ? e.set(t, this.value ?? "") : e.delete(t));
1014
+ }
1015
+ return e;
1016
+ }
1017
+ get $cell() {
1018
+ return this.shadowRoot.querySelector("px-cell");
1019
+ }
1020
+ get $el() {
1021
+ return this.shadowRoot.querySelector(".cell-switch");
1022
+ }
1023
+ get $switch() {
1024
+ return this.shadowRoot.querySelector("px-switch");
1025
+ }
1026
+ get $slotVisual() {
1027
+ return this.querySelector("[slot=\"visual\"]");
1028
+ }
1029
+ get $children() {
1030
+ return this.querySelectorAll("px-cell-switch > *");
1031
+ }
1032
+ get inverted() {
1033
+ return this.hasAttribute("inverted");
1034
+ }
1035
+ set inverted(e) {
1036
+ n(this, "inverted", e);
1037
+ }
1038
+ get variant() {
1039
+ return this.getAttribute("variant");
1040
+ }
1041
+ set variant(e) {
1042
+ a(this, "variant", e);
1043
+ }
1044
+ get disabled() {
1045
+ return this.hasAttribute("disabled");
1046
+ }
1047
+ set disabled(e) {
1048
+ n(this, "disabled", e);
1049
+ }
1050
+ get separator() {
1051
+ return this.getAttribute("separator");
1052
+ }
1053
+ set separator(e) {
1054
+ a(this, "separator", e);
1055
+ }
1056
+ get separatorMobile() {
1057
+ return this.getAttribute("separator--mobile");
1058
+ }
1059
+ set separatorMobile(e) {
1060
+ a(this, "separator--mobile", e);
1061
+ }
1062
+ get separatorTablet() {
1063
+ return this.getAttribute("separator--tablet");
1064
+ }
1065
+ set separatorTablet(e) {
1066
+ a(this, "separator--tablet", e);
1067
+ }
1068
+ get separatorLaptop() {
1069
+ return this.getAttribute("separator--laptop");
1070
+ }
1071
+ set separatorLaptop(e) {
1072
+ a(this, "separator--laptop", e);
1073
+ }
1074
+ get separatorDesktop() {
1075
+ return this.getAttribute("separator--desktop");
1076
+ }
1077
+ set separatorDesktop(e) {
1078
+ a(this, "separator--desktop", e);
1079
+ }
1080
+ get radius() {
1081
+ return this.getAttribute("radius");
1082
+ }
1083
+ set radius(e) {
1084
+ a(this, "radius", e);
1085
+ }
1086
+ get radiusMobile() {
1087
+ return this.getAttribute("radius--mobile");
1088
+ }
1089
+ set radiusMobile(e) {
1090
+ a(this, "radius--mobile", e);
1091
+ }
1092
+ get radiusTablet() {
1093
+ return this.getAttribute("radius--tablet");
1094
+ }
1095
+ set radiusTablet(e) {
1096
+ a(this, "radius--tablet", e);
1097
+ }
1098
+ get radiusLaptop() {
1099
+ return this.getAttribute("radius--laptop");
1100
+ }
1101
+ set radiusLaptop(e) {
1102
+ a(this, "radius--laptop", e);
1103
+ }
1104
+ get radiusDesktop() {
1105
+ return this.getAttribute("radius--desktop");
1106
+ }
1107
+ set radiusDesktop(e) {
1108
+ a(this, "radius--desktop", e);
1109
+ }
1110
+ get checked() {
1111
+ return this.hasAttribute("checked");
1112
+ }
1113
+ set checked(e) {
1114
+ n(this, "checked", e);
1115
+ }
1116
+ get name() {
1117
+ return this.getAttribute("name");
1118
+ }
1119
+ set name(e) {
1120
+ a(this, "name", e);
1121
+ }
1122
+ get state() {
1123
+ return this.getAttribute("state");
1124
+ }
1125
+ set state(e) {
1126
+ a(this, "state", e);
1127
+ }
1128
+ get value() {
1129
+ return this.getAttribute("value");
1130
+ }
1131
+ set value(e) {
1132
+ a(this, "value", e);
1133
+ }
1134
+ get backgroundColor() {
1135
+ return this.getAttribute("background-color");
1136
+ }
1137
+ set backgroundColor(e) {
1138
+ a(this, "background-color", e);
1139
+ }
1140
+ get compact() {
1141
+ return this.hasAttribute("compact");
1142
+ }
1143
+ set compact(e) {
1144
+ n(this, "compact", e);
1145
+ }
1146
+ };
1147
+ customElements.get("px-cell-switch") || customElements.define("px-cell-switch", F);
1148
+ //#endregion
1149
+ //#region src/CellRadio.ts
1150
+ var I = new CSSStyleSheet();
1151
+ I.replaceSync(g);
1152
+ var L = [
1153
+ "",
1154
+ "left",
1155
+ "right"
1156
+ ], R = class extends t {
1157
+ template() {
1158
+ return "\n <div class=\"cell-radio\">\n <px-cell hoverable>\n <px-radio slot=\"prefix\" inert></px-radio>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n </px-cell>\n </div>\n ";
1159
+ }
1160
+ constructor() {
1161
+ super(I), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
1162
+ }
1163
+ connectedCallback() {
1164
+ if (this.tabIndex = this.parentElement?.querySelector("px-cell-radio") === this ? 0 : -1, this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
1165
+ let e = this.querySelector("px-img[slot=\"visual\"]");
1166
+ e && u(e);
1167
+ }
1168
+ this.addEventListener("mouseover", () => {
1169
+ this.$radio.setAttribute("hover", "");
1170
+ }), this.addEventListener("mouseout", () => {
1171
+ this.$radio.removeAttribute("hover");
1172
+ }), this.addEventListener("keypress", (e) => {
1173
+ e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
1174
+ }), this.addEventListener("click", (e) => {
1175
+ this.checked ||= !0, e.stopPropagation(), e.preventDefault();
1176
+ }), this.hasAttribute("checked") && (this.checked = !0), d(this);
1177
+ }
1178
+ static get observedAttributes() {
1179
+ return [
1180
+ "inverted",
1181
+ "variant",
1182
+ "disabled",
1183
+ "separator",
1184
+ "separator--mobile",
1185
+ "separator--tablet",
1186
+ "separator--laptop",
1187
+ "separator--desktop",
1188
+ "radius",
1189
+ "radius--mobile",
1190
+ "radius--tablet",
1191
+ "radius--laptop",
1192
+ "radius--desktop",
1193
+ "name",
1194
+ "value",
1195
+ "state",
1196
+ "checked",
1197
+ "radio-position",
1198
+ "background-color",
1199
+ "compact"
1200
+ ];
1201
+ }
1202
+ attributeChangedCallback(e, t, n) {
1203
+ if (t !== n) switch (e) {
1204
+ case "variant":
1205
+ this.$cell.variant = this.variant;
1206
+ break;
1207
+ case "inverted":
1208
+ p(this.$cell, this.$children, this.inverted, [this.$radio]);
1209
+ break;
1210
+ case "disabled":
1211
+ this.handleDisabledAttributeChange(n !== null);
1212
+ break;
1213
+ case "radius":
1214
+ case "radius--mobile":
1215
+ case "radius--tablet":
1216
+ case "radius--laptop":
1217
+ case "radius--desktop":
1218
+ case "separator":
1219
+ case "separator--mobile":
1220
+ case "separator--tablet":
1221
+ case "separator--laptop":
1222
+ case "separator--desktop":
1223
+ case "background-color":
1224
+ case "compact":
1225
+ this.$cell.setAttribute(e, this.getAttribute(e) || "");
1226
+ break;
1227
+ case "name":
1228
+ case "value":
1229
+ this.$radio && this.$radio.setAttribute(e, n);
1230
+ break;
1231
+ case "state":
1232
+ if (this.$radio) {
1233
+ if (this.checkName(s, n)) this.$radio.setAttribute("state", n);
1234
+ else {
1235
+ i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${s.join("\", \"")}".`);
1236
+ return;
1237
+ }
1238
+ }
1239
+ break;
1240
+ case "checked":
1241
+ this.handleCheckedAttributeChange(n);
1242
+ break;
1243
+ case "radio-position": this.handleRadioPositionChange(n);
1244
+ }
1245
+ }
1246
+ handleDisabledAttributeChange(e) {
1247
+ e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
1248
+ e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1249
+ })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
1250
+ e.hasAttribute("disabled") && e.removeAttribute("disabled");
1251
+ }));
1252
+ }
1253
+ handleCheckedAttributeChange(e) {
1254
+ this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
1255
+ bubbles: !0,
1256
+ composed: !0
1257
+ })));
1258
+ }
1259
+ handleRadioPositionChange(e) {
1260
+ if (!this.checkName(L, e)) {
1261
+ i(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${L.join("\", \"")}".`);
1262
+ return;
1263
+ }
1264
+ this.$radio && (e === "" || e === "left" ? this.$radio.setAttribute("slot", "prefix") : e === "right" && this.$radio.setAttribute("slot", "action-indicator"));
1265
+ }
1266
+ static get formAssociated() {
1267
+ return !0;
1268
+ }
1269
+ formResetCallback() {
1270
+ this.checked = !1;
1271
+ }
1272
+ formStateRestoreCallback(e) {
1273
+ this.checked = e;
1274
+ }
1275
+ formData() {
1276
+ let e = new FormData();
1277
+ if (this.name) {
1278
+ let t = this.getAttribute("name");
1279
+ t && (this.checked ? e.set(t, this.$radio.value) : e.delete(t));
1280
+ }
1281
+ return e;
1282
+ }
1283
+ get $cell() {
1284
+ return this.shadowRoot.querySelector("px-cell");
1285
+ }
1286
+ get $el() {
1287
+ return this.shadowRoot.querySelector(".cell-radio");
1288
+ }
1289
+ get $radio() {
1290
+ return this.shadowRoot.querySelector("px-radio");
1291
+ }
1292
+ get $slotVisual() {
1293
+ return this.querySelector("[slot=\"visual\"]");
1294
+ }
1295
+ get $children() {
1296
+ return this.querySelectorAll("px-cell-radio > *");
1297
+ }
1298
+ get inverted() {
1299
+ return this.hasAttribute("inverted");
1300
+ }
1301
+ set inverted(e) {
1302
+ n(this, "inverted", e);
1303
+ }
1304
+ get variant() {
1305
+ return this.getAttribute("variant");
1306
+ }
1307
+ set variant(e) {
1308
+ a(this, "variant", e);
1309
+ }
1310
+ get disabled() {
1311
+ return this.hasAttribute("disabled");
1312
+ }
1313
+ set disabled(e) {
1314
+ n(this, "disabled", e);
1315
+ }
1316
+ get separator() {
1317
+ return this.getAttribute("separator");
1318
+ }
1319
+ set separator(e) {
1320
+ a(this, "separator", e);
1321
+ }
1322
+ get separatorMobile() {
1323
+ return this.getAttribute("separator--mobile");
1324
+ }
1325
+ set separatorMobile(e) {
1326
+ a(this, "separator--mobile", e);
1327
+ }
1328
+ get separatorTablet() {
1329
+ return this.getAttribute("separator--tablet");
1330
+ }
1331
+ set separatorTablet(e) {
1332
+ a(this, "separator--tablet", e);
1333
+ }
1334
+ get separatorLaptop() {
1335
+ return this.getAttribute("separator--laptop");
1336
+ }
1337
+ set separatorLaptop(e) {
1338
+ a(this, "separator--laptop", e);
1339
+ }
1340
+ get separatorDesktop() {
1341
+ return this.getAttribute("separator--desktop");
1342
+ }
1343
+ set separatorDesktop(e) {
1344
+ a(this, "separator--desktop", e);
1345
+ }
1346
+ get radius() {
1347
+ return this.getAttribute("radius");
1348
+ }
1349
+ set radius(e) {
1350
+ a(this, "radius", e);
1351
+ }
1352
+ get radiusMobile() {
1353
+ return this.getAttribute("radius--mobile");
1354
+ }
1355
+ set radiusMobile(e) {
1356
+ a(this, "radius--mobile", e);
1357
+ }
1358
+ get radiusTablet() {
1359
+ return this.getAttribute("radius--tablet");
1360
+ }
1361
+ set radiusTablet(e) {
1362
+ a(this, "radius--tablet", e);
1363
+ }
1364
+ get radiusLaptop() {
1365
+ return this.getAttribute("radius--laptop");
1366
+ }
1367
+ set radiusLaptop(e) {
1368
+ a(this, "radius--laptop", e);
1369
+ }
1370
+ get radiusDesktop() {
1371
+ return this.getAttribute("radius--desktop");
1372
+ }
1373
+ set radiusDesktop(e) {
1374
+ a(this, "radius--desktop", e);
1375
+ }
1376
+ get checked() {
1377
+ return this.hasAttribute("checked");
1378
+ }
1379
+ set checked(e) {
1380
+ n(this, "checked", e);
1381
+ }
1382
+ get name() {
1383
+ return this.getAttribute("name");
1384
+ }
1385
+ set name(e) {
1386
+ a(this, "name", e);
1387
+ }
1388
+ get state() {
1389
+ return this.getAttribute("state") ?? "";
1390
+ }
1391
+ set state(e) {
1392
+ a(this, "state", e);
1393
+ }
1394
+ get value() {
1395
+ return this.getAttribute("value");
1396
+ }
1397
+ set value(e) {
1398
+ a(this, "value", e);
1399
+ }
1400
+ get radioPosition() {
1401
+ return this.getAttribute("radio-position");
1402
+ }
1403
+ set radioPosition(e) {
1404
+ a(this, "radio-position", e);
1405
+ }
1406
+ get backgroundColor() {
1407
+ return this.getAttribute("background-color");
1408
+ }
1409
+ set backgroundColor(e) {
1410
+ a(this, "background-color", e);
1411
+ }
1412
+ get compact() {
1413
+ return this.hasAttribute("compact");
1414
+ }
1415
+ set compact(e) {
1416
+ n(this, "compact", e);
1417
+ }
1550
1418
  };
1419
+ customElements.get("px-cell-radio") || customElements.define("px-cell-radio", R);
1420
+ //#endregion
1421
+ export { S as Cell, A as CellButton, N as CellCheckbox, E as CellLink, R as CellRadio, F as CellSwitch, M as cellCheckboxPosition, L as cellRadioPosition, x as radiusValues, b as suffixButtonIconVariantValues };