@proximus/lavender-tile 1.4.9-alpha.9 → 1.4.9-beta.2
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 +49 -49
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { VerticallyExtendedElement as
|
|
1
|
+
import { VerticallyExtendedElement as P, checkName as z, log as v, PxElement as g, WithExtraAttributes as p } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import { checkboxStateValues as
|
|
4
|
-
import { stateValues as
|
|
5
|
-
function
|
|
3
|
+
import { checkboxStateValues as k } from "@proximus/lavender-checkbox";
|
|
4
|
+
import { stateValues as x } from "@proximus/lavender-radio-group";
|
|
5
|
+
function a(o) {
|
|
6
6
|
o.hasAttribute("width") || o.setAttribute("width", "s"), o.setAttribute("border-radius", "pill");
|
|
7
7
|
}
|
|
8
8
|
function h(o, t, e, i = []) {
|
|
@@ -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 m(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 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
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
|
|
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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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)}', l = ':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 screen and (min-width: 48rem){: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-tablet)}: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-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-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 .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-laptop)}: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-laptop);outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}: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)}', A = new CSSStyleSheet();
|
|
23
|
+
A.replaceSync(I);
|
|
24
|
+
const $ = new CSSStyleSheet();
|
|
25
|
+
$.replaceSync(l);
|
|
26
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 P {
|
|
32
32
|
template() {
|
|
33
33
|
return `
|
|
34
34
|
<px-hstack gap="s" align-items="center" class="tile__header">
|
|
@@ -42,14 +42,14 @@ const L = [
|
|
|
42
42
|
`;
|
|
43
43
|
}
|
|
44
44
|
constructor() {
|
|
45
|
-
super(
|
|
45
|
+
super($, A);
|
|
46
46
|
const t = document.createElement(c.nativeName);
|
|
47
47
|
t.classList.add("tile"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
48
48
|
}
|
|
49
49
|
connectedCallback() {
|
|
50
50
|
if (super.connectedCallback(), this.$slotPrefix) {
|
|
51
51
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
52
|
-
t &&
|
|
52
|
+
t && a(t);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
static get observedAttributes() {
|
|
@@ -90,9 +90,9 @@ const L = [
|
|
|
90
90
|
this.centerContent ? this.$tileContent.style.textAlign = "center" : this.$tileContent.style.textAlign = "left";
|
|
91
91
|
}
|
|
92
92
|
updateBackgroundColor(t, e, i) {
|
|
93
|
-
if (!
|
|
93
|
+
if (!z(i, e)) {
|
|
94
94
|
v(
|
|
95
|
-
|
|
95
|
+
`"${e}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
96
96
|
);
|
|
97
97
|
return;
|
|
98
98
|
}
|
|
@@ -156,11 +156,11 @@ const L = [
|
|
|
156
156
|
c.nativeName = "div";
|
|
157
157
|
let b = c;
|
|
158
158
|
customElements.get("px-tile") || customElements.define("px-tile", b);
|
|
159
|
-
const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media
|
|
160
|
-
|
|
161
|
-
const
|
|
162
|
-
|
|
163
|
-
const n = class n extends
|
|
159
|
+
const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media screen and (min-width: 48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", C = new CSSStyleSheet();
|
|
160
|
+
C.replaceSync(R);
|
|
161
|
+
const S = new CSSStyleSheet();
|
|
162
|
+
S.replaceSync(l);
|
|
163
|
+
const n = class n extends g {
|
|
164
164
|
template() {
|
|
165
165
|
return `
|
|
166
166
|
<px-tile hoverable>
|
|
@@ -172,14 +172,14 @@ const n = class n extends k {
|
|
|
172
172
|
`;
|
|
173
173
|
}
|
|
174
174
|
constructor() {
|
|
175
|
-
super(
|
|
175
|
+
super(S, C);
|
|
176
176
|
const t = document.createElement(n.nativeName);
|
|
177
177
|
t.classList.add("tile-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
178
178
|
}
|
|
179
179
|
connectedCallback() {
|
|
180
180
|
if (this.$slotPrefix) {
|
|
181
181
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
182
|
-
t &&
|
|
182
|
+
t && a(t);
|
|
183
183
|
}
|
|
184
184
|
this.backgroundColor || (this.backgroundColor = "container-default");
|
|
185
185
|
}
|
|
@@ -207,7 +207,7 @@ const n = class n extends k {
|
|
|
207
207
|
h(this.$tile, this.$children, this.inverted);
|
|
208
208
|
break;
|
|
209
209
|
case "disabled":
|
|
210
|
-
|
|
210
|
+
m(this.$tile, this.$children, this.disabled, [], {
|
|
211
211
|
ariaEl: this.$el,
|
|
212
212
|
setAria: !0,
|
|
213
213
|
setTabIndex: !0
|
|
@@ -261,15 +261,15 @@ const n = class n extends k {
|
|
|
261
261
|
n.nativeName = "button", n.accessorExclusions = ["disabled"];
|
|
262
262
|
let u = n;
|
|
263
263
|
customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
|
|
264
|
-
const
|
|
265
|
-
|
|
264
|
+
const w = new CSSStyleSheet();
|
|
265
|
+
w.replaceSync(l);
|
|
266
266
|
class H extends p {
|
|
267
267
|
template() {
|
|
268
268
|
return `
|
|
269
269
|
<div class="tile-checkbox">
|
|
270
270
|
<px-tile hoverable>
|
|
271
271
|
<slot name="prefix" slot="prefix"></slot>
|
|
272
|
-
<px-checkbox slot="suffix"
|
|
272
|
+
<px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
|
|
273
273
|
<slot name="label" slot="label"></slot>
|
|
274
274
|
<slot name="description" slot="description"></slot>
|
|
275
275
|
</px-tile>
|
|
@@ -278,12 +278,12 @@ class H extends p {
|
|
|
278
278
|
}
|
|
279
279
|
constructor() {
|
|
280
280
|
var t;
|
|
281
|
-
super(
|
|
281
|
+
super(w), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
282
282
|
}
|
|
283
283
|
connectedCallback() {
|
|
284
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) {
|
|
285
285
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
286
|
-
t &&
|
|
286
|
+
t && a(t);
|
|
287
287
|
}
|
|
288
288
|
this.addEventListener("mouseover", () => {
|
|
289
289
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -330,11 +330,11 @@ class H extends p {
|
|
|
330
330
|
break;
|
|
331
331
|
case "state":
|
|
332
332
|
if (this.$checkbox)
|
|
333
|
-
if (this.checkName(
|
|
333
|
+
if (this.checkName(k, i))
|
|
334
334
|
this.$checkbox.setAttribute("state", i);
|
|
335
335
|
else {
|
|
336
336
|
v(
|
|
337
|
-
|
|
337
|
+
`"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${k.join('", "')}".`
|
|
338
338
|
);
|
|
339
339
|
return;
|
|
340
340
|
}
|
|
@@ -442,15 +442,15 @@ class H extends p {
|
|
|
442
442
|
}
|
|
443
443
|
}
|
|
444
444
|
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", H);
|
|
445
|
-
const
|
|
446
|
-
|
|
445
|
+
const y = new CSSStyleSheet();
|
|
446
|
+
y.replaceSync(l);
|
|
447
447
|
class B extends p {
|
|
448
448
|
template() {
|
|
449
449
|
return `
|
|
450
450
|
<div class="tile-radio">
|
|
451
451
|
<px-tile hoverable>
|
|
452
452
|
<slot name="prefix" slot="prefix"></slot>
|
|
453
|
-
<px-radio slot="suffix"
|
|
453
|
+
<px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
454
454
|
<slot name="label" slot="label"></slot>
|
|
455
455
|
<slot name="description" slot="description"></slot>
|
|
456
456
|
</px-tile>
|
|
@@ -459,13 +459,13 @@ class B extends p {
|
|
|
459
459
|
}
|
|
460
460
|
constructor() {
|
|
461
461
|
var t;
|
|
462
|
-
super(
|
|
462
|
+
super(y), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
463
463
|
}
|
|
464
464
|
connectedCallback() {
|
|
465
465
|
var t;
|
|
466
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.querySelector("px-tile-radio")) === this ? 0 : -1, this.$slotPrefix) {
|
|
467
467
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
468
|
-
e &&
|
|
468
|
+
e && a(e);
|
|
469
469
|
}
|
|
470
470
|
this.addEventListener("mouseover", () => {
|
|
471
471
|
this.$radio.setAttribute("hover", "");
|
|
@@ -512,11 +512,11 @@ class B extends p {
|
|
|
512
512
|
break;
|
|
513
513
|
case "state":
|
|
514
514
|
if (this.$radio)
|
|
515
|
-
if (this.checkName(
|
|
515
|
+
if (this.checkName(x, i))
|
|
516
516
|
this.$radio.setAttribute("state", i);
|
|
517
517
|
else {
|
|
518
518
|
v(
|
|
519
|
-
|
|
519
|
+
`"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${x.join('", "')}".`
|
|
520
520
|
);
|
|
521
521
|
return;
|
|
522
522
|
}
|
|
@@ -624,11 +624,11 @@ class B extends p {
|
|
|
624
624
|
}
|
|
625
625
|
}
|
|
626
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)}",
|
|
628
|
-
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
const d = class d extends
|
|
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)}", E = new CSSStyleSheet();
|
|
628
|
+
E.replaceSync(T);
|
|
629
|
+
const D = new CSSStyleSheet();
|
|
630
|
+
D.replaceSync(l);
|
|
631
|
+
const d = class d extends g {
|
|
632
632
|
template() {
|
|
633
633
|
return `
|
|
634
634
|
<px-tile hoverable>
|
|
@@ -646,14 +646,14 @@ const d = class d extends k {
|
|
|
646
646
|
`;
|
|
647
647
|
}
|
|
648
648
|
constructor() {
|
|
649
|
-
super(
|
|
649
|
+
super(D, E);
|
|
650
650
|
const t = document.createElement(d.nativeName);
|
|
651
651
|
t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
652
652
|
}
|
|
653
653
|
connectedCallback() {
|
|
654
654
|
if (this.$slotPrefix) {
|
|
655
655
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
656
|
-
e &&
|
|
656
|
+
e && a(e);
|
|
657
657
|
}
|
|
658
658
|
this.backgroundColor || (this.backgroundColor = "container-default"), this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
|
|
659
659
|
"aria-label",
|
|
@@ -685,7 +685,7 @@ const d = class d extends k {
|
|
|
685
685
|
]);
|
|
686
686
|
break;
|
|
687
687
|
case "disabled":
|
|
688
|
-
|
|
688
|
+
m(this.$tile, this.$children, this.disabled, [], {
|
|
689
689
|
ariaEl: this.$el,
|
|
690
690
|
setAria: !0,
|
|
691
691
|
setTabIndex: !0
|
|
@@ -748,15 +748,15 @@ const d = class d extends k {
|
|
|
748
748
|
d.nativeName = "a";
|
|
749
749
|
let f = d;
|
|
750
750
|
customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
|
|
751
|
-
const
|
|
752
|
-
|
|
751
|
+
const q = new CSSStyleSheet();
|
|
752
|
+
q.replaceSync(l);
|
|
753
753
|
class F extends p {
|
|
754
754
|
template() {
|
|
755
755
|
return `
|
|
756
756
|
<div class="tile-switch">
|
|
757
757
|
<px-tile hoverable>
|
|
758
758
|
<slot name="prefix" slot="prefix"></slot>
|
|
759
|
-
<px-switch slot="suffix"
|
|
759
|
+
<px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
|
|
760
760
|
<slot name="label" slot="label"></slot>
|
|
761
761
|
<slot name="description" slot="description"></slot>
|
|
762
762
|
</px-tile>
|
|
@@ -765,12 +765,12 @@ class F extends p {
|
|
|
765
765
|
}
|
|
766
766
|
constructor() {
|
|
767
767
|
var t;
|
|
768
|
-
super(
|
|
768
|
+
super(q), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
769
769
|
}
|
|
770
770
|
connectedCallback() {
|
|
771
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) {
|
|
772
772
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
773
|
-
t &&
|
|
773
|
+
t && a(t);
|
|
774
774
|
}
|
|
775
775
|
this.addEventListener("mouseover", () => {
|
|
776
776
|
this.$switch.setAttribute("hover", "");
|