@proximus/lavender-cell 2.0.0-alpha.14 → 2.0.0-alpha.140
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 +129 -119
- 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,35 +1,39 @@
|
|
|
1
|
-
import { checkName as
|
|
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"
|
|
9
9
|
];
|
|
10
|
-
function
|
|
10
|
+
function c(r) {
|
|
11
11
|
r.hasAttribute("width") || r.setAttribute("width", "s"), r.setAttribute("border-radius", "pill");
|
|
12
12
|
}
|
|
13
|
-
function
|
|
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 (!
|
|
18
|
-
|
|
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);
|
|
22
24
|
}
|
|
23
|
-
function
|
|
25
|
+
function u(r, t, e, s = []) {
|
|
24
26
|
e ? (r.setAttribute("inverted", ""), s.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
|
|
25
27
|
i.hasAttribute("inverted") || i.setAttribute("inverted", "");
|
|
26
28
|
})) : (r.removeAttribute("inverted"), s.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
|
|
27
29
|
i.hasAttribute("inverted") && i.removeAttribute("inverted");
|
|
28
30
|
}));
|
|
29
31
|
}
|
|
30
|
-
function
|
|
31
|
-
if (!
|
|
32
|
-
|
|
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
|
+
);
|
|
33
37
|
return;
|
|
34
38
|
}
|
|
35
39
|
const a = (o) => {
|
|
@@ -43,17 +47,17 @@ function B(r, t, e, s, i) {
|
|
|
43
47
|
};
|
|
44
48
|
a(e), a(s);
|
|
45
49
|
}
|
|
46
|
-
function
|
|
50
|
+
function E(r, t, e, s = [], i = {}) {
|
|
47
51
|
e ? (r.setAttribute("disabled", ""), s.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
|
|
48
52
|
a.hasAttribute("disabled") || a.setAttribute("disabled", "");
|
|
49
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) => {
|
|
50
54
|
a.hasAttribute("disabled") && a.removeAttribute("disabled");
|
|
51
55
|
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
|
|
52
56
|
}
|
|
53
|
-
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
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
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 {
|
|
57
61
|
template() {
|
|
58
62
|
return `
|
|
59
63
|
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
@@ -75,14 +79,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
75
79
|
`;
|
|
76
80
|
}
|
|
77
81
|
constructor() {
|
|
78
|
-
super(
|
|
82
|
+
super(L, D);
|
|
79
83
|
const t = document.createElement("div");
|
|
80
84
|
t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
81
85
|
}
|
|
82
86
|
connectedCallback() {
|
|
83
87
|
if (this.$slotVisual) {
|
|
84
88
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
85
|
-
t &&
|
|
89
|
+
t && c(t);
|
|
86
90
|
}
|
|
87
91
|
if (this.$slotSuffix) {
|
|
88
92
|
const t = this.querySelectorAll(
|
|
@@ -92,7 +96,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
92
96
|
this.configureSlotSuffixButtonIcon(i);
|
|
93
97
|
}), s && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
|
|
94
98
|
}
|
|
95
|
-
|
|
99
|
+
d(this);
|
|
96
100
|
}
|
|
97
101
|
static get observedAttributes() {
|
|
98
102
|
return [
|
|
@@ -118,7 +122,7 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
118
122
|
if (e !== s)
|
|
119
123
|
switch (t) {
|
|
120
124
|
case "variant":
|
|
121
|
-
|
|
125
|
+
H(this.$el, e, s);
|
|
122
126
|
break;
|
|
123
127
|
case "inverted":
|
|
124
128
|
for (let i = 0; i < this.$children.length; i++)
|
|
@@ -129,15 +133,15 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
129
133
|
case "radius--tablet":
|
|
130
134
|
case "radius--laptop":
|
|
131
135
|
case "radius--desktop":
|
|
132
|
-
this.updateRadius(t, e, s,
|
|
136
|
+
this.updateRadius(t, e, s, O);
|
|
133
137
|
break;
|
|
134
138
|
case "background-color":
|
|
135
|
-
|
|
139
|
+
j(
|
|
136
140
|
this.$el,
|
|
137
141
|
t,
|
|
138
142
|
e,
|
|
139
143
|
s,
|
|
140
|
-
|
|
144
|
+
B
|
|
141
145
|
);
|
|
142
146
|
break;
|
|
143
147
|
default:
|
|
@@ -146,29 +150,27 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
146
150
|
}
|
|
147
151
|
}
|
|
148
152
|
configureSlotSuffixButtonIcon(t) {
|
|
149
|
-
t.hasAttribute("variant")
|
|
150
|
-
|
|
153
|
+
t.hasAttribute("variant") && p(
|
|
154
|
+
_,
|
|
151
155
|
t.getAttribute("variant")
|
|
152
|
-
) ||
|
|
153
|
-
`Wrong button-icon variant value for suffix. Allowed values are: ${x.join(
|
|
154
|
-
", "
|
|
155
|
-
)}.`
|
|
156
|
-
), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
|
|
156
|
+
) || t.setAttribute("variant", "secondary");
|
|
157
157
|
}
|
|
158
158
|
updateRadius(t, e, s, i) {
|
|
159
|
-
if (!
|
|
160
|
-
|
|
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
|
+
);
|
|
161
163
|
return;
|
|
162
164
|
}
|
|
163
165
|
const a = t.includes("--"), o = [];
|
|
164
166
|
if (!a)
|
|
165
167
|
this.separatorMobile || o.push("mobile"), this.separatorTablet || o.push("tablet"), this.separatorLaptop || o.push("laptop"), this.separatorDesktop || o.push("desktop");
|
|
166
168
|
else {
|
|
167
|
-
const
|
|
168
|
-
o.push(
|
|
169
|
+
const b = t.split("--")[1];
|
|
170
|
+
o.push(b);
|
|
169
171
|
}
|
|
170
|
-
o.forEach((
|
|
171
|
-
e !== null && e !== "" && e !== "default" && this.updateStyle(
|
|
172
|
+
o.forEach((b) => {
|
|
173
|
+
e !== null && e !== "" && e !== "default" && this.updateStyle(b, e), s !== null && s !== "" && s !== "default" && this.updateStyle(b, s);
|
|
172
174
|
});
|
|
173
175
|
}
|
|
174
176
|
updateStyle(t, e) {
|
|
@@ -283,14 +285,14 @@ const x = ["secondary"], F = ["", "default", "top", "bottom", "none"], A = class
|
|
|
283
285
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
284
286
|
}
|
|
285
287
|
};
|
|
286
|
-
|
|
287
|
-
let
|
|
288
|
-
customElements.get("px-cell") || customElements.define("px-cell",
|
|
289
|
-
const
|
|
290
|
-
|
|
291
|
-
const
|
|
292
|
-
|
|
293
|
-
const
|
|
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 {
|
|
294
296
|
template() {
|
|
295
297
|
return `
|
|
296
298
|
<px-cell hoverable>
|
|
@@ -309,19 +311,19 @@ const p = class p extends k {
|
|
|
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() {
|
|
317
319
|
if (this.$slotVisual) {
|
|
318
320
|
const e = this.querySelector('px-img[slot="visual"]');
|
|
319
|
-
e &&
|
|
321
|
+
e && c(e);
|
|
320
322
|
}
|
|
321
323
|
this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
|
|
322
324
|
"aria-label",
|
|
323
325
|
this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
|
|
324
|
-
)),
|
|
326
|
+
)), d(this);
|
|
325
327
|
}
|
|
326
328
|
static get observedAttributes() {
|
|
327
329
|
return [
|
|
@@ -352,12 +354,12 @@ const p = class p extends k {
|
|
|
352
354
|
this.$cell.variant = this.variant;
|
|
353
355
|
break;
|
|
354
356
|
case "inverted":
|
|
355
|
-
|
|
357
|
+
u(this.$cell, this.$children, this.inverted, [
|
|
356
358
|
this.$pxIcon
|
|
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,14 +499,14 @@ const p = class p extends k {
|
|
|
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
|
-
|
|
507
|
-
const
|
|
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 {
|
|
508
510
|
template() {
|
|
509
511
|
return `
|
|
510
512
|
<px-cell hoverable>
|
|
@@ -516,16 +518,16 @@ const d = class d extends k {
|
|
|
516
518
|
`;
|
|
517
519
|
}
|
|
518
520
|
constructor() {
|
|
519
|
-
super(
|
|
520
|
-
const t = document.createElement(
|
|
521
|
+
super(M, q);
|
|
522
|
+
const t = document.createElement(h.nativeName);
|
|
521
523
|
t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
522
524
|
}
|
|
523
525
|
connectedCallback() {
|
|
524
526
|
if (this.$slotVisual) {
|
|
525
527
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
526
|
-
t &&
|
|
528
|
+
t && c(t);
|
|
527
529
|
}
|
|
528
|
-
|
|
530
|
+
d(this);
|
|
529
531
|
}
|
|
530
532
|
static get observedAttributes() {
|
|
531
533
|
return [
|
|
@@ -554,10 +556,10 @@ const d = class d extends k {
|
|
|
554
556
|
this.$cell.variant = this.variant;
|
|
555
557
|
break;
|
|
556
558
|
case "inverted":
|
|
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
|
|
@@ -682,18 +684,18 @@ const d = class d extends k {
|
|
|
682
684
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
683
685
|
}
|
|
684
686
|
};
|
|
685
|
-
|
|
686
|
-
let
|
|
687
|
-
customElements.get("px-cell-button") || customElements.define("px-cell-button",
|
|
688
|
-
const
|
|
689
|
-
|
|
690
|
-
const
|
|
691
|
-
class
|
|
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 {
|
|
692
694
|
template() {
|
|
693
695
|
return `
|
|
694
696
|
<div class="cell-checkbox">
|
|
695
697
|
<px-cell hoverable>
|
|
696
|
-
<px-checkbox slot="prefix"
|
|
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,12 +705,12 @@ class W extends m {
|
|
|
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
|
-
t &&
|
|
713
|
+
t && c(t);
|
|
712
714
|
}
|
|
713
715
|
this.addEventListener("mouseover", () => {
|
|
714
716
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -722,7 +724,7 @@ class W extends m {
|
|
|
722
724
|
}
|
|
723
725
|
}), this.addEventListener("click", (t) => {
|
|
724
726
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
725
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
727
|
+
}), this.hasAttribute("checked") && (this.checked = !0), d(this);
|
|
726
728
|
}
|
|
727
729
|
static get observedAttributes() {
|
|
728
730
|
return [
|
|
@@ -755,7 +757,7 @@ class W extends m {
|
|
|
755
757
|
this.$cell.variant = this.variant;
|
|
756
758
|
break;
|
|
757
759
|
case "inverted":
|
|
758
|
-
|
|
760
|
+
u(this.$cell, this.$children, this.inverted, [
|
|
759
761
|
this.$checkbox
|
|
760
762
|
]);
|
|
761
763
|
break;
|
|
@@ -782,10 +784,12 @@ class W extends m {
|
|
|
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(
|
|
791
|
+
`"${s}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${$.join('", "')}".`
|
|
792
|
+
);
|
|
789
793
|
return;
|
|
790
794
|
}
|
|
791
795
|
break;
|
|
@@ -815,8 +819,10 @@ class W extends m {
|
|
|
815
819
|
));
|
|
816
820
|
}
|
|
817
821
|
handleCheckboxPositionChange(t) {
|
|
818
|
-
if (!this.checkName(
|
|
819
|
-
|
|
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
|
+
);
|
|
820
826
|
return;
|
|
821
827
|
}
|
|
822
828
|
this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
|
|
@@ -974,15 +980,15 @@ class W extends m {
|
|
|
974
980
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
975
981
|
}
|
|
976
982
|
}
|
|
977
|
-
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox",
|
|
978
|
-
const
|
|
979
|
-
|
|
980
|
-
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 {
|
|
981
987
|
template() {
|
|
982
988
|
return `
|
|
983
989
|
<div class="cell-switch">
|
|
984
990
|
<px-cell hoverable>
|
|
985
|
-
<px-switch slot="action-indicator"
|
|
991
|
+
<px-switch slot="action-indicator" inert></px-switch>
|
|
986
992
|
<slot name="visual" slot="visual"></slot>
|
|
987
993
|
<slot name="label" slot="label"></slot>
|
|
988
994
|
<slot name="description" slot="description"></slot>
|
|
@@ -992,12 +998,12 @@ class G extends m {
|
|
|
992
998
|
}
|
|
993
999
|
constructor() {
|
|
994
1000
|
var t;
|
|
995
|
-
super(
|
|
1001
|
+
super(z), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0;
|
|
996
1002
|
}
|
|
997
1003
|
connectedCallback() {
|
|
998
|
-
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) {
|
|
999
1005
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1000
|
-
t &&
|
|
1006
|
+
t && c(t);
|
|
1001
1007
|
}
|
|
1002
1008
|
this.addEventListener("mouseover", () => {
|
|
1003
1009
|
this.$switch.setAttribute("hover", "");
|
|
@@ -1011,7 +1017,7 @@ class G extends m {
|
|
|
1011
1017
|
}
|
|
1012
1018
|
}), this.addEventListener("click", (t) => {
|
|
1013
1019
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
1014
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
1020
|
+
}), this.hasAttribute("checked") && (this.checked = !0), d(this);
|
|
1015
1021
|
}
|
|
1016
1022
|
static get observedAttributes() {
|
|
1017
1023
|
return [
|
|
@@ -1042,7 +1048,7 @@ class G extends m {
|
|
|
1042
1048
|
this.$cell.variant = this.variant;
|
|
1043
1049
|
break;
|
|
1044
1050
|
case "inverted":
|
|
1045
|
-
|
|
1051
|
+
u(this.$cell, this.$children, this.inverted, [
|
|
1046
1052
|
this.$switch
|
|
1047
1053
|
]);
|
|
1048
1054
|
break;
|
|
@@ -1236,16 +1242,16 @@ class G extends m {
|
|
|
1236
1242
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1237
1243
|
}
|
|
1238
1244
|
}
|
|
1239
|
-
customElements.get("px-cell-switch") || customElements.define("px-cell-switch",
|
|
1240
|
-
const
|
|
1241
|
-
|
|
1242
|
-
const
|
|
1243
|
-
class
|
|
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 {
|
|
1244
1250
|
template() {
|
|
1245
1251
|
return `
|
|
1246
1252
|
<div class="cell-radio">
|
|
1247
1253
|
<px-cell hoverable>
|
|
1248
|
-
<px-radio slot="prefix"
|
|
1254
|
+
<px-radio slot="prefix" inert></px-radio>
|
|
1249
1255
|
<slot name="visual" slot="visual"></slot>
|
|
1250
1256
|
<slot name="label" slot="label"></slot>
|
|
1251
1257
|
<slot name="description" slot="description"></slot>
|
|
@@ -1255,13 +1261,13 @@ class K extends m {
|
|
|
1255
1261
|
}
|
|
1256
1262
|
constructor() {
|
|
1257
1263
|
var t;
|
|
1258
|
-
super(
|
|
1264
|
+
super(P), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
1259
1265
|
}
|
|
1260
1266
|
connectedCallback() {
|
|
1261
1267
|
var t;
|
|
1262
|
-
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) {
|
|
1263
1269
|
const e = this.querySelector('px-img[slot="visual"]');
|
|
1264
|
-
e &&
|
|
1270
|
+
e && c(e);
|
|
1265
1271
|
}
|
|
1266
1272
|
this.addEventListener("mouseover", () => {
|
|
1267
1273
|
this.$radio.setAttribute("hover", "");
|
|
@@ -1275,7 +1281,7 @@ class K extends m {
|
|
|
1275
1281
|
}
|
|
1276
1282
|
}), this.addEventListener("click", (e) => {
|
|
1277
1283
|
this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
|
|
1278
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
1284
|
+
}), this.hasAttribute("checked") && (this.checked = !0), d(this);
|
|
1279
1285
|
}
|
|
1280
1286
|
static get observedAttributes() {
|
|
1281
1287
|
return [
|
|
@@ -1308,7 +1314,7 @@ class K extends m {
|
|
|
1308
1314
|
this.$cell.variant = this.variant;
|
|
1309
1315
|
break;
|
|
1310
1316
|
case "inverted":
|
|
1311
|
-
|
|
1317
|
+
u(this.$cell, this.$children, this.inverted, [
|
|
1312
1318
|
this.$radio
|
|
1313
1319
|
]);
|
|
1314
1320
|
break;
|
|
@@ -1335,10 +1341,12 @@ class K extends m {
|
|
|
1335
1341
|
break;
|
|
1336
1342
|
case "state":
|
|
1337
1343
|
if (this.$radio)
|
|
1338
|
-
if (this.checkName(
|
|
1344
|
+
if (this.checkName(S, s))
|
|
1339
1345
|
this.$radio.setAttribute("state", s);
|
|
1340
1346
|
else {
|
|
1341
|
-
|
|
1347
|
+
l(
|
|
1348
|
+
`"${s}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${S.join('", "')}".`
|
|
1349
|
+
);
|
|
1342
1350
|
return;
|
|
1343
1351
|
}
|
|
1344
1352
|
break;
|
|
@@ -1368,8 +1376,10 @@ class K extends m {
|
|
|
1368
1376
|
));
|
|
1369
1377
|
}
|
|
1370
1378
|
handleRadioPositionChange(t) {
|
|
1371
|
-
if (!this.checkName(
|
|
1372
|
-
|
|
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
|
+
);
|
|
1373
1383
|
return;
|
|
1374
1384
|
}
|
|
1375
1385
|
this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
|
|
@@ -1527,16 +1537,16 @@ class K extends m {
|
|
|
1527
1537
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1528
1538
|
}
|
|
1529
1539
|
}
|
|
1530
|
-
customElements.get("px-cell-radio") || customElements.define("px-cell-radio",
|
|
1540
|
+
customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Q);
|
|
1531
1541
|
export {
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
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
|
|
1542
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.140",
|
|
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"
|