@proximus/lavender-carousel 1.4.8-beta.3 → 1.4.8
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 +4 -0
- package/dist/index.es.js +213 -178
- package/package.json +1 -1
package/dist/Carousel.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
|
|
1
2
|
import '@proximus/lavender-layout';
|
|
2
3
|
import '@proximus/lavender-button-icon';
|
|
3
4
|
import '@proximus/lavender-icon';
|
|
@@ -6,8 +7,11 @@ import { type AppleSeed } from './AppleSeed.ts';
|
|
|
6
7
|
export declare const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
|
|
7
8
|
export declare class Carousel extends HTMLElement {
|
|
8
9
|
#private;
|
|
10
|
+
visibleItemsAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
11
|
template: string;
|
|
10
12
|
constructor();
|
|
13
|
+
static get observedAttributes(): string[];
|
|
14
|
+
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
11
15
|
connectedCallback(): void;
|
|
12
16
|
private onScroll;
|
|
13
17
|
private handleNextPrevious;
|
package/dist/index.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
var
|
|
1
|
+
var F = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var j = (s, t, e) => t.has(s) ||
|
|
5
|
-
var
|
|
6
|
-
import { WithExtraAttributes as
|
|
7
|
-
const ut = ':host{display:block;--px-carousel-visible-items: 1;--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host *{box-sizing:border-box}:host([visible-items="1"]){--px-carousel-visible-items: 1}:host([visible-items="2"]){--px-carousel-visible-items: 2}:host([visible-items="3"]){--px-carousel-visible-items: 3}:host([visible-items="4"]){--px-carousel-visible-items: 4}:host([visible-items="5"]){--px-carousel-visible-items: 5}:host([visible-items="6"]){--px-carousel-visible-items: 6}:host([visible-items="7"]){--px-carousel-visible-items: 7}:host([visible-items="8"]){--px-carousel-visible-items: 8}:host([visible-items="9"]){--px-carousel-visible-items: 9}:host([visible-items--mobile="1"]){--px-carousel-visible-items--mobile: 1}:host([visible-items--mobile="2"]){--px-carousel-visible-items--mobile: 2}:host([visible-items--mobile="3"]){--px-carousel-visible-items--mobile: 3}:host([visible-items--mobile="4"]){--px-carousel-visible-items--mobile: 4}:host([visible-items--mobile="5"]){--px-carousel-visible-items--mobile: 5}:host([visible-items--mobile="6"]){--px-carousel-visible-items--mobile: 6}:host([visible-items--mobile="7"]){--px-carousel-visible-items--mobile: 7}:host([visible-items--mobile="8"]){--px-carousel-visible-items--mobile: 8}:host([visible-items--mobile="9"]){--px-carousel-visible-items--mobile: 9}:host([visible-items--tablet="1"]){--px-carousel-visible-items--tablet: 1}:host([visible-items--tablet="2"]){--px-carousel-visible-items--tablet: 2}:host([visible-items--tablet="3"]){--px-carousel-visible-items--tablet: 3}:host([visible-items--tablet="4"]){--px-carousel-visible-items--tablet: 4}:host([visible-items--tablet="5"]){--px-carousel-visible-items--tablet: 5}:host([visible-items--tablet="6"]){--px-carousel-visible-items--tablet: 6}:host([visible-items--tablet="7"]){--px-carousel-visible-items--tablet: 7}:host([visible-items--tablet="8"]){--px-carousel-visible-items--tablet: 8}:host([visible-items--tablet="9"]){--px-carousel-visible-items--tablet: 9}:host([visible-items--laptop="1"]){--px-carousel-visible-items--laptop: 1}:host([visible-items--laptop="2"]){--px-carousel-visible-items--laptop: 2}:host([visible-items--laptop="3"]){--px-carousel-visible-items--laptop: 3}:host([visible-items--laptop="4"]){--px-carousel-visible-items--laptop: 4}:host([visible-items--laptop="5"]){--px-carousel-visible-items--laptop: 5}:host([visible-items--laptop="6"]){--px-carousel-visible-items--laptop: 6}:host([visible-items--laptop="7"]){--px-carousel-visible-items--laptop: 7}:host([visible-items--laptop="8"]){--px-carousel-visible-items--laptop: 8}:host([visible-items--laptop="9"]){--px-carousel-visible-items--laptop: 9}:host([visible-items--desktop="1"]){--px-carousel-visible-items--desktop: 1}:host([visible-items--desktop="2"]){--px-carousel-visible-items--desktop: 2}:host([visible-items--desktop="3"]){--px-carousel-visible-items--desktop: 3}:host([visible-items--desktop="4"]){--px-carousel-visible-items--desktop: 4}:host([visible-items--desktop="5"]){--px-carousel-visible-items--desktop: 5}:host([visible-items--desktop="6"]){--px-carousel-visible-items--desktop: 6}:host([visible-items--desktop="7"]){--px-carousel-visible-items--desktop: 7}:host([visible-items--desktop="8"]){--px-carousel-visible-items--desktop: 8}:host([visible-items--desktop="9"]){--px-carousel-visible-items--desktop: 9}:host([gap="default"]){--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host([gap="s"]){--px-carousel-gap-default: var(--px-spacing-s-desktop)}:host([gap="xs"]){--px-carousel-gap-default: var(--px-spacing-xs-desktop)}:host([gap="2xs"]){--px-carousel-gap-default: var(--px-spacing-2xs-desktop)}:host([gap="l"]){--px-carousel-gap-default: var(--px-spacing-l-desktop)}:host([gap="none"]){--px-carousel-gap-default: 0}:host([gap--mobile="default"]){--px-carousel-gap-default--mobile: var(--px-spacing-default-mobile)}:host([gap--mobile="s"]){--px-carousel-gap-default--mobile: var(--px-spacing-s-mobile)}:host([gap--mobile="xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-xs-mobile)}:host([gap--mobile="2xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-2xs-mobile)}:host([gap--mobile="l"]){--px-carousel-gap-default--mobile: var(--px-spacing-l-mobile)}:host([gap--mobile="none"]){--px-carousel-gap-default--mobile: 0}:host([gap--tablet="default"]){--px-carousel-gap-default--tablet: var(--px-spacing-default-tablet)}:host([gap--tablet="s"]){--px-carousel-gap-default--tablet: var(--px-spacing-s-tablet)}:host([gap--tablet="xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-xs-tablet)}:host([gap--tablet="2xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-2xs-tablet)}:host([gap--tablet="l"]){--px-carousel-gap-default--tablet: var(--px-spacing-l-tablet)}:host([gap--tablet="none"]){--px-carousel-gap-default--tablet: 0}:host([gap--laptop="default"]){--px-carousel-gap-default--laptop: var(--px-spacing-default-laptop)}:host([gap--laptop="s"]){--px-carousel-gap-default--laptop: var(--px-spacing-s-laptop)}:host([gap--laptop="xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-xs-laptop)}:host([gap--laptop="2xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-2xs-laptop)}:host([gap--laptop="l"]){--px-carousel-gap-default--laptop: var(--px-spacing-l-laptop)}:host([gap--laptop="none"]){--px-carousel-gap-default--laptop: 0}:host([gap--desktop="default"]){--px-carousel-gap-default--desktop: var(--px-spacing-default-desktop)}:host([gap--desktop="s"]){--px-carousel-gap-default--desktop: var(--px-spacing-s-desktop)}:host([gap--desktop="xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-xs-desktop)}:host([gap--desktop="2xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-2xs-desktop)}:host([gap--desktop="l"]){--px-carousel-gap-default--desktop: var(--px-spacing-l-desktop)}:host([gap--desktop="none"]){--px-carousel-gap-default--desktop: 0}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default))}@media only screen and (max-width: 48em){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media only screen and (min-width: 48.0625em) and (max-width: 64em){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 48em){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}', ht = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;border-radius:var(--px-radius-main);background:#fff;overflow:hidden;--visible-items: var(--px-carousel-visible-items--desktop, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)));min-width:calc((100% - max(var(--visible-items),2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items),2))}@media only screen and (max-width: 48em){:host{--visible-items: var(--px-carousel-visible-items--mobile, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default, var(--px-spacing-s-mobile)))}}@media only screen and (min-width: 48.0625em) and (max-width: 64em){:host{--visible-items: var(--px-carousel-visible-items--tablet, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host{--visible-items: var(--px-carousel-visible-items--laptop, var(--px-carousel-visible-items, 1));--spacing: var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)))}}@media screen and (max-width: 48em){: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: 48em) and (max-width: 64em){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", bt = ':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))}}', G = new CSSStyleSheet();
|
|
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 gt = [
|
|
|
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 gt = [
|
|
|
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 P extends M {
|
|
|
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 P extends M {
|
|
|
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,37 @@ class P extends M {
|
|
|
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
140
|
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
141
141
|
);
|
|
142
142
|
return;
|
|
@@ -147,22 +147,22 @@ class P extends M {
|
|
|
147
147
|
i
|
|
148
148
|
);
|
|
149
149
|
}
|
|
150
|
-
updateFlexProperties(t, e, i,
|
|
151
|
-
this.checkName(
|
|
150
|
+
updateFlexProperties(t, e, i, o) {
|
|
151
|
+
this.checkName(o, i) || m(
|
|
152
152
|
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
153
153
|
);
|
|
154
|
-
const r = t.indexOf("--") > -1,
|
|
154
|
+
const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, l = [];
|
|
155
155
|
if (!r)
|
|
156
|
-
this.getAttribute(
|
|
157
|
-
this.updateStyle(
|
|
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);
|
|
158
158
|
});
|
|
159
159
|
else {
|
|
160
160
|
const c = t.split("--")[1];
|
|
161
|
-
this.updateStyle(
|
|
161
|
+
this.updateStyle(a, c, e, o), this.updateStyle(a, c, i, o);
|
|
162
162
|
}
|
|
163
163
|
}
|
|
164
|
-
updateStyle(t, e, i,
|
|
165
|
-
i && (t === "gap" &&
|
|
164
|
+
updateStyle(t, e, i, o) {
|
|
165
|
+
i && (t === "gap" && o && o.includes(i) ? (this.$el.style.setProperty(
|
|
166
166
|
`--flex-${t}--${e}-value`,
|
|
167
167
|
`var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
|
|
168
168
|
), this.style.setProperty(
|
|
@@ -357,8 +357,8 @@ class P extends M {
|
|
|
357
357
|
return this.shadowRoot.querySelector(".flex-container");
|
|
358
358
|
}
|
|
359
359
|
}
|
|
360
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
361
|
-
class
|
|
360
|
+
customElements.get("px-stack") || customElements.define("px-stack", D);
|
|
361
|
+
class wt extends D {
|
|
362
362
|
constructor() {
|
|
363
363
|
super();
|
|
364
364
|
}
|
|
@@ -366,8 +366,8 @@ class kt extends P {
|
|
|
366
366
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
367
367
|
}
|
|
368
368
|
}
|
|
369
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
370
|
-
class
|
|
369
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", wt);
|
|
370
|
+
class At extends D {
|
|
371
371
|
constructor() {
|
|
372
372
|
super();
|
|
373
373
|
}
|
|
@@ -375,8 +375,8 @@ class yt extends P {
|
|
|
375
375
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
376
376
|
}
|
|
377
377
|
}
|
|
378
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
379
|
-
class
|
|
378
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", At);
|
|
379
|
+
class $t extends HTMLElement {
|
|
380
380
|
constructor() {
|
|
381
381
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
382
382
|
}
|
|
@@ -423,12 +423,12 @@ class wt extends HTMLElement {
|
|
|
423
423
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
424
424
|
}
|
|
425
425
|
}
|
|
426
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
427
|
-
const
|
|
428
|
-
|
|
429
|
-
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.5em}", J = new CSSStyleSheet();
|
|
428
|
+
J.replaceSync(St);
|
|
429
|
+
class Ct extends P {
|
|
430
430
|
constructor() {
|
|
431
|
-
super(
|
|
431
|
+
super(J), this.template = (t) => `
|
|
432
432
|
<px-container border-radius="none" padding="none">
|
|
433
433
|
<px-vstack>
|
|
434
434
|
<px-container id="header-container" border-radius="none">
|
|
@@ -605,7 +605,7 @@ class $t extends M {
|
|
|
605
605
|
case "background-color":
|
|
606
606
|
this.$bodyContainer.setAttribute(
|
|
607
607
|
"background-color",
|
|
608
|
-
|
|
608
|
+
ct.indexOf(i) > 0 ? i : "none"
|
|
609
609
|
);
|
|
610
610
|
break;
|
|
611
611
|
case "padding-vertical":
|
|
@@ -625,17 +625,17 @@ class $t extends M {
|
|
|
625
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;
|
|
626
626
|
}
|
|
627
627
|
}
|
|
628
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
629
|
-
const
|
|
630
|
-
|
|
631
|
-
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 = [
|
|
632
632
|
"",
|
|
633
633
|
"default",
|
|
634
634
|
"secondary",
|
|
635
635
|
"naked"
|
|
636
|
-
], $ = class $ extends
|
|
636
|
+
], $ = class $ extends dt {
|
|
637
637
|
constructor() {
|
|
638
|
-
super(
|
|
638
|
+
super(Q), this.template = () => "<slot></slot>";
|
|
639
639
|
const t = document.createElement($.nativeName);
|
|
640
640
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
641
641
|
}
|
|
@@ -686,12 +686,12 @@ const Ct = ["", "default", "small"], zt = [
|
|
|
686
686
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
687
687
|
}
|
|
688
688
|
updateSize(t, e) {
|
|
689
|
-
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
690
|
`${e} is not a valid size value for ${this.tagName.toLowerCase()}`
|
|
691
691
|
);
|
|
692
692
|
}
|
|
693
693
|
updateVariant(t, e) {
|
|
694
|
-
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
695
|
`${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
|
|
696
696
|
);
|
|
697
697
|
}
|
|
@@ -727,9 +727,9 @@ const Ct = ["", "default", "small"], zt = [
|
|
|
727
727
|
}
|
|
728
728
|
};
|
|
729
729
|
$.nativeName = "button";
|
|
730
|
-
let
|
|
731
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
732
|
-
class
|
|
730
|
+
let M = $;
|
|
731
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", M);
|
|
732
|
+
class Et extends HTMLElement {
|
|
733
733
|
constructor() {
|
|
734
734
|
super();
|
|
735
735
|
}
|
|
@@ -762,8 +762,8 @@ class Lt extends HTMLElement {
|
|
|
762
762
|
t && t.remove();
|
|
763
763
|
}
|
|
764
764
|
}
|
|
765
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
766
|
-
const
|
|
765
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Et);
|
|
766
|
+
const Tt = [
|
|
767
767
|
"Brand",
|
|
768
768
|
"Accent",
|
|
769
769
|
"Neutral",
|
|
@@ -776,21 +776,21 @@ const jt = [
|
|
|
776
776
|
"StateHover",
|
|
777
777
|
"StateActive",
|
|
778
778
|
"StateDisabled"
|
|
779
|
-
],
|
|
779
|
+
], It = ["Inherit", ...Tt].map(
|
|
780
780
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
781
|
-
),
|
|
782
|
-
|
|
783
|
-
var
|
|
784
|
-
class
|
|
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 {
|
|
785
785
|
constructor(...e) {
|
|
786
786
|
var i;
|
|
787
|
-
super(...e,
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
787
|
+
super(...e, Y);
|
|
788
|
+
f(this, u);
|
|
789
|
+
f(this, p);
|
|
790
|
+
f(this, S, () => `<svg aria-hidden="true">
|
|
791
791
|
<use></use>
|
|
792
792
|
</svg>`);
|
|
793
|
-
this.shadowRoot.innerHTML =
|
|
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");
|
|
794
794
|
}
|
|
795
795
|
static get observedAttributes() {
|
|
796
796
|
return [
|
|
@@ -804,25 +804,25 @@ class Rt extends M {
|
|
|
804
804
|
"disabled"
|
|
805
805
|
];
|
|
806
806
|
}
|
|
807
|
-
attributeChangedCallback(e, i,
|
|
808
|
-
if (i !==
|
|
807
|
+
attributeChangedCallback(e, i, o) {
|
|
808
|
+
if (i !== o)
|
|
809
809
|
switch (e) {
|
|
810
810
|
case "name":
|
|
811
|
-
this.updateName(i,
|
|
811
|
+
this.updateName(i, o);
|
|
812
812
|
break;
|
|
813
813
|
case "size":
|
|
814
|
-
this.updateAttribute(e, i,
|
|
814
|
+
this.updateAttribute(e, i, o, ht);
|
|
815
815
|
break;
|
|
816
816
|
case "color":
|
|
817
|
-
this.updateAttribute(e, i,
|
|
817
|
+
this.updateAttribute(e, i, o, It);
|
|
818
818
|
break;
|
|
819
819
|
case "disabled":
|
|
820
820
|
this.color = "state-disabled";
|
|
821
821
|
break;
|
|
822
822
|
case "aria-label":
|
|
823
|
-
if (!
|
|
823
|
+
if (!d(this, p))
|
|
824
824
|
return;
|
|
825
|
-
|
|
825
|
+
o ? (d(this, p).ariaHidden = "false", this.ariaHidden = "false") : (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
826
826
|
break;
|
|
827
827
|
}
|
|
828
828
|
}
|
|
@@ -835,22 +835,22 @@ class Rt extends M {
|
|
|
835
835
|
console.error("Icon name or src not found");
|
|
836
836
|
continue;
|
|
837
837
|
}
|
|
838
|
-
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (E(this,
|
|
838
|
+
i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (E(this, u, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
839
839
|
"href",
|
|
840
|
-
`${
|
|
840
|
+
`${d(this, u)}#icon-${this.name}`
|
|
841
841
|
));
|
|
842
842
|
}
|
|
843
|
-
!this.ariaLabel &&
|
|
843
|
+
!this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
|
|
844
844
|
}
|
|
845
|
-
updateAttribute(e, i,
|
|
846
|
-
i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)),
|
|
847
|
-
`${
|
|
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
848
|
);
|
|
849
849
|
}
|
|
850
850
|
updateName(e, i) {
|
|
851
|
-
|
|
851
|
+
d(this, u) && this.$el.firstElementChild.setAttribute(
|
|
852
852
|
"href",
|
|
853
|
-
`${
|
|
853
|
+
`${d(this, u)}#icon-${i}`
|
|
854
854
|
);
|
|
855
855
|
}
|
|
856
856
|
get $el() {
|
|
@@ -899,20 +899,20 @@ class Rt extends M {
|
|
|
899
899
|
this.setAttribute("disabled", e);
|
|
900
900
|
}
|
|
901
901
|
}
|
|
902
|
-
|
|
903
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
904
|
-
const
|
|
905
|
-
|
|
906
|
-
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 {
|
|
907
907
|
constructor() {
|
|
908
908
|
super(), this.template = (t, e) => `<div class="container">
|
|
909
909
|
${Array.from(
|
|
910
910
|
{ length: Math.min(t, 5) },
|
|
911
|
-
(i,
|
|
911
|
+
(i, o) => `<div id="seed-${o}" ${e === o ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
|
|
912
912
|
<div></div>
|
|
913
913
|
</div>`
|
|
914
914
|
).join("")}
|
|
915
|
-
</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);
|
|
916
916
|
}
|
|
917
917
|
static get observedAttributes() {
|
|
918
918
|
return ["amount", "active"];
|
|
@@ -945,133 +945,138 @@ class Ht extends HTMLElement {
|
|
|
945
945
|
return parseInt(this.getAttribute("active")) || 0;
|
|
946
946
|
}
|
|
947
947
|
}
|
|
948
|
-
customElements.get("px-appleseed") || customElements.define("px-appleseed",
|
|
948
|
+
customElements.get("px-appleseed") || customElements.define("px-appleseed", Pt);
|
|
949
949
|
function w(s) {
|
|
950
950
|
var t = typeof s;
|
|
951
951
|
return s != null && (t == "object" || t == "function");
|
|
952
952
|
}
|
|
953
|
-
var
|
|
954
|
-
return
|
|
955
|
-
},
|
|
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
956
|
function Nt(s) {
|
|
957
|
-
for (var t = s.length; t-- &&
|
|
957
|
+
for (var t = s.length; t-- && qt.test(s.charAt(t)); )
|
|
958
958
|
;
|
|
959
959
|
return t;
|
|
960
960
|
}
|
|
961
|
-
var
|
|
962
|
-
function
|
|
963
|
-
return s && s.slice(0, Nt(s) + 1).replace(
|
|
961
|
+
var Wt = /^\s+/;
|
|
962
|
+
function Xt(s) {
|
|
963
|
+
return s && s.slice(0, Nt(s) + 1).replace(Wt, "");
|
|
964
964
|
}
|
|
965
|
-
var A =
|
|
966
|
-
function
|
|
967
|
-
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];
|
|
968
968
|
try {
|
|
969
|
-
s[
|
|
969
|
+
s[x] = void 0;
|
|
970
970
|
var i = !0;
|
|
971
971
|
} catch {
|
|
972
972
|
}
|
|
973
|
-
var
|
|
974
|
-
return i && (t ? s[
|
|
973
|
+
var o = _t.call(s);
|
|
974
|
+
return i && (t ? s[x] = e : delete s[x]), o;
|
|
975
975
|
}
|
|
976
|
-
var
|
|
977
|
-
function
|
|
978
|
-
return
|
|
976
|
+
var Gt = Object.prototype, Zt = Gt.toString;
|
|
977
|
+
function Ut(s) {
|
|
978
|
+
return Zt.call(s);
|
|
979
979
|
}
|
|
980
|
-
var
|
|
981
|
-
function
|
|
982
|
-
return s == null ? s === void 0 ?
|
|
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);
|
|
983
983
|
}
|
|
984
|
-
function
|
|
984
|
+
function Yt(s) {
|
|
985
985
|
return s != null && typeof s == "object";
|
|
986
986
|
}
|
|
987
|
-
var
|
|
988
|
-
function
|
|
989
|
-
return typeof s == "symbol" ||
|
|
987
|
+
var Vt = "[object Symbol]";
|
|
988
|
+
function te(s) {
|
|
989
|
+
return typeof s == "symbol" || Yt(s) && Qt(s) == Vt;
|
|
990
990
|
}
|
|
991
|
-
var
|
|
992
|
-
function
|
|
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
993
|
if (typeof s == "number")
|
|
994
994
|
return s;
|
|
995
|
-
if (
|
|
996
|
-
return
|
|
995
|
+
if (te(s))
|
|
996
|
+
return B;
|
|
997
997
|
if (w(s)) {
|
|
998
998
|
var t = typeof s.valueOf == "function" ? s.valueOf() : s;
|
|
999
999
|
s = w(t) ? t + "" : t;
|
|
1000
1000
|
}
|
|
1001
1001
|
if (typeof s != "string")
|
|
1002
1002
|
return s === 0 ? s : +s;
|
|
1003
|
-
s =
|
|
1004
|
-
var e =
|
|
1005
|
-
return e ||
|
|
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;
|
|
1006
1006
|
}
|
|
1007
|
-
var
|
|
1008
|
-
function
|
|
1009
|
-
var i,
|
|
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
1010
|
if (typeof s != "function")
|
|
1011
|
-
throw new TypeError(
|
|
1012
|
-
t =
|
|
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
1013
|
function z(n) {
|
|
1014
|
-
var
|
|
1015
|
-
return i =
|
|
1014
|
+
var h = i, v = o;
|
|
1015
|
+
return i = o = void 0, b = n, a = s.apply(v, h), a;
|
|
1016
1016
|
}
|
|
1017
|
-
function
|
|
1018
|
-
return b = n, l = setTimeout(y, t),
|
|
1017
|
+
function ot(n) {
|
|
1018
|
+
return b = n, l = setTimeout(y, t), q ? z(n) : a;
|
|
1019
1019
|
}
|
|
1020
|
-
function
|
|
1021
|
-
var
|
|
1022
|
-
return g ?
|
|
1020
|
+
function at(n) {
|
|
1021
|
+
var h = n - c, v = n - b, X = t - h;
|
|
1022
|
+
return g ? ne(X, r - v) : X;
|
|
1023
1023
|
}
|
|
1024
1024
|
function N(n) {
|
|
1025
|
-
var
|
|
1026
|
-
return c === void 0 ||
|
|
1025
|
+
var h = n - c, v = n - b;
|
|
1026
|
+
return c === void 0 || h >= t || h < 0 || g && v >= r;
|
|
1027
1027
|
}
|
|
1028
1028
|
function y() {
|
|
1029
|
-
var n =
|
|
1029
|
+
var n = I();
|
|
1030
1030
|
if (N(n))
|
|
1031
|
-
return
|
|
1032
|
-
l = setTimeout(y,
|
|
1031
|
+
return W(n);
|
|
1032
|
+
l = setTimeout(y, at(n));
|
|
1033
1033
|
}
|
|
1034
|
-
function
|
|
1035
|
-
return l = void 0, C && i ? z(n) : (i =
|
|
1034
|
+
function W(n) {
|
|
1035
|
+
return l = void 0, C && i ? z(n) : (i = o = void 0, a);
|
|
1036
1036
|
}
|
|
1037
|
-
function
|
|
1038
|
-
l !== void 0 && clearTimeout(l), b = 0, i = c =
|
|
1037
|
+
function rt() {
|
|
1038
|
+
l !== void 0 && clearTimeout(l), b = 0, i = c = o = l = void 0;
|
|
1039
1039
|
}
|
|
1040
|
-
function
|
|
1041
|
-
return l === void 0 ?
|
|
1040
|
+
function nt() {
|
|
1041
|
+
return l === void 0 ? a : W(I());
|
|
1042
1042
|
}
|
|
1043
1043
|
function L() {
|
|
1044
|
-
var n =
|
|
1045
|
-
if (i = arguments,
|
|
1044
|
+
var n = I(), h = N(n);
|
|
1045
|
+
if (i = arguments, o = this, c = n, h) {
|
|
1046
1046
|
if (l === void 0)
|
|
1047
|
-
return
|
|
1047
|
+
return ot(c);
|
|
1048
1048
|
if (g)
|
|
1049
1049
|
return clearTimeout(l), l = setTimeout(y, t), z(c);
|
|
1050
1050
|
}
|
|
1051
|
-
return l === void 0 && (l = setTimeout(y, t)),
|
|
1051
|
+
return l === void 0 && (l = setTimeout(y, t)), a;
|
|
1052
1052
|
}
|
|
1053
|
-
return L.cancel =
|
|
1053
|
+
return L.cancel = rt, L.flush = nt, L;
|
|
1054
1054
|
}
|
|
1055
|
-
var
|
|
1056
|
-
function
|
|
1057
|
-
var i = !0,
|
|
1055
|
+
var ce = "Expected a function";
|
|
1056
|
+
function de(s, t, e) {
|
|
1057
|
+
var i = !0, o = !0;
|
|
1058
1058
|
if (typeof s != "function")
|
|
1059
|
-
throw new TypeError(
|
|
1060
|
-
return w(e) && (i = "leading" in e ? !!e.leading : i,
|
|
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, {
|
|
1061
1061
|
leading: i,
|
|
1062
1062
|
maxWait: t,
|
|
1063
|
-
trailing:
|
|
1063
|
+
trailing: o
|
|
1064
1064
|
});
|
|
1065
1065
|
}
|
|
1066
|
-
const
|
|
1067
|
-
|
|
1068
|
-
const
|
|
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
1069
|
var k, H;
|
|
1070
|
-
class
|
|
1070
|
+
class ue extends HTMLElement {
|
|
1071
1071
|
constructor() {
|
|
1072
1072
|
super();
|
|
1073
|
-
|
|
1074
|
-
this.
|
|
1073
|
+
f(this, k);
|
|
1074
|
+
this.visibleItemsAttributeDelegate = new Z(
|
|
1075
|
+
this,
|
|
1076
|
+
"visible-items",
|
|
1077
|
+
R("s"),
|
|
1078
|
+
"--px-carousel-min-width"
|
|
1079
|
+
), this.template = `<px-vstack gap="default">
|
|
1075
1080
|
<div class="carousel">
|
|
1076
1081
|
<slot></slot>
|
|
1077
1082
|
</div>
|
|
@@ -1091,19 +1096,49 @@ class ce extends HTMLElement {
|
|
|
1091
1096
|
</px-hstack>
|
|
1092
1097
|
</px-hstack>
|
|
1093
1098
|
</px-vstack>`, this.onScroll = () => {
|
|
1094
|
-
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth,
|
|
1099
|
+
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, o = this.$carousel.clientWidth;
|
|
1095
1100
|
let r = 0;
|
|
1096
1101
|
window.innerWidth < 768 ? r = Math.round(
|
|
1097
|
-
e / (i -
|
|
1098
|
-
) : Math.ceil(e +
|
|
1099
|
-
let
|
|
1100
|
-
this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ?
|
|
1101
|
-
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
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();
|
|
1106
|
+
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1107
|
+
O,
|
|
1108
|
+
ut(
|
|
1109
|
+
"gap",
|
|
1110
|
+
pe,
|
|
1111
|
+
U,
|
|
1112
|
+
he
|
|
1113
|
+
)
|
|
1114
|
+
];
|
|
1115
|
+
}
|
|
1116
|
+
static get observedAttributes() {
|
|
1117
|
+
return ["visible-items"];
|
|
1118
|
+
}
|
|
1119
|
+
attributeChangedCallback(e, i, o) {
|
|
1120
|
+
if (i !== o)
|
|
1121
|
+
switch (e) {
|
|
1122
|
+
case "gap":
|
|
1123
|
+
case "gap--mobile":
|
|
1124
|
+
case "gap--tablet":
|
|
1125
|
+
case "gap--desktop":
|
|
1126
|
+
this.visibleItemsAttributeDelegate.attributeValue = R(o);
|
|
1127
|
+
break;
|
|
1128
|
+
default:
|
|
1129
|
+
this.visibleItemsAttributeDelegate.attributeChangedCallback(
|
|
1130
|
+
e,
|
|
1131
|
+
i,
|
|
1132
|
+
o
|
|
1133
|
+
);
|
|
1134
|
+
}
|
|
1102
1135
|
}
|
|
1103
1136
|
connectedCallback() {
|
|
1104
|
-
this.
|
|
1137
|
+
this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = R(
|
|
1138
|
+
this.getAttribute("gap") || "s"
|
|
1139
|
+
), this.addEventListener(it, () => {
|
|
1105
1140
|
T(this, k, H).call(this);
|
|
1106
|
-
}), T(this, k, H).call(this), this.$carousel.addEventListener("scroll",
|
|
1141
|
+
}), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", de(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1107
1142
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
1108
1143
|
}), this.$next.addEventListener("click", () => {
|
|
1109
1144
|
this.$carousel.scrollLeft += this.$carousel.clientWidth;
|
|
@@ -1112,8 +1147,8 @@ class ce extends HTMLElement {
|
|
|
1112
1147
|
});
|
|
1113
1148
|
}
|
|
1114
1149
|
handleNextPrevious() {
|
|
1115
|
-
const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth,
|
|
1116
|
-
e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e +
|
|
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");
|
|
1117
1152
|
}
|
|
1118
1153
|
handleAppleSeedDisplay() {
|
|
1119
1154
|
this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
|
|
@@ -1148,29 +1183,29 @@ k = new WeakSet(), H = function() {
|
|
|
1148
1183
|
this.handleAppleSeedDisplay();
|
|
1149
1184
|
});
|
|
1150
1185
|
};
|
|
1151
|
-
customElements.get("px-carousel") || customElements.define("px-carousel",
|
|
1152
|
-
const
|
|
1153
|
-
|
|
1154
|
-
class
|
|
1186
|
+
customElements.get("px-carousel") || customElements.define("px-carousel", ue);
|
|
1187
|
+
const st = new CSSStyleSheet();
|
|
1188
|
+
st.replaceSync(gt);
|
|
1189
|
+
class be extends HTMLElement {
|
|
1155
1190
|
constructor() {
|
|
1156
1191
|
super(), this.template = `
|
|
1157
1192
|
<div class="carousel-item">
|
|
1158
1193
|
<slot></slot>
|
|
1159
|
-
</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];
|
|
1160
1195
|
}
|
|
1161
1196
|
connectedCallback() {
|
|
1162
1197
|
this.dispatchEvent(
|
|
1163
|
-
new CustomEvent(
|
|
1198
|
+
new CustomEvent(it, {
|
|
1164
1199
|
bubbles: !0,
|
|
1165
1200
|
composed: !0
|
|
1166
1201
|
})
|
|
1167
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
|
-
|
|
1175
|
-
|
|
1207
|
+
Pt as AppleSeed,
|
|
1208
|
+
it as CAROUSEL_ITEM_CONNECTED_EVENT,
|
|
1209
|
+
ue as Carousel,
|
|
1210
|
+
be as CarouselItem
|
|
1176
1211
|
};
|