@proximus/lavender-header 1.0.0-alpha.26 → 1.0.0-alpha.28
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 +435 -424
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var vt = (a) => {
|
|
2
|
+
throw TypeError(a);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { PxElement as p, cssTokenBreakpoints as
|
|
4
|
+
var j = (a, t, e) => t.has(a) || vt("Cannot " + e);
|
|
5
|
+
var c = (a, t, e) => (j(a, t, "read from private field"), e ? e.call(a) : t.get(a)), F = (a, t, e) => t.has(a) ? vt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(a) : t.set(a, e), xt = (a, t, e, r) => (j(a, t, "write to private field"), r ? r.call(a, e) : t.set(a, e), e), b = (a, t, e) => (j(a, t, "access private method"), e);
|
|
6
|
+
import { PxElement as p, cssTokenBreakpoints as v, paddingValues as u, boxShadowValues as de, backgroundSizeValues as le, noBorderRadiusValues as ce, borderRadiusValues as be, borderSideValues as pe, borderValues as he, gradientValues as ue, backgroundColorValues as yt, borderColorValues as ge, checkName as k, transferAccessibilityAttributes as $t, WithExtraAttributes as T, fontsizeValues as ve, fontweightValues as xe, colorValues as fe } from "@proximus/lavender-common";
|
|
7
7
|
import "@proximus/lavender-layout";
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const
|
|
8
|
+
const me = ':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}}', Ct = new CSSStyleSheet();
|
|
9
|
+
Ct.replaceSync(me);
|
|
10
|
+
const ke = ["anchor-right", "anchor-left", "anchor-full"], x = (a, t, e) => `:host([${a}${e ? `--${e}` : ""}='${t}']) .container`, f = "px-padding", rt = class rt extends p {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
Ct,
|
|
14
|
+
v(
|
|
15
15
|
"padding",
|
|
16
|
-
|
|
16
|
+
x,
|
|
17
17
|
u,
|
|
18
|
-
|
|
18
|
+
f,
|
|
19
19
|
"--container-padding"
|
|
20
20
|
),
|
|
21
|
-
|
|
21
|
+
v(
|
|
22
22
|
"padding-inline",
|
|
23
|
-
|
|
23
|
+
x,
|
|
24
24
|
u,
|
|
25
|
-
|
|
25
|
+
f
|
|
26
26
|
),
|
|
27
|
-
|
|
27
|
+
v(
|
|
28
28
|
"padding-block",
|
|
29
|
-
|
|
29
|
+
x,
|
|
30
30
|
u,
|
|
31
|
-
|
|
31
|
+
f
|
|
32
32
|
),
|
|
33
|
-
|
|
33
|
+
v(
|
|
34
34
|
"padding-top",
|
|
35
|
-
|
|
35
|
+
x,
|
|
36
36
|
u,
|
|
37
|
-
|
|
37
|
+
f
|
|
38
38
|
),
|
|
39
|
-
|
|
39
|
+
v(
|
|
40
40
|
"padding-right",
|
|
41
|
-
|
|
41
|
+
x,
|
|
42
42
|
u,
|
|
43
|
-
|
|
43
|
+
f,
|
|
44
44
|
"--container-padding-right"
|
|
45
45
|
),
|
|
46
|
-
|
|
46
|
+
v(
|
|
47
47
|
"padding-bottom",
|
|
48
|
-
|
|
48
|
+
x,
|
|
49
49
|
u,
|
|
50
|
-
|
|
50
|
+
f
|
|
51
51
|
),
|
|
52
|
-
|
|
52
|
+
v(
|
|
53
53
|
"padding-left",
|
|
54
|
-
|
|
54
|
+
x,
|
|
55
55
|
u,
|
|
56
|
-
|
|
56
|
+
f,
|
|
57
57
|
"--container-padding-left"
|
|
58
58
|
)
|
|
59
59
|
), this.template = () => `<div class="container">
|
|
@@ -61,7 +61,7 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
61
61
|
<slot name="anchor-right"></slot>
|
|
62
62
|
<slot name="anchor-full"></slot>
|
|
63
63
|
<slot></slot>
|
|
64
|
-
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
64
|
+
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
65
65
|
}
|
|
66
66
|
static get observedAttributes() {
|
|
67
67
|
return [
|
|
@@ -99,13 +99,22 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
99
99
|
connectedCallback() {
|
|
100
100
|
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
|
|
101
101
|
const t = this.querySelector("[slot]");
|
|
102
|
-
t &&
|
|
102
|
+
t && ke.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
|
|
103
|
+
e.forEach((r) => {
|
|
104
|
+
var o;
|
|
105
|
+
r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (o = this._bgObserver) == null || o.disconnect());
|
|
106
|
+
});
|
|
107
|
+
}), this._bgObserver.observe(this.$el);
|
|
108
|
+
}
|
|
109
|
+
disconnectedCallback() {
|
|
110
|
+
var t;
|
|
111
|
+
(t = this._bgObserver) == null || t.disconnect();
|
|
103
112
|
}
|
|
104
113
|
attributeChangedCallback(t, e, r) {
|
|
105
114
|
if (e !== r)
|
|
106
115
|
switch (t) {
|
|
107
116
|
case "border":
|
|
108
|
-
this.updateAttribute(t, e, r,
|
|
117
|
+
this.updateAttribute(t, e, r, he);
|
|
109
118
|
break;
|
|
110
119
|
case "border-color":
|
|
111
120
|
this.updateBorderColor(t, r);
|
|
@@ -114,14 +123,14 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
114
123
|
case "border-side--mobile":
|
|
115
124
|
case "border-side--tablet":
|
|
116
125
|
case "border-side--laptop":
|
|
117
|
-
this.updateAttribute(t, e, r,
|
|
126
|
+
this.updateAttribute(t, e, r, pe);
|
|
118
127
|
break;
|
|
119
128
|
case "border-radius":
|
|
120
129
|
this.updateAttribute(
|
|
121
130
|
t,
|
|
122
131
|
e,
|
|
123
132
|
r,
|
|
124
|
-
|
|
133
|
+
be
|
|
125
134
|
);
|
|
126
135
|
break;
|
|
127
136
|
case "no-border-radius":
|
|
@@ -132,7 +141,7 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
132
141
|
t,
|
|
133
142
|
e,
|
|
134
143
|
r,
|
|
135
|
-
|
|
144
|
+
ce
|
|
136
145
|
);
|
|
137
146
|
break;
|
|
138
147
|
case "background-color":
|
|
@@ -152,20 +161,20 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
152
161
|
t,
|
|
153
162
|
e,
|
|
154
163
|
r,
|
|
155
|
-
|
|
164
|
+
le
|
|
156
165
|
);
|
|
157
166
|
break;
|
|
158
167
|
case "background-image":
|
|
159
168
|
case "background-image--mobile":
|
|
160
169
|
case "background-image--tablet":
|
|
161
170
|
case "background-image--laptop":
|
|
162
|
-
this.updateBackgroundImg(t, r);
|
|
171
|
+
this._isInViewport && this.updateBackgroundImg(t, r);
|
|
163
172
|
break;
|
|
164
173
|
case "background-position":
|
|
165
174
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
166
175
|
break;
|
|
167
176
|
case "box-shadow":
|
|
168
|
-
this.updateAttribute(t, e, r,
|
|
177
|
+
this.updateAttribute(t, e, r, de);
|
|
169
178
|
break;
|
|
170
179
|
case "anchor-offset":
|
|
171
180
|
this.updateAnchorOffset(e, r, u);
|
|
@@ -175,16 +184,27 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
175
184
|
break;
|
|
176
185
|
}
|
|
177
186
|
}
|
|
187
|
+
_loadBackgroundImages() {
|
|
188
|
+
[
|
|
189
|
+
"background-image",
|
|
190
|
+
"background-image--mobile",
|
|
191
|
+
"background-image--tablet",
|
|
192
|
+
"background-image--laptop"
|
|
193
|
+
].forEach((e) => {
|
|
194
|
+
const r = this.getAttribute(e);
|
|
195
|
+
r && this.updateBackgroundImg(e, r);
|
|
196
|
+
});
|
|
197
|
+
}
|
|
178
198
|
updateBackgroundImg(t, e) {
|
|
179
199
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
180
200
|
}
|
|
181
201
|
updateGradient(t, e) {
|
|
182
|
-
if (this.checkName(
|
|
202
|
+
if (this.checkName(ue, e)) {
|
|
183
203
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
184
204
|
t = r.attrName;
|
|
185
|
-
const
|
|
205
|
+
const o = r.breakpoint;
|
|
186
206
|
this.$el.style.setProperty(
|
|
187
|
-
`--${t}${
|
|
207
|
+
`--${t}${o}`,
|
|
188
208
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
189
209
|
);
|
|
190
210
|
} else
|
|
@@ -192,20 +212,20 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
192
212
|
}
|
|
193
213
|
updateBackgroundColor(t, e) {
|
|
194
214
|
const r = e.startsWith("surface-");
|
|
195
|
-
if (this.checkName(
|
|
196
|
-
const
|
|
215
|
+
if (this.checkName(yt, e)) {
|
|
216
|
+
const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
|
|
197
217
|
this.$el.style.setProperty(
|
|
198
|
-
`--${
|
|
218
|
+
`--${o.attrName}${i}`,
|
|
199
219
|
`var(--px-color-background-${e}${r ? "" : "-default"})`
|
|
200
220
|
), this.$el.style.setProperty(
|
|
201
|
-
`--${
|
|
221
|
+
`--${o.attrName}-inverted${i}`,
|
|
202
222
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
203
223
|
);
|
|
204
224
|
} else
|
|
205
225
|
console.error(`${e} is not an allowed ${t} value`);
|
|
206
226
|
}
|
|
207
227
|
updateBorderColor(t, e) {
|
|
208
|
-
this.checkName(
|
|
228
|
+
this.checkName(ge, e) ? (this.$el.style.setProperty(
|
|
209
229
|
`--${t}`,
|
|
210
230
|
`var(--px-color-border-${e}-default)`
|
|
211
231
|
), this.$el.style.setProperty(
|
|
@@ -213,27 +233,27 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
213
233
|
`var(--px-color-border-${e}-inverted)`
|
|
214
234
|
)) : console.error(`${e} is not an allowed ${t} value`);
|
|
215
235
|
}
|
|
216
|
-
updateNoBorderRadius(t, e, r,
|
|
217
|
-
if (!this.checkName(
|
|
236
|
+
updateNoBorderRadius(t, e, r, o) {
|
|
237
|
+
if (!this.checkName(o, r))
|
|
218
238
|
console.error(`${r} is not an allowed ${t} value`);
|
|
219
239
|
else {
|
|
220
|
-
const i = this.splitAttrNameFromBreakpoint(t),
|
|
240
|
+
const i = this.splitAttrNameFromBreakpoint(t), s = i.breakpoint;
|
|
221
241
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
222
|
-
`${i.attrName}-${e}${
|
|
242
|
+
`${i.attrName}-${e}${s}`
|
|
223
243
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
224
|
-
`${i.attrName}-${r}${
|
|
244
|
+
`${i.attrName}-${r}${s}`
|
|
225
245
|
);
|
|
226
246
|
}
|
|
227
247
|
}
|
|
228
|
-
updateAttribute(t, e, r,
|
|
229
|
-
if (!this.checkName(
|
|
248
|
+
updateAttribute(t, e, r, o) {
|
|
249
|
+
if (!this.checkName(o, r))
|
|
230
250
|
console.error(`${r} is not an allowed ${t} value`);
|
|
231
251
|
else {
|
|
232
|
-
const i = this.splitAttrNameFromBreakpoint(t),
|
|
252
|
+
const i = this.splitAttrNameFromBreakpoint(t), s = i.breakpoint;
|
|
233
253
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
234
|
-
`${i.attrName}-${e}${
|
|
254
|
+
`${i.attrName}-${e}${s}`
|
|
235
255
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
236
|
-
`${i.attrName}-${r}${
|
|
256
|
+
`${i.attrName}-${r}${s}`
|
|
237
257
|
);
|
|
238
258
|
}
|
|
239
259
|
}
|
|
@@ -248,11 +268,11 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
248
268
|
return { attrName: t, breakpoint: e };
|
|
249
269
|
}
|
|
250
270
|
updateAnchorOffset(t, e, r) {
|
|
251
|
-
if (!
|
|
271
|
+
if (!k(r, e)) {
|
|
252
272
|
console.error(`${e} is not a valid anchor-offset value`);
|
|
253
273
|
return;
|
|
254
274
|
}
|
|
255
|
-
const
|
|
275
|
+
const o = (i) => {
|
|
256
276
|
i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
|
|
257
277
|
"--container-anchor-offset--mobile",
|
|
258
278
|
`var(--px-padding-${i}-mobile)`
|
|
@@ -264,7 +284,7 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
264
284
|
`var(--px-padding-${i}-laptop)`
|
|
265
285
|
));
|
|
266
286
|
};
|
|
267
|
-
|
|
287
|
+
o(t), o(e);
|
|
268
288
|
}
|
|
269
289
|
get padding() {
|
|
270
290
|
return this.getAttribute("padding");
|
|
@@ -603,15 +623,15 @@ const Ae = ["anchor-right", "anchor-left", "anchor-full"], f = (o, t, e) => `:ho
|
|
|
603
623
|
this.setAttribute("inverted", t);
|
|
604
624
|
}
|
|
605
625
|
};
|
|
606
|
-
|
|
607
|
-
let
|
|
608
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
609
|
-
const St = `.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]{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]{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]{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]{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]{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)}}`, zt = ':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)}}', ye = ".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]{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)}}", $e = ":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)}}", Et = new CSSStyleSheet(), Lt = new CSSStyleSheet(), Tt = new CSSStyleSheet(), Mt = new CSSStyleSheet();
|
|
626
|
+
rt.nativeName = "div";
|
|
627
|
+
let U = rt;
|
|
628
|
+
customElements.get("px-container") || customElements.define("px-container", U);
|
|
629
|
+
const wt = `.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)}}`, St = ':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)}}', Ae = ".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)}}", ye = ":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)}}", zt = new CSSStyleSheet(), Et = new CSSStyleSheet(), Lt = new CSSStyleSheet(), Tt = new CSSStyleSheet();
|
|
630
|
+
zt.replaceSync(wt);
|
|
610
631
|
Et.replaceSync(St);
|
|
611
|
-
Lt.replaceSync(
|
|
632
|
+
Lt.replaceSync(Ae);
|
|
612
633
|
Tt.replaceSync(ye);
|
|
613
|
-
|
|
614
|
-
const Ce = [
|
|
634
|
+
const $e = [
|
|
615
635
|
"",
|
|
616
636
|
"default",
|
|
617
637
|
"secondary",
|
|
@@ -623,7 +643,7 @@ const Ce = [
|
|
|
623
643
|
"patch-eco",
|
|
624
644
|
"actionable-tag",
|
|
625
645
|
"header-dropdown"
|
|
626
|
-
],
|
|
646
|
+
], Ce = [
|
|
627
647
|
"",
|
|
628
648
|
"default",
|
|
629
649
|
"bottom-right",
|
|
@@ -631,7 +651,7 @@ const Ce = [
|
|
|
631
651
|
"alternative"
|
|
632
652
|
], at = class at extends p {
|
|
633
653
|
constructor() {
|
|
634
|
-
super(Et, Lt, Tt
|
|
654
|
+
super(zt, Et, Lt, Tt), this.template = () => `<button class="btn">
|
|
635
655
|
<slot name="before"></slot><slot></slot><slot name="after"></slot>
|
|
636
656
|
</button>`, this.shadowRoot.innerHTML = this.template();
|
|
637
657
|
}
|
|
@@ -659,11 +679,11 @@ const Ce = [
|
|
|
659
679
|
super.connectedCallback();
|
|
660
680
|
const t = this.querySelectorAll("px-icon");
|
|
661
681
|
t && t.forEach((e) => {
|
|
662
|
-
const r = e.getAttribute("size"),
|
|
682
|
+
const r = e.getAttribute("size"), o = e.getAttribute("color");
|
|
663
683
|
e && (e.addEventListener("click", () => {
|
|
664
684
|
this.$el.focus();
|
|
665
|
-
}), r || e.setAttribute("size", "xs"),
|
|
666
|
-
}),
|
|
685
|
+
}), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
|
|
686
|
+
}), $t(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
667
687
|
var r;
|
|
668
688
|
e.preventDefault(), (r = this.closest("form")) == null || r.submit();
|
|
669
689
|
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
@@ -695,7 +715,7 @@ const Ce = [
|
|
|
695
715
|
case "shape--tablet":
|
|
696
716
|
case "shape--laptop":
|
|
697
717
|
case "shape--desktop":
|
|
698
|
-
this.updateShape(t, r,
|
|
718
|
+
this.updateShape(t, r, Ce);
|
|
699
719
|
break;
|
|
700
720
|
case "aria-expanded":
|
|
701
721
|
r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
|
|
@@ -717,7 +737,7 @@ const Ce = [
|
|
|
717
737
|
t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
|
|
718
738
|
}
|
|
719
739
|
updateVariant(t, e) {
|
|
720
|
-
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($e, e) || console.error(
|
|
721
741
|
`${e} is not a valid "variant" value for ${e}`
|
|
722
742
|
);
|
|
723
743
|
}
|
|
@@ -733,11 +753,11 @@ const Ce = [
|
|
|
733
753
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
734
754
|
}
|
|
735
755
|
updateShape(t, e, r) {
|
|
736
|
-
if (!
|
|
756
|
+
if (!k(r, e)) {
|
|
737
757
|
console.error(`${e} is not a valid shape value`);
|
|
738
758
|
return;
|
|
739
759
|
}
|
|
740
|
-
e !== null && e !== "" &&
|
|
760
|
+
e !== null && e !== "" && this.$el.setAttribute(t, e);
|
|
741
761
|
}
|
|
742
762
|
get variant() {
|
|
743
763
|
return this.getAttribute("variant");
|
|
@@ -831,11 +851,11 @@ const Ce = [
|
|
|
831
851
|
}
|
|
832
852
|
};
|
|
833
853
|
at.nativeName = "button";
|
|
834
|
-
let
|
|
835
|
-
customElements.get("px-button") || customElements.define("px-button",
|
|
836
|
-
const
|
|
837
|
-
|
|
838
|
-
class
|
|
854
|
+
let G = at;
|
|
855
|
+
customElements.get("px-button") || customElements.define("px-button", G);
|
|
856
|
+
const we = ':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)}}', Mt = new CSSStyleSheet();
|
|
857
|
+
Mt.replaceSync(we);
|
|
858
|
+
class Se extends HTMLElement {
|
|
839
859
|
constructor() {
|
|
840
860
|
super(), this.template = () => `
|
|
841
861
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
@@ -851,7 +871,7 @@ class ze extends HTMLElement {
|
|
|
851
871
|
<div class="content-wrapper">
|
|
852
872
|
<slot name="overlap"></slot>
|
|
853
873
|
</div>
|
|
854
|
-
`, 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 = [Mt];
|
|
855
875
|
}
|
|
856
876
|
connectedCallback() {
|
|
857
877
|
const t = this.querySelector('[slot="heading"]');
|
|
@@ -893,7 +913,7 @@ class ze extends HTMLElement {
|
|
|
893
913
|
if (e !== r)
|
|
894
914
|
switch (t) {
|
|
895
915
|
case "background-color":
|
|
896
|
-
this.$container.backgroundColor =
|
|
916
|
+
this.$container.backgroundColor = yt.indexOf(r) > 0 ? r : "none";
|
|
897
917
|
break;
|
|
898
918
|
case "background-gradient":
|
|
899
919
|
this.$container.gradient = this.gradient;
|
|
@@ -1123,59 +1143,59 @@ class ze extends HTMLElement {
|
|
|
1123
1143
|
this.setAttribute("border-side--laptop", t);
|
|
1124
1144
|
}
|
|
1125
1145
|
}
|
|
1126
|
-
customElements.get("px-section") || customElements.define("px-section",
|
|
1127
|
-
const
|
|
1146
|
+
customElements.get("px-section") || customElements.define("px-section", Se);
|
|
1147
|
+
const ze = ["", "default", "naked", "contained"], Ee = [
|
|
1128
1148
|
"",
|
|
1129
1149
|
"container-light",
|
|
1130
1150
|
"container-default"
|
|
1131
1151
|
];
|
|
1132
|
-
function
|
|
1133
|
-
|
|
1152
|
+
function A(a) {
|
|
1153
|
+
a.hasAttribute("width") || a.setAttribute("width", "s"), a.setAttribute("border-radius", "pill");
|
|
1134
1154
|
}
|
|
1135
|
-
function
|
|
1136
|
-
|
|
1155
|
+
function y(a) {
|
|
1156
|
+
a.getAttribute("variant") === "contained" && !a.getAttribute("background-color") && a.setAttribute("background-color", "container-light");
|
|
1137
1157
|
}
|
|
1138
|
-
function
|
|
1139
|
-
if (!
|
|
1158
|
+
function Le(a, t, e) {
|
|
1159
|
+
if (!k(ze, e)) {
|
|
1140
1160
|
console.error(`${e} is not an allowed variant value.`);
|
|
1141
1161
|
return;
|
|
1142
1162
|
}
|
|
1143
|
-
t !== null && t !== "" && t !== "default" &&
|
|
1163
|
+
t !== null && t !== "" && t !== "default" && a.classList.toggle(t), e !== null && e !== "" && e !== "default" && a.classList.toggle(e);
|
|
1144
1164
|
}
|
|
1145
|
-
function
|
|
1146
|
-
e ? (
|
|
1147
|
-
|
|
1148
|
-
})) : (
|
|
1149
|
-
|
|
1165
|
+
function M(a, t, e, r = []) {
|
|
1166
|
+
e ? (a.setAttribute("inverted", ""), r.forEach((o) => o.setAttribute("inverted", "")), t.forEach((o) => {
|
|
1167
|
+
o.hasAttribute("inverted") || o.setAttribute("inverted", "");
|
|
1168
|
+
})) : (a.removeAttribute("inverted"), r.forEach((o) => o.removeAttribute("inverted")), t.forEach((o) => {
|
|
1169
|
+
o.hasAttribute("inverted") && o.removeAttribute("inverted");
|
|
1150
1170
|
}));
|
|
1151
1171
|
}
|
|
1152
|
-
function
|
|
1153
|
-
if (!
|
|
1172
|
+
function Te(a, t, e, r, o) {
|
|
1173
|
+
if (!k(o, r)) {
|
|
1154
1174
|
console.error(`${r} is not an allowed ${t} value`);
|
|
1155
1175
|
return;
|
|
1156
1176
|
}
|
|
1157
|
-
const i = (
|
|
1158
|
-
|
|
1177
|
+
const i = (s) => {
|
|
1178
|
+
s !== null && s !== "" && s !== "default" && (a.style.setProperty(
|
|
1159
1179
|
"--cell-contained-background-color-default",
|
|
1160
|
-
`var(--px-color-background-${
|
|
1161
|
-
),
|
|
1180
|
+
`var(--px-color-background-${s}-default)`
|
|
1181
|
+
), a.style.setProperty(
|
|
1162
1182
|
"--cell-contained-background-color-inverted",
|
|
1163
|
-
`var(--px-color-background-${
|
|
1183
|
+
`var(--px-color-background-${s}-inverted)`
|
|
1164
1184
|
));
|
|
1165
1185
|
};
|
|
1166
1186
|
i(e), i(r);
|
|
1167
1187
|
}
|
|
1168
|
-
function
|
|
1169
|
-
e ? (
|
|
1188
|
+
function Bt(a, t, e, r = [], o = {}) {
|
|
1189
|
+
e ? (a.setAttribute("disabled", ""), r.forEach((i) => i.setAttribute("disabled", "")), t.forEach((i) => {
|
|
1170
1190
|
i.hasAttribute("disabled") || i.setAttribute("disabled", "");
|
|
1171
|
-
}),
|
|
1191
|
+
}), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "true"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = -1)) : (a.removeAttribute("disabled"), r.forEach((i) => i.removeAttribute("disabled")), t.forEach((i) => {
|
|
1172
1192
|
i.hasAttribute("disabled") && i.removeAttribute("disabled");
|
|
1173
|
-
}),
|
|
1193
|
+
}), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "false"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = 0));
|
|
1174
1194
|
}
|
|
1175
|
-
const
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
const
|
|
1195
|
+
const $ = ":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)}", Me = ':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)}', Rt = new CSSStyleSheet(), It = new CSSStyleSheet();
|
|
1196
|
+
Rt.replaceSync($);
|
|
1197
|
+
It.replaceSync(Me);
|
|
1198
|
+
const ft = ["secondary"], Be = ["", "default", "top", "bottom", "none"], ot = class ot extends p {
|
|
1179
1199
|
template() {
|
|
1180
1200
|
return `
|
|
1181
1201
|
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
@@ -1197,24 +1217,24 @@ const mt = ["secondary"], Re = ["", "default", "top", "bottom", "none"], it = cl
|
|
|
1197
1217
|
`;
|
|
1198
1218
|
}
|
|
1199
1219
|
constructor() {
|
|
1200
|
-
super(
|
|
1220
|
+
super(It, Rt);
|
|
1201
1221
|
const t = document.createElement(this.nativeName);
|
|
1202
1222
|
t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1203
1223
|
}
|
|
1204
1224
|
connectedCallback() {
|
|
1205
1225
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1206
1226
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1207
|
-
t &&
|
|
1227
|
+
t && A(t);
|
|
1208
1228
|
}
|
|
1209
1229
|
if (this.$slotSuffix) {
|
|
1210
1230
|
const t = this.querySelectorAll(
|
|
1211
1231
|
'px-button-icon[slot="suffix"]'
|
|
1212
1232
|
), e = t.length > 0, r = t.length > 1;
|
|
1213
|
-
e && t.forEach((
|
|
1214
|
-
this.configureSlotSuffixButtonIcon(
|
|
1233
|
+
e && t.forEach((o) => {
|
|
1234
|
+
this.configureSlotSuffixButtonIcon(o);
|
|
1215
1235
|
}), r && (this.$suffixContainer.gap = "s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
|
|
1216
1236
|
}
|
|
1217
|
-
|
|
1237
|
+
y(this);
|
|
1218
1238
|
}
|
|
1219
1239
|
static get observedAttributes() {
|
|
1220
1240
|
return [
|
|
@@ -1240,26 +1260,26 @@ const mt = ["secondary"], Re = ["", "default", "top", "bottom", "none"], it = cl
|
|
|
1240
1260
|
if (e !== r)
|
|
1241
1261
|
switch (t) {
|
|
1242
1262
|
case "variant":
|
|
1243
|
-
|
|
1263
|
+
Le(this.$el, e, r);
|
|
1244
1264
|
break;
|
|
1245
1265
|
case "inverted":
|
|
1246
|
-
for (let
|
|
1247
|
-
this.$children[
|
|
1266
|
+
for (let o = 0; o < this.$children.length; o++)
|
|
1267
|
+
this.$children[o].hasAttribute("inverted") ? this.$children[o].removeAttribute("inverted") : this.$children[o].setAttribute("inverted", "");
|
|
1248
1268
|
break;
|
|
1249
1269
|
case "radius":
|
|
1250
1270
|
case "radius--mobile":
|
|
1251
1271
|
case "radius--tablet":
|
|
1252
1272
|
case "radius--laptop":
|
|
1253
1273
|
case "radius--desktop":
|
|
1254
|
-
this.updateRadius(t, e, r,
|
|
1274
|
+
this.updateRadius(t, e, r, Be);
|
|
1255
1275
|
break;
|
|
1256
1276
|
case "background-color":
|
|
1257
|
-
|
|
1277
|
+
Te(
|
|
1258
1278
|
this.$el,
|
|
1259
1279
|
t,
|
|
1260
1280
|
e,
|
|
1261
1281
|
r,
|
|
1262
|
-
|
|
1282
|
+
Ee
|
|
1263
1283
|
);
|
|
1264
1284
|
break;
|
|
1265
1285
|
default:
|
|
@@ -1268,36 +1288,36 @@ const mt = ["secondary"], Re = ["", "default", "top", "bottom", "none"], it = cl
|
|
|
1268
1288
|
}
|
|
1269
1289
|
}
|
|
1270
1290
|
configureSlotSuffixButtonIcon(t) {
|
|
1271
|
-
t.hasAttribute("variant") ?
|
|
1272
|
-
|
|
1291
|
+
t.hasAttribute("variant") ? k(
|
|
1292
|
+
ft,
|
|
1273
1293
|
t.getAttribute("variant")
|
|
1274
1294
|
) || (console.error(
|
|
1275
|
-
`Wrong button-icon variant value for suffix. Allowed values are: ${
|
|
1295
|
+
`Wrong button-icon variant value for suffix. Allowed values are: ${ft.join(
|
|
1276
1296
|
", "
|
|
1277
1297
|
)}.`
|
|
1278
1298
|
), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
|
|
1279
1299
|
}
|
|
1280
|
-
updateRadius(t, e, r,
|
|
1281
|
-
if (!
|
|
1300
|
+
updateRadius(t, e, r, o) {
|
|
1301
|
+
if (!k(o, r)) {
|
|
1282
1302
|
console.error(`${r} is not a valid ${t} value`);
|
|
1283
1303
|
return;
|
|
1284
1304
|
}
|
|
1285
|
-
const i = t.includes("--"),
|
|
1305
|
+
const i = t.includes("--"), s = [];
|
|
1286
1306
|
if (!i)
|
|
1287
|
-
this.separatorMobile ||
|
|
1307
|
+
this.separatorMobile || s.push("mobile"), this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop"), this.separatorDesktop || s.push("desktop");
|
|
1288
1308
|
else {
|
|
1289
1309
|
const d = t.split("--")[1];
|
|
1290
|
-
|
|
1310
|
+
s.push(d);
|
|
1291
1311
|
}
|
|
1292
|
-
|
|
1312
|
+
s.forEach((d) => {
|
|
1293
1313
|
e !== null && e !== "" && e !== "default" && this.updateStyle(d, e), r !== null && r !== "" && r !== "default" && this.updateStyle(d, r);
|
|
1294
1314
|
});
|
|
1295
1315
|
}
|
|
1296
1316
|
updateStyle(t, e) {
|
|
1297
1317
|
let r = [];
|
|
1298
|
-
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((o) => {
|
|
1299
1319
|
this.$el.style.setProperty(
|
|
1300
|
-
`--cell-contained-border-radius-${
|
|
1320
|
+
`--cell-contained-border-radius-${o}--${t}`,
|
|
1301
1321
|
"0"
|
|
1302
1322
|
);
|
|
1303
1323
|
});
|
|
@@ -1405,14 +1425,14 @@ const mt = ["secondary"], Re = ["", "default", "top", "bottom", "none"], it = cl
|
|
|
1405
1425
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1406
1426
|
}
|
|
1407
1427
|
};
|
|
1408
|
-
|
|
1409
|
-
let
|
|
1410
|
-
customElements.get("px-cell") || customElements.define("px-cell",
|
|
1411
|
-
const
|
|
1412
|
-
|
|
1413
|
-
const
|
|
1414
|
-
|
|
1415
|
-
const
|
|
1428
|
+
ot.nativeName = "div";
|
|
1429
|
+
let K = ot;
|
|
1430
|
+
customElements.get("px-cell") || customElements.define("px-cell", K);
|
|
1431
|
+
const Re = '.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)}', _t = new CSSStyleSheet();
|
|
1432
|
+
_t.replaceSync($);
|
|
1433
|
+
const qt = new CSSStyleSheet();
|
|
1434
|
+
qt.replaceSync(Re);
|
|
1435
|
+
const it = class it extends p {
|
|
1416
1436
|
template() {
|
|
1417
1437
|
return `
|
|
1418
1438
|
<px-cell hoverable>
|
|
@@ -1431,19 +1451,19 @@ const st = class st extends p {
|
|
|
1431
1451
|
`;
|
|
1432
1452
|
}
|
|
1433
1453
|
constructor() {
|
|
1434
|
-
super(
|
|
1454
|
+
super(qt, _t);
|
|
1435
1455
|
const t = document.createElement(this.nativeName);
|
|
1436
1456
|
t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1437
1457
|
}
|
|
1438
1458
|
connectedCallback() {
|
|
1439
1459
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1440
1460
|
const e = this.querySelector('px-img[slot="visual"]');
|
|
1441
|
-
e &&
|
|
1461
|
+
e && A(e);
|
|
1442
1462
|
}
|
|
1443
1463
|
this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
|
|
1444
1464
|
"aria-label",
|
|
1445
1465
|
this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
|
|
1446
|
-
)),
|
|
1466
|
+
)), y(this);
|
|
1447
1467
|
}
|
|
1448
1468
|
static get observedAttributes() {
|
|
1449
1469
|
return [
|
|
@@ -1474,12 +1494,12 @@ const st = class st extends p {
|
|
|
1474
1494
|
this.$cell.variant = this.variant;
|
|
1475
1495
|
break;
|
|
1476
1496
|
case "inverted":
|
|
1477
|
-
|
|
1497
|
+
M(this.$cell, this.$children, this.inverted, [
|
|
1478
1498
|
this.$pxIcon
|
|
1479
1499
|
]);
|
|
1480
1500
|
break;
|
|
1481
1501
|
case "disabled":
|
|
1482
|
-
|
|
1502
|
+
Bt(this.$cell, this.$children, this.disabled, [], {
|
|
1483
1503
|
ariaEl: this.$el,
|
|
1484
1504
|
setAria: !0,
|
|
1485
1505
|
setTabIndex: !0
|
|
@@ -1619,14 +1639,14 @@ const st = class st extends p {
|
|
|
1619
1639
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1620
1640
|
}
|
|
1621
1641
|
};
|
|
1622
|
-
|
|
1623
|
-
let
|
|
1624
|
-
customElements.get("px-cell-link") || customElements.define("px-cell-link",
|
|
1625
|
-
const
|
|
1626
|
-
|
|
1627
|
-
const
|
|
1628
|
-
|
|
1629
|
-
const
|
|
1642
|
+
it.nativeName = "a";
|
|
1643
|
+
let Y = it;
|
|
1644
|
+
customElements.get("px-cell-link") || customElements.define("px-cell-link", Y);
|
|
1645
|
+
const Ie = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}", Dt = new CSSStyleSheet();
|
|
1646
|
+
Dt.replaceSync($);
|
|
1647
|
+
const Pt = new CSSStyleSheet();
|
|
1648
|
+
Pt.replaceSync(Ie);
|
|
1649
|
+
const st = class st extends p {
|
|
1630
1650
|
template() {
|
|
1631
1651
|
return `
|
|
1632
1652
|
<px-cell hoverable>
|
|
@@ -1638,16 +1658,16 @@ const nt = class nt extends p {
|
|
|
1638
1658
|
`;
|
|
1639
1659
|
}
|
|
1640
1660
|
constructor() {
|
|
1641
|
-
super(
|
|
1661
|
+
super(Pt, Dt);
|
|
1642
1662
|
const t = document.createElement(this.nativeName);
|
|
1643
1663
|
t.classList.add("cell-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1644
1664
|
}
|
|
1645
1665
|
connectedCallback() {
|
|
1646
1666
|
if (super.connectedCallback(), this.$slotVisual) {
|
|
1647
1667
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1648
|
-
t &&
|
|
1668
|
+
t && A(t);
|
|
1649
1669
|
}
|
|
1650
|
-
|
|
1670
|
+
y(this);
|
|
1651
1671
|
}
|
|
1652
1672
|
static get observedAttributes() {
|
|
1653
1673
|
return [
|
|
@@ -1676,10 +1696,10 @@ const nt = class nt extends p {
|
|
|
1676
1696
|
this.$cell.variant = this.variant;
|
|
1677
1697
|
break;
|
|
1678
1698
|
case "inverted":
|
|
1679
|
-
|
|
1699
|
+
M(this.$cell, this.$children, this.inverted);
|
|
1680
1700
|
break;
|
|
1681
1701
|
case "disabled":
|
|
1682
|
-
|
|
1702
|
+
Bt(this.$cell, this.$children, this.disabled, [], {
|
|
1683
1703
|
ariaEl: this.$el,
|
|
1684
1704
|
setAria: !0,
|
|
1685
1705
|
setTabIndex: !0
|
|
@@ -1804,12 +1824,12 @@ const nt = class nt extends p {
|
|
|
1804
1824
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
1805
1825
|
}
|
|
1806
1826
|
};
|
|
1807
|
-
|
|
1808
|
-
let
|
|
1809
|
-
customElements.get("px-cell-button") || customElements.define("px-cell-button",
|
|
1810
|
-
const qe = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.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;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(: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([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){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(: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([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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),: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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),: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{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: 768px){.checkbox{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: 1025px){.checkbox{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)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Ot = new CSSStyleSheet();
|
|
1811
|
-
Ot.replaceSync(
|
|
1812
|
-
const
|
|
1827
|
+
st.nativeName = "button";
|
|
1828
|
+
let X = st;
|
|
1829
|
+
customElements.get("px-cell-button") || customElements.define("px-cell-button", X);
|
|
1830
|
+
const _e = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.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;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(: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([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){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(: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([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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),: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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),: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(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),: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{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: 768px){.checkbox{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: 1025px){.checkbox{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)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, Ot = new CSSStyleSheet();
|
|
1831
|
+
Ot.replaceSync(_e);
|
|
1832
|
+
const qe = ["", "default", "selectable-tag"], Ht = ["", "error"], nt = class nt extends p {
|
|
1813
1833
|
constructor() {
|
|
1814
1834
|
var t;
|
|
1815
1835
|
super(Ot), this.template = () => `<div class="checkbox">
|
|
@@ -1847,7 +1867,7 @@ const De = ["", "default", "selectable-tag"], jt = ["", "error"], dt = class dt
|
|
|
1847
1867
|
this.updateAttribute(
|
|
1848
1868
|
e,
|
|
1849
1869
|
r,
|
|
1850
|
-
|
|
1870
|
+
Ht,
|
|
1851
1871
|
t
|
|
1852
1872
|
);
|
|
1853
1873
|
break;
|
|
@@ -1855,7 +1875,7 @@ const De = ["", "default", "selectable-tag"], jt = ["", "error"], dt = class dt
|
|
|
1855
1875
|
this.updateAttribute(
|
|
1856
1876
|
e,
|
|
1857
1877
|
r,
|
|
1858
|
-
|
|
1878
|
+
qe,
|
|
1859
1879
|
t
|
|
1860
1880
|
);
|
|
1861
1881
|
break;
|
|
@@ -1867,13 +1887,13 @@ const De = ["", "default", "selectable-tag"], jt = ["", "error"], dt = class dt
|
|
|
1867
1887
|
break;
|
|
1868
1888
|
}
|
|
1869
1889
|
}
|
|
1870
|
-
updateAttribute(t, e, r,
|
|
1871
|
-
var i,
|
|
1890
|
+
updateAttribute(t, e, r, o) {
|
|
1891
|
+
var i, s;
|
|
1872
1892
|
if (!this.checkName(r, e)) {
|
|
1873
|
-
console.error(`${e} is not a valid ${
|
|
1893
|
+
console.error(`${e} is not a valid ${o} value`);
|
|
1874
1894
|
return;
|
|
1875
1895
|
}
|
|
1876
|
-
t !== null && (
|
|
1896
|
+
t !== null && (o === "variant" ? (i = this.$checkbox) == null || i.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$checkbox) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
|
|
1877
1897
|
}
|
|
1878
1898
|
formData() {
|
|
1879
1899
|
if (this.$el.name) {
|
|
@@ -1933,13 +1953,13 @@ const De = ["", "default", "selectable-tag"], jt = ["", "error"], dt = class dt
|
|
|
1933
1953
|
this.$el.checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
1934
1954
|
}
|
|
1935
1955
|
};
|
|
1936
|
-
|
|
1937
|
-
let
|
|
1938
|
-
customElements.get("px-checkbox") || customElements.define("px-checkbox",
|
|
1939
|
-
const
|
|
1940
|
-
|
|
1941
|
-
const
|
|
1942
|
-
class
|
|
1956
|
+
nt.nativeName = "input";
|
|
1957
|
+
let N = nt;
|
|
1958
|
+
customElements.get("px-checkbox") || customElements.define("px-checkbox", N);
|
|
1959
|
+
const jt = new CSSStyleSheet();
|
|
1960
|
+
jt.replaceSync($);
|
|
1961
|
+
const De = ["", "left", "right"];
|
|
1962
|
+
class Pe extends T {
|
|
1943
1963
|
template() {
|
|
1944
1964
|
return `
|
|
1945
1965
|
<div class="cell-checkbox">
|
|
@@ -1954,12 +1974,12 @@ class He extends M {
|
|
|
1954
1974
|
}
|
|
1955
1975
|
constructor() {
|
|
1956
1976
|
var t;
|
|
1957
|
-
super(
|
|
1977
|
+
super(jt), 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}`);
|
|
1958
1978
|
}
|
|
1959
1979
|
connectedCallback() {
|
|
1960
1980
|
if (this.$slotVisual) {
|
|
1961
1981
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
1962
|
-
t &&
|
|
1982
|
+
t && A(t);
|
|
1963
1983
|
}
|
|
1964
1984
|
this.addEventListener("mouseover", () => {
|
|
1965
1985
|
this.$checkbox.setAttribute("hover", "");
|
|
@@ -1973,7 +1993,7 @@ class He extends M {
|
|
|
1973
1993
|
}
|
|
1974
1994
|
}), this.addEventListener("click", (t) => {
|
|
1975
1995
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
1976
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
1996
|
+
}), this.hasAttribute("checked") && (this.checked = !0), y(this);
|
|
1977
1997
|
}
|
|
1978
1998
|
static get observedAttributes() {
|
|
1979
1999
|
return [
|
|
@@ -2006,7 +2026,7 @@ class He extends M {
|
|
|
2006
2026
|
this.$cell.variant = this.variant;
|
|
2007
2027
|
break;
|
|
2008
2028
|
case "inverted":
|
|
2009
|
-
|
|
2029
|
+
M(this.$cell, this.$children, this.inverted, [
|
|
2010
2030
|
this.$checkbox
|
|
2011
2031
|
]);
|
|
2012
2032
|
break;
|
|
@@ -2033,7 +2053,7 @@ class He extends M {
|
|
|
2033
2053
|
break;
|
|
2034
2054
|
case "state":
|
|
2035
2055
|
if (this.$checkbox)
|
|
2036
|
-
if (this.checkName(
|
|
2056
|
+
if (this.checkName(Ht, r))
|
|
2037
2057
|
this.$checkbox.setAttribute("state", r);
|
|
2038
2058
|
else {
|
|
2039
2059
|
console.error(`${r} is not a valid state value`);
|
|
@@ -2066,7 +2086,7 @@ class He extends M {
|
|
|
2066
2086
|
));
|
|
2067
2087
|
}
|
|
2068
2088
|
handleCheckboxPositionChange(t) {
|
|
2069
|
-
if (!this.checkName(
|
|
2089
|
+
if (!this.checkName(De, t)) {
|
|
2070
2090
|
console.error(`${t} is not a valid position value`);
|
|
2071
2091
|
return;
|
|
2072
2092
|
}
|
|
@@ -2225,10 +2245,10 @@ class He extends M {
|
|
|
2225
2245
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
2226
2246
|
}
|
|
2227
2247
|
}
|
|
2228
|
-
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox",
|
|
2229
|
-
const
|
|
2230
|
-
|
|
2231
|
-
class Oe extends
|
|
2248
|
+
customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", Pe);
|
|
2249
|
+
const Ft = new CSSStyleSheet();
|
|
2250
|
+
Ft.replaceSync($);
|
|
2251
|
+
class Oe extends T {
|
|
2232
2252
|
template() {
|
|
2233
2253
|
return `
|
|
2234
2254
|
<div class="cell-switch">
|
|
@@ -2243,12 +2263,12 @@ class Oe extends M {
|
|
|
2243
2263
|
}
|
|
2244
2264
|
constructor() {
|
|
2245
2265
|
var t;
|
|
2246
|
-
super(
|
|
2266
|
+
super(Ft), 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}`);
|
|
2247
2267
|
}
|
|
2248
2268
|
connectedCallback() {
|
|
2249
2269
|
if (this.$slotVisual) {
|
|
2250
2270
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
2251
|
-
t &&
|
|
2271
|
+
t && A(t);
|
|
2252
2272
|
}
|
|
2253
2273
|
this.addEventListener("mouseover", () => {
|
|
2254
2274
|
this.$switch.setAttribute("hover", "");
|
|
@@ -2262,7 +2282,7 @@ class Oe extends M {
|
|
|
2262
2282
|
}
|
|
2263
2283
|
}), this.addEventListener("click", (t) => {
|
|
2264
2284
|
this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
|
|
2265
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
2285
|
+
}), this.hasAttribute("checked") && (this.checked = !0), y(this);
|
|
2266
2286
|
}
|
|
2267
2287
|
static get observedAttributes() {
|
|
2268
2288
|
return [
|
|
@@ -2293,7 +2313,7 @@ class Oe extends M {
|
|
|
2293
2313
|
this.$cell.variant = this.variant;
|
|
2294
2314
|
break;
|
|
2295
2315
|
case "inverted":
|
|
2296
|
-
|
|
2316
|
+
M(this.$cell, this.$children, this.inverted, [
|
|
2297
2317
|
this.$switch
|
|
2298
2318
|
]);
|
|
2299
2319
|
break;
|
|
@@ -2488,11 +2508,11 @@ class Oe extends M {
|
|
|
2488
2508
|
}
|
|
2489
2509
|
}
|
|
2490
2510
|
customElements.get("px-cell-switch") || customElements.define("px-cell-switch", Oe);
|
|
2491
|
-
const je = `: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)}}`, Wt = new CSSStyleSheet();
|
|
2492
|
-
|
|
2493
|
-
const
|
|
2511
|
+
const He = `: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)}}`, Zt = new CSSStyleSheet();
|
|
2512
|
+
Zt.replaceSync(He);
|
|
2513
|
+
const Wt = ["", "default", "selectable-tag"], Ut = ["", "error"], dt = class dt extends p {
|
|
2494
2514
|
constructor() {
|
|
2495
|
-
super(
|
|
2515
|
+
super(Zt), this.template = () => `<div class="radio" tabindex="-1">
|
|
2496
2516
|
<input type="radio" tabindex="-1" />
|
|
2497
2517
|
<label><slot name="before"></slot><slot name="label"></slot></label>
|
|
2498
2518
|
</div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
|
|
@@ -2527,10 +2547,10 @@ const Ut = ["", "default", "selectable-tag"], Gt = ["", "error"], lt = class lt
|
|
|
2527
2547
|
this.setAttribute("inverted", t);
|
|
2528
2548
|
}
|
|
2529
2549
|
};
|
|
2530
|
-
|
|
2531
|
-
let
|
|
2532
|
-
customElements.get("px-radio-base") || customElements.define("px-radio-base",
|
|
2533
|
-
const
|
|
2550
|
+
dt.nativeName = "input";
|
|
2551
|
+
let _ = dt;
|
|
2552
|
+
customElements.get("px-radio-base") || customElements.define("px-radio-base", _);
|
|
2553
|
+
const lt = class lt extends _ {
|
|
2534
2554
|
constructor() {
|
|
2535
2555
|
var t, e;
|
|
2536
2556
|
super(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
|
|
@@ -2553,13 +2573,13 @@ const ct = class ct extends q {
|
|
|
2553
2573
|
if (e !== r)
|
|
2554
2574
|
switch (t) {
|
|
2555
2575
|
case "state":
|
|
2556
|
-
this.updateAttribute(e, r,
|
|
2576
|
+
this.updateAttribute(e, r, Ut, t);
|
|
2557
2577
|
break;
|
|
2558
2578
|
case "variant":
|
|
2559
2579
|
this.updateAttribute(
|
|
2560
2580
|
e,
|
|
2561
2581
|
r,
|
|
2562
|
-
|
|
2582
|
+
Wt,
|
|
2563
2583
|
t
|
|
2564
2584
|
);
|
|
2565
2585
|
break;
|
|
@@ -2582,13 +2602,13 @@ const ct = class ct extends q {
|
|
|
2582
2602
|
formStateRestoreCallback(t) {
|
|
2583
2603
|
this.checked = t;
|
|
2584
2604
|
}
|
|
2585
|
-
updateAttribute(t, e, r,
|
|
2586
|
-
var i,
|
|
2605
|
+
updateAttribute(t, e, r, o) {
|
|
2606
|
+
var i, s;
|
|
2587
2607
|
if (!this.checkName(r, e)) {
|
|
2588
|
-
console.error(`${e} is not a valid ${
|
|
2608
|
+
console.error(`${e} is not a valid ${o} value`);
|
|
2589
2609
|
return;
|
|
2590
2610
|
}
|
|
2591
|
-
t !== null && (
|
|
2611
|
+
t !== null && (o === "variant" ? (i = this.$el.parentElement) == null || i.classList.toggle(t) : this.$el.classList.toggle(t)), e !== null && (o === "variant" ? (s = this.$el.parentElement) == null || s.classList.toggle(e) : this.$el.classList.toggle(e));
|
|
2592
2612
|
}
|
|
2593
2613
|
handleCheckedChange(t) {
|
|
2594
2614
|
var e;
|
|
@@ -2647,12 +2667,12 @@ const ct = class ct extends q {
|
|
|
2647
2667
|
return this.querySelector('px-icon[slot="before"]');
|
|
2648
2668
|
}
|
|
2649
2669
|
};
|
|
2650
|
-
|
|
2651
|
-
let
|
|
2652
|
-
customElements.get("px-radio") || customElements.define("px-radio",
|
|
2653
|
-
const
|
|
2654
|
-
|
|
2655
|
-
const
|
|
2670
|
+
lt.nativeName = "input";
|
|
2671
|
+
let J = lt;
|
|
2672
|
+
customElements.get("px-radio") || customElements.define("px-radio", J);
|
|
2673
|
+
const je = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile))}div[role=radiogroup].selectable-tag{display:inline-flex;flex-direction:row}@media screen and (min-width: 768px){div[role=radiogroup]{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}", Gt = new CSSStyleSheet();
|
|
2674
|
+
Gt.replaceSync(je);
|
|
2675
|
+
const Fe = [
|
|
2656
2676
|
"",
|
|
2657
2677
|
"none",
|
|
2658
2678
|
"2xs",
|
|
@@ -2660,10 +2680,10 @@ const Ze = [
|
|
|
2660
2680
|
"s",
|
|
2661
2681
|
"default",
|
|
2662
2682
|
"l"
|
|
2663
|
-
],
|
|
2683
|
+
], ct = class ct extends p {
|
|
2664
2684
|
constructor() {
|
|
2665
2685
|
var t;
|
|
2666
|
-
super(
|
|
2686
|
+
super(Gt), this.template = () => `<div role="radiogroup">
|
|
2667
2687
|
<slot></slot>
|
|
2668
2688
|
</div>`, this.handleKeyDown = () => {
|
|
2669
2689
|
var r;
|
|
@@ -2677,8 +2697,8 @@ const Ze = [
|
|
|
2677
2697
|
const r = e.target;
|
|
2678
2698
|
if (r.localName === "px-tile-radio" || r.localName === "px-radio" || r.localName === "px-cell-radio") {
|
|
2679
2699
|
this.currentCheckedRadio = r;
|
|
2680
|
-
const
|
|
2681
|
-
|
|
2700
|
+
const o = r.getAttribute("name");
|
|
2701
|
+
o && this.currentCheckedRadio.checked && this.uncheckOtherRadios(o);
|
|
2682
2702
|
}
|
|
2683
2703
|
}, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
2684
2704
|
}
|
|
@@ -2720,22 +2740,22 @@ const Ze = [
|
|
|
2720
2740
|
this.removeEventListener("change", this.handleRadioChange);
|
|
2721
2741
|
}
|
|
2722
2742
|
attributeChangedCallback(t, e, r) {
|
|
2723
|
-
e !== r && (t === "gap" ? this.updateGap(e, r,
|
|
2743
|
+
e !== r && (t === "gap" ? this.updateGap(e, r, Fe) : t === "variant" ? this.updateVariant(e, r, Wt) : this.$radioList.forEach((o) => {
|
|
2724
2744
|
if (r === null)
|
|
2725
|
-
|
|
2745
|
+
o.removeAttribute(t);
|
|
2726
2746
|
else
|
|
2727
2747
|
switch (t) {
|
|
2728
2748
|
case "required":
|
|
2729
2749
|
this.$el.ariaRequired = "true";
|
|
2730
2750
|
break;
|
|
2731
2751
|
case "state":
|
|
2732
|
-
r === "error" && (this.$el.ariaInvalid = "true",
|
|
2752
|
+
r === "error" && (this.$el.ariaInvalid = "true", o.setAttribute(t, r));
|
|
2733
2753
|
break;
|
|
2734
2754
|
case "disabled":
|
|
2735
|
-
this.$el.ariaDisabled = "true",
|
|
2755
|
+
this.$el.ariaDisabled = "true", o.setAttribute(t, r);
|
|
2736
2756
|
break;
|
|
2737
2757
|
default:
|
|
2738
|
-
|
|
2758
|
+
o.setAttribute(t, r);
|
|
2739
2759
|
break;
|
|
2740
2760
|
}
|
|
2741
2761
|
}));
|
|
@@ -2752,8 +2772,8 @@ const Ze = [
|
|
|
2752
2772
|
console.error(`${e} is not a valid variant value`);
|
|
2753
2773
|
return;
|
|
2754
2774
|
}
|
|
2755
|
-
t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((
|
|
2756
|
-
|
|
2775
|
+
t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((o) => {
|
|
2776
|
+
o.setAttribute("variant", e);
|
|
2757
2777
|
}));
|
|
2758
2778
|
}
|
|
2759
2779
|
updateGap(t, e, r) {
|
|
@@ -2808,13 +2828,13 @@ const Ze = [
|
|
|
2808
2828
|
this.setAttribute("inverted", t);
|
|
2809
2829
|
}
|
|
2810
2830
|
};
|
|
2811
|
-
|
|
2812
|
-
let
|
|
2813
|
-
customElements.get("px-radio-group") || customElements.define("px-radio-group",
|
|
2814
|
-
const
|
|
2815
|
-
|
|
2816
|
-
const
|
|
2817
|
-
class
|
|
2831
|
+
ct.nativeName = "div";
|
|
2832
|
+
let Q = ct;
|
|
2833
|
+
customElements.get("px-radio-group") || customElements.define("px-radio-group", Q);
|
|
2834
|
+
const Kt = new CSSStyleSheet();
|
|
2835
|
+
Kt.replaceSync($);
|
|
2836
|
+
const Ze = ["", "left", "right"];
|
|
2837
|
+
class We extends T {
|
|
2818
2838
|
template() {
|
|
2819
2839
|
return `
|
|
2820
2840
|
<div class="cell-radio">
|
|
@@ -2829,12 +2849,12 @@ class Ue extends M {
|
|
|
2829
2849
|
}
|
|
2830
2850
|
constructor() {
|
|
2831
2851
|
var t, e;
|
|
2832
|
-
super(
|
|
2852
|
+
super(Kt), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
|
|
2833
2853
|
}
|
|
2834
2854
|
connectedCallback() {
|
|
2835
2855
|
if (this.$slotVisual) {
|
|
2836
2856
|
const t = this.querySelector('px-img[slot="visual"]');
|
|
2837
|
-
t &&
|
|
2857
|
+
t && A(t);
|
|
2838
2858
|
}
|
|
2839
2859
|
this.addEventListener("mouseover", () => {
|
|
2840
2860
|
this.$radio.setAttribute("hover", "");
|
|
@@ -2848,7 +2868,7 @@ class Ue extends M {
|
|
|
2848
2868
|
}
|
|
2849
2869
|
}), this.addEventListener("click", (t) => {
|
|
2850
2870
|
this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
|
|
2851
|
-
}), this.hasAttribute("checked") && (this.checked = !0),
|
|
2871
|
+
}), this.hasAttribute("checked") && (this.checked = !0), y(this);
|
|
2852
2872
|
}
|
|
2853
2873
|
static get observedAttributes() {
|
|
2854
2874
|
return [
|
|
@@ -2881,7 +2901,7 @@ class Ue extends M {
|
|
|
2881
2901
|
this.$cell.variant = this.variant;
|
|
2882
2902
|
break;
|
|
2883
2903
|
case "inverted":
|
|
2884
|
-
|
|
2904
|
+
M(this.$cell, this.$children, this.inverted, [
|
|
2885
2905
|
this.$radio
|
|
2886
2906
|
]);
|
|
2887
2907
|
break;
|
|
@@ -2908,7 +2928,7 @@ class Ue extends M {
|
|
|
2908
2928
|
break;
|
|
2909
2929
|
case "state":
|
|
2910
2930
|
if (this.$radio)
|
|
2911
|
-
if (this.checkName(
|
|
2931
|
+
if (this.checkName(Ut, r))
|
|
2912
2932
|
this.$radio.setAttribute("state", r);
|
|
2913
2933
|
else {
|
|
2914
2934
|
console.error(`${r} is not a valid state value`);
|
|
@@ -2941,7 +2961,7 @@ class Ue extends M {
|
|
|
2941
2961
|
));
|
|
2942
2962
|
}
|
|
2943
2963
|
handleRadioPositionChange(t) {
|
|
2944
|
-
if (!this.checkName(
|
|
2964
|
+
if (!this.checkName(Ze, t)) {
|
|
2945
2965
|
console.error(`${t} is not a valid position value`);
|
|
2946
2966
|
return;
|
|
2947
2967
|
}
|
|
@@ -3100,15 +3120,15 @@ class Ue extends M {
|
|
|
3100
3120
|
t ? this.setAttribute("compact", "") : this.removeAttribute("compact");
|
|
3101
3121
|
}
|
|
3102
3122
|
}
|
|
3103
|
-
customElements.get("px-cell-radio") || customElements.define("px-cell-radio",
|
|
3104
|
-
const
|
|
3105
|
-
|
|
3106
|
-
class
|
|
3123
|
+
customElements.get("px-cell-radio") || customElements.define("px-cell-radio", We);
|
|
3124
|
+
const Ue = ":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)}}", Yt = new CSSStyleSheet();
|
|
3125
|
+
Yt.replaceSync(Ue);
|
|
3126
|
+
class Ge extends T {
|
|
3107
3127
|
constructor() {
|
|
3108
3128
|
var t;
|
|
3109
3129
|
super(), this.template = () => `${this.getAttribute("href") ? `<a href="${this.getAttribute("href")}" data-label="${this.textContent}">
|
|
3110
3130
|
<slot></slot>
|
|
3111
|
-
</a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
3131
|
+
</a>` : `<button data-label="${this.textContent}"><slot></slot></button>`}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Yt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
|
|
3112
3132
|
}
|
|
3113
3133
|
static get observedAttributes() {
|
|
3114
3134
|
return ["for", "href"];
|
|
@@ -3129,7 +3149,7 @@ class Ke extends M {
|
|
|
3129
3149
|
super.attributeChangedCallback(t, e, r), t === "href" && this.$a && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$button && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
|
|
3130
3150
|
}
|
|
3131
3151
|
setupButtonA11y() {
|
|
3132
|
-
this.$button.
|
|
3152
|
+
this.$button.ariaExpanded = "false", this.$button.setAttribute("aria-controls", this.for || "");
|
|
3133
3153
|
}
|
|
3134
3154
|
updateDataLabel() {
|
|
3135
3155
|
this.$button && this.$button.setAttribute("data-label", this.textContent), this.$a && this.$a.setAttribute("data-label", this.textContent);
|
|
@@ -3146,7 +3166,7 @@ class Ke extends M {
|
|
|
3146
3166
|
set checked(t) {
|
|
3147
3167
|
if (typeof t != "boolean")
|
|
3148
3168
|
throw new Error("checked must be a boolean");
|
|
3149
|
-
this.$button && (this.$button.
|
|
3169
|
+
this.$button && (this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for));
|
|
3150
3170
|
}
|
|
3151
3171
|
get $button() {
|
|
3152
3172
|
return this.shadowRoot.querySelector("button");
|
|
@@ -3155,12 +3175,12 @@ class Ke extends M {
|
|
|
3155
3175
|
return this.shadowRoot.querySelector("a");
|
|
3156
3176
|
}
|
|
3157
3177
|
}
|
|
3158
|
-
customElements.get("px-header-item") || customElements.define("px-header-item",
|
|
3159
|
-
const
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
const
|
|
3178
|
+
customElements.get("px-header-item") || customElements.define("px-header-item", Ge);
|
|
3179
|
+
const Ke = ".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)}@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)}}@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-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)}", Xt = new CSSStyleSheet(), Nt = new CSSStyleSheet(), Jt = new CSSStyleSheet();
|
|
3180
|
+
Xt.replaceSync(St);
|
|
3181
|
+
Nt.replaceSync(wt);
|
|
3182
|
+
Jt.replaceSync(Ke);
|
|
3183
|
+
const Ye = [...ve, "link-m", "link-s"], Xe = [
|
|
3164
3184
|
"link",
|
|
3165
3185
|
"no-style",
|
|
3166
3186
|
"skip-link",
|
|
@@ -3168,9 +3188,9 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3168
3188
|
"btn-secondary",
|
|
3169
3189
|
"btn-tertiary",
|
|
3170
3190
|
"icon-link"
|
|
3171
|
-
],
|
|
3191
|
+
], Ne = ["", "default", "alternative"], bt = class bt extends p {
|
|
3172
3192
|
constructor() {
|
|
3173
|
-
super(Nt, Jt
|
|
3193
|
+
super(Xt, Nt, Jt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
3174
3194
|
const t = document.createElement(this.nativeName);
|
|
3175
3195
|
t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
3176
3196
|
}
|
|
@@ -3197,7 +3217,7 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3197
3217
|
];
|
|
3198
3218
|
}
|
|
3199
3219
|
connectedCallback() {
|
|
3200
|
-
super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after),
|
|
3220
|
+
super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), $t(this, this.$el, !1);
|
|
3201
3221
|
}
|
|
3202
3222
|
attributeChangedCallback(t, e, r) {
|
|
3203
3223
|
if (e !== r)
|
|
@@ -3213,7 +3233,7 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3213
3233
|
case "shape--tablet":
|
|
3214
3234
|
case "shape--laptop":
|
|
3215
3235
|
case "shape--desktop":
|
|
3216
|
-
this.updateShape(t, r,
|
|
3236
|
+
this.updateShape(t, r, Ne);
|
|
3217
3237
|
break;
|
|
3218
3238
|
case "extended":
|
|
3219
3239
|
case "extended--mobile":
|
|
@@ -3227,14 +3247,14 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3227
3247
|
t,
|
|
3228
3248
|
e,
|
|
3229
3249
|
r,
|
|
3230
|
-
|
|
3250
|
+
Ye
|
|
3231
3251
|
);
|
|
3232
3252
|
break;
|
|
3233
3253
|
case "color":
|
|
3234
|
-
this.updateTypography(t, e, r,
|
|
3254
|
+
this.updateTypography(t, e, r, fe);
|
|
3235
3255
|
break;
|
|
3236
3256
|
case "font-weight":
|
|
3237
|
-
this.updateTypography(t, e, r,
|
|
3257
|
+
this.updateTypography(t, e, r, xe);
|
|
3238
3258
|
break;
|
|
3239
3259
|
case "title":
|
|
3240
3260
|
r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
|
|
@@ -3259,17 +3279,17 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3259
3279
|
this.$el.classList.toggle(t);
|
|
3260
3280
|
}
|
|
3261
3281
|
updateVariant(t, e) {
|
|
3262
|
-
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(
|
|
3282
|
+
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(Xe, e) || console.error(`Bad "variant" value for ${e}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
3263
3283
|
}
|
|
3264
3284
|
updateShape(t, e, r) {
|
|
3265
|
-
if (!
|
|
3285
|
+
if (!k(r, e)) {
|
|
3266
3286
|
console.error(`${e} is not a valid shape value`);
|
|
3267
3287
|
return;
|
|
3268
3288
|
}
|
|
3269
|
-
e !== null && e !== "" &&
|
|
3289
|
+
e !== null && e !== "" && this.$el.setAttribute(t, e);
|
|
3270
3290
|
}
|
|
3271
|
-
updateTypography(t, e, r,
|
|
3272
|
-
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(
|
|
3291
|
+
updateTypography(t, e, r, o) {
|
|
3292
|
+
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value: ${r}`);
|
|
3273
3293
|
}
|
|
3274
3294
|
updateExtended(t, e) {
|
|
3275
3295
|
e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
|
|
@@ -3388,10 +3408,10 @@ const Xe = [...xe, "link-m", "link-s"], Ne = [
|
|
|
3388
3408
|
t ? this.setAttribute("title", t) : this.removeAttribute("title");
|
|
3389
3409
|
}
|
|
3390
3410
|
};
|
|
3391
|
-
|
|
3392
|
-
let
|
|
3393
|
-
customElements.get("px-a") || customElements.define("px-a",
|
|
3394
|
-
class
|
|
3411
|
+
bt.nativeName = "a";
|
|
3412
|
+
let V = bt;
|
|
3413
|
+
customElements.get("px-a") || customElements.define("px-a", V);
|
|
3414
|
+
class Je extends HTMLElement {
|
|
3395
3415
|
constructor() {
|
|
3396
3416
|
super(), this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
|
|
3397
3417
|
<slot></slot>
|
|
@@ -3402,135 +3422,135 @@ class Qe extends HTMLElement {
|
|
|
3402
3422
|
});
|
|
3403
3423
|
}
|
|
3404
3424
|
}
|
|
3405
|
-
customElements.get("px-mdd-a") || customElements.define("px-mdd-a",
|
|
3406
|
-
const
|
|
3407
|
-
function
|
|
3408
|
-
var t = typeof
|
|
3409
|
-
return
|
|
3425
|
+
customElements.get("px-mdd-a") || customElements.define("px-mdd-a", Je);
|
|
3426
|
+
const Qe = "#header__navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#header__dropdown-zone--desktop{display:none}#header__primary-navigation{display:none;margin:0;padding:0}#header__panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#header__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){#header__dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#header__primary-navigation{display:block}#header__panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#header__dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#header__dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
|
|
3427
|
+
function q(a) {
|
|
3428
|
+
var t = typeof a;
|
|
3429
|
+
return a != null && (t == "object" || t == "function");
|
|
3410
3430
|
}
|
|
3411
|
-
var
|
|
3412
|
-
return
|
|
3413
|
-
},
|
|
3414
|
-
function
|
|
3415
|
-
for (var t =
|
|
3431
|
+
var Ve = typeof global == "object" && global && global.Object === Object && global, tr = typeof self == "object" && self && self.Object === Object && self, Qt = Ve || tr || Function("return this")(), Z = function() {
|
|
3432
|
+
return Qt.Date.now();
|
|
3433
|
+
}, er = /\s/;
|
|
3434
|
+
function rr(a) {
|
|
3435
|
+
for (var t = a.length; t-- && er.test(a.charAt(t)); )
|
|
3416
3436
|
;
|
|
3417
3437
|
return t;
|
|
3418
3438
|
}
|
|
3419
3439
|
var ar = /^\s+/;
|
|
3420
|
-
function
|
|
3421
|
-
return
|
|
3440
|
+
function or(a) {
|
|
3441
|
+
return a && a.slice(0, rr(a) + 1).replace(ar, "");
|
|
3422
3442
|
}
|
|
3423
|
-
var
|
|
3424
|
-
function
|
|
3425
|
-
var t =
|
|
3443
|
+
var D = Qt.Symbol, Vt = Object.prototype, ir = Vt.hasOwnProperty, sr = Vt.toString, z = D ? D.toStringTag : void 0;
|
|
3444
|
+
function nr(a) {
|
|
3445
|
+
var t = ir.call(a, z), e = a[z];
|
|
3426
3446
|
try {
|
|
3427
|
-
|
|
3447
|
+
a[z] = void 0;
|
|
3428
3448
|
var r = !0;
|
|
3429
3449
|
} catch {
|
|
3430
3450
|
}
|
|
3431
|
-
var
|
|
3432
|
-
return r && (t ?
|
|
3451
|
+
var o = sr.call(a);
|
|
3452
|
+
return r && (t ? a[z] = e : delete a[z]), o;
|
|
3433
3453
|
}
|
|
3434
|
-
var
|
|
3435
|
-
function
|
|
3436
|
-
return
|
|
3454
|
+
var dr = Object.prototype, lr = dr.toString;
|
|
3455
|
+
function cr(a) {
|
|
3456
|
+
return lr.call(a);
|
|
3437
3457
|
}
|
|
3438
|
-
var
|
|
3439
|
-
function
|
|
3440
|
-
return
|
|
3458
|
+
var br = "[object Null]", pr = "[object Undefined]", mt = D ? D.toStringTag : void 0;
|
|
3459
|
+
function hr(a) {
|
|
3460
|
+
return a == null ? a === void 0 ? pr : br : mt && mt in Object(a) ? nr(a) : cr(a);
|
|
3441
3461
|
}
|
|
3442
|
-
function
|
|
3443
|
-
return
|
|
3462
|
+
function ur(a) {
|
|
3463
|
+
return a != null && typeof a == "object";
|
|
3444
3464
|
}
|
|
3445
|
-
var
|
|
3446
|
-
function
|
|
3447
|
-
return typeof
|
|
3465
|
+
var gr = "[object Symbol]";
|
|
3466
|
+
function vr(a) {
|
|
3467
|
+
return typeof a == "symbol" || ur(a) && hr(a) == gr;
|
|
3448
3468
|
}
|
|
3449
|
-
var
|
|
3450
|
-
function
|
|
3451
|
-
if (typeof
|
|
3452
|
-
return
|
|
3453
|
-
if (
|
|
3454
|
-
return
|
|
3455
|
-
if (
|
|
3456
|
-
var t = typeof
|
|
3457
|
-
|
|
3458
|
-
}
|
|
3459
|
-
if (typeof
|
|
3460
|
-
return
|
|
3461
|
-
|
|
3462
|
-
var e =
|
|
3463
|
-
return e ||
|
|
3469
|
+
var kt = NaN, xr = /^[-+]0x[0-9a-f]+$/i, fr = /^0b[01]+$/i, mr = /^0o[0-7]+$/i, kr = parseInt;
|
|
3470
|
+
function At(a) {
|
|
3471
|
+
if (typeof a == "number")
|
|
3472
|
+
return a;
|
|
3473
|
+
if (vr(a))
|
|
3474
|
+
return kt;
|
|
3475
|
+
if (q(a)) {
|
|
3476
|
+
var t = typeof a.valueOf == "function" ? a.valueOf() : a;
|
|
3477
|
+
a = q(t) ? t + "" : t;
|
|
3478
|
+
}
|
|
3479
|
+
if (typeof a != "string")
|
|
3480
|
+
return a === 0 ? a : +a;
|
|
3481
|
+
a = or(a);
|
|
3482
|
+
var e = fr.test(a);
|
|
3483
|
+
return e || mr.test(a) ? kr(a.slice(2), e ? 2 : 8) : xr.test(a) ? kt : +a;
|
|
3464
3484
|
}
|
|
3465
|
-
var
|
|
3466
|
-
function
|
|
3467
|
-
var r,
|
|
3468
|
-
if (typeof
|
|
3469
|
-
throw new TypeError(
|
|
3470
|
-
t =
|
|
3485
|
+
var Ar = "Expected a function", yr = Math.max, $r = Math.min;
|
|
3486
|
+
function Cr(a, t, e) {
|
|
3487
|
+
var r, o, i, s, d, g, C = 0, pt = !1, w = !1, P = !0;
|
|
3488
|
+
if (typeof a != "function")
|
|
3489
|
+
throw new TypeError(Ar);
|
|
3490
|
+
t = At(t) || 0, q(e) && (pt = !!e.leading, w = "maxWait" in e, i = w ? yr(At(e.maxWait) || 0, t) : i, P = "trailing" in e ? !!e.trailing : P);
|
|
3471
3491
|
function O(l) {
|
|
3472
|
-
var h = r,
|
|
3473
|
-
return r =
|
|
3492
|
+
var h = r, S = o;
|
|
3493
|
+
return r = o = void 0, C = l, s = a.apply(S, h), s;
|
|
3494
|
+
}
|
|
3495
|
+
function oe(l) {
|
|
3496
|
+
return C = l, d = setTimeout(B, t), pt ? O(l) : s;
|
|
3474
3497
|
}
|
|
3475
3498
|
function ie(l) {
|
|
3476
|
-
|
|
3499
|
+
var h = l - g, S = l - C, gt = t - h;
|
|
3500
|
+
return w ? $r(gt, i - S) : gt;
|
|
3477
3501
|
}
|
|
3478
|
-
function
|
|
3479
|
-
var h = l -
|
|
3480
|
-
return
|
|
3502
|
+
function ht(l) {
|
|
3503
|
+
var h = l - g, S = l - C;
|
|
3504
|
+
return g === void 0 || h >= t || h < 0 || w && S >= i;
|
|
3481
3505
|
}
|
|
3482
|
-
function
|
|
3483
|
-
var
|
|
3484
|
-
|
|
3506
|
+
function B() {
|
|
3507
|
+
var l = Z();
|
|
3508
|
+
if (ht(l))
|
|
3509
|
+
return ut(l);
|
|
3510
|
+
d = setTimeout(B, ie(l));
|
|
3485
3511
|
}
|
|
3486
|
-
function
|
|
3487
|
-
|
|
3488
|
-
if (ut(l))
|
|
3489
|
-
return gt(l);
|
|
3490
|
-
d = setTimeout(R, se(l));
|
|
3512
|
+
function ut(l) {
|
|
3513
|
+
return d = void 0, P && r ? O(l) : (r = o = void 0, s);
|
|
3491
3514
|
}
|
|
3492
|
-
function
|
|
3493
|
-
|
|
3515
|
+
function se() {
|
|
3516
|
+
d !== void 0 && clearTimeout(d), C = 0, r = g = o = d = void 0;
|
|
3494
3517
|
}
|
|
3495
3518
|
function ne() {
|
|
3496
|
-
d
|
|
3497
|
-
}
|
|
3498
|
-
function de() {
|
|
3499
|
-
return d === void 0 ? n : gt(W());
|
|
3519
|
+
return d === void 0 ? s : ut(Z());
|
|
3500
3520
|
}
|
|
3501
|
-
function
|
|
3502
|
-
var l =
|
|
3503
|
-
if (r = arguments,
|
|
3521
|
+
function H() {
|
|
3522
|
+
var l = Z(), h = ht(l);
|
|
3523
|
+
if (r = arguments, o = this, g = l, h) {
|
|
3504
3524
|
if (d === void 0)
|
|
3505
|
-
return
|
|
3506
|
-
if (
|
|
3507
|
-
return clearTimeout(d), d = setTimeout(
|
|
3525
|
+
return oe(g);
|
|
3526
|
+
if (w)
|
|
3527
|
+
return clearTimeout(d), d = setTimeout(B, t), O(g);
|
|
3508
3528
|
}
|
|
3509
|
-
return d === void 0 && (d = setTimeout(
|
|
3529
|
+
return d === void 0 && (d = setTimeout(B, t)), s;
|
|
3510
3530
|
}
|
|
3511
|
-
return
|
|
3531
|
+
return H.cancel = se, H.flush = ne, H;
|
|
3512
3532
|
}
|
|
3513
|
-
var
|
|
3514
|
-
function
|
|
3515
|
-
var r = !0,
|
|
3516
|
-
if (typeof
|
|
3517
|
-
throw new TypeError(
|
|
3518
|
-
return
|
|
3533
|
+
var wr = "Expected a function";
|
|
3534
|
+
function Sr(a, t, e) {
|
|
3535
|
+
var r = !0, o = !0;
|
|
3536
|
+
if (typeof a != "function")
|
|
3537
|
+
throw new TypeError(wr);
|
|
3538
|
+
return q(e) && (r = "leading" in e ? !!e.leading : r, o = "trailing" in e ? !!e.trailing : o), Cr(a, t, {
|
|
3519
3539
|
leading: r,
|
|
3520
3540
|
maxWait: t,
|
|
3521
|
-
trailing:
|
|
3541
|
+
trailing: o
|
|
3522
3542
|
});
|
|
3523
3543
|
}
|
|
3524
|
-
const
|
|
3525
|
-
|
|
3526
|
-
const
|
|
3527
|
-
var
|
|
3528
|
-
class
|
|
3544
|
+
const te = new CSSStyleSheet();
|
|
3545
|
+
te.replaceSync(Qe);
|
|
3546
|
+
const W = "Menu";
|
|
3547
|
+
var L, n, ee, re, tt, R, I, E, et, m, ae;
|
|
3548
|
+
class zr extends T {
|
|
3529
3549
|
constructor() {
|
|
3530
3550
|
var e;
|
|
3531
|
-
super(
|
|
3532
|
-
|
|
3533
|
-
|
|
3551
|
+
super(te);
|
|
3552
|
+
F(this, n);
|
|
3553
|
+
F(this, L);
|
|
3534
3554
|
this.template = `
|
|
3535
3555
|
<div>
|
|
3536
3556
|
<header>
|
|
@@ -3569,10 +3589,10 @@ class Er extends M {
|
|
|
3569
3589
|
<div id="header__backdrop-filter"></div>
|
|
3570
3590
|
<slot name="main"></slot>
|
|
3571
3591
|
</div>
|
|
3572
|
-
`,
|
|
3573
|
-
|
|
3592
|
+
`, xt(this, L, () => {
|
|
3593
|
+
b(this, n, re).call(this), this.querySelector(
|
|
3574
3594
|
'px-mdd[name="__lavender_mobile_menu"]'
|
|
3575
|
-
).getAttribute("hidden") === null && window.innerWidth >= 768 && (
|
|
3595
|
+
).getAttribute("hidden") === null && window.innerWidth >= 768 && b(this, n, I).call(this);
|
|
3576
3596
|
}), 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");
|
|
3577
3597
|
}
|
|
3578
3598
|
connectedCallback() {
|
|
@@ -3580,29 +3600,31 @@ class Er extends M {
|
|
|
3580
3600
|
const r = e.target.closest(
|
|
3581
3601
|
"px-header-item"
|
|
3582
3602
|
);
|
|
3583
|
-
r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block",
|
|
3584
|
-
|
|
3585
|
-
}),
|
|
3586
|
-
}), this.shadowRoot.addEventListener("click", (e) => {
|
|
3587
|
-
e.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.$burgerMenu.setAttribute("aria-expanded", "true"), c(this, s, I).call(this, "__lavender_mobile_menu"), c(this, s, g).call(this, !1));
|
|
3603
|
+
r && r.for && (e.target.checked === !1 ? (this.$backdropFilter.style.display = "block", c(this, n, E).forEach((o) => {
|
|
3604
|
+
o.checked = !1;
|
|
3605
|
+
}), r.checked = !0, b(this, n, R).call(this, e.target.for)) : b(this, n, I).call(this));
|
|
3588
3606
|
}), this.addEventListener("section-item-click", (e) => {
|
|
3589
|
-
this.$backdropFilter.style.display = "block",
|
|
3590
|
-
|
|
3607
|
+
this.$backdropFilter.style.display = "block", c(this, n, E).forEach((o) => {
|
|
3608
|
+
o.checked = !1;
|
|
3591
3609
|
}), e.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
|
|
3592
3610
|
`px-header-item[for="${e.detail.for}"]`
|
|
3593
|
-
).checked = !0),
|
|
3611
|
+
).checked = !0), b(this, n, R).call(this, e.detail.for);
|
|
3612
|
+
}), this.shadowRoot.addEventListener("click", (e) => {
|
|
3613
|
+
e.target.closest("px-button-icon") && (this.$burgerMenu.setAttribute("aria-expanded", "true"), b(this, n, R).call(this, "__lavender_mobile_menu"));
|
|
3594
3614
|
}), this.addEventListener("close-panel", () => {
|
|
3595
|
-
|
|
3615
|
+
b(this, n, I).call(this), this.$burgerMenu.setAttribute("aria-expanded", "false");
|
|
3596
3616
|
}), this.addEventListener(
|
|
3597
3617
|
"close-panel-from-dialog",
|
|
3598
3618
|
(e) => {
|
|
3599
|
-
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3619
|
+
this.dispatchEvent(new CustomEvent("close-panel")), e.detail.clientY < c(this, n, et).getBoundingClientRect().bottom && requestAnimationFrame(() => {
|
|
3620
|
+
var r;
|
|
3621
|
+
(r = document.elementFromPoint(
|
|
3622
|
+
e.detail.clientX,
|
|
3623
|
+
e.detail.clientY
|
|
3624
|
+
)) == null || r.click();
|
|
3625
|
+
});
|
|
3604
3626
|
}
|
|
3605
|
-
),
|
|
3627
|
+
), b(this, n, ee).call(this), this.$targetGroupDropdown && this.$userLanguageDropdown ? b(this, n, tt).call(this) : this.$dropDownZoneDesktop.style.display = "none", this.primaryNavigationAriaLabel || this.setAttribute("primary-navigation-aria-label", W), window.addEventListener("resize", Sr(c(this, L), 200));
|
|
3606
3628
|
}
|
|
3607
3629
|
static get observedAttributes() {
|
|
3608
3630
|
return [
|
|
@@ -3612,23 +3634,23 @@ class Er extends M {
|
|
|
3612
3634
|
"back-to-menu-label"
|
|
3613
3635
|
];
|
|
3614
3636
|
}
|
|
3615
|
-
attributeChangedCallback(e, r,
|
|
3616
|
-
if (r !==
|
|
3637
|
+
attributeChangedCallback(e, r, o) {
|
|
3638
|
+
if (r !== o)
|
|
3617
3639
|
switch (e) {
|
|
3618
3640
|
case "close-button-aria-label":
|
|
3619
|
-
|
|
3620
|
-
i.setAttribute("close-button-aria-label",
|
|
3641
|
+
c(this, n, m).forEach((i) => {
|
|
3642
|
+
i.setAttribute("close-button-aria-label", o);
|
|
3621
3643
|
});
|
|
3622
3644
|
break;
|
|
3623
3645
|
case "burger-menu-aria-label":
|
|
3624
|
-
this.$burgerMenu.setAttribute("aria-label",
|
|
3646
|
+
this.$burgerMenu.setAttribute("aria-label", o);
|
|
3625
3647
|
break;
|
|
3626
3648
|
case "primary-navigation-aria-label":
|
|
3627
|
-
this.$primaryNavigation.setAttribute("aria-label",
|
|
3649
|
+
this.$primaryNavigation.setAttribute("aria-label", o);
|
|
3628
3650
|
break;
|
|
3629
3651
|
case "back-to-menu-label":
|
|
3630
|
-
|
|
3631
|
-
i.setAttribute("back-to-menu-label",
|
|
3652
|
+
c(this, n, m).forEach((i) => {
|
|
3653
|
+
i.setAttribute("back-to-menu-label", o);
|
|
3632
3654
|
});
|
|
3633
3655
|
break;
|
|
3634
3656
|
}
|
|
@@ -3683,32 +3705,32 @@ class Er extends M {
|
|
|
3683
3705
|
e ? this.setAttribute("primary-navigation-aria-label", e) : this.removeAttribute("primary-navigation-aria-label");
|
|
3684
3706
|
}
|
|
3685
3707
|
}
|
|
3686
|
-
|
|
3687
|
-
var r,
|
|
3708
|
+
L = new WeakMap(), n = new WeakSet(), ee = function() {
|
|
3709
|
+
var r, o;
|
|
3688
3710
|
const e = `
|
|
3689
3711
|
<px-mdd name="__lavender_mobile_menu" hidden--tablet hidden--laptop hidden--desktop>
|
|
3690
|
-
<span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel :
|
|
3712
|
+
<span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel : W}</span>
|
|
3691
3713
|
<px-mdd-section title-hidden>
|
|
3692
|
-
<span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel :
|
|
3693
|
-
${[...
|
|
3694
|
-
const
|
|
3695
|
-
return
|
|
3714
|
+
<span slot="title">${this.primaryNavigationAriaLabel ? this.primaryNavigationAriaLabel : W}</span>
|
|
3715
|
+
${[...c(this, n, E)].map((i) => {
|
|
3716
|
+
const s = i.getAttribute("for"), d = i.getAttribute("href");
|
|
3717
|
+
return s ? `<px-mdd-section-item for="${s}">${i.innerText}</px-mdd-section-item>` : d ? `<px-mdd-section-item href="${d}">${i.innerText}</px-mdd-section-item>` : "";
|
|
3696
3718
|
}).join("")}
|
|
3697
|
-
${[...
|
|
3719
|
+
${[...c(this, n, ae)].filter((i) => !i.hasAttribute("promoted")).map(
|
|
3698
3720
|
(i) => `<px-mdd-a href="${i.getAttribute("href")}" slot="footer">${i.innerText}</px-mdd-a>`
|
|
3699
3721
|
).join("")}
|
|
3700
3722
|
</px-mdd-section>
|
|
3701
|
-
${
|
|
3723
|
+
${b(this, n, tt).call(this)}
|
|
3702
3724
|
</px-mdd>
|
|
3703
3725
|
`;
|
|
3704
|
-
|
|
3705
|
-
},
|
|
3726
|
+
c(this, n, m).length > 0 ? (r = c(this, n, m).item(0)) == null || r.insertAdjacentHTML("beforebegin", e) : (o = this.$slotMain) == null || o.insertAdjacentHTML("beforebegin", e);
|
|
3727
|
+
}, re = function() {
|
|
3706
3728
|
this.querySelectorAll("px-mdd").forEach((r) => {
|
|
3707
3729
|
r.dialogOffsetTop = `${this.getBoundingClientRect().bottom}px`;
|
|
3708
3730
|
});
|
|
3709
|
-
},
|
|
3710
|
-
var
|
|
3711
|
-
const e = (
|
|
3731
|
+
}, tt = function() {
|
|
3732
|
+
var o, i;
|
|
3733
|
+
const e = (o = this.$targetGroupDropdown) == null ? void 0 : o.cloneNode(
|
|
3712
3734
|
!0
|
|
3713
3735
|
);
|
|
3714
3736
|
e == null || e.removeAttribute("id"), e == null || e.setAttribute("slot", "mdd-footer"), e == null || e.setAttribute("grow", "3"), e == null || e.setAttribute("anchoralignment", "top-left");
|
|
@@ -3716,38 +3738,27 @@ T = new WeakMap(), s = new WeakSet(), re = function() {
|
|
|
3716
3738
|
!0
|
|
3717
3739
|
);
|
|
3718
3740
|
return r == null || r.removeAttribute("id"), r == null || r.setAttribute("slot", "mdd-footer"), r == null || r.setAttribute("grow", "1"), r == null || r.setAttribute("anchoralignment", "top-right"), `${(e == null ? void 0 : e.outerHTML) ?? ""}${(r == null ? void 0 : r.outerHTML) ?? ""}`;
|
|
3719
|
-
},
|
|
3720
|
-
this
|
|
3721
|
-
(r)
|
|
3722
|
-
if (e) {
|
|
3723
|
-
r.removeAttribute("tabindex");
|
|
3724
|
-
return;
|
|
3725
|
-
}
|
|
3726
|
-
r.setAttribute("tabindex", "-1");
|
|
3727
|
-
}
|
|
3728
|
-
);
|
|
3729
|
-
}, I = function(e) {
|
|
3730
|
-
b(this, s, k).forEach((r) => {
|
|
3731
|
-
r.name === e && r.hidden && (r.dialogOffsetTop = `${b(this, s, rt).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, e !== "__lavender_mobile_menu" && (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);
|
|
3741
|
+
}, R = function(e) {
|
|
3742
|
+
c(this, n, m).forEach((r) => {
|
|
3743
|
+
r.name === e && r.hidden && (r.dialogOffsetTop = `${c(this, n, et).getBoundingClientRect().bottom}px`, r.hidden = !r.hidden, e !== "__lavender_mobile_menu" && (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);
|
|
3732
3744
|
});
|
|
3733
|
-
},
|
|
3734
|
-
this.$backdropFilter.style.display = "none",
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
}), b(this, s, k).forEach((e) => {
|
|
3745
|
+
}, I = function() {
|
|
3746
|
+
this.$backdropFilter.style.display = "none", c(this, n, E).forEach((e) => {
|
|
3747
|
+
e.checked = !1;
|
|
3748
|
+
}), c(this, n, m).forEach((e) => {
|
|
3738
3749
|
e.hidden = !0;
|
|
3739
|
-
}),
|
|
3740
|
-
},
|
|
3750
|
+
}), document.body.style.overflow = "auto";
|
|
3751
|
+
}, E = function() {
|
|
3741
3752
|
return this.querySelectorAll("px-header-item");
|
|
3742
|
-
},
|
|
3753
|
+
}, et = function() {
|
|
3743
3754
|
return this.shadowRoot.querySelector("header");
|
|
3744
|
-
},
|
|
3755
|
+
}, m = function() {
|
|
3745
3756
|
return this.querySelectorAll("px-mdd");
|
|
3746
3757
|
}, ae = function() {
|
|
3747
3758
|
return this.querySelectorAll("px-action-link");
|
|
3748
3759
|
};
|
|
3749
|
-
customElements.get("px-header") || customElements.define("px-header",
|
|
3760
|
+
customElements.get("px-header") || customElements.define("px-header", zr);
|
|
3750
3761
|
export {
|
|
3751
|
-
|
|
3752
|
-
|
|
3762
|
+
zr as Header,
|
|
3763
|
+
Ge as HeaderItem
|
|
3753
3764
|
};
|