@proximus/lavender-carousel 1.4.2-beta.1 → 1.4.3-alpha.11
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 +173 -159
- package/package.json +2 -2
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 I extends E {
|
|
|
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 I extends E {
|
|
|
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 I extends E {
|
|
|
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 I extends E {
|
|
|
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 I extends E {
|
|
|
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 I extends E {
|
|
|
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 I {
|
|
|
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,8 +372,8 @@ class xt extends I {
|
|
|
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
|
}
|
|
@@ -416,12 +420,12 @@ class mt extends HTMLElement {
|
|
|
416
420
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
417
421
|
}
|
|
418
422
|
}
|
|
419
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
420
|
-
const
|
|
421
|
-
|
|
422
|
-
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 {
|
|
423
427
|
constructor() {
|
|
424
|
-
super(
|
|
428
|
+
super(_), this.template = (t) => `
|
|
425
429
|
<px-container border-radius="none" padding="none">
|
|
426
430
|
<px-vstack>
|
|
427
431
|
<px-container id="header-container" border-radius="none">
|
|
@@ -598,7 +602,7 @@ class yt extends E {
|
|
|
598
602
|
case "background-color":
|
|
599
603
|
this.$bodyContainer.setAttribute(
|
|
600
604
|
"background-color",
|
|
601
|
-
|
|
605
|
+
ot.indexOf(i) > 0 ? i : "none"
|
|
602
606
|
);
|
|
603
607
|
break;
|
|
604
608
|
case "padding-vertical":
|
|
@@ -618,18 +622,18 @@ class yt extends E {
|
|
|
618
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;
|
|
619
623
|
}
|
|
620
624
|
}
|
|
621
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
622
|
-
const
|
|
623
|
-
|
|
624
|
-
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 = [
|
|
625
629
|
"",
|
|
626
630
|
"default",
|
|
627
631
|
"secondary",
|
|
628
632
|
"naked"
|
|
629
|
-
],
|
|
633
|
+
], A = class A extends at {
|
|
630
634
|
constructor() {
|
|
631
|
-
super(
|
|
632
|
-
const t = document.createElement(
|
|
635
|
+
super(U), this.template = () => "<slot></slot>";
|
|
636
|
+
const t = document.createElement(A.nativeName);
|
|
633
637
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
634
638
|
}
|
|
635
639
|
static get observedAttributes() {
|
|
@@ -650,7 +654,7 @@ const At = ["", "default", "small"], $t = [
|
|
|
650
654
|
this.$el.focus();
|
|
651
655
|
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
|
|
652
656
|
}
|
|
653
|
-
|
|
657
|
+
nt(this, this.$el, !1);
|
|
654
658
|
}
|
|
655
659
|
attributeChangedCallback(t, e, i) {
|
|
656
660
|
if (e !== i)
|
|
@@ -679,10 +683,14 @@ const At = ["", "default", "small"], $t = [
|
|
|
679
683
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
680
684
|
}
|
|
681
685
|
updateSize(t, e) {
|
|
682
|
-
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
|
+
);
|
|
683
689
|
}
|
|
684
690
|
updateVariant(t, e) {
|
|
685
|
-
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
|
+
);
|
|
686
694
|
}
|
|
687
695
|
get inverted() {
|
|
688
696
|
return this.getAttribute("inverted");
|
|
@@ -715,10 +723,10 @@ const At = ["", "default", "small"], $t = [
|
|
|
715
723
|
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
716
724
|
}
|
|
717
725
|
};
|
|
718
|
-
|
|
719
|
-
let
|
|
720
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
721
|
-
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 {
|
|
722
730
|
constructor() {
|
|
723
731
|
super();
|
|
724
732
|
}
|
|
@@ -751,8 +759,8 @@ class St extends HTMLElement {
|
|
|
751
759
|
t && t.remove();
|
|
752
760
|
}
|
|
753
761
|
}
|
|
754
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
755
|
-
const
|
|
762
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Ct);
|
|
763
|
+
const zt = [
|
|
756
764
|
"Brand",
|
|
757
765
|
"Accent",
|
|
758
766
|
"Neutral",
|
|
@@ -765,11 +773,11 @@ const Ct = [
|
|
|
765
773
|
"StateHover",
|
|
766
774
|
"StateActive",
|
|
767
775
|
"StateDisabled"
|
|
768
|
-
],
|
|
776
|
+
], jt = ["Inherit", ...zt].map(
|
|
769
777
|
(r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
770
|
-
),
|
|
771
|
-
|
|
772
|
-
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 = [
|
|
773
781
|
"name",
|
|
774
782
|
"size",
|
|
775
783
|
"color",
|
|
@@ -778,20 +786,20 @@ const Lt = [
|
|
|
778
786
|
"from",
|
|
779
787
|
"disabled"
|
|
780
788
|
];
|
|
781
|
-
var h, p,
|
|
782
|
-
class
|
|
789
|
+
var h, p, $;
|
|
790
|
+
class Et extends I {
|
|
783
791
|
constructor(...e) {
|
|
784
792
|
var i;
|
|
785
|
-
super(...e,
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
<use xlink:href="
|
|
793
|
+
super(...e, K);
|
|
794
|
+
k(this, h);
|
|
795
|
+
k(this, p);
|
|
796
|
+
k(this, $, () => `<svg aria-hidden="true">
|
|
797
|
+
<use xlink:href=""></use>
|
|
790
798
|
</svg>`);
|
|
791
|
-
this.shadowRoot.innerHTML = d(this,
|
|
799
|
+
this.shadowRoot.innerHTML = d(this, $).call(this), j(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
792
800
|
}
|
|
793
801
|
static get observedAttributes() {
|
|
794
|
-
return [...super.observedAttributes, ...
|
|
802
|
+
return [...super.observedAttributes, ...Tt];
|
|
795
803
|
}
|
|
796
804
|
attributeChangedCallback(e, i, s) {
|
|
797
805
|
if (i !== s)
|
|
@@ -800,10 +808,10 @@ class Tt extends E {
|
|
|
800
808
|
this.updateName(i, s);
|
|
801
809
|
break;
|
|
802
810
|
case "size":
|
|
803
|
-
this.updateAttribute(e, i, s,
|
|
811
|
+
this.updateAttribute(e, i, s, lt);
|
|
804
812
|
break;
|
|
805
813
|
case "color":
|
|
806
|
-
this.updateAttribute(e, i, s,
|
|
814
|
+
this.updateAttribute(e, i, s, jt);
|
|
807
815
|
break;
|
|
808
816
|
case "disabled":
|
|
809
817
|
this.color = "state-disabled";
|
|
@@ -816,6 +824,10 @@ class Tt extends E {
|
|
|
816
824
|
}
|
|
817
825
|
}
|
|
818
826
|
connectedCallback() {
|
|
827
|
+
this.role = "img", this.name && this.$el.firstElementChild.setAttribute(
|
|
828
|
+
"xlink:href",
|
|
829
|
+
`#icon-${this.name}`
|
|
830
|
+
);
|
|
819
831
|
const e = document.querySelectorAll("px-icon-set");
|
|
820
832
|
e || console.log("<px-icon-set> component not found");
|
|
821
833
|
for (const i of e) {
|
|
@@ -823,7 +835,7 @@ class Tt extends E {
|
|
|
823
835
|
console.error("Icon name or src not found");
|
|
824
836
|
continue;
|
|
825
837
|
}
|
|
826
|
-
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (
|
|
838
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
827
839
|
"xlink:href",
|
|
828
840
|
`${d(this, h)}#icon-${this.name}`
|
|
829
841
|
));
|
|
@@ -831,7 +843,9 @@ class Tt extends E {
|
|
|
831
843
|
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
832
844
|
}
|
|
833
845
|
updateAttribute(e, i, s, n) {
|
|
834
|
-
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) ||
|
|
846
|
+
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(
|
|
847
|
+
`${s} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
848
|
+
);
|
|
835
849
|
}
|
|
836
850
|
updateName(e, i) {
|
|
837
851
|
d(this, h) && this.$el.firstElementChild.setAttribute(
|
|
@@ -885,11 +899,11 @@ class Tt extends E {
|
|
|
885
899
|
this.setAttribute("disabled", e);
|
|
886
900
|
}
|
|
887
901
|
}
|
|
888
|
-
h = new WeakMap(), p = new WeakMap(),
|
|
889
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
890
|
-
const
|
|
891
|
-
|
|
892
|
-
class
|
|
902
|
+
h = new WeakMap(), p = new WeakMap(), $ = new WeakMap();
|
|
903
|
+
customElements.get("px-icon") || customElements.define("px-icon", Et);
|
|
904
|
+
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();
|
|
905
|
+
J.replaceSync(It);
|
|
906
|
+
class Rt extends HTMLElement {
|
|
893
907
|
constructor() {
|
|
894
908
|
super(), this.template = (t, e) => `<div class="container">
|
|
895
909
|
${Array.from(
|
|
@@ -898,7 +912,7 @@ class It extends HTMLElement {
|
|
|
898
912
|
<div></div>
|
|
899
913
|
</div>`
|
|
900
914
|
).join("")}
|
|
901
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
915
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [J], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
902
916
|
}
|
|
903
917
|
static get observedAttributes() {
|
|
904
918
|
return ["amount", "active"];
|
|
@@ -931,26 +945,26 @@ class It extends HTMLElement {
|
|
|
931
945
|
return parseInt(this.getAttribute("active")) || 0;
|
|
932
946
|
}
|
|
933
947
|
}
|
|
934
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
935
|
-
function
|
|
948
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", Rt);
|
|
949
|
+
function y(r) {
|
|
936
950
|
var t = typeof r;
|
|
937
951
|
return r != null && (t == "object" || t == "function");
|
|
938
952
|
}
|
|
939
|
-
var
|
|
940
|
-
return
|
|
941
|
-
},
|
|
942
|
-
function
|
|
943
|
-
for (var t = r.length; t-- &&
|
|
953
|
+
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() {
|
|
954
|
+
return Q.Date.now();
|
|
955
|
+
}, Pt = /\s/;
|
|
956
|
+
function Dt(r) {
|
|
957
|
+
for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
|
|
944
958
|
;
|
|
945
959
|
return t;
|
|
946
960
|
}
|
|
947
|
-
var
|
|
948
|
-
function
|
|
949
|
-
return r && r.slice(0,
|
|
961
|
+
var qt = /^\s+/;
|
|
962
|
+
function Ot(r) {
|
|
963
|
+
return r && r.slice(0, Dt(r) + 1).replace(qt, "");
|
|
950
964
|
}
|
|
951
|
-
var
|
|
952
|
-
function
|
|
953
|
-
var t =
|
|
965
|
+
var w = Q.Symbol, Y = Object.prototype, Nt = Y.hasOwnProperty, Wt = Y.toString, f = w ? w.toStringTag : void 0;
|
|
966
|
+
function Xt(r) {
|
|
967
|
+
var t = Nt.call(r, f), e = r[f];
|
|
954
968
|
try {
|
|
955
969
|
r[f] = void 0;
|
|
956
970
|
var i = !0;
|
|
@@ -959,105 +973,105 @@ function Nt(r) {
|
|
|
959
973
|
var s = Wt.call(r);
|
|
960
974
|
return i && (t ? r[f] = e : delete r[f]), s;
|
|
961
975
|
}
|
|
962
|
-
var
|
|
963
|
-
function
|
|
964
|
-
return
|
|
965
|
-
}
|
|
966
|
-
var Gt = "[object Null]", Zt = "[object Undefined]", W = y ? y.toStringTag : void 0;
|
|
967
|
-
function _t(r) {
|
|
968
|
-
return r == null ? r === void 0 ? Zt : Gt : W && W in Object(r) ? Nt(r) : Bt(r);
|
|
976
|
+
var Ft = Object.prototype, Bt = Ft.toString;
|
|
977
|
+
function Gt(r) {
|
|
978
|
+
return Bt.call(r);
|
|
969
979
|
}
|
|
980
|
+
var Zt = "[object Null]", _t = "[object Undefined]", W = w ? w.toStringTag : void 0;
|
|
970
981
|
function Ut(r) {
|
|
982
|
+
return r == null ? r === void 0 ? _t : Zt : W && W in Object(r) ? Xt(r) : Gt(r);
|
|
983
|
+
}
|
|
984
|
+
function Kt(r) {
|
|
971
985
|
return r != null && typeof r == "object";
|
|
972
986
|
}
|
|
973
|
-
var
|
|
974
|
-
function
|
|
975
|
-
return typeof r == "symbol" ||
|
|
987
|
+
var Jt = "[object Symbol]";
|
|
988
|
+
function Qt(r) {
|
|
989
|
+
return typeof r == "symbol" || Kt(r) && Ut(r) == Jt;
|
|
976
990
|
}
|
|
977
|
-
var
|
|
978
|
-
function
|
|
991
|
+
var X = NaN, Yt = /^[-+]0x[0-9a-f]+$/i, Vt = /^0b[01]+$/i, te = /^0o[0-7]+$/i, ee = parseInt;
|
|
992
|
+
function F(r) {
|
|
979
993
|
if (typeof r == "number")
|
|
980
994
|
return r;
|
|
981
|
-
if (
|
|
982
|
-
return
|
|
983
|
-
if (
|
|
995
|
+
if (Qt(r))
|
|
996
|
+
return X;
|
|
997
|
+
if (y(r)) {
|
|
984
998
|
var t = typeof r.valueOf == "function" ? r.valueOf() : r;
|
|
985
|
-
r =
|
|
999
|
+
r = y(t) ? t + "" : t;
|
|
986
1000
|
}
|
|
987
1001
|
if (typeof r != "string")
|
|
988
1002
|
return r === 0 ? r : +r;
|
|
989
|
-
r =
|
|
990
|
-
var e =
|
|
991
|
-
return e ||
|
|
1003
|
+
r = Ot(r);
|
|
1004
|
+
var e = Vt.test(r);
|
|
1005
|
+
return e || te.test(r) ? ee(r.slice(2), e ? 2 : 8) : Yt.test(r) ? X : +r;
|
|
992
1006
|
}
|
|
993
|
-
var
|
|
994
|
-
function
|
|
995
|
-
var i, s, n, l, a, c, b = 0,
|
|
1007
|
+
var ie = "Expected a function", re = Math.max, se = Math.min;
|
|
1008
|
+
function oe(r, t, e) {
|
|
1009
|
+
var i, s, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
|
|
996
1010
|
if (typeof r != "function")
|
|
997
|
-
throw new TypeError(
|
|
998
|
-
t =
|
|
999
|
-
function
|
|
1011
|
+
throw new TypeError(ie);
|
|
1012
|
+
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);
|
|
1013
|
+
function C(o) {
|
|
1000
1014
|
var u = i, v = s;
|
|
1001
1015
|
return i = s = void 0, b = o, l = r.apply(v, u), l;
|
|
1002
1016
|
}
|
|
1003
|
-
function V(o) {
|
|
1004
|
-
return b = o, a = setTimeout(x, t), M ? S(o) : l;
|
|
1005
|
-
}
|
|
1006
1017
|
function tt(o) {
|
|
1007
|
-
|
|
1008
|
-
return g ? re(D, n - v) : D;
|
|
1018
|
+
return b = o, a = setTimeout(m, t), H ? C(o) : l;
|
|
1009
1019
|
}
|
|
1010
|
-
function
|
|
1020
|
+
function et(o) {
|
|
1021
|
+
var u = o - c, v = o - b, q = t - u;
|
|
1022
|
+
return g ? se(q, n - v) : q;
|
|
1023
|
+
}
|
|
1024
|
+
function P(o) {
|
|
1011
1025
|
var u = o - c, v = o - b;
|
|
1012
1026
|
return c === void 0 || u >= t || u < 0 || g && v >= n;
|
|
1013
1027
|
}
|
|
1014
|
-
function
|
|
1015
|
-
var o =
|
|
1016
|
-
if (
|
|
1017
|
-
return
|
|
1018
|
-
a = setTimeout(
|
|
1028
|
+
function m() {
|
|
1029
|
+
var o = L();
|
|
1030
|
+
if (P(o))
|
|
1031
|
+
return D(o);
|
|
1032
|
+
a = setTimeout(m, et(o));
|
|
1019
1033
|
}
|
|
1020
|
-
function
|
|
1021
|
-
return a = void 0,
|
|
1034
|
+
function D(o) {
|
|
1035
|
+
return a = void 0, S && i ? C(o) : (i = s = void 0, l);
|
|
1022
1036
|
}
|
|
1023
|
-
function
|
|
1037
|
+
function it() {
|
|
1024
1038
|
a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
|
|
1025
1039
|
}
|
|
1026
|
-
function
|
|
1027
|
-
return a === void 0 ? l :
|
|
1040
|
+
function rt() {
|
|
1041
|
+
return a === void 0 ? l : D(L());
|
|
1028
1042
|
}
|
|
1029
|
-
function
|
|
1030
|
-
var o =
|
|
1043
|
+
function z() {
|
|
1044
|
+
var o = L(), u = P(o);
|
|
1031
1045
|
if (i = arguments, s = this, c = o, u) {
|
|
1032
1046
|
if (a === void 0)
|
|
1033
|
-
return
|
|
1047
|
+
return tt(c);
|
|
1034
1048
|
if (g)
|
|
1035
|
-
return clearTimeout(a), a = setTimeout(
|
|
1049
|
+
return clearTimeout(a), a = setTimeout(m, t), C(c);
|
|
1036
1050
|
}
|
|
1037
|
-
return a === void 0 && (a = setTimeout(
|
|
1051
|
+
return a === void 0 && (a = setTimeout(m, t)), l;
|
|
1038
1052
|
}
|
|
1039
|
-
return
|
|
1053
|
+
return z.cancel = it, z.flush = rt, z;
|
|
1040
1054
|
}
|
|
1041
|
-
var
|
|
1042
|
-
function
|
|
1055
|
+
var ae = "Expected a function";
|
|
1056
|
+
function ne(r, t, e) {
|
|
1043
1057
|
var i = !0, s = !0;
|
|
1044
1058
|
if (typeof r != "function")
|
|
1045
|
-
throw new TypeError(
|
|
1046
|
-
return
|
|
1059
|
+
throw new TypeError(ae);
|
|
1060
|
+
return y(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), oe(r, t, {
|
|
1047
1061
|
leading: i,
|
|
1048
1062
|
maxWait: t,
|
|
1049
1063
|
trailing: s
|
|
1050
1064
|
});
|
|
1051
1065
|
}
|
|
1052
|
-
const
|
|
1053
|
-
|
|
1054
|
-
const
|
|
1055
|
-
class
|
|
1066
|
+
const M = new CSSStyleSheet();
|
|
1067
|
+
M.replaceSync(dt);
|
|
1068
|
+
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)}))`;
|
|
1069
|
+
class de extends HTMLElement {
|
|
1056
1070
|
constructor() {
|
|
1057
|
-
super(), this.visibleItemsAttributeDelegate = new
|
|
1071
|
+
super(), this.visibleItemsAttributeDelegate = new B(
|
|
1058
1072
|
this,
|
|
1059
1073
|
"visible-items",
|
|
1060
|
-
|
|
1074
|
+
T("s"),
|
|
1061
1075
|
"--px-carousel-min-width"
|
|
1062
1076
|
), this.template = `<px-vstack gap="default">
|
|
1063
1077
|
<div class="carousel">
|
|
@@ -1087,12 +1101,12 @@ class ce extends HTMLElement {
|
|
|
1087
1101
|
let n = s;
|
|
1088
1102
|
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();
|
|
1089
1103
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1090
|
-
|
|
1091
|
-
|
|
1104
|
+
M,
|
|
1105
|
+
ct(
|
|
1092
1106
|
"gap",
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1107
|
+
le,
|
|
1108
|
+
G,
|
|
1109
|
+
ce
|
|
1096
1110
|
)
|
|
1097
1111
|
];
|
|
1098
1112
|
}
|
|
@@ -1106,7 +1120,7 @@ class ce extends HTMLElement {
|
|
|
1106
1120
|
case "gap--mobile":
|
|
1107
1121
|
case "gap--tablet":
|
|
1108
1122
|
case "gap--desktop":
|
|
1109
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1123
|
+
this.visibleItemsAttributeDelegate.attributeValue = T(i);
|
|
1110
1124
|
break;
|
|
1111
1125
|
default:
|
|
1112
1126
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
@@ -1117,11 +1131,11 @@ class ce extends HTMLElement {
|
|
|
1117
1131
|
}
|
|
1118
1132
|
}
|
|
1119
1133
|
connectedCallback() {
|
|
1120
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1134
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = T(
|
|
1121
1135
|
this.getAttribute("gap") || "s"
|
|
1122
1136
|
), requestAnimationFrame(() => {
|
|
1123
1137
|
this.handleAppleSeedDisplay();
|
|
1124
|
-
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll",
|
|
1138
|
+
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ne(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1125
1139
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1126
1140
|
}), this.$next.addEventListener("click", () => {
|
|
1127
1141
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1161,20 +1175,20 @@ class ce extends HTMLElement {
|
|
|
1161
1175
|
return this.querySelectorAll("px-carousel-item").length;
|
|
1162
1176
|
}
|
|
1163
1177
|
}
|
|
1164
|
-
customElements.get("px-carousel") || customElements.define("px-carousel",
|
|
1165
|
-
const
|
|
1166
|
-
|
|
1167
|
-
class
|
|
1178
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", de);
|
|
1179
|
+
const V = new CSSStyleSheet();
|
|
1180
|
+
V.replaceSync(pt);
|
|
1181
|
+
class pe extends HTMLElement {
|
|
1168
1182
|
constructor() {
|
|
1169
1183
|
super(), this.template = `
|
|
1170
1184
|
<div class="carousel-item">
|
|
1171
1185
|
<slot></slot>
|
|
1172
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1186
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [M, V];
|
|
1173
1187
|
}
|
|
1174
1188
|
}
|
|
1175
|
-
customElements.get("px-carousel-item") || customElements.define("px-carousel-item",
|
|
1189
|
+
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
|
|
1176
1190
|
export {
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1191
|
+
Rt as AppleSeed,
|
|
1192
|
+
de as Carousel,
|
|
1193
|
+
pe as CarouselItem
|
|
1180
1194
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-carousel",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3-alpha.11",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|