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