@proximus/lavender-tile 2.0.0-alpha.11 → 2.0.0-alpha.13
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 +48 -48
- 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,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { VerticallyExtendedElement as E, checkName as D, PxElement as p, WithExtraAttributes as v } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import { checkboxStateValues as
|
|
4
|
-
import { stateValues as
|
|
3
|
+
import { checkboxStateValues as q } from "@proximus/lavender-checkbox";
|
|
4
|
+
import { stateValues as P } 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) => {
|
|
@@ -19,16 +19,16 @@ function k(o, t, e, i = [], s = {}) {
|
|
|
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
|
-
x.replaceSync(
|
|
22
|
+
const z = '.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)}', x = new CSSStyleSheet();
|
|
23
|
+
x.replaceSync(z);
|
|
24
24
|
const m = new CSSStyleSheet();
|
|
25
25
|
m.replaceSync(a);
|
|
26
|
-
const
|
|
26
|
+
const I = [
|
|
27
27
|
"",
|
|
28
28
|
"default",
|
|
29
29
|
"container-light",
|
|
30
30
|
"container-default"
|
|
31
|
-
],
|
|
31
|
+
], c = class c extends E {
|
|
32
32
|
template() {
|
|
33
33
|
return `
|
|
34
34
|
<px-hstack gap="s" align-items="center" class="tile__header">
|
|
@@ -43,7 +43,7 @@ const z = [
|
|
|
43
43
|
}
|
|
44
44
|
constructor() {
|
|
45
45
|
super(m, x);
|
|
46
|
-
const t = document.createElement(
|
|
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
|
+
I
|
|
79
79
|
);
|
|
80
80
|
break;
|
|
81
81
|
default:
|
|
@@ -90,7 +90,7 @@ 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 (!
|
|
93
|
+
if (!D(i, e)) {
|
|
94
94
|
console.error(`${e} is not a valid value for ${i}`);
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
@@ -151,14 +151,14 @@ const z = [
|
|
|
151
151
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
152
152
|
}
|
|
153
153
|
};
|
|
154
|
-
|
|
155
|
-
let
|
|
156
|
-
customElements.get("px-tile") || customElements.define("px-tile",
|
|
157
|
-
const
|
|
158
|
-
g.replaceSync(
|
|
154
|
+
c.nativeName = "div";
|
|
155
|
+
let b = c;
|
|
156
|
+
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)}}", g = new CSSStyleSheet();
|
|
158
|
+
g.replaceSync(R);
|
|
159
159
|
const A = new CSSStyleSheet();
|
|
160
160
|
A.replaceSync(a);
|
|
161
|
-
const
|
|
161
|
+
const n = class n extends p {
|
|
162
162
|
template() {
|
|
163
163
|
return `
|
|
164
164
|
<px-tile hoverable>
|
|
@@ -171,11 +171,11 @@ const v = class v extends b {
|
|
|
171
171
|
}
|
|
172
172
|
constructor() {
|
|
173
173
|
super(A, g);
|
|
174
|
-
const t = document.createElement(
|
|
174
|
+
const t = document.createElement(n.nativeName);
|
|
175
175
|
t.classList.add("tile-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
176
176
|
}
|
|
177
177
|
connectedCallback() {
|
|
178
|
-
if (
|
|
178
|
+
if (this.$slotPrefix) {
|
|
179
179
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
180
180
|
t && l(t);
|
|
181
181
|
}
|
|
@@ -202,7 +202,7 @@ const v = class v extends b {
|
|
|
202
202
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
203
203
|
break;
|
|
204
204
|
case "inverted":
|
|
205
|
-
|
|
205
|
+
h(this.$tile, this.$children, this.inverted);
|
|
206
206
|
break;
|
|
207
207
|
case "disabled":
|
|
208
208
|
k(this.$tile, this.$children, this.disabled, [], {
|
|
@@ -256,12 +256,12 @@ const v = class v extends b {
|
|
|
256
256
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
257
257
|
}
|
|
258
258
|
};
|
|
259
|
-
|
|
260
|
-
let
|
|
261
|
-
customElements.get("px-tile-button") || customElements.define("px-tile-button",
|
|
259
|
+
n.nativeName = "button", n.accessorExclusions = ["disabled"];
|
|
260
|
+
let u = n;
|
|
261
|
+
customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
|
|
262
262
|
const $ = new CSSStyleSheet();
|
|
263
263
|
$.replaceSync(a);
|
|
264
|
-
class
|
|
264
|
+
class L extends v {
|
|
265
265
|
template() {
|
|
266
266
|
return `
|
|
267
267
|
<div class="tile-checkbox">
|
|
@@ -317,7 +317,7 @@ class R extends u {
|
|
|
317
317
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
318
318
|
break;
|
|
319
319
|
case "inverted":
|
|
320
|
-
|
|
320
|
+
h(this, this.$children, this.inverted, [
|
|
321
321
|
this.$tile,
|
|
322
322
|
this.$checkbox
|
|
323
323
|
]);
|
|
@@ -328,7 +328,7 @@ class R extends u {
|
|
|
328
328
|
break;
|
|
329
329
|
case "state":
|
|
330
330
|
if (this.$checkbox)
|
|
331
|
-
if (this.checkName(
|
|
331
|
+
if (this.checkName(q, i))
|
|
332
332
|
this.$checkbox.setAttribute("state", i);
|
|
333
333
|
else {
|
|
334
334
|
console.error(`${i} is not a valid state value`);
|
|
@@ -437,10 +437,10 @@ class R extends u {
|
|
|
437
437
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
438
438
|
}
|
|
439
439
|
}
|
|
440
|
-
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox",
|
|
440
|
+
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", L);
|
|
441
441
|
const C = new CSSStyleSheet();
|
|
442
442
|
C.replaceSync(a);
|
|
443
|
-
class
|
|
443
|
+
class H extends v {
|
|
444
444
|
template() {
|
|
445
445
|
return `
|
|
446
446
|
<div class="tile-radio">
|
|
@@ -497,7 +497,7 @@ class L extends u {
|
|
|
497
497
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
498
498
|
break;
|
|
499
499
|
case "inverted":
|
|
500
|
-
|
|
500
|
+
h(this, this.$children, this.inverted, [
|
|
501
501
|
this.$tile,
|
|
502
502
|
this.$radio
|
|
503
503
|
]);
|
|
@@ -508,7 +508,7 @@ class L extends u {
|
|
|
508
508
|
break;
|
|
509
509
|
case "state":
|
|
510
510
|
if (this.$radio)
|
|
511
|
-
if (this.checkName(
|
|
511
|
+
if (this.checkName(P, i))
|
|
512
512
|
this.$radio.setAttribute("state", i);
|
|
513
513
|
else {
|
|
514
514
|
console.error(`${i} is not a valid state value`);
|
|
@@ -617,12 +617,12 @@ class L extends u {
|
|
|
617
617
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
618
618
|
}
|
|
619
619
|
}
|
|
620
|
-
customElements.get("px-tile-radio") || customElements.define("px-tile-radio",
|
|
620
|
+
customElements.get("px-tile-radio") || customElements.define("px-tile-radio", H);
|
|
621
621
|
const B = ".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)}", S = new CSSStyleSheet();
|
|
622
622
|
S.replaceSync(B);
|
|
623
623
|
const y = new CSSStyleSheet();
|
|
624
624
|
y.replaceSync(a);
|
|
625
|
-
const
|
|
625
|
+
const d = class d extends p {
|
|
626
626
|
template() {
|
|
627
627
|
return `
|
|
628
628
|
<px-tile hoverable>
|
|
@@ -641,11 +641,11 @@ const p = class p extends b {
|
|
|
641
641
|
}
|
|
642
642
|
constructor() {
|
|
643
643
|
super(y, S);
|
|
644
|
-
const t = document.createElement(
|
|
644
|
+
const t = document.createElement(d.nativeName);
|
|
645
645
|
t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
646
646
|
}
|
|
647
647
|
connectedCallback() {
|
|
648
|
-
if (
|
|
648
|
+
if (this.$slotPrefix) {
|
|
649
649
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
650
650
|
e && l(e);
|
|
651
651
|
}
|
|
@@ -674,7 +674,7 @@ const p = class p extends b {
|
|
|
674
674
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
675
675
|
break;
|
|
676
676
|
case "inverted":
|
|
677
|
-
|
|
677
|
+
h(this.$tile, this.$children, this.inverted, [
|
|
678
678
|
this.$pxIcon
|
|
679
679
|
]);
|
|
680
680
|
break;
|
|
@@ -739,12 +739,12 @@ const p = class p extends b {
|
|
|
739
739
|
this.setAttribute("target-blank-aria-label", t);
|
|
740
740
|
}
|
|
741
741
|
};
|
|
742
|
-
|
|
743
|
-
let
|
|
744
|
-
customElements.get("px-tile-link") || customElements.define("px-tile-link",
|
|
742
|
+
d.nativeName = "a";
|
|
743
|
+
let f = d;
|
|
744
|
+
customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
|
|
745
745
|
const w = new CSSStyleSheet();
|
|
746
746
|
w.replaceSync(a);
|
|
747
|
-
class
|
|
747
|
+
class T extends v {
|
|
748
748
|
template() {
|
|
749
749
|
return `
|
|
750
750
|
<div class="tile-switch">
|
|
@@ -799,7 +799,7 @@ class H extends u {
|
|
|
799
799
|
this.$tile.setAttribute(t, this.getAttribute(t) || "");
|
|
800
800
|
break;
|
|
801
801
|
case "inverted":
|
|
802
|
-
|
|
802
|
+
h(this, this.$children, this.inverted, [
|
|
803
803
|
this.$tile,
|
|
804
804
|
this.$switch
|
|
805
805
|
]);
|
|
@@ -904,13 +904,13 @@ class H extends u {
|
|
|
904
904
|
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
905
905
|
}
|
|
906
906
|
}
|
|
907
|
-
customElements.get("px-tile-switch") || customElements.define("px-tile-switch",
|
|
907
|
+
customElements.get("px-tile-switch") || customElements.define("px-tile-switch", T);
|
|
908
908
|
export {
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
909
|
+
b as Tile,
|
|
910
|
+
u as TileButton,
|
|
911
|
+
L as TileCheckbox,
|
|
912
|
+
f as TileLink,
|
|
913
|
+
H as TileRadio,
|
|
914
|
+
T as TileSwitch,
|
|
915
|
+
I as tileBackgroundColorValues
|
|
916
916
|
};
|