@proximus/lavender-tile 2.0.0-alpha.2 → 2.0.0-alpha.20
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/TileRadio.d.ts +2 -2
- package/dist/index.es.js +97 -90
- 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/TileRadio.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
|
2
2
|
import '@proximus/lavender-layout';
|
|
3
3
|
import { Tile } from './Tile';
|
|
4
4
|
import { type IRadio } from '@proximus/lavender-radio-group';
|
|
5
|
-
import { type
|
|
5
|
+
import { type Radio } from '@proximus/lavender-radio-group';
|
|
6
6
|
export declare class TileRadio extends WithExtraAttributes implements IRadio {
|
|
7
7
|
protected internals: ElementInternals;
|
|
8
8
|
protected template(): string;
|
|
@@ -18,7 +18,7 @@ export declare class TileRadio extends WithExtraAttributes implements IRadio {
|
|
|
18
18
|
formData(): FormData;
|
|
19
19
|
get $tile(): Tile;
|
|
20
20
|
get $el(): HTMLElement;
|
|
21
|
-
get $radio():
|
|
21
|
+
get $radio(): Radio;
|
|
22
22
|
get $slotPrefix(): Element;
|
|
23
23
|
get $children(): NodeListOf<Element>;
|
|
24
24
|
get centerContent(): boolean;
|
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,10 +278,10 @@ 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);
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -344,11 +348,11 @@ class R extends u {
|
|
|
344
348
|
}
|
|
345
349
|
}
|
|
346
350
|
handleDisabledAttributeChange(t) {
|
|
347
|
-
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$tile.disabled = !0, this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$tile.disabled = !1, this.$checkbox.removeAttribute("disabled"));
|
|
351
|
+
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$checkbox.removeAttribute("disabled"));
|
|
348
352
|
}
|
|
349
353
|
handleCheckedAttributeChange(t) {
|
|
350
354
|
var e;
|
|
351
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
|
|
355
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
|
|
352
356
|
new Event("change", {
|
|
353
357
|
bubbles: !0,
|
|
354
358
|
composed: !0
|
|
@@ -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
|
|
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>
|
|
@@ -454,26 +458,27 @@ class L extends u {
|
|
|
454
458
|
`;
|
|
455
459
|
}
|
|
456
460
|
constructor() {
|
|
457
|
-
var t
|
|
458
|
-
super(
|
|
461
|
+
var t;
|
|
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
|
-
|
|
462
|
-
|
|
463
|
-
|
|
465
|
+
var t;
|
|
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) {
|
|
467
|
+
const e = this.querySelector('px-img[slot="prefix"]');
|
|
468
|
+
e && l(e);
|
|
464
469
|
}
|
|
465
470
|
this.addEventListener("mouseover", () => {
|
|
466
471
|
this.$radio.setAttribute("hover", "");
|
|
467
472
|
}), this.addEventListener("mouseout", () => {
|
|
468
473
|
this.$radio.removeAttribute("hover");
|
|
469
|
-
}), this.addEventListener("keypress", (
|
|
470
|
-
switch (
|
|
474
|
+
}), this.addEventListener("keypress", (e) => {
|
|
475
|
+
switch (e.stopPropagation(), e.preventDefault(), e.code) {
|
|
471
476
|
case "Space":
|
|
472
477
|
this.click();
|
|
473
478
|
break;
|
|
474
479
|
}
|
|
475
|
-
}), this.addEventListener("click", (
|
|
476
|
-
this.checked || (this.checked = !0),
|
|
480
|
+
}), this.addEventListener("click", (e) => {
|
|
481
|
+
this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
|
|
477
482
|
}), this.hasAttribute("checked") && (this.checked = !0);
|
|
478
483
|
}
|
|
479
484
|
static get observedAttributes() {
|
|
@@ -496,7 +501,7 @@ class L extends u {
|
|
|
496
501
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
497
502
|
break;
|
|
498
503
|
case "inverted":
|
|
499
|
-
|
|
504
|
+
h(this, this.$children, this.inverted, [
|
|
500
505
|
this.$tile,
|
|
501
506
|
this.$radio
|
|
502
507
|
]);
|
|
@@ -507,10 +512,12 @@ class L extends u {
|
|
|
507
512
|
break;
|
|
508
513
|
case "state":
|
|
509
514
|
if (this.$radio)
|
|
510
|
-
if (this.checkName(
|
|
515
|
+
if (this.checkName(z, i))
|
|
511
516
|
this.$radio.setAttribute("state", i);
|
|
512
517
|
else {
|
|
513
|
-
|
|
518
|
+
v(
|
|
519
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
520
|
+
);
|
|
514
521
|
return;
|
|
515
522
|
}
|
|
516
523
|
break;
|
|
@@ -523,11 +530,11 @@ class L extends u {
|
|
|
523
530
|
}
|
|
524
531
|
}
|
|
525
532
|
handleDisabledAttributeChange(t) {
|
|
526
|
-
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$tile.disabled = !0, this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$tile.disabled = !1, this.$radio.removeAttribute("disabled"));
|
|
533
|
+
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$radio.removeAttribute("disabled"));
|
|
527
534
|
}
|
|
528
535
|
handleCheckedAttributeChange(t) {
|
|
529
536
|
var e;
|
|
530
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.
|
|
537
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
531
538
|
new Event("change", {
|
|
532
539
|
bubbles: !0,
|
|
533
540
|
composed: !0
|
|
@@ -559,7 +566,7 @@ class L extends u {
|
|
|
559
566
|
return this.shadowRoot.querySelector(".tile-radio");
|
|
560
567
|
}
|
|
561
568
|
get $radio() {
|
|
562
|
-
return this.shadowRoot.querySelector("px-radio
|
|
569
|
+
return this.shadowRoot.querySelector("px-radio");
|
|
563
570
|
}
|
|
564
571
|
get $slotPrefix() {
|
|
565
572
|
return this.querySelector('[slot="prefix"]');
|
|
@@ -616,12 +623,12 @@ class L extends u {
|
|
|
616
623
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
617
624
|
}
|
|
618
625
|
}
|
|
619
|
-
customElements.get("px-tile-radio") || customElements.define("px-tile-radio",
|
|
620
|
-
const
|
|
621
|
-
|
|
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);
|
|
622
629
|
const y = new CSSStyleSheet();
|
|
623
630
|
y.replaceSync(a);
|
|
624
|
-
const
|
|
631
|
+
const d = class d extends k {
|
|
625
632
|
template() {
|
|
626
633
|
return `
|
|
627
634
|
<px-tile hoverable>
|
|
@@ -639,12 +646,12 @@ const p = class p extends b {
|
|
|
639
646
|
`;
|
|
640
647
|
}
|
|
641
648
|
constructor() {
|
|
642
|
-
super(y,
|
|
643
|
-
const t = document.createElement(
|
|
649
|
+
super(y, w);
|
|
650
|
+
const t = document.createElement(d.nativeName);
|
|
644
651
|
t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
645
652
|
}
|
|
646
653
|
connectedCallback() {
|
|
647
|
-
if (
|
|
654
|
+
if (this.$slotPrefix) {
|
|
648
655
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
649
656
|
e && l(e);
|
|
650
657
|
}
|
|
@@ -673,12 +680,12 @@ const p = class p extends b {
|
|
|
673
680
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
674
681
|
break;
|
|
675
682
|
case "inverted":
|
|
676
|
-
|
|
683
|
+
h(this.$tile, this.$children, this.inverted, [
|
|
677
684
|
this.$pxIcon
|
|
678
685
|
]);
|
|
679
686
|
break;
|
|
680
687
|
case "disabled":
|
|
681
|
-
|
|
688
|
+
x(this.$tile, this.$children, this.disabled, [], {
|
|
682
689
|
ariaEl: this.$el,
|
|
683
690
|
setAria: !0,
|
|
684
691
|
setTabIndex: !0
|
|
@@ -738,18 +745,18 @@ const p = class p extends b {
|
|
|
738
745
|
this.setAttribute("target-blank-aria-label", t);
|
|
739
746
|
}
|
|
740
747
|
};
|
|
741
|
-
|
|
742
|
-
let
|
|
743
|
-
customElements.get("px-tile-link") || customElements.define("px-tile-link",
|
|
744
|
-
const
|
|
745
|
-
|
|
746
|
-
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 {
|
|
747
754
|
template() {
|
|
748
755
|
return `
|
|
749
756
|
<div class="tile-switch">
|
|
750
757
|
<px-tile hoverable>
|
|
751
758
|
<slot name="prefix" slot="prefix"></slot>
|
|
752
|
-
<px-switch slot="suffix"
|
|
759
|
+
<px-switch slot="suffix" inert></px-switch>
|
|
753
760
|
<slot name="label" slot="label"></slot>
|
|
754
761
|
<slot name="description" slot="description"></slot>
|
|
755
762
|
</px-tile>
|
|
@@ -758,10 +765,10 @@ class H extends u {
|
|
|
758
765
|
}
|
|
759
766
|
constructor() {
|
|
760
767
|
var t;
|
|
761
|
-
super(
|
|
768
|
+
super(E), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
762
769
|
}
|
|
763
770
|
connectedCallback() {
|
|
764
|
-
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) {
|
|
765
772
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
766
773
|
t && l(t);
|
|
767
774
|
}
|
|
@@ -798,7 +805,7 @@ class H extends u {
|
|
|
798
805
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
799
806
|
break;
|
|
800
807
|
case "inverted":
|
|
801
|
-
|
|
808
|
+
h(this, this.$children, this.inverted, [
|
|
802
809
|
this.$tile,
|
|
803
810
|
this.$switch
|
|
804
811
|
]);
|
|
@@ -816,11 +823,11 @@ class H extends u {
|
|
|
816
823
|
}
|
|
817
824
|
}
|
|
818
825
|
handleDisabledAttributeChange(t) {
|
|
819
|
-
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$tile.disabled = !0, this.$switch.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$tile.disabled = !1, this.$switch.removeAttribute("disabled"));
|
|
826
|
+
t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$switch.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$switch.removeAttribute("disabled"));
|
|
820
827
|
}
|
|
821
828
|
handleCheckedAttributeChange(t) {
|
|
822
829
|
var e;
|
|
823
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
|
|
830
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
|
|
824
831
|
new Event("change", {
|
|
825
832
|
bubbles: !0,
|
|
826
833
|
composed: !0
|
|
@@ -903,13 +910,13 @@ class H extends u {
|
|
|
903
910
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
904
911
|
}
|
|
905
912
|
}
|
|
906
|
-
customElements.get("px-tile-switch") || customElements.define("px-tile-switch",
|
|
913
|
+
customElements.get("px-tile-switch") || customElements.define("px-tile-switch", F);
|
|
907
914
|
export {
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
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
|
|
915
922
|
};
|