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