@proximus/lavender-carousel 1.4.9-beta.2 → 1.4.9
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 +88 -92
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,43 +1,39 @@
|
|
|
1
1
|
var W = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var p = (s, t, e) => (
|
|
6
|
-
import { WithExtraAttributes as M, AttributeBreakpointHandlerDelegate as
|
|
7
|
-
const bt = ':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 screen and (max-width: 47.938rem){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (max-width: 47.938rem){#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;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 screen and (max-width: 47.938rem){: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 screen and (min-width: 48rem) and (max-width: 64rem){: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){: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: 48rem){: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: 48rem) and (max-width: 64rem){: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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))}}', B = new CSSStyleSheet();
|
|
8
|
-
|
|
9
|
-
const
|
|
4
|
+
var j = (s, t, e) => t.has(s) || W("Cannot " + e);
|
|
5
|
+
var p = (s, t, e) => (j(s, t, "read from private field"), e ? e.call(s) : t.get(s)), x = (s, t, e) => t.has(s) ? W("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 M, AttributeBreakpointHandlerDelegate as ot, gapValues as rt, checkName as nt, log as f, backgroundColorValues as lt, PxElement as ct, accessibilityAttributes as pt, iconSizeValuesKC as dt } from "@proximus/lavender-common";
|
|
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
|
+
G.replaceSync(bt);
|
|
9
|
+
const gt = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
12
12
|
"row",
|
|
13
13
|
"row-reverse",
|
|
14
14
|
"column",
|
|
15
15
|
"column-reverse"
|
|
16
|
-
],
|
|
16
|
+
], vt = [
|
|
17
17
|
"",
|
|
18
18
|
"default",
|
|
19
19
|
"stretch",
|
|
20
20
|
"flex-start",
|
|
21
|
-
"start",
|
|
22
21
|
"flex-end",
|
|
23
|
-
"end",
|
|
24
22
|
"center",
|
|
25
23
|
"baseline"
|
|
26
|
-
],
|
|
24
|
+
], xt = [
|
|
27
25
|
"",
|
|
28
26
|
"default",
|
|
29
27
|
"flex-start",
|
|
30
|
-
"start",
|
|
31
28
|
"flex-end",
|
|
32
|
-
"end",
|
|
33
29
|
"center",
|
|
34
30
|
"space-between",
|
|
35
31
|
"space-around",
|
|
36
32
|
"space-evenly"
|
|
37
|
-
],
|
|
33
|
+
], mt = ["", "default", "nowrap", "wrap", "wrap-reverse"], ft = ["", "visible", "hidden", "scroll", "auto"];
|
|
38
34
|
class P extends M {
|
|
39
35
|
constructor() {
|
|
40
|
-
super(
|
|
36
|
+
super(G), this.overflowXAttributeDelegate = new ot(
|
|
41
37
|
this,
|
|
42
38
|
"overflow-x",
|
|
43
39
|
(t) => t,
|
|
@@ -91,7 +87,7 @@ class P extends M {
|
|
|
91
87
|
case "gap--tablet":
|
|
92
88
|
case "gap--laptop":
|
|
93
89
|
case "gap--desktop":
|
|
94
|
-
this.updateFlexProperties(t, e, i,
|
|
90
|
+
this.updateFlexProperties(t, e, i, rt);
|
|
95
91
|
break;
|
|
96
92
|
case "justify-content":
|
|
97
93
|
case "justify-content--mobile":
|
|
@@ -102,7 +98,7 @@ class P extends M {
|
|
|
102
98
|
t,
|
|
103
99
|
e,
|
|
104
100
|
i,
|
|
105
|
-
|
|
101
|
+
xt
|
|
106
102
|
);
|
|
107
103
|
break;
|
|
108
104
|
case "align-items":
|
|
@@ -110,28 +106,28 @@ class P extends M {
|
|
|
110
106
|
case "align-items--tablet":
|
|
111
107
|
case "align-items--laptop":
|
|
112
108
|
case "align-items--desktop":
|
|
113
|
-
this.updateFlexProperties(t, e, i,
|
|
109
|
+
this.updateFlexProperties(t, e, i, vt);
|
|
114
110
|
break;
|
|
115
111
|
case "wrap":
|
|
116
112
|
case "wrap--mobile":
|
|
117
113
|
case "wrap--tablet":
|
|
118
114
|
case "wrap--laptop":
|
|
119
115
|
case "wrap--desktop":
|
|
120
|
-
this.updateFlexProperties(t, e, i,
|
|
116
|
+
this.updateFlexProperties(t, e, i, mt);
|
|
121
117
|
break;
|
|
122
118
|
case "direction":
|
|
123
119
|
case "direction--mobile":
|
|
124
120
|
case "direction--tablet":
|
|
125
121
|
case "direction--laptop":
|
|
126
122
|
case "direction--desktop":
|
|
127
|
-
this.updateFlexProperties(t, e, i,
|
|
123
|
+
this.updateFlexProperties(t, e, i, gt);
|
|
128
124
|
break;
|
|
129
125
|
case "overflow-x":
|
|
130
126
|
case "overflow-x--mobile":
|
|
131
127
|
case "overflow-x--tablet":
|
|
132
128
|
case "overflow-x--laptop":
|
|
133
129
|
case "overflow-x--desktop":
|
|
134
|
-
this.updateOverflowX(t, e, i,
|
|
130
|
+
this.updateOverflowX(t, e, i, ft);
|
|
135
131
|
break;
|
|
136
132
|
default:
|
|
137
133
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -139,9 +135,9 @@ class P extends M {
|
|
|
139
135
|
}
|
|
140
136
|
}
|
|
141
137
|
updateOverflowX(t, e, i, a) {
|
|
142
|
-
if (!
|
|
138
|
+
if (!nt(a, i)) {
|
|
143
139
|
f(
|
|
144
|
-
|
|
140
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
145
141
|
);
|
|
146
142
|
return;
|
|
147
143
|
}
|
|
@@ -153,7 +149,7 @@ class P extends M {
|
|
|
153
149
|
}
|
|
154
150
|
updateFlexProperties(t, e, i, a) {
|
|
155
151
|
this.checkName(a, i) || f(
|
|
156
|
-
|
|
152
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
157
153
|
);
|
|
158
154
|
const r = t.indexOf("--") > -1, o = r ? t.split("--")[0] : t, l = [];
|
|
159
155
|
if (!r)
|
|
@@ -362,7 +358,7 @@ class P extends M {
|
|
|
362
358
|
}
|
|
363
359
|
}
|
|
364
360
|
customElements.get("px-stack") || customElements.define("px-stack", P);
|
|
365
|
-
class
|
|
361
|
+
class kt extends P {
|
|
366
362
|
constructor() {
|
|
367
363
|
super();
|
|
368
364
|
}
|
|
@@ -370,8 +366,8 @@ class yt extends P {
|
|
|
370
366
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
371
367
|
}
|
|
372
368
|
}
|
|
373
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
374
|
-
class
|
|
369
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", kt);
|
|
370
|
+
class yt extends P {
|
|
375
371
|
constructor() {
|
|
376
372
|
super();
|
|
377
373
|
}
|
|
@@ -379,8 +375,8 @@ class At extends P {
|
|
|
379
375
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
380
376
|
}
|
|
381
377
|
}
|
|
382
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
383
|
-
class
|
|
378
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", yt);
|
|
379
|
+
class wt extends HTMLElement {
|
|
384
380
|
constructor() {
|
|
385
381
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
386
382
|
}
|
|
@@ -427,12 +423,12 @@ class $t extends HTMLElement {
|
|
|
427
423
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
428
424
|
}
|
|
429
425
|
}
|
|
430
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
431
|
-
const
|
|
432
|
-
|
|
433
|
-
class
|
|
426
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", wt);
|
|
427
|
+
const At = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", Z = new CSSStyleSheet();
|
|
428
|
+
Z.replaceSync(At);
|
|
429
|
+
class $t extends M {
|
|
434
430
|
constructor() {
|
|
435
|
-
super(
|
|
431
|
+
super(Z), this.template = (t) => `
|
|
436
432
|
<px-container border-radius="none" padding="none">
|
|
437
433
|
<px-vstack>
|
|
438
434
|
<px-container id="header-container" border-radius="none">
|
|
@@ -609,7 +605,7 @@ class Ct extends M {
|
|
|
609
605
|
case "background-color":
|
|
610
606
|
this.$bodyContainer.setAttribute(
|
|
611
607
|
"background-color",
|
|
612
|
-
|
|
608
|
+
lt.indexOf(i) > 0 ? i : "none"
|
|
613
609
|
);
|
|
614
610
|
break;
|
|
615
611
|
case "padding-vertical":
|
|
@@ -629,24 +625,24 @@ class Ct extends M {
|
|
|
629
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;
|
|
630
626
|
}
|
|
631
627
|
}
|
|
632
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
633
|
-
const
|
|
634
|
-
|
|
635
|
-
const
|
|
628
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", $t);
|
|
629
|
+
const St = ".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)}}", B = new CSSStyleSheet();
|
|
630
|
+
B.replaceSync(St);
|
|
631
|
+
const Ct = ["", "default", "small"], zt = [
|
|
636
632
|
"",
|
|
637
633
|
"default",
|
|
638
634
|
"secondary",
|
|
639
635
|
"naked"
|
|
640
|
-
], $ = class $ extends
|
|
636
|
+
], $ = class $ extends ct {
|
|
641
637
|
constructor() {
|
|
642
|
-
super(
|
|
638
|
+
super(B), this.template = () => "<slot></slot>";
|
|
643
639
|
const t = document.createElement($.nativeName);
|
|
644
640
|
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
645
641
|
}
|
|
646
642
|
static get observedAttributes() {
|
|
647
643
|
return [
|
|
648
644
|
...super.observedAttributes,
|
|
649
|
-
...
|
|
645
|
+
...pt,
|
|
650
646
|
"inverted",
|
|
651
647
|
"loading",
|
|
652
648
|
"size",
|
|
@@ -690,13 +686,13 @@ const X = ["", "default", "small"], F = [
|
|
|
690
686
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
691
687
|
}
|
|
692
688
|
updateSize(t, e) {
|
|
693
|
-
this.checkName(
|
|
694
|
-
|
|
689
|
+
this.checkName(Ct, 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}`)) : f(
|
|
690
|
+
`${e} is not a valid size value for ${this.tagName.toLowerCase()}`
|
|
695
691
|
);
|
|
696
692
|
}
|
|
697
693
|
updateVariant(t, e) {
|
|
698
|
-
this.checkName(
|
|
699
|
-
|
|
694
|
+
this.checkName(zt, 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}`)) : f(
|
|
695
|
+
`${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
|
|
700
696
|
);
|
|
701
697
|
}
|
|
702
698
|
get inverted() {
|
|
@@ -733,7 +729,7 @@ const X = ["", "default", "small"], F = [
|
|
|
733
729
|
$.nativeName = "button";
|
|
734
730
|
let I = $;
|
|
735
731
|
customElements.get("px-button-icon") || customElements.define("px-button-icon", I);
|
|
736
|
-
class
|
|
732
|
+
class Lt extends HTMLElement {
|
|
737
733
|
constructor() {
|
|
738
734
|
super();
|
|
739
735
|
}
|
|
@@ -766,8 +762,8 @@ class jt extends HTMLElement {
|
|
|
766
762
|
t && t.remove();
|
|
767
763
|
}
|
|
768
764
|
}
|
|
769
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
770
|
-
const
|
|
765
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Lt);
|
|
766
|
+
const jt = [
|
|
771
767
|
"Brand",
|
|
772
768
|
"Accent",
|
|
773
769
|
"Neutral",
|
|
@@ -780,15 +776,15 @@ const Lt = [
|
|
|
780
776
|
"StateHover",
|
|
781
777
|
"StateActive",
|
|
782
778
|
"StateDisabled"
|
|
783
|
-
], Et = ["Inherit", ...
|
|
779
|
+
], Et = ["Inherit", ...jt].map(
|
|
784
780
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
785
|
-
), Tt = ":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)}",
|
|
786
|
-
|
|
781
|
+
), Tt = ":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)}", U = new CSSStyleSheet();
|
|
782
|
+
U.replaceSync(Tt);
|
|
787
783
|
var h, d, S;
|
|
788
784
|
class Rt extends M {
|
|
789
785
|
constructor(...e) {
|
|
790
786
|
var i;
|
|
791
|
-
super(...e,
|
|
787
|
+
super(...e, U);
|
|
792
788
|
x(this, h);
|
|
793
789
|
x(this, d);
|
|
794
790
|
x(this, S, () => `<svg aria-hidden="true">
|
|
@@ -815,7 +811,7 @@ class Rt extends M {
|
|
|
815
811
|
this.updateName(i, a);
|
|
816
812
|
break;
|
|
817
813
|
case "size":
|
|
818
|
-
this.updateAttribute(e, i, a,
|
|
814
|
+
this.updateAttribute(e, i, a, dt);
|
|
819
815
|
break;
|
|
820
816
|
case "color":
|
|
821
817
|
this.updateAttribute(e, i, a, Et);
|
|
@@ -905,8 +901,8 @@ class Rt extends M {
|
|
|
905
901
|
}
|
|
906
902
|
h = new WeakMap(), d = new WeakMap(), S = new WeakMap();
|
|
907
903
|
customElements.get("px-icon") || customElements.define("px-icon", Rt);
|
|
908
|
-
const It = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media screen and (max-width: 47.
|
|
909
|
-
|
|
904
|
+
const It = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", K = new CSSStyleSheet();
|
|
905
|
+
K.replaceSync(It);
|
|
910
906
|
class Ht extends HTMLElement {
|
|
911
907
|
constructor() {
|
|
912
908
|
super(), this.template = (t, e) => `<div class="container">
|
|
@@ -916,7 +912,7 @@ class Ht extends HTMLElement {
|
|
|
916
912
|
<div></div>
|
|
917
913
|
</div>`
|
|
918
914
|
).join("")}
|
|
919
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
915
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [K], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
920
916
|
}
|
|
921
917
|
static get observedAttributes() {
|
|
922
918
|
return ["amount", "active"];
|
|
@@ -950,12 +946,12 @@ class Ht extends HTMLElement {
|
|
|
950
946
|
}
|
|
951
947
|
}
|
|
952
948
|
customElements.get("px-appleseed") || customElements.define("px-appleseed", Ht);
|
|
953
|
-
function
|
|
949
|
+
function w(s) {
|
|
954
950
|
var t = typeof s;
|
|
955
951
|
return s != null && (t == "object" || t == "function");
|
|
956
952
|
}
|
|
957
|
-
var Mt = typeof global == "object" && global && global.Object === Object && global, Pt = typeof self == "object" && self && self.Object === Object && self,
|
|
958
|
-
return
|
|
953
|
+
var Mt = typeof global == "object" && global && global.Object === Object && global, Pt = typeof self == "object" && self && self.Object === Object && self, J = Mt || Pt || Function("return this")(), R = function() {
|
|
954
|
+
return J.Date.now();
|
|
959
955
|
}, Ot = /\s/;
|
|
960
956
|
function Nt(s) {
|
|
961
957
|
for (var t = s.length; t-- && Ot.test(s.charAt(t)); )
|
|
@@ -966,7 +962,7 @@ var qt = /^\s+/;
|
|
|
966
962
|
function Dt(s) {
|
|
967
963
|
return s && s.slice(0, Nt(s) + 1).replace(qt, "");
|
|
968
964
|
}
|
|
969
|
-
var A =
|
|
965
|
+
var A = J.Symbol, Q = Object.prototype, Wt = Q.hasOwnProperty, Xt = Q.toString, m = A ? A.toStringTag : void 0;
|
|
970
966
|
function Ft(s) {
|
|
971
967
|
var t = Wt.call(s, m), e = s[m];
|
|
972
968
|
try {
|
|
@@ -981,9 +977,9 @@ var _t = Object.prototype, Gt = _t.toString;
|
|
|
981
977
|
function Zt(s) {
|
|
982
978
|
return Gt.call(s);
|
|
983
979
|
}
|
|
984
|
-
var Bt = "[object Null]", Ut = "[object Undefined]",
|
|
980
|
+
var Bt = "[object Null]", Ut = "[object Undefined]", X = A ? A.toStringTag : void 0;
|
|
985
981
|
function Kt(s) {
|
|
986
|
-
return s == null ? s === void 0 ? Ut : Bt :
|
|
982
|
+
return s == null ? s === void 0 ? Ut : Bt : X && X in Object(s) ? Ft(s) : Zt(s);
|
|
987
983
|
}
|
|
988
984
|
function Jt(s) {
|
|
989
985
|
return s != null && typeof s == "object";
|
|
@@ -992,36 +988,36 @@ var Qt = "[object Symbol]";
|
|
|
992
988
|
function Yt(s) {
|
|
993
989
|
return typeof s == "symbol" || Jt(s) && Kt(s) == Qt;
|
|
994
990
|
}
|
|
995
|
-
var
|
|
996
|
-
function
|
|
991
|
+
var F = NaN, Vt = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, ie = parseInt;
|
|
992
|
+
function _(s) {
|
|
997
993
|
if (typeof s == "number")
|
|
998
994
|
return s;
|
|
999
995
|
if (Yt(s))
|
|
1000
|
-
return
|
|
1001
|
-
if (
|
|
996
|
+
return F;
|
|
997
|
+
if (w(s)) {
|
|
1002
998
|
var t = typeof s.valueOf == "function" ? s.valueOf() : s;
|
|
1003
|
-
s =
|
|
999
|
+
s = w(t) ? t + "" : t;
|
|
1004
1000
|
}
|
|
1005
1001
|
if (typeof s != "string")
|
|
1006
1002
|
return s === 0 ? s : +s;
|
|
1007
1003
|
s = Dt(s);
|
|
1008
1004
|
var e = te.test(s);
|
|
1009
|
-
return e || ee.test(s) ? ie(s.slice(2), e ? 2 : 8) : Vt.test(s) ?
|
|
1005
|
+
return e || ee.test(s) ? ie(s.slice(2), e ? 2 : 8) : Vt.test(s) ? F : +s;
|
|
1010
1006
|
}
|
|
1011
1007
|
var se = "Expected a function", ae = Math.max, oe = Math.min;
|
|
1012
1008
|
function re(s, t, e) {
|
|
1013
1009
|
var i, a, r, o, l, c, b = 0, O = !1, g = !1, C = !0;
|
|
1014
1010
|
if (typeof s != "function")
|
|
1015
1011
|
throw new TypeError(se);
|
|
1016
|
-
t =
|
|
1012
|
+
t = _(t) || 0, w(e) && (O = !!e.leading, g = "maxWait" in e, r = g ? ae(_(e.maxWait) || 0, t) : r, C = "trailing" in e ? !!e.trailing : C);
|
|
1017
1013
|
function z(n) {
|
|
1018
1014
|
var u = i, v = a;
|
|
1019
1015
|
return i = a = void 0, b = n, o = s.apply(v, u), o;
|
|
1020
1016
|
}
|
|
1021
|
-
function
|
|
1022
|
-
return b = n, l = setTimeout(
|
|
1017
|
+
function et(n) {
|
|
1018
|
+
return b = n, l = setTimeout(y, t), O ? z(n) : o;
|
|
1023
1019
|
}
|
|
1024
|
-
function
|
|
1020
|
+
function it(n) {
|
|
1025
1021
|
var u = n - c, v = n - b, D = t - u;
|
|
1026
1022
|
return g ? oe(D, r - v) : D;
|
|
1027
1023
|
}
|
|
@@ -1029,47 +1025,47 @@ function re(s, t, e) {
|
|
|
1029
1025
|
var u = n - c, v = n - b;
|
|
1030
1026
|
return c === void 0 || u >= t || u < 0 || g && v >= r;
|
|
1031
1027
|
}
|
|
1032
|
-
function
|
|
1028
|
+
function y() {
|
|
1033
1029
|
var n = R();
|
|
1034
1030
|
if (N(n))
|
|
1035
1031
|
return q(n);
|
|
1036
|
-
l = setTimeout(
|
|
1032
|
+
l = setTimeout(y, it(n));
|
|
1037
1033
|
}
|
|
1038
1034
|
function q(n) {
|
|
1039
1035
|
return l = void 0, C && i ? z(n) : (i = a = void 0, o);
|
|
1040
1036
|
}
|
|
1041
|
-
function
|
|
1037
|
+
function st() {
|
|
1042
1038
|
l !== void 0 && clearTimeout(l), b = 0, i = c = a = l = void 0;
|
|
1043
1039
|
}
|
|
1044
|
-
function
|
|
1040
|
+
function at() {
|
|
1045
1041
|
return l === void 0 ? o : q(R());
|
|
1046
1042
|
}
|
|
1047
|
-
function
|
|
1043
|
+
function L() {
|
|
1048
1044
|
var n = R(), u = N(n);
|
|
1049
1045
|
if (i = arguments, a = this, c = n, u) {
|
|
1050
1046
|
if (l === void 0)
|
|
1051
|
-
return
|
|
1047
|
+
return et(c);
|
|
1052
1048
|
if (g)
|
|
1053
|
-
return clearTimeout(l), l = setTimeout(
|
|
1049
|
+
return clearTimeout(l), l = setTimeout(y, t), z(c);
|
|
1054
1050
|
}
|
|
1055
|
-
return l === void 0 && (l = setTimeout(
|
|
1051
|
+
return l === void 0 && (l = setTimeout(y, t)), o;
|
|
1056
1052
|
}
|
|
1057
|
-
return
|
|
1053
|
+
return L.cancel = st, L.flush = at, L;
|
|
1058
1054
|
}
|
|
1059
1055
|
var ne = "Expected a function";
|
|
1060
1056
|
function le(s, t, e) {
|
|
1061
1057
|
var i = !0, a = !0;
|
|
1062
1058
|
if (typeof s != "function")
|
|
1063
1059
|
throw new TypeError(ne);
|
|
1064
|
-
return
|
|
1060
|
+
return w(e) && (i = "leading" in e ? !!e.leading : i, a = "trailing" in e ? !!e.trailing : a), re(s, t, {
|
|
1065
1061
|
leading: i,
|
|
1066
1062
|
maxWait: t,
|
|
1067
1063
|
trailing: a
|
|
1068
1064
|
});
|
|
1069
1065
|
}
|
|
1070
|
-
const
|
|
1071
|
-
|
|
1072
|
-
const
|
|
1066
|
+
const Y = new CSSStyleSheet();
|
|
1067
|
+
Y.replaceSync(ut);
|
|
1068
|
+
const V = "px-carousel-item-connected";
|
|
1073
1069
|
var k, H;
|
|
1074
1070
|
class ce extends HTMLElement {
|
|
1075
1071
|
constructor() {
|
|
@@ -1102,10 +1098,10 @@ class ce extends HTMLElement {
|
|
|
1102
1098
|
) : Math.ceil(e + a) + 10 >= i ? r = this.itemNumbers - 1 : r = Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
|
|
1103
1099
|
let o = r;
|
|
1104
1100
|
this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? o = 2 : r === this.itemNumbers - 2 ? o = 3 : r === this.itemNumbers - 1 && (o = 4)), this.$appleseed.setAttribute("active", `${o}`), this.handleNextPrevious();
|
|
1105
|
-
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1101
|
+
}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Y];
|
|
1106
1102
|
}
|
|
1107
1103
|
connectedCallback() {
|
|
1108
|
-
this.addEventListener(
|
|
1104
|
+
this.addEventListener(V, () => {
|
|
1109
1105
|
T(this, k, H).call(this);
|
|
1110
1106
|
}), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", le(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
|
|
1111
1107
|
this.$carousel.scrollLeft -= this.$carousel.clientWidth;
|
|
@@ -1153,18 +1149,18 @@ k = new WeakSet(), H = function() {
|
|
|
1153
1149
|
});
|
|
1154
1150
|
};
|
|
1155
1151
|
customElements.get("px-carousel") || customElements.define("px-carousel", ce);
|
|
1156
|
-
const
|
|
1157
|
-
|
|
1152
|
+
const tt = new CSSStyleSheet();
|
|
1153
|
+
tt.replaceSync(ht);
|
|
1158
1154
|
class pe extends HTMLElement {
|
|
1159
1155
|
constructor() {
|
|
1160
1156
|
super(), this.template = `
|
|
1161
1157
|
<div class="carousel-item">
|
|
1162
1158
|
<slot></slot>
|
|
1163
|
-
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
1159
|
+
</div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [tt];
|
|
1164
1160
|
}
|
|
1165
1161
|
connectedCallback() {
|
|
1166
1162
|
this.dispatchEvent(
|
|
1167
|
-
new CustomEvent(
|
|
1163
|
+
new CustomEvent(V, {
|
|
1168
1164
|
bubbles: !0,
|
|
1169
1165
|
composed: !0
|
|
1170
1166
|
})
|
|
@@ -1174,7 +1170,7 @@ class pe extends HTMLElement {
|
|
|
1174
1170
|
customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
|
|
1175
1171
|
export {
|
|
1176
1172
|
Ht as AppleSeed,
|
|
1177
|
-
|
|
1173
|
+
V as CAROUSEL_ITEM_CONNECTED_EVENT,
|
|
1178
1174
|
ce as Carousel,
|
|
1179
1175
|
pe as CarouselItem
|
|
1180
1176
|
};
|