@proximus/lavender-cell 2.0.0-alpha.16 → 2.0.0-alpha.160
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/CellButton.d.ts +7 -0
- package/dist/index.es.js +76 -74
- package/package.json +2 -2
package/dist/CellButton.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { PxElement } from '@proximus/lavender-common';
|
|
2
2
|
import '@proximus/lavender-layout';
|
|
3
3
|
import { Cell } from '@proximus/lavender-cell';
|
|
4
|
+
/**
|
|
5
|
+
* @summary A cell component that acts as a button.
|
|
6
|
+
* @attr {string} name - The name of the button, submitted as a pair with the button's value as part of the form data.
|
|
7
|
+
* @attr {string} value - The value associated with the button's name when it's submitted with a form.
|
|
8
|
+
* @attr {string} type - The default behavior of the button. Possible values are 'submit', 'reset', and 'button'.
|
|
9
|
+
* @attr {boolean} disabled - Whether the button is disabled.
|
|
10
|
+
*/
|
|
4
11
|
export declare class CellButton extends PxElement<HTMLButtonElement> {
|
|
5
12
|
static nativeName: string;
|
|
6
13
|
static accessorExclusions: string[];
|
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,13 +286,13 @@ 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
|
-
|
|
293
|
-
const
|
|
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 {
|
|
294
296
|
template() {
|
|
295
297
|
return `
|
|
296
298
|
<px-cell hoverable>
|
|
@@ -309,8 +311,8 @@ const g = class g extends m {
|
|
|
309
311
|
`;
|
|
310
312
|
}
|
|
311
313
|
constructor() {
|
|
312
|
-
super(
|
|
313
|
-
const t = document.createElement(
|
|
314
|
+
super(T, I);
|
|
315
|
+
const t = document.createElement(f.nativeName);
|
|
314
316
|
t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
315
317
|
}
|
|
316
318
|
connectedCallback() {
|
|
@@ -357,7 +359,7 @@ const g = class g 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
|
|
@@ -497,13 +499,13 @@ const g = class g extends m {
|
|
|
497
499
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
498
500
|
}
|
|
499
501
|
};
|
|
500
|
-
|
|
501
|
-
let
|
|
502
|
-
customElements.get("px-cell-link") || customElements.define("px-cell-link",
|
|
503
|
-
const
|
|
504
|
-
|
|
505
|
-
const
|
|
506
|
-
|
|
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);
|
|
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,15 +687,15 @@ 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">
|
|
695
697
|
<px-cell hoverable>
|
|
696
|
-
<px-checkbox slot="prefix" inert
|
|
698
|
+
<px-checkbox slot="prefix" inert></px-checkbox>
|
|
697
699
|
<slot name="visual" slot="visual"></slot>
|
|
698
700
|
<slot name="label" slot="label"></slot>
|
|
699
701
|
<slot name="description" slot="description"></slot>
|
|
@@ -703,10 +705,10 @@ 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
|
-
if (this.$slotVisual) {
|
|
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) {
|
|
710
712
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
711
713
|
t && c(t);
|
|
712
714
|
}
|
|
@@ -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,10 +998,10 @@ 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
|
-
if (this.$slotVisual) {
|
|
1004
|
+
if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
|
|
1003
1005
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1004
1006
|
t && c(t);
|
|
1005
1007
|
}
|
|
@@ -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,11 +1261,11 @@ 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;
|
|
1266
|
-
if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : 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) {
|
|
1267
1269
|
const e = this.querySelector('px-img[slot="visual"]');
|
|
1268
1270
|
e && c(e);
|
|
1269
1271
|
}
|
|
@@ -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
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-cell",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.160",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|