@proximus/lavender-carousel 2.0.0-alpha.62 → 2.0.0-alpha.64
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/Carousel.d.ts +3 -0
- package/dist/index.es.js +204 -187
- package/package.json +1 -1
package/dist/Carousel.d.ts
CHANGED
|
@@ -4,7 +4,9 @@ import '@proximus/lavender-button-icon';
|
|
|
4
4
|
import '@proximus/lavender-icon';
|
|
5
5
|
import './AppleSeed.ts';
|
|
6
6
|
import { type AppleSeed } from './AppleSeed.ts';
|
|
7
|
+
export declare const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
|
|
7
8
|
export declare class Carousel extends HTMLElement {
|
|
9
|
+
#private;
|
|
8
10
|
visibleItemsAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
11
|
template: string;
|
|
10
12
|
constructor();
|
|
@@ -26,4 +28,5 @@ export declare class Carousel extends HTMLElement {
|
|
|
26
28
|
export declare class CarouselItem extends HTMLElement {
|
|
27
29
|
template: string;
|
|
28
30
|
constructor();
|
|
31
|
+
connectedCallback(): void;
|
|
29
32
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
1
|
+
var F = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var d = (s, t, e) => (
|
|
6
|
-
import { WithExtraAttributes as
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
const
|
|
4
|
+
var j = (s, t, e) => t.has(s) || F("Cannot " + e);
|
|
5
|
+
var d = (s, t, e) => (j(s, t, "read from private field"), e ? e.call(s) : t.get(s)), f = (s, t, e) => t.has(s) ? F("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), E = (s, t, e, i) => (j(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e), T = (s, t, e) => (j(s, t, "access private method"), e);
|
|
6
|
+
import { WithExtraAttributes as P, AttributeBreakpointHandlerDelegate as Z, gapValues as U, checkName as lt, log as m, backgroundColorValues as ct, PxElement as dt, accessibilityAttributes as pt, iconSizeValuesKC as ht, cssTokenBreakpoints as ut } from "@proximus/lavender-common";
|
|
7
|
+
const bt = ":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}", gt = "::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}}", vt = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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))}}', K = new CSSStyleSheet();
|
|
8
|
+
K.replaceSync(vt);
|
|
9
|
+
const ft = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
12
12
|
"row",
|
|
13
13
|
"row-reverse",
|
|
14
14
|
"column",
|
|
15
15
|
"column-reverse"
|
|
16
|
-
],
|
|
16
|
+
], xt = [
|
|
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
|
+
], mt = [
|
|
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
|
+
], kt = ["", "default", "nowrap", "wrap", "wrap-reverse"], yt = ["", "visible", "hidden", "scroll", "auto"];
|
|
34
|
+
class D extends P {
|
|
35
35
|
constructor() {
|
|
36
|
-
super(
|
|
36
|
+
super(K), this.overflowXAttributeDelegate = new Z(
|
|
37
37
|
this,
|
|
38
38
|
"overflow-x",
|
|
39
39
|
(t) => t,
|
|
@@ -87,7 +87,7 @@ class R extends I {
|
|
|
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, U);
|
|
91
91
|
break;
|
|
92
92
|
case "justify-content":
|
|
93
93
|
case "justify-content--mobile":
|
|
@@ -98,7 +98,7 @@ class R extends I {
|
|
|
98
98
|
t,
|
|
99
99
|
e,
|
|
100
100
|
i,
|
|
101
|
-
|
|
101
|
+
mt
|
|
102
102
|
);
|
|
103
103
|
break;
|
|
104
104
|
case "align-items":
|
|
@@ -106,28 +106,28 @@ class R extends I {
|
|
|
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, xt);
|
|
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, kt);
|
|
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, ft);
|
|
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, yt);
|
|
131
131
|
break;
|
|
132
132
|
default:
|
|
133
133
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -135,8 +135,8 @@ class R extends I {
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
updateOverflowX(t, e, i, o) {
|
|
138
|
-
if (!
|
|
139
|
-
|
|
138
|
+
if (!lt(o, i)) {
|
|
139
|
+
m(
|
|
140
140
|
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
141
141
|
);
|
|
142
142
|
return;
|
|
@@ -148,17 +148,17 @@ class R extends I {
|
|
|
148
148
|
);
|
|
149
149
|
}
|
|
150
150
|
updateFlexProperties(t, e, i, o) {
|
|
151
|
-
this.checkName(o, i) ||
|
|
151
|
+
this.checkName(o, i) || m(
|
|
152
152
|
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
153
153
|
);
|
|
154
|
-
const
|
|
155
|
-
if (!
|
|
156
|
-
this.getAttribute(
|
|
157
|
-
this.updateStyle(
|
|
154
|
+
const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, l = [];
|
|
155
|
+
if (!r)
|
|
156
|
+
this.getAttribute(a + "--mobile") || l.push("mobile"), this.getAttribute(a + "--tablet") || l.push("tablet"), this.getAttribute(a + "--laptop") || l.push("laptop"), this.getAttribute(a + "--desktop") || l.push("desktop"), l.forEach((c) => {
|
|
157
|
+
this.updateStyle(a, c, e, o), this.updateStyle(a, c, i, o);
|
|
158
158
|
});
|
|
159
159
|
else {
|
|
160
160
|
const c = t.split("--")[1];
|
|
161
|
-
this.updateStyle(
|
|
161
|
+
this.updateStyle(a, c, e, o), this.updateStyle(a, c, i, o);
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
164
|
updateStyle(t, e, i, o) {
|
|
@@ -357,8 +357,8 @@ class R extends I {
|
|
|
357
357
|
return this.shadowRoot.querySelector(".flex-container");
|
|
358
358
|
}
|
|
359
359
|
}
|
|
360
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
361
|
-
class
|
|
360
|
+
customElements.get("px-stack") || customElements.define("px-stack", D);
|
|
361
|
+
class wt extends D {
|
|
362
362
|
constructor() {
|
|
363
363
|
super();
|
|
364
364
|
}
|
|
@@ -366,8 +366,8 @@ class xt extends R {
|
|
|
366
366
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
367
367
|
}
|
|
368
368
|
}
|
|
369
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
370
|
-
class
|
|
369
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", wt);
|
|
370
|
+
class At extends D {
|
|
371
371
|
constructor() {
|
|
372
372
|
super();
|
|
373
373
|
}
|
|
@@ -375,8 +375,8 @@ class mt extends R {
|
|
|
375
375
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
376
376
|
}
|
|
377
377
|
}
|
|
378
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
379
|
-
class
|
|
378
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", At);
|
|
379
|
+
class $t extends HTMLElement {
|
|
380
380
|
constructor() {
|
|
381
381
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
382
382
|
}
|
|
@@ -423,12 +423,12 @@ class kt extends HTMLElement {
|
|
|
423
423
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
424
424
|
}
|
|
425
425
|
}
|
|
426
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
427
|
-
const
|
|
428
|
-
|
|
429
|
-
class
|
|
426
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", $t);
|
|
427
|
+
const St = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", J = new CSSStyleSheet();
|
|
428
|
+
J.replaceSync(St);
|
|
429
|
+
class Ct extends P {
|
|
430
430
|
constructor() {
|
|
431
|
-
super(
|
|
431
|
+
super(J), this.template = (t) => `
|
|
432
432
|
<px-container border-radius="none" padding="none">
|
|
433
433
|
<px-vstack>
|
|
434
434
|
<px-container id="header-container" border-radius="none">
|
|
@@ -605,7 +605,7 @@ class wt extends I {
|
|
|
605
605
|
case "background-color":
|
|
606
606
|
this.$bodyContainer.setAttribute(
|
|
607
607
|
"background-color",
|
|
608
|
-
|
|
608
|
+
ct.indexOf(i) > 0 ? i : "none"
|
|
609
609
|
);
|
|
610
610
|
break;
|
|
611
611
|
case "padding-vertical":
|
|
@@ -625,24 +625,24 @@ class wt extends I {
|
|
|
625
625
|
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;
|
|
626
626
|
}
|
|
627
627
|
}
|
|
628
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
const
|
|
628
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", Ct);
|
|
629
|
+
const zt = ".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)}}", Q = new CSSStyleSheet();
|
|
630
|
+
Q.replaceSync(zt);
|
|
631
|
+
const Lt = ["", "default", "small"], jt = [
|
|
632
632
|
"",
|
|
633
633
|
"default",
|
|
634
634
|
"secondary",
|
|
635
635
|
"naked"
|
|
636
|
-
],
|
|
636
|
+
], $ = class $ extends dt {
|
|
637
637
|
constructor() {
|
|
638
|
-
super(
|
|
639
|
-
const t = document.createElement(
|
|
638
|
+
super(Q), this.template = () => "<slot></slot>";
|
|
639
|
+
const t = document.createElement($.nativeName);
|
|
640
640
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
641
641
|
}
|
|
642
642
|
static get observedAttributes() {
|
|
643
643
|
return [
|
|
644
644
|
...super.observedAttributes,
|
|
645
|
-
...
|
|
645
|
+
...pt,
|
|
646
646
|
"inverted",
|
|
647
647
|
"loading",
|
|
648
648
|
"size",
|
|
@@ -686,12 +686,12 @@ const $t = ["", "default", "small"], St = [
|
|
|
686
686
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
687
687
|
}
|
|
688
688
|
updateSize(t, e) {
|
|
689
|
-
this.checkName(
|
|
689
|
+
this.checkName(Lt, 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}`)) : m(
|
|
690
690
|
`${e} is not a valid size value for ${this.tagName.toLowerCase()}`
|
|
691
691
|
);
|
|
692
692
|
}
|
|
693
693
|
updateVariant(t, e) {
|
|
694
|
-
this.checkName(
|
|
694
|
+
this.checkName(jt, 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}`)) : m(
|
|
695
695
|
`${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
|
|
696
696
|
);
|
|
697
697
|
}
|
|
@@ -726,10 +726,10 @@ const $t = ["", "default", "small"], St = [
|
|
|
726
726
|
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
727
727
|
}
|
|
728
728
|
};
|
|
729
|
-
|
|
730
|
-
let
|
|
731
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
732
|
-
class
|
|
729
|
+
$.nativeName = "button";
|
|
730
|
+
let M = $;
|
|
731
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", M);
|
|
732
|
+
class Et extends HTMLElement {
|
|
733
733
|
constructor() {
|
|
734
734
|
super();
|
|
735
735
|
}
|
|
@@ -762,8 +762,8 @@ class Ct extends HTMLElement {
|
|
|
762
762
|
t && t.remove();
|
|
763
763
|
}
|
|
764
764
|
}
|
|
765
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
766
|
-
const
|
|
765
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Et);
|
|
766
|
+
const Tt = [
|
|
767
767
|
"Brand",
|
|
768
768
|
"Accent",
|
|
769
769
|
"Neutral",
|
|
@@ -776,21 +776,21 @@ const zt = [
|
|
|
776
776
|
"StateHover",
|
|
777
777
|
"StateActive",
|
|
778
778
|
"StateDisabled"
|
|
779
|
-
],
|
|
779
|
+
], It = ["Inherit", ...Tt].map(
|
|
780
780
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
781
|
-
),
|
|
782
|
-
|
|
783
|
-
var u, p,
|
|
784
|
-
class
|
|
781
|
+
), Rt = ":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)}", Y = new CSSStyleSheet();
|
|
782
|
+
Y.replaceSync(Rt);
|
|
783
|
+
var u, p, S;
|
|
784
|
+
class Mt extends P {
|
|
785
785
|
constructor(...e) {
|
|
786
786
|
var i;
|
|
787
|
-
super(...e,
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
787
|
+
super(...e, Y);
|
|
788
|
+
f(this, u);
|
|
789
|
+
f(this, p);
|
|
790
|
+
f(this, S, () => `<svg aria-hidden="true">
|
|
791
791
|
<use></use>
|
|
792
792
|
</svg>`);
|
|
793
|
-
this.shadowRoot.innerHTML = d(this,
|
|
793
|
+
this.shadowRoot.innerHTML = d(this, S).call(this), E(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
794
794
|
}
|
|
795
795
|
static get observedAttributes() {
|
|
796
796
|
return [
|
|
@@ -811,10 +811,10 @@ class Tt extends I {
|
|
|
811
811
|
this.updateName(i, o);
|
|
812
812
|
break;
|
|
813
813
|
case "size":
|
|
814
|
-
this.updateAttribute(e, i, o,
|
|
814
|
+
this.updateAttribute(e, i, o, ht);
|
|
815
815
|
break;
|
|
816
816
|
case "color":
|
|
817
|
-
this.updateAttribute(e, i, o,
|
|
817
|
+
this.updateAttribute(e, i, o, It);
|
|
818
818
|
break;
|
|
819
819
|
case "disabled":
|
|
820
820
|
this.color = "state-disabled";
|
|
@@ -835,15 +835,15 @@ class Tt extends I {
|
|
|
835
835
|
console.error("Icon name or src not found");
|
|
836
836
|
continue;
|
|
837
837
|
}
|
|
838
|
-
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (
|
|
838
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (E(this, u, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
839
839
|
"href",
|
|
840
840
|
`${d(this, u)}#icon-${this.name}`
|
|
841
841
|
));
|
|
842
842
|
}
|
|
843
843
|
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
844
844
|
}
|
|
845
|
-
updateAttribute(e, i, o,
|
|
846
|
-
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(
|
|
845
|
+
updateAttribute(e, i, o, r) {
|
|
846
|
+
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(r, o) || m(
|
|
847
847
|
`${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
848
848
|
);
|
|
849
849
|
}
|
|
@@ -899,11 +899,11 @@ class Tt extends I {
|
|
|
899
899
|
this.setAttribute("disabled", e);
|
|
900
900
|
}
|
|
901
901
|
}
|
|
902
|
-
u = new WeakMap(), p = new WeakMap(),
|
|
903
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
904
|
-
const
|
|
905
|
-
|
|
906
|
-
class
|
|
902
|
+
u = new WeakMap(), p = new WeakMap(), S = new WeakMap();
|
|
903
|
+
customElements.get("px-icon") || customElements.define("px-icon", Mt);
|
|
904
|
+
const Ht = ":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)}", V = new CSSStyleSheet();
|
|
905
|
+
V.replaceSync(Ht);
|
|
906
|
+
class Pt extends HTMLElement {
|
|
907
907
|
constructor() {
|
|
908
908
|
super(), this.template = (t, e) => `<div class="container">
|
|
909
909
|
${Array.from(
|
|
@@ -912,7 +912,7 @@ class It extends HTMLElement {
|
|
|
912
912
|
<div></div>
|
|
913
913
|
</div>`
|
|
914
914
|
).join("")}
|
|
915
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
915
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [V], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
916
916
|
}
|
|
917
917
|
static get observedAttributes() {
|
|
918
918
|
return ["amount", "active"];
|
|
@@ -945,133 +945,136 @@ class It extends HTMLElement {
|
|
|
945
945
|
return parseInt(this.getAttribute("active")) || 0;
|
|
946
946
|
}
|
|
947
947
|
}
|
|
948
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
949
|
-
function
|
|
948
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", Pt);
|
|
949
|
+
function w(s) {
|
|
950
950
|
var t = typeof s;
|
|
951
951
|
return s != null && (t == "object" || t == "function");
|
|
952
952
|
}
|
|
953
|
-
var
|
|
954
|
-
return
|
|
955
|
-
},
|
|
956
|
-
function
|
|
957
|
-
for (var t = s.length; t-- &&
|
|
953
|
+
var Dt = typeof global == "object" && global && global.Object === Object && global, Ot = typeof self == "object" && self && self.Object === Object && self, tt = Dt || Ot || Function("return this")(), I = function() {
|
|
954
|
+
return tt.Date.now();
|
|
955
|
+
}, qt = /\s/;
|
|
956
|
+
function Nt(s) {
|
|
957
|
+
for (var t = s.length; t-- && qt.test(s.charAt(t)); )
|
|
958
958
|
;
|
|
959
959
|
return t;
|
|
960
960
|
}
|
|
961
|
-
var
|
|
962
|
-
function
|
|
963
|
-
return s && s.slice(0,
|
|
961
|
+
var Wt = /^\s+/;
|
|
962
|
+
function Xt(s) {
|
|
963
|
+
return s && s.slice(0, Nt(s) + 1).replace(Wt, "");
|
|
964
964
|
}
|
|
965
|
-
var
|
|
966
|
-
function
|
|
967
|
-
var t =
|
|
965
|
+
var A = tt.Symbol, et = Object.prototype, Ft = et.hasOwnProperty, _t = et.toString, x = A ? A.toStringTag : void 0;
|
|
966
|
+
function Bt(s) {
|
|
967
|
+
var t = Ft.call(s, x), e = s[x];
|
|
968
968
|
try {
|
|
969
|
-
s[
|
|
969
|
+
s[x] = void 0;
|
|
970
970
|
var i = !0;
|
|
971
971
|
} catch {
|
|
972
972
|
}
|
|
973
|
-
var o =
|
|
974
|
-
return i && (t ? s[
|
|
973
|
+
var o = _t.call(s);
|
|
974
|
+
return i && (t ? s[x] = e : delete s[x]), o;
|
|
975
975
|
}
|
|
976
|
-
var
|
|
977
|
-
function
|
|
978
|
-
return
|
|
976
|
+
var Gt = Object.prototype, Zt = Gt.toString;
|
|
977
|
+
function Ut(s) {
|
|
978
|
+
return Zt.call(s);
|
|
979
979
|
}
|
|
980
|
-
var
|
|
981
|
-
function
|
|
982
|
-
return s == null ? s === void 0 ?
|
|
980
|
+
var Kt = "[object Null]", Jt = "[object Undefined]", _ = A ? A.toStringTag : void 0;
|
|
981
|
+
function Qt(s) {
|
|
982
|
+
return s == null ? s === void 0 ? Jt : Kt : _ && _ in Object(s) ? Bt(s) : Ut(s);
|
|
983
983
|
}
|
|
984
|
-
function
|
|
984
|
+
function Yt(s) {
|
|
985
985
|
return s != null && typeof s == "object";
|
|
986
986
|
}
|
|
987
|
-
var
|
|
988
|
-
function
|
|
989
|
-
return typeof s == "symbol" ||
|
|
987
|
+
var Vt = "[object Symbol]";
|
|
988
|
+
function te(s) {
|
|
989
|
+
return typeof s == "symbol" || Yt(s) && Qt(s) == Vt;
|
|
990
990
|
}
|
|
991
|
-
var
|
|
992
|
-
function
|
|
991
|
+
var B = NaN, ee = /^[-+]0x[0-9a-f]+$/i, ie = /^0b[01]+$/i, se = /^0o[0-7]+$/i, oe = parseInt;
|
|
992
|
+
function G(s) {
|
|
993
993
|
if (typeof s == "number")
|
|
994
994
|
return s;
|
|
995
|
-
if (
|
|
996
|
-
return
|
|
997
|
-
if (
|
|
995
|
+
if (te(s))
|
|
996
|
+
return B;
|
|
997
|
+
if (w(s)) {
|
|
998
998
|
var t = typeof s.valueOf == "function" ? s.valueOf() : s;
|
|
999
|
-
s =
|
|
999
|
+
s = w(t) ? t + "" : t;
|
|
1000
1000
|
}
|
|
1001
1001
|
if (typeof s != "string")
|
|
1002
1002
|
return s === 0 ? s : +s;
|
|
1003
|
-
s =
|
|
1004
|
-
var e =
|
|
1005
|
-
return e ||
|
|
1003
|
+
s = Xt(s);
|
|
1004
|
+
var e = ie.test(s);
|
|
1005
|
+
return e || se.test(s) ? oe(s.slice(2), e ? 2 : 8) : ee.test(s) ? B : +s;
|
|
1006
1006
|
}
|
|
1007
|
-
var
|
|
1008
|
-
function
|
|
1009
|
-
var i, o,
|
|
1007
|
+
var ae = "Expected a function", re = Math.max, ne = Math.min;
|
|
1008
|
+
function le(s, t, e) {
|
|
1009
|
+
var i, o, r, a, l, c, b = 0, q = !1, g = !1, C = !0;
|
|
1010
1010
|
if (typeof s != "function")
|
|
1011
|
-
throw new TypeError(
|
|
1012
|
-
t =
|
|
1013
|
-
function
|
|
1011
|
+
throw new TypeError(ae);
|
|
1012
|
+
t = G(t) || 0, w(e) && (q = !!e.leading, g = "maxWait" in e, r = g ? re(G(e.maxWait) || 0, t) : r, C = "trailing" in e ? !!e.trailing : C);
|
|
1013
|
+
function z(n) {
|
|
1014
1014
|
var h = i, v = o;
|
|
1015
|
-
return i = o = void 0, b =
|
|
1015
|
+
return i = o = void 0, b = n, a = s.apply(v, h), a;
|
|
1016
1016
|
}
|
|
1017
|
-
function
|
|
1018
|
-
return b =
|
|
1017
|
+
function ot(n) {
|
|
1018
|
+
return b = n, l = setTimeout(y, t), q ? z(n) : a;
|
|
1019
1019
|
}
|
|
1020
|
-
function
|
|
1021
|
-
var h =
|
|
1022
|
-
return g ?
|
|
1020
|
+
function at(n) {
|
|
1021
|
+
var h = n - c, v = n - b, X = t - h;
|
|
1022
|
+
return g ? ne(X, r - v) : X;
|
|
1023
1023
|
}
|
|
1024
|
-
function
|
|
1025
|
-
var h =
|
|
1026
|
-
return c === void 0 || h >= t || h < 0 || g && v >=
|
|
1024
|
+
function N(n) {
|
|
1025
|
+
var h = n - c, v = n - b;
|
|
1026
|
+
return c === void 0 || h >= t || h < 0 || g && v >= r;
|
|
1027
1027
|
}
|
|
1028
|
-
function
|
|
1029
|
-
var
|
|
1030
|
-
if (
|
|
1031
|
-
return
|
|
1032
|
-
|
|
1028
|
+
function y() {
|
|
1029
|
+
var n = I();
|
|
1030
|
+
if (N(n))
|
|
1031
|
+
return W(n);
|
|
1032
|
+
l = setTimeout(y, at(n));
|
|
1033
1033
|
}
|
|
1034
|
-
function
|
|
1035
|
-
return
|
|
1034
|
+
function W(n) {
|
|
1035
|
+
return l = void 0, C && i ? z(n) : (i = o = void 0, a);
|
|
1036
1036
|
}
|
|
1037
|
-
function
|
|
1038
|
-
|
|
1037
|
+
function rt() {
|
|
1038
|
+
l !== void 0 && clearTimeout(l), b = 0, i = c = o = l = void 0;
|
|
1039
1039
|
}
|
|
1040
|
-
function
|
|
1041
|
-
return
|
|
1040
|
+
function nt() {
|
|
1041
|
+
return l === void 0 ? a : W(I());
|
|
1042
1042
|
}
|
|
1043
|
-
function
|
|
1044
|
-
var
|
|
1045
|
-
if (i = arguments, o = this, c =
|
|
1046
|
-
if (
|
|
1047
|
-
return
|
|
1043
|
+
function L() {
|
|
1044
|
+
var n = I(), h = N(n);
|
|
1045
|
+
if (i = arguments, o = this, c = n, h) {
|
|
1046
|
+
if (l === void 0)
|
|
1047
|
+
return ot(c);
|
|
1048
1048
|
if (g)
|
|
1049
|
-
return clearTimeout(
|
|
1049
|
+
return clearTimeout(l), l = setTimeout(y, t), z(c);
|
|
1050
1050
|
}
|
|
1051
|
-
return
|
|
1051
|
+
return l === void 0 && (l = setTimeout(y, t)), a;
|
|
1052
1052
|
}
|
|
1053
|
-
return
|
|
1053
|
+
return L.cancel = rt, L.flush = nt, L;
|
|
1054
1054
|
}
|
|
1055
|
-
var
|
|
1056
|
-
function
|
|
1055
|
+
var ce = "Expected a function";
|
|
1056
|
+
function de(s, t, e) {
|
|
1057
1057
|
var i = !0, o = !0;
|
|
1058
1058
|
if (typeof s != "function")
|
|
1059
|
-
throw new TypeError(
|
|
1060
|
-
return
|
|
1059
|
+
throw new TypeError(ce);
|
|
1060
|
+
return w(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), le(s, t, {
|
|
1061
1061
|
leading: i,
|
|
1062
1062
|
maxWait: t,
|
|
1063
1063
|
trailing: o
|
|
1064
1064
|
});
|
|
1065
1065
|
}
|
|
1066
|
-
const
|
|
1067
|
-
|
|
1068
|
-
const
|
|
1069
|
-
|
|
1066
|
+
const O = new CSSStyleSheet();
|
|
1067
|
+
O.replaceSync(bt);
|
|
1068
|
+
const it = "px-carousel-item-connected", pe = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .carousel`, he = "px-spacing", R = (s) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${s}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
|
|
1069
|
+
var k, H;
|
|
1070
|
+
class ue extends HTMLElement {
|
|
1070
1071
|
constructor() {
|
|
1071
|
-
super()
|
|
1072
|
+
super();
|
|
1073
|
+
f(this, k);
|
|
1074
|
+
this.visibleItemsAttributeDelegate = new Z(
|
|
1072
1075
|
this,
|
|
1073
1076
|
"visible-items",
|
|
1074
|
-
|
|
1077
|
+
R("s"),
|
|
1075
1078
|
"--px-carousel-min-width"
|
|
1076
1079
|
), this.template = `<px-vstack gap="default">
|
|
1077
1080
|
<div class="carousel">
|
|
@@ -1093,49 +1096,49 @@ class ce extends HTMLElement {
|
|
|
1093
1096
|
</px-hstack>
|
|
1094
1097
|
</px-hstack>
|
|
1095
1098
|
</px-vstack>`, this.onScroll = () => {
|
|
1096
|
-
const
|
|
1097
|
-
let
|
|
1098
|
-
window.innerWidth < 768 ?
|
|
1099
|
-
|
|
1100
|
-
) : Math.ceil(
|
|
1101
|
-
let
|
|
1102
|
-
this.itemNumbers > 5 && (
|
|
1099
|
+
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, o = this.$carousel.clientWidth;
|
|
1100
|
+
let r = 0;
|
|
1101
|
+
window.innerWidth < 768 ? r = Math.round(
|
|
1102
|
+
e / (i - o) * (this.itemNumbers - 1)
|
|
1103
|
+
) : Math.ceil(e + o) + 10 >= i ? r = this.itemNumbers - 1 : r = Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
|
|
1104
|
+
let a = r;
|
|
1105
|
+
this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? a = 2 : r === this.itemNumbers - 2 ? a = 3 : r === this.itemNumbers - 1 && (a = 4)), this.$appleseed.setAttribute("active", `${a}`), this.handleNextPrevious();
|
|
1103
1106
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1104
|
-
|
|
1105
|
-
|
|
1107
|
+
O,
|
|
1108
|
+
ut(
|
|
1106
1109
|
"gap",
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
+
pe,
|
|
1111
|
+
U,
|
|
1112
|
+
he
|
|
1110
1113
|
)
|
|
1111
1114
|
];
|
|
1112
1115
|
}
|
|
1113
1116
|
static get observedAttributes() {
|
|
1114
1117
|
return ["visible-items"];
|
|
1115
1118
|
}
|
|
1116
|
-
attributeChangedCallback(
|
|
1117
|
-
if (
|
|
1118
|
-
switch (
|
|
1119
|
+
attributeChangedCallback(e, i, o) {
|
|
1120
|
+
if (i !== o)
|
|
1121
|
+
switch (e) {
|
|
1119
1122
|
case "gap":
|
|
1120
1123
|
case "gap--mobile":
|
|
1121
1124
|
case "gap--tablet":
|
|
1122
1125
|
case "gap--desktop":
|
|
1123
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1126
|
+
this.visibleItemsAttributeDelegate.attributeValue = R(o);
|
|
1124
1127
|
break;
|
|
1125
1128
|
default:
|
|
1126
1129
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
1127
|
-
t,
|
|
1128
1130
|
e,
|
|
1129
|
-
i
|
|
1131
|
+
i,
|
|
1132
|
+
o
|
|
1130
1133
|
);
|
|
1131
1134
|
}
|
|
1132
1135
|
}
|
|
1133
1136
|
connectedCallback() {
|
|
1134
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1137
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = R(
|
|
1135
1138
|
this.getAttribute("gap") || "s"
|
|
1136
|
-
),
|
|
1137
|
-
this.
|
|
1138
|
-
}), this
|
|
1139
|
+
), this.addEventListener(it, () => {
|
|
1140
|
+
T(this, k, H).call(this);
|
|
1141
|
+
}), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", de(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1139
1142
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1140
1143
|
}), this.$next.addEventListener("click", () => {
|
|
1141
1144
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1144,8 +1147,8 @@ class ce extends HTMLElement {
|
|
|
1144
1147
|
});
|
|
1145
1148
|
}
|
|
1146
1149
|
handleNextPrevious() {
|
|
1147
|
-
const
|
|
1148
|
-
|
|
1150
|
+
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, o = this.$carousel.clientWidth;
|
|
1151
|
+
e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e + o >= i ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
|
|
1149
1152
|
}
|
|
1150
1153
|
handleAppleSeedDisplay() {
|
|
1151
1154
|
this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
|
|
@@ -1175,20 +1178,34 @@ class ce extends HTMLElement {
|
|
|
1175
1178
|
return this.querySelectorAll("px-carousel-item").length;
|
|
1176
1179
|
}
|
|
1177
1180
|
}
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1181
|
+
k = new WeakSet(), H = function() {
|
|
1182
|
+
this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
|
|
1183
|
+
this.handleAppleSeedDisplay();
|
|
1184
|
+
});
|
|
1185
|
+
};
|
|
1186
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", ue);
|
|
1187
|
+
const st = new CSSStyleSheet();
|
|
1188
|
+
st.replaceSync(gt);
|
|
1189
|
+
class be extends HTMLElement {
|
|
1182
1190
|
constructor() {
|
|
1183
1191
|
super(), this.template = `
|
|
1184
1192
|
<div class="carousel-item">
|
|
1185
1193
|
<slot></slot>
|
|
1186
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1194
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [O, st];
|
|
1195
|
+
}
|
|
1196
|
+
connectedCallback() {
|
|
1197
|
+
this.dispatchEvent(
|
|
1198
|
+
new CustomEvent(it, {
|
|
1199
|
+
bubbles: !0,
|
|
1200
|
+
composed: !0
|
|
1201
|
+
})
|
|
1202
|
+
);
|
|
1187
1203
|
}
|
|
1188
1204
|
}
|
|
1189
|
-
customElements.get("px-carousel-item") || customElements.define("px-carousel-item",
|
|
1205
|
+
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", be);
|
|
1190
1206
|
export {
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1207
|
+
Pt as AppleSeed,
|
|
1208
|
+
it as CAROUSEL_ITEM_CONNECTED_EVENT,
|
|
1209
|
+
ue as Carousel,
|
|
1210
|
+
be as CarouselItem
|
|
1194
1211
|
};
|