@proximus/lavender-tile 1.4.1 → 1.4.3-alpha.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/Tile.d.ts +2 -2
- package/dist/TileButton.d.ts +1 -0
- package/dist/index.es.js +79 -73
- package/package.json +1 -1
package/dist/Tile.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
2
|
import '@proximus/lavender-layout';
|
|
3
3
|
export declare const tileBackgroundColorValues: string[];
|
|
4
|
-
export declare class Tile extends
|
|
4
|
+
export declare class Tile extends VerticallyExtendedElement<HTMLDivElement> {
|
|
5
5
|
static nativeName: string;
|
|
6
6
|
protected template(): string;
|
|
7
7
|
constructor();
|
package/dist/TileButton.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import '@proximus/lavender-layout';
|
|
|
3
3
|
import { Tile } from './Tile';
|
|
4
4
|
export declare class TileButton extends PxElement<HTMLButtonElement> {
|
|
5
5
|
static nativeName: string;
|
|
6
|
+
static accessorExclusions: string[];
|
|
6
7
|
protected template(): string;
|
|
7
8
|
constructor();
|
|
8
9
|
connectedCallback(): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import {
|
|
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
|
}
|
|
8
|
-
function
|
|
8
|
+
function h(o, t, e, i = []) {
|
|
9
9
|
e ? (o.setAttribute("inverted", ""), i.forEach((s) => s.setAttribute("inverted", "")), t.forEach((s) => {
|
|
10
10
|
s.hasAttribute("inverted") || s.setAttribute("inverted", "");
|
|
11
11
|
})) : (o.removeAttribute("inverted"), i.forEach((s) => s.removeAttribute("inverted")), t.forEach((s) => {
|
|
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
|
-
],
|
|
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,8 +42,8 @@ const z = [
|
|
|
42
42
|
`;
|
|
43
43
|
}
|
|
44
44
|
constructor() {
|
|
45
|
-
super(m,
|
|
46
|
-
const t = document.createElement(
|
|
45
|
+
super(m, g);
|
|
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() {
|
|
@@ -75,7 +75,7 @@ const z = [
|
|
|
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 z = [
|
|
|
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) => {
|
|
@@ -151,14 +153,14 @@ const z = [
|
|
|
151
153
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
152
154
|
}
|
|
153
155
|
};
|
|
154
|
-
|
|
155
|
-
let
|
|
156
|
-
customElements.get("px-tile") || customElements.define("px-tile",
|
|
157
|
-
const
|
|
158
|
-
|
|
159
|
-
const
|
|
160
|
-
|
|
161
|
-
const
|
|
156
|
+
c.nativeName = "div";
|
|
157
|
+
let b = c;
|
|
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 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,12 +172,12 @@ const v = class v extends b {
|
|
|
170
172
|
`;
|
|
171
173
|
}
|
|
172
174
|
constructor() {
|
|
173
|
-
super(A
|
|
174
|
-
const t = document.createElement(
|
|
175
|
+
super($, A);
|
|
176
|
+
const t = document.createElement(n.nativeName);
|
|
175
177
|
t.classList.add("tile-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
176
178
|
}
|
|
177
179
|
connectedCallback() {
|
|
178
|
-
if (
|
|
180
|
+
if (this.$slotPrefix) {
|
|
179
181
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
180
182
|
t && l(t);
|
|
181
183
|
}
|
|
@@ -202,10 +204,10 @@ const v = class v extends b {
|
|
|
202
204
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
203
205
|
break;
|
|
204
206
|
case "inverted":
|
|
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
|
|
@@ -256,18 +258,18 @@ const v = class v extends b {
|
|
|
256
258
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
257
259
|
}
|
|
258
260
|
};
|
|
259
|
-
|
|
260
|
-
let
|
|
261
|
-
customElements.get("px-tile-button") || customElements.define("px-tile-button",
|
|
262
|
-
const
|
|
263
|
-
|
|
264
|
-
class
|
|
261
|
+
n.nativeName = "button", n.accessorExclusions = ["disabled"];
|
|
262
|
+
let u = n;
|
|
263
|
+
customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
|
|
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,7 +278,7 @@ class R extends u {
|
|
|
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), this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
280
282
|
}
|
|
281
283
|
connectedCallback() {
|
|
282
284
|
if (this.$slotPrefix) {
|
|
@@ -317,7 +319,7 @@ class R extends u {
|
|
|
317
319
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
318
320
|
break;
|
|
319
321
|
case "inverted":
|
|
320
|
-
|
|
322
|
+
h(this, this.$children, this.inverted, [
|
|
321
323
|
this.$tile,
|
|
322
324
|
this.$checkbox
|
|
323
325
|
]);
|
|
@@ -328,10 +330,12 @@ class R extends u {
|
|
|
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 R extends u {
|
|
|
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,7 +459,7 @@ class L extends u {
|
|
|
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), this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
459
463
|
}
|
|
460
464
|
connectedCallback() {
|
|
461
465
|
var t;
|
|
@@ -497,7 +501,7 @@ class L extends u {
|
|
|
497
501
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
498
502
|
break;
|
|
499
503
|
case "inverted":
|
|
500
|
-
|
|
504
|
+
h(this, this.$children, this.inverted, [
|
|
501
505
|
this.$tile,
|
|
502
506
|
this.$radio
|
|
503
507
|
]);
|
|
@@ -508,10 +512,12 @@ class L extends u {
|
|
|
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 L extends u {
|
|
|
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
|
|
631
|
+
const d = class d extends k {
|
|
626
632
|
template() {
|
|
627
633
|
return `
|
|
628
634
|
<px-tile hoverable>
|
|
@@ -640,12 +646,12 @@ const p = class p extends b {
|
|
|
640
646
|
`;
|
|
641
647
|
}
|
|
642
648
|
constructor() {
|
|
643
|
-
super(y,
|
|
644
|
-
const t = document.createElement(
|
|
649
|
+
super(y, w);
|
|
650
|
+
const t = document.createElement(d.nativeName);
|
|
645
651
|
t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
646
652
|
}
|
|
647
653
|
connectedCallback() {
|
|
648
|
-
if (
|
|
654
|
+
if (this.$slotPrefix) {
|
|
649
655
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
650
656
|
e && l(e);
|
|
651
657
|
}
|
|
@@ -674,12 +680,12 @@ const p = class p extends b {
|
|
|
674
680
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
675
681
|
break;
|
|
676
682
|
case "inverted":
|
|
677
|
-
|
|
683
|
+
h(this.$tile, this.$children, this.inverted, [
|
|
678
684
|
this.$pxIcon
|
|
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
|
|
@@ -739,18 +745,18 @@ const p = class p extends b {
|
|
|
739
745
|
this.setAttribute("target-blank-aria-label", t);
|
|
740
746
|
}
|
|
741
747
|
};
|
|
742
|
-
|
|
743
|
-
let
|
|
744
|
-
customElements.get("px-tile-link") || customElements.define("px-tile-link",
|
|
745
|
-
const
|
|
746
|
-
|
|
747
|
-
class
|
|
748
|
+
d.nativeName = "a";
|
|
749
|
+
let f = d;
|
|
750
|
+
customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
|
|
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,7 +765,7 @@ class H extends u {
|
|
|
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), this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
763
769
|
}
|
|
764
770
|
connectedCallback() {
|
|
765
771
|
if (this.$slotPrefix) {
|
|
@@ -799,7 +805,7 @@ class H extends u {
|
|
|
799
805
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
800
806
|
break;
|
|
801
807
|
case "inverted":
|
|
802
|
-
|
|
808
|
+
h(this, this.$children, this.inverted, [
|
|
803
809
|
this.$tile,
|
|
804
810
|
this.$switch
|
|
805
811
|
]);
|
|
@@ -904,13 +910,13 @@ class H extends u {
|
|
|
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
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
915
|
+
b as Tile,
|
|
916
|
+
u as TileButton,
|
|
917
|
+
H as TileCheckbox,
|
|
918
|
+
f as TileLink,
|
|
919
|
+
B as TileRadio,
|
|
920
|
+
F as TileSwitch,
|
|
921
|
+
L as tileBackgroundColorValues
|
|
916
922
|
};
|