@proximus/lavender-cell 1.4.17-alpha.7 → 1.4.17-beta.1
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/Cell.d.ts +1 -1
- package/dist/CellButton.d.ts +1 -1
- package/dist/CellCheckbox.d.ts +1 -1
- package/dist/CellLink.d.ts +1 -1
- package/dist/CellRadio.d.ts +1 -1
- package/dist/CellSwitch.d.ts +1 -1
- package/dist/custom-elements.json +42 -54
- package/dist/index.es.js +150 -156
- package/dist/web-types.json +5 -11
- package/package.json +1 -1
package/dist/Cell.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ import { Stack } from '@proximus/lavender-layout';
|
|
|
4
4
|
export declare const suffixButtonIconVariantValues: string[];
|
|
5
5
|
export declare const radiusValues: string[];
|
|
6
6
|
export declare class Cell extends PxElement<HTMLDivElement> {
|
|
7
|
+
protected static readonly template: HTMLTemplateElement;
|
|
7
8
|
static nativeName: string;
|
|
8
|
-
private template;
|
|
9
9
|
constructor();
|
|
10
10
|
connectedCallback(): void;
|
|
11
11
|
static get observedAttributes(): string[];
|
package/dist/CellButton.d.ts
CHANGED
|
@@ -9,9 +9,9 @@ import { Cell } from '@proximus/lavender-cell';
|
|
|
9
9
|
* @attr {boolean} disabled - Whether the button is disabled.
|
|
10
10
|
*/
|
|
11
11
|
export declare class CellButton extends PxElement<HTMLButtonElement> {
|
|
12
|
+
protected static readonly template: HTMLTemplateElement;
|
|
12
13
|
static nativeName: string;
|
|
13
14
|
static accessorExclusions: string[];
|
|
14
|
-
private template;
|
|
15
15
|
constructor();
|
|
16
16
|
connectedCallback(): void;
|
|
17
17
|
static get observedAttributes(): string[];
|
package/dist/CellCheckbox.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { Cell } from '@proximus/lavender-cell';
|
|
|
3
3
|
import { Checkbox } from '@proximus/lavender-checkbox';
|
|
4
4
|
export declare const cellCheckboxPosition: string[];
|
|
5
5
|
export declare class CellCheckbox extends WithExtraAttributes {
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
protected internals: ElementInternals;
|
|
7
|
-
protected template(): string;
|
|
8
8
|
constructor();
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
static get observedAttributes(): string[];
|
package/dist/CellLink.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import '@proximus/lavender-layout';
|
|
|
3
3
|
import { Cell } from '@proximus/lavender-cell';
|
|
4
4
|
import { Icon } from '@proximus/lavender-icon';
|
|
5
5
|
export declare class CellLink extends PxElement<HTMLLinkElement> {
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
static nativeName: string;
|
|
7
|
-
private template;
|
|
8
8
|
constructor();
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
static get observedAttributes(): string[];
|
package/dist/CellRadio.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { Cell } from '@proximus/lavender-cell';
|
|
|
3
3
|
import { type IRadio, type Radio } from '@proximus/lavender-radio-group';
|
|
4
4
|
export declare const cellRadioPosition: string[];
|
|
5
5
|
export declare class CellRadio extends WithExtraAttributes implements IRadio {
|
|
6
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
protected internals: ElementInternals;
|
|
7
|
-
protected template(): string;
|
|
8
8
|
constructor();
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
static get observedAttributes(): string[];
|
package/dist/CellSwitch.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
|
2
2
|
import { Cell } from '@proximus/lavender-cell';
|
|
3
3
|
import { Switch } from '@proximus/lavender-switch';
|
|
4
4
|
export declare class CellSwitch extends WithExtraAttributes {
|
|
5
|
+
protected static readonly template: HTMLTemplateElement;
|
|
5
6
|
protected internals: ElementInternals;
|
|
6
|
-
protected template(): string;
|
|
7
7
|
constructor();
|
|
8
8
|
connectedCallback(): void;
|
|
9
9
|
static get observedAttributes(): string[];
|
|
@@ -27,6 +27,13 @@
|
|
|
27
27
|
"description": "",
|
|
28
28
|
"name": "Cell",
|
|
29
29
|
"members": [
|
|
30
|
+
{
|
|
31
|
+
"kind": "field",
|
|
32
|
+
"name": "template",
|
|
33
|
+
"privacy": "protected",
|
|
34
|
+
"static": true,
|
|
35
|
+
"readonly": true
|
|
36
|
+
},
|
|
30
37
|
{
|
|
31
38
|
"kind": "field",
|
|
32
39
|
"name": "nativeName",
|
|
@@ -36,11 +43,6 @@
|
|
|
36
43
|
"static": true,
|
|
37
44
|
"default": "'div'"
|
|
38
45
|
},
|
|
39
|
-
{
|
|
40
|
-
"kind": "method",
|
|
41
|
-
"name": "template",
|
|
42
|
-
"privacy": "private"
|
|
43
|
-
},
|
|
44
46
|
{
|
|
45
47
|
"kind": "method",
|
|
46
48
|
"name": "configureSlotSuffixButtonIcon",
|
|
@@ -180,10 +182,6 @@
|
|
|
180
182
|
{
|
|
181
183
|
"kind": "field",
|
|
182
184
|
"name": "compact"
|
|
183
|
-
},
|
|
184
|
-
{
|
|
185
|
-
"kind": "field",
|
|
186
|
-
"name": "innerHTML"
|
|
187
185
|
}
|
|
188
186
|
],
|
|
189
187
|
"attributes": [
|
|
@@ -285,6 +283,13 @@
|
|
|
285
283
|
"description": "",
|
|
286
284
|
"name": "CellButton",
|
|
287
285
|
"members": [
|
|
286
|
+
{
|
|
287
|
+
"kind": "field",
|
|
288
|
+
"name": "template",
|
|
289
|
+
"privacy": "protected",
|
|
290
|
+
"static": true,
|
|
291
|
+
"readonly": true
|
|
292
|
+
},
|
|
288
293
|
{
|
|
289
294
|
"kind": "field",
|
|
290
295
|
"name": "nativeName",
|
|
@@ -303,11 +308,6 @@
|
|
|
303
308
|
"static": true,
|
|
304
309
|
"default": "['disabled']"
|
|
305
310
|
},
|
|
306
|
-
{
|
|
307
|
-
"kind": "method",
|
|
308
|
-
"name": "template",
|
|
309
|
-
"privacy": "private"
|
|
310
|
-
},
|
|
311
311
|
{
|
|
312
312
|
"kind": "field",
|
|
313
313
|
"name": "$cell",
|
|
@@ -382,10 +382,6 @@
|
|
|
382
382
|
{
|
|
383
383
|
"kind": "field",
|
|
384
384
|
"name": "compact"
|
|
385
|
-
},
|
|
386
|
-
{
|
|
387
|
-
"kind": "field",
|
|
388
|
-
"name": "innerHTML"
|
|
389
385
|
}
|
|
390
386
|
],
|
|
391
387
|
"attributes": [
|
|
@@ -505,6 +501,13 @@
|
|
|
505
501
|
"description": "",
|
|
506
502
|
"name": "CellCheckbox",
|
|
507
503
|
"members": [
|
|
504
|
+
{
|
|
505
|
+
"kind": "field",
|
|
506
|
+
"name": "template",
|
|
507
|
+
"privacy": "protected",
|
|
508
|
+
"static": true,
|
|
509
|
+
"readonly": true
|
|
510
|
+
},
|
|
508
511
|
{
|
|
509
512
|
"kind": "field",
|
|
510
513
|
"name": "internals",
|
|
@@ -513,11 +516,6 @@
|
|
|
513
516
|
},
|
|
514
517
|
"privacy": "protected"
|
|
515
518
|
},
|
|
516
|
-
{
|
|
517
|
-
"kind": "method",
|
|
518
|
-
"name": "template",
|
|
519
|
-
"privacy": "protected"
|
|
520
|
-
},
|
|
521
519
|
{
|
|
522
520
|
"kind": "method",
|
|
523
521
|
"name": "handleDisabledAttributeChange",
|
|
@@ -693,10 +691,6 @@
|
|
|
693
691
|
"kind": "field",
|
|
694
692
|
"name": "compact"
|
|
695
693
|
},
|
|
696
|
-
{
|
|
697
|
-
"kind": "field",
|
|
698
|
-
"name": "innerHTML"
|
|
699
|
-
},
|
|
700
694
|
{
|
|
701
695
|
"kind": "field",
|
|
702
696
|
"name": "tabIndex",
|
|
@@ -820,6 +814,13 @@
|
|
|
820
814
|
"description": "",
|
|
821
815
|
"name": "CellLink",
|
|
822
816
|
"members": [
|
|
817
|
+
{
|
|
818
|
+
"kind": "field",
|
|
819
|
+
"name": "template",
|
|
820
|
+
"privacy": "protected",
|
|
821
|
+
"static": true,
|
|
822
|
+
"readonly": true
|
|
823
|
+
},
|
|
823
824
|
{
|
|
824
825
|
"kind": "field",
|
|
825
826
|
"name": "nativeName",
|
|
@@ -829,11 +830,6 @@
|
|
|
829
830
|
"static": true,
|
|
830
831
|
"default": "'a'"
|
|
831
832
|
},
|
|
832
|
-
{
|
|
833
|
-
"kind": "method",
|
|
834
|
-
"name": "template",
|
|
835
|
-
"privacy": "private"
|
|
836
|
-
},
|
|
837
833
|
{
|
|
838
834
|
"kind": "field",
|
|
839
835
|
"name": "$cell",
|
|
@@ -917,10 +913,6 @@
|
|
|
917
913
|
{
|
|
918
914
|
"kind": "field",
|
|
919
915
|
"name": "compact"
|
|
920
|
-
},
|
|
921
|
-
{
|
|
922
|
-
"kind": "field",
|
|
923
|
-
"name": "innerHTML"
|
|
924
916
|
}
|
|
925
917
|
],
|
|
926
918
|
"attributes": [
|
|
@@ -1020,6 +1012,13 @@
|
|
|
1020
1012
|
"description": "",
|
|
1021
1013
|
"name": "CellRadio",
|
|
1022
1014
|
"members": [
|
|
1015
|
+
{
|
|
1016
|
+
"kind": "field",
|
|
1017
|
+
"name": "template",
|
|
1018
|
+
"privacy": "protected",
|
|
1019
|
+
"static": true,
|
|
1020
|
+
"readonly": true
|
|
1021
|
+
},
|
|
1023
1022
|
{
|
|
1024
1023
|
"kind": "field",
|
|
1025
1024
|
"name": "internals",
|
|
@@ -1028,11 +1027,6 @@
|
|
|
1028
1027
|
},
|
|
1029
1028
|
"privacy": "protected"
|
|
1030
1029
|
},
|
|
1031
|
-
{
|
|
1032
|
-
"kind": "method",
|
|
1033
|
-
"name": "template",
|
|
1034
|
-
"privacy": "protected"
|
|
1035
|
-
},
|
|
1036
1030
|
{
|
|
1037
1031
|
"kind": "method",
|
|
1038
1032
|
"name": "handleDisabledAttributeChange",
|
|
@@ -1207,10 +1201,6 @@
|
|
|
1207
1201
|
{
|
|
1208
1202
|
"kind": "field",
|
|
1209
1203
|
"name": "compact"
|
|
1210
|
-
},
|
|
1211
|
-
{
|
|
1212
|
-
"kind": "field",
|
|
1213
|
-
"name": "innerHTML"
|
|
1214
1204
|
}
|
|
1215
1205
|
],
|
|
1216
1206
|
"events": [
|
|
@@ -1327,6 +1317,13 @@
|
|
|
1327
1317
|
"description": "",
|
|
1328
1318
|
"name": "CellSwitch",
|
|
1329
1319
|
"members": [
|
|
1320
|
+
{
|
|
1321
|
+
"kind": "field",
|
|
1322
|
+
"name": "template",
|
|
1323
|
+
"privacy": "protected",
|
|
1324
|
+
"static": true,
|
|
1325
|
+
"readonly": true
|
|
1326
|
+
},
|
|
1330
1327
|
{
|
|
1331
1328
|
"kind": "field",
|
|
1332
1329
|
"name": "internals",
|
|
@@ -1335,11 +1332,6 @@
|
|
|
1335
1332
|
},
|
|
1336
1333
|
"privacy": "protected"
|
|
1337
1334
|
},
|
|
1338
|
-
{
|
|
1339
|
-
"kind": "method",
|
|
1340
|
-
"name": "template",
|
|
1341
|
-
"privacy": "protected"
|
|
1342
|
-
},
|
|
1343
1335
|
{
|
|
1344
1336
|
"kind": "method",
|
|
1345
1337
|
"name": "handleDisabledAttributeChange",
|
|
@@ -1499,10 +1491,6 @@
|
|
|
1499
1491
|
"kind": "field",
|
|
1500
1492
|
"name": "compact"
|
|
1501
1493
|
},
|
|
1502
|
-
{
|
|
1503
|
-
"kind": "field",
|
|
1504
|
-
"name": "innerHTML"
|
|
1505
|
-
},
|
|
1506
1494
|
{
|
|
1507
1495
|
"kind": "field",
|
|
1508
1496
|
"name": "tabIndex",
|
package/dist/index.es.js
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSetter as n, checkName as r,
|
|
1
|
+
import { PxElement as e, WithExtraAttributes as t, booleanPropertyToAttributeSetter as n, checkName as r, createTemplate as i, log as a, propertyToAttributeSetter as o, renderTemplate as s } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import { checkboxStateValues as
|
|
4
|
-
import { stateValues as
|
|
3
|
+
import { checkboxStateValues as c } from "@proximus/lavender-checkbox";
|
|
4
|
+
import { stateValues as l } from "@proximus/lavender-radio-group";
|
|
5
5
|
//#region src/Common.ts
|
|
6
|
-
var
|
|
6
|
+
var u = [
|
|
7
7
|
"",
|
|
8
8
|
"default",
|
|
9
9
|
"naked",
|
|
10
10
|
"contained"
|
|
11
|
-
],
|
|
11
|
+
], d = [
|
|
12
12
|
"",
|
|
13
13
|
"container-light",
|
|
14
14
|
"container-default"
|
|
15
15
|
];
|
|
16
|
-
function
|
|
16
|
+
function f(e) {
|
|
17
17
|
e.hasAttribute("width") || e.setAttribute("width", "s"), e.setAttribute("border-radius", "pill");
|
|
18
18
|
}
|
|
19
|
-
function
|
|
19
|
+
function p(e) {
|
|
20
20
|
e.getAttribute("variant") === "contained" && !e.getAttribute("background-color") && e.setAttribute("background-color", "container-light");
|
|
21
21
|
}
|
|
22
|
-
function
|
|
23
|
-
if (!r(
|
|
24
|
-
|
|
22
|
+
function m(e, t, n) {
|
|
23
|
+
if (!r(u, n)) {
|
|
24
|
+
a(`"${n}" is not a valid variant value for a cell. Allowed values are: "${u.join("\", \"")}".`);
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
27
27
|
t !== null && t !== "" && t !== "default" && e.classList.toggle(t), n !== null && n !== "" && n !== "default" && e.classList.toggle(n);
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function h(e, t, n, r = []) {
|
|
30
30
|
n ? (e.setAttribute("inverted", ""), r.forEach((e) => e.setAttribute("inverted", "")), t.forEach((e) => {
|
|
31
31
|
e.hasAttribute("inverted") || e.setAttribute("inverted", "");
|
|
32
32
|
})) : (e.removeAttribute("inverted"), r.forEach((e) => e.removeAttribute("inverted")), t.forEach((e) => {
|
|
33
33
|
e.hasAttribute("inverted") && e.removeAttribute("inverted");
|
|
34
34
|
}));
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
if (!r(o,
|
|
38
|
-
|
|
36
|
+
function g(e, t, n, i, o) {
|
|
37
|
+
if (!r(o, i)) {
|
|
38
|
+
a(`"${i}" is not a valid ${t} value for a cell. Allowed values are: "${o.join("\", \"")}".`);
|
|
39
39
|
return;
|
|
40
40
|
}
|
|
41
41
|
let s = (t) => {
|
|
42
42
|
t !== null && t !== "" && t !== "default" && (e.style.setProperty("--cell-contained-background-color-default", `var(--px-color-background-${t}-default)`), e.style.setProperty("--cell-contained-background-color-inverted", `var(--px-color-background-${t}-inverted)`));
|
|
43
43
|
};
|
|
44
|
-
s(n), s(
|
|
44
|
+
s(n), s(i);
|
|
45
45
|
}
|
|
46
|
-
function
|
|
46
|
+
function _(e, t, n, r = [], i = {}) {
|
|
47
47
|
n ? (e.setAttribute("disabled", ""), r.forEach((e) => e.setAttribute("disabled", "")), t.forEach((e) => {
|
|
48
48
|
e.hasAttribute("disabled") || e.setAttribute("disabled", "");
|
|
49
49
|
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (e.removeAttribute("disabled"), r.forEach((e) => e.removeAttribute("disabled")), t.forEach((e) => {
|
|
@@ -52,30 +52,28 @@ function h(e, t, n, r = [], i = {}) {
|
|
|
52
52
|
}
|
|
53
53
|
//#endregion
|
|
54
54
|
//#region src/common.css?inline
|
|
55
|
-
var
|
|
56
|
-
|
|
57
|
-
var
|
|
55
|
+
var v = ":host{outline:none;display:block}:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch),:is(:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch) *{box-sizing:border-box}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);display:block}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);width:100%}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:is(:host:host(:not([disabled])) .cell-link,:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media screen and (width>=48rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(:scope:host:host(:not([disabled])) .cell-link,:scope:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (width>=64.0625rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .cell-link,:scope:host:host(:not([disabled])) .cell-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", y = ":host([separator]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=description]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot=suffix]){text-align:right;font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var(--cell-contained-background-color-default,var(--px-color-background-container-light-default))}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media screen and (width<=47.938rem){:host([separator--mobile]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--mobile,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--mobile,var(--px-radius-main))}}@media screen and (width>=48rem){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media screen and (width>=48rem) and (width<=64rem){:host([separator--tablet]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--tablet,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--tablet,var(--px-radius-main))}}@media screen and (width>=64.0625rem){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([separator--laptop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.contained{border-radius:var(--cell-contained-border-radius-top-left--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--laptop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--laptop,var(--px-radius-main))}}@media screen and (width>=90.0625rem){:host{display:block}:host([separator--desktop]):after{content:\"\";border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default);width:100%;display:block;position:relative}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot=label]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot=description]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var(--cell-contained-border-radius-top-left--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-top-right--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-right--desktop,var(--px-radius-main)) var(--cell-contained-border-radius-bottom-left--desktop,var(--px-radius-main))}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var(--cell-contained-background-color-inverted,var(--px-color-background-container-light-inverted))}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}", b = new CSSStyleSheet(), x = new CSSStyleSheet();
|
|
56
|
+
b.replaceSync(v), x.replaceSync(y);
|
|
57
|
+
var S = ["secondary"], C = [
|
|
58
58
|
"",
|
|
59
59
|
"default",
|
|
60
60
|
"top",
|
|
61
61
|
"bottom",
|
|
62
62
|
"none"
|
|
63
|
-
],
|
|
63
|
+
], w = class t extends e {
|
|
64
64
|
static {
|
|
65
|
-
this.
|
|
65
|
+
this.template = i("<div class=\"cell\"><px-hstack gap=\"s\" justify-content=\"space-between\" align-items=\"center\"><px-hstack gap=\"s\" align-items=\"center\"><slot name=\"prefix\"></slot><slot name=\"visual\"></slot><px-vstack gap=\"2xs\"><slot name=\"label\"></slot><slot name=\"description\"></slot></px-vstack></px-hstack><px-hstack gap=\"s\" align-items=\"center\" class=\"cell-layout__suffix-action-container\"><px-stack direction=\"column\" gap=\"2xs\" align-items=\"flex-end\" class=\"cell__suffix-container\"><slot name=\"suffix\"></slot></px-stack><slot name=\"action-indicator\"></slot></px-hstack></px-hstack></div>");
|
|
66
66
|
}
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
static {
|
|
68
|
+
this.nativeName = "div";
|
|
69
69
|
}
|
|
70
70
|
constructor() {
|
|
71
|
-
super(
|
|
72
|
-
let e = document.createElement("div");
|
|
73
|
-
e.classList.add("cell"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
71
|
+
super(x, b), s(this.shadowRoot, t.template);
|
|
74
72
|
}
|
|
75
73
|
connectedCallback() {
|
|
76
74
|
if (this.$slotVisual) {
|
|
77
75
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
78
|
-
e &&
|
|
76
|
+
e && f(e);
|
|
79
77
|
}
|
|
80
78
|
if (this.$slotSuffix) {
|
|
81
79
|
let e = this.querySelectorAll("px-button-icon[slot=\"suffix\"]"), t = e.length > 0, n = e.length > 1;
|
|
@@ -83,7 +81,7 @@ var b = ["secondary"], x = [
|
|
|
83
81
|
this.configureSlotSuffixButtonIcon(e);
|
|
84
82
|
}), n && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
|
|
85
83
|
}
|
|
86
|
-
|
|
84
|
+
p(this);
|
|
87
85
|
}
|
|
88
86
|
static get observedAttributes() {
|
|
89
87
|
return [
|
|
@@ -108,7 +106,7 @@ var b = ["secondary"], x = [
|
|
|
108
106
|
attributeChangedCallback(e, t, n) {
|
|
109
107
|
if (t !== n) switch (e) {
|
|
110
108
|
case "variant":
|
|
111
|
-
|
|
109
|
+
m(this.$el, t, n);
|
|
112
110
|
break;
|
|
113
111
|
case "inverted":
|
|
114
112
|
for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") ? this.$children[e].removeAttribute("inverted") : this.$children[e].setAttribute("inverted", "");
|
|
@@ -118,20 +116,20 @@ var b = ["secondary"], x = [
|
|
|
118
116
|
case "radius--tablet":
|
|
119
117
|
case "radius--laptop":
|
|
120
118
|
case "radius--desktop":
|
|
121
|
-
this.updateRadius(e, t, n,
|
|
119
|
+
this.updateRadius(e, t, n, C);
|
|
122
120
|
break;
|
|
123
121
|
case "background-color":
|
|
124
|
-
|
|
122
|
+
g(this.$el, e, t, n, d);
|
|
125
123
|
break;
|
|
126
124
|
default: super.attributeChangedCallback(e, t, n);
|
|
127
125
|
}
|
|
128
126
|
}
|
|
129
127
|
configureSlotSuffixButtonIcon(e) {
|
|
130
|
-
e.hasAttribute("variant") && r(
|
|
128
|
+
e.hasAttribute("variant") && r(S, e.getAttribute("variant")) || e.setAttribute("variant", "secondary");
|
|
131
129
|
}
|
|
132
|
-
updateRadius(e, t, n,
|
|
133
|
-
if (!r(
|
|
134
|
-
|
|
130
|
+
updateRadius(e, t, n, i) {
|
|
131
|
+
if (!r(i, n)) {
|
|
132
|
+
a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
135
133
|
return;
|
|
136
134
|
}
|
|
137
135
|
let o = e.includes("--"), s = [];
|
|
@@ -258,31 +256,29 @@ var b = ["secondary"], x = [
|
|
|
258
256
|
this._updateBooleanAttribute("compact", e);
|
|
259
257
|
}
|
|
260
258
|
};
|
|
261
|
-
customElements.get("px-cell") || customElements.define("px-cell",
|
|
259
|
+
customElements.get("px-cell") || customElements.define("px-cell", w);
|
|
262
260
|
//#endregion
|
|
263
261
|
//#region src/cell-link.css?inline
|
|
264
|
-
var
|
|
265
|
-
|
|
266
|
-
var
|
|
267
|
-
|
|
268
|
-
var
|
|
262
|
+
var T = ".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)}", E = new CSSStyleSheet();
|
|
263
|
+
E.replaceSync(v);
|
|
264
|
+
var D = new CSSStyleSheet();
|
|
265
|
+
D.replaceSync(T);
|
|
266
|
+
var O = class t extends e {
|
|
269
267
|
static {
|
|
270
|
-
this.
|
|
268
|
+
this.template = i("<a class=\"cell-link\"><px-cell hoverable><slot name=\"visual\" slot=\"visual\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot><px-icon\n name=\"chevron_right\"\n slot=\"action-indicator\"\n from=\"lavender\"\n size=\"m\"\n color=\"inherit\"\n ></px-icon></px-cell></a>");
|
|
271
269
|
}
|
|
272
|
-
|
|
273
|
-
|
|
270
|
+
static {
|
|
271
|
+
this.nativeName = "a";
|
|
274
272
|
}
|
|
275
273
|
constructor() {
|
|
276
|
-
super(
|
|
277
|
-
let e = document.createElement(t.nativeName);
|
|
278
|
-
e.classList.add("cell-link"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
274
|
+
super(D, E), s(this.shadowRoot, t.template);
|
|
279
275
|
}
|
|
280
276
|
connectedCallback() {
|
|
281
277
|
if (this.$slotVisual) {
|
|
282
278
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
283
|
-
e &&
|
|
279
|
+
e && f(e);
|
|
284
280
|
}
|
|
285
|
-
this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab")),
|
|
281
|
+
this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab")), p(this);
|
|
286
282
|
}
|
|
287
283
|
static get observedAttributes() {
|
|
288
284
|
return [
|
|
@@ -312,10 +308,10 @@ var E = class t extends e {
|
|
|
312
308
|
this.$cell.variant = this.variant;
|
|
313
309
|
break;
|
|
314
310
|
case "inverted":
|
|
315
|
-
|
|
311
|
+
h(this.$cell, this.$children, this.inverted, [this.$pxIcon]);
|
|
316
312
|
break;
|
|
317
313
|
case "disabled":
|
|
318
|
-
|
|
314
|
+
_(this.$cell, this.$children, this.disabled, [], {
|
|
319
315
|
ariaEl: this.$el,
|
|
320
316
|
setAria: !0,
|
|
321
317
|
setTabIndex: !0
|
|
@@ -450,34 +446,32 @@ var E = class t extends e {
|
|
|
450
446
|
this._updateBooleanAttribute("compact", e);
|
|
451
447
|
}
|
|
452
448
|
};
|
|
453
|
-
customElements.get("px-cell-link") || customElements.define("px-cell-link",
|
|
449
|
+
customElements.get("px-cell-link") || customElements.define("px-cell-link", O);
|
|
454
450
|
//#endregion
|
|
455
451
|
//#region src/cell-button.css?inline
|
|
456
|
-
var
|
|
457
|
-
|
|
458
|
-
var
|
|
459
|
-
|
|
460
|
-
var
|
|
452
|
+
var k = ".cell-button{text-align:left;font-size:inherit;background:0 0;border:none;padding:0}", A = new CSSStyleSheet();
|
|
453
|
+
A.replaceSync(v);
|
|
454
|
+
var j = new CSSStyleSheet();
|
|
455
|
+
j.replaceSync(k);
|
|
456
|
+
var M = class t extends e {
|
|
457
|
+
static {
|
|
458
|
+
this.template = i("<button class=\"cell-button\"><px-cell hoverable><slot name=\"visual\" slot=\"visual\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot></px-cell></button>");
|
|
459
|
+
}
|
|
461
460
|
static {
|
|
462
461
|
this.nativeName = "button";
|
|
463
462
|
}
|
|
464
463
|
static {
|
|
465
464
|
this.accessorExclusions = ["disabled"];
|
|
466
465
|
}
|
|
467
|
-
template() {
|
|
468
|
-
return "\n <px-cell hoverable>\n <slot name=\"visual\" slot=\"visual\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n </px-cell>\n ";
|
|
469
|
-
}
|
|
470
466
|
constructor() {
|
|
471
|
-
super(
|
|
472
|
-
let e = document.createElement(t.nativeName);
|
|
473
|
-
e.classList.add("cell-button"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
467
|
+
super(j, A), s(this.shadowRoot, t.template);
|
|
474
468
|
}
|
|
475
469
|
connectedCallback() {
|
|
476
470
|
if (this.$slotVisual) {
|
|
477
471
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
478
|
-
e &&
|
|
472
|
+
e && f(e);
|
|
479
473
|
}
|
|
480
|
-
|
|
474
|
+
p(this);
|
|
481
475
|
}
|
|
482
476
|
static get observedAttributes() {
|
|
483
477
|
return [
|
|
@@ -505,10 +499,10 @@ var A = class t extends e {
|
|
|
505
499
|
this.$cell.variant = this.variant;
|
|
506
500
|
break;
|
|
507
501
|
case "inverted":
|
|
508
|
-
|
|
502
|
+
h(this.$cell, this.$children, this.inverted);
|
|
509
503
|
break;
|
|
510
504
|
case "disabled":
|
|
511
|
-
|
|
505
|
+
_(this.$cell, this.$children, this.disabled, [], {
|
|
512
506
|
ariaEl: this.$el,
|
|
513
507
|
setAria: !0,
|
|
514
508
|
setTabIndex: !0
|
|
@@ -631,26 +625,26 @@ var A = class t extends e {
|
|
|
631
625
|
this._updateBooleanAttribute("compact", e);
|
|
632
626
|
}
|
|
633
627
|
};
|
|
634
|
-
customElements.get("px-cell-button") || customElements.define("px-cell-button",
|
|
628
|
+
customElements.get("px-cell-button") || customElements.define("px-cell-button", M);
|
|
635
629
|
//#endregion
|
|
636
630
|
//#region src/CellCheckbox.ts
|
|
637
|
-
var
|
|
638
|
-
|
|
639
|
-
var
|
|
631
|
+
var N = new CSSStyleSheet();
|
|
632
|
+
N.replaceSync(v);
|
|
633
|
+
var P = [
|
|
640
634
|
"",
|
|
641
635
|
"left",
|
|
642
636
|
"right"
|
|
643
|
-
],
|
|
644
|
-
|
|
645
|
-
|
|
637
|
+
], F = class e extends t {
|
|
638
|
+
static {
|
|
639
|
+
this.template = i("<div class=\"cell-checkbox\"><px-cell hoverable><px-checkbox slot=\"prefix\" inert></px-checkbox><slot name=\"visual\" slot=\"visual\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot></px-cell></div>");
|
|
646
640
|
}
|
|
647
641
|
constructor() {
|
|
648
|
-
super(
|
|
642
|
+
super(N), s(this.shadowRoot, e.template), this.internals = this.attachInternals?.(), this.tabIndex = 0;
|
|
649
643
|
}
|
|
650
644
|
connectedCallback() {
|
|
651
645
|
if (this.name && this.$checkbox.setAttribute("name", this.name), this.value && this.$checkbox.setAttribute("value", this.value), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
|
|
652
646
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
653
|
-
e &&
|
|
647
|
+
e && f(e);
|
|
654
648
|
}
|
|
655
649
|
this.addEventListener("mouseover", () => {
|
|
656
650
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -660,7 +654,7 @@ var M = [
|
|
|
660
654
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
661
655
|
}), this.addEventListener("click", (e) => {
|
|
662
656
|
this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
|
|
663
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
657
|
+
}), this.hasAttribute("checked") && (this.checked = !0), p(this);
|
|
664
658
|
}
|
|
665
659
|
static get observedAttributes() {
|
|
666
660
|
return [
|
|
@@ -692,7 +686,7 @@ var M = [
|
|
|
692
686
|
this.$cell.variant = this.variant;
|
|
693
687
|
break;
|
|
694
688
|
case "inverted":
|
|
695
|
-
|
|
689
|
+
h(this.$cell, this.$children, this.inverted, [this.$checkbox]);
|
|
696
690
|
break;
|
|
697
691
|
case "disabled":
|
|
698
692
|
this.handleDisabledAttributeChange(n !== null);
|
|
@@ -717,9 +711,9 @@ var M = [
|
|
|
717
711
|
break;
|
|
718
712
|
case "state":
|
|
719
713
|
if (this.$checkbox) {
|
|
720
|
-
if (this.checkName(
|
|
714
|
+
if (this.checkName(c, n)) this.$checkbox.setAttribute("state", n);
|
|
721
715
|
else {
|
|
722
|
-
|
|
716
|
+
a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${c.join("\", \"")}".`);
|
|
723
717
|
return;
|
|
724
718
|
}
|
|
725
719
|
}
|
|
@@ -744,8 +738,8 @@ var M = [
|
|
|
744
738
|
})));
|
|
745
739
|
}
|
|
746
740
|
handleCheckboxPositionChange(e) {
|
|
747
|
-
if (!this.checkName(
|
|
748
|
-
|
|
741
|
+
if (!this.checkName(P, e)) {
|
|
742
|
+
a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join("\", \"")}".`);
|
|
749
743
|
return;
|
|
750
744
|
}
|
|
751
745
|
this.$checkbox && (e === "" || e === "left" ? this.$checkbox.setAttribute("slot", "prefix") : e === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
|
|
@@ -792,7 +786,7 @@ var M = [
|
|
|
792
786
|
return this.getAttribute("variant");
|
|
793
787
|
}
|
|
794
788
|
set variant(e) {
|
|
795
|
-
|
|
789
|
+
o(this, "variant", e);
|
|
796
790
|
}
|
|
797
791
|
get disabled() {
|
|
798
792
|
return this.hasAttribute("disabled");
|
|
@@ -804,61 +798,61 @@ var M = [
|
|
|
804
798
|
return this.getAttribute("separator");
|
|
805
799
|
}
|
|
806
800
|
set separator(e) {
|
|
807
|
-
|
|
801
|
+
o(this, "separator", e);
|
|
808
802
|
}
|
|
809
803
|
get separatorMobile() {
|
|
810
804
|
return this.getAttribute("separator--mobile");
|
|
811
805
|
}
|
|
812
806
|
set separatorMobile(e) {
|
|
813
|
-
|
|
807
|
+
o(this, "separator--mobile", e);
|
|
814
808
|
}
|
|
815
809
|
get separatorTablet() {
|
|
816
810
|
return this.getAttribute("separator--tablet");
|
|
817
811
|
}
|
|
818
812
|
set separatorTablet(e) {
|
|
819
|
-
|
|
813
|
+
o(this, "separator--tablet", e);
|
|
820
814
|
}
|
|
821
815
|
get separatorLaptop() {
|
|
822
816
|
return this.getAttribute("separator--laptop");
|
|
823
817
|
}
|
|
824
818
|
set separatorLaptop(e) {
|
|
825
|
-
|
|
819
|
+
o(this, "separator--laptop", e);
|
|
826
820
|
}
|
|
827
821
|
get separatorDesktop() {
|
|
828
822
|
return this.getAttribute("separator--desktop");
|
|
829
823
|
}
|
|
830
824
|
set separatorDesktop(e) {
|
|
831
|
-
|
|
825
|
+
o(this, "separator--desktop", e);
|
|
832
826
|
}
|
|
833
827
|
get radius() {
|
|
834
828
|
return this.getAttribute("radius");
|
|
835
829
|
}
|
|
836
830
|
set radius(e) {
|
|
837
|
-
|
|
831
|
+
o(this, "radius", e);
|
|
838
832
|
}
|
|
839
833
|
get radiusMobile() {
|
|
840
834
|
return this.getAttribute("radius--mobile");
|
|
841
835
|
}
|
|
842
836
|
set radiusMobile(e) {
|
|
843
|
-
|
|
837
|
+
o(this, "radius--mobile", e);
|
|
844
838
|
}
|
|
845
839
|
get radiusTablet() {
|
|
846
840
|
return this.getAttribute("radius--tablet");
|
|
847
841
|
}
|
|
848
842
|
set radiusTablet(e) {
|
|
849
|
-
|
|
843
|
+
o(this, "radius--tablet", e);
|
|
850
844
|
}
|
|
851
845
|
get radiusLaptop() {
|
|
852
846
|
return this.getAttribute("radius--laptop");
|
|
853
847
|
}
|
|
854
848
|
set radiusLaptop(e) {
|
|
855
|
-
|
|
849
|
+
o(this, "radius--laptop", e);
|
|
856
850
|
}
|
|
857
851
|
get radiusDesktop() {
|
|
858
852
|
return this.getAttribute("radius--desktop");
|
|
859
853
|
}
|
|
860
854
|
set radiusDesktop(e) {
|
|
861
|
-
|
|
855
|
+
o(this, "radius--desktop", e);
|
|
862
856
|
}
|
|
863
857
|
get checked() {
|
|
864
858
|
return this.hasAttribute("checked");
|
|
@@ -870,31 +864,31 @@ var M = [
|
|
|
870
864
|
return this.getAttribute("name");
|
|
871
865
|
}
|
|
872
866
|
set name(e) {
|
|
873
|
-
|
|
867
|
+
o(this, "name", e);
|
|
874
868
|
}
|
|
875
869
|
get state() {
|
|
876
870
|
return this.getAttribute("state");
|
|
877
871
|
}
|
|
878
872
|
set state(e) {
|
|
879
|
-
|
|
873
|
+
o(this, "state", e);
|
|
880
874
|
}
|
|
881
875
|
get value() {
|
|
882
876
|
return this.getAttribute("value");
|
|
883
877
|
}
|
|
884
878
|
set value(e) {
|
|
885
|
-
|
|
879
|
+
o(this, "value", e);
|
|
886
880
|
}
|
|
887
881
|
get checkboxPosition() {
|
|
888
882
|
return this.getAttribute("checkbox-position");
|
|
889
883
|
}
|
|
890
884
|
set checkboxPosition(e) {
|
|
891
|
-
|
|
885
|
+
o(this, "checkbox-position", e);
|
|
892
886
|
}
|
|
893
887
|
get backgroundColor() {
|
|
894
888
|
return this.getAttribute("background-color");
|
|
895
889
|
}
|
|
896
890
|
set backgroundColor(e) {
|
|
897
|
-
|
|
891
|
+
o(this, "background-color", e);
|
|
898
892
|
}
|
|
899
893
|
get compact() {
|
|
900
894
|
return this.hasAttribute("compact");
|
|
@@ -903,22 +897,22 @@ var M = [
|
|
|
903
897
|
n(this, "compact", e);
|
|
904
898
|
}
|
|
905
899
|
};
|
|
906
|
-
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox",
|
|
900
|
+
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", F);
|
|
907
901
|
//#endregion
|
|
908
902
|
//#region src/CellSwitch.ts
|
|
909
|
-
var
|
|
910
|
-
|
|
911
|
-
var
|
|
912
|
-
|
|
913
|
-
|
|
903
|
+
var I = new CSSStyleSheet();
|
|
904
|
+
I.replaceSync(v);
|
|
905
|
+
var L = class e extends t {
|
|
906
|
+
static {
|
|
907
|
+
this.template = i("<div class=\"cell-switch\"><px-cell hoverable><px-switch slot=\"action-indicator\" inert></px-switch><slot name=\"visual\" slot=\"visual\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot></px-cell></div>");
|
|
914
908
|
}
|
|
915
909
|
constructor() {
|
|
916
|
-
super(
|
|
910
|
+
super(I), s(this.shadowRoot, e.template), this.internals = this.attachInternals?.(), this.tabIndex = 0;
|
|
917
911
|
}
|
|
918
912
|
connectedCallback() {
|
|
919
913
|
if (this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
|
|
920
914
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
921
|
-
e &&
|
|
915
|
+
e && f(e);
|
|
922
916
|
}
|
|
923
917
|
this.addEventListener("mouseover", () => {
|
|
924
918
|
this.$switch.setAttribute("hover", "");
|
|
@@ -928,7 +922,7 @@ var F = class extends t {
|
|
|
928
922
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
929
923
|
}), this.addEventListener("click", (e) => {
|
|
930
924
|
this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
|
|
931
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
925
|
+
}), this.hasAttribute("checked") && (this.checked = !0), p(this);
|
|
932
926
|
}
|
|
933
927
|
static get observedAttributes() {
|
|
934
928
|
return [
|
|
@@ -958,7 +952,7 @@ var F = class extends t {
|
|
|
958
952
|
this.$cell.variant = this.variant;
|
|
959
953
|
break;
|
|
960
954
|
case "inverted":
|
|
961
|
-
|
|
955
|
+
h(this.$cell, this.$children, this.inverted, [this.$switch]);
|
|
962
956
|
break;
|
|
963
957
|
case "disabled":
|
|
964
958
|
this.handleDisabledAttributeChange(n !== null);
|
|
@@ -1039,7 +1033,7 @@ var F = class extends t {
|
|
|
1039
1033
|
return this.getAttribute("variant");
|
|
1040
1034
|
}
|
|
1041
1035
|
set variant(e) {
|
|
1042
|
-
|
|
1036
|
+
o(this, "variant", e);
|
|
1043
1037
|
}
|
|
1044
1038
|
get disabled() {
|
|
1045
1039
|
return this.hasAttribute("disabled");
|
|
@@ -1051,61 +1045,61 @@ var F = class extends t {
|
|
|
1051
1045
|
return this.getAttribute("separator");
|
|
1052
1046
|
}
|
|
1053
1047
|
set separator(e) {
|
|
1054
|
-
|
|
1048
|
+
o(this, "separator", e);
|
|
1055
1049
|
}
|
|
1056
1050
|
get separatorMobile() {
|
|
1057
1051
|
return this.getAttribute("separator--mobile");
|
|
1058
1052
|
}
|
|
1059
1053
|
set separatorMobile(e) {
|
|
1060
|
-
|
|
1054
|
+
o(this, "separator--mobile", e);
|
|
1061
1055
|
}
|
|
1062
1056
|
get separatorTablet() {
|
|
1063
1057
|
return this.getAttribute("separator--tablet");
|
|
1064
1058
|
}
|
|
1065
1059
|
set separatorTablet(e) {
|
|
1066
|
-
|
|
1060
|
+
o(this, "separator--tablet", e);
|
|
1067
1061
|
}
|
|
1068
1062
|
get separatorLaptop() {
|
|
1069
1063
|
return this.getAttribute("separator--laptop");
|
|
1070
1064
|
}
|
|
1071
1065
|
set separatorLaptop(e) {
|
|
1072
|
-
|
|
1066
|
+
o(this, "separator--laptop", e);
|
|
1073
1067
|
}
|
|
1074
1068
|
get separatorDesktop() {
|
|
1075
1069
|
return this.getAttribute("separator--desktop");
|
|
1076
1070
|
}
|
|
1077
1071
|
set separatorDesktop(e) {
|
|
1078
|
-
|
|
1072
|
+
o(this, "separator--desktop", e);
|
|
1079
1073
|
}
|
|
1080
1074
|
get radius() {
|
|
1081
1075
|
return this.getAttribute("radius");
|
|
1082
1076
|
}
|
|
1083
1077
|
set radius(e) {
|
|
1084
|
-
|
|
1078
|
+
o(this, "radius", e);
|
|
1085
1079
|
}
|
|
1086
1080
|
get radiusMobile() {
|
|
1087
1081
|
return this.getAttribute("radius--mobile");
|
|
1088
1082
|
}
|
|
1089
1083
|
set radiusMobile(e) {
|
|
1090
|
-
|
|
1084
|
+
o(this, "radius--mobile", e);
|
|
1091
1085
|
}
|
|
1092
1086
|
get radiusTablet() {
|
|
1093
1087
|
return this.getAttribute("radius--tablet");
|
|
1094
1088
|
}
|
|
1095
1089
|
set radiusTablet(e) {
|
|
1096
|
-
|
|
1090
|
+
o(this, "radius--tablet", e);
|
|
1097
1091
|
}
|
|
1098
1092
|
get radiusLaptop() {
|
|
1099
1093
|
return this.getAttribute("radius--laptop");
|
|
1100
1094
|
}
|
|
1101
1095
|
set radiusLaptop(e) {
|
|
1102
|
-
|
|
1096
|
+
o(this, "radius--laptop", e);
|
|
1103
1097
|
}
|
|
1104
1098
|
get radiusDesktop() {
|
|
1105
1099
|
return this.getAttribute("radius--desktop");
|
|
1106
1100
|
}
|
|
1107
1101
|
set radiusDesktop(e) {
|
|
1108
|
-
|
|
1102
|
+
o(this, "radius--desktop", e);
|
|
1109
1103
|
}
|
|
1110
1104
|
get checked() {
|
|
1111
1105
|
return this.hasAttribute("checked");
|
|
@@ -1117,25 +1111,25 @@ var F = class extends t {
|
|
|
1117
1111
|
return this.getAttribute("name");
|
|
1118
1112
|
}
|
|
1119
1113
|
set name(e) {
|
|
1120
|
-
|
|
1114
|
+
o(this, "name", e);
|
|
1121
1115
|
}
|
|
1122
1116
|
get state() {
|
|
1123
1117
|
return this.getAttribute("state");
|
|
1124
1118
|
}
|
|
1125
1119
|
set state(e) {
|
|
1126
|
-
|
|
1120
|
+
o(this, "state", e);
|
|
1127
1121
|
}
|
|
1128
1122
|
get value() {
|
|
1129
1123
|
return this.getAttribute("value");
|
|
1130
1124
|
}
|
|
1131
1125
|
set value(e) {
|
|
1132
|
-
|
|
1126
|
+
o(this, "value", e);
|
|
1133
1127
|
}
|
|
1134
1128
|
get backgroundColor() {
|
|
1135
1129
|
return this.getAttribute("background-color");
|
|
1136
1130
|
}
|
|
1137
1131
|
set backgroundColor(e) {
|
|
1138
|
-
|
|
1132
|
+
o(this, "background-color", e);
|
|
1139
1133
|
}
|
|
1140
1134
|
get compact() {
|
|
1141
1135
|
return this.hasAttribute("compact");
|
|
@@ -1144,26 +1138,26 @@ var F = class extends t {
|
|
|
1144
1138
|
n(this, "compact", e);
|
|
1145
1139
|
}
|
|
1146
1140
|
};
|
|
1147
|
-
customElements.get("px-cell-switch") || customElements.define("px-cell-switch",
|
|
1141
|
+
customElements.get("px-cell-switch") || customElements.define("px-cell-switch", L);
|
|
1148
1142
|
//#endregion
|
|
1149
1143
|
//#region src/CellRadio.ts
|
|
1150
|
-
var
|
|
1151
|
-
|
|
1152
|
-
var
|
|
1144
|
+
var R = new CSSStyleSheet();
|
|
1145
|
+
R.replaceSync(v);
|
|
1146
|
+
var z = [
|
|
1153
1147
|
"",
|
|
1154
1148
|
"left",
|
|
1155
1149
|
"right"
|
|
1156
|
-
],
|
|
1157
|
-
|
|
1158
|
-
|
|
1150
|
+
], B = class e extends t {
|
|
1151
|
+
static {
|
|
1152
|
+
this.template = i("<div class=\"cell-radio\"><px-cell hoverable><px-radio slot=\"prefix\" inert></px-radio><slot name=\"visual\" slot=\"visual\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot></px-cell></div>");
|
|
1159
1153
|
}
|
|
1160
1154
|
constructor() {
|
|
1161
|
-
super(
|
|
1155
|
+
super(R), s(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
1162
1156
|
}
|
|
1163
1157
|
connectedCallback() {
|
|
1164
1158
|
if (this.tabIndex = this.parentElement?.querySelector("px-cell-radio") === this ? 0 : -1, this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotVisual) {
|
|
1165
1159
|
let e = this.querySelector("px-img[slot=\"visual\"]");
|
|
1166
|
-
e &&
|
|
1160
|
+
e && f(e);
|
|
1167
1161
|
}
|
|
1168
1162
|
this.addEventListener("mouseover", () => {
|
|
1169
1163
|
this.$radio.setAttribute("hover", "");
|
|
@@ -1173,7 +1167,7 @@ var L = [
|
|
|
1173
1167
|
e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
|
|
1174
1168
|
}), this.addEventListener("click", (e) => {
|
|
1175
1169
|
this.checked ||= !0, e.stopPropagation(), e.preventDefault();
|
|
1176
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
1170
|
+
}), this.hasAttribute("checked") && (this.checked = !0), p(this);
|
|
1177
1171
|
}
|
|
1178
1172
|
static get observedAttributes() {
|
|
1179
1173
|
return [
|
|
@@ -1205,7 +1199,7 @@ var L = [
|
|
|
1205
1199
|
this.$cell.variant = this.variant;
|
|
1206
1200
|
break;
|
|
1207
1201
|
case "inverted":
|
|
1208
|
-
|
|
1202
|
+
h(this.$cell, this.$children, this.inverted, [this.$radio]);
|
|
1209
1203
|
break;
|
|
1210
1204
|
case "disabled":
|
|
1211
1205
|
this.handleDisabledAttributeChange(n !== null);
|
|
@@ -1230,9 +1224,9 @@ var L = [
|
|
|
1230
1224
|
break;
|
|
1231
1225
|
case "state":
|
|
1232
1226
|
if (this.$radio) {
|
|
1233
|
-
if (this.checkName(
|
|
1227
|
+
if (this.checkName(l, n)) this.$radio.setAttribute("state", n);
|
|
1234
1228
|
else {
|
|
1235
|
-
|
|
1229
|
+
a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join("\", \"")}".`);
|
|
1236
1230
|
return;
|
|
1237
1231
|
}
|
|
1238
1232
|
}
|
|
@@ -1257,8 +1251,8 @@ var L = [
|
|
|
1257
1251
|
})));
|
|
1258
1252
|
}
|
|
1259
1253
|
handleRadioPositionChange(e) {
|
|
1260
|
-
if (!this.checkName(
|
|
1261
|
-
|
|
1254
|
+
if (!this.checkName(z, e)) {
|
|
1255
|
+
a(`"${e}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${z.join("\", \"")}".`);
|
|
1262
1256
|
return;
|
|
1263
1257
|
}
|
|
1264
1258
|
this.$radio && (e === "" || e === "left" ? this.$radio.setAttribute("slot", "prefix") : e === "right" && this.$radio.setAttribute("slot", "action-indicator"));
|
|
@@ -1305,7 +1299,7 @@ var L = [
|
|
|
1305
1299
|
return this.getAttribute("variant");
|
|
1306
1300
|
}
|
|
1307
1301
|
set variant(e) {
|
|
1308
|
-
|
|
1302
|
+
o(this, "variant", e);
|
|
1309
1303
|
}
|
|
1310
1304
|
get disabled() {
|
|
1311
1305
|
return this.hasAttribute("disabled");
|
|
@@ -1317,61 +1311,61 @@ var L = [
|
|
|
1317
1311
|
return this.getAttribute("separator");
|
|
1318
1312
|
}
|
|
1319
1313
|
set separator(e) {
|
|
1320
|
-
|
|
1314
|
+
o(this, "separator", e);
|
|
1321
1315
|
}
|
|
1322
1316
|
get separatorMobile() {
|
|
1323
1317
|
return this.getAttribute("separator--mobile");
|
|
1324
1318
|
}
|
|
1325
1319
|
set separatorMobile(e) {
|
|
1326
|
-
|
|
1320
|
+
o(this, "separator--mobile", e);
|
|
1327
1321
|
}
|
|
1328
1322
|
get separatorTablet() {
|
|
1329
1323
|
return this.getAttribute("separator--tablet");
|
|
1330
1324
|
}
|
|
1331
1325
|
set separatorTablet(e) {
|
|
1332
|
-
|
|
1326
|
+
o(this, "separator--tablet", e);
|
|
1333
1327
|
}
|
|
1334
1328
|
get separatorLaptop() {
|
|
1335
1329
|
return this.getAttribute("separator--laptop");
|
|
1336
1330
|
}
|
|
1337
1331
|
set separatorLaptop(e) {
|
|
1338
|
-
|
|
1332
|
+
o(this, "separator--laptop", e);
|
|
1339
1333
|
}
|
|
1340
1334
|
get separatorDesktop() {
|
|
1341
1335
|
return this.getAttribute("separator--desktop");
|
|
1342
1336
|
}
|
|
1343
1337
|
set separatorDesktop(e) {
|
|
1344
|
-
|
|
1338
|
+
o(this, "separator--desktop", e);
|
|
1345
1339
|
}
|
|
1346
1340
|
get radius() {
|
|
1347
1341
|
return this.getAttribute("radius");
|
|
1348
1342
|
}
|
|
1349
1343
|
set radius(e) {
|
|
1350
|
-
|
|
1344
|
+
o(this, "radius", e);
|
|
1351
1345
|
}
|
|
1352
1346
|
get radiusMobile() {
|
|
1353
1347
|
return this.getAttribute("radius--mobile");
|
|
1354
1348
|
}
|
|
1355
1349
|
set radiusMobile(e) {
|
|
1356
|
-
|
|
1350
|
+
o(this, "radius--mobile", e);
|
|
1357
1351
|
}
|
|
1358
1352
|
get radiusTablet() {
|
|
1359
1353
|
return this.getAttribute("radius--tablet");
|
|
1360
1354
|
}
|
|
1361
1355
|
set radiusTablet(e) {
|
|
1362
|
-
|
|
1356
|
+
o(this, "radius--tablet", e);
|
|
1363
1357
|
}
|
|
1364
1358
|
get radiusLaptop() {
|
|
1365
1359
|
return this.getAttribute("radius--laptop");
|
|
1366
1360
|
}
|
|
1367
1361
|
set radiusLaptop(e) {
|
|
1368
|
-
|
|
1362
|
+
o(this, "radius--laptop", e);
|
|
1369
1363
|
}
|
|
1370
1364
|
get radiusDesktop() {
|
|
1371
1365
|
return this.getAttribute("radius--desktop");
|
|
1372
1366
|
}
|
|
1373
1367
|
set radiusDesktop(e) {
|
|
1374
|
-
|
|
1368
|
+
o(this, "radius--desktop", e);
|
|
1375
1369
|
}
|
|
1376
1370
|
get checked() {
|
|
1377
1371
|
return this.hasAttribute("checked");
|
|
@@ -1383,31 +1377,31 @@ var L = [
|
|
|
1383
1377
|
return this.getAttribute("name");
|
|
1384
1378
|
}
|
|
1385
1379
|
set name(e) {
|
|
1386
|
-
|
|
1380
|
+
o(this, "name", e);
|
|
1387
1381
|
}
|
|
1388
1382
|
get state() {
|
|
1389
1383
|
return this.getAttribute("state") ?? "";
|
|
1390
1384
|
}
|
|
1391
1385
|
set state(e) {
|
|
1392
|
-
|
|
1386
|
+
o(this, "state", e);
|
|
1393
1387
|
}
|
|
1394
1388
|
get value() {
|
|
1395
1389
|
return this.getAttribute("value");
|
|
1396
1390
|
}
|
|
1397
1391
|
set value(e) {
|
|
1398
|
-
|
|
1392
|
+
o(this, "value", e);
|
|
1399
1393
|
}
|
|
1400
1394
|
get radioPosition() {
|
|
1401
1395
|
return this.getAttribute("radio-position");
|
|
1402
1396
|
}
|
|
1403
1397
|
set radioPosition(e) {
|
|
1404
|
-
|
|
1398
|
+
o(this, "radio-position", e);
|
|
1405
1399
|
}
|
|
1406
1400
|
get backgroundColor() {
|
|
1407
1401
|
return this.getAttribute("background-color");
|
|
1408
1402
|
}
|
|
1409
1403
|
set backgroundColor(e) {
|
|
1410
|
-
|
|
1404
|
+
o(this, "background-color", e);
|
|
1411
1405
|
}
|
|
1412
1406
|
get compact() {
|
|
1413
1407
|
return this.hasAttribute("compact");
|
|
@@ -1416,6 +1410,6 @@ var L = [
|
|
|
1416
1410
|
n(this, "compact", e);
|
|
1417
1411
|
}
|
|
1418
1412
|
};
|
|
1419
|
-
customElements.get("px-cell-radio") || customElements.define("px-cell-radio",
|
|
1413
|
+
customElements.get("px-cell-radio") || customElements.define("px-cell-radio", B);
|
|
1420
1414
|
//#endregion
|
|
1421
|
-
export {
|
|
1415
|
+
export { w as Cell, M as CellButton, F as CellCheckbox, O as CellLink, B as CellRadio, L as CellSwitch, P as cellCheckboxPosition, z as cellRadioPosition, C as radiusValues, S as suffixButtonIconVariantValues };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-cell",
|
|
4
|
-
"version": "1.4.17-
|
|
4
|
+
"version": "1.4.17-beta.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -48,8 +48,7 @@
|
|
|
48
48
|
{ "name": "radiusLaptop" },
|
|
49
49
|
{ "name": "radiusDesktop" },
|
|
50
50
|
{ "name": "backgroundColor" },
|
|
51
|
-
{ "name": "compact" }
|
|
52
|
-
{ "name": "innerHTML" }
|
|
51
|
+
{ "name": "compact" }
|
|
53
52
|
],
|
|
54
53
|
"events": []
|
|
55
54
|
}
|
|
@@ -114,8 +113,7 @@
|
|
|
114
113
|
{ "name": "radiusLaptop" },
|
|
115
114
|
{ "name": "radiusDesktop" },
|
|
116
115
|
{ "name": "backgroundColor" },
|
|
117
|
-
{ "name": "compact" }
|
|
118
|
-
{ "name": "innerHTML" }
|
|
116
|
+
{ "name": "compact" }
|
|
119
117
|
],
|
|
120
118
|
"events": []
|
|
121
119
|
}
|
|
@@ -174,7 +172,6 @@
|
|
|
174
172
|
{ "name": "checkboxPosition" },
|
|
175
173
|
{ "name": "backgroundColor" },
|
|
176
174
|
{ "name": "compact" },
|
|
177
|
-
{ "name": "innerHTML" },
|
|
178
175
|
{ "name": "tabIndex", "type": "number" }
|
|
179
176
|
],
|
|
180
177
|
"events": [{ "name": "change", "type": "Event" }]
|
|
@@ -228,8 +225,7 @@
|
|
|
228
225
|
{ "name": "radiusDesktop" },
|
|
229
226
|
{ "name": "targetBlankAriaLabel" },
|
|
230
227
|
{ "name": "backgroundColor" },
|
|
231
|
-
{ "name": "compact" }
|
|
232
|
-
{ "name": "innerHTML" }
|
|
228
|
+
{ "name": "compact" }
|
|
233
229
|
],
|
|
234
230
|
"events": []
|
|
235
231
|
}
|
|
@@ -287,8 +283,7 @@
|
|
|
287
283
|
{ "name": "value" },
|
|
288
284
|
{ "name": "radioPosition" },
|
|
289
285
|
{ "name": "backgroundColor" },
|
|
290
|
-
{ "name": "compact" }
|
|
291
|
-
{ "name": "innerHTML" }
|
|
286
|
+
{ "name": "compact" }
|
|
292
287
|
],
|
|
293
288
|
"events": [{ "name": "change", "type": "Event" }]
|
|
294
289
|
}
|
|
@@ -344,7 +339,6 @@
|
|
|
344
339
|
{ "name": "value" },
|
|
345
340
|
{ "name": "backgroundColor" },
|
|
346
341
|
{ "name": "compact" },
|
|
347
|
-
{ "name": "innerHTML" },
|
|
348
342
|
{ "name": "tabIndex", "type": "number" }
|
|
349
343
|
],
|
|
350
344
|
"events": [{ "name": "change", "type": "Event" }]
|