@proximus/lavender-carousel 2.0.0-alpha.8 → 2.0.0-alpha.80
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/Carousel.d.ts +3 -0
- package/dist/index.es.js +277 -241
- package/package.json +2 -2
package/dist/Carousel.d.ts
CHANGED
|
@@ -4,7 +4,9 @@ import '@proximus/lavender-button-icon';
|
|
|
4
4
|
import '@proximus/lavender-icon';
|
|
5
5
|
import './AppleSeed.ts';
|
|
6
6
|
import { type AppleSeed } from './AppleSeed.ts';
|
|
7
|
+
export declare const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
|
|
7
8
|
export declare class Carousel extends HTMLElement {
|
|
9
|
+
#private;
|
|
8
10
|
visibleItemsAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
11
|
template: string;
|
|
10
12
|
constructor();
|
|
@@ -26,4 +28,5 @@ export declare class Carousel extends HTMLElement {
|
|
|
26
28
|
export declare class CarouselItem extends HTMLElement {
|
|
27
29
|
template: string;
|
|
28
30
|
constructor();
|
|
31
|
+
connectedCallback(): void;
|
|
29
32
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
2
|
-
throw TypeError(
|
|
1
|
+
var F = (s) => {
|
|
2
|
+
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var d = (
|
|
6
|
-
import { WithExtraAttributes as
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
const
|
|
4
|
+
var j = (s, t, e) => t.has(s) || F("Cannot " + e);
|
|
5
|
+
var d = (s, t, e) => (j(s, t, "read from private field"), e ? e.call(s) : t.get(s)), f = (s, t, e) => t.has(s) ? F("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), E = (s, t, e, i) => (j(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e), T = (s, t, e) => (j(s, t, "access private method"), e);
|
|
6
|
+
import { WithExtraAttributes as P, AttributeBreakpointHandlerDelegate as Z, gapValues as U, checkName as lt, log as m, backgroundColorValues as ct, PxElement as dt, accessibilityAttributes as pt, iconSizeValuesKC as ht, cssTokenBreakpoints as ut } from "@proximus/lavender-common";
|
|
7
|
+
const bt = ":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}", gt = "::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}}", vt = ':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))}}', K = new CSSStyleSheet();
|
|
8
|
+
K.replaceSync(vt);
|
|
9
|
+
const ft = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
12
12
|
"row",
|
|
13
13
|
"row-reverse",
|
|
14
14
|
"column",
|
|
15
15
|
"column-reverse"
|
|
16
|
-
],
|
|
16
|
+
], xt = [
|
|
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
|
+
], mt = [
|
|
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
|
+
], kt = ["", "default", "nowrap", "wrap", "wrap-reverse"], yt = ["", "visible", "hidden", "scroll", "auto"];
|
|
34
|
+
class D extends P {
|
|
35
35
|
constructor() {
|
|
36
|
-
super(
|
|
36
|
+
super(K), this.overflowXAttributeDelegate = new Z(
|
|
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, U);
|
|
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
|
+
mt
|
|
102
102
|
);
|
|
103
103
|
break;
|
|
104
104
|
case "align-items":
|
|
@@ -106,37 +106,39 @@ 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, xt);
|
|
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, kt);
|
|
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, ft);
|
|
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, yt);
|
|
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 (!lt(o, i)) {
|
|
139
|
+
m(
|
|
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
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
updateFlexProperties(t, e, i, o) {
|
|
151
|
+
this.checkName(o, i) || m(
|
|
152
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
153
|
+
);
|
|
154
|
+
const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, l = [];
|
|
155
|
+
if (!r)
|
|
156
|
+
this.getAttribute(a + "--mobile") || l.push("mobile"), this.getAttribute(a + "--tablet") || l.push("tablet"), this.getAttribute(a + "--laptop") || l.push("laptop"), this.getAttribute(a + "--desktop") || l.push("desktop"), l.forEach((c) => {
|
|
157
|
+
this.updateStyle(a, c, e, o), this.updateStyle(a, c, i, o);
|
|
154
158
|
});
|
|
155
159
|
else {
|
|
156
160
|
const c = t.split("--")[1];
|
|
157
|
-
this.updateStyle(
|
|
161
|
+
this.updateStyle(a, c, e, o), this.updateStyle(a, 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", D);
|
|
361
|
+
class wt extends D {
|
|
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", wt);
|
|
370
|
+
class At extends D {
|
|
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", At);
|
|
379
|
+
class $t 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", $t);
|
|
427
|
+
const St = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", J = new CSSStyleSheet();
|
|
428
|
+
J.replaceSync(St);
|
|
429
|
+
class Ct extends P {
|
|
417
430
|
constructor() {
|
|
418
|
-
super(
|
|
431
|
+
super(J), 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
|
+
ct.indexOf(i) > 0 ? i : "none"
|
|
596
609
|
);
|
|
597
610
|
break;
|
|
598
611
|
case "padding-vertical":
|
|
@@ -612,23 +625,24 @@ 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", Ct);
|
|
629
|
+
const zt = ".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)}}", Q = new CSSStyleSheet();
|
|
630
|
+
Q.replaceSync(zt);
|
|
631
|
+
const Lt = ["", "default", "small"], jt = [
|
|
619
632
|
"",
|
|
620
633
|
"default",
|
|
621
634
|
"secondary",
|
|
622
635
|
"naked"
|
|
623
|
-
],
|
|
636
|
+
], $ = class $ extends dt {
|
|
624
637
|
constructor() {
|
|
625
|
-
super(
|
|
626
|
-
const t = document.createElement(
|
|
638
|
+
super(Q), this.template = () => "<slot></slot>";
|
|
639
|
+
const t = document.createElement($.nativeName);
|
|
627
640
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
628
641
|
}
|
|
629
642
|
static get observedAttributes() {
|
|
630
643
|
return [
|
|
631
644
|
...super.observedAttributes,
|
|
645
|
+
...pt,
|
|
632
646
|
"inverted",
|
|
633
647
|
"loading",
|
|
634
648
|
"size",
|
|
@@ -637,7 +651,6 @@ const At = ["", "default", "small"], $t = [
|
|
|
637
651
|
];
|
|
638
652
|
}
|
|
639
653
|
connectedCallback() {
|
|
640
|
-
super.connectedCallback();
|
|
641
654
|
const t = this.querySelector("px-icon");
|
|
642
655
|
if (t) {
|
|
643
656
|
const e = t.getAttribute("size"), i = t.getAttribute("color");
|
|
@@ -645,7 +658,6 @@ const At = ["", "default", "small"], $t = [
|
|
|
645
658
|
this.$el.focus();
|
|
646
659
|
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
|
|
647
660
|
}
|
|
648
|
-
at(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(Lt, 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}`)) : m(
|
|
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(jt, 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}`)) : m(
|
|
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
|
+
$.nativeName = "button";
|
|
730
|
+
let M = $;
|
|
731
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", M);
|
|
732
|
+
class Et 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", Et);
|
|
766
|
+
const Tt = [
|
|
751
767
|
"Brand",
|
|
752
768
|
"Accent",
|
|
753
769
|
"Neutral",
|
|
@@ -760,45 +776,45 @@ const Ct = [
|
|
|
760
776
|
"StateHover",
|
|
761
777
|
"StateActive",
|
|
762
778
|
"StateDisabled"
|
|
763
|
-
],
|
|
764
|
-
(
|
|
765
|
-
),
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
"size",
|
|
770
|
-
"color",
|
|
771
|
-
"aria-label",
|
|
772
|
-
"inverted",
|
|
773
|
-
"from",
|
|
774
|
-
"disabled"
|
|
775
|
-
];
|
|
776
|
-
var h, p, w;
|
|
777
|
-
class Tt extends T {
|
|
779
|
+
], It = ["Inherit", ...Tt].map(
|
|
780
|
+
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
781
|
+
), Rt = ":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)}", Y = new CSSStyleSheet();
|
|
782
|
+
Y.replaceSync(Rt);
|
|
783
|
+
var u, p, S;
|
|
784
|
+
class Mt extends P {
|
|
778
785
|
constructor(...e) {
|
|
779
786
|
var i;
|
|
780
|
-
super(...e,
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
<use
|
|
787
|
+
super(...e, Y);
|
|
788
|
+
f(this, u);
|
|
789
|
+
f(this, p);
|
|
790
|
+
f(this, S, () => `<svg aria-hidden="true">
|
|
791
|
+
<use></use>
|
|
785
792
|
</svg>`);
|
|
786
|
-
this.shadowRoot.innerHTML = d(this,
|
|
793
|
+
this.shadowRoot.innerHTML = d(this, S).call(this), E(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
|
|
787
794
|
}
|
|
788
795
|
static get observedAttributes() {
|
|
789
|
-
return [
|
|
796
|
+
return [
|
|
797
|
+
...super.observedAttributes,
|
|
798
|
+
"name",
|
|
799
|
+
"size",
|
|
800
|
+
"color",
|
|
801
|
+
"aria-label",
|
|
802
|
+
"inverted",
|
|
803
|
+
"from",
|
|
804
|
+
"disabled"
|
|
805
|
+
];
|
|
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, ht);
|
|
799
815
|
break;
|
|
800
816
|
case "color":
|
|
801
|
-
this.updateAttribute(e, i,
|
|
817
|
+
this.updateAttribute(e, i, o, It);
|
|
802
818
|
break;
|
|
803
819
|
case "disabled":
|
|
804
820
|
this.color = "state-disabled";
|
|
@@ -806,11 +822,12 @@ 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";
|
|
814
831
|
const e = document.querySelectorAll("px-icon-set");
|
|
815
832
|
e || console.log("<px-icon-set> component not found");
|
|
816
833
|
for (const i of e) {
|
|
@@ -818,20 +835,22 @@ class Tt extends T {
|
|
|
818
835
|
console.error("Icon name or src not found");
|
|
819
836
|
continue;
|
|
820
837
|
}
|
|
821
|
-
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (
|
|
822
|
-
"
|
|
823
|
-
`${d(this,
|
|
838
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (E(this, u, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
839
|
+
"href",
|
|
840
|
+
`${d(this, u)}#icon-${this.name}`
|
|
824
841
|
));
|
|
825
842
|
}
|
|
826
843
|
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
827
844
|
}
|
|
828
|
-
updateAttribute(e, i,
|
|
829
|
-
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)),
|
|
845
|
+
updateAttribute(e, i, o, r) {
|
|
846
|
+
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(r, o) || m(
|
|
847
|
+
`${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
848
|
+
);
|
|
830
849
|
}
|
|
831
850
|
updateName(e, i) {
|
|
832
|
-
d(this,
|
|
833
|
-
"
|
|
834
|
-
`${d(this,
|
|
851
|
+
d(this, u) && this.$el.firstElementChild.setAttribute(
|
|
852
|
+
"href",
|
|
853
|
+
`${d(this, u)}#icon-${i}`
|
|
835
854
|
);
|
|
836
855
|
}
|
|
837
856
|
get $el() {
|
|
@@ -880,20 +899,20 @@ class Tt extends T {
|
|
|
880
899
|
this.setAttribute("disabled", e);
|
|
881
900
|
}
|
|
882
901
|
}
|
|
883
|
-
|
|
884
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
885
|
-
const
|
|
886
|
-
|
|
887
|
-
class
|
|
902
|
+
u = new WeakMap(), p = new WeakMap(), S = new WeakMap();
|
|
903
|
+
customElements.get("px-icon") || customElements.define("px-icon", Mt);
|
|
904
|
+
const Ht = ":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)}", V = new CSSStyleSheet();
|
|
905
|
+
V.replaceSync(Ht);
|
|
906
|
+
class Pt extends HTMLElement {
|
|
888
907
|
constructor() {
|
|
889
908
|
super(), this.template = (t, e) => `<div class="container">
|
|
890
909
|
${Array.from(
|
|
891
910
|
{ length: Math.min(t, 5) },
|
|
892
|
-
(i,
|
|
911
|
+
(i, o) => `<div id="seed-${o}" ${e === o ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
|
|
893
912
|
<div></div>
|
|
894
913
|
</div>`
|
|
895
914
|
).join("")}
|
|
896
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
915
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [V], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
897
916
|
}
|
|
898
917
|
static get observedAttributes() {
|
|
899
918
|
return ["amount", "active"];
|
|
@@ -926,133 +945,136 @@ class It extends HTMLElement {
|
|
|
926
945
|
return parseInt(this.getAttribute("active")) || 0;
|
|
927
946
|
}
|
|
928
947
|
}
|
|
929
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
930
|
-
function
|
|
931
|
-
var t = typeof
|
|
932
|
-
return
|
|
948
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", Pt);
|
|
949
|
+
function w(s) {
|
|
950
|
+
var t = typeof s;
|
|
951
|
+
return s != null && (t == "object" || t == "function");
|
|
933
952
|
}
|
|
934
|
-
var
|
|
935
|
-
return
|
|
936
|
-
},
|
|
937
|
-
function
|
|
938
|
-
for (var t =
|
|
953
|
+
var Dt = typeof global == "object" && global && global.Object === Object && global, Ot = typeof self == "object" && self && self.Object === Object && self, tt = Dt || Ot || Function("return this")(), I = function() {
|
|
954
|
+
return tt.Date.now();
|
|
955
|
+
}, qt = /\s/;
|
|
956
|
+
function Nt(s) {
|
|
957
|
+
for (var t = s.length; t-- && qt.test(s.charAt(t)); )
|
|
939
958
|
;
|
|
940
959
|
return t;
|
|
941
960
|
}
|
|
942
|
-
var
|
|
943
|
-
function
|
|
944
|
-
return
|
|
961
|
+
var Wt = /^\s+/;
|
|
962
|
+
function Xt(s) {
|
|
963
|
+
return s && s.slice(0, Nt(s) + 1).replace(Wt, "");
|
|
945
964
|
}
|
|
946
|
-
var
|
|
947
|
-
function
|
|
948
|
-
var t =
|
|
965
|
+
var A = tt.Symbol, et = Object.prototype, Ft = et.hasOwnProperty, _t = et.toString, x = A ? A.toStringTag : void 0;
|
|
966
|
+
function Bt(s) {
|
|
967
|
+
var t = Ft.call(s, x), e = s[x];
|
|
949
968
|
try {
|
|
950
|
-
|
|
969
|
+
s[x] = void 0;
|
|
951
970
|
var i = !0;
|
|
952
971
|
} catch {
|
|
953
972
|
}
|
|
954
|
-
var
|
|
955
|
-
return i && (t ?
|
|
973
|
+
var o = _t.call(s);
|
|
974
|
+
return i && (t ? s[x] = e : delete s[x]), o;
|
|
956
975
|
}
|
|
957
|
-
var
|
|
958
|
-
function
|
|
959
|
-
return
|
|
976
|
+
var Gt = Object.prototype, Zt = Gt.toString;
|
|
977
|
+
function Ut(s) {
|
|
978
|
+
return Zt.call(s);
|
|
960
979
|
}
|
|
961
|
-
var
|
|
962
|
-
function
|
|
963
|
-
return
|
|
980
|
+
var Kt = "[object Null]", Jt = "[object Undefined]", _ = A ? A.toStringTag : void 0;
|
|
981
|
+
function Qt(s) {
|
|
982
|
+
return s == null ? s === void 0 ? Jt : Kt : _ && _ in Object(s) ? Bt(s) : Ut(s);
|
|
964
983
|
}
|
|
965
|
-
function
|
|
966
|
-
return
|
|
984
|
+
function Yt(s) {
|
|
985
|
+
return s != null && typeof s == "object";
|
|
967
986
|
}
|
|
968
|
-
var
|
|
969
|
-
function
|
|
970
|
-
return typeof
|
|
987
|
+
var Vt = "[object Symbol]";
|
|
988
|
+
function te(s) {
|
|
989
|
+
return typeof s == "symbol" || Yt(s) && Qt(s) == Vt;
|
|
971
990
|
}
|
|
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 ||
|
|
991
|
+
var B = NaN, ee = /^[-+]0x[0-9a-f]+$/i, ie = /^0b[01]+$/i, se = /^0o[0-7]+$/i, oe = parseInt;
|
|
992
|
+
function G(s) {
|
|
993
|
+
if (typeof s == "number")
|
|
994
|
+
return s;
|
|
995
|
+
if (te(s))
|
|
996
|
+
return B;
|
|
997
|
+
if (w(s)) {
|
|
998
|
+
var t = typeof s.valueOf == "function" ? s.valueOf() : s;
|
|
999
|
+
s = w(t) ? t + "" : t;
|
|
1000
|
+
}
|
|
1001
|
+
if (typeof s != "string")
|
|
1002
|
+
return s === 0 ? s : +s;
|
|
1003
|
+
s = Xt(s);
|
|
1004
|
+
var e = ie.test(s);
|
|
1005
|
+
return e || se.test(s) ? oe(s.slice(2), e ? 2 : 8) : ee.test(s) ? B : +s;
|
|
987
1006
|
}
|
|
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
|
-
|
|
1014
|
-
}
|
|
1015
|
-
function
|
|
1016
|
-
return
|
|
1017
|
-
}
|
|
1018
|
-
function
|
|
1019
|
-
|
|
1020
|
-
}
|
|
1021
|
-
function
|
|
1022
|
-
return
|
|
1023
|
-
}
|
|
1024
|
-
function
|
|
1025
|
-
var
|
|
1026
|
-
if (i = arguments,
|
|
1027
|
-
if (
|
|
1028
|
-
return
|
|
1007
|
+
var ae = "Expected a function", re = Math.max, ne = Math.min;
|
|
1008
|
+
function le(s, t, e) {
|
|
1009
|
+
var i, o, r, a, l, c, b = 0, q = !1, g = !1, C = !0;
|
|
1010
|
+
if (typeof s != "function")
|
|
1011
|
+
throw new TypeError(ae);
|
|
1012
|
+
t = G(t) || 0, w(e) && (q = !!e.leading, g = "maxWait" in e, r = g ? re(G(e.maxWait) || 0, t) : r, C = "trailing" in e ? !!e.trailing : C);
|
|
1013
|
+
function z(n) {
|
|
1014
|
+
var h = i, v = o;
|
|
1015
|
+
return i = o = void 0, b = n, a = s.apply(v, h), a;
|
|
1016
|
+
}
|
|
1017
|
+
function ot(n) {
|
|
1018
|
+
return b = n, l = setTimeout(y, t), q ? z(n) : a;
|
|
1019
|
+
}
|
|
1020
|
+
function at(n) {
|
|
1021
|
+
var h = n - c, v = n - b, X = t - h;
|
|
1022
|
+
return g ? ne(X, r - v) : X;
|
|
1023
|
+
}
|
|
1024
|
+
function N(n) {
|
|
1025
|
+
var h = n - c, v = n - b;
|
|
1026
|
+
return c === void 0 || h >= t || h < 0 || g && v >= r;
|
|
1027
|
+
}
|
|
1028
|
+
function y() {
|
|
1029
|
+
var n = I();
|
|
1030
|
+
if (N(n))
|
|
1031
|
+
return W(n);
|
|
1032
|
+
l = setTimeout(y, at(n));
|
|
1033
|
+
}
|
|
1034
|
+
function W(n) {
|
|
1035
|
+
return l = void 0, C && i ? z(n) : (i = o = void 0, a);
|
|
1036
|
+
}
|
|
1037
|
+
function rt() {
|
|
1038
|
+
l !== void 0 && clearTimeout(l), b = 0, i = c = o = l = void 0;
|
|
1039
|
+
}
|
|
1040
|
+
function nt() {
|
|
1041
|
+
return l === void 0 ? a : W(I());
|
|
1042
|
+
}
|
|
1043
|
+
function L() {
|
|
1044
|
+
var n = I(), h = N(n);
|
|
1045
|
+
if (i = arguments, o = this, c = n, h) {
|
|
1046
|
+
if (l === void 0)
|
|
1047
|
+
return ot(c);
|
|
1029
1048
|
if (g)
|
|
1030
|
-
return clearTimeout(
|
|
1049
|
+
return clearTimeout(l), l = setTimeout(y, t), z(c);
|
|
1031
1050
|
}
|
|
1032
|
-
return
|
|
1051
|
+
return l === void 0 && (l = setTimeout(y, t)), a;
|
|
1033
1052
|
}
|
|
1034
|
-
return
|
|
1053
|
+
return L.cancel = rt, L.flush = nt, L;
|
|
1035
1054
|
}
|
|
1036
|
-
var
|
|
1037
|
-
function
|
|
1038
|
-
var i = !0,
|
|
1039
|
-
if (typeof
|
|
1040
|
-
throw new TypeError(
|
|
1041
|
-
return
|
|
1055
|
+
var ce = "Expected a function";
|
|
1056
|
+
function de(s, t, e) {
|
|
1057
|
+
var i = !0, o = !0;
|
|
1058
|
+
if (typeof s != "function")
|
|
1059
|
+
throw new TypeError(ce);
|
|
1060
|
+
return w(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), le(s, t, {
|
|
1042
1061
|
leading: i,
|
|
1043
1062
|
maxWait: t,
|
|
1044
|
-
trailing:
|
|
1063
|
+
trailing: o
|
|
1045
1064
|
});
|
|
1046
1065
|
}
|
|
1047
|
-
const
|
|
1048
|
-
|
|
1049
|
-
const
|
|
1050
|
-
|
|
1066
|
+
const O = new CSSStyleSheet();
|
|
1067
|
+
O.replaceSync(bt);
|
|
1068
|
+
const it = "px-carousel-item-connected", pe = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .carousel`, he = "px-spacing", R = (s) => (t, e) => `calc(((100% - ${Math.max(parseInt(t), 2)} * ( var(--px-spacing-${s}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
|
|
1069
|
+
var k, H;
|
|
1070
|
+
class ue extends HTMLElement {
|
|
1051
1071
|
constructor() {
|
|
1052
|
-
super()
|
|
1072
|
+
super();
|
|
1073
|
+
f(this, k);
|
|
1074
|
+
this.visibleItemsAttributeDelegate = new Z(
|
|
1053
1075
|
this,
|
|
1054
1076
|
"visible-items",
|
|
1055
|
-
|
|
1077
|
+
R("s"),
|
|
1056
1078
|
"--px-carousel-min-width"
|
|
1057
1079
|
), this.template = `<px-vstack gap="default">
|
|
1058
1080
|
<div class="carousel">
|
|
@@ -1074,49 +1096,49 @@ class ce extends HTMLElement {
|
|
|
1074
1096
|
</px-hstack>
|
|
1075
1097
|
</px-hstack>
|
|
1076
1098
|
</px-vstack>`, this.onScroll = () => {
|
|
1077
|
-
const
|
|
1078
|
-
let
|
|
1079
|
-
window.innerWidth < 768 ?
|
|
1080
|
-
|
|
1081
|
-
) : Math.ceil(
|
|
1082
|
-
let
|
|
1083
|
-
this.itemNumbers > 5 && (
|
|
1099
|
+
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, o = this.$carousel.clientWidth;
|
|
1100
|
+
let r = 0;
|
|
1101
|
+
window.innerWidth < 768 ? r = Math.round(
|
|
1102
|
+
e / (i - o) * (this.itemNumbers - 1)
|
|
1103
|
+
) : Math.ceil(e + o) + 10 >= i ? r = this.itemNumbers - 1 : r = Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
|
|
1104
|
+
let a = r;
|
|
1105
|
+
this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? a = 2 : r === this.itemNumbers - 2 ? a = 3 : r === this.itemNumbers - 1 && (a = 4)), this.$appleseed.setAttribute("active", `${a}`), this.handleNextPrevious();
|
|
1084
1106
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1085
|
-
|
|
1086
|
-
|
|
1107
|
+
O,
|
|
1108
|
+
ut(
|
|
1087
1109
|
"gap",
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1110
|
+
pe,
|
|
1111
|
+
U,
|
|
1112
|
+
he
|
|
1091
1113
|
)
|
|
1092
1114
|
];
|
|
1093
1115
|
}
|
|
1094
1116
|
static get observedAttributes() {
|
|
1095
1117
|
return ["visible-items"];
|
|
1096
1118
|
}
|
|
1097
|
-
attributeChangedCallback(
|
|
1098
|
-
if (
|
|
1099
|
-
switch (
|
|
1119
|
+
attributeChangedCallback(e, i, o) {
|
|
1120
|
+
if (i !== o)
|
|
1121
|
+
switch (e) {
|
|
1100
1122
|
case "gap":
|
|
1101
1123
|
case "gap--mobile":
|
|
1102
1124
|
case "gap--tablet":
|
|
1103
1125
|
case "gap--desktop":
|
|
1104
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1126
|
+
this.visibleItemsAttributeDelegate.attributeValue = R(o);
|
|
1105
1127
|
break;
|
|
1106
1128
|
default:
|
|
1107
1129
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
1108
|
-
t,
|
|
1109
1130
|
e,
|
|
1110
|
-
i
|
|
1131
|
+
i,
|
|
1132
|
+
o
|
|
1111
1133
|
);
|
|
1112
1134
|
}
|
|
1113
1135
|
}
|
|
1114
1136
|
connectedCallback() {
|
|
1115
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1137
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = R(
|
|
1116
1138
|
this.getAttribute("gap") || "s"
|
|
1117
|
-
),
|
|
1118
|
-
this.
|
|
1119
|
-
}), this
|
|
1139
|
+
), this.addEventListener(it, () => {
|
|
1140
|
+
T(this, k, H).call(this);
|
|
1141
|
+
}), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", de(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;
|
|
@@ -1125,8 +1147,8 @@ class ce extends HTMLElement {
|
|
|
1125
1147
|
});
|
|
1126
1148
|
}
|
|
1127
1149
|
handleNextPrevious() {
|
|
1128
|
-
const
|
|
1129
|
-
|
|
1150
|
+
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, o = this.$carousel.clientWidth;
|
|
1151
|
+
e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e + o >= i ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
|
|
1130
1152
|
}
|
|
1131
1153
|
handleAppleSeedDisplay() {
|
|
1132
1154
|
this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
|
|
@@ -1156,20 +1178,34 @@ class ce extends HTMLElement {
|
|
|
1156
1178
|
return this.querySelectorAll("px-carousel-item").length;
|
|
1157
1179
|
}
|
|
1158
1180
|
}
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1181
|
+
k = new WeakSet(), H = function() {
|
|
1182
|
+
this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
|
|
1183
|
+
this.handleAppleSeedDisplay();
|
|
1184
|
+
});
|
|
1185
|
+
};
|
|
1186
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", ue);
|
|
1187
|
+
const st = new CSSStyleSheet();
|
|
1188
|
+
st.replaceSync(gt);
|
|
1189
|
+
class be extends HTMLElement {
|
|
1163
1190
|
constructor() {
|
|
1164
1191
|
super(), this.template = `
|
|
1165
1192
|
<div class="carousel-item">
|
|
1166
1193
|
<slot></slot>
|
|
1167
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1194
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [O, st];
|
|
1195
|
+
}
|
|
1196
|
+
connectedCallback() {
|
|
1197
|
+
this.dispatchEvent(
|
|
1198
|
+
new CustomEvent(it, {
|
|
1199
|
+
bubbles: !0,
|
|
1200
|
+
composed: !0
|
|
1201
|
+
})
|
|
1202
|
+
);
|
|
1168
1203
|
}
|
|
1169
1204
|
}
|
|
1170
|
-
customElements.get("px-carousel-item") || customElements.define("px-carousel-item",
|
|
1205
|
+
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", be);
|
|
1171
1206
|
export {
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1207
|
+
Pt as AppleSeed,
|
|
1208
|
+
it as CAROUSEL_ITEM_CONNECTED_EVENT,
|
|
1209
|
+
ue as Carousel,
|
|
1210
|
+
be as CarouselItem
|
|
1175
1211
|
};
|
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.80",
|
|
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"
|