@proximus/lavender-carousel 1.0.0-alpha.13 → 1.0.0-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +104 -98
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { WithExtraAttributes as $, AttributeBreakpointHandlerDelegate as
|
|
2
|
-
const
|
|
3
|
-
H.replaceSync(
|
|
4
|
-
const
|
|
1
|
+
import { WithExtraAttributes as $, AttributeBreakpointHandlerDelegate as D, gapValues as q, checkName as K, backgroundColorValues as Q, PxElement as Y, transferAccessibilityAttributes as Z, iconSizeValues as V, cssTokenBreakpoints as tt } from "@proximus/lavender-common";
|
|
2
|
+
const et = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", it = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var(--px-carousel-min-width-desktop,var(--px-carousel-min-width-all-desktop));border-radius:var(--px-radius-main);background:#fff}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile))!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var(--px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet))!important}}", rt = ":host{display:block}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}}", H = new CSSStyleSheet();
|
|
3
|
+
H.replaceSync(rt);
|
|
4
|
+
const st = [
|
|
5
5
|
"",
|
|
6
6
|
"default",
|
|
7
7
|
"row",
|
|
8
8
|
"row-reverse",
|
|
9
9
|
"column",
|
|
10
10
|
"column-reverse"
|
|
11
|
-
],
|
|
11
|
+
], ot = [
|
|
12
12
|
"",
|
|
13
13
|
"default",
|
|
14
14
|
"stretch",
|
|
@@ -16,7 +16,7 @@ const rt = [
|
|
|
16
16
|
"flex-end",
|
|
17
17
|
"center",
|
|
18
18
|
"baseline"
|
|
19
|
-
],
|
|
19
|
+
], at = [
|
|
20
20
|
"",
|
|
21
21
|
"default",
|
|
22
22
|
"flex-start",
|
|
@@ -25,10 +25,10 @@ const rt = [
|
|
|
25
25
|
"space-between",
|
|
26
26
|
"space-around",
|
|
27
27
|
"space-evenly"
|
|
28
|
-
],
|
|
29
|
-
class
|
|
28
|
+
], nt = ["", "default", "nowrap", "wrap", "wrap-reverse"], lt = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
|
+
class S extends $ {
|
|
30
30
|
constructor() {
|
|
31
|
-
super(H), this.overflowXAttributeDelegate = new
|
|
31
|
+
super(H), this.overflowXAttributeDelegate = new D(
|
|
32
32
|
this,
|
|
33
33
|
"overflow-x",
|
|
34
34
|
(t) => t,
|
|
@@ -82,7 +82,7 @@ class z extends $ {
|
|
|
82
82
|
case "gap--tablet":
|
|
83
83
|
case "gap--laptop":
|
|
84
84
|
case "gap--desktop":
|
|
85
|
-
this.updateFlexProperties(t, e, i,
|
|
85
|
+
this.updateFlexProperties(t, e, i, q);
|
|
86
86
|
break;
|
|
87
87
|
case "justify-content":
|
|
88
88
|
case "justify-content--mobile":
|
|
@@ -93,7 +93,7 @@ class z extends $ {
|
|
|
93
93
|
t,
|
|
94
94
|
e,
|
|
95
95
|
i,
|
|
96
|
-
|
|
96
|
+
at
|
|
97
97
|
);
|
|
98
98
|
break;
|
|
99
99
|
case "align-items":
|
|
@@ -101,28 +101,28 @@ class z extends $ {
|
|
|
101
101
|
case "align-items--tablet":
|
|
102
102
|
case "align-items--laptop":
|
|
103
103
|
case "align-items--desktop":
|
|
104
|
-
this.updateFlexProperties(t, e, i,
|
|
104
|
+
this.updateFlexProperties(t, e, i, ot);
|
|
105
105
|
break;
|
|
106
106
|
case "wrap":
|
|
107
107
|
case "wrap--mobile":
|
|
108
108
|
case "wrap--tablet":
|
|
109
109
|
case "wrap--laptop":
|
|
110
110
|
case "wrap--desktop":
|
|
111
|
-
this.updateFlexProperties(t, e, i,
|
|
111
|
+
this.updateFlexProperties(t, e, i, nt);
|
|
112
112
|
break;
|
|
113
113
|
case "direction":
|
|
114
114
|
case "direction--mobile":
|
|
115
115
|
case "direction--tablet":
|
|
116
116
|
case "direction--laptop":
|
|
117
117
|
case "direction--desktop":
|
|
118
|
-
this.updateFlexProperties(t, e, i,
|
|
118
|
+
this.updateFlexProperties(t, e, i, st);
|
|
119
119
|
break;
|
|
120
120
|
case "overflow-x":
|
|
121
121
|
case "overflow-x--mobile":
|
|
122
122
|
case "overflow-x--tablet":
|
|
123
123
|
case "overflow-x--laptop":
|
|
124
124
|
case "overflow-x--desktop":
|
|
125
|
-
this.updateOverflowX(t, e, i,
|
|
125
|
+
this.updateOverflowX(t, e, i, lt);
|
|
126
126
|
break;
|
|
127
127
|
default:
|
|
128
128
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -131,10 +131,7 @@ class z extends $ {
|
|
|
131
131
|
}
|
|
132
132
|
updateOverflowX(t, e, i, s) {
|
|
133
133
|
if (!K(s, i)) {
|
|
134
|
-
console.error(
|
|
135
|
-
`${i} is not an allowed ${t} value for`,
|
|
136
|
-
this.$el
|
|
137
|
-
);
|
|
134
|
+
console.error(`${i} is not an allowed ${t} value`);
|
|
138
135
|
return;
|
|
139
136
|
}
|
|
140
137
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
@@ -144,7 +141,7 @@ class z extends $ {
|
|
|
144
141
|
);
|
|
145
142
|
}
|
|
146
143
|
updateFlexProperties(t, e, i, s) {
|
|
147
|
-
this.checkName(s, i) || console.error(
|
|
144
|
+
this.checkName(s, i) || console.error(`${i} is not a valid value for ${s}`);
|
|
148
145
|
const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t, a = [];
|
|
149
146
|
if (!l)
|
|
150
147
|
this.getAttribute(n + "--mobile") || a.push("mobile"), this.getAttribute(n + "--tablet") || a.push("tablet"), this.getAttribute(n + "--laptop") || a.push("laptop"), this.getAttribute(n + "--desktop") || a.push("desktop"), a.forEach((c) => {
|
|
@@ -221,6 +218,12 @@ class z extends $ {
|
|
|
221
218
|
set gapLaptop(t) {
|
|
222
219
|
this.setAttribute("gap--laptop", t);
|
|
223
220
|
}
|
|
221
|
+
get gapDesktop() {
|
|
222
|
+
return this.getAttribute("gap--desktop");
|
|
223
|
+
}
|
|
224
|
+
set gapDesktop(t) {
|
|
225
|
+
this.setAttribute("gap--desktop", t);
|
|
226
|
+
}
|
|
224
227
|
get justifyContent() {
|
|
225
228
|
return this.getAttribute("justify-content");
|
|
226
229
|
}
|
|
@@ -345,8 +348,8 @@ class z extends $ {
|
|
|
345
348
|
return this.shadowRoot.querySelector(".flex-container");
|
|
346
349
|
}
|
|
347
350
|
}
|
|
348
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
349
|
-
class
|
|
351
|
+
customElements.get("px-stack") || customElements.define("px-stack", S);
|
|
352
|
+
class ct extends S {
|
|
350
353
|
constructor() {
|
|
351
354
|
super();
|
|
352
355
|
}
|
|
@@ -354,8 +357,8 @@ class lt extends z {
|
|
|
354
357
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
355
358
|
}
|
|
356
359
|
}
|
|
357
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
358
|
-
class
|
|
360
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", ct);
|
|
361
|
+
class dt extends S {
|
|
359
362
|
constructor() {
|
|
360
363
|
super();
|
|
361
364
|
}
|
|
@@ -363,8 +366,8 @@ class ct extends z {
|
|
|
363
366
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
364
367
|
}
|
|
365
368
|
}
|
|
366
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
367
|
-
class
|
|
369
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", dt);
|
|
370
|
+
class pt extends HTMLElement {
|
|
368
371
|
constructor() {
|
|
369
372
|
super();
|
|
370
373
|
}
|
|
@@ -384,10 +387,10 @@ class dt extends HTMLElement {
|
|
|
384
387
|
this.setAttribute("grow", t);
|
|
385
388
|
}
|
|
386
389
|
}
|
|
387
|
-
customElements.define("px-spacer",
|
|
388
|
-
const
|
|
389
|
-
P.replaceSync(
|
|
390
|
-
class
|
|
390
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", pt);
|
|
391
|
+
const ut = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", P = new CSSStyleSheet();
|
|
392
|
+
P.replaceSync(ut);
|
|
393
|
+
class ht extends $ {
|
|
391
394
|
constructor() {
|
|
392
395
|
super(P), this.template = (t) => `
|
|
393
396
|
<px-container border-radius="none" padding="none">
|
|
@@ -397,7 +400,7 @@ class ut extends $ {
|
|
|
397
400
|
<px-spacer></px-spacer>
|
|
398
401
|
<px-vstack
|
|
399
402
|
id="header-vstack-container"
|
|
400
|
-
gap="
|
|
403
|
+
gap="s"
|
|
401
404
|
grow="${this.grow}"
|
|
402
405
|
basis="${this.basis}"
|
|
403
406
|
>
|
|
@@ -429,7 +432,7 @@ class ut extends $ {
|
|
|
429
432
|
${t ? ` <px-hstack>
|
|
430
433
|
<px-spacer></px-spacer>
|
|
431
434
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
432
|
-
<px-vstack gap="
|
|
435
|
+
<px-vstack gap="s">
|
|
433
436
|
<slot name="image-sticky-container"></slot>
|
|
434
437
|
</px-vstack>
|
|
435
438
|
</px-container>
|
|
@@ -447,7 +450,7 @@ class ut extends $ {
|
|
|
447
450
|
<px-spacer></px-spacer>
|
|
448
451
|
<px-vstack
|
|
449
452
|
id="body-vstack-container"
|
|
450
|
-
gap="
|
|
453
|
+
gap="l"
|
|
451
454
|
grow="${this.grow}"
|
|
452
455
|
basis="${this.basis}"
|
|
453
456
|
>
|
|
@@ -467,7 +470,7 @@ class ut extends $ {
|
|
|
467
470
|
>
|
|
468
471
|
<px-hstack>
|
|
469
472
|
<px-spacer></px-spacer>
|
|
470
|
-
<px-vstack gap="
|
|
473
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
471
474
|
<slot name="contact-container"></slot>
|
|
472
475
|
</px-vstack>
|
|
473
476
|
<px-spacer></px-spacer>
|
|
@@ -483,7 +486,7 @@ class ut extends $ {
|
|
|
483
486
|
>
|
|
484
487
|
<px-hstack>
|
|
485
488
|
<px-spacer></px-spacer>
|
|
486
|
-
<px-vstack gap="
|
|
489
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
487
490
|
<slot name="footer-container"></slot>
|
|
488
491
|
</px-vstack>
|
|
489
492
|
<px-spacer></px-spacer>
|
|
@@ -586,10 +589,10 @@ class ut extends $ {
|
|
|
586
589
|
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
587
590
|
}
|
|
588
591
|
}
|
|
589
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
590
|
-
const
|
|
591
|
-
O.replaceSync(
|
|
592
|
-
const
|
|
592
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", ht);
|
|
593
|
+
const bt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", O = new CSSStyleSheet();
|
|
594
|
+
O.replaceSync(bt);
|
|
595
|
+
const gt = ["", "default", "small"], vt = ["", "default", "secondary", "naked"], z = class z extends Y {
|
|
593
596
|
constructor() {
|
|
594
597
|
super(O), this.template = () => "<slot></slot>";
|
|
595
598
|
const t = document.createElement(this.nativeName);
|
|
@@ -601,7 +604,8 @@ const bt = ["", "default", "small"], gt = ["", "default", "secondary", "naked"],
|
|
|
601
604
|
"inverted",
|
|
602
605
|
"loading",
|
|
603
606
|
"size",
|
|
604
|
-
"variant"
|
|
607
|
+
"variant",
|
|
608
|
+
"aria-expanded"
|
|
605
609
|
];
|
|
606
610
|
}
|
|
607
611
|
connectedCallback() {
|
|
@@ -622,10 +626,13 @@ const bt = ["", "default", "small"], gt = ["", "default", "secondary", "naked"],
|
|
|
622
626
|
this.updateLoading();
|
|
623
627
|
break;
|
|
624
628
|
case "size":
|
|
625
|
-
this.updateSize(e, i,
|
|
629
|
+
this.updateSize(e, i, gt);
|
|
626
630
|
break;
|
|
627
631
|
case "variant":
|
|
628
|
-
this.updateVariant(e, i,
|
|
632
|
+
this.updateVariant(e, i, vt);
|
|
633
|
+
break;
|
|
634
|
+
case "aria-expanded":
|
|
635
|
+
i && (this.$el.setAttribute("aria-expanded", i), this.removeAttribute("aria-expanded"));
|
|
629
636
|
break;
|
|
630
637
|
default:
|
|
631
638
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -642,10 +649,10 @@ const bt = ["", "default", "small"], gt = ["", "default", "secondary", "naked"],
|
|
|
642
649
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
643
650
|
}
|
|
644
651
|
updateSize(t, e, i) {
|
|
645
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(
|
|
652
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error(`${e} is not a valid size value`);
|
|
646
653
|
}
|
|
647
654
|
updateVariant(t, e, i) {
|
|
648
|
-
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(
|
|
655
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`${e} is not a valid variant value`);
|
|
649
656
|
}
|
|
650
657
|
get inverted() {
|
|
651
658
|
return this.getAttribute("inverted");
|
|
@@ -671,25 +678,31 @@ const bt = ["", "default", "small"], gt = ["", "default", "secondary", "naked"],
|
|
|
671
678
|
set variant(t) {
|
|
672
679
|
this.setAttribute("variant", t);
|
|
673
680
|
}
|
|
681
|
+
get ariaExpanded() {
|
|
682
|
+
return this.getAttribute("aria-expanded");
|
|
683
|
+
}
|
|
684
|
+
set ariaExpanded(t) {
|
|
685
|
+
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
686
|
+
}
|
|
674
687
|
};
|
|
675
|
-
|
|
676
|
-
let
|
|
677
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
678
|
-
const
|
|
688
|
+
z.nativeName = "button";
|
|
689
|
+
let w = z;
|
|
690
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", w);
|
|
691
|
+
const ft = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", xt = [
|
|
679
692
|
"",
|
|
680
693
|
"default",
|
|
681
694
|
"inherit",
|
|
682
|
-
"neutral",
|
|
683
695
|
"brand",
|
|
696
|
+
"neutral",
|
|
684
697
|
"dimmed",
|
|
685
|
-
"state-hover",
|
|
686
|
-
"state-active",
|
|
687
|
-
"state-disabled",
|
|
688
698
|
"purpose-success",
|
|
689
699
|
"purpose-warning",
|
|
690
700
|
"purpose-error",
|
|
691
701
|
"purpose-unlimited",
|
|
692
|
-
"purpose-promo"
|
|
702
|
+
"purpose-promo",
|
|
703
|
+
"state-hover",
|
|
704
|
+
"state-active",
|
|
705
|
+
"state-disabled"
|
|
693
706
|
], mt = [
|
|
694
707
|
"name",
|
|
695
708
|
"size",
|
|
@@ -714,15 +727,10 @@ class kt extends $ {
|
|
|
714
727
|
this.updateName(e, i);
|
|
715
728
|
break;
|
|
716
729
|
case "size":
|
|
717
|
-
this.updateAttribute(
|
|
718
|
-
t,
|
|
719
|
-
e,
|
|
720
|
-
i,
|
|
721
|
-
xt
|
|
722
|
-
);
|
|
730
|
+
this.updateAttribute(t, e, i, V);
|
|
723
731
|
break;
|
|
724
732
|
case "color":
|
|
725
|
-
this.updateAttribute(t, e, i,
|
|
733
|
+
this.updateAttribute(t, e, i, xt);
|
|
726
734
|
break;
|
|
727
735
|
case "disabled":
|
|
728
736
|
this.color = "state-disabled";
|
|
@@ -735,9 +743,7 @@ class kt extends $ {
|
|
|
735
743
|
}
|
|
736
744
|
}
|
|
737
745
|
updateAttribute(t, e, i, s) {
|
|
738
|
-
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(
|
|
739
|
-
`${i} is not an allowed ${t} value for ${this.$el}`
|
|
740
|
-
);
|
|
746
|
+
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(s, i) || console.error(`${i} is not an allowed ${t} value`);
|
|
741
747
|
}
|
|
742
748
|
checkName(t, e) {
|
|
743
749
|
return t.includes(e);
|
|
@@ -786,7 +792,7 @@ class kt extends $ {
|
|
|
786
792
|
}
|
|
787
793
|
}
|
|
788
794
|
const W = new CSSStyleSheet();
|
|
789
|
-
W.replaceSync(
|
|
795
|
+
W.replaceSync(ft);
|
|
790
796
|
class yt extends kt {
|
|
791
797
|
constructor() {
|
|
792
798
|
super(W), this.template = () => `<svg>
|
|
@@ -819,7 +825,7 @@ class yt extends kt {
|
|
|
819
825
|
}
|
|
820
826
|
}
|
|
821
827
|
customElements.get("px-icon") || customElements.define("px-icon", yt);
|
|
822
|
-
class
|
|
828
|
+
class At extends HTMLElement {
|
|
823
829
|
constructor() {
|
|
824
830
|
super();
|
|
825
831
|
}
|
|
@@ -852,9 +858,9 @@ class wt extends HTMLElement {
|
|
|
852
858
|
t && t.remove();
|
|
853
859
|
}
|
|
854
860
|
}
|
|
855
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
856
|
-
const
|
|
857
|
-
N.replaceSync(
|
|
861
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", At);
|
|
862
|
+
const wt = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", N = new CSSStyleSheet();
|
|
863
|
+
N.replaceSync(wt);
|
|
858
864
|
class $t extends HTMLElement {
|
|
859
865
|
constructor() {
|
|
860
866
|
super(), this.template = (t, e) => `<div class="container">
|
|
@@ -902,11 +908,11 @@ function v(r) {
|
|
|
902
908
|
var t = typeof r;
|
|
903
909
|
return r != null && (t == "object" || t == "function");
|
|
904
910
|
}
|
|
905
|
-
var
|
|
911
|
+
var St = typeof global == "object" && global && global.Object === Object && global, Ct = typeof self == "object" && self && self.Object === Object && self, X = St || Ct || Function("return this")(), y = function() {
|
|
906
912
|
return X.Date.now();
|
|
907
|
-
},
|
|
913
|
+
}, zt = /\s/;
|
|
908
914
|
function jt(r) {
|
|
909
|
-
for (var t = r.length; t-- &&
|
|
915
|
+
for (var t = r.length; t-- && zt.test(r.charAt(t)); )
|
|
910
916
|
;
|
|
911
917
|
return t;
|
|
912
918
|
}
|
|
@@ -914,7 +920,7 @@ var Lt = /^\s+/;
|
|
|
914
920
|
function Tt(r) {
|
|
915
921
|
return r && r.slice(0, jt(r) + 1).replace(Lt, "");
|
|
916
922
|
}
|
|
917
|
-
var
|
|
923
|
+
var f = X.Symbol, F = Object.prototype, Et = F.hasOwnProperty, It = F.toString, b = f ? f.toStringTag : void 0;
|
|
918
924
|
function Rt(r) {
|
|
919
925
|
var t = Et.call(r, b), e = r[b];
|
|
920
926
|
try {
|
|
@@ -925,13 +931,13 @@ function Rt(r) {
|
|
|
925
931
|
var s = It.call(r);
|
|
926
932
|
return i && (t ? r[b] = e : delete r[b]), s;
|
|
927
933
|
}
|
|
928
|
-
var Mt = Object.prototype,
|
|
929
|
-
function
|
|
930
|
-
return
|
|
934
|
+
var Mt = Object.prototype, Dt = Mt.toString;
|
|
935
|
+
function qt(r) {
|
|
936
|
+
return Dt.call(r);
|
|
931
937
|
}
|
|
932
|
-
var Ht = "[object Null]", Pt = "[object Undefined]", I =
|
|
938
|
+
var Ht = "[object Null]", Pt = "[object Undefined]", I = f ? f.toStringTag : void 0;
|
|
933
939
|
function Ot(r) {
|
|
934
|
-
return r == null ? r === void 0 ? Pt : Ht : I && I in Object(r) ? Rt(r) :
|
|
940
|
+
return r == null ? r === void 0 ? Pt : Ht : I && I in Object(r) ? Rt(r) : qt(r);
|
|
935
941
|
}
|
|
936
942
|
function Wt(r) {
|
|
937
943
|
return r != null && typeof r == "object";
|
|
@@ -940,7 +946,7 @@ var Nt = "[object Symbol]";
|
|
|
940
946
|
function Xt(r) {
|
|
941
947
|
return typeof r == "symbol" || Wt(r) && Ot(r) == Nt;
|
|
942
948
|
}
|
|
943
|
-
var R = NaN, Ft = /^[-+]0x[0-9a-f]+$/i,
|
|
949
|
+
var R = NaN, Ft = /^[-+]0x[0-9a-f]+$/i, _t = /^0b[01]+$/i, Bt = /^0o[0-7]+$/i, Gt = parseInt;
|
|
944
950
|
function M(r) {
|
|
945
951
|
if (typeof r == "number")
|
|
946
952
|
return r;
|
|
@@ -953,20 +959,20 @@ function M(r) {
|
|
|
953
959
|
if (typeof r != "string")
|
|
954
960
|
return r === 0 ? r : +r;
|
|
955
961
|
r = Tt(r);
|
|
956
|
-
var e =
|
|
957
|
-
return e ||
|
|
962
|
+
var e = _t.test(r);
|
|
963
|
+
return e || Bt.test(r) ? Gt(r.slice(2), e ? 2 : 8) : Ft.test(r) ? R : +r;
|
|
958
964
|
}
|
|
959
965
|
var Ut = "Expected a function", Jt = Math.max, Kt = Math.min;
|
|
960
966
|
function Qt(r, t, e) {
|
|
961
|
-
var i, s, l, n, a, c, p = 0, j = !1, u = !1,
|
|
967
|
+
var i, s, l, n, a, c, p = 0, j = !1, u = !1, x = !0;
|
|
962
968
|
if (typeof r != "function")
|
|
963
969
|
throw new TypeError(Ut);
|
|
964
|
-
t = M(t) || 0, v(e) && (j = !!e.leading, u = "maxWait" in e, l = u ? Jt(M(e.maxWait) || 0, t) : l,
|
|
970
|
+
t = M(t) || 0, v(e) && (j = !!e.leading, u = "maxWait" in e, l = u ? Jt(M(e.maxWait) || 0, t) : l, x = "trailing" in e ? !!e.trailing : x);
|
|
965
971
|
function m(o) {
|
|
966
972
|
var d = i, h = s;
|
|
967
973
|
return i = s = void 0, p = o, n = r.apply(h, d), n;
|
|
968
974
|
}
|
|
969
|
-
function
|
|
975
|
+
function B(o) {
|
|
970
976
|
return p = o, a = setTimeout(g, t), j ? m(o) : n;
|
|
971
977
|
}
|
|
972
978
|
function G(o) {
|
|
@@ -984,7 +990,7 @@ function Qt(r, t, e) {
|
|
|
984
990
|
a = setTimeout(g, G(o));
|
|
985
991
|
}
|
|
986
992
|
function T(o) {
|
|
987
|
-
return a = void 0,
|
|
993
|
+
return a = void 0, x && i ? m(o) : (i = s = void 0, n);
|
|
988
994
|
}
|
|
989
995
|
function U() {
|
|
990
996
|
a !== void 0 && clearTimeout(a), p = 0, i = c = s = a = void 0;
|
|
@@ -996,7 +1002,7 @@ function Qt(r, t, e) {
|
|
|
996
1002
|
var o = y(), d = L(o);
|
|
997
1003
|
if (i = arguments, s = this, c = o, d) {
|
|
998
1004
|
if (a === void 0)
|
|
999
|
-
return
|
|
1005
|
+
return B(c);
|
|
1000
1006
|
if (u)
|
|
1001
1007
|
return clearTimeout(a), a = setTimeout(g, t), m(c);
|
|
1002
1008
|
}
|
|
@@ -1015,15 +1021,15 @@ function Zt(r, t, e) {
|
|
|
1015
1021
|
trailing: s
|
|
1016
1022
|
});
|
|
1017
1023
|
}
|
|
1018
|
-
const
|
|
1019
|
-
|
|
1020
|
-
const Vt = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, te = "px-spacing",
|
|
1024
|
+
const C = new CSSStyleSheet();
|
|
1025
|
+
C.replaceSync(et);
|
|
1026
|
+
const Vt = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, te = "px-spacing", A = (r) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
|
|
1021
1027
|
class ee extends HTMLElement {
|
|
1022
1028
|
constructor() {
|
|
1023
|
-
super(), this.visibleItemsAttributeDelegate = new
|
|
1029
|
+
super(), this.visibleItemsAttributeDelegate = new D(
|
|
1024
1030
|
this,
|
|
1025
1031
|
"visible-items",
|
|
1026
|
-
|
|
1032
|
+
A("s"),
|
|
1027
1033
|
"--px-carousel-min-width"
|
|
1028
1034
|
), this.template = `<px-vstack gap="default">
|
|
1029
1035
|
<div class="carousel">
|
|
@@ -1053,11 +1059,11 @@ class ee extends HTMLElement {
|
|
|
1053
1059
|
let l = s;
|
|
1054
1060
|
this.itemNumbers > 5 && (s > 2 && s < this.itemNumbers - 2 ? l = 2 : s === this.itemNumbers - 2 ? l = 3 : s === this.itemNumbers - 1 && (l = 4)), this.$appleseed.setAttribute("active", `${l}`), this.handleNextPrevious();
|
|
1055
1061
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1056
|
-
|
|
1057
|
-
|
|
1062
|
+
C,
|
|
1063
|
+
tt(
|
|
1058
1064
|
"gap",
|
|
1059
1065
|
Vt,
|
|
1060
|
-
|
|
1066
|
+
q,
|
|
1061
1067
|
te
|
|
1062
1068
|
)
|
|
1063
1069
|
];
|
|
@@ -1072,7 +1078,7 @@ class ee extends HTMLElement {
|
|
|
1072
1078
|
case "gap--mobile":
|
|
1073
1079
|
case "gap--tablet":
|
|
1074
1080
|
case "gap--desktop":
|
|
1075
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1081
|
+
this.visibleItemsAttributeDelegate.attributeValue = A(i);
|
|
1076
1082
|
break;
|
|
1077
1083
|
default:
|
|
1078
1084
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
@@ -1083,7 +1089,7 @@ class ee extends HTMLElement {
|
|
|
1083
1089
|
}
|
|
1084
1090
|
}
|
|
1085
1091
|
connectedCallback() {
|
|
1086
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1092
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = A(
|
|
1087
1093
|
this.getAttribute("gap") || "s"
|
|
1088
1094
|
), requestAnimationFrame(() => {
|
|
1089
1095
|
this.handleAppleSeedDisplay();
|
|
@@ -1128,14 +1134,14 @@ class ee extends HTMLElement {
|
|
|
1128
1134
|
}
|
|
1129
1135
|
}
|
|
1130
1136
|
customElements.get("px-carousel") || customElements.define("px-carousel", ee);
|
|
1131
|
-
const
|
|
1132
|
-
|
|
1137
|
+
const _ = new CSSStyleSheet();
|
|
1138
|
+
_.replaceSync(it);
|
|
1133
1139
|
class ie extends HTMLElement {
|
|
1134
1140
|
constructor() {
|
|
1135
1141
|
super(), this.template = `
|
|
1136
1142
|
<div class="carousel-item">
|
|
1137
1143
|
<slot></slot>
|
|
1138
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1144
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [C, _];
|
|
1139
1145
|
}
|
|
1140
1146
|
}
|
|
1141
1147
|
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", ie);
|