@proximus/lavender-carousel 1.4.2-beta.1 → 1.4.3-alpha.2
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 +168 -158
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
1
|
+
var O = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var d = (r, t, e) => (
|
|
6
|
-
import { WithExtraAttributes as
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
const
|
|
4
|
+
var N = (r, t, e) => t.has(r) || O("Cannot " + e);
|
|
5
|
+
var d = (r, t, e) => (N(r, t, "read from private field"), e ? e.call(r) : t.get(r)), k = (r, t, e) => t.has(r) ? O("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), j = (r, t, e, i) => (N(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
|
|
6
|
+
import { WithExtraAttributes as I, AttributeBreakpointHandlerDelegate as B, gapValues as G, checkName as st, log as x, backgroundColorValues as ot, PxElement as at, transferAccessibilityAttributes as nt, iconSizeValuesKC as lt, cssTokenBreakpoints as ct } from "@proximus/lavender-common";
|
|
7
|
+
const dt = ":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}", pt = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}: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;overflow:hidden}@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}}", ut = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.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)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@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)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@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))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', Z = new CSSStyleSheet();
|
|
8
|
+
Z.replaceSync(ut);
|
|
9
|
+
const ht = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
12
12
|
"row",
|
|
13
13
|
"row-reverse",
|
|
14
14
|
"column",
|
|
15
15
|
"column-reverse"
|
|
16
|
-
],
|
|
16
|
+
], bt = [
|
|
17
17
|
"",
|
|
18
18
|
"default",
|
|
19
19
|
"stretch",
|
|
@@ -21,7 +21,7 @@ const ut = [
|
|
|
21
21
|
"flex-end",
|
|
22
22
|
"center",
|
|
23
23
|
"baseline"
|
|
24
|
-
],
|
|
24
|
+
], gt = [
|
|
25
25
|
"",
|
|
26
26
|
"default",
|
|
27
27
|
"flex-start",
|
|
@@ -30,10 +30,10 @@ const ut = [
|
|
|
30
30
|
"space-between",
|
|
31
31
|
"space-around",
|
|
32
32
|
"space-evenly"
|
|
33
|
-
],
|
|
34
|
-
class
|
|
33
|
+
], vt = ["", "default", "nowrap", "wrap", "wrap-reverse"], ft = ["", "visible", "hidden", "scroll", "auto"];
|
|
34
|
+
class R extends I {
|
|
35
35
|
constructor() {
|
|
36
|
-
super(
|
|
36
|
+
super(Z), this.overflowXAttributeDelegate = new B(
|
|
37
37
|
this,
|
|
38
38
|
"overflow-x",
|
|
39
39
|
(t) => t,
|
|
@@ -87,7 +87,7 @@ class I extends E {
|
|
|
87
87
|
case "gap--tablet":
|
|
88
88
|
case "gap--laptop":
|
|
89
89
|
case "gap--desktop":
|
|
90
|
-
this.updateFlexProperties(t, e, i,
|
|
90
|
+
this.updateFlexProperties(t, e, i, G);
|
|
91
91
|
break;
|
|
92
92
|
case "justify-content":
|
|
93
93
|
case "justify-content--mobile":
|
|
@@ -98,7 +98,7 @@ class I extends E {
|
|
|
98
98
|
t,
|
|
99
99
|
e,
|
|
100
100
|
i,
|
|
101
|
-
|
|
101
|
+
gt
|
|
102
102
|
);
|
|
103
103
|
break;
|
|
104
104
|
case "align-items":
|
|
@@ -106,28 +106,28 @@ class I extends E {
|
|
|
106
106
|
case "align-items--tablet":
|
|
107
107
|
case "align-items--laptop":
|
|
108
108
|
case "align-items--desktop":
|
|
109
|
-
this.updateFlexProperties(t, e, i,
|
|
109
|
+
this.updateFlexProperties(t, e, i, bt);
|
|
110
110
|
break;
|
|
111
111
|
case "wrap":
|
|
112
112
|
case "wrap--mobile":
|
|
113
113
|
case "wrap--tablet":
|
|
114
114
|
case "wrap--laptop":
|
|
115
115
|
case "wrap--desktop":
|
|
116
|
-
this.updateFlexProperties(t, e, i,
|
|
116
|
+
this.updateFlexProperties(t, e, i, vt);
|
|
117
117
|
break;
|
|
118
118
|
case "direction":
|
|
119
119
|
case "direction--mobile":
|
|
120
120
|
case "direction--tablet":
|
|
121
121
|
case "direction--laptop":
|
|
122
122
|
case "direction--desktop":
|
|
123
|
-
this.updateFlexProperties(t, e, i,
|
|
123
|
+
this.updateFlexProperties(t, e, i, ht);
|
|
124
124
|
break;
|
|
125
125
|
case "overflow-x":
|
|
126
126
|
case "overflow-x--mobile":
|
|
127
127
|
case "overflow-x--tablet":
|
|
128
128
|
case "overflow-x--laptop":
|
|
129
129
|
case "overflow-x--desktop":
|
|
130
|
-
this.updateOverflowX(t, e, i,
|
|
130
|
+
this.updateOverflowX(t, e, i, ft);
|
|
131
131
|
break;
|
|
132
132
|
default:
|
|
133
133
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -135,8 +135,10 @@ class I extends E {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
updateOverflowX(t, e, i, s) {
|
|
138
|
-
if (!
|
|
139
|
-
|
|
138
|
+
if (!st(s, i)) {
|
|
139
|
+
x(
|
|
140
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
141
|
+
);
|
|
140
142
|
return;
|
|
141
143
|
}
|
|
142
144
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
@@ -146,7 +148,9 @@ class I extends E {
|
|
|
146
148
|
);
|
|
147
149
|
}
|
|
148
150
|
updateFlexProperties(t, e, i, s) {
|
|
149
|
-
this.checkName(s, i) ||
|
|
151
|
+
this.checkName(s, i) || x(
|
|
152
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
153
|
+
);
|
|
150
154
|
const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
|
|
151
155
|
if (!n)
|
|
152
156
|
this.getAttribute(l + "--mobile") || a.push("mobile"), this.getAttribute(l + "--tablet") || a.push("tablet"), this.getAttribute(l + "--laptop") || a.push("laptop"), this.getAttribute(l + "--desktop") || a.push("desktop"), a.forEach((c) => {
|
|
@@ -350,8 +354,8 @@ class I extends E {
|
|
|
350
354
|
return this.shadowRoot.querySelector(".flex-container");
|
|
351
355
|
}
|
|
352
356
|
}
|
|
353
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
354
|
-
class
|
|
357
|
+
customElements.get("px-stack") || customElements.define("px-stack", R);
|
|
358
|
+
class xt extends R {
|
|
355
359
|
constructor() {
|
|
356
360
|
super();
|
|
357
361
|
}
|
|
@@ -359,8 +363,8 @@ class ft extends I {
|
|
|
359
363
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
360
364
|
}
|
|
361
365
|
}
|
|
362
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
363
|
-
class
|
|
366
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", xt);
|
|
367
|
+
class mt extends R {
|
|
364
368
|
constructor() {
|
|
365
369
|
super();
|
|
366
370
|
}
|
|
@@ -368,8 +372,8 @@ class xt extends I {
|
|
|
368
372
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
369
373
|
}
|
|
370
374
|
}
|
|
371
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
372
|
-
class
|
|
375
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", mt);
|
|
376
|
+
class kt extends HTMLElement {
|
|
373
377
|
constructor() {
|
|
374
378
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
375
379
|
}
|
|
@@ -416,12 +420,12 @@ class mt extends HTMLElement {
|
|
|
416
420
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
417
421
|
}
|
|
418
422
|
}
|
|
419
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
420
|
-
const
|
|
421
|
-
|
|
422
|
-
class
|
|
423
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", kt);
|
|
424
|
+
const yt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", _ = new CSSStyleSheet();
|
|
425
|
+
_.replaceSync(yt);
|
|
426
|
+
class wt extends I {
|
|
423
427
|
constructor() {
|
|
424
|
-
super(
|
|
428
|
+
super(_), this.template = (t) => `
|
|
425
429
|
<px-container border-radius="none" padding="none">
|
|
426
430
|
<px-vstack>
|
|
427
431
|
<px-container id="header-container" border-radius="none">
|
|
@@ -598,7 +602,7 @@ class yt extends E {
|
|
|
598
602
|
case "background-color":
|
|
599
603
|
this.$bodyContainer.setAttribute(
|
|
600
604
|
"background-color",
|
|
601
|
-
|
|
605
|
+
ot.indexOf(i) > 0 ? i : "none"
|
|
602
606
|
);
|
|
603
607
|
break;
|
|
604
608
|
case "padding-vertical":
|
|
@@ -618,18 +622,18 @@ class yt extends E {
|
|
|
618
622
|
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;
|
|
619
623
|
}
|
|
620
624
|
}
|
|
621
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
622
|
-
const
|
|
623
|
-
|
|
624
|
-
const
|
|
625
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", wt);
|
|
626
|
+
const At = ".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)}}", U = new CSSStyleSheet();
|
|
627
|
+
U.replaceSync(At);
|
|
628
|
+
const $t = ["", "default", "small"], St = [
|
|
625
629
|
"",
|
|
626
630
|
"default",
|
|
627
631
|
"secondary",
|
|
628
632
|
"naked"
|
|
629
|
-
],
|
|
633
|
+
], A = class A extends at {
|
|
630
634
|
constructor() {
|
|
631
|
-
super(
|
|
632
|
-
const t = document.createElement(
|
|
635
|
+
super(U), this.template = () => "<slot></slot>";
|
|
636
|
+
const t = document.createElement(A.nativeName);
|
|
633
637
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
634
638
|
}
|
|
635
639
|
static get observedAttributes() {
|
|
@@ -650,7 +654,7 @@ const At = ["", "default", "small"], $t = [
|
|
|
650
654
|
this.$el.focus();
|
|
651
655
|
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
|
|
652
656
|
}
|
|
653
|
-
|
|
657
|
+
nt(this, this.$el, !1);
|
|
654
658
|
}
|
|
655
659
|
attributeChangedCallback(t, e, i) {
|
|
656
660
|
if (e !== i)
|
|
@@ -679,10 +683,14 @@ const At = ["", "default", "small"], $t = [
|
|
|
679
683
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
680
684
|
}
|
|
681
685
|
updateSize(t, e) {
|
|
682
|
-
this.checkName(
|
|
686
|
+
this.checkName($t, 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}`)) : x(
|
|
687
|
+
`${e} is not a valid size value for ${this.tagName.toLowerCase()}`
|
|
688
|
+
);
|
|
683
689
|
}
|
|
684
690
|
updateVariant(t, e) {
|
|
685
|
-
this.checkName(
|
|
691
|
+
this.checkName(St, 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}`)) : x(
|
|
692
|
+
`${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
|
|
693
|
+
);
|
|
686
694
|
}
|
|
687
695
|
get inverted() {
|
|
688
696
|
return this.getAttribute("inverted");
|
|
@@ -715,10 +723,10 @@ const At = ["", "default", "small"], $t = [
|
|
|
715
723
|
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
716
724
|
}
|
|
717
725
|
};
|
|
718
|
-
|
|
719
|
-
let
|
|
720
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
721
|
-
class
|
|
726
|
+
A.nativeName = "button";
|
|
727
|
+
let E = A;
|
|
728
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", E);
|
|
729
|
+
class Ct extends HTMLElement {
|
|
722
730
|
constructor() {
|
|
723
731
|
super();
|
|
724
732
|
}
|
|
@@ -751,8 +759,8 @@ class St extends HTMLElement {
|
|
|
751
759
|
t && t.remove();
|
|
752
760
|
}
|
|
753
761
|
}
|
|
754
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
755
|
-
const
|
|
762
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Ct);
|
|
763
|
+
const zt = [
|
|
756
764
|
"Brand",
|
|
757
765
|
"Accent",
|
|
758
766
|
"Neutral",
|
|
@@ -765,11 +773,11 @@ const Ct = [
|
|
|
765
773
|
"StateHover",
|
|
766
774
|
"StateActive",
|
|
767
775
|
"StateDisabled"
|
|
768
|
-
],
|
|
776
|
+
], jt = ["Inherit", ...zt].map(
|
|
769
777
|
(r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
770
|
-
),
|
|
771
|
-
|
|
772
|
-
const
|
|
778
|
+
), Lt = ":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-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-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-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-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)}", K = new CSSStyleSheet();
|
|
779
|
+
K.replaceSync(Lt);
|
|
780
|
+
const Tt = [
|
|
773
781
|
"name",
|
|
774
782
|
"size",
|
|
775
783
|
"color",
|
|
@@ -778,20 +786,20 @@ const Lt = [
|
|
|
778
786
|
"from",
|
|
779
787
|
"disabled"
|
|
780
788
|
];
|
|
781
|
-
var h, p,
|
|
782
|
-
class
|
|
789
|
+
var h, p, $;
|
|
790
|
+
class Et extends I {
|
|
783
791
|
constructor(...e) {
|
|
784
792
|
var i;
|
|
785
|
-
super(...e,
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
793
|
+
super(...e, K);
|
|
794
|
+
k(this, h);
|
|
795
|
+
k(this, p);
|
|
796
|
+
k(this, $, () => `<svg aria-hidden="true">
|
|
789
797
|
<use xlink:href="#icon-${this.name}"></use>
|
|
790
798
|
</svg>`);
|
|
791
|
-
this.shadowRoot.innerHTML = d(this,
|
|
799
|
+
this.shadowRoot.innerHTML = d(this, $).call(this), this.role = "img", j(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
792
800
|
}
|
|
793
801
|
static get observedAttributes() {
|
|
794
|
-
return [...super.observedAttributes, ...
|
|
802
|
+
return [...super.observedAttributes, ...Tt];
|
|
795
803
|
}
|
|
796
804
|
attributeChangedCallback(e, i, s) {
|
|
797
805
|
if (i !== s)
|
|
@@ -800,10 +808,10 @@ class Tt extends E {
|
|
|
800
808
|
this.updateName(i, s);
|
|
801
809
|
break;
|
|
802
810
|
case "size":
|
|
803
|
-
this.updateAttribute(e, i, s,
|
|
811
|
+
this.updateAttribute(e, i, s, lt);
|
|
804
812
|
break;
|
|
805
813
|
case "color":
|
|
806
|
-
this.updateAttribute(e, i, s,
|
|
814
|
+
this.updateAttribute(e, i, s, jt);
|
|
807
815
|
break;
|
|
808
816
|
case "disabled":
|
|
809
817
|
this.color = "state-disabled";
|
|
@@ -823,7 +831,7 @@ class Tt extends E {
|
|
|
823
831
|
console.error("Icon name or src not found");
|
|
824
832
|
continue;
|
|
825
833
|
}
|
|
826
|
-
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (
|
|
834
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
827
835
|
"xlink:href",
|
|
828
836
|
`${d(this, h)}#icon-${this.name}`
|
|
829
837
|
));
|
|
@@ -831,7 +839,9 @@ class Tt extends E {
|
|
|
831
839
|
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
832
840
|
}
|
|
833
841
|
updateAttribute(e, i, s, n) {
|
|
834
|
-
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), s !== null && s !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${s}`) : this.$el.classList.toggle(s)), this.checkName(n, s) ||
|
|
842
|
+
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), s !== null && s !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${s}`) : this.$el.classList.toggle(s)), this.checkName(n, s) || x(
|
|
843
|
+
`${s} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
844
|
+
);
|
|
835
845
|
}
|
|
836
846
|
updateName(e, i) {
|
|
837
847
|
d(this, h) && this.$el.firstElementChild.setAttribute(
|
|
@@ -885,11 +895,11 @@ class Tt extends E {
|
|
|
885
895
|
this.setAttribute("disabled", e);
|
|
886
896
|
}
|
|
887
897
|
}
|
|
888
|
-
h = new WeakMap(), p = new WeakMap(),
|
|
889
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
890
|
-
const
|
|
891
|
-
|
|
892
|
-
class
|
|
898
|
+
h = new WeakMap(), p = new WeakMap(), $ = new WeakMap();
|
|
899
|
+
customElements.get("px-icon") || customElements.define("px-icon", Et);
|
|
900
|
+
const It = ":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)}", J = new CSSStyleSheet();
|
|
901
|
+
J.replaceSync(It);
|
|
902
|
+
class Rt extends HTMLElement {
|
|
893
903
|
constructor() {
|
|
894
904
|
super(), this.template = (t, e) => `<div class="container">
|
|
895
905
|
${Array.from(
|
|
@@ -898,7 +908,7 @@ class It extends HTMLElement {
|
|
|
898
908
|
<div></div>
|
|
899
909
|
</div>`
|
|
900
910
|
).join("")}
|
|
901
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
911
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [J], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
902
912
|
}
|
|
903
913
|
static get observedAttributes() {
|
|
904
914
|
return ["amount", "active"];
|
|
@@ -931,26 +941,26 @@ class It extends HTMLElement {
|
|
|
931
941
|
return parseInt(this.getAttribute("active")) || 0;
|
|
932
942
|
}
|
|
933
943
|
}
|
|
934
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
935
|
-
function
|
|
944
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", Rt);
|
|
945
|
+
function y(r) {
|
|
936
946
|
var t = typeof r;
|
|
937
947
|
return r != null && (t == "object" || t == "function");
|
|
938
948
|
}
|
|
939
|
-
var
|
|
940
|
-
return
|
|
941
|
-
},
|
|
942
|
-
function
|
|
943
|
-
for (var t = r.length; t-- &&
|
|
949
|
+
var Mt = typeof global == "object" && global && global.Object === Object && global, Ht = typeof self == "object" && self && self.Object === Object && self, Q = Mt || Ht || Function("return this")(), L = function() {
|
|
950
|
+
return Q.Date.now();
|
|
951
|
+
}, Pt = /\s/;
|
|
952
|
+
function Dt(r) {
|
|
953
|
+
for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
|
|
944
954
|
;
|
|
945
955
|
return t;
|
|
946
956
|
}
|
|
947
|
-
var
|
|
948
|
-
function
|
|
949
|
-
return r && r.slice(0,
|
|
957
|
+
var qt = /^\s+/;
|
|
958
|
+
function Ot(r) {
|
|
959
|
+
return r && r.slice(0, Dt(r) + 1).replace(qt, "");
|
|
950
960
|
}
|
|
951
|
-
var
|
|
952
|
-
function
|
|
953
|
-
var t =
|
|
961
|
+
var w = Q.Symbol, Y = Object.prototype, Nt = Y.hasOwnProperty, Wt = Y.toString, f = w ? w.toStringTag : void 0;
|
|
962
|
+
function Xt(r) {
|
|
963
|
+
var t = Nt.call(r, f), e = r[f];
|
|
954
964
|
try {
|
|
955
965
|
r[f] = void 0;
|
|
956
966
|
var i = !0;
|
|
@@ -959,105 +969,105 @@ function Nt(r) {
|
|
|
959
969
|
var s = Wt.call(r);
|
|
960
970
|
return i && (t ? r[f] = e : delete r[f]), s;
|
|
961
971
|
}
|
|
962
|
-
var
|
|
963
|
-
function
|
|
964
|
-
return
|
|
965
|
-
}
|
|
966
|
-
var Gt = "[object Null]", Zt = "[object Undefined]", W = y ? y.toStringTag : void 0;
|
|
967
|
-
function _t(r) {
|
|
968
|
-
return r == null ? r === void 0 ? Zt : Gt : W && W in Object(r) ? Nt(r) : Bt(r);
|
|
972
|
+
var Ft = Object.prototype, Bt = Ft.toString;
|
|
973
|
+
function Gt(r) {
|
|
974
|
+
return Bt.call(r);
|
|
969
975
|
}
|
|
976
|
+
var Zt = "[object Null]", _t = "[object Undefined]", W = w ? w.toStringTag : void 0;
|
|
970
977
|
function Ut(r) {
|
|
978
|
+
return r == null ? r === void 0 ? _t : Zt : W && W in Object(r) ? Xt(r) : Gt(r);
|
|
979
|
+
}
|
|
980
|
+
function Kt(r) {
|
|
971
981
|
return r != null && typeof r == "object";
|
|
972
982
|
}
|
|
973
|
-
var
|
|
974
|
-
function
|
|
975
|
-
return typeof r == "symbol" ||
|
|
983
|
+
var Jt = "[object Symbol]";
|
|
984
|
+
function Qt(r) {
|
|
985
|
+
return typeof r == "symbol" || Kt(r) && Ut(r) == Jt;
|
|
976
986
|
}
|
|
977
|
-
var
|
|
978
|
-
function
|
|
987
|
+
var X = NaN, Yt = /^[-+]0x[0-9a-f]+$/i, Vt = /^0b[01]+$/i, te = /^0o[0-7]+$/i, ee = parseInt;
|
|
988
|
+
function F(r) {
|
|
979
989
|
if (typeof r == "number")
|
|
980
990
|
return r;
|
|
981
|
-
if (
|
|
982
|
-
return
|
|
983
|
-
if (
|
|
991
|
+
if (Qt(r))
|
|
992
|
+
return X;
|
|
993
|
+
if (y(r)) {
|
|
984
994
|
var t = typeof r.valueOf == "function" ? r.valueOf() : r;
|
|
985
|
-
r =
|
|
995
|
+
r = y(t) ? t + "" : t;
|
|
986
996
|
}
|
|
987
997
|
if (typeof r != "string")
|
|
988
998
|
return r === 0 ? r : +r;
|
|
989
|
-
r =
|
|
990
|
-
var e =
|
|
991
|
-
return e ||
|
|
999
|
+
r = Ot(r);
|
|
1000
|
+
var e = Vt.test(r);
|
|
1001
|
+
return e || te.test(r) ? ee(r.slice(2), e ? 2 : 8) : Yt.test(r) ? X : +r;
|
|
992
1002
|
}
|
|
993
|
-
var
|
|
994
|
-
function
|
|
995
|
-
var i, s, n, l, a, c, b = 0,
|
|
1003
|
+
var ie = "Expected a function", re = Math.max, se = Math.min;
|
|
1004
|
+
function oe(r, t, e) {
|
|
1005
|
+
var i, s, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
|
|
996
1006
|
if (typeof r != "function")
|
|
997
|
-
throw new TypeError(
|
|
998
|
-
t =
|
|
999
|
-
function
|
|
1007
|
+
throw new TypeError(ie);
|
|
1008
|
+
t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? re(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
|
|
1009
|
+
function C(o) {
|
|
1000
1010
|
var u = i, v = s;
|
|
1001
1011
|
return i = s = void 0, b = o, l = r.apply(v, u), l;
|
|
1002
1012
|
}
|
|
1003
|
-
function V(o) {
|
|
1004
|
-
return b = o, a = setTimeout(x, t), M ? S(o) : l;
|
|
1005
|
-
}
|
|
1006
1013
|
function tt(o) {
|
|
1007
|
-
|
|
1008
|
-
|
|
1014
|
+
return b = o, a = setTimeout(m, t), H ? C(o) : l;
|
|
1015
|
+
}
|
|
1016
|
+
function et(o) {
|
|
1017
|
+
var u = o - c, v = o - b, q = t - u;
|
|
1018
|
+
return g ? se(q, n - v) : q;
|
|
1009
1019
|
}
|
|
1010
|
-
function
|
|
1020
|
+
function P(o) {
|
|
1011
1021
|
var u = o - c, v = o - b;
|
|
1012
1022
|
return c === void 0 || u >= t || u < 0 || g && v >= n;
|
|
1013
1023
|
}
|
|
1014
|
-
function
|
|
1015
|
-
var o =
|
|
1016
|
-
if (
|
|
1017
|
-
return
|
|
1018
|
-
a = setTimeout(
|
|
1024
|
+
function m() {
|
|
1025
|
+
var o = L();
|
|
1026
|
+
if (P(o))
|
|
1027
|
+
return D(o);
|
|
1028
|
+
a = setTimeout(m, et(o));
|
|
1019
1029
|
}
|
|
1020
|
-
function
|
|
1021
|
-
return a = void 0,
|
|
1030
|
+
function D(o) {
|
|
1031
|
+
return a = void 0, S && i ? C(o) : (i = s = void 0, l);
|
|
1022
1032
|
}
|
|
1023
|
-
function
|
|
1033
|
+
function it() {
|
|
1024
1034
|
a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
|
|
1025
1035
|
}
|
|
1026
|
-
function
|
|
1027
|
-
return a === void 0 ? l :
|
|
1036
|
+
function rt() {
|
|
1037
|
+
return a === void 0 ? l : D(L());
|
|
1028
1038
|
}
|
|
1029
|
-
function
|
|
1030
|
-
var o =
|
|
1039
|
+
function z() {
|
|
1040
|
+
var o = L(), u = P(o);
|
|
1031
1041
|
if (i = arguments, s = this, c = o, u) {
|
|
1032
1042
|
if (a === void 0)
|
|
1033
|
-
return
|
|
1043
|
+
return tt(c);
|
|
1034
1044
|
if (g)
|
|
1035
|
-
return clearTimeout(a), a = setTimeout(
|
|
1045
|
+
return clearTimeout(a), a = setTimeout(m, t), C(c);
|
|
1036
1046
|
}
|
|
1037
|
-
return a === void 0 && (a = setTimeout(
|
|
1047
|
+
return a === void 0 && (a = setTimeout(m, t)), l;
|
|
1038
1048
|
}
|
|
1039
|
-
return
|
|
1049
|
+
return z.cancel = it, z.flush = rt, z;
|
|
1040
1050
|
}
|
|
1041
|
-
var
|
|
1042
|
-
function
|
|
1051
|
+
var ae = "Expected a function";
|
|
1052
|
+
function ne(r, t, e) {
|
|
1043
1053
|
var i = !0, s = !0;
|
|
1044
1054
|
if (typeof r != "function")
|
|
1045
|
-
throw new TypeError(
|
|
1046
|
-
return
|
|
1055
|
+
throw new TypeError(ae);
|
|
1056
|
+
return y(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), oe(r, t, {
|
|
1047
1057
|
leading: i,
|
|
1048
1058
|
maxWait: t,
|
|
1049
1059
|
trailing: s
|
|
1050
1060
|
});
|
|
1051
1061
|
}
|
|
1052
|
-
const
|
|
1053
|
-
|
|
1054
|
-
const
|
|
1055
|
-
class
|
|
1062
|
+
const M = new CSSStyleSheet();
|
|
1063
|
+
M.replaceSync(dt);
|
|
1064
|
+
const le = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, ce = "px-spacing", T = (r) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
|
|
1065
|
+
class de extends HTMLElement {
|
|
1056
1066
|
constructor() {
|
|
1057
|
-
super(), this.visibleItemsAttributeDelegate = new
|
|
1067
|
+
super(), this.visibleItemsAttributeDelegate = new B(
|
|
1058
1068
|
this,
|
|
1059
1069
|
"visible-items",
|
|
1060
|
-
|
|
1070
|
+
T("s"),
|
|
1061
1071
|
"--px-carousel-min-width"
|
|
1062
1072
|
), this.template = `<px-vstack gap="default">
|
|
1063
1073
|
<div class="carousel">
|
|
@@ -1087,12 +1097,12 @@ class ce extends HTMLElement {
|
|
|
1087
1097
|
let n = s;
|
|
1088
1098
|
this.itemNumbers > 5 && (s > 2 && s < this.itemNumbers - 2 ? n = 2 : s === this.itemNumbers - 2 ? n = 3 : s === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
|
|
1089
1099
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1090
|
-
|
|
1091
|
-
|
|
1100
|
+
M,
|
|
1101
|
+
ct(
|
|
1092
1102
|
"gap",
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1103
|
+
le,
|
|
1104
|
+
G,
|
|
1105
|
+
ce
|
|
1096
1106
|
)
|
|
1097
1107
|
];
|
|
1098
1108
|
}
|
|
@@ -1106,7 +1116,7 @@ class ce extends HTMLElement {
|
|
|
1106
1116
|
case "gap--mobile":
|
|
1107
1117
|
case "gap--tablet":
|
|
1108
1118
|
case "gap--desktop":
|
|
1109
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1119
|
+
this.visibleItemsAttributeDelegate.attributeValue = T(i);
|
|
1110
1120
|
break;
|
|
1111
1121
|
default:
|
|
1112
1122
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
@@ -1117,11 +1127,11 @@ class ce extends HTMLElement {
|
|
|
1117
1127
|
}
|
|
1118
1128
|
}
|
|
1119
1129
|
connectedCallback() {
|
|
1120
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1130
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = T(
|
|
1121
1131
|
this.getAttribute("gap") || "s"
|
|
1122
1132
|
), requestAnimationFrame(() => {
|
|
1123
1133
|
this.handleAppleSeedDisplay();
|
|
1124
|
-
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll",
|
|
1134
|
+
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ne(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1125
1135
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1126
1136
|
}), this.$next.addEventListener("click", () => {
|
|
1127
1137
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1161,20 +1171,20 @@ class ce extends HTMLElement {
|
|
|
1161
1171
|
return this.querySelectorAll("px-carousel-item").length;
|
|
1162
1172
|
}
|
|
1163
1173
|
}
|
|
1164
|
-
customElements.get("px-carousel") || customElements.define("px-carousel",
|
|
1165
|
-
const
|
|
1166
|
-
|
|
1167
|
-
class
|
|
1174
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", de);
|
|
1175
|
+
const V = new CSSStyleSheet();
|
|
1176
|
+
V.replaceSync(pt);
|
|
1177
|
+
class pe extends HTMLElement {
|
|
1168
1178
|
constructor() {
|
|
1169
1179
|
super(), this.template = `
|
|
1170
1180
|
<div class="carousel-item">
|
|
1171
1181
|
<slot></slot>
|
|
1172
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1182
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [M, V];
|
|
1173
1183
|
}
|
|
1174
1184
|
}
|
|
1175
|
-
customElements.get("px-carousel-item") || customElements.define("px-carousel-item",
|
|
1185
|
+
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
|
|
1176
1186
|
export {
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1187
|
+
Rt as AppleSeed,
|
|
1188
|
+
de as Carousel,
|
|
1189
|
+
pe as CarouselItem
|
|
1180
1190
|
};
|