@proximus/lavender-carousel 1.0.2 → 1.3.0-alpha.1
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 +111 -90
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
var q = (r) => {
|
|
2
2
|
throw TypeError(r);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var d = (r, t, e) => (
|
|
6
|
-
import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as
|
|
7
|
-
const ct = ":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}", dt = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;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}}", pt = ':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))}}',
|
|
8
|
-
|
|
4
|
+
var O = (r, t, e) => t.has(r) || q("Cannot " + e);
|
|
5
|
+
var d = (r, t, e) => (O(r, t, "read from private field"), e ? e.call(r) : t.get(r)), m = (r, t, e) => t.has(r) ? q("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), C = (r, t, e, i) => (O(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
|
|
6
|
+
import { WithExtraAttributes as T, AttributeBreakpointHandlerDelegate as F, gapValues as B, checkName as rt, backgroundColorValues as st, PxElement as ot, transferAccessibilityAttributes as at, iconSizeValuesKC as nt, cssTokenBreakpoints as lt } from "@proximus/lavender-common";
|
|
7
|
+
const ct = ":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}", dt = "::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}}", pt = ':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))}}', G = new CSSStyleSheet();
|
|
8
|
+
G.replaceSync(pt);
|
|
9
9
|
const ut = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
@@ -33,7 +33,7 @@ const ut = [
|
|
|
33
33
|
], gt = ["", "default", "nowrap", "wrap", "wrap-reverse"], vt = ["", "visible", "hidden", "scroll", "auto"];
|
|
34
34
|
class E extends T {
|
|
35
35
|
constructor() {
|
|
36
|
-
super(
|
|
36
|
+
super(G), this.overflowXAttributeDelegate = new F(
|
|
37
37
|
this,
|
|
38
38
|
"overflow-x",
|
|
39
39
|
(t) => t,
|
|
@@ -87,7 +87,7 @@ class E extends T {
|
|
|
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, B);
|
|
91
91
|
break;
|
|
92
92
|
case "justify-content":
|
|
93
93
|
case "justify-content--mobile":
|
|
@@ -134,8 +134,8 @@ class E extends T {
|
|
|
134
134
|
break;
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
-
updateOverflowX(t, e, i,
|
|
138
|
-
if (!rt(
|
|
137
|
+
updateOverflowX(t, e, i, s) {
|
|
138
|
+
if (!rt(s, i)) {
|
|
139
139
|
console.error(`${i} is not an allowed ${t} value`);
|
|
140
140
|
return;
|
|
141
141
|
}
|
|
@@ -145,20 +145,20 @@ class E extends T {
|
|
|
145
145
|
i
|
|
146
146
|
);
|
|
147
147
|
}
|
|
148
|
-
updateFlexProperties(t, e, i,
|
|
149
|
-
this.checkName(
|
|
148
|
+
updateFlexProperties(t, e, i, s) {
|
|
149
|
+
this.checkName(s, i) || console.error(`${i} is not a valid value for ${s}`);
|
|
150
150
|
const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
|
|
151
151
|
if (!n)
|
|
152
152
|
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) => {
|
|
153
|
-
this.updateStyle(l, c, e,
|
|
153
|
+
this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
|
|
154
154
|
});
|
|
155
155
|
else {
|
|
156
156
|
const c = t.split("--")[1];
|
|
157
|
-
this.updateStyle(l, c, e,
|
|
157
|
+
this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
updateStyle(t, e, i,
|
|
161
|
-
i && (t === "gap" &&
|
|
160
|
+
updateStyle(t, e, i, s) {
|
|
161
|
+
i && (t === "gap" && s && s.includes(i) ? this.$el.style.setProperty(
|
|
162
162
|
`--flex-${t}--${e}-value`,
|
|
163
163
|
`var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
|
|
164
164
|
) : this.$el.style.setProperty(
|
|
@@ -371,16 +371,22 @@ class xt extends E {
|
|
|
371
371
|
customElements.get("px-hstack") || customElements.define("px-hstack", xt);
|
|
372
372
|
class mt extends HTMLElement {
|
|
373
373
|
constructor() {
|
|
374
|
-
super();
|
|
374
|
+
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
375
375
|
}
|
|
376
376
|
static get observedAttributes() {
|
|
377
377
|
return ["grow"];
|
|
378
378
|
}
|
|
379
379
|
attributeChangedCallback(t, e, i) {
|
|
380
|
-
t === "grow" && (this.style.flexGrow =
|
|
380
|
+
t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
381
381
|
}
|
|
382
382
|
connectedCallback() {
|
|
383
|
-
this.
|
|
383
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
384
|
+
this.handleSizeChange();
|
|
385
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
386
|
+
}
|
|
387
|
+
disconnectedCallback() {
|
|
388
|
+
var t;
|
|
389
|
+
(t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
|
|
384
390
|
}
|
|
385
391
|
get grow() {
|
|
386
392
|
return this.getAttribute("grow");
|
|
@@ -388,13 +394,28 @@ class mt extends HTMLElement {
|
|
|
388
394
|
set grow(t) {
|
|
389
395
|
this.setAttribute("grow", t);
|
|
390
396
|
}
|
|
397
|
+
scheduleRecheck() {
|
|
398
|
+
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
399
|
+
this.recheckHandle = void 0, this.recalculateVisibility();
|
|
400
|
+
});
|
|
401
|
+
}
|
|
402
|
+
recalculateVisibility() {
|
|
403
|
+
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
404
|
+
}
|
|
405
|
+
handleSizeChange() {
|
|
406
|
+
const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
|
|
407
|
+
this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
|
|
408
|
+
}
|
|
409
|
+
updateParticipation() {
|
|
410
|
+
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
411
|
+
}
|
|
391
412
|
}
|
|
392
413
|
customElements.get("px-spacer") || customElements.define("px-spacer", mt);
|
|
393
|
-
const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}",
|
|
394
|
-
|
|
414
|
+
const kt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", Z = new CSSStyleSheet();
|
|
415
|
+
Z.replaceSync(kt);
|
|
395
416
|
class yt extends T {
|
|
396
417
|
constructor() {
|
|
397
|
-
super(
|
|
418
|
+
super(Z), this.template = (t) => `
|
|
398
419
|
<px-container border-radius="none" padding="none">
|
|
399
420
|
<px-vstack>
|
|
400
421
|
<px-container id="header-container" border-radius="none">
|
|
@@ -571,7 +592,7 @@ class yt extends T {
|
|
|
571
592
|
case "background-color":
|
|
572
593
|
this.$bodyContainer.setAttribute(
|
|
573
594
|
"background-color",
|
|
574
|
-
|
|
595
|
+
st.indexOf(i) > 0 ? i : "none"
|
|
575
596
|
);
|
|
576
597
|
break;
|
|
577
598
|
case "padding-vertical":
|
|
@@ -592,16 +613,16 @@ class yt extends T {
|
|
|
592
613
|
}
|
|
593
614
|
}
|
|
594
615
|
customElements.get("px-page") === void 0 && customElements.define("px-page", yt);
|
|
595
|
-
const wt = ".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)}}",
|
|
596
|
-
|
|
616
|
+
const wt = ".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)}}", _ = new CSSStyleSheet();
|
|
617
|
+
_.replaceSync(wt);
|
|
597
618
|
const At = ["", "default", "small"], $t = [
|
|
598
619
|
"",
|
|
599
620
|
"default",
|
|
600
621
|
"secondary",
|
|
601
622
|
"naked"
|
|
602
|
-
], R = class R extends
|
|
623
|
+
], R = class R extends ot {
|
|
603
624
|
constructor() {
|
|
604
|
-
super(
|
|
625
|
+
super(_), this.template = () => "<slot></slot>";
|
|
605
626
|
const t = document.createElement(this.nativeName);
|
|
606
627
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
607
628
|
}
|
|
@@ -741,8 +762,8 @@ const Ct = [
|
|
|
741
762
|
"StateDisabled"
|
|
742
763
|
], zt = ["Inherit", ...Ct].map(
|
|
743
764
|
(r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
744
|
-
), jt = ":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-
|
|
745
|
-
|
|
765
|
+
), jt = ":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)}", U = new CSSStyleSheet();
|
|
766
|
+
U.replaceSync(jt);
|
|
746
767
|
const Lt = [
|
|
747
768
|
"name",
|
|
748
769
|
"size",
|
|
@@ -756,7 +777,7 @@ var h, p, w;
|
|
|
756
777
|
class Tt extends T {
|
|
757
778
|
constructor(...e) {
|
|
758
779
|
var i;
|
|
759
|
-
super(...e,
|
|
780
|
+
super(...e, U);
|
|
760
781
|
m(this, h);
|
|
761
782
|
m(this, p);
|
|
762
783
|
m(this, w, () => `<svg aria-hidden="true">
|
|
@@ -767,17 +788,17 @@ class Tt extends T {
|
|
|
767
788
|
static get observedAttributes() {
|
|
768
789
|
return [...super.observedAttributes, ...Lt];
|
|
769
790
|
}
|
|
770
|
-
attributeChangedCallback(e, i,
|
|
771
|
-
if (i !==
|
|
791
|
+
attributeChangedCallback(e, i, s) {
|
|
792
|
+
if (i !== s)
|
|
772
793
|
switch (e) {
|
|
773
794
|
case "name":
|
|
774
|
-
this.updateName(i,
|
|
795
|
+
this.updateName(i, s);
|
|
775
796
|
break;
|
|
776
797
|
case "size":
|
|
777
|
-
this.updateAttribute(e, i,
|
|
798
|
+
this.updateAttribute(e, i, s, nt);
|
|
778
799
|
break;
|
|
779
800
|
case "color":
|
|
780
|
-
this.updateAttribute(e, i,
|
|
801
|
+
this.updateAttribute(e, i, s, zt);
|
|
781
802
|
break;
|
|
782
803
|
case "disabled":
|
|
783
804
|
this.color = "state-disabled";
|
|
@@ -785,7 +806,7 @@ class Tt extends T {
|
|
|
785
806
|
case "aria-label":
|
|
786
807
|
if (!d(this, p))
|
|
787
808
|
return;
|
|
788
|
-
|
|
809
|
+
s ? d(this, p).ariaHidden = "false" : d(this, p).ariaHidden = "true";
|
|
789
810
|
break;
|
|
790
811
|
}
|
|
791
812
|
}
|
|
@@ -804,8 +825,8 @@ class Tt extends T {
|
|
|
804
825
|
}
|
|
805
826
|
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true");
|
|
806
827
|
}
|
|
807
|
-
updateAttribute(e, i,
|
|
808
|
-
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)),
|
|
828
|
+
updateAttribute(e, i, s, n) {
|
|
829
|
+
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) || console.error(`${s} is not an allowed ${e} value`);
|
|
809
830
|
}
|
|
810
831
|
updateName(e, i) {
|
|
811
832
|
d(this, h) && this.$el.firstElementChild.setAttribute(
|
|
@@ -861,18 +882,18 @@ class Tt extends T {
|
|
|
861
882
|
}
|
|
862
883
|
h = new WeakMap(), p = new WeakMap(), w = new WeakMap();
|
|
863
884
|
customElements.get("px-icon") || customElements.define("px-icon", Tt);
|
|
864
|
-
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)}",
|
|
865
|
-
|
|
885
|
+
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)}", K = new CSSStyleSheet();
|
|
886
|
+
K.replaceSync(Et);
|
|
866
887
|
class It extends HTMLElement {
|
|
867
888
|
constructor() {
|
|
868
889
|
super(), this.template = (t, e) => `<div class="container">
|
|
869
890
|
${Array.from(
|
|
870
891
|
{ length: Math.min(t, 5) },
|
|
871
|
-
(i,
|
|
892
|
+
(i, s) => `<div id="seed-${s}" ${e === s ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
|
|
872
893
|
<div></div>
|
|
873
894
|
</div>`
|
|
874
895
|
).join("")}
|
|
875
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
896
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [K], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
876
897
|
}
|
|
877
898
|
static get observedAttributes() {
|
|
878
899
|
return ["amount", "active"];
|
|
@@ -912,41 +933,41 @@ function k(r) {
|
|
|
912
933
|
}
|
|
913
934
|
var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, J = Rt || Mt || Function("return this")(), z = function() {
|
|
914
935
|
return J.Date.now();
|
|
915
|
-
},
|
|
916
|
-
function
|
|
917
|
-
for (var t = r.length; t-- &&
|
|
936
|
+
}, Ht = /\s/;
|
|
937
|
+
function Pt(r) {
|
|
938
|
+
for (var t = r.length; t-- && Ht.test(r.charAt(t)); )
|
|
918
939
|
;
|
|
919
940
|
return t;
|
|
920
941
|
}
|
|
921
|
-
var
|
|
942
|
+
var Dt = /^\s+/;
|
|
922
943
|
function qt(r) {
|
|
923
|
-
return r && r.slice(0,
|
|
944
|
+
return r && r.slice(0, Pt(r) + 1).replace(Dt, "");
|
|
924
945
|
}
|
|
925
|
-
var y = J.Symbol, Q = Object.prototype,
|
|
946
|
+
var y = J.Symbol, Q = Object.prototype, Ot = Q.hasOwnProperty, Wt = Q.toString, f = y ? y.toStringTag : void 0;
|
|
926
947
|
function Nt(r) {
|
|
927
|
-
var t =
|
|
948
|
+
var t = Ot.call(r, f), e = r[f];
|
|
928
949
|
try {
|
|
929
950
|
r[f] = void 0;
|
|
930
951
|
var i = !0;
|
|
931
952
|
} catch {
|
|
932
953
|
}
|
|
933
|
-
var
|
|
934
|
-
return i && (t ? r[f] = e : delete r[f]),
|
|
954
|
+
var s = Wt.call(r);
|
|
955
|
+
return i && (t ? r[f] = e : delete r[f]), s;
|
|
935
956
|
}
|
|
936
957
|
var Xt = Object.prototype, Ft = Xt.toString;
|
|
937
|
-
function
|
|
958
|
+
function Bt(r) {
|
|
938
959
|
return Ft.call(r);
|
|
939
960
|
}
|
|
940
|
-
var
|
|
941
|
-
function
|
|
942
|
-
return r == null ? r === void 0 ?
|
|
961
|
+
var Gt = "[object Null]", Zt = "[object Undefined]", W = y ? y.toStringTag : void 0;
|
|
962
|
+
function _t(r) {
|
|
963
|
+
return r == null ? r === void 0 ? Zt : Gt : W && W in Object(r) ? Nt(r) : Bt(r);
|
|
943
964
|
}
|
|
944
|
-
function
|
|
965
|
+
function Ut(r) {
|
|
945
966
|
return r != null && typeof r == "object";
|
|
946
967
|
}
|
|
947
|
-
var
|
|
968
|
+
var Kt = "[object Symbol]";
|
|
948
969
|
function Jt(r) {
|
|
949
|
-
return typeof r == "symbol" ||
|
|
970
|
+
return typeof r == "symbol" || Ut(r) && _t(r) == Kt;
|
|
950
971
|
}
|
|
951
972
|
var N = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
|
|
952
973
|
function X(r) {
|
|
@@ -965,44 +986,44 @@ function X(r) {
|
|
|
965
986
|
return e || Vt.test(r) ? te(r.slice(2), e ? 2 : 8) : Qt.test(r) ? N : +r;
|
|
966
987
|
}
|
|
967
988
|
var ee = "Expected a function", ie = Math.max, re = Math.min;
|
|
968
|
-
function
|
|
969
|
-
var i,
|
|
989
|
+
function se(r, t, e) {
|
|
990
|
+
var i, s, n, l, a, c, b = 0, M = !1, g = !1, A = !0;
|
|
970
991
|
if (typeof r != "function")
|
|
971
992
|
throw new TypeError(ee);
|
|
972
993
|
t = X(t) || 0, k(e) && (M = !!e.leading, g = "maxWait" in e, n = g ? ie(X(e.maxWait) || 0, t) : n, A = "trailing" in e ? !!e.trailing : A);
|
|
973
|
-
function $(
|
|
974
|
-
var u = i, v =
|
|
975
|
-
return i =
|
|
994
|
+
function $(o) {
|
|
995
|
+
var u = i, v = s;
|
|
996
|
+
return i = s = void 0, b = o, l = r.apply(v, u), l;
|
|
976
997
|
}
|
|
977
|
-
function V(
|
|
978
|
-
return b =
|
|
998
|
+
function V(o) {
|
|
999
|
+
return b = o, a = setTimeout(x, t), M ? $(o) : l;
|
|
979
1000
|
}
|
|
980
|
-
function tt(
|
|
981
|
-
var u =
|
|
982
|
-
return g ? re(
|
|
1001
|
+
function tt(o) {
|
|
1002
|
+
var u = o - c, v = o - b, D = t - u;
|
|
1003
|
+
return g ? re(D, n - v) : D;
|
|
983
1004
|
}
|
|
984
|
-
function
|
|
985
|
-
var u =
|
|
1005
|
+
function H(o) {
|
|
1006
|
+
var u = o - c, v = o - b;
|
|
986
1007
|
return c === void 0 || u >= t || u < 0 || g && v >= n;
|
|
987
1008
|
}
|
|
988
1009
|
function x() {
|
|
989
|
-
var
|
|
990
|
-
if (
|
|
991
|
-
return
|
|
992
|
-
a = setTimeout(x, tt(
|
|
1010
|
+
var o = z();
|
|
1011
|
+
if (H(o))
|
|
1012
|
+
return P(o);
|
|
1013
|
+
a = setTimeout(x, tt(o));
|
|
993
1014
|
}
|
|
994
|
-
function
|
|
995
|
-
return a = void 0, A && i ? $(
|
|
1015
|
+
function P(o) {
|
|
1016
|
+
return a = void 0, A && i ? $(o) : (i = s = void 0, l);
|
|
996
1017
|
}
|
|
997
1018
|
function et() {
|
|
998
|
-
a !== void 0 && clearTimeout(a), b = 0, i = c =
|
|
1019
|
+
a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
|
|
999
1020
|
}
|
|
1000
1021
|
function it() {
|
|
1001
|
-
return a === void 0 ? l :
|
|
1022
|
+
return a === void 0 ? l : P(z());
|
|
1002
1023
|
}
|
|
1003
1024
|
function S() {
|
|
1004
|
-
var
|
|
1005
|
-
if (i = arguments,
|
|
1025
|
+
var o = z(), u = H(o);
|
|
1026
|
+
if (i = arguments, s = this, c = o, u) {
|
|
1006
1027
|
if (a === void 0)
|
|
1007
1028
|
return V(c);
|
|
1008
1029
|
if (g)
|
|
@@ -1012,15 +1033,15 @@ function oe(r, t, e) {
|
|
|
1012
1033
|
}
|
|
1013
1034
|
return S.cancel = et, S.flush = it, S;
|
|
1014
1035
|
}
|
|
1015
|
-
var
|
|
1036
|
+
var oe = "Expected a function";
|
|
1016
1037
|
function ae(r, t, e) {
|
|
1017
|
-
var i = !0,
|
|
1038
|
+
var i = !0, s = !0;
|
|
1018
1039
|
if (typeof r != "function")
|
|
1019
|
-
throw new TypeError(
|
|
1020
|
-
return k(e) && (i = "leading" in e ? !!e.leading : i,
|
|
1040
|
+
throw new TypeError(oe);
|
|
1041
|
+
return k(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), se(r, t, {
|
|
1021
1042
|
leading: i,
|
|
1022
1043
|
maxWait: t,
|
|
1023
|
-
trailing:
|
|
1044
|
+
trailing: s
|
|
1024
1045
|
});
|
|
1025
1046
|
}
|
|
1026
1047
|
const I = new CSSStyleSheet();
|
|
@@ -1054,18 +1075,18 @@ class ce extends HTMLElement {
|
|
|
1054
1075
|
</px-hstack>
|
|
1055
1076
|
</px-vstack>`, this.onScroll = () => {
|
|
1056
1077
|
const t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
|
|
1057
|
-
let
|
|
1058
|
-
window.innerWidth < 768 ?
|
|
1078
|
+
let s = 0;
|
|
1079
|
+
window.innerWidth < 768 ? s = Math.round(
|
|
1059
1080
|
t / (e - i) * (this.itemNumbers - 1)
|
|
1060
|
-
) : Math.ceil(t + i) + 10 >= e ?
|
|
1061
|
-
let n =
|
|
1062
|
-
this.itemNumbers > 5 && (
|
|
1081
|
+
) : Math.ceil(t + i) + 10 >= e ? s = this.itemNumbers - 1 : s = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
|
|
1082
|
+
let n = s;
|
|
1083
|
+
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();
|
|
1063
1084
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1064
1085
|
I,
|
|
1065
1086
|
lt(
|
|
1066
1087
|
"gap",
|
|
1067
1088
|
ne,
|
|
1068
|
-
|
|
1089
|
+
B,
|
|
1069
1090
|
le
|
|
1070
1091
|
)
|
|
1071
1092
|
];
|