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