@proximus/lavender-carousel 2.0.0-alpha.6 → 2.0.0-alpha.60
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 +221 -202
- 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 at, PxElement as rt, accessibilityAttributes 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
|
-
|
|
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
|
+
);
|
|
154
|
+
const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, r = [];
|
|
151
155
|
if (!n)
|
|
152
|
-
this.getAttribute(l + "--mobile") ||
|
|
153
|
-
this.updateStyle(l, c, e,
|
|
156
|
+
this.getAttribute(l + "--mobile") || r.push("mobile"), this.getAttribute(l + "--tablet") || r.push("tablet"), this.getAttribute(l + "--laptop") || r.push("laptop"), this.getAttribute(l + "--desktop") || r.push("desktop"), r.forEach((c) => {
|
|
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
|
+
at.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", 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 rt {
|
|
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() {
|
|
630
643
|
return [
|
|
631
644
|
...super.observedAttributes,
|
|
645
|
+
...nt,
|
|
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($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,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
|
+
], 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
|
+
var u, p, $;
|
|
784
|
+
class Tt extends I {
|
|
778
785
|
constructor(...e) {
|
|
779
786
|
var i;
|
|
780
|
-
super(...e,
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
<use
|
|
787
|
+
super(...e, K);
|
|
788
|
+
k(this, u);
|
|
789
|
+
k(this, p);
|
|
790
|
+
k(this, $, () => `<svg aria-hidden="true">
|
|
791
|
+
<use></use>
|
|
785
792
|
</svg>`);
|
|
786
|
-
this.shadowRoot.innerHTML = d(this,
|
|
793
|
+
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
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, 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,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" && (j(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, n) {
|
|
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(n, o) || x(
|
|
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
|
-
|
|
902
|
+
u = new WeakMap(), p = new WeakMap(), $ = new WeakMap();
|
|
884
903
|
customElements.get("px-icon") || customElements.define("px-icon", Tt);
|
|
885
|
-
const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}",
|
|
886
|
-
|
|
904
|
+
const Et = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", J = new CSSStyleSheet();
|
|
905
|
+
J.replaceSync(Et);
|
|
887
906
|
class It 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 = [J], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
897
916
|
}
|
|
898
917
|
static get observedAttributes() {
|
|
899
918
|
return ["amount", "active"];
|
|
@@ -927,132 +946,132 @@ class It extends HTMLElement {
|
|
|
927
946
|
}
|
|
928
947
|
}
|
|
929
948
|
customElements.get("px-appleseed") || customElements.define("px-appleseed", It);
|
|
930
|
-
function
|
|
931
|
-
var t = typeof
|
|
932
|
-
return
|
|
949
|
+
function y(s) {
|
|
950
|
+
var t = typeof s;
|
|
951
|
+
return s != null && (t == "object" || t == "function");
|
|
933
952
|
}
|
|
934
|
-
var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self,
|
|
935
|
-
return
|
|
953
|
+
var Rt = typeof global == "object" && global && global.Object === Object && global, Mt = typeof self == "object" && self && self.Object === Object && self, Q = Rt || Mt || Function("return this")(), L = function() {
|
|
954
|
+
return Q.Date.now();
|
|
936
955
|
}, Ht = /\s/;
|
|
937
|
-
function Pt(
|
|
938
|
-
for (var t =
|
|
956
|
+
function Pt(s) {
|
|
957
|
+
for (var t = s.length; t-- && Ht.test(s.charAt(t)); )
|
|
939
958
|
;
|
|
940
959
|
return t;
|
|
941
960
|
}
|
|
942
961
|
var Dt = /^\s+/;
|
|
943
|
-
function qt(
|
|
944
|
-
return
|
|
962
|
+
function qt(s) {
|
|
963
|
+
return s && s.slice(0, Pt(s) + 1).replace(Dt, "");
|
|
945
964
|
}
|
|
946
|
-
var
|
|
947
|
-
function
|
|
948
|
-
var t = Ot.call(
|
|
965
|
+
var w = Q.Symbol, Y = Object.prototype, Ot = Y.hasOwnProperty, Nt = Y.toString, f = w ? w.toStringTag : void 0;
|
|
966
|
+
function Wt(s) {
|
|
967
|
+
var t = Ot.call(s, f), e = s[f];
|
|
949
968
|
try {
|
|
950
|
-
|
|
969
|
+
s[f] = void 0;
|
|
951
970
|
var i = !0;
|
|
952
971
|
} catch {
|
|
953
972
|
}
|
|
954
|
-
var
|
|
955
|
-
return i && (t ?
|
|
973
|
+
var o = Nt.call(s);
|
|
974
|
+
return i && (t ? s[f] = e : delete s[f]), o;
|
|
956
975
|
}
|
|
957
976
|
var Xt = Object.prototype, Ft = Xt.toString;
|
|
958
|
-
function Bt(
|
|
959
|
-
return Ft.call(
|
|
977
|
+
function Bt(s) {
|
|
978
|
+
return Ft.call(s);
|
|
960
979
|
}
|
|
961
|
-
var Gt = "[object Null]", Zt = "[object Undefined]", W =
|
|
962
|
-
function _t(
|
|
963
|
-
return
|
|
980
|
+
var Gt = "[object Null]", Zt = "[object Undefined]", W = w ? w.toStringTag : void 0;
|
|
981
|
+
function _t(s) {
|
|
982
|
+
return s == null ? s === void 0 ? Zt : Gt : W && W in Object(s) ? Wt(s) : Bt(s);
|
|
964
983
|
}
|
|
965
|
-
function Ut(
|
|
966
|
-
return
|
|
984
|
+
function Ut(s) {
|
|
985
|
+
return s != null && typeof s == "object";
|
|
967
986
|
}
|
|
968
987
|
var Kt = "[object Symbol]";
|
|
969
|
-
function Jt(
|
|
970
|
-
return typeof
|
|
988
|
+
function Jt(s) {
|
|
989
|
+
return typeof s == "symbol" || Ut(s) && _t(s) == Kt;
|
|
971
990
|
}
|
|
972
|
-
var
|
|
973
|
-
function
|
|
974
|
-
if (typeof
|
|
975
|
-
return
|
|
976
|
-
if (Jt(
|
|
977
|
-
return
|
|
978
|
-
if (
|
|
979
|
-
var t = typeof
|
|
980
|
-
|
|
981
|
-
}
|
|
982
|
-
if (typeof
|
|
983
|
-
return
|
|
984
|
-
|
|
985
|
-
var e = Yt.test(
|
|
986
|
-
return e || Vt.test(
|
|
991
|
+
var X = NaN, Qt = /^[-+]0x[0-9a-f]+$/i, Yt = /^0b[01]+$/i, Vt = /^0o[0-7]+$/i, te = parseInt;
|
|
992
|
+
function F(s) {
|
|
993
|
+
if (typeof s == "number")
|
|
994
|
+
return s;
|
|
995
|
+
if (Jt(s))
|
|
996
|
+
return X;
|
|
997
|
+
if (y(s)) {
|
|
998
|
+
var t = typeof s.valueOf == "function" ? s.valueOf() : s;
|
|
999
|
+
s = y(t) ? t + "" : t;
|
|
1000
|
+
}
|
|
1001
|
+
if (typeof s != "string")
|
|
1002
|
+
return s === 0 ? s : +s;
|
|
1003
|
+
s = qt(s);
|
|
1004
|
+
var e = Yt.test(s);
|
|
1005
|
+
return e || Vt.test(s) ? te(s.slice(2), e ? 2 : 8) : Qt.test(s) ? X : +s;
|
|
987
1006
|
}
|
|
988
|
-
var ee = "Expected a function", ie = Math.max,
|
|
989
|
-
function
|
|
990
|
-
var i,
|
|
991
|
-
if (typeof
|
|
1007
|
+
var ee = "Expected a function", ie = Math.max, se = Math.min;
|
|
1008
|
+
function oe(s, t, e) {
|
|
1009
|
+
var i, o, n, l, r, c, b = 0, H = !1, g = !1, S = !0;
|
|
1010
|
+
if (typeof s != "function")
|
|
992
1011
|
throw new TypeError(ee);
|
|
993
|
-
t =
|
|
994
|
-
function
|
|
995
|
-
var
|
|
996
|
-
return i =
|
|
1012
|
+
t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? ie(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
|
|
1013
|
+
function C(a) {
|
|
1014
|
+
var h = i, v = o;
|
|
1015
|
+
return i = o = void 0, b = a, l = s.apply(v, h), l;
|
|
997
1016
|
}
|
|
998
|
-
function
|
|
999
|
-
return b =
|
|
1017
|
+
function tt(a) {
|
|
1018
|
+
return b = a, r = setTimeout(m, t), H ? C(a) : l;
|
|
1000
1019
|
}
|
|
1001
|
-
function
|
|
1002
|
-
var
|
|
1003
|
-
return g ?
|
|
1020
|
+
function et(a) {
|
|
1021
|
+
var h = a - c, v = a - b, q = t - h;
|
|
1022
|
+
return g ? se(q, n - v) : q;
|
|
1004
1023
|
}
|
|
1005
|
-
function
|
|
1006
|
-
var
|
|
1007
|
-
return c === void 0 ||
|
|
1024
|
+
function P(a) {
|
|
1025
|
+
var h = a - c, v = a - b;
|
|
1026
|
+
return c === void 0 || h >= t || h < 0 || g && v >= n;
|
|
1008
1027
|
}
|
|
1009
|
-
function
|
|
1010
|
-
var
|
|
1011
|
-
if (
|
|
1012
|
-
return
|
|
1013
|
-
|
|
1028
|
+
function m() {
|
|
1029
|
+
var a = L();
|
|
1030
|
+
if (P(a))
|
|
1031
|
+
return D(a);
|
|
1032
|
+
r = setTimeout(m, et(a));
|
|
1014
1033
|
}
|
|
1015
|
-
function
|
|
1016
|
-
return
|
|
1017
|
-
}
|
|
1018
|
-
function et() {
|
|
1019
|
-
a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
|
|
1034
|
+
function D(a) {
|
|
1035
|
+
return r = void 0, S && i ? C(a) : (i = o = void 0, l);
|
|
1020
1036
|
}
|
|
1021
1037
|
function it() {
|
|
1022
|
-
|
|
1038
|
+
r !== void 0 && clearTimeout(r), b = 0, i = c = o = r = void 0;
|
|
1039
|
+
}
|
|
1040
|
+
function st() {
|
|
1041
|
+
return r === void 0 ? l : D(L());
|
|
1023
1042
|
}
|
|
1024
|
-
function
|
|
1025
|
-
var
|
|
1026
|
-
if (i = arguments,
|
|
1027
|
-
if (
|
|
1028
|
-
return
|
|
1043
|
+
function z() {
|
|
1044
|
+
var a = L(), h = P(a);
|
|
1045
|
+
if (i = arguments, o = this, c = a, h) {
|
|
1046
|
+
if (r === void 0)
|
|
1047
|
+
return tt(c);
|
|
1029
1048
|
if (g)
|
|
1030
|
-
return clearTimeout(
|
|
1049
|
+
return clearTimeout(r), r = setTimeout(m, t), C(c);
|
|
1031
1050
|
}
|
|
1032
|
-
return
|
|
1051
|
+
return r === void 0 && (r = setTimeout(m, t)), l;
|
|
1033
1052
|
}
|
|
1034
|
-
return
|
|
1053
|
+
return z.cancel = it, z.flush = st, z;
|
|
1035
1054
|
}
|
|
1036
|
-
var
|
|
1037
|
-
function
|
|
1038
|
-
var i = !0,
|
|
1039
|
-
if (typeof
|
|
1040
|
-
throw new TypeError(
|
|
1041
|
-
return
|
|
1055
|
+
var ae = "Expected a function";
|
|
1056
|
+
function re(s, t, e) {
|
|
1057
|
+
var i = !0, o = !0;
|
|
1058
|
+
if (typeof s != "function")
|
|
1059
|
+
throw new TypeError(ae);
|
|
1060
|
+
return y(e) && (i = "leading" in e ? !!e.leading : i, o = "trailing" in e ? !!e.trailing : o), oe(s, t, {
|
|
1042
1061
|
leading: i,
|
|
1043
1062
|
maxWait: t,
|
|
1044
|
-
trailing:
|
|
1063
|
+
trailing: o
|
|
1045
1064
|
});
|
|
1046
1065
|
}
|
|
1047
|
-
const
|
|
1048
|
-
|
|
1049
|
-
const ne = (
|
|
1066
|
+
const M = new CSSStyleSheet();
|
|
1067
|
+
M.replaceSync(dt);
|
|
1068
|
+
const ne = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .carousel`, le = "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)}))`;
|
|
1050
1069
|
class ce extends HTMLElement {
|
|
1051
1070
|
constructor() {
|
|
1052
|
-
super(), this.visibleItemsAttributeDelegate = new
|
|
1071
|
+
super(), this.visibleItemsAttributeDelegate = new B(
|
|
1053
1072
|
this,
|
|
1054
1073
|
"visible-items",
|
|
1055
|
-
|
|
1074
|
+
T("s"),
|
|
1056
1075
|
"--px-carousel-min-width"
|
|
1057
1076
|
), this.template = `<px-vstack gap="default">
|
|
1058
1077
|
<div class="carousel">
|
|
@@ -1075,18 +1094,18 @@ class ce extends HTMLElement {
|
|
|
1075
1094
|
</px-hstack>
|
|
1076
1095
|
</px-vstack>`, this.onScroll = () => {
|
|
1077
1096
|
const t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
|
|
1078
|
-
let
|
|
1079
|
-
window.innerWidth < 768 ?
|
|
1097
|
+
let o = 0;
|
|
1098
|
+
window.innerWidth < 768 ? o = Math.round(
|
|
1080
1099
|
t / (e - i) * (this.itemNumbers - 1)
|
|
1081
|
-
) : Math.ceil(t + i) + 10 >= e ?
|
|
1082
|
-
let n =
|
|
1083
|
-
this.itemNumbers > 5 && (
|
|
1100
|
+
) : Math.ceil(t + i) + 10 >= e ? o = this.itemNumbers - 1 : o = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
|
|
1101
|
+
let n = o;
|
|
1102
|
+
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
1103
|
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1085
|
-
|
|
1086
|
-
|
|
1104
|
+
M,
|
|
1105
|
+
ct(
|
|
1087
1106
|
"gap",
|
|
1088
1107
|
ne,
|
|
1089
|
-
|
|
1108
|
+
G,
|
|
1090
1109
|
le
|
|
1091
1110
|
)
|
|
1092
1111
|
];
|
|
@@ -1101,7 +1120,7 @@ class ce extends HTMLElement {
|
|
|
1101
1120
|
case "gap--mobile":
|
|
1102
1121
|
case "gap--tablet":
|
|
1103
1122
|
case "gap--desktop":
|
|
1104
|
-
this.visibleItemsAttributeDelegate.attributeValue =
|
|
1123
|
+
this.visibleItemsAttributeDelegate.attributeValue = T(i);
|
|
1105
1124
|
break;
|
|
1106
1125
|
default:
|
|
1107
1126
|
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
@@ -1112,11 +1131,11 @@ class ce extends HTMLElement {
|
|
|
1112
1131
|
}
|
|
1113
1132
|
}
|
|
1114
1133
|
connectedCallback() {
|
|
1115
|
-
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue =
|
|
1134
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = T(
|
|
1116
1135
|
this.getAttribute("gap") || "s"
|
|
1117
1136
|
), requestAnimationFrame(() => {
|
|
1118
1137
|
this.handleAppleSeedDisplay();
|
|
1119
|
-
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll",
|
|
1138
|
+
}), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", re(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1120
1139
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1121
1140
|
}), this.$next.addEventListener("click", () => {
|
|
1122
1141
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1157,14 +1176,14 @@ class ce extends HTMLElement {
|
|
|
1157
1176
|
}
|
|
1158
1177
|
}
|
|
1159
1178
|
customElements.get("px-carousel") || customElements.define("px-carousel", ce);
|
|
1160
|
-
const
|
|
1161
|
-
|
|
1179
|
+
const V = new CSSStyleSheet();
|
|
1180
|
+
V.replaceSync(pt);
|
|
1162
1181
|
class de extends HTMLElement {
|
|
1163
1182
|
constructor() {
|
|
1164
1183
|
super(), this.template = `
|
|
1165
1184
|
<div class="carousel-item">
|
|
1166
1185
|
<slot></slot>
|
|
1167
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1186
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [M, V];
|
|
1168
1187
|
}
|
|
1169
1188
|
}
|
|
1170
1189
|
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", de);
|
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.60",
|
|
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"
|