@proximus/lavender-tile 1.4.2-beta.1 → 1.4.3-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +59 -53
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { VerticallyExtendedElement as
|
|
1
|
+
import { VerticallyExtendedElement as D, checkName as q, log as v, PxElement as k, WithExtraAttributes as p } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import { checkboxStateValues as
|
|
4
|
-
import { stateValues as
|
|
3
|
+
import { checkboxStateValues as P } from "@proximus/lavender-checkbox";
|
|
4
|
+
import { stateValues as z } from "@proximus/lavender-radio-group";
|
|
5
5
|
function l(o) {
|
|
6
6
|
o.hasAttribute("width") || o.setAttribute("width", "s"), o.setAttribute("border-radius", "pill");
|
|
7
7
|
}
|
|
@@ -12,23 +12,23 @@ function h(o, t, e, i = []) {
|
|
|
12
12
|
s.hasAttribute("inverted") && s.removeAttribute("inverted");
|
|
13
13
|
}));
|
|
14
14
|
}
|
|
15
|
-
function
|
|
15
|
+
function x(o, t, e, i = [], s = {}) {
|
|
16
16
|
e ? (o.setAttribute("disabled", ""), i.forEach((r) => r.setAttribute("disabled", "")), t.forEach((r) => {
|
|
17
17
|
r.hasAttribute("disabled") || r.setAttribute("disabled", "");
|
|
18
18
|
}), s.ariaEl && s.setAria && s.ariaEl.setAttribute("aria-disabled", "true"), s.ariaEl && s.setTabIndex && (s.ariaEl.tabIndex = -1)) : (o.removeAttribute("disabled"), i.forEach((r) => r.removeAttribute("disabled")), t.forEach((r) => {
|
|
19
19
|
r.hasAttribute("disabled") && r.removeAttribute("disabled");
|
|
20
20
|
}), s.ariaEl && s.setAria && s.ariaEl.setAttribute("aria-disabled", "false"), s.ariaEl && s.setTabIndex && (s.ariaEl.tabIndex = 0));
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
|
|
22
|
+
const I = '.tile{display:flex;flex-direction:column;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-color-background-container-light-default) )}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (min-width: 48em){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}', a = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 768px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}', g = new CSSStyleSheet();
|
|
23
|
+
g.replaceSync(I);
|
|
24
24
|
const m = new CSSStyleSheet();
|
|
25
25
|
m.replaceSync(a);
|
|
26
|
-
const
|
|
26
|
+
const L = [
|
|
27
27
|
"",
|
|
28
28
|
"default",
|
|
29
29
|
"container-light",
|
|
30
30
|
"container-default"
|
|
31
|
-
], c = class c extends
|
|
31
|
+
], c = class c extends D {
|
|
32
32
|
template() {
|
|
33
33
|
return `
|
|
34
34
|
<px-hstack gap="s" align-items="center" class="tile__header">
|
|
@@ -42,7 +42,7 @@ const I = [
|
|
|
42
42
|
`;
|
|
43
43
|
}
|
|
44
44
|
constructor() {
|
|
45
|
-
super(m,
|
|
45
|
+
super(m, g);
|
|
46
46
|
const t = document.createElement(c.nativeName);
|
|
47
47
|
t.classList.add("tile"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
48
48
|
}
|
|
@@ -75,7 +75,7 @@ const I = [
|
|
|
75
75
|
this.updateBackgroundColor(
|
|
76
76
|
e,
|
|
77
77
|
i,
|
|
78
|
-
|
|
78
|
+
L
|
|
79
79
|
);
|
|
80
80
|
break;
|
|
81
81
|
default:
|
|
@@ -90,8 +90,10 @@ const I = [
|
|
|
90
90
|
this.centerContent ? this.$tileContent.style.textAlign = "center" : this.$tileContent.style.textAlign = "left";
|
|
91
91
|
}
|
|
92
92
|
updateBackgroundColor(t, e, i) {
|
|
93
|
-
if (!
|
|
94
|
-
|
|
93
|
+
if (!q(i, e)) {
|
|
94
|
+
v(
|
|
95
|
+
`${e} is not an allowed background-color value for ${this.tagName.toLowerCase()}`
|
|
96
|
+
);
|
|
95
97
|
return;
|
|
96
98
|
}
|
|
97
99
|
const s = (r) => {
|
|
@@ -154,11 +156,11 @@ const I = [
|
|
|
154
156
|
c.nativeName = "div";
|
|
155
157
|
let b = c;
|
|
156
158
|
customElements.get("px-tile") || customElements.define("px-tile", b);
|
|
157
|
-
const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media only screen and (min-width: 48em){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}",
|
|
158
|
-
|
|
159
|
-
const
|
|
160
|
-
|
|
161
|
-
const n = class n extends
|
|
159
|
+
const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media only screen and (min-width: 48em){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", A = new CSSStyleSheet();
|
|
160
|
+
A.replaceSync(R);
|
|
161
|
+
const $ = new CSSStyleSheet();
|
|
162
|
+
$.replaceSync(a);
|
|
163
|
+
const n = class n extends k {
|
|
162
164
|
template() {
|
|
163
165
|
return `
|
|
164
166
|
<px-tile hoverable>
|
|
@@ -170,7 +172,7 @@ const n = class n extends p {
|
|
|
170
172
|
`;
|
|
171
173
|
}
|
|
172
174
|
constructor() {
|
|
173
|
-
super(A
|
|
175
|
+
super($, A);
|
|
174
176
|
const t = document.createElement(n.nativeName);
|
|
175
177
|
t.classList.add("tile-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
176
178
|
}
|
|
@@ -205,7 +207,7 @@ const n = class n extends p {
|
|
|
205
207
|
h(this.$tile, this.$children, this.inverted);
|
|
206
208
|
break;
|
|
207
209
|
case "disabled":
|
|
208
|
-
|
|
210
|
+
x(this.$tile, this.$children, this.disabled, [], {
|
|
209
211
|
ariaEl: this.$el,
|
|
210
212
|
setAria: !0,
|
|
211
213
|
setTabIndex: !0
|
|
@@ -259,15 +261,15 @@ const n = class n extends p {
|
|
|
259
261
|
n.nativeName = "button", n.accessorExclusions = ["disabled"];
|
|
260
262
|
let u = n;
|
|
261
263
|
customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
|
|
262
|
-
const
|
|
263
|
-
|
|
264
|
-
class
|
|
264
|
+
const C = new CSSStyleSheet();
|
|
265
|
+
C.replaceSync(a);
|
|
266
|
+
class H extends p {
|
|
265
267
|
template() {
|
|
266
268
|
return `
|
|
267
269
|
<div class="tile-checkbox">
|
|
268
270
|
<px-tile hoverable>
|
|
269
271
|
<slot name="prefix" slot="prefix"></slot>
|
|
270
|
-
<px-checkbox slot="suffix"
|
|
272
|
+
<px-checkbox slot="suffix" inert></px-checkbox>
|
|
271
273
|
<slot name="label" slot="label"></slot>
|
|
272
274
|
<slot name="description" slot="description"></slot>
|
|
273
275
|
</px-tile>
|
|
@@ -276,10 +278,10 @@ class L extends v {
|
|
|
276
278
|
}
|
|
277
279
|
constructor() {
|
|
278
280
|
var t;
|
|
279
|
-
super(
|
|
281
|
+
super(C), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
280
282
|
}
|
|
281
283
|
connectedCallback() {
|
|
282
|
-
if (this.$slotPrefix) {
|
|
284
|
+
if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
|
|
283
285
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
284
286
|
t && l(t);
|
|
285
287
|
}
|
|
@@ -328,10 +330,12 @@ class L extends v {
|
|
|
328
330
|
break;
|
|
329
331
|
case "state":
|
|
330
332
|
if (this.$checkbox)
|
|
331
|
-
if (this.checkName(
|
|
333
|
+
if (this.checkName(P, i))
|
|
332
334
|
this.$checkbox.setAttribute("state", i);
|
|
333
335
|
else {
|
|
334
|
-
|
|
336
|
+
v(
|
|
337
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
338
|
+
);
|
|
335
339
|
return;
|
|
336
340
|
}
|
|
337
341
|
break;
|
|
@@ -437,16 +441,16 @@ class L extends v {
|
|
|
437
441
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
438
442
|
}
|
|
439
443
|
}
|
|
440
|
-
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox",
|
|
441
|
-
const
|
|
442
|
-
|
|
443
|
-
class
|
|
444
|
+
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", H);
|
|
445
|
+
const S = new CSSStyleSheet();
|
|
446
|
+
S.replaceSync(a);
|
|
447
|
+
class B extends p {
|
|
444
448
|
template() {
|
|
445
449
|
return `
|
|
446
450
|
<div class="tile-radio">
|
|
447
451
|
<px-tile hoverable>
|
|
448
452
|
<slot name="prefix" slot="prefix"></slot>
|
|
449
|
-
<px-radio slot="suffix"
|
|
453
|
+
<px-radio slot="suffix" inert></px-radio>
|
|
450
454
|
<slot name="label" slot="label"></slot>
|
|
451
455
|
<slot name="description" slot="description"></slot>
|
|
452
456
|
</px-tile>
|
|
@@ -455,11 +459,11 @@ class H extends v {
|
|
|
455
459
|
}
|
|
456
460
|
constructor() {
|
|
457
461
|
var t;
|
|
458
|
-
super(
|
|
462
|
+
super(S), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
459
463
|
}
|
|
460
464
|
connectedCallback() {
|
|
461
465
|
var t;
|
|
462
|
-
if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotPrefix) {
|
|
466
|
+
if (this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotPrefix) {
|
|
463
467
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
464
468
|
e && l(e);
|
|
465
469
|
}
|
|
@@ -508,10 +512,12 @@ class H extends v {
|
|
|
508
512
|
break;
|
|
509
513
|
case "state":
|
|
510
514
|
if (this.$radio)
|
|
511
|
-
if (this.checkName(
|
|
515
|
+
if (this.checkName(z, i))
|
|
512
516
|
this.$radio.setAttribute("state", i);
|
|
513
517
|
else {
|
|
514
|
-
|
|
518
|
+
v(
|
|
519
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
520
|
+
);
|
|
515
521
|
return;
|
|
516
522
|
}
|
|
517
523
|
break;
|
|
@@ -617,12 +623,12 @@ class H extends v {
|
|
|
617
623
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
618
624
|
}
|
|
619
625
|
}
|
|
620
|
-
customElements.get("px-tile-radio") || customElements.define("px-tile-radio",
|
|
621
|
-
const
|
|
622
|
-
|
|
626
|
+
customElements.get("px-tile-radio") || customElements.define("px-tile-radio", B);
|
|
627
|
+
const T = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", w = new CSSStyleSheet();
|
|
628
|
+
w.replaceSync(T);
|
|
623
629
|
const y = new CSSStyleSheet();
|
|
624
630
|
y.replaceSync(a);
|
|
625
|
-
const d = class d extends
|
|
631
|
+
const d = class d extends k {
|
|
626
632
|
template() {
|
|
627
633
|
return `
|
|
628
634
|
<px-tile hoverable>
|
|
@@ -640,7 +646,7 @@ const d = class d extends p {
|
|
|
640
646
|
`;
|
|
641
647
|
}
|
|
642
648
|
constructor() {
|
|
643
|
-
super(y,
|
|
649
|
+
super(y, w);
|
|
644
650
|
const t = document.createElement(d.nativeName);
|
|
645
651
|
t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
646
652
|
}
|
|
@@ -679,7 +685,7 @@ const d = class d extends p {
|
|
|
679
685
|
]);
|
|
680
686
|
break;
|
|
681
687
|
case "disabled":
|
|
682
|
-
|
|
688
|
+
x(this.$tile, this.$children, this.disabled, [], {
|
|
683
689
|
ariaEl: this.$el,
|
|
684
690
|
setAria: !0,
|
|
685
691
|
setTabIndex: !0
|
|
@@ -742,15 +748,15 @@ const d = class d extends p {
|
|
|
742
748
|
d.nativeName = "a";
|
|
743
749
|
let f = d;
|
|
744
750
|
customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
|
|
745
|
-
const
|
|
746
|
-
|
|
747
|
-
class
|
|
751
|
+
const E = new CSSStyleSheet();
|
|
752
|
+
E.replaceSync(a);
|
|
753
|
+
class F extends p {
|
|
748
754
|
template() {
|
|
749
755
|
return `
|
|
750
756
|
<div class="tile-switch">
|
|
751
757
|
<px-tile hoverable>
|
|
752
758
|
<slot name="prefix" slot="prefix"></slot>
|
|
753
|
-
<px-switch slot="suffix"
|
|
759
|
+
<px-switch slot="suffix" inert></px-switch>
|
|
754
760
|
<slot name="label" slot="label"></slot>
|
|
755
761
|
<slot name="description" slot="description"></slot>
|
|
756
762
|
</px-tile>
|
|
@@ -759,10 +765,10 @@ class T extends v {
|
|
|
759
765
|
}
|
|
760
766
|
constructor() {
|
|
761
767
|
var t;
|
|
762
|
-
super(
|
|
768
|
+
super(E), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
763
769
|
}
|
|
764
770
|
connectedCallback() {
|
|
765
|
-
if (this.$slotPrefix) {
|
|
771
|
+
if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
|
|
766
772
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
767
773
|
t && l(t);
|
|
768
774
|
}
|
|
@@ -904,13 +910,13 @@ class T extends v {
|
|
|
904
910
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
905
911
|
}
|
|
906
912
|
}
|
|
907
|
-
customElements.get("px-tile-switch") || customElements.define("px-tile-switch",
|
|
913
|
+
customElements.get("px-tile-switch") || customElements.define("px-tile-switch", F);
|
|
908
914
|
export {
|
|
909
915
|
b as Tile,
|
|
910
916
|
u as TileButton,
|
|
911
|
-
|
|
917
|
+
H as TileCheckbox,
|
|
912
918
|
f as TileLink,
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
919
|
+
B as TileRadio,
|
|
920
|
+
F as TileSwitch,
|
|
921
|
+
L as tileBackgroundColorValues
|
|
916
922
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-tile",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3-alpha.11",
|
|
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"
|