@proximus/lavender-tile 1.4.16-beta.3 → 1.4.16-beta.5
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 +3 -1
- package/dist/TileButton.d.ts +3 -1
- package/dist/TileCheckbox.d.ts +3 -3
- package/dist/TileLink.d.ts +3 -3
- package/dist/TileRadio.d.ts +3 -3
- package/dist/TileSwitch.d.ts +3 -3
- package/dist/custom-elements.json +70 -68
- package/dist/index.es.js +132 -127
- package/dist/vscode.html-custom-data.json +8 -6
- package/dist/web-types.json +19 -21
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { PxElement as e, VerticallyExtendedElement as t, WithExtraAttributes as n, booleanPropertyToAttributeSetter as r, checkName as i,
|
|
1
|
+
import { PxElement as e, VerticallyExtendedElement as t, WithExtraAttributes as n, booleanPropertyToAttributeSetter as r, checkName as i, createTemplate as a, log as o, propertyToAttributeSetter as s, renderTemplate as c } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
import { checkboxStateValues as
|
|
4
|
-
import { stateValues as
|
|
3
|
+
import { checkboxStateValues as l } from "@proximus/lavender-checkbox";
|
|
4
|
+
import { stateValues as u } from "@proximus/lavender-radio-group";
|
|
5
5
|
//#region src/Common.ts
|
|
6
|
-
function
|
|
6
|
+
function d(e) {
|
|
7
7
|
e.hasAttribute("width") || e.setAttribute("width", "s"), e.setAttribute("border-radius", "pill");
|
|
8
8
|
}
|
|
9
|
-
function
|
|
9
|
+
function f(e, t, n, r = []) {
|
|
10
10
|
n ? (e.setAttribute("inverted", ""), r.forEach((e) => e.setAttribute("inverted", "")), t.forEach((e) => {
|
|
11
11
|
e.hasAttribute("inverted") || e.setAttribute("inverted", "");
|
|
12
12
|
})) : (e.removeAttribute("inverted"), r.forEach((e) => e.removeAttribute("inverted")), t.forEach((e) => {
|
|
13
13
|
e.hasAttribute("inverted") && e.removeAttribute("inverted");
|
|
14
14
|
}));
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function p(e, t, n, r = [], i = {}) {
|
|
17
17
|
n ? (e.setAttribute("disabled", ""), r.forEach((e) => e.setAttribute("disabled", "")), t.forEach((e) => {
|
|
18
18
|
e.hasAttribute("disabled") || e.setAttribute("disabled", "");
|
|
19
19
|
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (e.removeAttribute("disabled"), r.forEach((e) => e.removeAttribute("disabled")), t.forEach((e) => {
|
|
@@ -22,10 +22,8 @@ function d(e, t, n, r = [], i = {}) {
|
|
|
22
22
|
}
|
|
23
23
|
//#endregion
|
|
24
24
|
//#region src/tile.css?inline
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
var h = new CSSStyleSheet();
|
|
28
|
-
h.replaceSync(p);
|
|
25
|
+
var m = ":host{display:block}.tile,.tile *{box-sizing:border-box}.tile{height:100%;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);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));flex-direction:column;display:flex}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=suffix]){margin-left:auto;margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=label]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([visual=none]) .tile{flex-direction:row-reverse;align-items:flex-start}:host([visual=none]) .tile .tile__content{flex-grow:1}: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 (width>=48rem){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-tablet);margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-laptop);margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}}@media screen and (width>=90.0625rem){.tile{padding:var(--px-padding-s-desktop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-desktop);margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-desktop)}}: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)}", h = new CSSStyleSheet();
|
|
26
|
+
h.replaceSync(m);
|
|
29
27
|
var g = [
|
|
30
28
|
"",
|
|
31
29
|
"default",
|
|
@@ -33,20 +31,18 @@ var g = [
|
|
|
33
31
|
"container-default"
|
|
34
32
|
], _ = class e extends t {
|
|
35
33
|
static {
|
|
36
|
-
this.
|
|
34
|
+
this.template = a("<div class=\"tile\"><px-hstack gap=\"s\" align-items=\"center\" class=\"tile__header\"><slot name=\"prefix\"></slot><slot name=\"suffix\"></slot></px-hstack><px-vstack gap=\"none\" class=\"tile__content\"><slot name=\"label\"></slot><slot name=\"description\"></slot></px-vstack></div>");
|
|
37
35
|
}
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
static {
|
|
37
|
+
this.nativeName = "div";
|
|
40
38
|
}
|
|
41
39
|
constructor() {
|
|
42
|
-
super(h,
|
|
43
|
-
let t = document.createElement(e.nativeName);
|
|
44
|
-
t.classList.add("tile"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
40
|
+
super(h), c(this.shadowRoot, e.template);
|
|
45
41
|
}
|
|
46
42
|
connectedCallback() {
|
|
47
43
|
if (super.connectedCallback(), this.$slotPrefix) {
|
|
48
44
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
49
|
-
e &&
|
|
45
|
+
e && d(e);
|
|
50
46
|
}
|
|
51
47
|
}
|
|
52
48
|
static get observedAttributes() {
|
|
@@ -56,7 +52,8 @@ var g = [
|
|
|
56
52
|
"center-content",
|
|
57
53
|
"background-color",
|
|
58
54
|
"inverted",
|
|
59
|
-
"disabled"
|
|
55
|
+
"disabled",
|
|
56
|
+
"visual"
|
|
60
57
|
];
|
|
61
58
|
}
|
|
62
59
|
attributeChangedCallback(e, t, n) {
|
|
@@ -81,7 +78,7 @@ var g = [
|
|
|
81
78
|
}
|
|
82
79
|
updateBackgroundColor(e, t, n) {
|
|
83
80
|
if (!i(n, t)) {
|
|
84
|
-
|
|
81
|
+
o(`"${t}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
|
|
85
82
|
return;
|
|
86
83
|
}
|
|
87
84
|
let r = (e) => {
|
|
@@ -134,33 +131,37 @@ var g = [
|
|
|
134
131
|
set disabled(e) {
|
|
135
132
|
this._updateBooleanAttribute("disabled", e);
|
|
136
133
|
}
|
|
134
|
+
get visual() {
|
|
135
|
+
return this.getAttribute("visual");
|
|
136
|
+
}
|
|
137
|
+
set visual(e) {
|
|
138
|
+
this._updateAttribute("visual", e);
|
|
139
|
+
}
|
|
137
140
|
};
|
|
138
141
|
customElements.get("px-tile") || customElements.define("px-tile", _);
|
|
139
142
|
//#endregion
|
|
140
143
|
//#region src/tile-button.css?inline
|
|
141
|
-
var v = ".tile-button{font-size:var(--px-text-size-body-m-mobile);background:0 0;padding:0}@media screen and (width>=48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", y = new CSSStyleSheet();
|
|
142
|
-
|
|
143
|
-
var
|
|
144
|
-
|
|
145
|
-
var
|
|
144
|
+
var v = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-button{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.tile-button{font-size:var(--px-text-size-body-m-mobile);background:0 0;padding:0}@media screen and (width>=48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}@media screen and (width>=90.0625rem){.tile-button{font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-inverted)}", y = ":host{padding:calc(var(--px-size-border-m) - var(--px-size-border-s));outline:none;display:block}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch),:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);height:100%}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) px-tile{height:100%}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{cursor:pointer;border:var(--px-size-border-s) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);border:var(--px-size-border-s) solid var(--px-color-border-main-default);width:100%;display:block}: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}:is(:host:host(:not([disabled])) .tile-link,:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]){padding:0}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-width:var(--px-size-border-m);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:#0000}: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 (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)}:is(:scope:host:host(:not([disabled])) .tile-link,: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 (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)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (width>=90.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-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)}:is(:scope:host:host(:not([disabled])) .tile-link,: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);border-color:var(--px-color-border-main-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(:not([disabled])):host(:active) .tile-link,:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-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)}", b = new CSSStyleSheet();
|
|
145
|
+
b.replaceSync(v);
|
|
146
|
+
var x = new CSSStyleSheet();
|
|
147
|
+
x.replaceSync(y);
|
|
148
|
+
var S = class t extends e {
|
|
149
|
+
static {
|
|
150
|
+
this.template = a("<button class=\"tile-button\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></button>");
|
|
151
|
+
}
|
|
146
152
|
static {
|
|
147
153
|
this.nativeName = "button";
|
|
148
154
|
}
|
|
149
155
|
static {
|
|
150
156
|
this.accessorExclusions = ["disabled"];
|
|
151
157
|
}
|
|
152
|
-
template() {
|
|
153
|
-
return "\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n ";
|
|
154
|
-
}
|
|
155
158
|
constructor() {
|
|
156
|
-
super(b,
|
|
157
|
-
let e = document.createElement(t.nativeName);
|
|
158
|
-
e.classList.add("tile-button"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
159
|
+
super(x, b), c(this.shadowRoot, t.template);
|
|
159
160
|
}
|
|
160
161
|
connectedCallback() {
|
|
161
162
|
if (this.$slotPrefix) {
|
|
162
163
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
163
|
-
e &&
|
|
164
|
+
e && d(e);
|
|
164
165
|
}
|
|
165
166
|
this.backgroundColor ||= "container-default";
|
|
166
167
|
}
|
|
@@ -171,7 +172,8 @@ var x = class t extends e {
|
|
|
171
172
|
"center-content",
|
|
172
173
|
"background-color",
|
|
173
174
|
"inverted",
|
|
174
|
-
"disabled"
|
|
175
|
+
"disabled",
|
|
176
|
+
"visual"
|
|
175
177
|
];
|
|
176
178
|
}
|
|
177
179
|
attributeChangedCallback(e, t, n) {
|
|
@@ -181,13 +183,14 @@ var x = class t extends e {
|
|
|
181
183
|
this.$tile.setAttribute(e, "");
|
|
182
184
|
break;
|
|
183
185
|
case "background-color":
|
|
186
|
+
case "visual":
|
|
184
187
|
this.$tile.setAttribute(e, this.getAttribute(e) || "");
|
|
185
188
|
break;
|
|
186
189
|
case "inverted":
|
|
187
|
-
|
|
190
|
+
f(this.$tile, this.$children, this.inverted);
|
|
188
191
|
break;
|
|
189
192
|
case "disabled":
|
|
190
|
-
|
|
193
|
+
p(this.$tile, this.$children, this.disabled, [], {
|
|
191
194
|
ariaEl: this.$el,
|
|
192
195
|
setAria: !0,
|
|
193
196
|
setTabIndex: !0
|
|
@@ -235,23 +238,29 @@ var x = class t extends e {
|
|
|
235
238
|
set disabled(e) {
|
|
236
239
|
this._updateBooleanAttribute("disabled", e);
|
|
237
240
|
}
|
|
241
|
+
get visual() {
|
|
242
|
+
return this.getAttribute("visual");
|
|
243
|
+
}
|
|
244
|
+
set visual(e) {
|
|
245
|
+
this._updateAttribute("visual", e);
|
|
246
|
+
}
|
|
238
247
|
};
|
|
239
|
-
customElements.get("px-tile-button") || customElements.define("px-tile-button",
|
|
248
|
+
customElements.get("px-tile-button") || customElements.define("px-tile-button", S);
|
|
240
249
|
//#endregion
|
|
241
250
|
//#region src/TileCheckbox.ts
|
|
242
|
-
var
|
|
243
|
-
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
|
|
251
|
+
var C = new CSSStyleSheet();
|
|
252
|
+
C.replaceSync(y);
|
|
253
|
+
var w = class e extends n {
|
|
254
|
+
static {
|
|
255
|
+
this.template = a("<div class=\"tile-checkbox\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-checkbox slot=\"suffix\" inert></px-checkbox><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
|
|
247
256
|
}
|
|
248
257
|
constructor() {
|
|
249
|
-
super(
|
|
258
|
+
super(C), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
250
259
|
}
|
|
251
260
|
connectedCallback() {
|
|
252
261
|
if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
|
|
253
262
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
254
|
-
e &&
|
|
263
|
+
e && d(e);
|
|
255
264
|
}
|
|
256
265
|
this.addEventListener("mouseover", () => {
|
|
257
266
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -265,9 +274,9 @@ var C = class extends n {
|
|
|
265
274
|
}
|
|
266
275
|
static get observedAttributes() {
|
|
267
276
|
return [
|
|
268
|
-
"center-content",
|
|
269
277
|
"background-color",
|
|
270
278
|
"inverted",
|
|
279
|
+
"visual",
|
|
271
280
|
"name",
|
|
272
281
|
"value",
|
|
273
282
|
"state",
|
|
@@ -277,12 +286,12 @@ var C = class extends n {
|
|
|
277
286
|
}
|
|
278
287
|
attributeChangedCallback(e, t, n) {
|
|
279
288
|
if (t !== n) switch (e) {
|
|
280
|
-
case "center-content":
|
|
281
289
|
case "background-color":
|
|
290
|
+
case "visual":
|
|
282
291
|
this.$tile.setAttribute(e, this.getAttribute(e) || "");
|
|
283
292
|
break;
|
|
284
293
|
case "inverted":
|
|
285
|
-
|
|
294
|
+
f(this, this.$children, this.inverted, [this.$tile, this.$checkbox]);
|
|
286
295
|
break;
|
|
287
296
|
case "name":
|
|
288
297
|
case "value":
|
|
@@ -290,9 +299,9 @@ var C = class extends n {
|
|
|
290
299
|
break;
|
|
291
300
|
case "state":
|
|
292
301
|
if (this.$checkbox) {
|
|
293
|
-
if (this.checkName(
|
|
302
|
+
if (this.checkName(l, n)) this.$checkbox.setAttribute("state", n);
|
|
294
303
|
else {
|
|
295
|
-
|
|
304
|
+
o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join("\", \"")}".`);
|
|
296
305
|
return;
|
|
297
306
|
}
|
|
298
307
|
}
|
|
@@ -344,17 +353,17 @@ var C = class extends n {
|
|
|
344
353
|
get $children() {
|
|
345
354
|
return this.querySelectorAll("px-tile-checkbox > *");
|
|
346
355
|
}
|
|
347
|
-
get centerContent() {
|
|
348
|
-
return this.hasAttribute("center-content");
|
|
349
|
-
}
|
|
350
|
-
set centerContent(e) {
|
|
351
|
-
r(this, "center-content", e);
|
|
352
|
-
}
|
|
353
356
|
get backgroundColor() {
|
|
354
357
|
return this.getAttribute("background-color");
|
|
355
358
|
}
|
|
356
359
|
set backgroundColor(e) {
|
|
357
|
-
|
|
360
|
+
s(this, "background-color", e);
|
|
361
|
+
}
|
|
362
|
+
get visual() {
|
|
363
|
+
return this.getAttribute("visual");
|
|
364
|
+
}
|
|
365
|
+
set visual(e) {
|
|
366
|
+
s(this, "visual", e);
|
|
358
367
|
}
|
|
359
368
|
get inverted() {
|
|
360
369
|
return this.hasAttribute("inverted");
|
|
@@ -372,13 +381,13 @@ var C = class extends n {
|
|
|
372
381
|
return this.getAttribute("name");
|
|
373
382
|
}
|
|
374
383
|
set name(e) {
|
|
375
|
-
|
|
384
|
+
s(this, "name", e);
|
|
376
385
|
}
|
|
377
386
|
get state() {
|
|
378
387
|
return this.getAttribute("state");
|
|
379
388
|
}
|
|
380
389
|
set state(e) {
|
|
381
|
-
|
|
390
|
+
s(this, "state", e);
|
|
382
391
|
}
|
|
383
392
|
get disabled() {
|
|
384
393
|
return this.hasAttribute("disabled");
|
|
@@ -390,25 +399,25 @@ var C = class extends n {
|
|
|
390
399
|
return this.getAttribute("value");
|
|
391
400
|
}
|
|
392
401
|
set value(e) {
|
|
393
|
-
|
|
402
|
+
s(this, "value", e);
|
|
394
403
|
}
|
|
395
404
|
};
|
|
396
|
-
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox",
|
|
405
|
+
customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", w);
|
|
397
406
|
//#endregion
|
|
398
407
|
//#region src/TileRadio.ts
|
|
399
|
-
var
|
|
400
|
-
|
|
401
|
-
var
|
|
402
|
-
|
|
403
|
-
|
|
408
|
+
var T = new CSSStyleSheet();
|
|
409
|
+
T.replaceSync(y);
|
|
410
|
+
var E = class e extends n {
|
|
411
|
+
static {
|
|
412
|
+
this.template = a("<div class=\"tile-radio\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-radio slot=\"suffix\" inert></px-radio><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
|
|
404
413
|
}
|
|
405
414
|
constructor() {
|
|
406
|
-
super(
|
|
415
|
+
super(T), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
407
416
|
}
|
|
408
417
|
connectedCallback() {
|
|
409
418
|
if (this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = this.parentElement?.querySelector("px-tile-radio") === this ? 0 : -1, this.$slotPrefix) {
|
|
410
419
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
411
|
-
e &&
|
|
420
|
+
e && d(e);
|
|
412
421
|
}
|
|
413
422
|
this.addEventListener("mouseover", () => {
|
|
414
423
|
this.$radio.setAttribute("hover", "");
|
|
@@ -422,9 +431,9 @@ var T = class extends n {
|
|
|
422
431
|
}
|
|
423
432
|
static get observedAttributes() {
|
|
424
433
|
return [
|
|
425
|
-
"center-content",
|
|
426
434
|
"background-color",
|
|
427
435
|
"inverted",
|
|
436
|
+
"visual",
|
|
428
437
|
"name",
|
|
429
438
|
"value",
|
|
430
439
|
"state",
|
|
@@ -434,12 +443,12 @@ var T = class extends n {
|
|
|
434
443
|
}
|
|
435
444
|
attributeChangedCallback(e, t, n) {
|
|
436
445
|
if (t !== n) switch (e) {
|
|
437
|
-
case "center-content":
|
|
438
446
|
case "background-color":
|
|
447
|
+
case "visual":
|
|
439
448
|
this.$tile.setAttribute(e, this.getAttribute(e) || "");
|
|
440
449
|
break;
|
|
441
450
|
case "inverted":
|
|
442
|
-
|
|
451
|
+
f(this, this.$children, this.inverted, [this.$tile, this.$radio]);
|
|
443
452
|
break;
|
|
444
453
|
case "name":
|
|
445
454
|
case "value":
|
|
@@ -447,9 +456,9 @@ var T = class extends n {
|
|
|
447
456
|
break;
|
|
448
457
|
case "state":
|
|
449
458
|
if (this.$radio) {
|
|
450
|
-
if (this.checkName(
|
|
459
|
+
if (this.checkName(u, n)) this.$radio.setAttribute("state", n);
|
|
451
460
|
else {
|
|
452
|
-
|
|
461
|
+
o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${u.join("\", \"")}".`);
|
|
453
462
|
return;
|
|
454
463
|
}
|
|
455
464
|
}
|
|
@@ -501,17 +510,17 @@ var T = class extends n {
|
|
|
501
510
|
get $children() {
|
|
502
511
|
return this.querySelectorAll("px-tile-radio > *");
|
|
503
512
|
}
|
|
504
|
-
get centerContent() {
|
|
505
|
-
return this.hasAttribute("center-content");
|
|
506
|
-
}
|
|
507
|
-
set centerContent(e) {
|
|
508
|
-
r(this, "center-content", e);
|
|
509
|
-
}
|
|
510
513
|
get backgroundColor() {
|
|
511
514
|
return this.getAttribute("background-color");
|
|
512
515
|
}
|
|
513
516
|
set backgroundColor(e) {
|
|
514
|
-
|
|
517
|
+
s(this, "background-color", e);
|
|
518
|
+
}
|
|
519
|
+
get visual() {
|
|
520
|
+
return this.getAttribute("visual");
|
|
521
|
+
}
|
|
522
|
+
set visual(e) {
|
|
523
|
+
s(this, "visual", e);
|
|
515
524
|
}
|
|
516
525
|
get inverted() {
|
|
517
526
|
return this.hasAttribute("inverted");
|
|
@@ -529,13 +538,13 @@ var T = class extends n {
|
|
|
529
538
|
return this.getAttribute("name");
|
|
530
539
|
}
|
|
531
540
|
set name(e) {
|
|
532
|
-
|
|
541
|
+
s(this, "name", e);
|
|
533
542
|
}
|
|
534
543
|
get state() {
|
|
535
544
|
return this.getAttribute("state") ?? "";
|
|
536
545
|
}
|
|
537
546
|
set state(e) {
|
|
538
|
-
|
|
547
|
+
s(this, "state", e);
|
|
539
548
|
}
|
|
540
549
|
get disabled() {
|
|
541
550
|
return this.hasAttribute("disabled");
|
|
@@ -547,58 +556,54 @@ var T = class extends n {
|
|
|
547
556
|
return this.getAttribute("value");
|
|
548
557
|
}
|
|
549
558
|
set value(e) {
|
|
550
|
-
|
|
559
|
+
s(this, "value", e);
|
|
551
560
|
}
|
|
552
561
|
};
|
|
553
|
-
customElements.get("px-tile-radio") || customElements.define("px-tile-radio",
|
|
562
|
+
customElements.get("px-tile-radio") || customElements.define("px-tile-radio", E);
|
|
554
563
|
//#endregion
|
|
555
564
|
//#region src/tile-link.css?inline
|
|
556
|
-
var
|
|
557
|
-
|
|
558
|
-
var
|
|
559
|
-
|
|
560
|
-
var
|
|
565
|
+
var D = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-link{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.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]):host(:not([disabled])):host(:active) .tile-link{border-color:var(--px-color-border-state-active-inverted)}: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)}", O = new CSSStyleSheet();
|
|
566
|
+
O.replaceSync(D);
|
|
567
|
+
var k = new CSSStyleSheet();
|
|
568
|
+
k.replaceSync(y);
|
|
569
|
+
var A = class t extends e {
|
|
561
570
|
static {
|
|
562
|
-
this.
|
|
571
|
+
this.template = a("<a class=\"tile-link\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-icon\n name=\"chevron_right\"\n slot=\"suffix\"\n from=\"lavender\"\n size=\"s\"\n color=\"inherit\"\n ></px-icon><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></a>");
|
|
563
572
|
}
|
|
564
|
-
|
|
565
|
-
|
|
573
|
+
static {
|
|
574
|
+
this.nativeName = "a";
|
|
566
575
|
}
|
|
567
576
|
constructor() {
|
|
568
|
-
super(O,
|
|
569
|
-
let e = document.createElement(t.nativeName);
|
|
570
|
-
e.classList.add("tile-link"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
577
|
+
super(k, O), c(this.shadowRoot, t.template);
|
|
571
578
|
}
|
|
572
579
|
connectedCallback() {
|
|
573
580
|
if (this.$slotPrefix) {
|
|
574
581
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
575
|
-
e &&
|
|
582
|
+
e && d(e);
|
|
576
583
|
}
|
|
577
584
|
this.backgroundColor ||= "container-default", this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"));
|
|
578
585
|
}
|
|
579
586
|
static get observedAttributes() {
|
|
580
587
|
return [
|
|
581
588
|
...super.observedAttributes,
|
|
582
|
-
"center-content",
|
|
583
589
|
"background-color",
|
|
584
590
|
"inverted",
|
|
585
591
|
"disabled",
|
|
592
|
+
"visual",
|
|
586
593
|
"target-blank-aria-label"
|
|
587
594
|
];
|
|
588
595
|
}
|
|
589
596
|
attributeChangedCallback(e, t, n) {
|
|
590
597
|
if (t !== n) switch (e) {
|
|
591
|
-
case "center-content":
|
|
592
|
-
this.$tile.setAttribute(e, "");
|
|
593
|
-
break;
|
|
594
598
|
case "background-color":
|
|
599
|
+
case "visual":
|
|
595
600
|
this.$tile.setAttribute(e, this.getAttribute(e) || "");
|
|
596
601
|
break;
|
|
597
602
|
case "inverted":
|
|
598
|
-
|
|
603
|
+
f(this.$tile, this.$children, this.inverted, [this.$pxIcon]);
|
|
599
604
|
break;
|
|
600
605
|
case "disabled":
|
|
601
|
-
|
|
606
|
+
p(this.$tile, this.$children, this.disabled, [], {
|
|
602
607
|
ariaEl: this.$el,
|
|
603
608
|
setAria: !0,
|
|
604
609
|
setTabIndex: !0
|
|
@@ -622,18 +627,18 @@ var k = class t extends e {
|
|
|
622
627
|
get $pxIcon() {
|
|
623
628
|
return this.shadowRoot.querySelector("px-icon[slot=\"suffix\"]");
|
|
624
629
|
}
|
|
625
|
-
get centerContent() {
|
|
626
|
-
return this.hasAttribute("center-content");
|
|
627
|
-
}
|
|
628
|
-
set centerContent(e) {
|
|
629
|
-
this._updateBooleanAttribute("center-content", e);
|
|
630
|
-
}
|
|
631
630
|
get backgroundColor() {
|
|
632
631
|
return this.getAttribute("background-color");
|
|
633
632
|
}
|
|
634
633
|
set backgroundColor(e) {
|
|
635
634
|
this._updateAttribute("background-color", e);
|
|
636
635
|
}
|
|
636
|
+
get visual() {
|
|
637
|
+
return this.getAttribute("visual");
|
|
638
|
+
}
|
|
639
|
+
set visual(e) {
|
|
640
|
+
this._updateAttribute("visual", e);
|
|
641
|
+
}
|
|
637
642
|
get inverted() {
|
|
638
643
|
return this.hasAttribute("inverted");
|
|
639
644
|
}
|
|
@@ -653,22 +658,22 @@ var k = class t extends e {
|
|
|
653
658
|
this._updateAttribute("target-blank-aria-label", e);
|
|
654
659
|
}
|
|
655
660
|
};
|
|
656
|
-
customElements.get("px-tile-link") || customElements.define("px-tile-link",
|
|
661
|
+
customElements.get("px-tile-link") || customElements.define("px-tile-link", A);
|
|
657
662
|
//#endregion
|
|
658
663
|
//#region src/TileSwitch.ts
|
|
659
|
-
var
|
|
660
|
-
|
|
661
|
-
var
|
|
662
|
-
|
|
663
|
-
|
|
664
|
+
var j = new CSSStyleSheet();
|
|
665
|
+
j.replaceSync(y);
|
|
666
|
+
var M = class e extends n {
|
|
667
|
+
static {
|
|
668
|
+
this.template = a("<div class=\"tile-switch\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-switch slot=\"suffix\" inert></px-switch><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
|
|
664
669
|
}
|
|
665
670
|
constructor() {
|
|
666
|
-
super(
|
|
671
|
+
super(j), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
667
672
|
}
|
|
668
673
|
connectedCallback() {
|
|
669
674
|
if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
|
|
670
675
|
let e = this.querySelector("px-img[slot=\"prefix\"]");
|
|
671
|
-
e &&
|
|
676
|
+
e && d(e);
|
|
672
677
|
}
|
|
673
678
|
this.addEventListener("mouseover", () => {
|
|
674
679
|
this.$switch.setAttribute("hover", "");
|
|
@@ -682,9 +687,9 @@ var j = class extends n {
|
|
|
682
687
|
}
|
|
683
688
|
static get observedAttributes() {
|
|
684
689
|
return [
|
|
685
|
-
"center-content",
|
|
686
690
|
"background-color",
|
|
687
691
|
"inverted",
|
|
692
|
+
"visual",
|
|
688
693
|
"name",
|
|
689
694
|
"value",
|
|
690
695
|
"checked",
|
|
@@ -693,12 +698,12 @@ var j = class extends n {
|
|
|
693
698
|
}
|
|
694
699
|
attributeChangedCallback(e, t, n) {
|
|
695
700
|
if (t !== n) switch (e) {
|
|
696
|
-
case "center-content":
|
|
697
701
|
case "background-color":
|
|
702
|
+
case "visual":
|
|
698
703
|
this.$tile.setAttribute(e, this.getAttribute(e) || "");
|
|
699
704
|
break;
|
|
700
705
|
case "inverted":
|
|
701
|
-
|
|
706
|
+
f(this, this.$children, this.inverted, [this.$tile, this.$switch]);
|
|
702
707
|
break;
|
|
703
708
|
case "name":
|
|
704
709
|
case "value":
|
|
@@ -751,17 +756,17 @@ var j = class extends n {
|
|
|
751
756
|
get $children() {
|
|
752
757
|
return this.querySelectorAll("px-tile-switch > *");
|
|
753
758
|
}
|
|
754
|
-
get centerContent() {
|
|
755
|
-
return this.hasAttribute("center-content");
|
|
756
|
-
}
|
|
757
|
-
set centerContent(e) {
|
|
758
|
-
r(this, "center-content", e);
|
|
759
|
-
}
|
|
760
759
|
get backgroundColor() {
|
|
761
760
|
return this.getAttribute("background-color");
|
|
762
761
|
}
|
|
763
762
|
set backgroundColor(e) {
|
|
764
|
-
|
|
763
|
+
s(this, "background-color", e);
|
|
764
|
+
}
|
|
765
|
+
get visual() {
|
|
766
|
+
return this.getAttribute("visual");
|
|
767
|
+
}
|
|
768
|
+
set visual(e) {
|
|
769
|
+
s(this, "visual", e);
|
|
765
770
|
}
|
|
766
771
|
get inverted() {
|
|
767
772
|
return this.hasAttribute("inverted");
|
|
@@ -779,7 +784,7 @@ var j = class extends n {
|
|
|
779
784
|
return this.getAttribute("name");
|
|
780
785
|
}
|
|
781
786
|
set name(e) {
|
|
782
|
-
|
|
787
|
+
s(this, "name", e);
|
|
783
788
|
}
|
|
784
789
|
get disabled() {
|
|
785
790
|
return this.hasAttribute("disabled");
|
|
@@ -791,9 +796,9 @@ var j = class extends n {
|
|
|
791
796
|
return this.getAttribute("value");
|
|
792
797
|
}
|
|
793
798
|
set value(e) {
|
|
794
|
-
|
|
799
|
+
s(this, "value", e);
|
|
795
800
|
}
|
|
796
801
|
};
|
|
797
|
-
customElements.get("px-tile-switch") || customElements.define("px-tile-switch",
|
|
802
|
+
customElements.get("px-tile-switch") || customElements.define("px-tile-switch", M);
|
|
798
803
|
//#endregion
|
|
799
|
-
export { _ as Tile,
|
|
804
|
+
export { _ as Tile, S as TileButton, w as TileCheckbox, A as TileLink, E as TileRadio, M as TileSwitch, g as tileBackgroundColorValues };
|