@proximus/lavender-tile 2.0.0-alpha.4 → 2.0.0-alpha.41
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 +88 -82
- package/package.json +2 -2
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,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 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 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);
|
|
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
|
}
|
|
@@ -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;
|
|
@@ -524,11 +530,11 @@ class L extends u {
|
|
|
524
530
|
}
|
|
525
531
|
}
|
|
526
532
|
handleDisabledAttributeChange(t) {
|
|
527
|
-
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"));
|
|
528
534
|
}
|
|
529
535
|
handleCheckedAttributeChange(t) {
|
|
530
536
|
var e;
|
|
531
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
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(
|
|
532
538
|
new Event("change", {
|
|
533
539
|
bubbles: !0,
|
|
534
540
|
composed: !0
|
|
@@ -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,10 +765,10 @@ 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);
|
|
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
|
}
|
|
@@ -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
|
]);
|
|
@@ -817,11 +823,11 @@ class H extends u {
|
|
|
817
823
|
}
|
|
818
824
|
}
|
|
819
825
|
handleDisabledAttributeChange(t) {
|
|
820
|
-
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"));
|
|
821
827
|
}
|
|
822
828
|
handleCheckedAttributeChange(t) {
|
|
823
829
|
var e;
|
|
824
|
-
(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(
|
|
825
831
|
new Event("change", {
|
|
826
832
|
bubbles: !0,
|
|
827
833
|
composed: !0
|
|
@@ -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
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-tile",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.41",
|
|
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"
|