@proximus/lavender-cell 2.0.0-alpha.100 → 2.0.0-alpha.101
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 +69 -67
- 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 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)}",
|
|
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,10 +980,10 @@ 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">
|
|
@@ -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,10 +1242,10 @@ 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 `
|
|
@@ -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
|
};
|