@proximus/lavender-cell 1.4.14-beta.3 → 1.4.14

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