@proximus/lavender-cell 1.4.9-alpha.9 → 1.4.9-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +71 -69
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
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
|
|
4
|
-
import { stateValues as
|
|
5
|
-
const
|
|
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
6
|
"",
|
|
7
7
|
"container-light",
|
|
8
8
|
"container-default"
|
|
@@ -13,9 +13,11 @@ function c(r) {
|
|
|
13
13
|
function d(r) {
|
|
14
14
|
r.getAttribute("variant") === "contained" && !r.getAttribute("background-color") && r.setAttribute("background-color", "container-light");
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
if (!p(
|
|
18
|
-
l(
|
|
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
|
+
);
|
|
19
21
|
return;
|
|
20
22
|
}
|
|
21
23
|
t !== null && t !== "" && t !== "default" && r.classList.toggle(t), e !== null && e !== "" && e !== "default" && r.classList.toggle(e);
|
|
@@ -27,10 +29,10 @@ function u(r, t, e, s = []) {
|
|
|
27
29
|
i.hasAttribute("inverted") && i.removeAttribute("inverted");
|
|
28
30
|
}));
|
|
29
31
|
}
|
|
30
|
-
function
|
|
32
|
+
function j(r, t, e, s, i) {
|
|
31
33
|
if (!p(i, s)) {
|
|
32
34
|
l(
|
|
33
|
-
|
|
35
|
+
`"${s}" is not a valid ${t} value for a cell. Allowed values are: "${i.join('", "')}".`
|
|
34
36
|
);
|
|
35
37
|
return;
|
|
36
38
|
}
|
|
@@ -45,17 +47,17 @@ function B(r, t, e, s, i) {
|
|
|
45
47
|
};
|
|
46
48
|
a(e), a(s);
|
|
47
49
|
}
|
|
48
|
-
function
|
|
50
|
+
function E(r, t, e, s = [], i = {}) {
|
|
49
51
|
e ? (r.setAttribute("disabled", ""), s.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
|
|
50
52
|
a.hasAttribute("disabled") || a.setAttribute("disabled", "");
|
|
51
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) => {
|
|
52
54
|
a.hasAttribute("disabled") && a.removeAttribute("disabled");
|
|
53
55
|
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
|
|
54
56
|
}
|
|
55
|
-
const n = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
const
|
|
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 {
|
|
59
61
|
template() {
|
|
60
62
|
return `
|
|
61
63
|
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
@@ -77,7 +79,7 @@ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class
|
|
|
77
79
|
`;
|
|
78
80
|
}
|
|
79
81
|
constructor() {
|
|
80
|
-
super(
|
|
82
|
+
super(L, D);
|
|
81
83
|
const t = document.createElement("div");
|
|
82
84
|
t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
83
85
|
}
|
|
@@ -120,7 +122,7 @@ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class
|
|
|
120
122
|
if (e !== s)
|
|
121
123
|
switch (t) {
|
|
122
124
|
case "variant":
|
|
123
|
-
|
|
125
|
+
H(this.$el, e, s);
|
|
124
126
|
break;
|
|
125
127
|
case "inverted":
|
|
126
128
|
for (let i = 0; i < this.$children.length; i++)
|
|
@@ -131,15 +133,15 @@ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class
|
|
|
131
133
|
case "radius--tablet":
|
|
132
134
|
case "radius--laptop":
|
|
133
135
|
case "radius--desktop":
|
|
134
|
-
this.updateRadius(t, e, s,
|
|
136
|
+
this.updateRadius(t, e, s, O);
|
|
135
137
|
break;
|
|
136
138
|
case "background-color":
|
|
137
|
-
|
|
139
|
+
j(
|
|
138
140
|
this.$el,
|
|
139
141
|
t,
|
|
140
142
|
e,
|
|
141
143
|
s,
|
|
142
|
-
|
|
144
|
+
B
|
|
143
145
|
);
|
|
144
146
|
break;
|
|
145
147
|
default:
|
|
@@ -149,14 +151,14 @@ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class
|
|
|
149
151
|
}
|
|
150
152
|
configureSlotSuffixButtonIcon(t) {
|
|
151
153
|
t.hasAttribute("variant") && p(
|
|
152
|
-
|
|
154
|
+
_,
|
|
153
155
|
t.getAttribute("variant")
|
|
154
156
|
) || t.setAttribute("variant", "secondary");
|
|
155
157
|
}
|
|
156
158
|
updateRadius(t, e, s, i) {
|
|
157
159
|
if (!p(i, s)) {
|
|
158
160
|
l(
|
|
159
|
-
|
|
161
|
+
`"${s}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
160
162
|
);
|
|
161
163
|
return;
|
|
162
164
|
}
|
|
@@ -284,12 +286,12 @@ const F = ["secondary"], _ = ["", "default", "top", "bottom", "none"], x = class
|
|
|
284
286
|
}
|
|
285
287
|
};
|
|
286
288
|
x.nativeName = "div";
|
|
287
|
-
let
|
|
288
|
-
customElements.get("px-cell") || customElements.define("px-cell",
|
|
289
|
-
const
|
|
290
|
-
|
|
291
|
-
const
|
|
292
|
-
|
|
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);
|
|
293
295
|
const f = class f extends m {
|
|
294
296
|
template() {
|
|
295
297
|
return `
|
|
@@ -309,7 +311,7 @@ const f = class f extends m {
|
|
|
309
311
|
`;
|
|
310
312
|
}
|
|
311
313
|
constructor() {
|
|
312
|
-
super(
|
|
314
|
+
super(T, I);
|
|
313
315
|
const t = document.createElement(f.nativeName);
|
|
314
316
|
t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
315
317
|
}
|
|
@@ -357,7 +359,7 @@ const f = class f extends m {
|
|
|
357
359
|
]);
|
|
358
360
|
break;
|
|
359
361
|
case "disabled":
|
|
360
|
-
|
|
362
|
+
E(this.$cell, this.$children, this.disabled, [], {
|
|
361
363
|
ariaEl: this.$el,
|
|
362
364
|
setAria: !0,
|
|
363
365
|
setTabIndex: !0
|
|
@@ -498,12 +500,12 @@ const f = class f extends m {
|
|
|
498
500
|
}
|
|
499
501
|
};
|
|
500
502
|
f.nativeName = "a";
|
|
501
|
-
let
|
|
502
|
-
customElements.get("px-cell-link") || customElements.define("px-cell-link",
|
|
503
|
-
const
|
|
504
|
-
|
|
505
|
-
const
|
|
506
|
-
|
|
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);
|
|
507
509
|
const h = class h extends m {
|
|
508
510
|
template() {
|
|
509
511
|
return `
|
|
@@ -516,7 +518,7 @@ const h = class h extends m {
|
|
|
516
518
|
`;
|
|
517
519
|
}
|
|
518
520
|
constructor() {
|
|
519
|
-
super(
|
|
521
|
+
super(M, q);
|
|
520
522
|
const t = document.createElement(h.nativeName);
|
|
521
523
|
t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
522
524
|
}
|
|
@@ -557,7 +559,7 @@ const h = class h extends m {
|
|
|
557
559
|
u(this.$cell, this.$children, this.inverted);
|
|
558
560
|
break;
|
|
559
561
|
case "disabled":
|
|
560
|
-
|
|
562
|
+
E(this.$cell, this.$children, this.disabled, [], {
|
|
561
563
|
ariaEl: this.$el,
|
|
562
564
|
setAria: !0,
|
|
563
565
|
setTabIndex: !0
|
|
@@ -685,10 +687,10 @@ const h = class h extends m {
|
|
|
685
687
|
h.nativeName = "button", h.accessorExclusions = ["disabled"];
|
|
686
688
|
let k = h;
|
|
687
689
|
customElements.get("px-cell-button") || customElements.define("px-cell-button", k);
|
|
688
|
-
const
|
|
689
|
-
|
|
690
|
-
const
|
|
691
|
-
class
|
|
690
|
+
const R = new CSSStyleSheet();
|
|
691
|
+
R.replaceSync(n);
|
|
692
|
+
const y = ["", "left", "right"];
|
|
693
|
+
class J extends A {
|
|
692
694
|
template() {
|
|
693
695
|
return `
|
|
694
696
|
<div class="cell-checkbox">
|
|
@@ -703,7 +705,7 @@ class G extends A {
|
|
|
703
705
|
}
|
|
704
706
|
constructor() {
|
|
705
707
|
var t;
|
|
706
|
-
super(
|
|
708
|
+
super(R), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
|
|
707
709
|
}
|
|
708
710
|
connectedCallback() {
|
|
709
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) {
|
|
@@ -782,11 +784,11 @@ class G extends A {
|
|
|
782
784
|
break;
|
|
783
785
|
case "state":
|
|
784
786
|
if (this.$checkbox)
|
|
785
|
-
if (this.checkName(
|
|
787
|
+
if (this.checkName($, s))
|
|
786
788
|
this.$checkbox.setAttribute("state", s);
|
|
787
789
|
else {
|
|
788
790
|
l(
|
|
789
|
-
|
|
791
|
+
`"${s}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${$.join('", "')}".`
|
|
790
792
|
);
|
|
791
793
|
return;
|
|
792
794
|
}
|
|
@@ -817,9 +819,9 @@ class G extends A {
|
|
|
817
819
|
));
|
|
818
820
|
}
|
|
819
821
|
handleCheckboxPositionChange(t) {
|
|
820
|
-
if (!this.checkName(
|
|
822
|
+
if (!this.checkName(y, t)) {
|
|
821
823
|
l(
|
|
822
|
-
|
|
824
|
+
`"${t}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${y.join('", "')}".`
|
|
823
825
|
);
|
|
824
826
|
return;
|
|
825
827
|
}
|
|
@@ -978,15 +980,15 @@ class G extends A {
|
|
|
978
980
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
979
981
|
}
|
|
980
982
|
}
|
|
981
|
-
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox",
|
|
982
|
-
const
|
|
983
|
-
|
|
984
|
-
class
|
|
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 {
|
|
985
987
|
template() {
|
|
986
988
|
return `
|
|
987
989
|
<div class="cell-switch">
|
|
988
990
|
<px-cell hoverable>
|
|
989
|
-
<px-switch slot="action-indicator"
|
|
991
|
+
<px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
|
|
990
992
|
<slot name="visual" slot="visual"></slot>
|
|
991
993
|
<slot name="label" slot="label"></slot>
|
|
992
994
|
<slot name="description" slot="description"></slot>
|
|
@@ -996,7 +998,7 @@ class J extends A {
|
|
|
996
998
|
}
|
|
997
999
|
constructor() {
|
|
998
1000
|
var t;
|
|
999
|
-
super(
|
|
1001
|
+
super(z), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
|
|
1000
1002
|
}
|
|
1001
1003
|
connectedCallback() {
|
|
1002
1004
|
if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
|
|
@@ -1240,16 +1242,16 @@ class J extends A {
|
|
|
1240
1242
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1241
1243
|
}
|
|
1242
1244
|
}
|
|
1243
|
-
customElements.get("px-cell-switch") || customElements.define("px-cell-switch",
|
|
1244
|
-
const
|
|
1245
|
-
|
|
1246
|
-
const
|
|
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"];
|
|
1247
1249
|
class Q extends A {
|
|
1248
1250
|
template() {
|
|
1249
1251
|
return `
|
|
1250
1252
|
<div class="cell-radio">
|
|
1251
1253
|
<px-cell hoverable>
|
|
1252
|
-
<px-radio slot="prefix"
|
|
1254
|
+
<px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
1253
1255
|
<slot name="visual" slot="visual"></slot>
|
|
1254
1256
|
<slot name="label" slot="label"></slot>
|
|
1255
1257
|
<slot name="description" slot="description"></slot>
|
|
@@ -1259,7 +1261,7 @@ class Q extends A {
|
|
|
1259
1261
|
}
|
|
1260
1262
|
constructor() {
|
|
1261
1263
|
var t;
|
|
1262
|
-
super(
|
|
1264
|
+
super(P), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
1263
1265
|
}
|
|
1264
1266
|
connectedCallback() {
|
|
1265
1267
|
var t;
|
|
@@ -1339,11 +1341,11 @@ class Q extends A {
|
|
|
1339
1341
|
break;
|
|
1340
1342
|
case "state":
|
|
1341
1343
|
if (this.$radio)
|
|
1342
|
-
if (this.checkName(
|
|
1344
|
+
if (this.checkName(S, s))
|
|
1343
1345
|
this.$radio.setAttribute("state", s);
|
|
1344
1346
|
else {
|
|
1345
1347
|
l(
|
|
1346
|
-
|
|
1348
|
+
`"${s}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${S.join('", "')}".`
|
|
1347
1349
|
);
|
|
1348
1350
|
return;
|
|
1349
1351
|
}
|
|
@@ -1374,9 +1376,9 @@ class Q extends A {
|
|
|
1374
1376
|
));
|
|
1375
1377
|
}
|
|
1376
1378
|
handleRadioPositionChange(t) {
|
|
1377
|
-
if (!this.checkName(
|
|
1379
|
+
if (!this.checkName(w, t)) {
|
|
1378
1380
|
l(
|
|
1379
|
-
|
|
1381
|
+
`"${t}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join('", "')}".`
|
|
1380
1382
|
);
|
|
1381
1383
|
return;
|
|
1382
1384
|
}
|
|
@@ -1537,14 +1539,14 @@ class Q extends A {
|
|
|
1537
1539
|
}
|
|
1538
1540
|
customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
|
|
1539
1541
|
export {
|
|
1540
|
-
|
|
1542
|
+
v as Cell,
|
|
1541
1543
|
k as CellButton,
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
+
J as CellCheckbox,
|
|
1545
|
+
g as CellLink,
|
|
1544
1546
|
Q as CellRadio,
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1547
|
+
K as CellSwitch,
|
|
1548
|
+
y as cellCheckboxPosition,
|
|
1549
|
+
w as cellRadioPosition,
|
|
1550
|
+
O as radiusValues,
|
|
1551
|
+
_ as suffixButtonIconVariantValues
|
|
1550
1552
|
};
|