@proximus/lavender-header 1.0.1 → 1.0.3
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 +449 -427
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var kt = (o) => {
|
|
2
|
+
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { PxElement as x, cssTokenBreakpoints as
|
|
4
|
+
var Q = (o, t, e) => t.has(o) || kt("Cannot " + e);
|
|
5
|
+
var l = (o, t, e) => (Q(o, t, "read from private field"), e ? e.call(o) : t.get(o)), h = (o, t, e) => t.has(o) ? kt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e), q = (o, t, e, r) => (Q(o, t, "write to private field"), r ? r.call(o, e) : t.set(o, e), e), p = (o, t, e) => (Q(o, t, "access private method"), e);
|
|
6
|
+
import { PxElement as x, cssTokenBreakpoints as m, paddingValues as v, boxShadowValues as ve, backgroundSizeValues as xe, noBorderRadiusValues as fe, borderRadiusValues as me, borderSideValues as ke, borderValues as Ae, gradientValues as ye, backgroundColorValues as St, borderColorValues as $e, checkName as $, transferAccessibilityAttributes as zt, WithExtraAttributes as C, fontsizeValues as Ce, fontweightValues as we, colorValues as Se } from "@proximus/lavender-common";
|
|
7
7
|
import "@proximus/lavender-layout";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const
|
|
8
|
+
const ze = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', Et = new CSSStyleSheet();
|
|
9
|
+
Et.replaceSync(ze);
|
|
10
|
+
const Ee = ["anchor-right", "anchor-left", "anchor-full"], k = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .container`, A = "px-padding", ct = class ct extends x {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
Et,
|
|
14
|
+
m(
|
|
15
15
|
"padding",
|
|
16
|
-
m,
|
|
17
|
-
v,
|
|
18
16
|
k,
|
|
17
|
+
v,
|
|
18
|
+
A,
|
|
19
19
|
"--container-padding"
|
|
20
20
|
),
|
|
21
|
-
|
|
21
|
+
m(
|
|
22
22
|
"padding-inline",
|
|
23
|
-
|
|
23
|
+
k,
|
|
24
24
|
v,
|
|
25
|
-
|
|
25
|
+
A
|
|
26
26
|
),
|
|
27
|
-
|
|
27
|
+
m(
|
|
28
28
|
"padding-block",
|
|
29
|
-
|
|
29
|
+
k,
|
|
30
30
|
v,
|
|
31
|
-
|
|
31
|
+
A
|
|
32
32
|
),
|
|
33
|
-
|
|
33
|
+
m(
|
|
34
34
|
"padding-top",
|
|
35
|
-
|
|
35
|
+
k,
|
|
36
36
|
v,
|
|
37
|
-
|
|
37
|
+
A
|
|
38
38
|
),
|
|
39
|
-
|
|
39
|
+
m(
|
|
40
40
|
"padding-right",
|
|
41
|
-
m,
|
|
42
|
-
v,
|
|
43
41
|
k,
|
|
42
|
+
v,
|
|
43
|
+
A,
|
|
44
44
|
"--container-padding-right"
|
|
45
45
|
),
|
|
46
|
-
|
|
46
|
+
m(
|
|
47
47
|
"padding-bottom",
|
|
48
|
-
|
|
48
|
+
k,
|
|
49
49
|
v,
|
|
50
|
-
|
|
50
|
+
A
|
|
51
51
|
),
|
|
52
|
-
|
|
52
|
+
m(
|
|
53
53
|
"padding-left",
|
|
54
|
-
m,
|
|
55
|
-
v,
|
|
56
54
|
k,
|
|
55
|
+
v,
|
|
56
|
+
A,
|
|
57
57
|
"--container-padding-left"
|
|
58
58
|
)
|
|
59
59
|
), this.template = () => `<div class="container">
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
<slot></slot>
|
|
61
|
+
<slot name="anchor-left"></slot>
|
|
62
|
+
<slot name="anchor-right"></slot>
|
|
63
|
+
<slot name="anchor-full"></slot>
|
|
64
64
|
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
65
65
|
}
|
|
66
66
|
static get observedAttributes() {
|
|
@@ -97,12 +97,12 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
97
97
|
];
|
|
98
98
|
}
|
|
99
99
|
connectedCallback() {
|
|
100
|
-
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
|
|
100
|
+
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.backgroundImage || this.$el.style.removeProperty("--background-image"), this.backgroundImageMobile || this.$el.style.removeProperty("--background-image--mobile"), this.backgroundImageTablet || this.$el.style.removeProperty("--background-image--tablet"), this.backgroundImageLaptop || this.$el.style.removeProperty("--background-image--laptop");
|
|
101
101
|
const t = this.querySelector("[slot]");
|
|
102
|
-
t &&
|
|
102
|
+
t && Ee.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
|
|
103
103
|
e.forEach((r) => {
|
|
104
|
-
var
|
|
105
|
-
r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (
|
|
104
|
+
var i;
|
|
105
|
+
r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (i = this._bgObserver) == null || i.disconnect());
|
|
106
106
|
});
|
|
107
107
|
}), this._bgObserver.observe(this.$el);
|
|
108
108
|
}
|
|
@@ -114,7 +114,7 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
114
114
|
if (e !== r)
|
|
115
115
|
switch (t) {
|
|
116
116
|
case "border":
|
|
117
|
-
this.updateAttribute(t, e, r,
|
|
117
|
+
this.updateAttribute(t, e, r, Ae);
|
|
118
118
|
break;
|
|
119
119
|
case "border-color":
|
|
120
120
|
this.updateBorderColor(t, r);
|
|
@@ -123,14 +123,14 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
123
123
|
case "border-side--mobile":
|
|
124
124
|
case "border-side--tablet":
|
|
125
125
|
case "border-side--laptop":
|
|
126
|
-
this.updateAttribute(t, e, r,
|
|
126
|
+
this.updateAttribute(t, e, r, ke);
|
|
127
127
|
break;
|
|
128
128
|
case "border-radius":
|
|
129
129
|
this.updateAttribute(
|
|
130
130
|
t,
|
|
131
131
|
e,
|
|
132
132
|
r,
|
|
133
|
-
|
|
133
|
+
me
|
|
134
134
|
);
|
|
135
135
|
break;
|
|
136
136
|
case "no-border-radius":
|
|
@@ -141,7 +141,7 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
141
141
|
t,
|
|
142
142
|
e,
|
|
143
143
|
r,
|
|
144
|
-
|
|
144
|
+
fe
|
|
145
145
|
);
|
|
146
146
|
break;
|
|
147
147
|
case "background-color":
|
|
@@ -161,7 +161,7 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
161
161
|
t,
|
|
162
162
|
e,
|
|
163
163
|
r,
|
|
164
|
-
|
|
164
|
+
xe
|
|
165
165
|
);
|
|
166
166
|
break;
|
|
167
167
|
case "background-image":
|
|
@@ -174,7 +174,7 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
174
174
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
175
175
|
break;
|
|
176
176
|
case "box-shadow":
|
|
177
|
-
this.updateAttribute(t, e, r,
|
|
177
|
+
this.updateAttribute(t, e, r, ve);
|
|
178
178
|
break;
|
|
179
179
|
case "anchor-offset":
|
|
180
180
|
this.updateAnchorOffset(e, r, v);
|
|
@@ -199,12 +199,12 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
199
199
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
200
200
|
}
|
|
201
201
|
updateGradient(t, e) {
|
|
202
|
-
if (this.checkName(
|
|
202
|
+
if (this.checkName(ye, e)) {
|
|
203
203
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
204
204
|
t = r.attrName;
|
|
205
|
-
const
|
|
205
|
+
const i = r.breakpoint;
|
|
206
206
|
this.$el.style.setProperty(
|
|
207
|
-
`--${t}${
|
|
207
|
+
`--${t}${i}`,
|
|
208
208
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
209
209
|
);
|
|
210
210
|
} else
|
|
@@ -212,20 +212,20 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
212
212
|
}
|
|
213
213
|
updateBackgroundColor(t, e) {
|
|
214
214
|
const r = e.startsWith("surface-");
|
|
215
|
-
if (this.checkName(
|
|
216
|
-
const
|
|
215
|
+
if (this.checkName(St, e)) {
|
|
216
|
+
const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
|
|
217
217
|
this.$el.style.setProperty(
|
|
218
|
-
`--${
|
|
218
|
+
`--${i.attrName}${a}`,
|
|
219
219
|
`var(--px-color-background-${e}${r ? "" : "-default"})`
|
|
220
220
|
), this.$el.style.setProperty(
|
|
221
|
-
`--${
|
|
221
|
+
`--${i.attrName}-inverted${a}`,
|
|
222
222
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
223
223
|
);
|
|
224
224
|
} else
|
|
225
225
|
console.error(`${e} is not an allowed ${t} value`);
|
|
226
226
|
}
|
|
227
227
|
updateBorderColor(t, e) {
|
|
228
|
-
this.checkName(
|
|
228
|
+
this.checkName($e, e) ? (this.$el.style.setProperty(
|
|
229
229
|
`--${t}`,
|
|
230
230
|
`var(--px-color-border-${e}-default)`
|
|
231
231
|
), this.$el.style.setProperty(
|
|
@@ -233,8 +233,8 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
233
233
|
`var(--px-color-border-${e}-inverted)`
|
|
234
234
|
)) : console.error(`${e} is not an allowed ${t} value`);
|
|
235
235
|
}
|
|
236
|
-
updateNoBorderRadius(t, e, r,
|
|
237
|
-
if (!this.checkName(
|
|
236
|
+
updateNoBorderRadius(t, e, r, i) {
|
|
237
|
+
if (!this.checkName(i, r))
|
|
238
238
|
console.error(`${r} is not an allowed ${t} value`);
|
|
239
239
|
else {
|
|
240
240
|
const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
|
|
@@ -245,8 +245,8 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
245
245
|
);
|
|
246
246
|
}
|
|
247
247
|
}
|
|
248
|
-
updateAttribute(t, e, r,
|
|
249
|
-
if (!this.checkName(
|
|
248
|
+
updateAttribute(t, e, r, i) {
|
|
249
|
+
if (!this.checkName(i, r))
|
|
250
250
|
console.error(`${r} is not an allowed ${t} value`);
|
|
251
251
|
else {
|
|
252
252
|
const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
|
|
@@ -268,11 +268,11 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
268
268
|
return { attrName: t, breakpoint: e };
|
|
269
269
|
}
|
|
270
270
|
updateAnchorOffset(t, e, r) {
|
|
271
|
-
if (
|
|
271
|
+
if (!$(r, e)) {
|
|
272
272
|
console.error(`${e} is not a valid anchor-offset value`);
|
|
273
273
|
return;
|
|
274
274
|
}
|
|
275
|
-
const
|
|
275
|
+
const i = (a) => {
|
|
276
276
|
a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
|
|
277
277
|
"--container-anchor-offset--mobile",
|
|
278
278
|
`var(--px-padding-${a}-mobile)`
|
|
@@ -284,7 +284,7 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
284
284
|
`var(--px-padding-${a}-laptop)`
|
|
285
285
|
));
|
|
286
286
|
};
|
|
287
|
-
|
|
287
|
+
i(t), i(e);
|
|
288
288
|
}
|
|
289
289
|
get padding() {
|
|
290
290
|
return this.getAttribute("padding");
|
|
@@ -624,14 +624,14 @@ const Le = ["anchor-right", "anchor-left", "anchor-full"], m = (i, t, e) => `:ho
|
|
|
624
624
|
}
|
|
625
625
|
};
|
|
626
626
|
ct.nativeName = "div";
|
|
627
|
-
let
|
|
628
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
629
|
-
const Tt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-state-hover-bordered-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var( --px-color-background-state-state-hover-bordered-inverted );color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (min-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, Mt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Te = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);text-align:center;background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Me = ":host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", Bt = new CSSStyleSheet(), Rt = new CSSStyleSheet(), It = new CSSStyleSheet(), qt = new CSSStyleSheet();
|
|
630
|
-
|
|
631
|
-
Rt.replaceSync(
|
|
627
|
+
let tt = ct;
|
|
628
|
+
customElements.get("px-container") || customElements.define("px-container", tt);
|
|
629
|
+
const Lt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, Tt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Le = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Te = ":host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", Mt = new CSSStyleSheet(), Rt = new CSSStyleSheet(), Bt = new CSSStyleSheet(), It = new CSSStyleSheet();
|
|
630
|
+
Mt.replaceSync(Lt);
|
|
631
|
+
Rt.replaceSync(Tt);
|
|
632
|
+
Bt.replaceSync(Le);
|
|
632
633
|
It.replaceSync(Te);
|
|
633
|
-
|
|
634
|
-
const Be = [
|
|
634
|
+
const Me = [
|
|
635
635
|
"",
|
|
636
636
|
"default",
|
|
637
637
|
"secondary",
|
|
@@ -651,7 +651,7 @@ const Be = [
|
|
|
651
651
|
"alternative"
|
|
652
652
|
], bt = class bt extends x {
|
|
653
653
|
constructor() {
|
|
654
|
-
super(
|
|
654
|
+
super(Mt, Rt, Bt, It), this.template = () => `<button class="btn">
|
|
655
655
|
<slot name="before"></slot><slot></slot><slot name="after"></slot>
|
|
656
656
|
</button>`, this.shadowRoot.innerHTML = this.template();
|
|
657
657
|
}
|
|
@@ -679,11 +679,11 @@ const Be = [
|
|
|
679
679
|
super.connectedCallback();
|
|
680
680
|
const t = this.querySelectorAll("px-icon");
|
|
681
681
|
t && t.forEach((e) => {
|
|
682
|
-
const r = e.getAttribute("size"),
|
|
682
|
+
const r = e.getAttribute("size"), i = e.getAttribute("color");
|
|
683
683
|
e && (e.addEventListener("click", () => {
|
|
684
684
|
this.$el.focus();
|
|
685
|
-
}), r || e.setAttribute("size", "xs"),
|
|
686
|
-
}),
|
|
685
|
+
}), r || e.setAttribute("size", "xs"), i || e.setAttribute("color", "inherit"));
|
|
686
|
+
}), zt(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
687
687
|
var r;
|
|
688
688
|
e.preventDefault(), (r = this.closest("form")) == null || r.submit();
|
|
689
689
|
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
@@ -737,7 +737,7 @@ const Be = [
|
|
|
737
737
|
t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
|
|
738
738
|
}
|
|
739
739
|
updateVariant(t, e) {
|
|
740
|
-
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(
|
|
740
|
+
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Me, e) || console.error(
|
|
741
741
|
`${e} is not a valid "variant" value for ${e}`
|
|
742
742
|
);
|
|
743
743
|
}
|
|
@@ -753,7 +753,7 @@ const Be = [
|
|
|
753
753
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
754
754
|
}
|
|
755
755
|
updateShape(t, e, r) {
|
|
756
|
-
if (
|
|
756
|
+
if (!$(r, e)) {
|
|
757
757
|
console.error(`${e} is not a valid shape value`);
|
|
758
758
|
return;
|
|
759
759
|
}
|
|
@@ -851,11 +851,11 @@ const Be = [
|
|
|
851
851
|
}
|
|
852
852
|
};
|
|
853
853
|
bt.nativeName = "button";
|
|
854
|
-
let
|
|
855
|
-
customElements.get("px-button") || customElements.define("px-button",
|
|
856
|
-
const
|
|
857
|
-
|
|
858
|
-
class
|
|
854
|
+
let et = bt;
|
|
855
|
+
customElements.get("px-button") || customElements.define("px-button", et);
|
|
856
|
+
const Be = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', qt = new CSSStyleSheet();
|
|
857
|
+
qt.replaceSync(Be);
|
|
858
|
+
class Ie extends HTMLElement {
|
|
859
859
|
constructor() {
|
|
860
860
|
super(), this.template = () => `
|
|
861
861
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
@@ -871,7 +871,7 @@ class qe extends HTMLElement {
|
|
|
871
871
|
<div class="content-wrapper">
|
|
872
872
|
<slot name="overlap"></slot>
|
|
873
873
|
</div>
|
|
874
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
874
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [qt];
|
|
875
875
|
}
|
|
876
876
|
connectedCallback() {
|
|
877
877
|
const t = this.querySelector('[slot="heading"]');
|
|
@@ -913,7 +913,7 @@ class qe extends HTMLElement {
|
|
|
913
913
|
if (e !== r)
|
|
914
914
|
switch (t) {
|
|
915
915
|
case "background-color":
|
|
916
|
-
this.$container.backgroundColor =
|
|
916
|
+
this.$container.backgroundColor = St.indexOf(r) > 0 ? r : "none";
|
|
917
917
|
break;
|
|
918
918
|
case "background-gradient":
|
|
919
919
|
this.$container.gradient = this.gradient;
|
|
@@ -1143,59 +1143,59 @@ class qe extends HTMLElement {
|
|
|
1143
1143
|
this.setAttribute("border-side--laptop", t);
|
|
1144
1144
|
}
|
|
1145
1145
|
}
|
|
1146
|
-
customElements.get("px-section") || customElements.define("px-section",
|
|
1147
|
-
const
|
|
1146
|
+
customElements.get("px-section") || customElements.define("px-section", Ie);
|
|
1147
|
+
const qe = ["", "default", "naked", "contained"], De = [
|
|
1148
1148
|
"",
|
|
1149
1149
|
"container-light",
|
|
1150
1150
|
"container-default"
|
|
1151
1151
|
];
|
|
1152
|
-
function
|
|
1153
|
-
|
|
1152
|
+
function T(o) {
|
|
1153
|
+
o.hasAttribute("width") || o.setAttribute("width", "s"), o.setAttribute("border-radius", "pill");
|
|
1154
1154
|
}
|
|
1155
|
-
function
|
|
1156
|
-
|
|
1155
|
+
function M(o) {
|
|
1156
|
+
o.getAttribute("variant") === "contained" && !o.getAttribute("background-color") && o.setAttribute("background-color", "container-light");
|
|
1157
1157
|
}
|
|
1158
|
-
function
|
|
1159
|
-
if (
|
|
1158
|
+
function Pe(o, t, e) {
|
|
1159
|
+
if (!$(qe, e)) {
|
|
1160
1160
|
console.error(`${e} is not an allowed variant value.`);
|
|
1161
1161
|
return;
|
|
1162
1162
|
}
|
|
1163
|
-
t !== null && t !== "" && t !== "default" &&
|
|
1163
|
+
t !== null && t !== "" && t !== "default" && o.classList.toggle(t), e !== null && e !== "" && e !== "default" && o.classList.toggle(e);
|
|
1164
1164
|
}
|
|
1165
|
-
function O(
|
|
1166
|
-
e ? (
|
|
1167
|
-
|
|
1168
|
-
})) : (
|
|
1169
|
-
|
|
1165
|
+
function O(o, t, e, r = []) {
|
|
1166
|
+
e ? (o.setAttribute("inverted", ""), r.forEach((i) => i.setAttribute("inverted", "")), t.forEach((i) => {
|
|
1167
|
+
i.hasAttribute("inverted") || i.setAttribute("inverted", "");
|
|
1168
|
+
})) : (o.removeAttribute("inverted"), r.forEach((i) => i.removeAttribute("inverted")), t.forEach((i) => {
|
|
1169
|
+
i.hasAttribute("inverted") && i.removeAttribute("inverted");
|
|
1170
1170
|
}));
|
|
1171
1171
|
}
|
|
1172
|
-
function
|
|
1173
|
-
if (
|
|
1172
|
+
function _e(o, t, e, r, i) {
|
|
1173
|
+
if (!$(i, r)) {
|
|
1174
1174
|
console.error(`${r} is not an allowed ${t} value`);
|
|
1175
1175
|
return;
|
|
1176
1176
|
}
|
|
1177
1177
|
const a = (s) => {
|
|
1178
|
-
s !== null && s !== "" && s !== "default" && (
|
|
1178
|
+
s !== null && s !== "" && s !== "default" && (o.style.setProperty(
|
|
1179
1179
|
"--cell-contained-background-color-default",
|
|
1180
1180
|
`var(--px-color-background-${s}-default)`
|
|
1181
|
-
),
|
|
1181
|
+
), o.style.setProperty(
|
|
1182
1182
|
"--cell-contained-background-color-inverted",
|
|
1183
1183
|
`var(--px-color-background-${s}-inverted)`
|
|
1184
1184
|
));
|
|
1185
1185
|
};
|
|
1186
1186
|
a(e), a(r);
|
|
1187
1187
|
}
|
|
1188
|
-
function
|
|
1189
|
-
e ? (
|
|
1188
|
+
function Dt(o, t, e, r = [], i = {}) {
|
|
1189
|
+
e ? (o.setAttribute("disabled", ""), r.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
|
|
1190
1190
|
a.hasAttribute("disabled") || a.setAttribute("disabled", "");
|
|
1191
|
-
}),
|
|
1191
|
+
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (o.removeAttribute("disabled"), r.forEach((a) => a.removeAttribute("disabled")), t.forEach((a) => {
|
|
1192
1192
|
a.hasAttribute("disabled") && a.removeAttribute("disabled");
|
|
1193
|
-
}),
|
|
1193
|
+
}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
|
|
1194
1194
|
}
|
|
1195
|
-
const
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
const
|
|
1195
|
+
const R = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}", He = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}', Pt = new CSSStyleSheet(), _t = new CSSStyleSheet();
|
|
1196
|
+
Pt.replaceSync(R);
|
|
1197
|
+
_t.replaceSync(He);
|
|
1198
|
+
const At = ["secondary"], Oe = ["", "default", "top", "bottom", "none"], pt = class pt extends x {
|
|
1199
1199
|
template() {
|
|
1200
1200
|
return `
|
|
1201
1201
|
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
@@ -1217,24 +1217,24 @@ const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = cl
|
|
|
1217
1217
|
`;
|
|
1218
1218
|
}
|
|
1219
1219
|
constructor() {
|
|
1220
|
-
super(
|
|
1220
|
+
super(_t, Pt);
|
|
1221
1221
|
const t = document.createElement(this.nativeName);
|
|
1222
1222
|
t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1223
1223
|
}
|
|
1224
1224
|
connectedCallback() {
|
|
1225
1225
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1226
1226
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1227
|
-
t &&
|
|
1227
|
+
t && T(t);
|
|
1228
1228
|
}
|
|
1229
1229
|
if (this.$slotSuffix) {
|
|
1230
1230
|
const t = this.querySelectorAll(
|
|
1231
1231
|
'px-button-icon[slot="suffix"]'
|
|
1232
1232
|
), e = t.length > 0, r = t.length > 1;
|
|
1233
|
-
e && t.forEach((
|
|
1234
|
-
this.configureSlotSuffixButtonIcon(
|
|
1233
|
+
e && t.forEach((i) => {
|
|
1234
|
+
this.configureSlotSuffixButtonIcon(i);
|
|
1235
1235
|
}), r && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
|
|
1236
1236
|
}
|
|
1237
|
-
|
|
1237
|
+
M(this);
|
|
1238
1238
|
}
|
|
1239
1239
|
static get observedAttributes() {
|
|
1240
1240
|
return [
|
|
@@ -1260,26 +1260,26 @@ const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = cl
|
|
|
1260
1260
|
if (e !== r)
|
|
1261
1261
|
switch (t) {
|
|
1262
1262
|
case "variant":
|
|
1263
|
-
|
|
1263
|
+
Pe(this.$el, e, r);
|
|
1264
1264
|
break;
|
|
1265
1265
|
case "inverted":
|
|
1266
|
-
for (let
|
|
1267
|
-
this.$children[
|
|
1266
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
1267
|
+
this.$children[i].hasAttribute("inverted") ? this.$children[i].removeAttribute("inverted") : this.$children[i].setAttribute("inverted", "");
|
|
1268
1268
|
break;
|
|
1269
1269
|
case "radius":
|
|
1270
1270
|
case "radius--mobile":
|
|
1271
1271
|
case "radius--tablet":
|
|
1272
1272
|
case "radius--laptop":
|
|
1273
1273
|
case "radius--desktop":
|
|
1274
|
-
this.updateRadius(t, e, r,
|
|
1274
|
+
this.updateRadius(t, e, r, Oe);
|
|
1275
1275
|
break;
|
|
1276
1276
|
case "background-color":
|
|
1277
|
-
|
|
1277
|
+
_e(
|
|
1278
1278
|
this.$el,
|
|
1279
1279
|
t,
|
|
1280
1280
|
e,
|
|
1281
1281
|
r,
|
|
1282
|
-
|
|
1282
|
+
De
|
|
1283
1283
|
);
|
|
1284
1284
|
break;
|
|
1285
1285
|
default:
|
|
@@ -1288,17 +1288,17 @@ const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = cl
|
|
|
1288
1288
|
}
|
|
1289
1289
|
}
|
|
1290
1290
|
configureSlotSuffixButtonIcon(t) {
|
|
1291
|
-
t.hasAttribute("variant") ?
|
|
1292
|
-
|
|
1291
|
+
t.hasAttribute("variant") ? $(
|
|
1292
|
+
At,
|
|
1293
1293
|
t.getAttribute("variant")
|
|
1294
1294
|
) || (console.error(
|
|
1295
|
-
`Wrong button-icon variant value for suffix. Allowed values are: ${
|
|
1295
|
+
`Wrong button-icon variant value for suffix. Allowed values are: ${At.join(
|
|
1296
1296
|
", "
|
|
1297
1297
|
)}.`
|
|
1298
1298
|
), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
|
|
1299
1299
|
}
|
|
1300
|
-
updateRadius(t, e, r,
|
|
1301
|
-
if (
|
|
1300
|
+
updateRadius(t, e, r, i) {
|
|
1301
|
+
if (!$(i, r)) {
|
|
1302
1302
|
console.error(`${r} is not a valid ${t} value`);
|
|
1303
1303
|
return;
|
|
1304
1304
|
}
|
|
@@ -1306,18 +1306,18 @@ const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = cl
|
|
|
1306
1306
|
if (!a)
|
|
1307
1307
|
this.separatorMobile || s.push("mobile"), this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop"), this.separatorDesktop || s.push("desktop");
|
|
1308
1308
|
else {
|
|
1309
|
-
const
|
|
1310
|
-
s.push(
|
|
1309
|
+
const d = t.split("--")[1];
|
|
1310
|
+
s.push(d);
|
|
1311
1311
|
}
|
|
1312
|
-
s.forEach((
|
|
1313
|
-
e !== null && e !== "" && e !== "default" && this.updateStyle(
|
|
1312
|
+
s.forEach((d) => {
|
|
1313
|
+
e !== null && e !== "" && e !== "default" && this.updateStyle(d, e), r !== null && r !== "" && r !== "default" && this.updateStyle(d, r);
|
|
1314
1314
|
});
|
|
1315
1315
|
}
|
|
1316
1316
|
updateStyle(t, e) {
|
|
1317
1317
|
let r = [];
|
|
1318
|
-
e === "top" ? r = ["bottom-right", "bottom-left"] : e === "bottom" ? r = ["top-right", "top-left"] : e === "none" && (r = ["top-right", "bottom-right", "bottom-left", "top-left"]), r.forEach((
|
|
1318
|
+
e === "top" ? r = ["bottom-right", "bottom-left"] : e === "bottom" ? r = ["top-right", "top-left"] : e === "none" && (r = ["top-right", "bottom-right", "bottom-left", "top-left"]), r.forEach((i) => {
|
|
1319
1319
|
this.$el.style.setProperty(
|
|
1320
|
-
`--cell-contained-border-radius-${
|
|
1320
|
+
`--cell-contained-border-radius-${i}--${t}`,
|
|
1321
1321
|
"0"
|
|
1322
1322
|
);
|
|
1323
1323
|
});
|
|
@@ -1426,12 +1426,12 @@ const $t = ["secondary"], je = ["", "default", "top", "bottom", "none"], pt = cl
|
|
|
1426
1426
|
}
|
|
1427
1427
|
};
|
|
1428
1428
|
pt.nativeName = "div";
|
|
1429
|
-
let
|
|
1430
|
-
customElements.get("px-cell") || customElements.define("px-cell",
|
|
1431
|
-
const
|
|
1432
|
-
|
|
1433
|
-
const
|
|
1434
|
-
|
|
1429
|
+
let rt = pt;
|
|
1430
|
+
customElements.get("px-cell") || customElements.define("px-cell", rt);
|
|
1431
|
+
const je = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}', Ht = new CSSStyleSheet();
|
|
1432
|
+
Ht.replaceSync(R);
|
|
1433
|
+
const Ot = new CSSStyleSheet();
|
|
1434
|
+
Ot.replaceSync(je);
|
|
1435
1435
|
const ht = class ht extends x {
|
|
1436
1436
|
template() {
|
|
1437
1437
|
return `
|
|
@@ -1451,19 +1451,19 @@ const ht = class ht extends x {
|
|
|
1451
1451
|
`;
|
|
1452
1452
|
}
|
|
1453
1453
|
constructor() {
|
|
1454
|
-
super(
|
|
1454
|
+
super(Ot, Ht);
|
|
1455
1455
|
const t = document.createElement(this.nativeName);
|
|
1456
1456
|
t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1457
1457
|
}
|
|
1458
1458
|
connectedCallback() {
|
|
1459
1459
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1460
1460
|
const e = this.querySelector('px-img[slot="visual"]');
|
|
1461
|
-
e &&
|
|
1461
|
+
e && T(e);
|
|
1462
1462
|
}
|
|
1463
1463
|
this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
|
|
1464
1464
|
"aria-label",
|
|
1465
1465
|
this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
|
|
1466
|
-
)),
|
|
1466
|
+
)), M(this);
|
|
1467
1467
|
}
|
|
1468
1468
|
static get observedAttributes() {
|
|
1469
1469
|
return [
|
|
@@ -1499,7 +1499,7 @@ const ht = class ht extends x {
|
|
|
1499
1499
|
]);
|
|
1500
1500
|
break;
|
|
1501
1501
|
case "disabled":
|
|
1502
|
-
|
|
1502
|
+
Dt(this.$cell, this.$children, this.disabled, [], {
|
|
1503
1503
|
ariaEl: this.$el,
|
|
1504
1504
|
setAria: !0,
|
|
1505
1505
|
setTabIndex: !0
|
|
@@ -1640,12 +1640,12 @@ const ht = class ht extends x {
|
|
|
1640
1640
|
}
|
|
1641
1641
|
};
|
|
1642
1642
|
ht.nativeName = "a";
|
|
1643
|
-
let
|
|
1644
|
-
customElements.get("px-cell-link") || customElements.define("px-cell-link",
|
|
1645
|
-
const
|
|
1646
|
-
|
|
1647
|
-
const
|
|
1648
|
-
|
|
1643
|
+
let ot = ht;
|
|
1644
|
+
customElements.get("px-cell-link") || customElements.define("px-cell-link", ot);
|
|
1645
|
+
const Fe = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", jt = new CSSStyleSheet();
|
|
1646
|
+
jt.replaceSync(R);
|
|
1647
|
+
const Ft = new CSSStyleSheet();
|
|
1648
|
+
Ft.replaceSync(Fe);
|
|
1649
1649
|
const ut = class ut extends x {
|
|
1650
1650
|
template() {
|
|
1651
1651
|
return `
|
|
@@ -1658,16 +1658,16 @@ const ut = class ut extends x {
|
|
|
1658
1658
|
`;
|
|
1659
1659
|
}
|
|
1660
1660
|
constructor() {
|
|
1661
|
-
super(
|
|
1661
|
+
super(Ft, jt);
|
|
1662
1662
|
const t = document.createElement(this.nativeName);
|
|
1663
1663
|
t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1664
1664
|
}
|
|
1665
1665
|
connectedCallback() {
|
|
1666
1666
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1667
1667
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1668
|
-
t &&
|
|
1668
|
+
t && T(t);
|
|
1669
1669
|
}
|
|
1670
|
-
|
|
1670
|
+
M(this);
|
|
1671
1671
|
}
|
|
1672
1672
|
static get observedAttributes() {
|
|
1673
1673
|
return [
|
|
@@ -1699,7 +1699,7 @@ const ut = class ut extends x {
|
|
|
1699
1699
|
O(this.$cell, this.$children, this.inverted);
|
|
1700
1700
|
break;
|
|
1701
1701
|
case "disabled":
|
|
1702
|
-
|
|
1702
|
+
Dt(this.$cell, this.$children, this.disabled, [], {
|
|
1703
1703
|
ariaEl: this.$el,
|
|
1704
1704
|
setAria: !0,
|
|
1705
1705
|
setTabIndex: !0
|
|
@@ -1825,14 +1825,14 @@ const ut = class ut extends x {
|
|
|
1825
1825
|
}
|
|
1826
1826
|
};
|
|
1827
1827
|
ut.nativeName = "button";
|
|
1828
|
-
let
|
|
1829
|
-
customElements.get("px-cell-button") || customElements.define("px-cell-button",
|
|
1830
|
-
const Ne = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-purpose-error-default)}.checkbox #checkbox-container{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.all-slots-empty :is(.checkbox #checkbox-container){gap:0}.checkbox label{line-height:calc(var(--px-line-height-ratio-l) * 1em);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover{cursor:pointer}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag,.checkbox.selectable-tag #checkbox-container{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 48em){.checkbox{gap:var(--px-spacing-xs-tablet)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}#checkbox-container{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.checkbox{gap:var(--px-spacing-xs-laptop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}#checkbox-container{gap:var(--px-spacing-s-laptop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 90.0625em){.checkbox{gap:var(--px-spacing-xs-desktop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}#checkbox-container{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .checkbox ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Nt = new CSSStyleSheet();
|
|
1831
|
-
|
|
1832
|
-
const
|
|
1828
|
+
let it = ut;
|
|
1829
|
+
customElements.get("px-cell-button") || customElements.define("px-cell-button", it);
|
|
1830
|
+
const We = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-purpose-error-default)}.checkbox #checkbox-container{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.all-slots-empty :is(.checkbox #checkbox-container){gap:0}.checkbox label{line-height:calc(var(--px-line-height-ratio-l) * 1em);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover{cursor:pointer}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag,.checkbox.selectable-tag #checkbox-container{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 48em){.checkbox{gap:var(--px-spacing-xs-tablet)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}#checkbox-container{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.checkbox{gap:var(--px-spacing-xs-laptop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}#checkbox-container{gap:var(--px-spacing-s-laptop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 90.0625em){.checkbox{gap:var(--px-spacing-xs-desktop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}#checkbox-container{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .checkbox ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Wt = new CSSStyleSheet();
|
|
1831
|
+
Wt.replaceSync(We);
|
|
1832
|
+
const Ne = ["", "default", "selectable-tag"], Nt = ["", "error"], gt = class gt extends x {
|
|
1833
1833
|
constructor() {
|
|
1834
1834
|
var t;
|
|
1835
|
-
super(
|
|
1835
|
+
super(Wt), this.template = () => `<div class="checkbox">
|
|
1836
1836
|
<slot name="error-text"></slot>
|
|
1837
1837
|
<div id="checkbox-container">
|
|
1838
1838
|
<input type="checkbox"/>
|
|
@@ -1874,7 +1874,7 @@ const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt
|
|
|
1874
1874
|
this.updateAttribute(
|
|
1875
1875
|
e,
|
|
1876
1876
|
r,
|
|
1877
|
-
|
|
1877
|
+
Nt,
|
|
1878
1878
|
t
|
|
1879
1879
|
), this.setupAriaDescribedBy(
|
|
1880
1880
|
this.$slotErrorText,
|
|
@@ -1886,7 +1886,7 @@ const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt
|
|
|
1886
1886
|
this.updateAttribute(
|
|
1887
1887
|
e,
|
|
1888
1888
|
r,
|
|
1889
|
-
|
|
1889
|
+
Ne,
|
|
1890
1890
|
t
|
|
1891
1891
|
);
|
|
1892
1892
|
break;
|
|
@@ -1898,13 +1898,13 @@ const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt
|
|
|
1898
1898
|
break;
|
|
1899
1899
|
}
|
|
1900
1900
|
}
|
|
1901
|
-
updateAttribute(t, e, r,
|
|
1901
|
+
updateAttribute(t, e, r, i) {
|
|
1902
1902
|
var a, s;
|
|
1903
1903
|
if (!this.checkName(r, e)) {
|
|
1904
|
-
console.error(`${e} is not a valid ${
|
|
1904
|
+
console.error(`${e} is not a valid ${i} value`);
|
|
1905
1905
|
return;
|
|
1906
1906
|
}
|
|
1907
|
-
t !== null && (
|
|
1907
|
+
t !== null && (i === "variant" ? (a = this.$checkbox) == null || a.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (i === "variant" ? (s = this.$checkbox) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
|
|
1908
1908
|
}
|
|
1909
1909
|
formData() {
|
|
1910
1910
|
if (this.$el.name) {
|
|
@@ -1930,8 +1930,8 @@ const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt
|
|
|
1930
1930
|
setupAriaDescribedBy(t, e, r) {
|
|
1931
1931
|
if (t.length > 0 && this.$el.hasAttribute("id")) {
|
|
1932
1932
|
e.setAttribute("id", `${this.$el.id}-${r}`);
|
|
1933
|
-
let
|
|
1934
|
-
|
|
1933
|
+
let i = this.$el.getAttribute("aria-describedby");
|
|
1934
|
+
i ? i += ` ${this.$el.id}-${r}` : i = `${this.$el.id}-${r}`, this.$el.setAttribute("aria-describedby", i);
|
|
1935
1935
|
}
|
|
1936
1936
|
}
|
|
1937
1937
|
get $checkbox() {
|
|
@@ -1978,12 +1978,12 @@ const Ze = ["", "default", "selectable-tag"], Zt = ["", "error"], gt = class gt
|
|
|
1978
1978
|
}
|
|
1979
1979
|
};
|
|
1980
1980
|
gt.nativeName = "input";
|
|
1981
|
-
let
|
|
1982
|
-
customElements.get("px-checkbox") || customElements.define("px-checkbox",
|
|
1983
|
-
const
|
|
1984
|
-
|
|
1985
|
-
const
|
|
1986
|
-
class
|
|
1981
|
+
let at = gt;
|
|
1982
|
+
customElements.get("px-checkbox") || customElements.define("px-checkbox", at);
|
|
1983
|
+
const Zt = new CSSStyleSheet();
|
|
1984
|
+
Zt.replaceSync(R);
|
|
1985
|
+
const Ze = ["", "left", "right"];
|
|
1986
|
+
class Ue extends C {
|
|
1987
1987
|
template() {
|
|
1988
1988
|
return `
|
|
1989
1989
|
<div class="cell-checkbox">
|
|
@@ -1998,12 +1998,12 @@ class Ye extends $ {
|
|
|
1998
1998
|
}
|
|
1999
1999
|
constructor() {
|
|
2000
2000
|
var t;
|
|
2001
|
-
super(
|
|
2001
|
+
super(Zt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
|
|
2002
2002
|
}
|
|
2003
2003
|
connectedCallback() {
|
|
2004
2004
|
if (this.$slotVisual) {
|
|
2005
2005
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
2006
|
-
t &&
|
|
2006
|
+
t && T(t);
|
|
2007
2007
|
}
|
|
2008
2008
|
this.addEventListener("mouseover", () => {
|
|
2009
2009
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -2017,7 +2017,7 @@ class Ye extends $ {
|
|
|
2017
2017
|
}
|
|
2018
2018
|
}), this.addEventListener("click", (t) => {
|
|
2019
2019
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
2020
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
2020
|
+
}), this.hasAttribute("checked") && (this.checked = !0), M(this);
|
|
2021
2021
|
}
|
|
2022
2022
|
static get observedAttributes() {
|
|
2023
2023
|
return [
|
|
@@ -2077,7 +2077,7 @@ class Ye extends $ {
|
|
|
2077
2077
|
break;
|
|
2078
2078
|
case "state":
|
|
2079
2079
|
if (this.$checkbox)
|
|
2080
|
-
if (this.checkName(
|
|
2080
|
+
if (this.checkName(Nt, r))
|
|
2081
2081
|
this.$checkbox.setAttribute("state", r);
|
|
2082
2082
|
else {
|
|
2083
2083
|
console.error(`${r} is not a valid state value`);
|
|
@@ -2110,7 +2110,7 @@ class Ye extends $ {
|
|
|
2110
2110
|
));
|
|
2111
2111
|
}
|
|
2112
2112
|
handleCheckboxPositionChange(t) {
|
|
2113
|
-
if (!this.checkName(
|
|
2113
|
+
if (!this.checkName(Ze, t)) {
|
|
2114
2114
|
console.error(`${t} is not a valid position value`);
|
|
2115
2115
|
return;
|
|
2116
2116
|
}
|
|
@@ -2269,10 +2269,10 @@ class Ye extends $ {
|
|
|
2269
2269
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
2270
2270
|
}
|
|
2271
2271
|
}
|
|
2272
|
-
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox",
|
|
2273
|
-
const
|
|
2274
|
-
|
|
2275
|
-
class
|
|
2272
|
+
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", Ue);
|
|
2273
|
+
const Ut = new CSSStyleSheet();
|
|
2274
|
+
Ut.replaceSync(R);
|
|
2275
|
+
class Ye extends C {
|
|
2276
2276
|
template() {
|
|
2277
2277
|
return `
|
|
2278
2278
|
<div class="cell-switch">
|
|
@@ -2287,12 +2287,12 @@ class Ge extends $ {
|
|
|
2287
2287
|
}
|
|
2288
2288
|
constructor() {
|
|
2289
2289
|
var t;
|
|
2290
|
-
super(
|
|
2290
|
+
super(Ut), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = 0, this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`);
|
|
2291
2291
|
}
|
|
2292
2292
|
connectedCallback() {
|
|
2293
2293
|
if (this.$slotVisual) {
|
|
2294
2294
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
2295
|
-
t &&
|
|
2295
|
+
t && T(t);
|
|
2296
2296
|
}
|
|
2297
2297
|
this.addEventListener("mouseover", () => {
|
|
2298
2298
|
this.$switch.setAttribute("hover", "");
|
|
@@ -2306,7 +2306,7 @@ class Ge extends $ {
|
|
|
2306
2306
|
}
|
|
2307
2307
|
}), this.addEventListener("click", (t) => {
|
|
2308
2308
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
2309
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
2309
|
+
}), this.hasAttribute("checked") && (this.checked = !0), M(this);
|
|
2310
2310
|
}
|
|
2311
2311
|
static get observedAttributes() {
|
|
2312
2312
|
return [
|
|
@@ -2531,12 +2531,12 @@ class Ge extends $ {
|
|
|
2531
2531
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
2532
2532
|
}
|
|
2533
2533
|
}
|
|
2534
|
-
customElements.get("px-cell-switch") || customElements.define("px-cell-switch",
|
|
2535
|
-
const Ke = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}input{font-size:var(--px-font-size-base)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-ratio-l) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Gt = new CSSStyleSheet();
|
|
2536
|
-
|
|
2537
|
-
const
|
|
2534
|
+
customElements.get("px-cell-switch") || customElements.define("px-cell-switch", Ye);
|
|
2535
|
+
const Ge = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}input{font-size:var(--px-font-size-base)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-ratio-l) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Yt = new CSSStyleSheet();
|
|
2536
|
+
Yt.replaceSync(Ge);
|
|
2537
|
+
const Gt = ["", "default", "selectable-tag"], Kt = ["", "error"], U = class U extends x {
|
|
2538
2538
|
constructor() {
|
|
2539
|
-
super(
|
|
2539
|
+
super(Yt), this.template = () => `<div class="radio" tabindex="-1">
|
|
2540
2540
|
<input type="radio" tabindex="-1" />
|
|
2541
2541
|
<label><slot name="before"></slot><slot name="label"></slot></label>
|
|
2542
2542
|
</div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
|
|
@@ -2571,10 +2571,10 @@ const Kt = ["", "default", "selectable-tag"], Xt = ["", "error"], vt = class vt
|
|
|
2571
2571
|
this.setAttribute("inverted", t);
|
|
2572
2572
|
}
|
|
2573
2573
|
};
|
|
2574
|
-
|
|
2575
|
-
let W =
|
|
2574
|
+
U.nativeName = "input", U.accessorExclusions = ["checked"];
|
|
2575
|
+
let W = U;
|
|
2576
2576
|
customElements.get("px-radio-base") || customElements.define("px-radio-base", W);
|
|
2577
|
-
|
|
2577
|
+
class Ke extends W {
|
|
2578
2578
|
constructor() {
|
|
2579
2579
|
var t, e;
|
|
2580
2580
|
super(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.querySelector("px-radio")) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
|
|
@@ -2583,7 +2583,7 @@ const xt = class xt extends W {
|
|
|
2583
2583
|
return [...super.observedAttributes, "state", "variant", "inverted"];
|
|
2584
2584
|
}
|
|
2585
2585
|
connectedCallback() {
|
|
2586
|
-
this.addEventListener("keypress", (t) => {
|
|
2586
|
+
super.connectedCallback(), this.addEventListener("keypress", (t) => {
|
|
2587
2587
|
switch (t.stopPropagation(), t.preventDefault(), t.code) {
|
|
2588
2588
|
case "Space":
|
|
2589
2589
|
this.click();
|
|
@@ -2591,19 +2591,19 @@ const xt = class xt extends W {
|
|
|
2591
2591
|
}
|
|
2592
2592
|
}), this.addEventListener("click", (t) => {
|
|
2593
2593
|
this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
|
|
2594
|
-
}), this.setupForId(), this
|
|
2594
|
+
}), this.setupForId(), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot ? this.$radio.classList.add("all-slots-empty") : this.$radio.classList.remove("all-slots-empty");
|
|
2595
2595
|
}
|
|
2596
2596
|
attributeChangedCallback(t, e, r) {
|
|
2597
2597
|
if (e !== r)
|
|
2598
2598
|
switch (t) {
|
|
2599
2599
|
case "state":
|
|
2600
|
-
this.updateAttribute(e, r,
|
|
2600
|
+
this.updateAttribute(e, r, Kt, t);
|
|
2601
2601
|
break;
|
|
2602
2602
|
case "variant":
|
|
2603
2603
|
this.updateAttribute(
|
|
2604
2604
|
e,
|
|
2605
2605
|
r,
|
|
2606
|
-
|
|
2606
|
+
Gt,
|
|
2607
2607
|
t
|
|
2608
2608
|
);
|
|
2609
2609
|
break;
|
|
@@ -2626,17 +2626,17 @@ const xt = class xt extends W {
|
|
|
2626
2626
|
formStateRestoreCallback(t) {
|
|
2627
2627
|
this.checked = t;
|
|
2628
2628
|
}
|
|
2629
|
-
updateAttribute(t, e, r,
|
|
2629
|
+
updateAttribute(t, e, r, i) {
|
|
2630
2630
|
var a, s;
|
|
2631
2631
|
if (!this.checkName(r, e)) {
|
|
2632
|
-
console.error(`${e} is not a valid ${
|
|
2632
|
+
console.error(`${e} is not a valid ${i} value`);
|
|
2633
2633
|
return;
|
|
2634
2634
|
}
|
|
2635
|
-
t !== null && (
|
|
2635
|
+
t !== null && (i === "variant" ? (a = this.$el.parentElement) == null || a.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (i === "variant" ? (s = this.$el.parentElement) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
|
|
2636
2636
|
}
|
|
2637
2637
|
handleCheckedChange(t) {
|
|
2638
2638
|
var e;
|
|
2639
|
-
this.$el.checked = t, (e = this.internals) == null || e.setFormValue(this.formData()), t ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true")
|
|
2639
|
+
this.$el.checked = t, (e = this.internals) == null || e.setFormValue(this.formData()), t ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true")) : (this.tabIndex = -1, this.internals && (this.internals.ariaChecked = "false")), t && this.dispatchEvent(
|
|
2640
2640
|
new Event("change", {
|
|
2641
2641
|
bubbles: !0,
|
|
2642
2642
|
composed: !0
|
|
@@ -2690,12 +2690,10 @@ const xt = class xt extends W {
|
|
|
2690
2690
|
get $iconSlot() {
|
|
2691
2691
|
return this.querySelector('px-icon[slot="before"]');
|
|
2692
2692
|
}
|
|
2693
|
-
}
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
const Xe = ":host{display:block}:host *{box-sizing:border-box}#radio-container{display:inline-flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile));font-family:var(--px-font-family)}.selectable-tag #radio-container{flex-direction:row}@media only screen and (min-width: 48em){#radio-container{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media only screen and (min-width: 64.0625em){#radio-container{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}@media only screen and (min-width: 90.0625em){#radio-container{gap:var(--px-radiogroup-gap--desktop, var(--px-spacing-s-desktop))}}", Jt = new CSSStyleSheet();
|
|
2698
|
-
Jt.replaceSync(Xe);
|
|
2693
|
+
}
|
|
2694
|
+
customElements.get("px-radio") || customElements.define("px-radio", Ke);
|
|
2695
|
+
const Xe = ":host{display:block}:host *{box-sizing:border-box}#radio-container{display:inline-flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile));font-family:var(--px-font-family)}.selectable-tag #radio-container{flex-direction:row}@media only screen and (min-width: 48em){#radio-container{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media only screen and (min-width: 64.0625em){#radio-container{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}@media only screen and (min-width: 90.0625em){#radio-container{gap:var(--px-radiogroup-gap--desktop, var(--px-spacing-s-desktop))}}", Xt = new CSSStyleSheet();
|
|
2696
|
+
Xt.replaceSync(Xe);
|
|
2699
2697
|
const Je = [
|
|
2700
2698
|
"",
|
|
2701
2699
|
"none",
|
|
@@ -2705,9 +2703,9 @@ const Je = [
|
|
|
2705
2703
|
"default",
|
|
2706
2704
|
"l"
|
|
2707
2705
|
];
|
|
2708
|
-
class Qe extends
|
|
2706
|
+
class Qe extends C {
|
|
2709
2707
|
constructor() {
|
|
2710
|
-
super(
|
|
2708
|
+
super(Xt), this.template = () => `<px-fieldset role="radiogroup">
|
|
2711
2709
|
<slot name="legend" slot="legend"></slot>
|
|
2712
2710
|
<slot name="error-text" slot="error-text"></slot>
|
|
2713
2711
|
<div id="radio-container">
|
|
@@ -2723,7 +2721,7 @@ class Qe extends $ {
|
|
|
2723
2721
|
t.checked = !0, t.focus();
|
|
2724
2722
|
}, this.handleRadioChange = (t) => {
|
|
2725
2723
|
const e = t.target;
|
|
2726
|
-
if (e.localName === "px-tile-radio" || e.localName === "px-radio" || e.localName === "px-cell-radio") {
|
|
2724
|
+
if (e.localName === "px-tile-radio" || e.localName === "px-radio" || e.localName === "px-cell-radio" || e.localName === "px-selectable-box-radio") {
|
|
2727
2725
|
this.currentCheckedRadio = e;
|
|
2728
2726
|
const r = e.getAttribute("name");
|
|
2729
2727
|
r && this.currentCheckedRadio.checked && this.uncheckOtherRadios(r);
|
|
@@ -2777,24 +2775,24 @@ class Qe extends $ {
|
|
|
2777
2775
|
this.updateGap(e, r, Je);
|
|
2778
2776
|
break;
|
|
2779
2777
|
case "variant":
|
|
2780
|
-
this.updateVariant(e, r,
|
|
2778
|
+
this.updateVariant(e, r, Gt);
|
|
2781
2779
|
break;
|
|
2782
2780
|
case "disabled":
|
|
2783
|
-
this.$el.ariaDisabled = "true", this.$radioList.forEach((
|
|
2784
|
-
|
|
2781
|
+
this.$el.ariaDisabled = "true", this.$radioList.forEach((i) => {
|
|
2782
|
+
i.setAttribute(t, r);
|
|
2785
2783
|
});
|
|
2786
2784
|
break;
|
|
2787
2785
|
case "required":
|
|
2788
2786
|
this.$el.ariaRequired = "true";
|
|
2789
2787
|
break;
|
|
2790
2788
|
case "name":
|
|
2791
|
-
this.$radioList.forEach((
|
|
2792
|
-
|
|
2789
|
+
this.$radioList.forEach((i) => {
|
|
2790
|
+
i.setAttribute(t, r);
|
|
2793
2791
|
});
|
|
2794
2792
|
break;
|
|
2795
2793
|
case "inverted":
|
|
2796
|
-
this.$el.setAttribute(t, r), this.$radioList.forEach((
|
|
2797
|
-
|
|
2794
|
+
this.$el.setAttribute(t, r), this.$radioList.forEach((i) => {
|
|
2795
|
+
i.setAttribute(t, r);
|
|
2798
2796
|
});
|
|
2799
2797
|
break;
|
|
2800
2798
|
case "state":
|
|
@@ -2807,9 +2805,9 @@ class Qe extends $ {
|
|
|
2807
2805
|
}
|
|
2808
2806
|
uncheckOtherRadios(t) {
|
|
2809
2807
|
this.querySelectorAll(
|
|
2810
|
-
`px-radio[name="${t}"], px-tile-radio[name="${t}"], px-cell-radio[name="${t}"]`
|
|
2808
|
+
`px-radio[name="${t}"], px-tile-radio[name="${t}"], px-cell-radio[name="${t}"], px-selectable-box-radio[name="${t}"]`
|
|
2811
2809
|
).forEach((r) => {
|
|
2812
|
-
r !== this.currentCheckedRadio && (r.checked = !1);
|
|
2810
|
+
r !== this.currentCheckedRadio && r.shadowRoot && (r.checked = !1);
|
|
2813
2811
|
});
|
|
2814
2812
|
}
|
|
2815
2813
|
updateVariant(t, e, r) {
|
|
@@ -2817,8 +2815,8 @@ class Qe extends $ {
|
|
|
2817
2815
|
console.error(`${e} is not a valid variant value`);
|
|
2818
2816
|
return;
|
|
2819
2817
|
}
|
|
2820
|
-
t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((
|
|
2821
|
-
|
|
2818
|
+
t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((i) => {
|
|
2819
|
+
i.setAttribute("variant", e);
|
|
2822
2820
|
}));
|
|
2823
2821
|
}
|
|
2824
2822
|
updateGap(t, e, r) {
|
|
@@ -2869,7 +2867,7 @@ class Qe extends $ {
|
|
|
2869
2867
|
}
|
|
2870
2868
|
get $radioList() {
|
|
2871
2869
|
return this.querySelectorAll(
|
|
2872
|
-
"px-radio, px-tile-radio, px-cell-radio"
|
|
2870
|
+
"px-radio, px-tile-radio, px-cell-radio, px-selectable-box-radio"
|
|
2873
2871
|
);
|
|
2874
2872
|
}
|
|
2875
2873
|
get gap() {
|
|
@@ -2913,15 +2911,15 @@ class Qe extends $ {
|
|
|
2913
2911
|
}
|
|
2914
2912
|
}
|
|
2915
2913
|
customElements.get("px-radio-group") || customElements.define("px-radio-group", Qe);
|
|
2916
|
-
const
|
|
2917
|
-
|
|
2914
|
+
const Jt = new CSSStyleSheet();
|
|
2915
|
+
Jt.replaceSync(R);
|
|
2918
2916
|
const Ve = ["", "left", "right"];
|
|
2919
|
-
class tr extends
|
|
2917
|
+
class tr extends C {
|
|
2920
2918
|
template() {
|
|
2921
2919
|
return `
|
|
2922
2920
|
<div class="cell-radio">
|
|
2923
2921
|
<px-cell hoverable>
|
|
2924
|
-
<px-radio
|
|
2922
|
+
<px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
2925
2923
|
<slot name="visual" slot="visual"></slot>
|
|
2926
2924
|
<slot name="label" slot="label"></slot>
|
|
2927
2925
|
<slot name="description" slot="description"></slot>
|
|
@@ -2930,27 +2928,28 @@ class tr extends $ {
|
|
|
2930
2928
|
`;
|
|
2931
2929
|
}
|
|
2932
2930
|
constructor() {
|
|
2933
|
-
var t
|
|
2934
|
-
super(
|
|
2931
|
+
var t;
|
|
2932
|
+
super(Jt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
|
|
2935
2933
|
}
|
|
2936
2934
|
connectedCallback() {
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2935
|
+
var t;
|
|
2936
|
+
if (this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotVisual) {
|
|
2937
|
+
const e = this.querySelector('px-img[slot="visual"]');
|
|
2938
|
+
e && T(e);
|
|
2940
2939
|
}
|
|
2941
2940
|
this.addEventListener("mouseover", () => {
|
|
2942
2941
|
this.$radio.setAttribute("hover", "");
|
|
2943
2942
|
}), this.addEventListener("mouseout", () => {
|
|
2944
2943
|
this.$radio.removeAttribute("hover");
|
|
2945
|
-
}), this.addEventListener("keypress", (
|
|
2946
|
-
switch (
|
|
2944
|
+
}), this.addEventListener("keypress", (e) => {
|
|
2945
|
+
switch (e.stopPropagation(), e.preventDefault(), e.code) {
|
|
2947
2946
|
case "Space":
|
|
2948
2947
|
this.click();
|
|
2949
2948
|
break;
|
|
2950
2949
|
}
|
|
2951
|
-
}), this.addEventListener("click", (
|
|
2952
|
-
this.checked || (this.checked = !0),
|
|
2953
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
2950
|
+
}), this.addEventListener("click", (e) => {
|
|
2951
|
+
this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
|
|
2952
|
+
}), this.hasAttribute("checked") && (this.checked = !0), M(this);
|
|
2954
2953
|
}
|
|
2955
2954
|
static get observedAttributes() {
|
|
2956
2955
|
return [
|
|
@@ -3010,7 +3009,7 @@ class tr extends $ {
|
|
|
3010
3009
|
break;
|
|
3011
3010
|
case "state":
|
|
3012
3011
|
if (this.$radio)
|
|
3013
|
-
if (this.checkName(
|
|
3012
|
+
if (this.checkName(Kt, r))
|
|
3014
3013
|
this.$radio.setAttribute("state", r);
|
|
3015
3014
|
else {
|
|
3016
3015
|
console.error(`${r} is not a valid state value`);
|
|
@@ -3034,7 +3033,7 @@ class tr extends $ {
|
|
|
3034
3033
|
}
|
|
3035
3034
|
handleCheckedAttributeChange(t) {
|
|
3036
3035
|
var e;
|
|
3037
|
-
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.
|
|
3036
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
3038
3037
|
new Event("change", {
|
|
3039
3038
|
bubbles: !0,
|
|
3040
3039
|
composed: !0
|
|
@@ -3073,7 +3072,7 @@ class tr extends $ {
|
|
|
3073
3072
|
return this.shadowRoot.querySelector(".cell-radio");
|
|
3074
3073
|
}
|
|
3075
3074
|
get $radio() {
|
|
3076
|
-
return this.shadowRoot.querySelector("px-radio
|
|
3075
|
+
return this.shadowRoot.querySelector("px-radio");
|
|
3077
3076
|
}
|
|
3078
3077
|
get $slotVisual() {
|
|
3079
3078
|
return this.querySelector('[slot="visual"]');
|
|
@@ -3203,14 +3202,14 @@ class tr extends $ {
|
|
|
3203
3202
|
}
|
|
3204
3203
|
}
|
|
3205
3204
|
customElements.get("px-cell-radio") || customElements.define("px-cell-radio", tr);
|
|
3206
|
-
const er = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}",
|
|
3207
|
-
|
|
3208
|
-
class rr extends
|
|
3205
|
+
const er = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:calc(2em - 2px)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}", Qt = new CSSStyleSheet();
|
|
3206
|
+
Qt.replaceSync(er);
|
|
3207
|
+
class rr extends C {
|
|
3209
3208
|
constructor() {
|
|
3210
3209
|
var t;
|
|
3211
3210
|
super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
|
|
3212
3211
|
<slot></slot>
|
|
3213
|
-
</a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
3212
|
+
</a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Qt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
|
|
3214
3213
|
}
|
|
3215
3214
|
static get observedAttributes() {
|
|
3216
3215
|
return ["for", "href"];
|
|
@@ -3258,11 +3257,11 @@ class rr extends $ {
|
|
|
3258
3257
|
}
|
|
3259
3258
|
}
|
|
3260
3259
|
customElements.get("px-header-item") || customElements.define("px-header-item", rr);
|
|
3261
|
-
const or = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}",
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
const ir = [...
|
|
3260
|
+
const or = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", Vt = new CSSStyleSheet(), te = new CSSStyleSheet(), ee = new CSSStyleSheet();
|
|
3261
|
+
Vt.replaceSync(Tt);
|
|
3262
|
+
te.replaceSync(Lt);
|
|
3263
|
+
ee.replaceSync(or);
|
|
3264
|
+
const ir = [...Ce, "link-m", "link-s"], ar = [
|
|
3266
3265
|
"link",
|
|
3267
3266
|
"no-style",
|
|
3268
3267
|
"skip-link",
|
|
@@ -3270,9 +3269,9 @@ const ir = [...we, "link-m", "link-s"], ar = [
|
|
|
3270
3269
|
"btn-secondary",
|
|
3271
3270
|
"btn-tertiary",
|
|
3272
3271
|
"icon-link"
|
|
3273
|
-
], sr = ["", "default", "alternative"],
|
|
3272
|
+
], sr = ["", "default", "alternative"], vt = class vt extends x {
|
|
3274
3273
|
constructor() {
|
|
3275
|
-
super(te, ee
|
|
3274
|
+
super(Vt, te, ee), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
3276
3275
|
const t = document.createElement(this.nativeName);
|
|
3277
3276
|
t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
3278
3277
|
}
|
|
@@ -3299,7 +3298,7 @@ const ir = [...we, "link-m", "link-s"], ar = [
|
|
|
3299
3298
|
];
|
|
3300
3299
|
}
|
|
3301
3300
|
connectedCallback() {
|
|
3302
|
-
super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after),
|
|
3301
|
+
super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), zt(this, this.$el, !1);
|
|
3303
3302
|
}
|
|
3304
3303
|
attributeChangedCallback(t, e, r) {
|
|
3305
3304
|
if (e !== r)
|
|
@@ -3333,10 +3332,10 @@ const ir = [...we, "link-m", "link-s"], ar = [
|
|
|
3333
3332
|
);
|
|
3334
3333
|
break;
|
|
3335
3334
|
case "color":
|
|
3336
|
-
this.updateTypography(t, e, r,
|
|
3335
|
+
this.updateTypography(t, e, r, Se);
|
|
3337
3336
|
break;
|
|
3338
3337
|
case "font-weight":
|
|
3339
|
-
this.updateTypography(t, e, r,
|
|
3338
|
+
this.updateTypography(t, e, r, we);
|
|
3340
3339
|
break;
|
|
3341
3340
|
case "title":
|
|
3342
3341
|
r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
|
|
@@ -3364,14 +3363,14 @@ const ir = [...we, "link-m", "link-s"], ar = [
|
|
|
3364
3363
|
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ar, e) || console.error(`Bad "variant" value for ${e}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
3365
3364
|
}
|
|
3366
3365
|
updateShape(t, e, r) {
|
|
3367
|
-
if (
|
|
3366
|
+
if (!$(r, e)) {
|
|
3368
3367
|
console.error(`${e} is not a valid shape value`);
|
|
3369
3368
|
return;
|
|
3370
3369
|
}
|
|
3371
3370
|
e !== null && e !== "" && this.$el.setAttribute(t, e);
|
|
3372
3371
|
}
|
|
3373
|
-
updateTypography(t, e, r,
|
|
3374
|
-
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(
|
|
3372
|
+
updateTypography(t, e, r, i) {
|
|
3373
|
+
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(i, r) || console.error(`Bad ${t} value: ${r}`);
|
|
3375
3374
|
}
|
|
3376
3375
|
updateExtended(t, e) {
|
|
3377
3376
|
e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
|
|
@@ -3490,8 +3489,8 @@ const ir = [...we, "link-m", "link-s"], ar = [
|
|
|
3490
3489
|
t ? this.setAttribute("title", t) : this.removeAttribute("title");
|
|
3491
3490
|
}
|
|
3492
3491
|
};
|
|
3493
|
-
|
|
3494
|
-
let st =
|
|
3492
|
+
vt.nativeName = "a";
|
|
3493
|
+
let st = vt;
|
|
3495
3494
|
customElements.get("px-a") || customElements.define("px-a", st);
|
|
3496
3495
|
class nr extends HTMLElement {
|
|
3497
3496
|
constructor() {
|
|
@@ -3505,132 +3504,132 @@ class nr extends HTMLElement {
|
|
|
3505
3504
|
}
|
|
3506
3505
|
}
|
|
3507
3506
|
customElements.get("px-mdd-a") || customElements.define("px-mdd-a", nr);
|
|
3508
|
-
const
|
|
3509
|
-
function N(
|
|
3510
|
-
var t = typeof
|
|
3511
|
-
return
|
|
3507
|
+
const lr = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media only screen and (min-width: 48em){#dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
|
|
3508
|
+
function N(o) {
|
|
3509
|
+
var t = typeof o;
|
|
3510
|
+
return o != null && (t == "object" || t == "function");
|
|
3512
3511
|
}
|
|
3513
|
-
var
|
|
3514
|
-
return
|
|
3512
|
+
var dr = typeof global == "object" && global && global.Object === Object && global, cr = typeof self == "object" && self && self.Object === Object && self, re = dr || cr || Function("return this")(), V = function() {
|
|
3513
|
+
return re.Date.now();
|
|
3515
3514
|
}, br = /\s/;
|
|
3516
|
-
function pr(
|
|
3517
|
-
for (var t =
|
|
3515
|
+
function pr(o) {
|
|
3516
|
+
for (var t = o.length; t-- && br.test(o.charAt(t)); )
|
|
3518
3517
|
;
|
|
3519
3518
|
return t;
|
|
3520
3519
|
}
|
|
3521
3520
|
var hr = /^\s+/;
|
|
3522
|
-
function ur(
|
|
3523
|
-
return
|
|
3521
|
+
function ur(o) {
|
|
3522
|
+
return o && o.slice(0, pr(o) + 1).replace(hr, "");
|
|
3524
3523
|
}
|
|
3525
|
-
var Z =
|
|
3526
|
-
function xr(
|
|
3527
|
-
var t = gr.call(
|
|
3524
|
+
var Z = re.Symbol, oe = Object.prototype, gr = oe.hasOwnProperty, vr = oe.toString, D = Z ? Z.toStringTag : void 0;
|
|
3525
|
+
function xr(o) {
|
|
3526
|
+
var t = gr.call(o, D), e = o[D];
|
|
3528
3527
|
try {
|
|
3529
|
-
|
|
3528
|
+
o[D] = void 0;
|
|
3530
3529
|
var r = !0;
|
|
3531
3530
|
} catch {
|
|
3532
3531
|
}
|
|
3533
|
-
var
|
|
3534
|
-
return r && (t ?
|
|
3532
|
+
var i = vr.call(o);
|
|
3533
|
+
return r && (t ? o[D] = e : delete o[D]), i;
|
|
3535
3534
|
}
|
|
3536
3535
|
var fr = Object.prototype, mr = fr.toString;
|
|
3537
|
-
function kr(
|
|
3538
|
-
return mr.call(
|
|
3536
|
+
function kr(o) {
|
|
3537
|
+
return mr.call(o);
|
|
3539
3538
|
}
|
|
3540
|
-
var Ar = "[object Null]", yr = "[object Undefined]",
|
|
3541
|
-
function $r(
|
|
3542
|
-
return
|
|
3539
|
+
var Ar = "[object Null]", yr = "[object Undefined]", yt = Z ? Z.toStringTag : void 0;
|
|
3540
|
+
function $r(o) {
|
|
3541
|
+
return o == null ? o === void 0 ? yr : Ar : yt && yt in Object(o) ? xr(o) : kr(o);
|
|
3543
3542
|
}
|
|
3544
|
-
function Cr(
|
|
3545
|
-
return
|
|
3543
|
+
function Cr(o) {
|
|
3544
|
+
return o != null && typeof o == "object";
|
|
3546
3545
|
}
|
|
3547
3546
|
var wr = "[object Symbol]";
|
|
3548
|
-
function Sr(
|
|
3549
|
-
return typeof
|
|
3547
|
+
function Sr(o) {
|
|
3548
|
+
return typeof o == "symbol" || Cr(o) && $r(o) == wr;
|
|
3550
3549
|
}
|
|
3551
|
-
var
|
|
3552
|
-
function
|
|
3553
|
-
if (typeof
|
|
3554
|
-
return
|
|
3555
|
-
if (Sr(
|
|
3556
|
-
return
|
|
3557
|
-
if (N(
|
|
3558
|
-
var t = typeof
|
|
3559
|
-
|
|
3560
|
-
}
|
|
3561
|
-
if (typeof
|
|
3562
|
-
return
|
|
3563
|
-
|
|
3564
|
-
var e = Er.test(
|
|
3565
|
-
return e || Lr.test(
|
|
3550
|
+
var $t = NaN, zr = /^[-+]0x[0-9a-f]+$/i, Er = /^0b[01]+$/i, Lr = /^0o[0-7]+$/i, Tr = parseInt;
|
|
3551
|
+
function Ct(o) {
|
|
3552
|
+
if (typeof o == "number")
|
|
3553
|
+
return o;
|
|
3554
|
+
if (Sr(o))
|
|
3555
|
+
return $t;
|
|
3556
|
+
if (N(o)) {
|
|
3557
|
+
var t = typeof o.valueOf == "function" ? o.valueOf() : o;
|
|
3558
|
+
o = N(t) ? t + "" : t;
|
|
3559
|
+
}
|
|
3560
|
+
if (typeof o != "string")
|
|
3561
|
+
return o === 0 ? o : +o;
|
|
3562
|
+
o = ur(o);
|
|
3563
|
+
var e = Er.test(o);
|
|
3564
|
+
return e || Lr.test(o) ? Tr(o.slice(2), e ? 2 : 8) : zr.test(o) ? $t : +o;
|
|
3566
3565
|
}
|
|
3567
|
-
var Mr = "Expected a function",
|
|
3568
|
-
function Ir(
|
|
3569
|
-
var r,
|
|
3570
|
-
if (typeof
|
|
3566
|
+
var Mr = "Expected a function", Rr = Math.max, Br = Math.min;
|
|
3567
|
+
function Ir(o, t, e) {
|
|
3568
|
+
var r, i, a, s, d, b, f = 0, B = !1, u = !1, K = !0;
|
|
3569
|
+
if (typeof o != "function")
|
|
3571
3570
|
throw new TypeError(Mr);
|
|
3572
|
-
t =
|
|
3573
|
-
function
|
|
3574
|
-
var g = r, I =
|
|
3575
|
-
return r =
|
|
3571
|
+
t = Ct(t) || 0, N(e) && (B = !!e.leading, u = "maxWait" in e, a = u ? Rr(Ct(e.maxWait) || 0, t) : a, K = "trailing" in e ? !!e.trailing : K);
|
|
3572
|
+
function X(c) {
|
|
3573
|
+
var g = r, I = i;
|
|
3574
|
+
return r = i = void 0, f = c, s = o.apply(I, g), s;
|
|
3576
3575
|
}
|
|
3577
|
-
function
|
|
3578
|
-
return
|
|
3576
|
+
function pe(c) {
|
|
3577
|
+
return f = c, d = setTimeout(j, t), B ? X(c) : s;
|
|
3579
3578
|
}
|
|
3580
|
-
function
|
|
3581
|
-
var g = c - b, I = c -
|
|
3582
|
-
return
|
|
3579
|
+
function he(c) {
|
|
3580
|
+
var g = c - b, I = c - f, mt = t - g;
|
|
3581
|
+
return u ? Br(mt, a - I) : mt;
|
|
3583
3582
|
}
|
|
3584
|
-
function
|
|
3585
|
-
var g = c - b, I = c -
|
|
3586
|
-
return b === void 0 || g >= t || g < 0 ||
|
|
3583
|
+
function xt(c) {
|
|
3584
|
+
var g = c - b, I = c - f;
|
|
3585
|
+
return b === void 0 || g >= t || g < 0 || u && I >= a;
|
|
3587
3586
|
}
|
|
3588
3587
|
function j() {
|
|
3589
|
-
var c =
|
|
3590
|
-
if (
|
|
3591
|
-
return
|
|
3592
|
-
|
|
3588
|
+
var c = V();
|
|
3589
|
+
if (xt(c))
|
|
3590
|
+
return ft(c);
|
|
3591
|
+
d = setTimeout(j, he(c));
|
|
3593
3592
|
}
|
|
3594
|
-
function
|
|
3595
|
-
return
|
|
3593
|
+
function ft(c) {
|
|
3594
|
+
return d = void 0, K && r ? X(c) : (r = i = void 0, s);
|
|
3595
|
+
}
|
|
3596
|
+
function ue() {
|
|
3597
|
+
d !== void 0 && clearTimeout(d), f = 0, r = b = i = d = void 0;
|
|
3596
3598
|
}
|
|
3597
3599
|
function ge() {
|
|
3598
|
-
|
|
3599
|
-
}
|
|
3600
|
-
function
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
return he(b);
|
|
3608
|
-
if (R)
|
|
3609
|
-
return clearTimeout(l), l = setTimeout(j, t), K(b);
|
|
3600
|
+
return d === void 0 ? s : ft(V());
|
|
3601
|
+
}
|
|
3602
|
+
function J() {
|
|
3603
|
+
var c = V(), g = xt(c);
|
|
3604
|
+
if (r = arguments, i = this, b = c, g) {
|
|
3605
|
+
if (d === void 0)
|
|
3606
|
+
return pe(b);
|
|
3607
|
+
if (u)
|
|
3608
|
+
return clearTimeout(d), d = setTimeout(j, t), X(b);
|
|
3610
3609
|
}
|
|
3611
|
-
return
|
|
3610
|
+
return d === void 0 && (d = setTimeout(j, t)), s;
|
|
3612
3611
|
}
|
|
3613
|
-
return
|
|
3612
|
+
return J.cancel = ue, J.flush = ge, J;
|
|
3614
3613
|
}
|
|
3615
3614
|
var qr = "Expected a function";
|
|
3616
|
-
function Dr(
|
|
3617
|
-
var r = !0,
|
|
3618
|
-
if (typeof
|
|
3615
|
+
function Dr(o, t, e) {
|
|
3616
|
+
var r = !0, i = !0;
|
|
3617
|
+
if (typeof o != "function")
|
|
3619
3618
|
throw new TypeError(qr);
|
|
3620
|
-
return N(e) && (r = "leading" in e ? !!e.leading : r,
|
|
3619
|
+
return N(e) && (r = "leading" in e ? !!e.leading : r, i = "trailing" in e ? !!e.trailing : i), Ir(o, t, {
|
|
3621
3620
|
leading: r,
|
|
3622
3621
|
maxWait: t,
|
|
3623
|
-
trailing:
|
|
3622
|
+
trailing: i
|
|
3624
3623
|
});
|
|
3625
3624
|
}
|
|
3626
|
-
const
|
|
3627
|
-
|
|
3625
|
+
const ie = new CSSStyleSheet();
|
|
3626
|
+
ie.replaceSync(lr);
|
|
3628
3627
|
const Pr = "Menu";
|
|
3629
|
-
var H, n,
|
|
3630
|
-
class _r extends
|
|
3628
|
+
var H, n, ae, nt, lt, se, dt, y, P, _, w;
|
|
3629
|
+
class _r extends C {
|
|
3631
3630
|
constructor() {
|
|
3632
3631
|
var e;
|
|
3633
|
-
super(
|
|
3632
|
+
super(ie);
|
|
3634
3633
|
h(this, n);
|
|
3635
3634
|
h(this, H);
|
|
3636
3635
|
this.template = `
|
|
@@ -3639,8 +3638,9 @@ class _r extends $ {
|
|
|
3639
3638
|
<slot name="skip"></slot>
|
|
3640
3639
|
<px-section id="navigation-container" padding-block--mobile="s" padding-block="none"
|
|
3641
3640
|
background-color="none">
|
|
3642
|
-
<px-hstack id="dropdown-zone--desktop"
|
|
3641
|
+
<px-hstack id="dropdown-zone--desktop" align-items="center">
|
|
3643
3642
|
<slot name="target-group"></slot>
|
|
3643
|
+
<px-spacer></px-spacer>
|
|
3644
3644
|
<slot name="user-language"></slot>
|
|
3645
3645
|
</px-hstack>
|
|
3646
3646
|
<px-hstack gap="default" wrap="wrap" align-items="center">
|
|
@@ -3672,7 +3672,7 @@ class _r extends $ {
|
|
|
3672
3672
|
<slot name="main"></slot>
|
|
3673
3673
|
</div>
|
|
3674
3674
|
`, q(this, H, () => {
|
|
3675
|
-
window.innerWidth >= 768 && (p(this, n,
|
|
3675
|
+
window.innerWidth >= 768 && (p(this, n, se).call(this), p(this, n, ae).call(this));
|
|
3676
3676
|
}), this.shadowRoot.innerHTML = this.template, this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "navigation", this.internals.ariaOrientation = "horizontal");
|
|
3677
3677
|
}
|
|
3678
3678
|
connectedCallback() {
|
|
@@ -3680,27 +3680,27 @@ class _r extends $ {
|
|
|
3680
3680
|
const r = e.target.closest(
|
|
3681
3681
|
"px-header-item"
|
|
3682
3682
|
);
|
|
3683
|
-
r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block",
|
|
3684
|
-
|
|
3685
|
-
}), r.checked = !0, p(this, n, nt).call(this, e.target.for)) : p(this, n,
|
|
3683
|
+
r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", l(this, n, P).forEach((i) => {
|
|
3684
|
+
i.checked = !1;
|
|
3685
|
+
}), r.checked = !0, p(this, n, nt).call(this, e.target.for)) : p(this, n, dt).call(this));
|
|
3686
3686
|
}), this.addEventListener("section-item-click", (e) => {
|
|
3687
|
-
this.$backdropFilter.style.display = "block",
|
|
3687
|
+
this.$backdropFilter.style.display = "block", l(this, n, P).forEach((r) => {
|
|
3688
3688
|
r.checked = !1;
|
|
3689
3689
|
}), this.querySelector(
|
|
3690
3690
|
`px-header-item[for="${e.detail.for}"]`
|
|
3691
3691
|
).checked = !0, p(this, n, nt).call(this, e.detail.for);
|
|
3692
3692
|
}), this.addEventListener("back-to-mobile-menu", () => {
|
|
3693
|
-
this.$backdropFilter.style.display = "block",
|
|
3693
|
+
this.$backdropFilter.style.display = "block", l(this, n, P).forEach((e) => {
|
|
3694
3694
|
e.checked = !1;
|
|
3695
|
-
}), p(this, n,
|
|
3695
|
+
}), p(this, n, lt).call(this);
|
|
3696
3696
|
}), this.shadowRoot.addEventListener("click", (e) => {
|
|
3697
|
-
e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), p(this, n,
|
|
3697
|
+
e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), p(this, n, lt).call(this));
|
|
3698
3698
|
}), this.addEventListener("close-panel", () => {
|
|
3699
|
-
p(this, n,
|
|
3699
|
+
p(this, n, dt).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
|
|
3700
3700
|
}), this.addEventListener(
|
|
3701
3701
|
"close-panel-from-dialog",
|
|
3702
3702
|
(e) => {
|
|
3703
|
-
this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY <
|
|
3703
|
+
this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < l(this, n, _).getBoundingClientRect().bottom && requestAnimationFrame(() => {
|
|
3704
3704
|
var r;
|
|
3705
3705
|
(r = document.elementFromPoint(
|
|
3706
3706
|
e.detail.clientX,
|
|
@@ -3708,7 +3708,7 @@ class _r extends $ {
|
|
|
3708
3708
|
)) == null || r.click();
|
|
3709
3709
|
});
|
|
3710
3710
|
}
|
|
3711
|
-
), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", Pr), window.addEventListener("resize", Dr(
|
|
3711
|
+
), !this.$targetGroupDropdown && !this.$userLanguageDropdown && (this.$dropDownZoneDesktop.style.display = "none"), this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", Pr), window.addEventListener("resize", Dr(l(this, H), 200));
|
|
3712
3712
|
}
|
|
3713
3713
|
static get observedAttributes() {
|
|
3714
3714
|
return [
|
|
@@ -3718,23 +3718,23 @@ class _r extends $ {
|
|
|
3718
3718
|
"back-to-menu-label"
|
|
3719
3719
|
];
|
|
3720
3720
|
}
|
|
3721
|
-
attributeChangedCallback(e, r,
|
|
3722
|
-
if (r !==
|
|
3721
|
+
attributeChangedCallback(e, r, i) {
|
|
3722
|
+
if (r !== i)
|
|
3723
3723
|
switch (e) {
|
|
3724
3724
|
case "close-button-aria-label":
|
|
3725
|
-
|
|
3726
|
-
a.setAttribute("close-button-aria-label",
|
|
3725
|
+
l(this, n, w).forEach((a) => {
|
|
3726
|
+
a.setAttribute("close-button-aria-label", i);
|
|
3727
3727
|
});
|
|
3728
3728
|
break;
|
|
3729
3729
|
case "burger-menu-aria-label":
|
|
3730
|
-
this.$burgerMenu.setAttribute("aria-label",
|
|
3730
|
+
this.$burgerMenu.setAttribute("aria-label", i);
|
|
3731
3731
|
break;
|
|
3732
3732
|
case "primary-navigation-aria-label":
|
|
3733
|
-
this.$primaryNavigation.setAttribute("aria-label",
|
|
3733
|
+
this.$primaryNavigation.setAttribute("aria-label", i);
|
|
3734
3734
|
break;
|
|
3735
3735
|
case "back-to-menu-label":
|
|
3736
|
-
|
|
3737
|
-
a.setAttribute("back-to-menu-label",
|
|
3736
|
+
l(this, n, w).forEach((a) => {
|
|
3737
|
+
a.setAttribute("back-to-menu-label", i);
|
|
3738
3738
|
});
|
|
3739
3739
|
break;
|
|
3740
3740
|
}
|
|
@@ -3785,34 +3785,34 @@ class _r extends $ {
|
|
|
3785
3785
|
e ? this.setAttribute("primary-navigation-aria-label", e) : this.removeAttribute("primary-navigation-aria-label");
|
|
3786
3786
|
}
|
|
3787
3787
|
}
|
|
3788
|
-
H = new WeakMap(), n = new WeakSet(),
|
|
3789
|
-
const e = this.querySelectorAll("px-mdd"), r =
|
|
3790
|
-
e.forEach((
|
|
3791
|
-
|
|
3788
|
+
H = new WeakMap(), n = new WeakSet(), ae = function() {
|
|
3789
|
+
const e = this.querySelectorAll("px-mdd"), r = l(this, n, _).getBoundingClientRect().bottom;
|
|
3790
|
+
e.forEach((i) => {
|
|
3791
|
+
i.dialogOffsetTop = `${r}px`;
|
|
3792
3792
|
});
|
|
3793
3793
|
}, nt = function(e) {
|
|
3794
|
-
|
|
3795
|
-
r.name === e && r.hidden && (r.dialogOffsetTop = `${
|
|
3794
|
+
l(this, n, y).$megaDropDown.hidden = !0, l(this, n, w).forEach((r) => {
|
|
3795
|
+
r.name === e && r.hidden && (r.dialogOffsetTop = `${l(this, n, _).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, this.querySelector(`px-header-item[for="${e}"]`).checked = !r.hidden, document.body.style.overflow = r.hidden ? "auto" : "hidden"), r.name !== e && !r.hidden && (r.hidden = !0);
|
|
3796
3796
|
});
|
|
3797
|
-
}, dt = function() {
|
|
3798
|
-
this.$backdropFilter.style.display = "none", d(this, n, C).forEach((e) => {
|
|
3799
|
-
e.hidden || (e.hidden = !0);
|
|
3800
|
-
}), d(this, n, A).$megaDropDown.dialogOffsetTop = `${d(this, n, _).getBoundingClientRect().bottom}px`, d(this, n, A).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
|
|
3801
|
-
}, ne = function() {
|
|
3802
|
-
d(this, n, A) && (d(this, n, A).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
|
|
3803
3797
|
}, lt = function() {
|
|
3804
|
-
this.$backdropFilter.style.display = "none",
|
|
3798
|
+
this.$backdropFilter.style.display = "none", l(this, n, w).forEach((e) => {
|
|
3799
|
+
e.hidden || (e.hidden = !0);
|
|
3800
|
+
}), l(this, n, y).$megaDropDown.dialogOffsetTop = `${l(this, n, _).getBoundingClientRect().bottom}px`, l(this, n, y).$megaDropDown.hidden = !1, document.body.style.overflow = "hidden";
|
|
3801
|
+
}, se = function() {
|
|
3802
|
+
l(this, n, y) && (l(this, n, y).$megaDropDown.hidden = !0, this.$burgerMenu.setAttribute("aria-expanded", "false"), document.body.style.overflow = "auto", this.$backdropFilter.style.display = "none");
|
|
3803
|
+
}, dt = function() {
|
|
3804
|
+
this.$backdropFilter.style.display = "none", l(this, n, y).$megaDropDown.hidden = !0, l(this, n, P).forEach((e) => {
|
|
3805
3805
|
e.checked = !1;
|
|
3806
|
-
}),
|
|
3806
|
+
}), l(this, n, w).forEach((e) => {
|
|
3807
3807
|
e.hidden = !0;
|
|
3808
3808
|
}), document.body.style.overflow = "auto";
|
|
3809
|
-
},
|
|
3809
|
+
}, y = function() {
|
|
3810
3810
|
return this.querySelector("px-header-mobile-menu");
|
|
3811
3811
|
}, P = function() {
|
|
3812
3812
|
return this.querySelectorAll("px-header-item");
|
|
3813
3813
|
}, _ = function() {
|
|
3814
3814
|
return this.shadowRoot.querySelector("header");
|
|
3815
|
-
},
|
|
3815
|
+
}, w = function() {
|
|
3816
3816
|
return this.querySelectorAll("px-mdd");
|
|
3817
3817
|
};
|
|
3818
3818
|
customElements.get("px-header") || customElements.define("px-header", _r);
|
|
@@ -3822,36 +3822,36 @@ const Hr = ':host{position:relative}::slotted([slot="popover"]){position:absolut
|
|
|
3822
3822
|
"bottom-left",
|
|
3823
3823
|
"bottom-right"
|
|
3824
3824
|
];
|
|
3825
|
-
function
|
|
3826
|
-
"anchorName" in document.documentElement.style || t.addEventListener("toggle", () => {
|
|
3827
|
-
var
|
|
3828
|
-
if (!
|
|
3825
|
+
function wt(o, t, e = "bottom-left", r, i = !1) {
|
|
3826
|
+
"anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
|
|
3827
|
+
var B, u;
|
|
3828
|
+
if (!o || !t)
|
|
3829
3829
|
return;
|
|
3830
|
-
const
|
|
3830
|
+
const a = o.getBoundingClientRect(), s = ((B = window.visualViewport) == null ? void 0 : B.height) ?? window.innerHeight, d = ((u = window.visualViewport) == null ? void 0 : u.width) ?? window.innerWidth, b = r.getPropertyValue("--px-padding-s-mobile") || "16px", f = parseInt(
|
|
3831
3831
|
(r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
|
|
3832
3832
|
);
|
|
3833
|
-
["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${
|
|
3833
|
+
["top-left", "top-right"].includes(e) ? (t.style.bottom = `calc( ${b} + ${s - a.top - window.scrollY}px)`, t.style.top = "auto", e === "top-left" ? t.style.left = d < 768 ? `${b}px` : `${a.left}px` : t.style.right = d < 768 ? `${b}px` : `${d - a.right}px`) : (t.style.top = `${a.bottom + window.scrollY}px`, e === "bottom-left" ? t.style.left = d < 768 ? `${b}px` : `${a.left}px` : t.style.right = d < 768 ? `${b}px` : `${d - a.right - f}px`);
|
|
3834
3834
|
});
|
|
3835
3835
|
}
|
|
3836
|
-
const
|
|
3837
|
-
|
|
3836
|
+
const ne = new CSSStyleSheet();
|
|
3837
|
+
ne.replaceSync(Hr);
|
|
3838
3838
|
const F = "bottom-left";
|
|
3839
|
-
var
|
|
3840
|
-
class
|
|
3839
|
+
var L, le, S, z, E, de;
|
|
3840
|
+
class jr extends C {
|
|
3841
3841
|
constructor() {
|
|
3842
|
-
super(
|
|
3843
|
-
h(this,
|
|
3844
|
-
h(this, w);
|
|
3842
|
+
super(ne);
|
|
3843
|
+
h(this, L);
|
|
3845
3844
|
h(this, S);
|
|
3846
3845
|
h(this, z);
|
|
3846
|
+
h(this, E);
|
|
3847
3847
|
this.template = () => `
|
|
3848
3848
|
<style>${this.css}</style>
|
|
3849
3849
|
<slot name="trigger"></slot>
|
|
3850
|
-
<slot name="popover"></slot>`, this.isAboutToClose = !1, q(this,
|
|
3850
|
+
<slot name="popover"></slot>`, this.isAboutToClose = !1, q(this, S, () => {
|
|
3851
3851
|
this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.$trigger.ariaExpanded = "true");
|
|
3852
|
-
}), q(this, S, () => {
|
|
3853
|
-
this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
|
|
3854
3852
|
}), q(this, z, () => {
|
|
3853
|
+
this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.$trigger.ariaExpanded = "false");
|
|
3854
|
+
}), q(this, E, () => {
|
|
3855
3855
|
this.$popoverElement.matches(":popover-open") || setTimeout(() => {
|
|
3856
3856
|
this.isAboutToClose = !1;
|
|
3857
3857
|
});
|
|
@@ -3896,31 +3896,47 @@ class Fr extends $ {
|
|
|
3896
3896
|
}`;
|
|
3897
3897
|
}
|
|
3898
3898
|
static get observedAttributes() {
|
|
3899
|
-
return [
|
|
3899
|
+
return [
|
|
3900
|
+
...super.observedAttributes,
|
|
3901
|
+
"id",
|
|
3902
|
+
"anchoralignment",
|
|
3903
|
+
"use-polyfill"
|
|
3904
|
+
];
|
|
3900
3905
|
}
|
|
3901
3906
|
connectedCallback() {
|
|
3902
3907
|
this.getAttribute("id") || this.setAttribute(
|
|
3903
3908
|
"id",
|
|
3904
3909
|
`px-dropdown-${Math.random().toString(36).substring(2, 15)}`
|
|
3905
|
-
), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", F),
|
|
3910
|
+
), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", F), wt(
|
|
3906
3911
|
this.$trigger,
|
|
3907
3912
|
this.$popoverElement,
|
|
3908
3913
|
this.anchorAlignment,
|
|
3909
|
-
getComputedStyle(this)
|
|
3914
|
+
getComputedStyle(this),
|
|
3915
|
+
this.usePolyfill
|
|
3910
3916
|
);
|
|
3911
3917
|
}
|
|
3912
|
-
attributeChangedCallback(e, r,
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3918
|
+
attributeChangedCallback(e, r, i) {
|
|
3919
|
+
if (r !== i)
|
|
3920
|
+
switch (e) {
|
|
3921
|
+
case "id":
|
|
3922
|
+
this.initPopover();
|
|
3923
|
+
break;
|
|
3924
|
+
case "use-polyfill":
|
|
3925
|
+
wt(
|
|
3926
|
+
this.$trigger,
|
|
3927
|
+
this.$popoverElement,
|
|
3928
|
+
this.anchorAlignment,
|
|
3929
|
+
getComputedStyle(this),
|
|
3930
|
+
this.usePolyfill
|
|
3931
|
+
);
|
|
3932
|
+
break;
|
|
3933
|
+
default:
|
|
3934
|
+
super.attributeChangedCallback(e, r, i);
|
|
3935
|
+
break;
|
|
3936
|
+
}
|
|
3921
3937
|
}
|
|
3922
3938
|
initPopover() {
|
|
3923
|
-
this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, p(this,
|
|
3939
|
+
this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.popoverId), this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, p(this, L, le).call(this), p(this, L, de).call(this));
|
|
3924
3940
|
}
|
|
3925
3941
|
get popoverId() {
|
|
3926
3942
|
return `${this.getAttribute("id")}-popover`;
|
|
@@ -3945,37 +3961,43 @@ class Fr extends $ {
|
|
|
3945
3961
|
`Invalid anchor alignment value: ${e}. Using default ${F}.`
|
|
3946
3962
|
), this.setAttribute("anchoralignment", F));
|
|
3947
3963
|
}
|
|
3964
|
+
get usePolyfill() {
|
|
3965
|
+
return this.hasAttribute("use-polyfill");
|
|
3966
|
+
}
|
|
3967
|
+
set usePolyfill(e) {
|
|
3968
|
+
e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
|
|
3969
|
+
}
|
|
3948
3970
|
}
|
|
3949
|
-
|
|
3950
|
-
this.isAboutToClose = !1, this.$trigger.removeEventListener("click",
|
|
3971
|
+
L = new WeakSet(), le = function() {
|
|
3972
|
+
this.isAboutToClose = !1, this.$trigger.removeEventListener("click", l(this, S)), this.$popoverElement.removeEventListener(
|
|
3951
3973
|
"beforetoggle",
|
|
3952
|
-
|
|
3953
|
-
), this.$popoverElement.removeEventListener("toggle",
|
|
3954
|
-
},
|
|
3974
|
+
l(this, z)
|
|
3975
|
+
), this.$popoverElement.removeEventListener("toggle", l(this, E));
|
|
3976
|
+
}, S = new WeakMap(), z = new WeakMap(), E = new WeakMap(), /**
|
|
3955
3977
|
* Handles the manual display of the popover when the trigger is clicked.
|
|
3956
3978
|
* This is necessary for cases where the trigger is not a button or input element.
|
|
3957
3979
|
* This method adds event listeners to the trigger element to toggle the popover.
|
|
3958
3980
|
* It also manages the state of whether the popover is about to close or not to avoid
|
|
3959
3981
|
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
3960
3982
|
*/
|
|
3961
|
-
|
|
3962
|
-
this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click",
|
|
3983
|
+
de = function() {
|
|
3984
|
+
this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.$trigger.addEventListener("click", l(this, S)), this.$popoverElement.addEventListener("beforetoggle", l(this, z)), this.$popoverElement.addEventListener("toggle", l(this, E)));
|
|
3963
3985
|
};
|
|
3964
|
-
customElements.get("px-dropdown") || customElements.define("px-dropdown",
|
|
3965
|
-
const
|
|
3966
|
-
|
|
3986
|
+
customElements.get("px-dropdown") || customElements.define("px-dropdown", jr);
|
|
3987
|
+
const ce = new CSSStyleSheet();
|
|
3988
|
+
ce.replaceSync(`
|
|
3967
3989
|
@media screen and (min-width: 48em) {
|
|
3968
3990
|
:host {
|
|
3969
3991
|
display: none;
|
|
3970
3992
|
}
|
|
3971
3993
|
}
|
|
3972
3994
|
`);
|
|
3973
|
-
var
|
|
3974
|
-
class
|
|
3995
|
+
var Y, G, be;
|
|
3996
|
+
class Fr extends HTMLElement {
|
|
3975
3997
|
constructor() {
|
|
3976
3998
|
super();
|
|
3977
|
-
h(this,
|
|
3978
|
-
h(this,
|
|
3999
|
+
h(this, G);
|
|
4000
|
+
h(this, Y, `<px-mdd
|
|
3979
4001
|
name="__lavender_mobile_menu"
|
|
3980
4002
|
hidden--tablet
|
|
3981
4003
|
hidden--laptop
|
|
@@ -3984,7 +4006,7 @@ class Wr extends HTMLElement {
|
|
|
3984
4006
|
<span slot="title"><slot name="title"></slot></span>
|
|
3985
4007
|
<px-mdd-section title-hidden></px-mdd-section>
|
|
3986
4008
|
</px-mdd>`);
|
|
3987
|
-
this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML =
|
|
4009
|
+
this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = l(this, Y), this.shadowRoot.adoptedStyleSheets = [ce];
|
|
3988
4010
|
}
|
|
3989
4011
|
connectedCallback() {
|
|
3990
4012
|
this.setAttribute("slot", "header-panels");
|
|
@@ -3993,15 +4015,15 @@ class Wr extends HTMLElement {
|
|
|
3993
4015
|
throw new Error(
|
|
3994
4016
|
"<px-header-mobile-menu> must be used within a <px-header>."
|
|
3995
4017
|
);
|
|
3996
|
-
const r = e.querySelectorAll("px-header-item"),
|
|
4018
|
+
const r = e.querySelectorAll("px-header-item"), i = e.querySelectorAll("px-action-link"), a = this.shadowRoot.querySelector("px-mdd-section");
|
|
3997
4019
|
a.innerHTML = `
|
|
3998
4020
|
${[...r].map((s) => {
|
|
3999
|
-
const
|
|
4000
|
-
return
|
|
4021
|
+
const d = s.getAttribute("for"), b = s.getAttribute("href");
|
|
4022
|
+
return d ? `<px-mdd-section-item for="${d}">${s.innerText}</px-mdd-section-item>` : b ? `<px-mdd-section-item href="${b}">${s.innerText}</px-mdd-section-item>` : "";
|
|
4001
4023
|
}).join("")}
|
|
4002
|
-
${[...
|
|
4024
|
+
${[...i].filter((s) => !s.hasAttribute("promoted")).map(
|
|
4003
4025
|
(s) => `<px-mdd-a href="${s.getAttribute("href")}" slot="footer">${s.innerText}</px-mdd-a>`
|
|
4004
|
-
).join("")}`, p(this,
|
|
4026
|
+
).join("")}`, p(this, G, be).call(this).forEach((s) => {
|
|
4005
4027
|
s && this.$megaDropDown.appendChild(s);
|
|
4006
4028
|
});
|
|
4007
4029
|
}
|
|
@@ -4009,23 +4031,23 @@ class Wr extends HTMLElement {
|
|
|
4009
4031
|
return this.shadowRoot.querySelector("px-mdd");
|
|
4010
4032
|
}
|
|
4011
4033
|
}
|
|
4012
|
-
|
|
4034
|
+
Y = new WeakMap(), G = new WeakSet(), be = function() {
|
|
4013
4035
|
const e = this.closest("px-header"), r = e.querySelector(
|
|
4014
4036
|
'px-dropdown[slot="target-group"]'
|
|
4015
|
-
),
|
|
4037
|
+
), i = e.querySelector(
|
|
4016
4038
|
'px-dropdown[slot="user-language"]'
|
|
4017
4039
|
), a = r == null ? void 0 : r.cloneNode(
|
|
4018
4040
|
!0
|
|
4019
4041
|
);
|
|
4020
4042
|
a == null || a.removeAttribute("id"), a == null || a.setAttribute("slot", "mdd-footer"), a == null || a.setAttribute("grow", "3"), a == null || a.setAttribute("anchoralignment", "top-left");
|
|
4021
|
-
const s =
|
|
4043
|
+
const s = i == null ? void 0 : i.cloneNode(
|
|
4022
4044
|
!0
|
|
4023
4045
|
);
|
|
4024
4046
|
return s == null || s.removeAttribute("id"), s == null || s.setAttribute("slot", "mdd-footer"), s == null || s.setAttribute("grow", "1"), s == null || s.setAttribute("anchoralignment", "top-right"), [a, s];
|
|
4025
4047
|
};
|
|
4026
|
-
customElements.get("px-header-mobile-menu") || customElements.define("px-header-mobile-menu",
|
|
4048
|
+
customElements.get("px-header-mobile-menu") || customElements.define("px-header-mobile-menu", Fr);
|
|
4027
4049
|
export {
|
|
4028
4050
|
_r as Header,
|
|
4029
4051
|
rr as HeaderItem,
|
|
4030
|
-
|
|
4052
|
+
Fr as HeaderMobileMenu
|
|
4031
4053
|
};
|