@proximus/lavender-header 1.0.0-alpha.9 → 1.0.0

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.
Files changed (8) hide show
  1. package/dist/Header.d.ts +35 -0
  2. package/dist/HeaderItem.d.ts +19 -0
  3. package/dist/Link.d.ts +5 -0
  4. package/dist/MobileMenu.d.ts +8 -0
  5. package/dist/index.d.ts +3 -0
  6. package/dist/index.es.js +4031 -0
  7. package/package.json +10 -33
  8. package/dist/index.js +0 -3074
package/dist/index.js DELETED
@@ -1,3074 +0,0 @@
1
- import { PxElement as n, cssTokenBreakpoints as l, paddingValues as d, boxShadowValues as vt, backgroundSizeValues as xt, noBorderRadiusValues as ft, borderRadiusValues as kt, borderSideValues as mt, borderValues as At, gradientValues as yt, backgroundColorValues as N, borderColorValues as $t, transferAccessibilityAttributes as Ct, assetContainerIconSizeValues as j, assetContainerImgWidthValues as O, checkName as m, WithExtraAttributes as h, fontweightValues as zt, colorValues as St, fontsizeValues as wt } from "@proximus/lavender-common";
2
- import "@proximus/lavender-layout";
3
- const Et = ':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)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-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:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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:1}@media only screen and (max-width: 767px){.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)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 1025px){.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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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}}', Z = new CSSStyleSheet();
4
- Z.replaceSync(Et);
5
- const Lt = ["anchor-right", "anchor-left", "anchor-full"], c = (i, t, e) => `:host([${i}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", I = class I extends n {
6
- constructor() {
7
- super(
8
- Z,
9
- l(
10
- "padding",
11
- c,
12
- d,
13
- b,
14
- "--container-padding"
15
- ),
16
- l(
17
- "padding-inline",
18
- c,
19
- d,
20
- b
21
- ),
22
- l(
23
- "padding-block",
24
- c,
25
- d,
26
- b
27
- ),
28
- l(
29
- "padding-top",
30
- c,
31
- d,
32
- b
33
- ),
34
- l(
35
- "padding-right",
36
- c,
37
- d,
38
- b,
39
- "--container-padding-right"
40
- ),
41
- l(
42
- "padding-bottom",
43
- c,
44
- d,
45
- b
46
- ),
47
- l(
48
- "padding-left",
49
- c,
50
- d,
51
- b,
52
- "--container-padding-left"
53
- )
54
- ), this.template = () => `<div class="container">
55
- <slot name="anchor-left"></slot>
56
- <slot name="anchor-right"></slot>
57
- <slot name="anchor-full"></slot>
58
- <slot></slot>
59
- </div>`, this.shadowRoot.innerHTML = this.template();
60
- }
61
- static get observedAttributes() {
62
- return [
63
- ...super.observedAttributes,
64
- "border",
65
- "border-color",
66
- "border-side",
67
- "border-side--mobile",
68
- "border-side--tablet",
69
- "border-side--laptop",
70
- "border-radius",
71
- "no-border-radius",
72
- "no-border-radius--mobile",
73
- "no-border-radius--tablet",
74
- "no-border-radius--laptop",
75
- "background-color",
76
- "background-color--mobile",
77
- "background-color--tablet",
78
- "background-color--laptop",
79
- "background-gradient",
80
- "background-gradient--mobile",
81
- "background-gradient--tablet",
82
- "background-gradient--laptop",
83
- "background-image",
84
- "background-image--mobile",
85
- "background-image--tablet",
86
- "background-image--laptop",
87
- "background-size",
88
- "background-position",
89
- "box-shadow",
90
- "inverted"
91
- ];
92
- }
93
- connectedCallback() {
94
- super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
95
- const t = this.querySelector("[slot]");
96
- t && Lt.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
97
- }
98
- attributeChangedCallback(t, e, r) {
99
- if (e !== r)
100
- switch (t) {
101
- case "border":
102
- this.updateAttribute(t, e, r, At);
103
- break;
104
- case "border-color":
105
- this.updateBorderColor(t, r);
106
- break;
107
- case "border-side":
108
- case "border-side--mobile":
109
- case "border-side--tablet":
110
- case "border-side--laptop":
111
- this.updateAttribute(t, e, r, mt);
112
- break;
113
- case "border-radius":
114
- this.updateAttribute(
115
- t,
116
- e,
117
- r,
118
- kt
119
- );
120
- break;
121
- case "no-border-radius":
122
- case "no-border-radius--mobile":
123
- case "no-border-radius--tablet":
124
- case "no-border-radius--laptop":
125
- this.updateNoBorderRadius(
126
- t,
127
- e,
128
- r,
129
- ft
130
- );
131
- break;
132
- case "background-color":
133
- case "background-color--mobile":
134
- case "background-color--tablet":
135
- case "background-color--laptop":
136
- this.updateBackgroundColor(t, r);
137
- break;
138
- case "background-gradient":
139
- case "background-gradient--mobile":
140
- case "background-gradient--tablet":
141
- case "background-gradient--laptop":
142
- this.updateGradient(t, r);
143
- break;
144
- case "background-size":
145
- this.updateAttribute(
146
- t,
147
- e,
148
- r,
149
- xt
150
- );
151
- break;
152
- case "background-image":
153
- case "background-image--mobile":
154
- case "background-image--tablet":
155
- case "background-image--laptop":
156
- this.updateBackgroundImg(t, r);
157
- break;
158
- case "background-position":
159
- r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
160
- break;
161
- case "box-shadow":
162
- this.updateAttribute(t, e, r, vt);
163
- break;
164
- default:
165
- super.attributeChangedCallback(t, e, r);
166
- break;
167
- }
168
- }
169
- updateBackgroundImg(t, e) {
170
- this.$el.style.setProperty(`--${t}`, `url("${e}")`);
171
- }
172
- updateGradient(t, e) {
173
- if (this.checkName(yt, e)) {
174
- const r = this.splitAttrNameFromBreakpoint(t);
175
- t = r.attrName;
176
- const o = r.breakpoint;
177
- this.$el.style.setProperty(
178
- `--${t}${o}`,
179
- `linear-gradient(var(--px-background-color-container-gradient-${e}))`
180
- );
181
- } else
182
- console.error(
183
- `${e} is not an allowed background-gradient value for ${this.$el}`
184
- );
185
- }
186
- updateBackgroundColor(t, e) {
187
- if (this.checkName(N, e)) {
188
- const r = this.splitAttrNameFromBreakpoint(t), o = r.breakpoint;
189
- this.$el.style.setProperty(
190
- `--${r.attrName}${o}`,
191
- `var(--px-background-color-${e}-default)`
192
- ), this.$el.style.setProperty(
193
- `--${r.attrName}-inverted${o}`,
194
- `var(--px-background-color-${e}-inverted)`
195
- );
196
- } else
197
- console.error(
198
- `${e} is not an allowed ${t} value for ${this.$el}`
199
- );
200
- }
201
- updateBorderColor(t, e) {
202
- this.checkName($t, e) ? (this.$el.style.setProperty(
203
- `--${t}`,
204
- `var(--px-border-color-${e}-default)`
205
- ), this.$el.style.setProperty(
206
- `--${t}-inverted`,
207
- `var(--px-border-color-${e}-inverted)`
208
- )) : console.error(
209
- `${e} is not an allowed ${t} value for ${this.$el}`
210
- );
211
- }
212
- updateNoBorderRadius(t, e, r, o) {
213
- if (!this.checkName(o, r))
214
- console.error(
215
- `${r} is not an allowed ${t} value for ${this.$el}`
216
- );
217
- else {
218
- const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
219
- e !== null && e !== "" && this.$el.classList.toggle(
220
- `${a.attrName}-${e}${s}`
221
- ), r !== null && r !== "" && this.$el.classList.toggle(
222
- `${a.attrName}-${r}${s}`
223
- );
224
- }
225
- }
226
- updateAttribute(t, e, r, o) {
227
- if (!this.checkName(o, r))
228
- console.error(
229
- `${r} is not an allowed ${t} value for ${this.$el}`
230
- );
231
- else {
232
- const a = this.splitAttrNameFromBreakpoint(t), s = a.breakpoint;
233
- e !== null && e !== "" && this.$el.classList.toggle(
234
- `${a.attrName}-${e}${s}`
235
- ), r !== null && r !== "" && this.$el.classList.toggle(
236
- `${a.attrName}-${r}${s}`
237
- );
238
- }
239
- }
240
- splitAttrNameFromBreakpoint(t) {
241
- let e = "";
242
- if (["--mobile", "--tablet", "--laptop"].some(
243
- (r) => t.includes(r)
244
- )) {
245
- const r = t.split("--");
246
- t = r[0], e = `--${r[1]}`;
247
- }
248
- return { attrName: t, breakpoint: e };
249
- }
250
- checkName(t, e) {
251
- return t.includes(e);
252
- }
253
- get padding() {
254
- return this.getAttribute("padding");
255
- }
256
- set padding(t) {
257
- this.setAttribute("padding", t);
258
- }
259
- get paddingBlock() {
260
- return this.getAttribute("padding-block");
261
- }
262
- set paddingBlock(t) {
263
- this.setAttribute("padding-block", t);
264
- }
265
- get paddingInline() {
266
- return this.getAttribute("padding-inline");
267
- }
268
- set paddingInline(t) {
269
- this.setAttribute("padding-inline", t);
270
- }
271
- get paddingTop() {
272
- return this.getAttribute("padding-top");
273
- }
274
- set paddingTop(t) {
275
- this.setAttribute("padding-top", t);
276
- }
277
- get paddingRight() {
278
- return this.getAttribute("padding-right");
279
- }
280
- set paddingRight(t) {
281
- this.setAttribute("padding-right", t);
282
- }
283
- get paddingBottom() {
284
- return this.getAttribute("padding-bottom");
285
- }
286
- set paddingBottom(t) {
287
- this.setAttribute("padding-bottom", t);
288
- }
289
- get paddingLeft() {
290
- return this.getAttribute("padding-left");
291
- }
292
- set paddingLeft(t) {
293
- this.setAttribute("padding-left", t);
294
- }
295
- get paddingMobile() {
296
- return this.getAttribute("padding--mobile");
297
- }
298
- set paddingMobile(t) {
299
- this.setAttribute("padding--mobile", t);
300
- }
301
- get paddingBlockMobile() {
302
- return this.getAttribute("padding-block--mobile");
303
- }
304
- set paddingBlockMobile(t) {
305
- this.setAttribute("padding-block--mobile", t);
306
- }
307
- get paddingInlineMobile() {
308
- return this.getAttribute("padding-inline--mobile");
309
- }
310
- set paddingInlineMobile(t) {
311
- this.setAttribute("padding-inline--mobile", t);
312
- }
313
- get paddingTopMobile() {
314
- return this.getAttribute("padding-top--mobile");
315
- }
316
- set paddingTopMobile(t) {
317
- this.setAttribute("padding-top--mobile", t);
318
- }
319
- get paddingRightMobile() {
320
- return this.getAttribute("padding-right--mobile");
321
- }
322
- set paddingRightMobile(t) {
323
- this.setAttribute("padding-right--mobile", t);
324
- }
325
- get paddingBottomMobile() {
326
- return this.getAttribute("padding-bottom--mobile");
327
- }
328
- set paddingBottomMobile(t) {
329
- this.setAttribute("padding-bottom--mobile", t);
330
- }
331
- get paddingLeftMobile() {
332
- return this.getAttribute("padding-left--mobile");
333
- }
334
- set paddingLeftMobile(t) {
335
- this.setAttribute("padding-left--mobile", t);
336
- }
337
- get paddingTablet() {
338
- return this.getAttribute("padding--tablet");
339
- }
340
- set paddingTablet(t) {
341
- this.setAttribute("padding--tablet", t);
342
- }
343
- get paddingBlockTablet() {
344
- return this.getAttribute("padding-block--tablet");
345
- }
346
- set paddingBlockTablet(t) {
347
- this.setAttribute("padding-block--tablet", t);
348
- }
349
- get paddingInlineTablet() {
350
- return this.getAttribute("padding-inline--tablet");
351
- }
352
- set paddingInlineTablet(t) {
353
- this.setAttribute("padding-inline--tablet", t);
354
- }
355
- get paddingTopTablet() {
356
- return this.getAttribute("padding-top--tablet");
357
- }
358
- set paddingTopTablet(t) {
359
- this.setAttribute("padding-top--tablet", t);
360
- }
361
- get paddingRightTablet() {
362
- return this.getAttribute("padding-right--tablet");
363
- }
364
- set paddingRightTablet(t) {
365
- this.setAttribute("padding-right--tablet", t);
366
- }
367
- get paddingBottomTablet() {
368
- return this.getAttribute("padding-bottom--tablet");
369
- }
370
- set paddingBottomTablet(t) {
371
- this.setAttribute("padding-bottom--tablet", t);
372
- }
373
- get paddingLeftTablet() {
374
- return this.getAttribute("padding-left--tablet");
375
- }
376
- set paddingLeftTablet(t) {
377
- this.setAttribute("padding-left--tablet", t);
378
- }
379
- get paddingLaptop() {
380
- return this.getAttribute("padding--laptop");
381
- }
382
- set paddingLaptop(t) {
383
- this.setAttribute("padding--laptop", t);
384
- }
385
- get paddingBlockLaptop() {
386
- return this.getAttribute("padding-block--laptop");
387
- }
388
- set paddingBlockLaptop(t) {
389
- this.setAttribute("padding-block--laptop", t);
390
- }
391
- get paddingInlineLaptop() {
392
- return this.getAttribute("padding-inline--laptop");
393
- }
394
- set paddingInlineLaptop(t) {
395
- this.setAttribute("padding-inline--laptop", t);
396
- }
397
- get paddingTopLaptop() {
398
- return this.getAttribute("padding-top--laptop");
399
- }
400
- set paddingTopLaptop(t) {
401
- this.setAttribute("padding-top--laptop", t);
402
- }
403
- get paddingRightLaptop() {
404
- return this.getAttribute("padding-right--laptop");
405
- }
406
- set paddingRightLaptop(t) {
407
- this.setAttribute("padding-right--laptop", t);
408
- }
409
- get paddingBottomLaptop() {
410
- return this.getAttribute("padding-bottom--laptop");
411
- }
412
- set paddingBottomLaptop(t) {
413
- this.setAttribute("padding-bottom--laptop", t);
414
- }
415
- get paddingLeftLaptop() {
416
- return this.getAttribute("padding-left--laptop");
417
- }
418
- set paddingLeftLaptop(t) {
419
- this.setAttribute("padding-left--laptop", t);
420
- }
421
- get border() {
422
- return this.getAttribute("border");
423
- }
424
- set border(t) {
425
- this.setAttribute("border", t);
426
- }
427
- get borderColor() {
428
- return this.getAttribute("border-color");
429
- }
430
- set borderColor(t) {
431
- this.setAttribute("border-color", t);
432
- }
433
- get borderSide() {
434
- return this.getAttribute("border-side");
435
- }
436
- set borderSide(t) {
437
- this.setAttribute("border-side", t);
438
- }
439
- get borderSideMobile() {
440
- return this.getAttribute("border-side--mobile");
441
- }
442
- set borderSideMobile(t) {
443
- this.setAttribute("border-side--mobile", t);
444
- }
445
- get borderSideTablet() {
446
- return this.getAttribute("border-side--tablet");
447
- }
448
- set borderSideTablet(t) {
449
- this.setAttribute("border-side--tablet", t);
450
- }
451
- get borderSideLaptop() {
452
- return this.getAttribute("border-side--laptop");
453
- }
454
- set borderSideLaptop(t) {
455
- this.setAttribute("border-side--laptop", t);
456
- }
457
- get borderRadius() {
458
- return this.getAttribute("border-radius");
459
- }
460
- set borderRadius(t) {
461
- this.setAttribute("border-radius", t);
462
- }
463
- get noBorderRadius() {
464
- return this.getAttribute("no-border-radius");
465
- }
466
- set noBorderRadius(t) {
467
- this.setAttribute("no-border-radius", t);
468
- }
469
- get noBorderRadiusMobile() {
470
- return this.getAttribute("no-border-radius--mobile");
471
- }
472
- set noBorderRadiusMobile(t) {
473
- this.setAttribute("no-border-radius--mobile", t);
474
- }
475
- get noBorderRadiusTablet() {
476
- return this.getAttribute("no-border-radius--tablet");
477
- }
478
- set noBorderRadiusTablet(t) {
479
- this.setAttribute("no-border-radius--tablet", t);
480
- }
481
- get noBorderRadiusLaptop() {
482
- return this.getAttribute("no-border-radius--laptop");
483
- }
484
- set noBorderRadiusLaptop(t) {
485
- this.setAttribute("no-border-radius--laptop", t);
486
- }
487
- get backgroundColor() {
488
- return this.getAttribute("background-color");
489
- }
490
- set backgroundColor(t) {
491
- this.setAttribute("background-color", t);
492
- }
493
- get backgroundColorMobile() {
494
- return this.getAttribute("background-color--mobile");
495
- }
496
- set backgroundColorMobile(t) {
497
- this.setAttribute("background-color--mobile", t);
498
- }
499
- get backgroundColorTablet() {
500
- return this.getAttribute("background-color--tablet");
501
- }
502
- set backgroundColorTablet(t) {
503
- this.setAttribute("background-color--tablet", t);
504
- }
505
- get backgroundColorLaptop() {
506
- return this.getAttribute("background-color--laptop");
507
- }
508
- set backgroundColorLaptop(t) {
509
- this.setAttribute("background-color--laptop", t);
510
- }
511
- get gradient() {
512
- return this.getAttribute("background-gradient");
513
- }
514
- set gradient(t) {
515
- this.setAttribute("background-gradient", t);
516
- }
517
- get gradientMobile() {
518
- return this.getAttribute("background-gradient--mobile");
519
- }
520
- set gradientMobile(t) {
521
- this.setAttribute("background-gradient--mobile", t);
522
- }
523
- get gradientTablet() {
524
- return this.getAttribute("background-gradient--tablet");
525
- }
526
- set gradientTablet(t) {
527
- this.setAttribute("background-gradient--tablet", t);
528
- }
529
- get gradientLaptop() {
530
- return this.getAttribute("background-gradient--laptop");
531
- }
532
- set gradientLaptop(t) {
533
- this.setAttribute("background-gradient--laptop", t);
534
- }
535
- get backgroundImage() {
536
- return this.getAttribute("background-image");
537
- }
538
- set backgroundImage(t) {
539
- this.setAttribute("background-image", t);
540
- }
541
- get backgroundImageMobile() {
542
- return this.getAttribute("background-image--mobile");
543
- }
544
- set backgroundImageMobile(t) {
545
- this.setAttribute("background-image--mobile", t);
546
- }
547
- get backgroundImageTablet() {
548
- return this.getAttribute("background-image--tablet");
549
- }
550
- set backgroundImageTablet(t) {
551
- this.setAttribute("background-image--tablet", t);
552
- }
553
- get backgroundImageLaptop() {
554
- return this.getAttribute("background-image--laptop");
555
- }
556
- set backgroundImageLaptop(t) {
557
- this.setAttribute("background-image--laptop", t);
558
- }
559
- get backgroundSize() {
560
- return this.getAttribute("background-size");
561
- }
562
- set backgroundSize(t) {
563
- this.setAttribute("background-size", t);
564
- }
565
- get backgroundPosition() {
566
- return this.getAttribute("background-position");
567
- }
568
- set backgroundPosition(t) {
569
- this.setAttribute("background-position", t);
570
- }
571
- get boxShadow() {
572
- return this.getAttribute("box-shadow");
573
- }
574
- set boxShadow(t) {
575
- this.setAttribute("box-shadow", t);
576
- }
577
- get inverted() {
578
- return this.getAttribute("inverted");
579
- }
580
- set inverted(t) {
581
- this.setAttribute("inverted", t);
582
- }
583
- };
584
- I.nativeName = "div";
585
- let $ = I;
586
- customElements.define("px-container", $);
587
- const Q = '.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-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-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-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.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){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);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) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);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-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover: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){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.actionable-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}.btn.header-dropdown{display:block;color:var(--px-text-color-body-neutral-strong-default);width:100%;font-weight:400;text-align:left;font-size:var(--px-text-size-label-l-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-background-color-action-neutral-default);touch-action:manipulation}.btn.header-dropdown:focus{outline:auto}.btn.header-dropdown:after{content:"";position:absolute;top:50%;right:var(--px-icon-size-xs-desktop);transform:translateY(-50%);width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy45Mjc5IDcuMTM5OThDMTMuNjQxIDYuODU3NTQgMTMuMTc1OCA2Ljg1NzU0IDEyLjg4ODkgNy4xMzk5OEw5LjAwMDIxIDEwLjk2NzlMNS4xMTE1NSA3LjEzOTk4QzQuODI0NjQgNi44NTc1NCA0LjM1OTQ1IDYuODU3NTQgNC4wNzI1NCA3LjEzOTk4QzMuNzg1NjIgNy40MjI0MSAzLjc4NTYyIDcuODgwMzIgNC4wNzI1NCA4LjE2Mjc2TDguNDgwNyAxMi41MDJDOC43Njc2MiAxMi43ODQ1IDkuMjMyOCAxMi43ODQ1IDkuNTE5NzIgMTIuNTAyTDEzLjkyNzkgOC4xNjI3NkMxNC4yMTQ4IDcuODgwMzIgMTQuMjE0OCA3LjQyMjQxIDEzLjkyNzkgNy4xMzk5OFoiIGZpbGw9IiM1QzJEOTEiLz4KPC9zdmc+Cgo=);background-repeat:no-repeat}@media screen and (min-width: 768px){{right:calc(-1 * var(--px-spacing-after-element-s-desktop));top:50%;transform:translateY(-50%);padding:0}}@media screen and (min-width: 768px){.btn.header-dropdown{width:inherit;border:none;background:none;cursor:pointer;font:inherit;margin:0;font-weight:700;color:var(--px-text-color-action-brand-default, #000);display:inline-block;font-size:var(--px-text-size-label-l-desktop);padding:0 var(--px-spacing-after-element-s-desktop) 0 0!important}}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-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-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-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover: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-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-neutral-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus: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-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::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-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.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-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', W = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-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-text-color-action-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-icon-color-content-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}:host([inverted]) a.icon-link{color:var(--px-icon-color-content-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{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-after-element-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-desktop)}a:focus,.link:focus{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-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Tt = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-border-size-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:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.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-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@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)}}", It = ":host{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-m);font-weight:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", G = new CSSStyleSheet(), U = new CSSStyleSheet(), Y = new CSSStyleSheet(), K = new CSSStyleSheet();
588
- G.replaceSync(Q);
589
- U.replaceSync(W);
590
- Y.replaceSync(Tt);
591
- K.replaceSync(It);
592
- const Mt = [
593
- "",
594
- "default",
595
- "secondary",
596
- "tertiary",
597
- "link",
598
- "patch",
599
- "patch-info",
600
- "patch-black-friday",
601
- "patch-eco",
602
- "actionable-tag",
603
- "header-dropdown"
604
- ], Bt = [
605
- "extended",
606
- "extended--mobile",
607
- "extended--tablet",
608
- "extended--laptop"
609
- ], M = class M extends n {
610
- constructor() {
611
- super(G, U, Y, K), this.template = () => `<button class="btn">
612
- <slot name="before"></slot><slot></slot><slot name="after"></slot>
613
- </button>`, this.shadowRoot.innerHTML = this.template();
614
- }
615
- static get observedAttributes() {
616
- return [
617
- ...super.observedAttributes,
618
- "variant",
619
- "state",
620
- "loading",
621
- "shape",
622
- "inverted",
623
- ...Bt
624
- ];
625
- }
626
- connectedCallback() {
627
- super.connectedCallback();
628
- const t = this.querySelectorAll("px-icon");
629
- t && t.forEach((e) => {
630
- const r = e.getAttribute("size"), o = e.getAttribute("color");
631
- e && (e.addEventListener("click", () => {
632
- this.$el.focus();
633
- }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
634
- }), Ct(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
635
- var r;
636
- e.preventDefault(), (r = this.closest("form")) == null || r.submit();
637
- }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
638
- var r;
639
- e.preventDefault(), (r = this.closest("form")) == null || r.reset();
640
- });
641
- }
642
- attributeChangedCallback(t, e, r) {
643
- if (e !== r)
644
- switch (t) {
645
- case "variant":
646
- this.updateVariant(e, r, Mt);
647
- break;
648
- case "state":
649
- this.updateState(e, r);
650
- break;
651
- case "extended":
652
- case "extended--mobile":
653
- case "extended--tablet":
654
- case "extended--laptop":
655
- this.updateExtended(t, r);
656
- break;
657
- case "loading":
658
- this.updateLoading();
659
- break;
660
- case "shape":
661
- this.updateShape(e, r);
662
- break;
663
- default:
664
- super.attributeChangedCallback(t, e, r);
665
- break;
666
- }
667
- }
668
- checkName(t, e) {
669
- return !!t.includes(e);
670
- }
671
- checkClass(t) {
672
- if (t.startsWith("patch-")) {
673
- const e = t.split(/-(.*)/s);
674
- for (const r of e)
675
- r != "" && this.$el.classList.toggle(r);
676
- } else
677
- this.$el.classList.toggle(t);
678
- }
679
- _toggleClass(t, e) {
680
- t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
681
- }
682
- updateVariant(t, e, r) {
683
- e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "variant" value for ${this.$el}`);
684
- }
685
- updateState(t, e) {
686
- const r = ["", "default", "success", "error"];
687
- this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "sate" value for ${this.$el}`);
688
- }
689
- updateExtended(t, e) {
690
- e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
691
- }
692
- updateLoading() {
693
- const t = this.querySelector("px-spinner");
694
- t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
695
- }
696
- updateShape(t, e) {
697
- const r = [
698
- "",
699
- "default",
700
- "bottom-right",
701
- "bottom-left",
702
- "alternative"
703
- ];
704
- this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "shape" value for ${this.$el}`);
705
- }
706
- get variant() {
707
- return this.getAttribute("variant");
708
- }
709
- set variant(t) {
710
- this.setAttribute("variant", t);
711
- }
712
- get state() {
713
- return this.getAttribute("state");
714
- }
715
- set state(t) {
716
- this.setAttribute("state", t);
717
- }
718
- get extended() {
719
- return this.getAttribute("extended");
720
- }
721
- set extended(t) {
722
- this.setAttribute("extended", t);
723
- }
724
- get extendedMobile() {
725
- return this.getAttribute("extended--mobile");
726
- }
727
- set extendedMobile(t) {
728
- this.setAttribute("extended--mobile", t);
729
- }
730
- get extendedTablet() {
731
- return this.getAttribute("extended--tablet");
732
- }
733
- set extendedTablet(t) {
734
- this.setAttribute("extended--tablet", t);
735
- }
736
- get extendedLaptop() {
737
- return this.getAttribute("extended--laptop");
738
- }
739
- set extendedLaptop(t) {
740
- this.setAttribute("extended--laptop", t);
741
- }
742
- get loading() {
743
- return this.getAttribute("loading");
744
- }
745
- set loading(t) {
746
- this.setAttribute("loading", t);
747
- }
748
- get shape() {
749
- return this.getAttribute("shape");
750
- }
751
- set shape(t) {
752
- this.setAttribute("shape", t);
753
- }
754
- get inverted() {
755
- return this.getAttribute("inverted");
756
- }
757
- set inverted(t) {
758
- this.setAttribute("inverted", t);
759
- }
760
- };
761
- M.nativeName = "button";
762
- let C = M;
763
- customElements.get("px-button") || customElements.define("px-button", C);
764
- const Rt = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-desktop)}}', J = new CSSStyleSheet();
765
- J.replaceSync(Rt);
766
- class qt extends HTMLElement {
767
- constructor() {
768
- super(), this.template = () => `
769
- <px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
770
- <div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
771
- <px-vstack gap="heading-to-content">
772
- <slot name="heading"></slot>
773
- <px-vstack gap="after-element-none">
774
- <slot></slot>
775
- </px-vstack>
776
- </px-vstack>
777
- </div>
778
- </px-container>
779
- <div class="content-wrapper">
780
- <slot name="overlap"></slot>
781
- </div>
782
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [J];
783
- }
784
- connectedCallback() {
785
- const t = this.querySelector('[slot="heading"]');
786
- !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "after-element-none");
787
- }
788
- static get observedAttributes() {
789
- return [
790
- "background-color",
791
- "background-gradient",
792
- "background-image",
793
- "background-image--mobile",
794
- "background-image--tablet",
795
- "background-image--laptop",
796
- "background-size",
797
- "background-position",
798
- "padding-block",
799
- "padding-top",
800
- "padding-bottom",
801
- "padding-block--mobile",
802
- "padding-top--mobile",
803
- "padding-bottom--mobile",
804
- "padding-block--tablet",
805
- "padding-top--tablet",
806
- "padding-bottom--tablet",
807
- "padding-block--laptop",
808
- "padding-top--laptop",
809
- "padding-bottom--laptop",
810
- "border",
811
- "border-side",
812
- "border-side--mobile",
813
- "border-side--tablet",
814
- "border-side--laptop"
815
- ];
816
- }
817
- get $container() {
818
- return this.shadowRoot.querySelector("px-container");
819
- }
820
- attributeChangedCallback(t, e, r) {
821
- if (e !== r)
822
- switch (t) {
823
- case "background-color":
824
- this.$container.backgroundColor = N.indexOf(r) > 0 ? r : "none";
825
- break;
826
- case "background-gradient":
827
- this.$container.gradient = this.gradient;
828
- break;
829
- case "background-image":
830
- this.$container.backgroundImage = r;
831
- break;
832
- case "background-image--mobile":
833
- this.$container.backgroundImageMobile = r;
834
- break;
835
- case "background-image--tablet":
836
- this.$container.backgroundImageTablet = r;
837
- break;
838
- case "background-image--laptop":
839
- this.$container.backgroundImageLaptop = r;
840
- break;
841
- case "background-size":
842
- this.$container.backgroundSize = r;
843
- break;
844
- case "background-position":
845
- this.$container.backgroundPosition = r;
846
- break;
847
- case "padding-block":
848
- this.$container.paddingBlock = r;
849
- break;
850
- case "padding-top":
851
- this.$container.paddingTop = r;
852
- break;
853
- case "padding-bottom":
854
- this.$container.paddingBottom = r;
855
- break;
856
- case "padding-block--mobile":
857
- this.$container.paddingBlockMobile = r;
858
- break;
859
- case "padding-top--mobile":
860
- this.$container.paddingTopMobile = r;
861
- break;
862
- case "padding-bottom--mobile":
863
- this.$container.paddingBottomMobile = r;
864
- break;
865
- case "padding-block--tablet":
866
- this.$container.paddingBlockTablet = r;
867
- break;
868
- case "padding-top--tablet":
869
- this.$container.paddingTopTablet = r;
870
- break;
871
- case "padding-bottom--tablet":
872
- this.$container.paddingBottomTablet = r;
873
- break;
874
- case "padding-block--laptop":
875
- this.$container.paddingBlockLaptop = r;
876
- break;
877
- case "padding-top--laptop":
878
- this.$container.paddingTopLaptop = r;
879
- break;
880
- case "padding-bottom--laptop":
881
- this.$container.paddingBottomLaptop = r;
882
- break;
883
- case "border":
884
- this.$container.border = r;
885
- break;
886
- case "border-side":
887
- this.$container.borderSide = r;
888
- break;
889
- case "border-side--mobile":
890
- this.$container.borderSideMobile = r;
891
- break;
892
- case "border-side--tablet":
893
- this.$container.borderSideTablet = r;
894
- break;
895
- case "border-side--laptop":
896
- this.$container.borderSideLaptop = r;
897
- break;
898
- }
899
- }
900
- get $slotOverlap() {
901
- return this.querySelector('[slot="overlap"]');
902
- }
903
- get backgroundColor() {
904
- return this.getAttribute("background-color") || "none";
905
- }
906
- set backgroundColor(t) {
907
- this.setAttribute("background-color", t);
908
- }
909
- get gradient() {
910
- return this.getAttribute("background-gradient");
911
- }
912
- set gradient(t) {
913
- this.setAttribute("background-gradient", t);
914
- }
915
- get backgroundImage() {
916
- return this.getAttribute("background-image");
917
- }
918
- set backgroundImage(t) {
919
- this.setAttribute("background-image", t);
920
- }
921
- get backgroundImageMobile() {
922
- return this.getAttribute("background-image--mobile");
923
- }
924
- set backgroundImageMobile(t) {
925
- this.setAttribute("background-image--mobile", t);
926
- }
927
- get backgroundImageTablet() {
928
- return this.getAttribute("background-image--tablet");
929
- }
930
- set backgroundImageTablet(t) {
931
- this.setAttribute("background-image--tablet", t);
932
- }
933
- get backgroundImageLaptop() {
934
- return this.getAttribute("background-image--laptop");
935
- }
936
- set backgroundImageLaptop(t) {
937
- this.setAttribute("background-image--laptop", t);
938
- }
939
- get backgroundSize() {
940
- return this.getAttribute("background-size");
941
- }
942
- set backgroundSize(t) {
943
- this.setAttribute("background-size", t);
944
- }
945
- get backgroundPosition() {
946
- return this.getAttribute("background-position");
947
- }
948
- set backgroundPosition(t) {
949
- this.setAttribute("background-position", t);
950
- }
951
- get paddingBlock() {
952
- return this.getAttribute("padding-block");
953
- }
954
- set paddingBlock(t) {
955
- this.setAttribute("padding-block", t);
956
- }
957
- get paddingTop() {
958
- return this.getAttribute("padding-top");
959
- }
960
- set paddingTop(t) {
961
- this.setAttribute("padding-top", t);
962
- }
963
- get paddingBottom() {
964
- return this.getAttribute("padding-bottom");
965
- }
966
- set paddingBottom(t) {
967
- this.setAttribute("padding-bottom", t);
968
- }
969
- get paddingBlockMobile() {
970
- return this.getAttribute("padding-block--mobile");
971
- }
972
- set paddingBlockMobile(t) {
973
- this.setAttribute("padding-block--mobile", t);
974
- }
975
- get paddingTopMobile() {
976
- return this.getAttribute("padding-top--mobile");
977
- }
978
- set paddingTopMobile(t) {
979
- this.setAttribute("padding-top--mobile", t);
980
- }
981
- get paddingBottomMobile() {
982
- return this.getAttribute("padding-bottom--mobile");
983
- }
984
- set paddingBottomMobile(t) {
985
- this.setAttribute("padding-bottom--mobile", t);
986
- }
987
- get paddingBlockTablet() {
988
- return this.getAttribute("padding-block--tablet");
989
- }
990
- set paddingBlockTablet(t) {
991
- this.setAttribute("padding-block--tablet", t);
992
- }
993
- get paddingTopTablet() {
994
- return this.getAttribute("padding-top--tablet");
995
- }
996
- set paddingTopTablet(t) {
997
- this.setAttribute("padding-top--tablet", t);
998
- }
999
- get paddingBottomTablet() {
1000
- return this.getAttribute("padding-bottom--tablet");
1001
- }
1002
- set paddingBottomTablet(t) {
1003
- this.setAttribute("padding-bottom--tablet", t);
1004
- }
1005
- get paddingBlockLaptop() {
1006
- return this.getAttribute("padding-block--laptop");
1007
- }
1008
- set paddingBlockLaptop(t) {
1009
- this.setAttribute("padding-block--laptop", t);
1010
- }
1011
- get paddingTopLaptop() {
1012
- return this.getAttribute("padding-top--laptop");
1013
- }
1014
- set paddingTopLaptop(t) {
1015
- this.setAttribute("padding-top--laptop", t);
1016
- }
1017
- get paddingBottomLaptop() {
1018
- return this.getAttribute("padding-bottom--laptop");
1019
- }
1020
- set paddingBottomLaptop(t) {
1021
- this.setAttribute("padding-bottom--laptop", t);
1022
- }
1023
- get border() {
1024
- return this.getAttribute("border");
1025
- }
1026
- set border(t) {
1027
- this.setAttribute("border", t);
1028
- }
1029
- get borderSide() {
1030
- return this.getAttribute("border-side");
1031
- }
1032
- set borderSide(t) {
1033
- this.setAttribute("border-side", t);
1034
- }
1035
- get borderSideMobile() {
1036
- return this.getAttribute("border-side--mobile");
1037
- }
1038
- set borderSideMobile(t) {
1039
- this.setAttribute("border-side--mobile", t);
1040
- }
1041
- get borderSideTablet() {
1042
- return this.getAttribute("border-side--tablet");
1043
- }
1044
- set borderSideTablet(t) {
1045
- this.setAttribute("border-side--tablet", t);
1046
- }
1047
- get borderSideLaptop() {
1048
- return this.getAttribute("border-side--laptop");
1049
- }
1050
- set borderSideLaptop(t) {
1051
- this.setAttribute("border-side--laptop", t);
1052
- }
1053
- }
1054
- customElements.define("px-section", qt);
1055
- const Pt = ["", "default", "naked", "contained"], p = [
1056
- "",
1057
- "action-neutral-bare",
1058
- "action-neutral"
1059
- ];
1060
- function u(i) {
1061
- i.hasAttribute("size") ? j.includes(
1062
- i.getAttribute("size")
1063
- ) ? (i.getAttribute("size") === "" || i.getAttribute("size") === "default") && i.setAttribute("size", "s") : (console.error(
1064
- `Wrong icon size value for prefix. Allowed values are: ${j.join(
1065
- ", "
1066
- )}.`
1067
- ), i.setAttribute("size", "s")) : i.setAttribute("size", "s");
1068
- }
1069
- function g(i) {
1070
- if (!i.hasAttribute("width"))
1071
- i.setAttribute("width", "s");
1072
- else {
1073
- const e = i.getAttribute("width");
1074
- O.includes(e) ? (e === "" || e === "default") && i.setAttribute("width", "s") : (console.error(
1075
- `Wrong img width value for prefix. Allowed values are: ${O.join(
1076
- ", "
1077
- )}.`
1078
- ), i.setAttribute("width", "s"));
1079
- }
1080
- i.setAttribute("border-radius", "pill");
1081
- }
1082
- function v(i) {
1083
- i.getAttribute("variant") === "contained" && !i.getAttribute("backgroundColor") && i.setAttribute("backgroundColor", "action-neutral-bare");
1084
- }
1085
- function Dt(i, t, e) {
1086
- if (!m(Pt, e)) {
1087
- console.error(
1088
- `${e} is not an allowed variant value for ${i}.`
1089
- );
1090
- return;
1091
- }
1092
- t !== null && t !== "" && t !== "default" && i.classList.toggle(t), e !== null && e !== "" && e !== "default" && i.classList.toggle(e);
1093
- }
1094
- function y(i, t, e, r = []) {
1095
- e ? (i.setAttribute("inverted", ""), r.forEach((o) => o.setAttribute("inverted", "")), t.forEach((o) => {
1096
- o.hasAttribute("inverted") || o.setAttribute("inverted", "");
1097
- })) : (i.removeAttribute("inverted"), r.forEach((o) => o.removeAttribute("inverted")), t.forEach((o) => {
1098
- o.hasAttribute("inverted") && o.removeAttribute("inverted");
1099
- }));
1100
- }
1101
- function x(i, t, e, r, o) {
1102
- if (!m(o, r)) {
1103
- console.error(`${r} is not an allowed ${t} value for`, i);
1104
- return;
1105
- }
1106
- const a = (s) => {
1107
- s !== null && s !== "" && s !== "default" && (i.style.setProperty(
1108
- "--cell-contained-background-color-default",
1109
- `var(--px-background-color-${s}-default)`
1110
- ), i.style.setProperty(
1111
- "--cell-contained-background-color-inverted",
1112
- `var(--px-background-color-${s}-inverted)`
1113
- ));
1114
- };
1115
- a(e), a(r);
1116
- }
1117
- function Ht(i, t, e, r = [], o = {}) {
1118
- e ? (i.setAttribute("disabled", ""), r.forEach((a) => a.setAttribute("disabled", "")), t.forEach((a) => {
1119
- a.hasAttribute("disabled") || a.setAttribute("disabled", "");
1120
- }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "true"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = -1)) : (i.removeAttribute("disabled"), r.forEach((a) => a.removeAttribute("disabled")), t.forEach((a) => {
1121
- a.hasAttribute("disabled") && a.removeAttribute("disabled");
1122
- }), o.ariaEl && o.setAria && o.ariaEl.setAttribute("aria-disabled", "false"), o.ariaEl && o.setTabIndex && (o.ariaEl.tabIndex = 0));
1123
- }
1124
- const f = ":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{outline-color:var(--px-border-color-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-border-color-focus-outline-inverted)}", _t = ':host([separator]):after{position:relative;content:"";display:var(--cell-separator--mobile, "none");width:100%;border-bottom:var(--px-border-size-m) solid var(--px-border-color-container-main-default)}.cell{font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:700;color:var(--px-text-color-heading-neutral-default);padding:var(--px-padding-s-mobile)}.cell ::slotted([slot="description"]){font-weight:400;font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-background-color-action-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-background-color-action-neutral-bare-default) );border-top-right-radius:var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) )}:host([hoverable]) .contained{border:var(--px-border-size-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-background-color-action-disabled-default)}@media only screen and (min-width: 768px){:host{display:block}:host:after{display:var(--cell-separator--tablet, "none")}.cell{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.contained{border-top-right-radius:var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 1025px){:host{display:block}:host:after{display:var(--cell-separator--laptop, "none")}.cell{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-padding-s-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.contained{border-top-right-radius:var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-border-color-container-main-inverted)}:host([inverted]) .cell{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-background-color-action-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-background-color-action-neutral-bare-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-background-color-action-hover-bordered-inverted );border-color:var(--px-border-color-action-hover-inverted)}', X = new CSSStyleSheet(), V = new CSSStyleSheet();
1125
- X.replaceSync(f);
1126
- V.replaceSync(_t);
1127
- const F = ["secondary"], jt = ["", "default", "top", "bottom", "none"], B = class B extends n {
1128
- template() {
1129
- return `
1130
- <px-hstack gap="after-element-s" justify-content="space-between" align-items="center">
1131
- <px-hstack gap="after-element-s" align-items="center">
1132
- <slot name="prefix"></slot>
1133
- <slot name="visual"></slot>
1134
- <px-vstack gap="after-element-2xs">
1135
- <slot></slot>
1136
- <slot name="description"></slot>
1137
- </px-vstack>
1138
- </px-hstack>
1139
- <px-hstack gap="after-element-s" align-items="center" class="cell-layout__suffix-action-container">
1140
- <px-stack direction="column" gap="after-element-2xs" align-items="flex-end" class="cell__suffix-container">
1141
- <slot name="suffix"></slot>
1142
- </px-stack>
1143
- <slot name="action-indicator"></slot>
1144
- </px-hstack>
1145
- </px-hstack>
1146
- `;
1147
- }
1148
- constructor() {
1149
- super(V, X);
1150
- const t = document.createElement(this.nativeName);
1151
- t.classList.add("cell"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
1152
- }
1153
- connectedCallback() {
1154
- if (super.connectedCallback(), this.$slotVisual) {
1155
- const t = this.querySelector('px-icon[slot="visual"]'), e = this.querySelector('px-img[slot="visual"]');
1156
- t && u(t), e && g(e);
1157
- }
1158
- if (this.$slotSuffix) {
1159
- const t = this.querySelectorAll(
1160
- 'px-button-icon[slot="suffix"]'
1161
- ), e = t.length > 0, r = t.length > 1;
1162
- e && t.forEach((o) => {
1163
- this.configureSlotSuffixButtonIcon(o);
1164
- }), r && (this.$suffixContainer.gap = "after-element-s", this.$suffixContainer.direction = "row", this.$suffixContainer.alignItems = "center");
1165
- }
1166
- v(this);
1167
- }
1168
- static get observedAttributes() {
1169
- return [
1170
- ...super.observedAttributes,
1171
- "inverted",
1172
- "variant",
1173
- "disabled",
1174
- "separator",
1175
- "separator--tablet",
1176
- "separator--laptop",
1177
- "radius",
1178
- "radius--tablet",
1179
- "radius--laptop",
1180
- "background-color"
1181
- ];
1182
- }
1183
- attributeChangedCallback(t, e, r) {
1184
- if (e !== r)
1185
- switch (t) {
1186
- case "variant":
1187
- Dt(this.$el, e, r);
1188
- break;
1189
- case "inverted":
1190
- for (let o = 0; o < this.$children.length; o++)
1191
- this.$children[o].hasAttribute("inverted") ? this.$children[o].removeAttribute("inverted") : this.$children[o].setAttribute("inverted", "");
1192
- break;
1193
- case "radius":
1194
- case "radius--tablet":
1195
- case "radius--laptop":
1196
- this.updateRadius(t, e, r, jt);
1197
- break;
1198
- case "separator":
1199
- case "separator--tablet":
1200
- case "separator--laptop":
1201
- this.configureSeparator(t);
1202
- break;
1203
- case "background-color":
1204
- x(
1205
- this.$el,
1206
- t,
1207
- e,
1208
- r,
1209
- p
1210
- );
1211
- break;
1212
- default:
1213
- super.attributeChangedCallback(t, e, r);
1214
- break;
1215
- }
1216
- }
1217
- configureSlotSuffixButtonIcon(t) {
1218
- t.hasAttribute("variant") ? m(
1219
- F,
1220
- t.getAttribute("variant")
1221
- ) || (console.error(
1222
- `Wrong button-icon variant value for suffix. Allowed values are: ${F.join(
1223
- ", "
1224
- )}.`
1225
- ), t.setAttribute("variant", "secondary")) : t.setAttribute("variant", "secondary");
1226
- }
1227
- updateRadius(t, e, r, o) {
1228
- if (!m(o, r)) {
1229
- console.error(`Bad ${t} value for`, this.$el);
1230
- return;
1231
- }
1232
- const a = t.includes("--"), s = ["mobile"];
1233
- if (!a)
1234
- this.separatorTablet || s.push("tablet"), this.separatorLaptop || s.push("laptop");
1235
- else {
1236
- const k = t.split("--")[1];
1237
- s.push(k);
1238
- }
1239
- s.forEach((k) => {
1240
- e !== null && e !== "" && e !== "default" && this.updateStyle(k, e), r !== null && r !== "" && r !== "default" && this.updateStyle(k, r);
1241
- });
1242
- }
1243
- updateStyle(t, e) {
1244
- let r = [];
1245
- 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) => {
1246
- this.$el.style.setProperty(
1247
- `--cell-contained-border-radius-${o}--${t}`,
1248
- "0"
1249
- );
1250
- });
1251
- }
1252
- configureSeparator(t) {
1253
- const e = t.includes("--"), r = ["mobile"];
1254
- if (!e)
1255
- this.separatorTablet || r.push("tablet"), this.separatorLaptop || r.push("laptop");
1256
- else {
1257
- const o = t.split("--")[1];
1258
- r.push(o);
1259
- }
1260
- r.forEach((o) => {
1261
- this.style.setProperty(`--cell-separator--${o}`, "block");
1262
- });
1263
- }
1264
- get $children() {
1265
- return this.querySelectorAll("px-cell > *");
1266
- }
1267
- get $slotVisual() {
1268
- return this.querySelector('[slot="visual"]');
1269
- }
1270
- get $slotSuffix() {
1271
- return this.querySelector('[slot="suffix"]');
1272
- }
1273
- get $suffixContainer() {
1274
- return this.shadowRoot.querySelector(".cell__suffix-container");
1275
- }
1276
- get inverted() {
1277
- return this.hasAttribute("inverted");
1278
- }
1279
- set inverted(t) {
1280
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1281
- }
1282
- get variant() {
1283
- return this.getAttribute("variant");
1284
- }
1285
- set variant(t) {
1286
- this.setAttribute("variant", t);
1287
- }
1288
- get disabled() {
1289
- return this.hasAttribute("disabled");
1290
- }
1291
- set disabled(t) {
1292
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1293
- }
1294
- get separator() {
1295
- return this.getAttribute("separator");
1296
- }
1297
- set separator(t) {
1298
- this.setAttribute("separator", t);
1299
- }
1300
- get separatorTablet() {
1301
- return this.getAttribute("separator--tablet");
1302
- }
1303
- set separatorTablet(t) {
1304
- this.setAttribute("separator--tablet", t);
1305
- }
1306
- get separatorLaptop() {
1307
- return this.getAttribute("separator--laptop");
1308
- }
1309
- set separatorLaptop(t) {
1310
- this.setAttribute("separator--laptop", t);
1311
- }
1312
- get radius() {
1313
- return this.getAttribute("radius");
1314
- }
1315
- set radius(t) {
1316
- this.setAttribute("radius", t);
1317
- }
1318
- get radiusTablet() {
1319
- return this.getAttribute("radius--tablet");
1320
- }
1321
- set radiusTablet(t) {
1322
- this.setAttribute("radius--tablet", t);
1323
- }
1324
- get radiusLaptop() {
1325
- return this.getAttribute("radius--laptop");
1326
- }
1327
- set radiusLaptop(t) {
1328
- this.setAttribute("radius--laptop", t);
1329
- }
1330
- get backgroundColor() {
1331
- return this.getAttribute("background-color");
1332
- }
1333
- set backgroundColor(t) {
1334
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1335
- }
1336
- };
1337
- B.nativeName = "div";
1338
- let z = B;
1339
- customElements.get("px-cell") || customElements.define("px-cell", z);
1340
- const Ot = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-icon-color-content-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-default)}:host([inverted]) .cell-link px-icon{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-inverted)}', tt = new CSSStyleSheet();
1341
- tt.replaceSync(f);
1342
- const et = new CSSStyleSheet();
1343
- et.replaceSync(Ot);
1344
- const R = class R extends n {
1345
- template() {
1346
- return `
1347
- <px-cell hoverable>
1348
- <slot name="visual" slot="visual"></slot>
1349
- <slot></slot>
1350
- <slot name="description" slot="description"></slot>
1351
- <slot name="suffix" slot="suffix"></slot>
1352
- <px-icon
1353
- name="chevron_right"
1354
- slot="action-indicator"
1355
- from="lavender"
1356
- size="s"
1357
- color="inherit"
1358
- ></px-icon>
1359
- </px-cell>
1360
- `;
1361
- }
1362
- constructor() {
1363
- super(et, tt);
1364
- const t = document.createElement(this.nativeName);
1365
- t.classList.add("cell-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
1366
- }
1367
- connectedCallback() {
1368
- if (super.connectedCallback(), this.$slotVisual) {
1369
- const e = this.querySelector('px-icon[slot="visual"]'), r = this.querySelector('px-img[slot="visual"]');
1370
- e && u(e), r && g(r);
1371
- }
1372
- this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
1373
- "aria-label",
1374
- this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
1375
- )), v(this);
1376
- }
1377
- static get observedAttributes() {
1378
- return [
1379
- ...super.observedAttributes,
1380
- "inverted",
1381
- "variant",
1382
- "disabled",
1383
- "separator",
1384
- "separator--tablet",
1385
- "separator--laptop",
1386
- "radius",
1387
- "radius--tablet",
1388
- "radius--laptop",
1389
- "target-blank-aria-label",
1390
- "background-color",
1391
- "noicon"
1392
- ];
1393
- }
1394
- attributeChangedCallback(t, e, r) {
1395
- if (e !== r)
1396
- switch (t) {
1397
- case "variant":
1398
- this.$cell.variant = this.variant;
1399
- break;
1400
- case "inverted":
1401
- y(this.$cell, this.$children, this.inverted, [
1402
- this.$pxIcon
1403
- ]);
1404
- break;
1405
- case "disabled":
1406
- Ht(this.$cell, this.$children, this.disabled, [], {
1407
- ariaEl: this.$el,
1408
- setAria: !0,
1409
- setTabIndex: !0
1410
- });
1411
- break;
1412
- case "radius":
1413
- case "radius--tablet":
1414
- case "radius--laptop":
1415
- case "separator":
1416
- case "separator--tablet":
1417
- case "separator--laptop":
1418
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
1419
- break;
1420
- case "target-blank-aria-label":
1421
- this.$pxIcon && this.$pxIcon.setAttribute(
1422
- "aria-label",
1423
- this.targetBlankAriaLabel || "Opens in a new tab"
1424
- );
1425
- break;
1426
- case "background-color":
1427
- x(
1428
- this.$el,
1429
- t,
1430
- e,
1431
- r,
1432
- p
1433
- );
1434
- break;
1435
- default:
1436
- super.attributeChangedCallback(t, e, r);
1437
- break;
1438
- }
1439
- }
1440
- get $cell() {
1441
- return this.shadowRoot.querySelector("px-cell");
1442
- }
1443
- get $slotVisual() {
1444
- return this.querySelector('[slot="visual"]');
1445
- }
1446
- get $children() {
1447
- return this.querySelectorAll("px-cell-link > *");
1448
- }
1449
- get $pxIcon() {
1450
- return this.shadowRoot.querySelector("px-icon");
1451
- }
1452
- get inverted() {
1453
- return this.hasAttribute("inverted");
1454
- }
1455
- set inverted(t) {
1456
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1457
- }
1458
- get variant() {
1459
- return this.getAttribute("variant");
1460
- }
1461
- set variant(t) {
1462
- this.setAttribute("variant", t);
1463
- }
1464
- get disabled() {
1465
- return this.hasAttribute("disabled");
1466
- }
1467
- set disabled(t) {
1468
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1469
- }
1470
- get separator() {
1471
- return this.getAttribute("separator");
1472
- }
1473
- set separator(t) {
1474
- this.setAttribute("separator", t);
1475
- }
1476
- get separatorTablet() {
1477
- return this.getAttribute("separator--tablet");
1478
- }
1479
- set separatorTablet(t) {
1480
- this.setAttribute("separator--tablet", t);
1481
- }
1482
- get separatorLaptop() {
1483
- return this.getAttribute("separator--laptop");
1484
- }
1485
- set separatorLaptop(t) {
1486
- this.setAttribute("separator--laptop", t);
1487
- }
1488
- get radius() {
1489
- return this.getAttribute("radius");
1490
- }
1491
- set radius(t) {
1492
- this.setAttribute("radius", t);
1493
- }
1494
- get radiusTablet() {
1495
- return this.getAttribute("radius--tablet");
1496
- }
1497
- set radiusTablet(t) {
1498
- this.setAttribute("radius--tablet", t);
1499
- }
1500
- get radiusLaptop() {
1501
- return this.getAttribute("radius--laptop");
1502
- }
1503
- set radiusLaptop(t) {
1504
- this.setAttribute("radius--laptop", t);
1505
- }
1506
- get targetBlankAriaLabel() {
1507
- return this.getAttribute("target-blank-aria-label");
1508
- }
1509
- set targetBlankAriaLabel(t) {
1510
- this.setAttribute("target-blank-aria-label", t);
1511
- }
1512
- get backgroundColor() {
1513
- return this.getAttribute("background-color");
1514
- }
1515
- set backgroundColor(t) {
1516
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1517
- }
1518
- };
1519
- R.nativeName = "a";
1520
- let S = R;
1521
- customElements.get("px-cell-link") || customElements.define("px-cell-link", S);
1522
- const Ft = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-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-m) * 1em);font-weight:400;color:var(--px-text-color-heading-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-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-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-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-primary-default);border-color:var(--px-border-color-none);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-border-size-l) solid var(--px-border-color-action-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-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-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-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-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-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-border-color-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-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-border-color-action-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-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-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-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-border-color-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-background-color-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-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-text-color-heading-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-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-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-border-color-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-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-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-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-border-color-focus-outline-inverted)}@media only screen and (min-width: 768px){.checkbox{gap:var(--px-spacing-after-element-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-after-element-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)}}`, rt = new CSSStyleSheet();
1523
- rt.replaceSync(Ft);
1524
- const Nt = ["", "default", "selectable-tag"], ot = ["", "error"], q = class q extends n {
1525
- constructor() {
1526
- var t;
1527
- super(rt), this.template = () => `<div class="checkbox">
1528
- <input type="checkbox"/>
1529
- <label><slot name="before"></slot><slot name="label"></slot></label>
1530
- </div>`, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
1531
- }
1532
- static get observedAttributes() {
1533
- return [
1534
- ...super.observedAttributes,
1535
- "state",
1536
- "variant",
1537
- "indeterminate",
1538
- "inverted",
1539
- "hover"
1540
- ];
1541
- }
1542
- connectedCallback() {
1543
- this.hasAttribute("name") || console.error(
1544
- '<px-checkbox> requires a "name" attribute to function properly.'
1545
- ), this.$el.addEventListener("change", () => {
1546
- var e;
1547
- const t = new Event("change", {
1548
- bubbles: !0,
1549
- composed: !0
1550
- // Allow the event to pass through shadow DOM boundaries
1551
- });
1552
- this.dispatchEvent(t), (e = this.internals) == null || e.setFormValue(this.formData()), this.$el.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1553
- }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot && this.$checkbox.classList.add("all-slots-empty");
1554
- }
1555
- attributeChangedCallback(t, e, r) {
1556
- if (e !== r)
1557
- switch (t) {
1558
- case "state":
1559
- this.updateAttribute(
1560
- e,
1561
- r,
1562
- ot,
1563
- t
1564
- );
1565
- break;
1566
- case "variant":
1567
- this.updateAttribute(
1568
- e,
1569
- r,
1570
- Nt,
1571
- t
1572
- );
1573
- break;
1574
- case "hover":
1575
- this.$el.classList.toggle("hover");
1576
- break;
1577
- default:
1578
- super.attributeChangedCallback(t, e, r);
1579
- break;
1580
- }
1581
- }
1582
- updateAttribute(t, e, r, o) {
1583
- var a, s;
1584
- if (!this.checkName(r, e)) {
1585
- console.error(
1586
- `${e} is not a valid ${o} value for`,
1587
- this.$el
1588
- );
1589
- return;
1590
- }
1591
- t !== null && (o === "variant" ? (a = this.$checkbox) == null || a.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));
1592
- }
1593
- formData() {
1594
- if (this.$el.name) {
1595
- const t = new FormData();
1596
- return t.append(this.getAttribute("name"), this.$el.value), t;
1597
- }
1598
- }
1599
- // Form-associated callbacks
1600
- static get formAssociated() {
1601
- return !0;
1602
- }
1603
- // Set default behavior when the element is attached to a form
1604
- formResetCallback() {
1605
- this.checked = !1;
1606
- }
1607
- formStateRestoreCallback(t) {
1608
- this.checked = t;
1609
- }
1610
- setupForId() {
1611
- const t = Math.random().toString(36).substr(2, 9);
1612
- this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
1613
- }
1614
- get variant() {
1615
- return this.getAttribute("variant");
1616
- }
1617
- set variant(t) {
1618
- this.setAttribute("variant", t);
1619
- }
1620
- get state() {
1621
- return this.getAttribute("state");
1622
- }
1623
- set state(t) {
1624
- this.setAttribute("state", t);
1625
- }
1626
- get $checkbox() {
1627
- return this.shadowRoot.querySelector(".checkbox");
1628
- }
1629
- get $label() {
1630
- return this.shadowRoot.querySelector("label");
1631
- }
1632
- get $labelSlot() {
1633
- return this.querySelector('[slot="label"]');
1634
- }
1635
- get $iconSlot() {
1636
- return this.querySelector('px-icon[slot="before"]');
1637
- }
1638
- get inverted() {
1639
- return this.getAttribute("inverted");
1640
- }
1641
- set inverted(t) {
1642
- this.setAttribute("inverted", t);
1643
- }
1644
- get checked() {
1645
- return this.$el.checked;
1646
- }
1647
- set checked(t) {
1648
- this.$el.checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1649
- }
1650
- };
1651
- q.nativeName = "input";
1652
- let w = q;
1653
- customElements.define("px-checkbox", w);
1654
- const it = new CSSStyleSheet();
1655
- it.replaceSync(f);
1656
- const Zt = ["", "left", "right"];
1657
- class Qt extends h {
1658
- template() {
1659
- return `
1660
- <div class="cell-checkbox">
1661
- <px-cell hoverable>
1662
- <px-checkbox slot="prefix" aria-hidden="true" tabindex="-1" ${this.name ? 'name="${this.name"' : ""} ${this.value ? 'value="${this.value"' : ""}></px-checkbox>
1663
- <slot name="visual" slot="visual"></slot>
1664
- <slot></slot>
1665
- <slot name="description" slot="description"></slot>
1666
- <slot name="suffix" slot="suffix"></slot>
1667
- </px-cell>
1668
- `;
1669
- }
1670
- constructor() {
1671
- var t;
1672
- super(it), 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}`);
1673
- }
1674
- connectedCallback() {
1675
- if (this.$slotVisual) {
1676
- const t = this.querySelector('px-icon[slot="visual"]'), e = this.querySelector('px-img[slot="visual"]');
1677
- t && u(t), e && g(e);
1678
- }
1679
- this.addEventListener("mouseover", () => {
1680
- this.$checkbox.setAttribute("hover", "");
1681
- }), this.addEventListener("mouseout", () => {
1682
- this.$checkbox.removeAttribute("hover");
1683
- }), this.addEventListener("keypress", (t) => {
1684
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
1685
- case "Space":
1686
- this.click();
1687
- break;
1688
- }
1689
- }), this.addEventListener("click", (t) => {
1690
- this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1691
- }), this.hasAttribute("checked") && (this.checked = !0), v(this);
1692
- }
1693
- static get observedAttributes() {
1694
- return [
1695
- "inverted",
1696
- "variant",
1697
- "disabled",
1698
- "separator",
1699
- "separator--tablet",
1700
- "separator--laptop",
1701
- "radius",
1702
- "radius--tablet",
1703
- "radius--laptop",
1704
- "name",
1705
- "value",
1706
- "state",
1707
- "checked",
1708
- "checkbox-position",
1709
- "background-color"
1710
- ];
1711
- }
1712
- attributeChangedCallback(t, e, r) {
1713
- if (e !== r)
1714
- switch (t) {
1715
- case "variant":
1716
- this.$cell.variant = this.variant;
1717
- break;
1718
- case "inverted":
1719
- y(this.$cell, this.$children, this.inverted, [
1720
- this.$checkbox
1721
- ]);
1722
- break;
1723
- case "disabled":
1724
- this.handleDisabledAttributeChange(r !== null);
1725
- break;
1726
- case "radius":
1727
- case "radius--tablet":
1728
- case "radius--laptop":
1729
- case "separator":
1730
- case "separator--tablet":
1731
- case "separator--laptop":
1732
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
1733
- break;
1734
- case "name":
1735
- case "value":
1736
- this.$checkbox && this.$checkbox.setAttribute(t, r);
1737
- break;
1738
- case "state":
1739
- if (this.$checkbox)
1740
- if (this.checkName(ot, r))
1741
- this.$checkbox.setAttribute("state", r);
1742
- else {
1743
- console.error(`${r} is not a valid state value for`, this);
1744
- return;
1745
- }
1746
- break;
1747
- case "checked":
1748
- this.handleCheckedAttributeChange(r);
1749
- break;
1750
- case "checkbox-position":
1751
- this.handleCheckboxPositionChange(r);
1752
- break;
1753
- case "background-color":
1754
- x(
1755
- this.$el,
1756
- t,
1757
- e,
1758
- r,
1759
- p
1760
- );
1761
- break;
1762
- }
1763
- }
1764
- handleDisabledAttributeChange(t) {
1765
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$checkbox.setAttribute("disabled", ""), this.$children.forEach((e) => {
1766
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
1767
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$checkbox.removeAttribute("disabled"), this.$children.forEach((e) => {
1768
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
1769
- }));
1770
- }
1771
- handleCheckedAttributeChange(t) {
1772
- var e;
1773
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
1774
- new Event("change", {
1775
- bubbles: !0,
1776
- composed: !0
1777
- // Allow the event to pass through shadow DOM boundaries
1778
- })
1779
- ));
1780
- }
1781
- handleCheckboxPositionChange(t) {
1782
- if (!this.checkName(Zt, t)) {
1783
- console.error(`${t} is not a valid position value for`, this);
1784
- return;
1785
- }
1786
- this.$checkbox && (t === "" || t === "left" ? this.$checkbox.setAttribute("slot", "prefix") : t === "right" && this.$checkbox.setAttribute("slot", "action-indicator"));
1787
- }
1788
- // Form-associated callbacks
1789
- static get formAssociated() {
1790
- return !0;
1791
- }
1792
- // Set default behavior when the element is attached to a form
1793
- formResetCallback() {
1794
- this.checked = !1;
1795
- }
1796
- formStateRestoreCallback(t) {
1797
- this.checked = t;
1798
- }
1799
- formData() {
1800
- if (this.name) {
1801
- const t = new FormData(), e = this.getAttribute("name");
1802
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
1803
- }
1804
- }
1805
- get $cell() {
1806
- return this.shadowRoot.querySelector("px-cell");
1807
- }
1808
- get $el() {
1809
- return this.shadowRoot.querySelector(".cell-checkbox");
1810
- }
1811
- get $checkbox() {
1812
- return this.shadowRoot.querySelector("px-checkbox");
1813
- }
1814
- get $slotVisual() {
1815
- return this.querySelector('[slot="visual"]');
1816
- }
1817
- get $children() {
1818
- return this.querySelectorAll("px-cell-checkbox > *");
1819
- }
1820
- get inverted() {
1821
- return this.hasAttribute("inverted");
1822
- }
1823
- set inverted(t) {
1824
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1825
- }
1826
- get variant() {
1827
- return this.getAttribute("variant");
1828
- }
1829
- set variant(t) {
1830
- this.setAttribute("variant", t);
1831
- }
1832
- get disabled() {
1833
- return this.hasAttribute("disabled");
1834
- }
1835
- set disabled(t) {
1836
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
1837
- }
1838
- get separator() {
1839
- return this.getAttribute("separator");
1840
- }
1841
- set separator(t) {
1842
- this.setAttribute("separator", t);
1843
- }
1844
- get separatorTablet() {
1845
- return this.getAttribute("separator--tablet");
1846
- }
1847
- set separatorTablet(t) {
1848
- this.setAttribute("separator--tablet", t);
1849
- }
1850
- get separatorLaptop() {
1851
- return this.getAttribute("separator--laptop");
1852
- }
1853
- set separatorLaptop(t) {
1854
- this.setAttribute("separator--laptop", t);
1855
- }
1856
- get radius() {
1857
- return this.getAttribute("radius");
1858
- }
1859
- set radius(t) {
1860
- this.setAttribute("radius", t);
1861
- }
1862
- get radiusTablet() {
1863
- return this.getAttribute("radius--tablet");
1864
- }
1865
- set radiusTablet(t) {
1866
- this.setAttribute("radius--tablet", t);
1867
- }
1868
- get radiusLaptop() {
1869
- return this.getAttribute("radius--laptop");
1870
- }
1871
- set radiusLaptop(t) {
1872
- this.setAttribute("radius--laptop", t);
1873
- }
1874
- get checked() {
1875
- return this.hasAttribute("checked");
1876
- }
1877
- set checked(t) {
1878
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
1879
- }
1880
- get name() {
1881
- return this.getAttribute("name");
1882
- }
1883
- set name(t) {
1884
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
1885
- }
1886
- get state() {
1887
- return this.getAttribute("state");
1888
- }
1889
- set state(t) {
1890
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
1891
- }
1892
- get value() {
1893
- return this.getAttribute("value");
1894
- }
1895
- set value(t) {
1896
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
1897
- }
1898
- get checkboxPosition() {
1899
- return this.getAttribute("checkbox-position");
1900
- }
1901
- set checkboxPosition(t) {
1902
- t ? this.setAttribute("checkbox-position", t) : this.removeAttribute("checkbox-position");
1903
- }
1904
- get backgroundColor() {
1905
- return this.getAttribute("background-color");
1906
- }
1907
- set backgroundColor(t) {
1908
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
1909
- }
1910
- }
1911
- customElements.get("px-cell-checkbox") || customElements.define("px-cell-checkbox", Qt);
1912
- const at = new CSSStyleSheet();
1913
- at.replaceSync(f);
1914
- class Wt extends h {
1915
- template() {
1916
- return `
1917
- <div class="cell-switch">
1918
- <px-cell hoverable>
1919
- <px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
1920
- <slot name="visual" slot="visual"></slot>
1921
- <slot></slot>
1922
- <slot name="description" slot="description"></slot>
1923
- <slot name="suffix" slot="suffix"></slot>
1924
- </px-cell>
1925
- `;
1926
- }
1927
- constructor() {
1928
- var t;
1929
- super(at), 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}`);
1930
- }
1931
- connectedCallback() {
1932
- if (this.$slotVisual) {
1933
- const t = this.querySelector('px-icon[slot="visual"]'), e = this.querySelector('px-img[slot="visual"]');
1934
- t && u(t), e && g(e);
1935
- }
1936
- this.addEventListener("mouseover", () => {
1937
- this.$switch.setAttribute("hover", "");
1938
- }), this.addEventListener("mouseout", () => {
1939
- this.$switch.removeAttribute("hover");
1940
- }), this.addEventListener("keypress", (t) => {
1941
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
1942
- case "Space":
1943
- this.click();
1944
- break;
1945
- }
1946
- }), this.addEventListener("click", (t) => {
1947
- this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
1948
- }), this.hasAttribute("checked") && (this.checked = !0), v(this);
1949
- }
1950
- static get observedAttributes() {
1951
- return [
1952
- "inverted",
1953
- "variant",
1954
- "disabled",
1955
- "separator",
1956
- "separator--tablet",
1957
- "separator--laptop",
1958
- "radius",
1959
- "radius--tablet",
1960
- "radius--laptop",
1961
- "name",
1962
- "value",
1963
- "checked",
1964
- "background-color"
1965
- ];
1966
- }
1967
- attributeChangedCallback(t, e, r) {
1968
- if (e !== r)
1969
- switch (t) {
1970
- case "variant":
1971
- this.$cell.variant = this.variant;
1972
- break;
1973
- case "inverted":
1974
- y(this.$cell, this.$children, this.inverted, [
1975
- this.$switch
1976
- ]);
1977
- break;
1978
- case "disabled":
1979
- this.handleDisabledAttributeChange(r !== null);
1980
- break;
1981
- case "radius":
1982
- case "radius--tablet":
1983
- case "radius--laptop":
1984
- case "separator":
1985
- case "separator--tablet":
1986
- case "separator--laptop":
1987
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
1988
- break;
1989
- case "name":
1990
- case "value":
1991
- this.$switch && this.$switch.setAttribute(t, r);
1992
- break;
1993
- case "checked":
1994
- this.handleCheckedAttributeChange(r);
1995
- break;
1996
- case "background-color":
1997
- x(
1998
- this.$el,
1999
- t,
2000
- e,
2001
- r,
2002
- p
2003
- );
2004
- break;
2005
- }
2006
- }
2007
- handleDisabledAttributeChange(t) {
2008
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$switch.setAttribute("disabled", ""), this.$children.forEach((e) => {
2009
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
2010
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$switch.removeAttribute("disabled"), this.$children.forEach((e) => {
2011
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
2012
- }));
2013
- }
2014
- handleCheckedAttributeChange(t) {
2015
- var e;
2016
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
2017
- new Event("change", {
2018
- bubbles: !0,
2019
- composed: !0
2020
- // Allow the event to pass through shadow DOM boundaries
2021
- })
2022
- ));
2023
- }
2024
- // Form-associated callbacks
2025
- static get formAssociated() {
2026
- return !0;
2027
- }
2028
- // Set default behavior when the element is attached to a form
2029
- formResetCallback() {
2030
- this.checked = !1;
2031
- }
2032
- formStateRestoreCallback(t) {
2033
- this.checked = t;
2034
- }
2035
- formData() {
2036
- if (this.name) {
2037
- const t = new FormData(), e = this.getAttribute("name");
2038
- return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
2039
- }
2040
- }
2041
- get $cell() {
2042
- return this.shadowRoot.querySelector("px-cell");
2043
- }
2044
- get $el() {
2045
- return this.shadowRoot.querySelector(".cell-switch");
2046
- }
2047
- get $switch() {
2048
- return this.shadowRoot.querySelector("px-switch");
2049
- }
2050
- get $slotVisual() {
2051
- return this.querySelector('[slot="visual"]');
2052
- }
2053
- get $children() {
2054
- return this.querySelectorAll("px-cell-switch > *");
2055
- }
2056
- get inverted() {
2057
- return this.hasAttribute("inverted");
2058
- }
2059
- set inverted(t) {
2060
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
2061
- }
2062
- get variant() {
2063
- return this.getAttribute("variant");
2064
- }
2065
- set variant(t) {
2066
- this.setAttribute("variant", t);
2067
- }
2068
- get disabled() {
2069
- return this.hasAttribute("disabled");
2070
- }
2071
- set disabled(t) {
2072
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2073
- }
2074
- get separator() {
2075
- return this.getAttribute("separator");
2076
- }
2077
- set separator(t) {
2078
- this.setAttribute("separator", t);
2079
- }
2080
- get separatorTablet() {
2081
- return this.getAttribute("separator--tablet");
2082
- }
2083
- set separatorTablet(t) {
2084
- this.setAttribute("separator--tablet", t);
2085
- }
2086
- get separatorLaptop() {
2087
- return this.getAttribute("separator--laptop");
2088
- }
2089
- set separatorLaptop(t) {
2090
- this.setAttribute("separator--laptop", t);
2091
- }
2092
- get radius() {
2093
- return this.getAttribute("radius");
2094
- }
2095
- set radius(t) {
2096
- this.setAttribute("radius", t);
2097
- }
2098
- get radiusTablet() {
2099
- return this.getAttribute("radius--tablet");
2100
- }
2101
- set radiusTablet(t) {
2102
- this.setAttribute("radius--tablet", t);
2103
- }
2104
- get radiusLaptop() {
2105
- return this.getAttribute("radius--laptop");
2106
- }
2107
- set radiusLaptop(t) {
2108
- this.setAttribute("radius--laptop", t);
2109
- }
2110
- get checked() {
2111
- return this.hasAttribute("checked");
2112
- }
2113
- set checked(t) {
2114
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
2115
- }
2116
- get name() {
2117
- return this.getAttribute("name");
2118
- }
2119
- set name(t) {
2120
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
2121
- }
2122
- get state() {
2123
- return this.getAttribute("state");
2124
- }
2125
- set state(t) {
2126
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
2127
- }
2128
- get value() {
2129
- return this.getAttribute("value");
2130
- }
2131
- set value(t) {
2132
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
2133
- }
2134
- get backgroundColor() {
2135
- return this.getAttribute("background-color");
2136
- }
2137
- set backgroundColor(t) {
2138
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
2139
- }
2140
- }
2141
- customElements.get("px-cell-switch") || customElements.define("px-cell-switch", Wt);
2142
- const Gt = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-border-color-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-border-color-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-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-m) * 1em);font-weight:400;color:var(--px-text-color-heading-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-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-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-background-color-action-primary-default);border-color:var(--px-border-color-none);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-border-size-l) solid var(--px-border-color-action-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-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-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-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-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-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-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-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-border-color-action-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-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")}: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-border-color-action-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-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-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-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-border-color-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-background-color-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-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-text-color-heading-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-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-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-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-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-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-after-element-s-tablet)}:host(:focus-visible){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){.radio{gap:var(--px-spacing-after-element-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)}}`, st = new CSSStyleSheet();
2143
- st.replaceSync(Gt);
2144
- const P = class P extends n {
2145
- constructor() {
2146
- super(st), this.template = () => `<div class="radio" tabindex="-1">
2147
- <input type="radio" tabindex="-1" />
2148
- <label><slot name="before"></slot><slot name="label"></slot></label>
2149
- </div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
2150
- }
2151
- static get observedAttributes() {
2152
- return [...super.observedAttributes, "hover", "inverted"];
2153
- }
2154
- attributeChangedCallback(t, e, r) {
2155
- if (e !== r)
2156
- switch (t) {
2157
- case "hover":
2158
- this.$el.classList.toggle("hover");
2159
- break;
2160
- default:
2161
- super.attributeChangedCallback(t, e, r);
2162
- break;
2163
- }
2164
- }
2165
- get $radio() {
2166
- return this.shadowRoot.querySelector(".radio");
2167
- }
2168
- get $labelSlot() {
2169
- return this.querySelector('[slot="label"]');
2170
- }
2171
- get $iconSlot() {
2172
- return this.querySelector('px-icon[slot="before"]');
2173
- }
2174
- get inverted() {
2175
- return this.getAttribute("inverted");
2176
- }
2177
- set inverted(t) {
2178
- this.setAttribute("inverted", t);
2179
- }
2180
- };
2181
- P.nativeName = "input";
2182
- let A = P;
2183
- customElements.define("px-radio-base", A);
2184
- const nt = ["", "default", "selectable-tag"], lt = ["", "error"], D = class D extends A {
2185
- constructor() {
2186
- var t, e;
2187
- 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}`);
2188
- }
2189
- static get observedAttributes() {
2190
- return [...super.observedAttributes, "state", "variant", "inverted"];
2191
- }
2192
- connectedCallback() {
2193
- this.addEventListener("keypress", (t) => {
2194
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
2195
- case "Space":
2196
- this.click();
2197
- break;
2198
- }
2199
- }), this.addEventListener("click", (t) => {
2200
- this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
2201
- }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot ? this.$radio.classList.add("all-slots-empty") : this.$radio.classList.remove("all-slots-empty");
2202
- }
2203
- attributeChangedCallback(t, e, r) {
2204
- if (e !== r)
2205
- switch (t) {
2206
- case "state":
2207
- this.updateAttribute(e, r, lt, t);
2208
- break;
2209
- case "variant":
2210
- this.updateAttribute(
2211
- e,
2212
- r,
2213
- nt,
2214
- t
2215
- );
2216
- break;
2217
- case "checked":
2218
- this.handleCheckedChange(r !== null);
2219
- break;
2220
- default:
2221
- super.attributeChangedCallback(t, e, r);
2222
- break;
2223
- }
2224
- }
2225
- // Form-associated callbacks
2226
- static get formAssociated() {
2227
- return !0;
2228
- }
2229
- // Set default behavior when the element is attached to a form
2230
- formResetCallback() {
2231
- this.checked = !1;
2232
- }
2233
- formStateRestoreCallback(t) {
2234
- this.checked = t;
2235
- }
2236
- updateAttribute(t, e, r, o) {
2237
- var a, s;
2238
- if (!this.checkName(r, e)) {
2239
- console.error(
2240
- `${e} is not a valid ${o} value for`,
2241
- this.$el
2242
- );
2243
- return;
2244
- }
2245
- t !== null && (o === "variant" ? (a = this.$el.parentElement) == null || a.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));
2246
- }
2247
- handleCheckedChange(t) {
2248
- var e;
2249
- this.$el.checked = t, (e = this.internals) == null || e.setFormValue(this.formData()), t ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("checked", "")) : (this.tabIndex = -1, this.removeAttribute("checked"), this.internals && (this.internals.ariaChecked = "false")), t && this.dispatchEvent(
2250
- new Event("change", {
2251
- bubbles: !0,
2252
- composed: !0
2253
- // Allow the event to pass through shadow DOM boundaries
2254
- })
2255
- );
2256
- }
2257
- formData() {
2258
- if (this.$el.name) {
2259
- const t = new FormData(), e = this.getAttribute("name");
2260
- return e && (this.$el.checked ? t.set(e, this.$el.value) : t.delete(e)), t;
2261
- }
2262
- }
2263
- setupForId() {
2264
- const t = Math.random().toString(36).substr(2, 9);
2265
- this.$el.setAttribute("id", t), this.$label && this.$label.setAttribute("for", t);
2266
- }
2267
- checkName(t, e) {
2268
- return t.includes(e);
2269
- }
2270
- get state() {
2271
- return this.getAttribute("state");
2272
- }
2273
- set state(t) {
2274
- this.setAttribute("state", t);
2275
- }
2276
- get disabled() {
2277
- return this.getAttribute("disabled") !== null;
2278
- }
2279
- set disabled(t) {
2280
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2281
- }
2282
- get $label() {
2283
- return this.shadowRoot.querySelector("label");
2284
- }
2285
- get inverted() {
2286
- return this.getAttribute("inverted");
2287
- }
2288
- set inverted(t) {
2289
- this.setAttribute("inverted", t);
2290
- }
2291
- get checked() {
2292
- return this.$el.checked;
2293
- }
2294
- set checked(t) {
2295
- t ? this.setAttribute("checked", t ? "" : "false") : this.removeAttribute("checked");
2296
- }
2297
- get $radio() {
2298
- return this.shadowRoot.querySelector(".radio");
2299
- }
2300
- get $labelSlot() {
2301
- return this.querySelector('[slot="label"]');
2302
- }
2303
- get $iconSlot() {
2304
- return this.querySelector('px-icon[slot="before"]');
2305
- }
2306
- };
2307
- D.nativeName = "input";
2308
- let E = D;
2309
- customElements.define("px-radio", E);
2310
- const Ut = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-after-element-xs-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-after-element-xs-tablet) )}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--laptop, var(--px-spacing-after-element-xs-desktop) )}}", dt = new CSSStyleSheet();
2311
- dt.replaceSync(Ut);
2312
- const Yt = [
2313
- "",
2314
- "after-element-none",
2315
- "after-element-2xs",
2316
- "after-element-xs",
2317
- "after-element-s",
2318
- "after-element-default",
2319
- "after-element-l"
2320
- ], H = class H extends n {
2321
- constructor() {
2322
- var t;
2323
- super(dt), this.template = () => `<div role="radiogroup">
2324
- <slot></slot>
2325
- </div>`, this.handleKeyDown = () => {
2326
- var r;
2327
- const e = this.currentCheckedRadio ? ((r = this.currentCheckedRadio) == null ? void 0 : r.nextElementSibling) ?? this.$radioList[0] : this.$radioList[1];
2328
- e.checked = !0, e.focus();
2329
- }, this.handleKeyUp = () => {
2330
- var r;
2331
- const e = ((r = this.currentCheckedRadio) == null ? void 0 : r.previousElementSibling) ?? this.$radioList[this.$radioList.length - 1];
2332
- e.checked = !0, e.focus();
2333
- }, this.handleRadioChange = (e) => {
2334
- const r = e.target;
2335
- if (r.localName === "px-tile-radio" || r.localName === "px-radio" || r.localName === "px-cell-radio") {
2336
- this.currentCheckedRadio = r;
2337
- const o = r.getAttribute("name");
2338
- o && this.currentCheckedRadio.checked && this.uncheckOtherRadios(o);
2339
- }
2340
- }, this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
2341
- }
2342
- static get observedAttributes() {
2343
- return [
2344
- ...super.observedAttributes,
2345
- "name",
2346
- "gap",
2347
- "variant",
2348
- "required",
2349
- "disabled",
2350
- "state",
2351
- "inverted"
2352
- ];
2353
- }
2354
- connectedCallback() {
2355
- (!this.hasAttribute("name") || this.getAttribute("name") === "") && console.error(
2356
- '<px-radio-group> requires a "name" attribute to function properly.'
2357
- ), this.addEventListener("change", this.handleRadioChange), this.addEventListener("keydown", (t) => {
2358
- switch (t.code) {
2359
- case "ArrowUp":
2360
- case "ArrowDown":
2361
- t.stopPropagation(), t.preventDefault();
2362
- }
2363
- }), this.addEventListener("keyup", (t) => {
2364
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
2365
- case "ArrowUp":
2366
- case "ArrowLeft":
2367
- this.handleKeyUp();
2368
- break;
2369
- case "ArrowDown":
2370
- case "ArrowRight":
2371
- this.handleKeyDown();
2372
- break;
2373
- }
2374
- });
2375
- }
2376
- disconnectedCallback() {
2377
- this.removeEventListener("change", this.handleRadioChange);
2378
- }
2379
- attributeChangedCallback(t, e, r) {
2380
- e !== r && (t === "gap" ? this.updateGap(e, r, Yt) : t === "variant" ? this.updateVariant(e, r, nt) : this.$radioList.forEach((o) => {
2381
- if (r === null)
2382
- o.removeAttribute(t);
2383
- else
2384
- switch (t) {
2385
- case "required":
2386
- this.$el.ariaRequired = "true";
2387
- break;
2388
- case "state":
2389
- r === "error" && (this.$el.ariaInvalid = "true", o.setAttribute(t, r));
2390
- break;
2391
- case "disabled":
2392
- this.$el.ariaDisabled = "true", o.setAttribute(t, r);
2393
- break;
2394
- default:
2395
- o.setAttribute(t, r);
2396
- break;
2397
- }
2398
- }));
2399
- }
2400
- uncheckOtherRadios(t) {
2401
- this.querySelectorAll(
2402
- `px-radio[name="${t}"], px-tile-radio[name="${t}"], px-cell-radio[name="${t}"]`
2403
- ).forEach((r) => {
2404
- r !== this.currentCheckedRadio && (r.checked = !1);
2405
- });
2406
- }
2407
- updateVariant(t, e, r) {
2408
- if (!this.checkName(r, e)) {
2409
- console.error(`${e} is not a valid variant value for`, this.$el);
2410
- return;
2411
- }
2412
- t !== null && t !== "" && this.$el.classList.toggle(t), e !== null && e !== "" && (this.$el.classList.toggle(e), this.$radioList.forEach((o) => {
2413
- o.setAttribute("variant", e);
2414
- }));
2415
- }
2416
- updateGap(t, e, r) {
2417
- if (!this.checkName(r, e)) {
2418
- console.error(`${e} is not a valid gap value for`, this.$el);
2419
- return;
2420
- }
2421
- this.updateGapStyle(t), this.updateGapStyle(e);
2422
- }
2423
- updateGapStyle(t) {
2424
- t !== null && t !== "" && t !== "default" && (this.$el.style.setProperty(
2425
- "--px-radiogroup-gap--mobile",
2426
- `var(--px-spacing-${t}-mobile)`
2427
- ), this.$el.style.setProperty(
2428
- "--px-radiogroup-gap--tablet",
2429
- `var(--px-spacing-${t}-tablet)`
2430
- ), this.$el.style.setProperty(
2431
- "--px-radiogroup-gap--laptop",
2432
- `var(--px-spacing-${t}-desktop)`
2433
- ));
2434
- }
2435
- checkName(t, e) {
2436
- return t.includes(e);
2437
- }
2438
- get $radioList() {
2439
- return this.querySelectorAll(
2440
- "px-radio, px-tile-radio, px-cell-radio"
2441
- );
2442
- }
2443
- get gap() {
2444
- return this.getAttribute("gap");
2445
- }
2446
- set gap(t) {
2447
- this.setAttribute("gap", t);
2448
- }
2449
- get variant() {
2450
- return this.getAttribute("variant");
2451
- }
2452
- set variant(t) {
2453
- this.setAttribute("variant", t);
2454
- }
2455
- get state() {
2456
- return this.getAttribute("state");
2457
- }
2458
- set state(t) {
2459
- this.setAttribute("state", t);
2460
- }
2461
- get $label() {
2462
- return this.shadowRoot.querySelector("label");
2463
- }
2464
- get inverted() {
2465
- return this.getAttribute("inverted");
2466
- }
2467
- set inverted(t) {
2468
- this.setAttribute("inverted", t);
2469
- }
2470
- };
2471
- H.nativeName = "div";
2472
- let L = H;
2473
- customElements.define("px-radio-group", L);
2474
- const ct = new CSSStyleSheet();
2475
- ct.replaceSync(f);
2476
- const Kt = ["", "left", "right"];
2477
- class Jt extends h {
2478
- template() {
2479
- return `
2480
- <div class="cell-radio">
2481
- <px-cell hoverable>
2482
- <px-radio-base slot="prefix" aria-hidden="true" tabindex="-1"></px-radio-base>
2483
- <slot name="visual" slot="visual"></slot>
2484
- <slot></slot>
2485
- <slot name="description" slot="description"></slot>
2486
- <slot name="suffix" slot="suffix"></slot>
2487
- </px-cell>
2488
- `;
2489
- }
2490
- constructor() {
2491
- var t, e;
2492
- super(ct), 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}`);
2493
- }
2494
- connectedCallback() {
2495
- if (this.$slotVisual) {
2496
- const t = this.querySelector('px-icon[slot="visual"]'), e = this.querySelector('px-img[slot="visual"]');
2497
- t && u(t), e && g(e);
2498
- }
2499
- this.addEventListener("mouseover", () => {
2500
- this.$radio.setAttribute("hover", "");
2501
- }), this.addEventListener("mouseout", () => {
2502
- this.$radio.removeAttribute("hover");
2503
- }), this.addEventListener("keypress", (t) => {
2504
- switch (t.stopPropagation(), t.preventDefault(), t.code) {
2505
- case "Space":
2506
- this.click();
2507
- break;
2508
- }
2509
- }), this.addEventListener("click", (t) => {
2510
- this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault();
2511
- }), this.hasAttribute("checked") && (this.checked = !0), v(this);
2512
- }
2513
- static get observedAttributes() {
2514
- return [
2515
- "inverted",
2516
- "variant",
2517
- "disabled",
2518
- "separator",
2519
- "separator--tablet",
2520
- "separator--laptop",
2521
- "radius",
2522
- "radius--tablet",
2523
- "radius--laptop",
2524
- "name",
2525
- "value",
2526
- "state",
2527
- "checked",
2528
- "radio-position",
2529
- "background-color"
2530
- ];
2531
- }
2532
- attributeChangedCallback(t, e, r) {
2533
- if (e !== r)
2534
- switch (t) {
2535
- case "variant":
2536
- this.$cell.variant = this.variant;
2537
- break;
2538
- case "inverted":
2539
- y(this.$cell, this.$children, this.inverted, [
2540
- this.$radio
2541
- ]);
2542
- break;
2543
- case "disabled":
2544
- this.handleDisabledAttributeChange(r !== null);
2545
- break;
2546
- case "radius":
2547
- case "radius--tablet":
2548
- case "radius--laptop":
2549
- case "separator":
2550
- case "separator--tablet":
2551
- case "separator--laptop":
2552
- this.$cell.setAttribute(t, this.getAttribute(t) || "");
2553
- break;
2554
- case "name":
2555
- case "value":
2556
- this.$radio && this.$radio.setAttribute(t, r);
2557
- break;
2558
- case "state":
2559
- if (this.$radio)
2560
- if (this.checkName(lt, r))
2561
- this.$radio.setAttribute("state", r);
2562
- else {
2563
- console.error(`${r} is not a valid state value for`, this);
2564
- return;
2565
- }
2566
- break;
2567
- case "checked":
2568
- this.handleCheckedAttributeChange(r);
2569
- break;
2570
- case "radio-position":
2571
- this.handleRadioPositionChange(r);
2572
- break;
2573
- case "background-color":
2574
- x(
2575
- this.$el,
2576
- t,
2577
- e,
2578
- r,
2579
- p
2580
- );
2581
- break;
2582
- }
2583
- }
2584
- handleDisabledAttributeChange(t) {
2585
- t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.$cell.disabled = !0, this.$radio.setAttribute("disabled", ""), this.$children.forEach((e) => {
2586
- e.hasAttribute("disabled") || e.setAttribute("disabled", "");
2587
- })) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.$cell.disabled = !1, this.$radio.removeAttribute("disabled"), this.$children.forEach((e) => {
2588
- e.hasAttribute("disabled") && e.removeAttribute("disabled");
2589
- }));
2590
- }
2591
- handleCheckedAttributeChange(t) {
2592
- var e;
2593
- (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.setAttribute("tabIndex", "-1"), this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("tabIndex", "0"), this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
2594
- new Event("change", {
2595
- bubbles: !0,
2596
- composed: !0
2597
- // Allow the event to pass through shadow DOM boundaries
2598
- })
2599
- ));
2600
- }
2601
- handleRadioPositionChange(t) {
2602
- if (!this.checkName(Kt, t)) {
2603
- console.error(`${t} is not a valid position value for`, this);
2604
- return;
2605
- }
2606
- this.$radio && (t === "" || t === "left" ? this.$radio.setAttribute("slot", "prefix") : t === "right" && this.$radio.setAttribute("slot", "action-indicator"));
2607
- }
2608
- // Form-associated callbacks
2609
- static get formAssociated() {
2610
- return !0;
2611
- }
2612
- // Set default behavior when the element is attached to a form
2613
- formResetCallback() {
2614
- this.checked = !1;
2615
- }
2616
- formStateRestoreCallback(t) {
2617
- this.checked = t;
2618
- }
2619
- formData() {
2620
- if (this.name) {
2621
- const t = new FormData(), e = this.getAttribute("name");
2622
- return e && (this.checked ? t.set(e, this.$radio.value) : t.delete(e)), t;
2623
- }
2624
- }
2625
- get $cell() {
2626
- return this.shadowRoot.querySelector("px-cell");
2627
- }
2628
- get $el() {
2629
- return this.shadowRoot.querySelector(".cell-radio");
2630
- }
2631
- get $radio() {
2632
- return this.shadowRoot.querySelector("px-radio-base");
2633
- }
2634
- get $slotVisual() {
2635
- return this.querySelector('[slot="visual"]');
2636
- }
2637
- get $children() {
2638
- return this.querySelectorAll("px-cell-radio > *");
2639
- }
2640
- get inverted() {
2641
- return this.hasAttribute("inverted");
2642
- }
2643
- set inverted(t) {
2644
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
2645
- }
2646
- get variant() {
2647
- return this.getAttribute("variant");
2648
- }
2649
- set variant(t) {
2650
- this.setAttribute("variant", t);
2651
- }
2652
- get disabled() {
2653
- return this.hasAttribute("disabled");
2654
- }
2655
- set disabled(t) {
2656
- t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
2657
- }
2658
- get separator() {
2659
- return this.getAttribute("separator");
2660
- }
2661
- set separator(t) {
2662
- this.setAttribute("separator", t);
2663
- }
2664
- get separatorTablet() {
2665
- return this.getAttribute("separator--tablet");
2666
- }
2667
- set separatorTablet(t) {
2668
- this.setAttribute("separator--tablet", t);
2669
- }
2670
- get separatorLaptop() {
2671
- return this.getAttribute("separator--laptop");
2672
- }
2673
- set separatorLaptop(t) {
2674
- this.setAttribute("separator--laptop", t);
2675
- }
2676
- get radius() {
2677
- return this.getAttribute("radius");
2678
- }
2679
- set radius(t) {
2680
- this.setAttribute("radius", t);
2681
- }
2682
- get radiusTablet() {
2683
- return this.getAttribute("radius--tablet");
2684
- }
2685
- set radiusTablet(t) {
2686
- this.setAttribute("radius--tablet", t);
2687
- }
2688
- get radiusLaptop() {
2689
- return this.getAttribute("radius--laptop");
2690
- }
2691
- set radiusLaptop(t) {
2692
- this.setAttribute("radius--laptop", t);
2693
- }
2694
- get checked() {
2695
- return this.hasAttribute("checked");
2696
- }
2697
- set checked(t) {
2698
- t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
2699
- }
2700
- get name() {
2701
- return this.getAttribute("name");
2702
- }
2703
- set name(t) {
2704
- t ? this.setAttribute("name", t) : this.removeAttribute("name");
2705
- }
2706
- get state() {
2707
- return this.getAttribute("state");
2708
- }
2709
- set state(t) {
2710
- t ? this.setAttribute("state", t) : this.removeAttribute("state");
2711
- }
2712
- get value() {
2713
- return this.getAttribute("value");
2714
- }
2715
- set value(t) {
2716
- t ? this.setAttribute("value", t) : this.removeAttribute("value");
2717
- }
2718
- get radioPosition() {
2719
- return this.getAttribute("radio-position");
2720
- }
2721
- set radioPosition(t) {
2722
- t ? this.setAttribute("radio-position", t) : this.removeAttribute("radio-position");
2723
- }
2724
- get backgroundColor() {
2725
- return this.getAttribute("background-color");
2726
- }
2727
- set backgroundColor(t) {
2728
- t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
2729
- }
2730
- }
2731
- customElements.get("px-cell-radio") || customElements.define("px-cell-radio", Jt);
2732
- const Xt = ":host>*{padding:2em 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:var(--px-text-size-label-l-mobile)}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-background-color-action-primary-default);color:var(--px-background-color-action-primary-default)}button:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}@media screen and (min-width: 1024px){button{font-size:var(--px-text-size-label-l-desktop)}}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", bt = new CSSStyleSheet();
2733
- bt.replaceSync(Xt);
2734
- class Vt extends h {
2735
- constructor() {
2736
- super(), this.template = () => `${this.getAttribute("href") ? `<px-a font-size="body-l" variant="no-style" href="${this.getAttribute("href")}">
2737
- <slot></slot>
2738
- </px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [bt];
2739
- }
2740
- static get observedAttributes() {
2741
- return ["for", "href"];
2742
- }
2743
- connectedCallback() {
2744
- this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
2745
- }
2746
- attributeChangedCallback(t, e, r) {
2747
- super.attributeChangedCallback(t, e, r), t === "href" && this.$button && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
2748
- }
2749
- setupButtonA11y() {
2750
- this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
2751
- }
2752
- get for() {
2753
- return this.getAttribute("for");
2754
- }
2755
- set for(t) {
2756
- this.setAttribute("for", t);
2757
- }
2758
- get checked() {
2759
- return this.$button.ariaExpanded === "true";
2760
- }
2761
- set checked(t) {
2762
- if (typeof t != "boolean")
2763
- throw new Error("checked must be a boolean");
2764
- this.$button.setAttribute("tabindex", t ? "0" : "-1"), this.$button.ariaExpanded = `${!!t}`, this.$button.setAttribute("aria-controls", this.for);
2765
- }
2766
- get $button() {
2767
- return this.shadowRoot.querySelector("button");
2768
- }
2769
- get $a() {
2770
- return this.shadowRoot.querySelector("px-a");
2771
- }
2772
- }
2773
- customElements.get("px-header-item") || customElements.define("px-header-item", Vt);
2774
- const te = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.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)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.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-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", ht = new CSSStyleSheet(), pt = new CSSStyleSheet(), ut = new CSSStyleSheet();
2775
- ht.replaceSync(W);
2776
- pt.replaceSync(Q);
2777
- ut.replaceSync(te);
2778
- const ee = [
2779
- "link",
2780
- "no-style",
2781
- "skip-link",
2782
- "btn-default",
2783
- "btn-secondary",
2784
- "btn-tertiary",
2785
- "icon-link"
2786
- ], re = ["", "default", "alternative"], _ = class _ extends n {
2787
- constructor() {
2788
- super(ht, pt, ut), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
2789
- const t = document.createElement(this.nativeName);
2790
- t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
2791
- }
2792
- static get observedAttributes() {
2793
- return [
2794
- ...super.observedAttributes,
2795
- "disabled",
2796
- "variant",
2797
- "shape",
2798
- "extended",
2799
- "inverted",
2800
- "font-size",
2801
- "color",
2802
- "font-weight"
2803
- ];
2804
- }
2805
- connectedCallback() {
2806
- super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after);
2807
- }
2808
- attributeChangedCallback(t, e, r) {
2809
- if (e !== r)
2810
- switch (t) {
2811
- case "disabled":
2812
- this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
2813
- break;
2814
- case "variant":
2815
- this.updateVariant(e, r);
2816
- break;
2817
- case "shape":
2818
- this.updateShape(e, r);
2819
- break;
2820
- case "extended":
2821
- this.$el.classList.toggle(t);
2822
- break;
2823
- case "font-size":
2824
- this.updateTypography(t, e, r, wt);
2825
- break;
2826
- case "color":
2827
- this.updateTypography(t, e, r, St);
2828
- break;
2829
- case "font-weight":
2830
- this.updateTypography(t, e, r, zt);
2831
- break;
2832
- default:
2833
- super.attributeChangedCallback(t, e, r);
2834
- break;
2835
- }
2836
- }
2837
- configureBeforeAfterIcon(t) {
2838
- const e = t.getAttribute("size"), r = t.getAttribute("color");
2839
- t.addEventListener("click", () => {
2840
- this.$el.focus();
2841
- }), e || t.setAttribute("size", "2xs"), r || t.setAttribute("color", "inherit");
2842
- }
2843
- checkName(t, e) {
2844
- return t.includes(e);
2845
- }
2846
- _toggleClassList(t) {
2847
- if (t.startsWith("btn-")) {
2848
- const e = t.split("-");
2849
- for (const r of e)
2850
- this.$el.classList.toggle(r);
2851
- } else
2852
- this.$el.classList.toggle(t);
2853
- }
2854
- updateVariant(t, e) {
2855
- t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ee, e) || console.error(`Bad "variant" value for ${this.$el}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
2856
- }
2857
- updateShape(t, e) {
2858
- t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(re, e) || console.error(`Bad "shape" value for ${this.$el}`);
2859
- }
2860
- updateTypography(t, e, r, o) {
2861
- 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 for ${this.$el}`);
2862
- }
2863
- get $before() {
2864
- return this.querySelector('[slot="before"]');
2865
- }
2866
- get $after() {
2867
- return this.querySelector('[slot="after"]');
2868
- }
2869
- get $iconNotBeforeAfter() {
2870
- return this.querySelector(
2871
- 'px-icon:not([slot="before"], [slot="after"])'
2872
- );
2873
- }
2874
- get disabled() {
2875
- return this.getAttribute("disabled");
2876
- }
2877
- set disabled(t) {
2878
- this.setAttribute("disabled", t);
2879
- }
2880
- get variant() {
2881
- return this.getAttribute("variant");
2882
- }
2883
- set variant(t) {
2884
- this.setAttribute("variant", t);
2885
- }
2886
- get shape() {
2887
- return this.getAttribute("shape");
2888
- }
2889
- set shape(t) {
2890
- this.setAttribute("shape", t);
2891
- }
2892
- get extended() {
2893
- return this.getAttribute("extended");
2894
- }
2895
- set extended(t) {
2896
- this.setAttribute("extended", t);
2897
- }
2898
- get inverted() {
2899
- return this.getAttribute("inverted");
2900
- }
2901
- set inverted(t) {
2902
- this.setAttribute("inverted", t);
2903
- }
2904
- get fontsize() {
2905
- return this.getAttribute("font-size");
2906
- }
2907
- set fontsize(t) {
2908
- this.setAttribute("font-size", t);
2909
- }
2910
- get color() {
2911
- return this.getAttribute("color");
2912
- }
2913
- set color(t) {
2914
- this.setAttribute("color", t);
2915
- }
2916
- get fontweight() {
2917
- return this.getAttribute("font-weight");
2918
- }
2919
- set fontweight(t) {
2920
- this.setAttribute("font-weight", t);
2921
- }
2922
- };
2923
- _.nativeName = "a";
2924
- let T = _;
2925
- customElements.get("px-a") || customElements.define("px-a", T);
2926
- class oe extends HTMLElement {
2927
- constructor() {
2928
- super(), this.template = `<px-a font-weight="bold" font-size="body-l" color="action-brand" variant="no-style">
2929
- <slot></slot>
2930
- </px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
2931
- const t = this.shadowRoot.querySelector("px-a");
2932
- t && Array.from(this.attributes).forEach((e) => {
2933
- t.setAttribute(e.name, e.value);
2934
- });
2935
- }
2936
- }
2937
- customElements.get("px-mdd-a") || customElements.define("px-mdd-a", oe);
2938
- const ie = "#panel-container{position:absolute;left:0;right:0;z-index:999}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#dropdown-zone-desktop{display:none}@media screen and (min-width: 768px){#dropdown-zone-desktop{display:block;margin-right:calc(var(--px-icon-size-xs-desktop) + var(--px-padding-s-desktop));margin-top:var(--px-padding-s-desktop);margin-bottom:var(--px-spacing-after-element-s-desktop)}}#backdrop-filter{position:absolute;display:none;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 screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", gt = new CSSStyleSheet();
2939
- gt.replaceSync(ie);
2940
- class ae extends h {
2941
- constructor() {
2942
- var t;
2943
- super(gt), this.template = `
2944
- <div id="navigation-items-container">
2945
- <slot name="skip"></slot>
2946
- <px-section padding-block--mobile="s" padding-block="none" background-color="none">
2947
- <px-hstack id="dropdown-zone-desktop" justify-content="space-between" align-items="center">
2948
- <slot name="target-group"></slot>
2949
- <slot name="user-language"></slot>
2950
- </px-hstack>
2951
- <px-hstack gap="after-element-default" wrap="wrap" align-items="center">
2952
- <slot name="header-logo"></slot>
2953
- <slot name="header-entries"></slot>
2954
- <px-spacer></px-spacer>
2955
- <px-hstack gap--mobile="none" gap="after-element-default">
2956
- <slot name="header-actions"></slot>
2957
- <px-button-icon variant="naked">
2958
- <px-icon name="burger_menu" from="lavender"></px-icon>
2959
- </px-button-icon>
2960
- </px-hstack>
2961
- </px-hstack>
2962
- </px-section>
2963
- <px-section id="panel-container" background-color="container-weak" padding="none" background-color="none">
2964
- <slot name="header-panels">
2965
- </px-section>
2966
- <div id="backdrop-filter"></div>
2967
- <slot name="main"></slot>
2968
- </div>
2969
- `, this.shadowRoot.innerHTML = this.template, this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "navigation", this.internals.ariaOrientation = "horizontal");
2970
- }
2971
- connectedCallback() {
2972
- this.addEventListener("click", (t) => {
2973
- const e = t.target.closest(
2974
- "px-header-item"
2975
- );
2976
- e && e.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
2977
- r.checked = !1;
2978
- }), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
2979
- }), this.shadowRoot.addEventListener("click", (t) => {
2980
- t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.togglePanel("__lavender_mobile_menu"));
2981
- }), this.addEventListener("section-item-click", (t) => {
2982
- this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
2983
- r.checked = !1;
2984
- }), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
2985
- `px-header-item[for="${t.detail.for}"]`
2986
- ).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
2987
- }), this.addEventListener("close-panel", () => {
2988
- this.hidePanel(), this.i11yEnableActions(!0);
2989
- }), this.$backdropFilter.addEventListener("click", () => {
2990
- this.hidePanel(), this.i11yEnableActions(!0);
2991
- }), this.createMobileMenuPanel(), this.$targetGroupDropdown && this.$userLanguageDropdown ? this.createMobileMenuPanelDrownowns() : this.$dropDownZoneDesktop.style.display = "none";
2992
- }
2993
- createMobileMenuPanel() {
2994
- var e;
2995
- const t = `
2996
- <px-mdd name="__lavender_mobile_menu">
2997
- <span slot="title">Menu</span>
2998
- <px-mdd-section>
2999
- ${[...this.$navigationItems].map(
3000
- (r) => `<px-mdd-section-item for="${r.getAttribute("for")}">${r.innerText}</px-mdd-section-item>`
3001
- ).join("")}
3002
- ${[...this.$actionLinks].filter((r) => r.hasAttribute("promoted")).map(
3003
- (r) => `<px-mdd-a href="${r.getAttribute("href")}" slot="footer">${r.innerText}</px-mdd-a>`
3004
- ).join("")}
3005
- </px-mdd-section>
3006
- ${this.createMobileMenuPanelDrownowns()}
3007
- </px-mdd>
3008
- `;
3009
- (e = this.$megaDropdowns.item(0)) == null || e.insertAdjacentHTML("beforebegin", t);
3010
- }
3011
- createMobileMenuPanelDrownowns() {
3012
- var r, o;
3013
- const t = (r = this.$targetGroupDropdown) == null ? void 0 : r.cloneNode(
3014
- !0
3015
- );
3016
- t == null || t.removeAttribute("id"), t == null || t.setAttribute("slot", "mdd-footer"), t == null || t.setAttribute("grow", "3"), t == null || t.setAttribute("anchoralignment", "top-left");
3017
- const e = (o = this.$userLanguageDropdown) == null ? void 0 : o.cloneNode(
3018
- !0
3019
- );
3020
- return e == null || e.removeAttribute("id"), e == null || e.setAttribute("slot", "mdd-footer"), e == null || e.setAttribute("grow", "1"), e == null || e.setAttribute("anchoralignment", "top-right"), `${(t == null ? void 0 : t.outerHTML) ?? ""}${(e == null ? void 0 : e.outerHTML) ?? ""}`;
3021
- }
3022
- i11yEnableActions(t = !0) {
3023
- this.querySelectorAll('[slot="header-actions"]').forEach(
3024
- (e) => {
3025
- if (t) {
3026
- e.removeAttribute("tabindex");
3027
- return;
3028
- }
3029
- e.setAttribute("tabindex", "-1");
3030
- }
3031
- );
3032
- }
3033
- togglePanel(t) {
3034
- this.$megaDropdowns.forEach((e) => {
3035
- e.name === t && e.hidden && (e.hidden = !e.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !e.hidden), document.body.style.overflow = e.hidden ? "auto" : "hidden"), e.name !== t && !e.hidden && (e.hidden = !0);
3036
- });
3037
- }
3038
- hidePanel() {
3039
- this.$backdropFilter.style.display = "none", this.$navigationItems.forEach((t) => {
3040
- t.checked = !1, t.$button.setAttribute("tabindex", "0");
3041
- }), this.$megaDropdowns.forEach((t) => {
3042
- t.hidden = !0;
3043
- }), this.i11yEnableActions(!0), document.body.style.overflow = "auto";
3044
- }
3045
- get $navigationItems() {
3046
- return this.querySelectorAll("px-header-item");
3047
- }
3048
- get $megaDropdowns() {
3049
- return this.querySelectorAll("px-mdd");
3050
- }
3051
- get $actionLinks() {
3052
- return this.querySelectorAll("px-action-link");
3053
- }
3054
- get $backdropFilter() {
3055
- return this.shadowRoot.querySelector("#backdrop-filter");
3056
- }
3057
- get $burgerMenu() {
3058
- return this.shadowRoot.querySelector("px-button-icon");
3059
- }
3060
- get $targetGroupDropdown() {
3061
- return this.querySelector('px-dropdown[slot="target-group"]');
3062
- }
3063
- get $userLanguageDropdown() {
3064
- return this.querySelector('px-dropdown[slot="user-language"]');
3065
- }
3066
- get $dropDownZoneDesktop() {
3067
- return this.shadowRoot.querySelector("#dropdown-zone-desktop");
3068
- }
3069
- }
3070
- customElements.get("px-header") || customElements.define("px-header", ae);
3071
- export {
3072
- ae as Header,
3073
- Vt as HeaderItem
3074
- };