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