@proximus/lavender-tile 1.4.10-beta.1 → 1.4.11-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +17 -17
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -2,7 +2,7 @@ import { VerticallyExtendedElement as P, checkName as z, log as v, PxElement as
|
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
3
|
import { checkboxStateValues as k } from "@proximus/lavender-checkbox";
|
|
4
4
|
import { stateValues as x } from "@proximus/lavender-radio-group";
|
|
5
|
-
function
|
|
5
|
+
function l(o) {
|
|
6
6
|
o.hasAttribute("width") || o.setAttribute("width", "s"), o.setAttribute("border-radius", "pill");
|
|
7
7
|
}
|
|
8
8
|
function h(o, t, e, i = []) {
|
|
@@ -19,10 +19,10 @@ function m(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 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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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)}',
|
|
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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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 screen and (min-width: 48rem){: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-tablet)}: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-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){: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-laptop)}: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-laptop);outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}: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)}', A = new CSSStyleSheet();
|
|
23
23
|
A.replaceSync(I);
|
|
24
24
|
const $ = new CSSStyleSheet();
|
|
25
|
-
$.replaceSync(
|
|
25
|
+
$.replaceSync(a);
|
|
26
26
|
const L = [
|
|
27
27
|
"",
|
|
28
28
|
"default",
|
|
@@ -49,7 +49,7 @@ const L = [
|
|
|
49
49
|
connectedCallback() {
|
|
50
50
|
if (super.connectedCallback(), this.$slotPrefix) {
|
|
51
51
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
52
|
-
t &&
|
|
52
|
+
t && l(t);
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
static get observedAttributes() {
|
|
@@ -159,7 +159,7 @@ customElements.get("px-tile") || customElements.define("px-tile", b);
|
|
|
159
159
|
const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media screen and (min-width: 48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", C = new CSSStyleSheet();
|
|
160
160
|
C.replaceSync(R);
|
|
161
161
|
const S = new CSSStyleSheet();
|
|
162
|
-
S.replaceSync(
|
|
162
|
+
S.replaceSync(a);
|
|
163
163
|
const n = class n extends g {
|
|
164
164
|
template() {
|
|
165
165
|
return `
|
|
@@ -179,7 +179,7 @@ const n = class n extends g {
|
|
|
179
179
|
connectedCallback() {
|
|
180
180
|
if (this.$slotPrefix) {
|
|
181
181
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
182
|
-
t &&
|
|
182
|
+
t && l(t);
|
|
183
183
|
}
|
|
184
184
|
this.backgroundColor || (this.backgroundColor = "container-default");
|
|
185
185
|
}
|
|
@@ -262,14 +262,14 @@ n.nativeName = "button", n.accessorExclusions = ["disabled"];
|
|
|
262
262
|
let u = n;
|
|
263
263
|
customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
|
|
264
264
|
const w = new CSSStyleSheet();
|
|
265
|
-
w.replaceSync(
|
|
265
|
+
w.replaceSync(a);
|
|
266
266
|
class H extends p {
|
|
267
267
|
template() {
|
|
268
268
|
return `
|
|
269
269
|
<div class="tile-checkbox">
|
|
270
270
|
<px-tile hoverable>
|
|
271
271
|
<slot name="prefix" slot="prefix"></slot>
|
|
272
|
-
<px-checkbox slot="suffix"
|
|
272
|
+
<px-checkbox slot="suffix" inert></px-checkbox>
|
|
273
273
|
<slot name="label" slot="label"></slot>
|
|
274
274
|
<slot name="description" slot="description"></slot>
|
|
275
275
|
</px-tile>
|
|
@@ -283,7 +283,7 @@ class H extends p {
|
|
|
283
283
|
connectedCallback() {
|
|
284
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) {
|
|
285
285
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
286
|
-
t &&
|
|
286
|
+
t && l(t);
|
|
287
287
|
}
|
|
288
288
|
this.addEventListener("mouseover", () => {
|
|
289
289
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -443,14 +443,14 @@ class H extends p {
|
|
|
443
443
|
}
|
|
444
444
|
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", H);
|
|
445
445
|
const y = new CSSStyleSheet();
|
|
446
|
-
y.replaceSync(
|
|
446
|
+
y.replaceSync(a);
|
|
447
447
|
class B extends p {
|
|
448
448
|
template() {
|
|
449
449
|
return `
|
|
450
450
|
<div class="tile-radio">
|
|
451
451
|
<px-tile hoverable>
|
|
452
452
|
<slot name="prefix" slot="prefix"></slot>
|
|
453
|
-
<px-radio slot="suffix"
|
|
453
|
+
<px-radio slot="suffix" inert></px-radio>
|
|
454
454
|
<slot name="label" slot="label"></slot>
|
|
455
455
|
<slot name="description" slot="description"></slot>
|
|
456
456
|
</px-tile>
|
|
@@ -465,7 +465,7 @@ class B extends p {
|
|
|
465
465
|
var t;
|
|
466
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.querySelector("px-tile-radio")) === this ? 0 : -1, this.$slotPrefix) {
|
|
467
467
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
468
|
-
e &&
|
|
468
|
+
e && l(e);
|
|
469
469
|
}
|
|
470
470
|
this.addEventListener("mouseover", () => {
|
|
471
471
|
this.$radio.setAttribute("hover", "");
|
|
@@ -627,7 +627,7 @@ customElements.get("px-tile-radio") || customElements.define("px-tile-radio", B)
|
|
|
627
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)}", E = new CSSStyleSheet();
|
|
628
628
|
E.replaceSync(T);
|
|
629
629
|
const D = new CSSStyleSheet();
|
|
630
|
-
D.replaceSync(
|
|
630
|
+
D.replaceSync(a);
|
|
631
631
|
const d = class d extends g {
|
|
632
632
|
template() {
|
|
633
633
|
return `
|
|
@@ -653,7 +653,7 @@ const d = class d extends g {
|
|
|
653
653
|
connectedCallback() {
|
|
654
654
|
if (this.$slotPrefix) {
|
|
655
655
|
const e = this.querySelector('px-img[slot="prefix"]');
|
|
656
|
-
e &&
|
|
656
|
+
e && l(e);
|
|
657
657
|
}
|
|
658
658
|
this.backgroundColor || (this.backgroundColor = "container-default"), this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
|
|
659
659
|
"aria-label",
|
|
@@ -749,14 +749,14 @@ d.nativeName = "a";
|
|
|
749
749
|
let f = d;
|
|
750
750
|
customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
|
|
751
751
|
const q = new CSSStyleSheet();
|
|
752
|
-
q.replaceSync(
|
|
752
|
+
q.replaceSync(a);
|
|
753
753
|
class F extends p {
|
|
754
754
|
template() {
|
|
755
755
|
return `
|
|
756
756
|
<div class="tile-switch">
|
|
757
757
|
<px-tile hoverable>
|
|
758
758
|
<slot name="prefix" slot="prefix"></slot>
|
|
759
|
-
<px-switch slot="suffix"
|
|
759
|
+
<px-switch slot="suffix" inert></px-switch>
|
|
760
760
|
<slot name="label" slot="label"></slot>
|
|
761
761
|
<slot name="description" slot="description"></slot>
|
|
762
762
|
</px-tile>
|
|
@@ -770,7 +770,7 @@ class F extends p {
|
|
|
770
770
|
connectedCallback() {
|
|
771
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) {
|
|
772
772
|
const t = this.querySelector('px-img[slot="prefix"]');
|
|
773
|
-
t &&
|
|
773
|
+
t && l(t);
|
|
774
774
|
}
|
|
775
775
|
this.addEventListener("mouseover", () => {
|
|
776
776
|
this.$switch.setAttribute("hover", "");
|