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