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