@proximus/lavender-light 2.0.0-alpha.16 → 2.0.0-alpha.161
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/lavender-light.cjs.js +1 -1
- package/dist/lavender-light.es.js +974 -261
- package/dist/lavender-light.umd.js +1 -1
- package/package.json +1 -1
|
@@ -6,13 +6,13 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
6
6
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
7
7
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
8
8
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
9
|
-
var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get;
|
|
10
|
-
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-
|
|
11
|
-
const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media
|
|
12
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media
|
|
13
|
-
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}span.link{text-decoration:underline}@media
|
|
14
|
-
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width:
|
|
15
|
-
const __vite_import_meta_env__ = {};
|
|
9
|
+
var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get;
|
|
10
|
+
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}";
|
|
11
|
+
const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
|
|
12
|
+
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}";
|
|
13
|
+
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}";
|
|
14
|
+
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([word-break-all]){word-break:break-all}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all!important}}";
|
|
15
|
+
const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "true" };
|
|
16
16
|
function getSupportedPropertyNames(htmlElementName) {
|
|
17
17
|
const $element = document.createElement(htmlElementName);
|
|
18
18
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -27,7 +27,8 @@ function getSupportedAttributeNames(htmlElementName) {
|
|
|
27
27
|
}
|
|
28
28
|
const commonStyleSheet = new CSSStyleSheet();
|
|
29
29
|
commonStyleSheet.replaceSync(commonStyles);
|
|
30
|
-
const
|
|
30
|
+
const VITE_ENV = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" ? __vite_import_meta_env__ : void 0;
|
|
31
|
+
const PX_COMPONENT_DEBUG = (VITE_ENV == null ? void 0 : VITE_ENV.VITE_COMPONENT_DEBUG) === "true" || (VITE_ENV == null ? void 0 : VITE_ENV.DEV) === true;
|
|
31
32
|
if (typeof window !== "undefined") {
|
|
32
33
|
window.isComponentDebug = isComponentDebug;
|
|
33
34
|
}
|
|
@@ -39,6 +40,105 @@ function log(message) {
|
|
|
39
40
|
console.error(message);
|
|
40
41
|
}
|
|
41
42
|
}
|
|
43
|
+
class WrappedInteractiveStateController {
|
|
44
|
+
constructor(host, interactiveElement, canSetInteractiveState) {
|
|
45
|
+
__privateAdd(this, _WrappedInteractiveStateController_instances);
|
|
46
|
+
__privateAdd(this, _host);
|
|
47
|
+
__privateAdd(this, _interactiveElement);
|
|
48
|
+
__privateAdd(this, _canSetInteractiveState);
|
|
49
|
+
__privateAdd(this, _isConnected);
|
|
50
|
+
__privateAdd(this, _showInteractiveState);
|
|
51
|
+
__privateSet(this, _isConnected, false);
|
|
52
|
+
__privateSet(this, _showInteractiveState, () => {
|
|
53
|
+
this.setInteractiveState("hover");
|
|
54
|
+
});
|
|
55
|
+
this.clearInteractiveState = () => {
|
|
56
|
+
this.setInteractiveState(null);
|
|
57
|
+
};
|
|
58
|
+
__privateSet(this, _host, host);
|
|
59
|
+
__privateSet(this, _interactiveElement, interactiveElement);
|
|
60
|
+
__privateSet(this, _canSetInteractiveState, canSetInteractiveState);
|
|
61
|
+
}
|
|
62
|
+
connect() {
|
|
63
|
+
if (__privateGet(this, _isConnected)) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
__privateGet(this, _interactiveElement).addEventListener(
|
|
67
|
+
"pointerenter",
|
|
68
|
+
__privateGet(this, _showInteractiveState)
|
|
69
|
+
);
|
|
70
|
+
__privateGet(this, _interactiveElement).addEventListener(
|
|
71
|
+
"pointerleave",
|
|
72
|
+
this.clearInteractiveState
|
|
73
|
+
);
|
|
74
|
+
__privateGet(this, _interactiveElement).addEventListener(
|
|
75
|
+
"focusin",
|
|
76
|
+
__privateGet(this, _showInteractiveState)
|
|
77
|
+
);
|
|
78
|
+
__privateGet(this, _interactiveElement).addEventListener(
|
|
79
|
+
"focusout",
|
|
80
|
+
this.clearInteractiveState
|
|
81
|
+
);
|
|
82
|
+
__privateSet(this, _isConnected, true);
|
|
83
|
+
}
|
|
84
|
+
disconnect() {
|
|
85
|
+
if (!__privateGet(this, _isConnected)) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
__privateGet(this, _interactiveElement).removeEventListener(
|
|
89
|
+
"pointerenter",
|
|
90
|
+
__privateGet(this, _showInteractiveState)
|
|
91
|
+
);
|
|
92
|
+
__privateGet(this, _interactiveElement).removeEventListener(
|
|
93
|
+
"pointerleave",
|
|
94
|
+
this.clearInteractiveState
|
|
95
|
+
);
|
|
96
|
+
__privateGet(this, _interactiveElement).removeEventListener(
|
|
97
|
+
"focusin",
|
|
98
|
+
__privateGet(this, _showInteractiveState)
|
|
99
|
+
);
|
|
100
|
+
__privateGet(this, _interactiveElement).removeEventListener(
|
|
101
|
+
"focusout",
|
|
102
|
+
this.clearInteractiveState
|
|
103
|
+
);
|
|
104
|
+
__privateSet(this, _isConnected, false);
|
|
105
|
+
}
|
|
106
|
+
setInteractiveState(state) {
|
|
107
|
+
const targets = __privateGet(this, _WrappedInteractiveStateController_instances, interactiveStateTargets_get);
|
|
108
|
+
if (!__privateGet(this, _canSetInteractiveState).call(this)) {
|
|
109
|
+
targets.forEach((target) => target.removeAttribute("interactive-state"));
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
targets.forEach((target) => {
|
|
113
|
+
if (state) {
|
|
114
|
+
target.setAttribute("interactive-state", state);
|
|
115
|
+
} else {
|
|
116
|
+
target.removeAttribute("interactive-state");
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
_host = new WeakMap();
|
|
122
|
+
_interactiveElement = new WeakMap();
|
|
123
|
+
_canSetInteractiveState = new WeakMap();
|
|
124
|
+
_isConnected = new WeakMap();
|
|
125
|
+
_showInteractiveState = new WeakMap();
|
|
126
|
+
_WrappedInteractiveStateController_instances = new WeakSet();
|
|
127
|
+
interactiveStateTargets_get = function() {
|
|
128
|
+
return Array.from(__privateGet(this, _host).querySelectorAll("*")).filter(
|
|
129
|
+
isInteractiveStateElement
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
|
+
function isInteractiveStateElement(element) {
|
|
133
|
+
var _a;
|
|
134
|
+
if (element.hasAttribute("interactive-state")) {
|
|
135
|
+
return true;
|
|
136
|
+
}
|
|
137
|
+
const constructor = customElements.get(
|
|
138
|
+
element.localName
|
|
139
|
+
);
|
|
140
|
+
return ((_a = constructor == null ? void 0 : constructor.observedAttributes) == null ? void 0 : _a.includes("interactive-state")) ?? false;
|
|
141
|
+
}
|
|
42
142
|
if (typeof window !== "undefined") {
|
|
43
143
|
window.isComponentDebug = isComponentDebug;
|
|
44
144
|
}
|
|
@@ -89,7 +189,14 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
89
189
|
"order--mobile",
|
|
90
190
|
"order--tablet",
|
|
91
191
|
"order--laptop",
|
|
92
|
-
"order--desktop"
|
|
192
|
+
"order--desktop",
|
|
193
|
+
"sticky-top",
|
|
194
|
+
"sticky-bottom",
|
|
195
|
+
"word-break-all",
|
|
196
|
+
"word-break-all--mobile",
|
|
197
|
+
"word-break-all--tablet",
|
|
198
|
+
"word-break-all--laptop",
|
|
199
|
+
"word-break-all--desktop"
|
|
93
200
|
];
|
|
94
201
|
}
|
|
95
202
|
constructor(...adoptedStylesheets) {
|
|
@@ -169,9 +276,8 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
169
276
|
if (attrValue) {
|
|
170
277
|
if (!this.checkName(attrValue, newValue)) {
|
|
171
278
|
log(
|
|
172
|
-
|
|
279
|
+
`"${newValue}" is not an allowed ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
173
280
|
);
|
|
174
|
-
return;
|
|
175
281
|
}
|
|
176
282
|
}
|
|
177
283
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
@@ -534,20 +640,14 @@ const _PxElement = class _PxElement extends WithExtraAttributes {
|
|
|
534
640
|
};
|
|
535
641
|
_PxElement.accessorExclusions = [];
|
|
536
642
|
let PxElement = _PxElement;
|
|
537
|
-
class VerticallyExtendedElement extends PxElement {
|
|
538
|
-
connectedCallback() {
|
|
539
|
-
if (this.isInsideGridOrStack) {
|
|
540
|
-
this.$el.style.display = "block";
|
|
541
|
-
this.$el.style.height = "100%";
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
|
-
}
|
|
545
643
|
const flexboxAlignSelfValues = [
|
|
546
644
|
"",
|
|
547
645
|
"default",
|
|
548
646
|
"auto",
|
|
549
647
|
"flex-start",
|
|
648
|
+
"start",
|
|
550
649
|
"flex-end",
|
|
650
|
+
"end",
|
|
551
651
|
"center",
|
|
552
652
|
"baseline",
|
|
553
653
|
"stretch"
|
|
@@ -711,7 +811,7 @@ const backgroundColorValues = [
|
|
|
711
811
|
"purpose-info",
|
|
712
812
|
"purpose-eco",
|
|
713
813
|
"purpose-notification",
|
|
714
|
-
"footer"
|
|
814
|
+
"footer-sitemap"
|
|
715
815
|
];
|
|
716
816
|
const backgroundSizeValues = ["", "cover", "contain", "default"];
|
|
717
817
|
const boxShadowValues = ["", "none", "s", "m", "l", "xl"];
|
|
@@ -805,93 +905,94 @@ function addGlobalStylesheet(inlineStyles) {
|
|
|
805
905
|
function checkName(values, value) {
|
|
806
906
|
return values.includes(value);
|
|
807
907
|
}
|
|
808
|
-
|
|
908
|
+
const accessibilityAttributes = [
|
|
909
|
+
"aria-label",
|
|
910
|
+
"aria-labelledby",
|
|
911
|
+
"aria-describedby",
|
|
912
|
+
"aria-controls",
|
|
913
|
+
"aria-expanded",
|
|
914
|
+
"aria-haspopup",
|
|
915
|
+
"aria-pressed",
|
|
916
|
+
"aria-selected",
|
|
917
|
+
"aria-required",
|
|
918
|
+
"aria-disabled",
|
|
919
|
+
"aria-live",
|
|
920
|
+
"aria-atomic",
|
|
921
|
+
"aria-relevant",
|
|
922
|
+
"aria-orientation",
|
|
923
|
+
"aria-valuenow",
|
|
924
|
+
"aria-valuetext",
|
|
925
|
+
"aria-valuemin",
|
|
926
|
+
"aria-valuemax",
|
|
927
|
+
"aria-details",
|
|
928
|
+
"aria-modal",
|
|
929
|
+
"aria-autocomplete",
|
|
930
|
+
"aria-activedescendant",
|
|
931
|
+
"aria-colcount",
|
|
932
|
+
"aria-colindex",
|
|
933
|
+
"aria-colspan",
|
|
934
|
+
"aria-rowcount",
|
|
935
|
+
"aria-rowindex",
|
|
936
|
+
"aria-rowspan",
|
|
937
|
+
"aria-keyshortcuts",
|
|
938
|
+
"aria-placeholder",
|
|
939
|
+
"aria-invalid",
|
|
940
|
+
"aria-busy",
|
|
941
|
+
"aria-owns"
|
|
942
|
+
];
|
|
943
|
+
function transferAccessibilityAttributes(sourceElement, targetElement, applyLabelledBy = false) {
|
|
809
944
|
var _a;
|
|
810
|
-
|
|
811
|
-
"aria-label",
|
|
812
|
-
"aria-labelledby",
|
|
813
|
-
"aria-describedby",
|
|
814
|
-
"aria-controls",
|
|
815
|
-
"aria-expanded",
|
|
816
|
-
"aria-haspopup",
|
|
817
|
-
"aria-pressed",
|
|
818
|
-
"aria-selected",
|
|
819
|
-
"aria-required",
|
|
820
|
-
"aria-disabled",
|
|
821
|
-
"aria-live",
|
|
822
|
-
"aria-atomic",
|
|
823
|
-
"aria-relevant",
|
|
824
|
-
"aria-orientation",
|
|
825
|
-
"aria-valuenow",
|
|
826
|
-
"aria-valuetext",
|
|
827
|
-
"aria-valuemin",
|
|
828
|
-
"aria-valuemax",
|
|
829
|
-
"aria-details",
|
|
830
|
-
"aria-modal",
|
|
831
|
-
"aria-autocomplete",
|
|
832
|
-
"aria-activedescendant",
|
|
833
|
-
"aria-colcount",
|
|
834
|
-
"aria-colindex",
|
|
835
|
-
"aria-colspan",
|
|
836
|
-
"aria-rowcount",
|
|
837
|
-
"aria-rowindex",
|
|
838
|
-
"aria-rowspan",
|
|
839
|
-
"aria-keyshortcuts",
|
|
840
|
-
"aria-placeholder",
|
|
841
|
-
"aria-invalid",
|
|
842
|
-
"aria-busy",
|
|
843
|
-
"aria-owns"
|
|
844
|
-
].forEach((attr) => {
|
|
945
|
+
accessibilityAttributes.forEach((attr) => {
|
|
845
946
|
if (sourceElement.getAttribute(attr)) {
|
|
846
947
|
targetElement.setAttribute(attr, sourceElement.getAttribute(attr));
|
|
847
948
|
sourceElement.removeAttribute(attr);
|
|
848
949
|
}
|
|
849
950
|
});
|
|
850
|
-
if (applyLabelledBy) {
|
|
951
|
+
if (applyLabelledBy && !sourceElement.getAttribute("aria-labelledby")) {
|
|
851
952
|
const id = `px-${((_a = targetElement.localName) == null ? void 0 : _a.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
|
|
852
953
|
targetElement.setAttribute("id", id);
|
|
853
954
|
sourceElement.setAttribute("aria-labelledby", id);
|
|
854
955
|
}
|
|
855
956
|
}
|
|
856
|
-
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
957
|
+
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
|
|
857
958
|
const stylesheet2 = new CSSStyleSheet();
|
|
858
959
|
const styles2 = attributeValues.reduce(
|
|
859
960
|
(prev, attributeValue) => prev + `
|
|
860
|
-
${selector(
|
|
961
|
+
${selector(selectorAttributeName, attributeValue)} {
|
|
861
962
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
862
963
|
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
863
964
|
}
|
|
864
965
|
/* Mobile only - max 767px */
|
|
865
|
-
@media only screen and (max-width: 47.
|
|
866
|
-
${selector(
|
|
966
|
+
@media only screen and (max-width: 47.938rem) {
|
|
967
|
+
${selector(selectorAttributeName, attributeValue)} {
|
|
867
968
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
868
969
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
869
970
|
}
|
|
870
971
|
}
|
|
871
|
-
${selector(
|
|
972
|
+
${selector(selectorAttributeName, attributeValue, "mobile")} {
|
|
872
973
|
/* Mobile only - max 767px */
|
|
873
|
-
@media only screen and (max-width: 47.
|
|
974
|
+
@media only screen and (max-width: 47.938rem) {
|
|
874
975
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
|
|
875
976
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
876
977
|
}
|
|
877
978
|
}
|
|
878
|
-
${selector(
|
|
979
|
+
${selector(selectorAttributeName, attributeValue, "tablet")} {
|
|
879
980
|
/* Tablet - min 768px max 1024px */
|
|
880
|
-
@media only screen and (min-width:
|
|
981
|
+
@media only screen and (min-width: 48rem) and (max-width: 64rem) {
|
|
881
982
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
882
983
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
883
984
|
}
|
|
884
985
|
}
|
|
885
|
-
${selector(
|
|
986
|
+
${selector(selectorAttributeName, attributeValue, "laptop")} {
|
|
886
987
|
/* Laptop - 1025px*/
|
|
887
|
-
@media only screen and (min-width: 64.
|
|
988
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
888
989
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
889
990
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
890
991
|
}
|
|
891
992
|
}
|
|
892
|
-
${selector(
|
|
993
|
+
${selector(selectorAttributeName, attributeValue, "desktop")} {
|
|
893
994
|
/* Desktop - 1025px*/
|
|
894
|
-
@media only screen and (min-width: 64.
|
|
995
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
895
996
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
896
997
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
897
998
|
}
|
|
@@ -1006,8 +1107,8 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
1006
1107
|
this.setCSSProperties();
|
|
1007
1108
|
}
|
|
1008
1109
|
}
|
|
1009
|
-
const typographyCss$1 = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){padding:0;margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media
|
|
1010
|
-
const lightStyles = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media
|
|
1110
|
+
const typographyCss$1 = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){padding:0;margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media screen and (min-width: 48rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-tablet) var(--px-spacing-default-tablet)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-laptop) var(--px-spacing-default-laptop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-desktop) var(--px-spacing-default-desktop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-desktop)}}:host([inverted]){color:var(--px-color-text-neutral-inverted)}";
|
|
1111
|
+
const lightStyles = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media screen and (min-width: 48rem){.li{margin-bottom:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){.li{margin-bottom:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){.li{margin-bottom:var(--px-padding-xs-desktop)}}";
|
|
1011
1112
|
const typographyStyles$3 = new CSSStyleSheet();
|
|
1012
1113
|
const headingStyles$2 = new CSSStyleSheet();
|
|
1013
1114
|
const linkStyles$2 = new CSSStyleSheet();
|
|
@@ -1051,9 +1152,30 @@ class Typography extends HTMLElement {
|
|
|
1051
1152
|
if (!customElements.get("px-typography")) {
|
|
1052
1153
|
customElements.define("px-typography", Typography);
|
|
1053
1154
|
}
|
|
1054
|
-
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
|
|
1155
|
+
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}';
|
|
1055
1156
|
const containerStyles = new CSSStyleSheet();
|
|
1056
1157
|
containerStyles.replaceSync(containerCss);
|
|
1158
|
+
const anchorSpacingValues = [
|
|
1159
|
+
"top-patch",
|
|
1160
|
+
"top-neighbor-patch",
|
|
1161
|
+
"top-ribbon",
|
|
1162
|
+
"top-neighbor-ribbon",
|
|
1163
|
+
"top-patch-and-neighbor-ribbon"
|
|
1164
|
+
];
|
|
1165
|
+
const subgridRowsValues = [
|
|
1166
|
+
"1",
|
|
1167
|
+
"2",
|
|
1168
|
+
"3",
|
|
1169
|
+
"4",
|
|
1170
|
+
"5",
|
|
1171
|
+
"6",
|
|
1172
|
+
"7",
|
|
1173
|
+
"8",
|
|
1174
|
+
"9",
|
|
1175
|
+
"10",
|
|
1176
|
+
"11",
|
|
1177
|
+
"12"
|
|
1178
|
+
];
|
|
1057
1179
|
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
|
|
1058
1180
|
const paddingPrefix = "px-padding";
|
|
1059
1181
|
const containerBreakpoints = [
|
|
@@ -1101,9 +1223,17 @@ const containerBreakpoints = [
|
|
|
1101
1223
|
paddingValues,
|
|
1102
1224
|
paddingPrefix,
|
|
1103
1225
|
"--container-padding-left"
|
|
1226
|
+
),
|
|
1227
|
+
cssTokenBreakpoints(
|
|
1228
|
+
"gap",
|
|
1229
|
+
attributeBreakpointCSSSelector$1,
|
|
1230
|
+
gapValues,
|
|
1231
|
+
"px-spacing",
|
|
1232
|
+
void 0,
|
|
1233
|
+
"subgrid-gap"
|
|
1104
1234
|
)
|
|
1105
1235
|
];
|
|
1106
|
-
const _Container = class _Container extends
|
|
1236
|
+
const _Container = class _Container extends WithExtraAttributes {
|
|
1107
1237
|
constructor() {
|
|
1108
1238
|
super(containerStyles, ...containerBreakpoints);
|
|
1109
1239
|
this.template = () => `<div class="container">
|
|
@@ -1114,6 +1244,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1114
1244
|
</div>`;
|
|
1115
1245
|
this._bgObserver = null;
|
|
1116
1246
|
this._isInViewport = false;
|
|
1247
|
+
this.contentObserver = null;
|
|
1117
1248
|
this.shadowRoot.innerHTML = this.template();
|
|
1118
1249
|
}
|
|
1119
1250
|
static get observedAttributes() {
|
|
@@ -1146,11 +1277,12 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1146
1277
|
"background-position",
|
|
1147
1278
|
"box-shadow",
|
|
1148
1279
|
"anchor-offset",
|
|
1149
|
-
"
|
|
1280
|
+
"anchor-spacing",
|
|
1281
|
+
"inverted",
|
|
1282
|
+
"subgrid-rows"
|
|
1150
1283
|
];
|
|
1151
1284
|
}
|
|
1152
1285
|
connectedCallback() {
|
|
1153
|
-
super.connectedCallback();
|
|
1154
1286
|
if (!this.padding) {
|
|
1155
1287
|
this.padding = "m";
|
|
1156
1288
|
}
|
|
@@ -1186,9 +1318,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1186
1318
|
this._bgObserver.observe(this.$el);
|
|
1187
1319
|
}
|
|
1188
1320
|
disconnectedCallback() {
|
|
1189
|
-
var _a;
|
|
1321
|
+
var _a, _b;
|
|
1190
1322
|
(_a = this._bgObserver) == null ? void 0 : _a.disconnect();
|
|
1191
|
-
this.contentObserver.disconnect();
|
|
1323
|
+
(_b = this.contentObserver) == null ? void 0 : _b.disconnect();
|
|
1192
1324
|
}
|
|
1193
1325
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
1194
1326
|
if (oldValue !== newValue) {
|
|
@@ -1263,6 +1395,17 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1263
1395
|
case "anchor-offset":
|
|
1264
1396
|
this.updateAnchorOffset(oldValue, newValue, paddingValues);
|
|
1265
1397
|
break;
|
|
1398
|
+
case "anchor-spacing":
|
|
1399
|
+
this.updateAnchorSpacing(oldValue, newValue, anchorSpacingValues);
|
|
1400
|
+
break;
|
|
1401
|
+
case "subgrid-rows":
|
|
1402
|
+
this.updateSubgridRows(
|
|
1403
|
+
attrName,
|
|
1404
|
+
oldValue,
|
|
1405
|
+
newValue,
|
|
1406
|
+
subgridRowsValues
|
|
1407
|
+
);
|
|
1408
|
+
break;
|
|
1266
1409
|
default:
|
|
1267
1410
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
1268
1411
|
break;
|
|
@@ -1297,7 +1440,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1297
1440
|
);
|
|
1298
1441
|
} else {
|
|
1299
1442
|
log(
|
|
1300
|
-
|
|
1443
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${gradientValues.join('", "')}".`
|
|
1301
1444
|
);
|
|
1302
1445
|
}
|
|
1303
1446
|
}
|
|
@@ -1316,7 +1459,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1316
1459
|
);
|
|
1317
1460
|
} else {
|
|
1318
1461
|
log(
|
|
1319
|
-
|
|
1462
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${backgroundColorValues.join('", "')}".`
|
|
1320
1463
|
);
|
|
1321
1464
|
}
|
|
1322
1465
|
}
|
|
@@ -1332,14 +1475,14 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1332
1475
|
);
|
|
1333
1476
|
} else {
|
|
1334
1477
|
log(
|
|
1335
|
-
|
|
1478
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${borderColorValues.join('", "')}".`
|
|
1336
1479
|
);
|
|
1337
1480
|
}
|
|
1338
1481
|
}
|
|
1339
1482
|
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
1340
1483
|
if (!this.checkName(attrValues, newValue)) {
|
|
1341
1484
|
log(
|
|
1342
|
-
|
|
1485
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1343
1486
|
);
|
|
1344
1487
|
} else {
|
|
1345
1488
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -1359,7 +1502,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1359
1502
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1360
1503
|
if (!this.checkName(attrValues, newValue)) {
|
|
1361
1504
|
log(
|
|
1362
|
-
|
|
1505
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1363
1506
|
);
|
|
1364
1507
|
} else {
|
|
1365
1508
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -1390,7 +1533,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1390
1533
|
updateAnchorOffset(oldValue, newValue, attrValue) {
|
|
1391
1534
|
if (!checkName(attrValue, newValue)) {
|
|
1392
1535
|
log(
|
|
1393
|
-
|
|
1536
|
+
`"${newValue}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1394
1537
|
);
|
|
1395
1538
|
return;
|
|
1396
1539
|
}
|
|
@@ -1418,6 +1561,49 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1418
1561
|
this.$el.classList.add("anchored");
|
|
1419
1562
|
}
|
|
1420
1563
|
}
|
|
1564
|
+
updateAnchorSpacing(oldValue, newValue, attrValue) {
|
|
1565
|
+
if (!checkName(attrValue, newValue)) {
|
|
1566
|
+
log(
|
|
1567
|
+
`"${newValue}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1568
|
+
);
|
|
1569
|
+
return;
|
|
1570
|
+
}
|
|
1571
|
+
const updateAnchorSpacingStyle = (value) => {
|
|
1572
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
1573
|
+
this.style.setProperty(
|
|
1574
|
+
`--container-anchor-spacing--mobile`,
|
|
1575
|
+
`var(--px-spacing-${value}-mobile)`
|
|
1576
|
+
);
|
|
1577
|
+
this.style.setProperty(
|
|
1578
|
+
`--container-anchor-spacing--tablet`,
|
|
1579
|
+
`var(--px-spacing-${value}-tablet)`
|
|
1580
|
+
);
|
|
1581
|
+
this.style.setProperty(
|
|
1582
|
+
`--container-anchor-spacing--laptop`,
|
|
1583
|
+
`var(--px-spacing-${value}-laptop)`
|
|
1584
|
+
);
|
|
1585
|
+
this.style.setProperty(
|
|
1586
|
+
`--container-anchor-spacing--desktop`,
|
|
1587
|
+
`var(--px-spacing-${value}-desktop)`
|
|
1588
|
+
);
|
|
1589
|
+
}
|
|
1590
|
+
};
|
|
1591
|
+
updateAnchorSpacingStyle(oldValue);
|
|
1592
|
+
updateAnchorSpacingStyle(newValue);
|
|
1593
|
+
}
|
|
1594
|
+
updateSubgridRows(attrName, oldValue, newValue, attrValues) {
|
|
1595
|
+
if (!checkName(attrValues, newValue)) {
|
|
1596
|
+
log(
|
|
1597
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1598
|
+
);
|
|
1599
|
+
} else {
|
|
1600
|
+
this.style.setProperty(`--${attrName}`, newValue);
|
|
1601
|
+
}
|
|
1602
|
+
}
|
|
1603
|
+
get $el() {
|
|
1604
|
+
var _a;
|
|
1605
|
+
return (_a = this == null ? void 0 : this.shadowRoot) == null ? void 0 : _a.querySelector(".container");
|
|
1606
|
+
}
|
|
1421
1607
|
get $slotAnchor() {
|
|
1422
1608
|
return this.querySelector('[slot^="anchor"]');
|
|
1423
1609
|
}
|
|
@@ -1751,11 +1937,51 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1751
1937
|
set anchorOffset(value) {
|
|
1752
1938
|
this.setAttribute("anchor-offset", value);
|
|
1753
1939
|
}
|
|
1940
|
+
get anchorSpacing() {
|
|
1941
|
+
return this.getAttribute("anchor-spacing");
|
|
1942
|
+
}
|
|
1943
|
+
set anchorSpacing(value) {
|
|
1944
|
+
this.setAttribute("anchor-spacing", value);
|
|
1945
|
+
}
|
|
1754
1946
|
get inverted() {
|
|
1755
|
-
return this.
|
|
1947
|
+
return this.hasAttribute("inverted");
|
|
1756
1948
|
}
|
|
1757
1949
|
set inverted(value) {
|
|
1758
|
-
|
|
1950
|
+
if (value) {
|
|
1951
|
+
this.setAttribute("inverted", "");
|
|
1952
|
+
} else {
|
|
1953
|
+
this.removeAttribute("inverted");
|
|
1954
|
+
}
|
|
1955
|
+
}
|
|
1956
|
+
get subgridRows() {
|
|
1957
|
+
return this.getAttribute("subgrid-rows");
|
|
1958
|
+
}
|
|
1959
|
+
set subgridRows(value) {
|
|
1960
|
+
this.setAttribute("subgrid-rows", value);
|
|
1961
|
+
}
|
|
1962
|
+
get subgridGap() {
|
|
1963
|
+
return this.getAttribute("subgrid-gap");
|
|
1964
|
+
}
|
|
1965
|
+
set subgridGap(value) {
|
|
1966
|
+
this.setAttribute("subgrid-gap", value);
|
|
1967
|
+
}
|
|
1968
|
+
get subgridGapMobile() {
|
|
1969
|
+
return this.getAttribute("subgrid-gap--mobile");
|
|
1970
|
+
}
|
|
1971
|
+
set subgridGapMobile(value) {
|
|
1972
|
+
this.setAttribute("subgrid-gap--mobile", value);
|
|
1973
|
+
}
|
|
1974
|
+
get subgridGapTablet() {
|
|
1975
|
+
return this.getAttribute("subgrid-gap--tablet");
|
|
1976
|
+
}
|
|
1977
|
+
set subgridGapTablet(value) {
|
|
1978
|
+
this.setAttribute("subgrid-gap--tablet", value);
|
|
1979
|
+
}
|
|
1980
|
+
get subgridGapLaptop() {
|
|
1981
|
+
return this.getAttribute("subgrid-gap--laptop");
|
|
1982
|
+
}
|
|
1983
|
+
set subgridGapLaptop(value) {
|
|
1984
|
+
this.setAttribute("subgrid-gap--laptop", value);
|
|
1759
1985
|
}
|
|
1760
1986
|
};
|
|
1761
1987
|
_Container.nativeName = "div";
|
|
@@ -1763,7 +1989,7 @@ let Container = _Container;
|
|
|
1763
1989
|
if (!customElements.get("px-container")) {
|
|
1764
1990
|
customElements.define("px-container", Container);
|
|
1765
1991
|
}
|
|
1766
|
-
const styles$7 = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media
|
|
1992
|
+
const styles$7 = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
|
|
1767
1993
|
const styleSheet$5 = new CSSStyleSheet();
|
|
1768
1994
|
styleSheet$5.replaceSync(styles$7);
|
|
1769
1995
|
const separatorDirectionValues = [
|
|
@@ -1846,7 +2072,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1846
2072
|
};
|
|
1847
2073
|
if (!this.checkName(attrValue, newValue)) {
|
|
1848
2074
|
log(
|
|
1849
|
-
|
|
2075
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1850
2076
|
);
|
|
1851
2077
|
} else {
|
|
1852
2078
|
updateSizeStyle(oldValue);
|
|
@@ -1868,7 +2094,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1868
2094
|
};
|
|
1869
2095
|
if (!this.checkName(attrValue, newValue)) {
|
|
1870
2096
|
log(
|
|
1871
|
-
|
|
2097
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1872
2098
|
);
|
|
1873
2099
|
} else {
|
|
1874
2100
|
updateColorStyle(oldValue);
|
|
@@ -1883,7 +2109,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1883
2109
|
};
|
|
1884
2110
|
if (!this.checkName(attrValue, newValue)) {
|
|
1885
2111
|
log(
|
|
1886
|
-
|
|
2112
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1887
2113
|
);
|
|
1888
2114
|
} else {
|
|
1889
2115
|
if (attrName === "direction") {
|
|
@@ -1965,7 +2191,7 @@ let Separator = _Separator;
|
|
|
1965
2191
|
if (!customElements.get("px-separator")) {
|
|
1966
2192
|
customElements.define("px-separator", Separator);
|
|
1967
2193
|
}
|
|
1968
|
-
const styles$6 = ':host{display:block}: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
|
|
2194
|
+
const styles$6 = ':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))}}';
|
|
1969
2195
|
const styleSheet$4 = new CSSStyleSheet();
|
|
1970
2196
|
styleSheet$4.replaceSync(styles$6);
|
|
1971
2197
|
const directionValues = [
|
|
@@ -1981,7 +2207,9 @@ const alignItemsValues = [
|
|
|
1981
2207
|
"default",
|
|
1982
2208
|
"stretch",
|
|
1983
2209
|
"flex-start",
|
|
2210
|
+
"start",
|
|
1984
2211
|
"flex-end",
|
|
2212
|
+
"end",
|
|
1985
2213
|
"center",
|
|
1986
2214
|
"baseline"
|
|
1987
2215
|
];
|
|
@@ -1989,7 +2217,9 @@ const justifyContentValues = [
|
|
|
1989
2217
|
"",
|
|
1990
2218
|
"default",
|
|
1991
2219
|
"flex-start",
|
|
2220
|
+
"start",
|
|
1992
2221
|
"flex-end",
|
|
2222
|
+
"end",
|
|
1993
2223
|
"center",
|
|
1994
2224
|
"space-between",
|
|
1995
2225
|
"space-around",
|
|
@@ -2123,7 +2353,7 @@ class Stack extends WithExtraAttributes {
|
|
|
2123
2353
|
updateOverflowX(name, oldValue, newValue, attrValue) {
|
|
2124
2354
|
if (!checkName(attrValue, newValue)) {
|
|
2125
2355
|
log(
|
|
2126
|
-
|
|
2356
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2127
2357
|
);
|
|
2128
2358
|
return;
|
|
2129
2359
|
}
|
|
@@ -2136,7 +2366,7 @@ class Stack extends WithExtraAttributes {
|
|
|
2136
2366
|
updateFlexProperties(name, oldValue, newValue, attrValue) {
|
|
2137
2367
|
if (!this.checkName(attrValue, newValue)) {
|
|
2138
2368
|
log(
|
|
2139
|
-
|
|
2369
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2140
2370
|
);
|
|
2141
2371
|
}
|
|
2142
2372
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
@@ -2172,6 +2402,10 @@ class Stack extends WithExtraAttributes {
|
|
|
2172
2402
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
2173
2403
|
`var(--px-spacing-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
|
|
2174
2404
|
);
|
|
2405
|
+
this.style.setProperty(
|
|
2406
|
+
`--host-gap--${breakpoint}`,
|
|
2407
|
+
`var(--px-spacing-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
|
|
2408
|
+
);
|
|
2175
2409
|
} else {
|
|
2176
2410
|
this.$el.style.setProperty(
|
|
2177
2411
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
@@ -2493,7 +2727,7 @@ class Spacer extends HTMLElement {
|
|
|
2493
2727
|
if (!customElements.get("px-spacer")) {
|
|
2494
2728
|
customElements.define("px-spacer", Spacer);
|
|
2495
2729
|
}
|
|
2496
|
-
const styles$5 = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.
|
|
2730
|
+
const styles$5 = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
|
|
2497
2731
|
const styleSheet$3 = new CSSStyleSheet();
|
|
2498
2732
|
styleSheet$3.replaceSync(styles$5);
|
|
2499
2733
|
class Page extends WithExtraAttributes {
|
|
@@ -2775,18 +3009,9 @@ const iconColorValues = [
|
|
|
2775
3009
|
const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
|
|
2776
3010
|
(value) => value.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
2777
3011
|
);
|
|
2778
|
-
const styles$4 = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:
|
|
3012
|
+
const styles$4 = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:1;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)}";
|
|
2779
3013
|
const styleSheet$2 = new CSSStyleSheet();
|
|
2780
3014
|
styleSheet$2.replaceSync(styles$4);
|
|
2781
|
-
const observedAttributes = [
|
|
2782
|
-
"name",
|
|
2783
|
-
"size",
|
|
2784
|
-
"color",
|
|
2785
|
-
"aria-label",
|
|
2786
|
-
"inverted",
|
|
2787
|
-
"from",
|
|
2788
|
-
"disabled"
|
|
2789
|
-
];
|
|
2790
3015
|
class Icon extends WithExtraAttributes {
|
|
2791
3016
|
constructor(...styleSheets) {
|
|
2792
3017
|
var _a;
|
|
@@ -2794,17 +3019,25 @@ class Icon extends WithExtraAttributes {
|
|
|
2794
3019
|
__privateAdd(this, _src);
|
|
2795
3020
|
__privateAdd(this, _internals);
|
|
2796
3021
|
__privateAdd(this, _template, () => `<svg aria-hidden="true">
|
|
2797
|
-
<use
|
|
3022
|
+
<use></use>
|
|
2798
3023
|
</svg>`);
|
|
2799
3024
|
this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
|
|
2800
|
-
this.role = "img";
|
|
2801
3025
|
__privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
|
|
2802
3026
|
if (__privateGet(this, _internals)) {
|
|
2803
3027
|
__privateGet(this, _internals).role = "img";
|
|
2804
3028
|
}
|
|
2805
3029
|
}
|
|
2806
3030
|
static get observedAttributes() {
|
|
2807
|
-
return [
|
|
3031
|
+
return [
|
|
3032
|
+
...super.observedAttributes,
|
|
3033
|
+
"name",
|
|
3034
|
+
"size",
|
|
3035
|
+
"color",
|
|
3036
|
+
"aria-label",
|
|
3037
|
+
"inverted",
|
|
3038
|
+
"from",
|
|
3039
|
+
"disabled"
|
|
3040
|
+
];
|
|
2808
3041
|
}
|
|
2809
3042
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
2810
3043
|
if (oldValue !== newValue) {
|
|
@@ -2837,6 +3070,8 @@ class Icon extends WithExtraAttributes {
|
|
|
2837
3070
|
}
|
|
2838
3071
|
}
|
|
2839
3072
|
connectedCallback() {
|
|
3073
|
+
var _a;
|
|
3074
|
+
this.role = "img";
|
|
2840
3075
|
const iconSet = document.querySelectorAll("px-icon-set");
|
|
2841
3076
|
if (!iconSet) {
|
|
2842
3077
|
console.log("<px-icon-set> component not found");
|
|
@@ -2849,7 +3084,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2849
3084
|
if (icon.getAttribute("name") === this.from && icon.getAttribute("type") !== "font") {
|
|
2850
3085
|
__privateSet(this, _src, icon.getAttribute("src"));
|
|
2851
3086
|
this.$el.firstElementChild.setAttribute(
|
|
2852
|
-
"
|
|
3087
|
+
"href",
|
|
2853
3088
|
`${__privateGet(this, _src)}#icon-${this.name}`
|
|
2854
3089
|
);
|
|
2855
3090
|
}
|
|
@@ -2858,6 +3093,11 @@ class Icon extends WithExtraAttributes {
|
|
|
2858
3093
|
__privateGet(this, _internals).ariaHidden = "true";
|
|
2859
3094
|
this.ariaHidden = "true";
|
|
2860
3095
|
}
|
|
3096
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-a" && this.slot !== "before" && this.slot !== "after") {
|
|
3097
|
+
if (!this.color) {
|
|
3098
|
+
this.setAttribute("color", "inherit");
|
|
3099
|
+
}
|
|
3100
|
+
}
|
|
2861
3101
|
}
|
|
2862
3102
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2863
3103
|
if (oldValue !== null && oldValue !== "") {
|
|
@@ -2883,7 +3123,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2883
3123
|
updateName(oldValue, newValue) {
|
|
2884
3124
|
if (__privateGet(this, _src)) {
|
|
2885
3125
|
this.$el.firstElementChild.setAttribute(
|
|
2886
|
-
"
|
|
3126
|
+
"href",
|
|
2887
3127
|
`${__privateGet(this, _src)}#icon-${newValue}`
|
|
2888
3128
|
);
|
|
2889
3129
|
}
|
|
@@ -2940,7 +3180,7 @@ _template = new WeakMap();
|
|
|
2940
3180
|
if (!customElements.get("px-icon")) {
|
|
2941
3181
|
customElements.define("px-icon", Icon);
|
|
2942
3182
|
}
|
|
2943
|
-
const typographyCss = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media
|
|
3183
|
+
const typographyCss = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (min-width: 90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}";
|
|
2944
3184
|
const headingStyles$1 = new CSSStyleSheet();
|
|
2945
3185
|
headingStyles$1.replaceSync(headingCss);
|
|
2946
3186
|
const typographyStyles$2 = new CSSStyleSheet();
|
|
@@ -2965,7 +3205,8 @@ class AbstractHeading extends PxElement {
|
|
|
2965
3205
|
"text-align--tablet",
|
|
2966
3206
|
"text-align--laptop",
|
|
2967
3207
|
"text-align--desktop",
|
|
2968
|
-
"inverted"
|
|
3208
|
+
"inverted",
|
|
3209
|
+
"auto-spacing"
|
|
2969
3210
|
];
|
|
2970
3211
|
}
|
|
2971
3212
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -3001,7 +3242,7 @@ class AbstractHeading extends PxElement {
|
|
|
3001
3242
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
3002
3243
|
if (!this.checkName(attrValue, newValue)) {
|
|
3003
3244
|
log(
|
|
3004
|
-
|
|
3245
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3005
3246
|
);
|
|
3006
3247
|
} else {
|
|
3007
3248
|
this.toggleClass(oldValue, newValue);
|
|
@@ -3010,7 +3251,7 @@ class AbstractHeading extends PxElement {
|
|
|
3010
3251
|
updateColor(oldValue, newValue, attrValue) {
|
|
3011
3252
|
if (!this.checkName(attrValue, newValue)) {
|
|
3012
3253
|
log(
|
|
3013
|
-
|
|
3254
|
+
`"${newValue}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3014
3255
|
);
|
|
3015
3256
|
return;
|
|
3016
3257
|
}
|
|
@@ -3032,7 +3273,7 @@ class AbstractHeading extends PxElement {
|
|
|
3032
3273
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
3033
3274
|
if (!this.checkName(attrValue, newValue)) {
|
|
3034
3275
|
log(
|
|
3035
|
-
|
|
3276
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3036
3277
|
);
|
|
3037
3278
|
return;
|
|
3038
3279
|
}
|
|
@@ -3103,6 +3344,16 @@ class AbstractHeading extends PxElement {
|
|
|
3103
3344
|
set inverted(value) {
|
|
3104
3345
|
this.setAttribute("inverted", value);
|
|
3105
3346
|
}
|
|
3347
|
+
get autoSpacing() {
|
|
3348
|
+
return this.hasAttribute("auto-spacing");
|
|
3349
|
+
}
|
|
3350
|
+
set autoSpacing(value) {
|
|
3351
|
+
if (value) {
|
|
3352
|
+
this.setAttribute("auto-spacing", "");
|
|
3353
|
+
} else {
|
|
3354
|
+
this.removeAttribute("auto-spacing");
|
|
3355
|
+
}
|
|
3356
|
+
}
|
|
3106
3357
|
}
|
|
3107
3358
|
const _H1 = class _H1 extends AbstractHeading {
|
|
3108
3359
|
constructor() {
|
|
@@ -3232,7 +3483,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3232
3483
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
3233
3484
|
if (!this.checkName(attrValue, newValue)) {
|
|
3234
3485
|
log(
|
|
3235
|
-
|
|
3486
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3236
3487
|
);
|
|
3237
3488
|
} else {
|
|
3238
3489
|
this.toggleClass(oldValue, newValue);
|
|
@@ -3241,7 +3492,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3241
3492
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
3242
3493
|
if (!this.checkName(attrValue, newValue)) {
|
|
3243
3494
|
log(
|
|
3244
|
-
|
|
3495
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3245
3496
|
);
|
|
3246
3497
|
} else {
|
|
3247
3498
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -3335,44 +3586,55 @@ let Paragraph = _Paragraph;
|
|
|
3335
3586
|
if (!customElements.get("px-p")) {
|
|
3336
3587
|
customElements.define("px-p", Paragraph);
|
|
3337
3588
|
}
|
|
3338
|
-
const styles$3 =
|
|
3589
|
+
const styles$3 = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{display:flex;padding:var(--px-padding-m-mobile);flex-grow:1}#content-container px-vstack{max-height:100%;flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards;max-width:calc(100% - (var(--px-spacing-s-mobile) * 2));max-height:calc(100% - (var(--px-spacing-s-mobile) * 2))}dialog[open]{display:flex}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){dialog{max-width:calc(100% - (var(--px-spacing-s-tablet) * 2));max-height:calc(100% - (var(--px-spacing-s-tablet) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-laptop) * 2));max-height:calc(100% - (var(--px-spacing-s-laptop) * 2))}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){dialog{max-width:calc(100% - (var(--px-spacing-s-desktop) * 2));max-height:calc(100% - (var(--px-spacing-s-desktop) * 2))}:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
|
|
3339
3590
|
const styleSheet$1 = new CSSStyleSheet();
|
|
3340
3591
|
styleSheet$1.replaceSync(styles$3);
|
|
3341
3592
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
3593
|
+
const statusValues = ["", "info", "success", "error", "warning"];
|
|
3342
3594
|
class Modal extends HTMLElement {
|
|
3343
3595
|
constructor() {
|
|
3344
3596
|
super();
|
|
3345
|
-
this.
|
|
3597
|
+
this.onOpenClick = () => this.show();
|
|
3598
|
+
this.onCloseClick = () => this.close();
|
|
3599
|
+
this.onDialogCancel = () => this.close();
|
|
3600
|
+
this.commandButtonCleanups = [];
|
|
3601
|
+
this.opener = null;
|
|
3602
|
+
this.openerElement = null;
|
|
3603
|
+
this.closerElement = null;
|
|
3604
|
+
this.template = `<dialog>
|
|
3346
3605
|
<div id="container">
|
|
3347
|
-
<
|
|
3348
|
-
<px-
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
</px-
|
|
3358
|
-
</px-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3606
|
+
<div id="content-container">
|
|
3607
|
+
<px-vstack gap="default" >
|
|
3608
|
+
<px-hstack id="icon-container" gap="s" align-items="flex-start">
|
|
3609
|
+
<px-vstack gap="xs">
|
|
3610
|
+
<px-h1 variant="title-l">
|
|
3611
|
+
<slot name="title"></slot>
|
|
3612
|
+
</px-h1>
|
|
3613
|
+
<px-p font-weight="title">
|
|
3614
|
+
<slot name="description"></slot>
|
|
3615
|
+
</px-p>
|
|
3616
|
+
</px-vstack>
|
|
3617
|
+
</px-hstack>
|
|
3618
|
+
<div id="content">
|
|
3619
|
+
<slot name="content"></slot>
|
|
3620
|
+
<slot></slot>
|
|
3621
|
+
</div>
|
|
3622
|
+
<px-separator size="m"></px-separator>
|
|
3623
|
+
<px-stack
|
|
3624
|
+
gap="s"
|
|
3625
|
+
justify-content="flex-end"
|
|
3626
|
+
align-items="center"
|
|
3627
|
+
align-items--mobile="stretch"
|
|
3628
|
+
direction="row"
|
|
3629
|
+
direction--mobile="column-reverse"
|
|
3630
|
+
>
|
|
3631
|
+
<slot name="footer"></slot>
|
|
3632
|
+
</px-stack>
|
|
3633
|
+
</px-vstack>
|
|
3634
|
+
<slot name="close-button"></slot>
|
|
3635
|
+
</div>
|
|
3636
|
+
<div id="media-container">
|
|
3637
|
+
</div>
|
|
3376
3638
|
</div>
|
|
3377
3639
|
</dialog>`;
|
|
3378
3640
|
this.attachShadow({ mode: "open" });
|
|
@@ -3380,40 +3642,99 @@ class Modal extends HTMLElement {
|
|
|
3380
3642
|
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
3381
3643
|
}
|
|
3382
3644
|
connectedCallback() {
|
|
3645
|
+
var _a, _b;
|
|
3646
|
+
this.$dialog.addEventListener("cancel", this.onDialogCancel);
|
|
3647
|
+
this.addEventListenersToCommandButtons();
|
|
3648
|
+
this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
|
|
3649
|
+
this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
|
|
3383
3650
|
if (this.hasAttribute("open")) {
|
|
3384
3651
|
this.show();
|
|
3385
3652
|
}
|
|
3386
|
-
this.handleStatusChange("notnull", this.getAttribute("status"));
|
|
3387
|
-
if (this.hasAttribute("closedby")) {
|
|
3388
|
-
const $closer = document.querySelector(
|
|
3389
|
-
`#${this.getAttribute("closedby")}`
|
|
3390
|
-
);
|
|
3391
|
-
$closer == null ? void 0 : $closer.addEventListener("click", () => {
|
|
3392
|
-
this.close();
|
|
3393
|
-
});
|
|
3394
|
-
}
|
|
3395
3653
|
if (this.hasAttribute("openedby")) {
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
this.show();
|
|
3401
|
-
});
|
|
3654
|
+
this.addOpenListener();
|
|
3655
|
+
}
|
|
3656
|
+
if (this.hasAttribute("closedby")) {
|
|
3657
|
+
this.addCloseListener(this.getAttribute("closedby"));
|
|
3402
3658
|
}
|
|
3659
|
+
this.toggleDescriptionVisibility();
|
|
3660
|
+
(_a = this.$slotDescription) == null ? void 0 : _a.addEventListener(
|
|
3661
|
+
"slotchange",
|
|
3662
|
+
this.toggleDescriptionVisibility
|
|
3663
|
+
);
|
|
3664
|
+
this.toggleCloseButtonSafeArea();
|
|
3665
|
+
(_b = this.$slotCloseButton) == null ? void 0 : _b.addEventListener(
|
|
3666
|
+
"slotchange",
|
|
3667
|
+
this.toggleCloseButtonSafeArea
|
|
3668
|
+
);
|
|
3403
3669
|
}
|
|
3404
3670
|
static get observedAttributes() {
|
|
3405
|
-
return ["open", "status"];
|
|
3671
|
+
return ["open", "status", "media-src", "openedby", "closedby", "id"];
|
|
3406
3672
|
}
|
|
3407
3673
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3408
3674
|
switch (attrName) {
|
|
3409
3675
|
case "open":
|
|
3410
|
-
this.
|
|
3676
|
+
if (this.isConnected) {
|
|
3677
|
+
this.handleOpenChange();
|
|
3678
|
+
}
|
|
3411
3679
|
break;
|
|
3412
3680
|
case "status":
|
|
3413
3681
|
this.handleStatusChange(oldValue, newValue);
|
|
3414
3682
|
break;
|
|
3683
|
+
case "media-src":
|
|
3684
|
+
this.updateMediaSrc(newValue);
|
|
3685
|
+
break;
|
|
3686
|
+
case "openedby":
|
|
3687
|
+
if (this.isConnected) {
|
|
3688
|
+
this.addOpenListener();
|
|
3689
|
+
}
|
|
3690
|
+
break;
|
|
3691
|
+
case "closedby":
|
|
3692
|
+
if (this.isConnected) {
|
|
3693
|
+
this.addCloseListener(newValue);
|
|
3694
|
+
}
|
|
3695
|
+
break;
|
|
3696
|
+
case "id":
|
|
3697
|
+
this.addEventListenersToCommandButtons();
|
|
3698
|
+
break;
|
|
3415
3699
|
}
|
|
3416
3700
|
}
|
|
3701
|
+
disconnectedCallback() {
|
|
3702
|
+
var _a, _b;
|
|
3703
|
+
this.$dialog.removeEventListener("cancel", this.onDialogCancel);
|
|
3704
|
+
(_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
|
|
3705
|
+
"slotchange",
|
|
3706
|
+
this.toggleDescriptionVisibility
|
|
3707
|
+
);
|
|
3708
|
+
(_b = this.$slotCloseButton) == null ? void 0 : _b.removeEventListener(
|
|
3709
|
+
"slotchange",
|
|
3710
|
+
this.toggleCloseButtonSafeArea
|
|
3711
|
+
);
|
|
3712
|
+
this.removeCommandButtonListeners();
|
|
3713
|
+
this.removeOpenListener();
|
|
3714
|
+
this.removeCloseListener();
|
|
3715
|
+
}
|
|
3716
|
+
addEventListenersToCommandButtons() {
|
|
3717
|
+
this.removeCommandButtonListeners();
|
|
3718
|
+
if (this.id) {
|
|
3719
|
+
document.querySelectorAll(`[commandfor="${this.id}"]`).forEach(($clickable) => {
|
|
3720
|
+
if ($clickable.getAttribute("command") === "show-modal") {
|
|
3721
|
+
$clickable.addEventListener("click", this.onOpenClick);
|
|
3722
|
+
this.commandButtonCleanups.push(
|
|
3723
|
+
() => $clickable.removeEventListener("click", this.onOpenClick)
|
|
3724
|
+
);
|
|
3725
|
+
} else if ($clickable.getAttribute("command") === "close") {
|
|
3726
|
+
$clickable.addEventListener("click", this.onCloseClick);
|
|
3727
|
+
this.commandButtonCleanups.push(
|
|
3728
|
+
() => $clickable.removeEventListener("click", this.onCloseClick)
|
|
3729
|
+
);
|
|
3730
|
+
}
|
|
3731
|
+
});
|
|
3732
|
+
}
|
|
3733
|
+
}
|
|
3734
|
+
removeCommandButtonListeners() {
|
|
3735
|
+
this.commandButtonCleanups.forEach((cleanup) => cleanup());
|
|
3736
|
+
this.commandButtonCleanups = [];
|
|
3737
|
+
}
|
|
3417
3738
|
handleOpenChange() {
|
|
3418
3739
|
if (this.hasAttribute("open")) {
|
|
3419
3740
|
this.show();
|
|
@@ -3423,6 +3744,18 @@ class Modal extends HTMLElement {
|
|
|
3423
3744
|
}
|
|
3424
3745
|
handleStatusChange(oldStatus, newStatus) {
|
|
3425
3746
|
var _a, _b, _c;
|
|
3747
|
+
if (statusValues.includes(newStatus)) {
|
|
3748
|
+
this.$titleContainer.setAttribute("color", `neutral`);
|
|
3749
|
+
} else {
|
|
3750
|
+
if (this.$titleContainer.hasAttribute("color")) {
|
|
3751
|
+
this.$titleContainer.removeAttribute("color");
|
|
3752
|
+
}
|
|
3753
|
+
}
|
|
3754
|
+
if (newStatus === "info") {
|
|
3755
|
+
this.$container.classList.add("info");
|
|
3756
|
+
} else {
|
|
3757
|
+
this.$container.classList.remove("info");
|
|
3758
|
+
}
|
|
3426
3759
|
if (newStatus === "success") {
|
|
3427
3760
|
this.$container.classList.add("success");
|
|
3428
3761
|
} else {
|
|
@@ -3438,27 +3771,30 @@ class Modal extends HTMLElement {
|
|
|
3438
3771
|
} else {
|
|
3439
3772
|
this.$container.classList.remove("warning");
|
|
3440
3773
|
}
|
|
3441
|
-
if (newStatus === null) {
|
|
3774
|
+
if (newStatus === null && this.$statusIcon) {
|
|
3442
3775
|
(_a = this.$statusIcon) == null ? void 0 : _a.remove();
|
|
3443
3776
|
} else if (oldStatus === null && newStatus && !this.$statusIcon) {
|
|
3444
3777
|
const icon = document.createElement("px-icon");
|
|
3445
3778
|
icon.setAttribute("name", this.getIcon(newStatus));
|
|
3446
3779
|
icon.setAttribute("from", "lavender");
|
|
3447
3780
|
icon.setAttribute("color", `purpose-${newStatus}`);
|
|
3448
|
-
|
|
3781
|
+
icon.setAttribute("size", "l");
|
|
3782
|
+
this.$iconContainer.prepend(icon);
|
|
3449
3783
|
} else {
|
|
3450
3784
|
(_b = this.$statusIcon) == null ? void 0 : _b.setAttribute("name", this.getIcon(newStatus));
|
|
3451
3785
|
(_c = this.$statusIcon) == null ? void 0 : _c.setAttribute("color", `purpose-${newStatus}`);
|
|
3452
3786
|
}
|
|
3453
3787
|
}
|
|
3454
3788
|
getIcon(status) {
|
|
3455
|
-
return status === "success" ? "checkmark_fill" : status === "warning" ? "exclamation_mark_fill" : "minus_fill";
|
|
3789
|
+
return status === "success" ? "checkmark_fill" : status === "warning" ? "exclamation_mark_fill" : status === "error" ? "minus_fill" : "information_fill";
|
|
3456
3790
|
}
|
|
3457
3791
|
show() {
|
|
3458
3792
|
this.$dialog.showModal();
|
|
3793
|
+
document.body.style.overflow = "hidden";
|
|
3459
3794
|
}
|
|
3460
3795
|
close() {
|
|
3461
3796
|
this.$dialog.close();
|
|
3797
|
+
document.body.style.overflow = "";
|
|
3462
3798
|
this.dispatchEvent(
|
|
3463
3799
|
new CustomEvent(CLOSE_EVENT, {
|
|
3464
3800
|
bubbles: true,
|
|
@@ -3466,6 +3802,117 @@ class Modal extends HTMLElement {
|
|
|
3466
3802
|
})
|
|
3467
3803
|
);
|
|
3468
3804
|
}
|
|
3805
|
+
updateMediaSrc(src) {
|
|
3806
|
+
this.$mediaContainer.style.backgroundImage = `url(${src})`;
|
|
3807
|
+
}
|
|
3808
|
+
addOpenListener() {
|
|
3809
|
+
var _a;
|
|
3810
|
+
this.removeOpenListener();
|
|
3811
|
+
if (this.$opener) {
|
|
3812
|
+
this.openerElement = this.$opener;
|
|
3813
|
+
this.openerElement.addEventListener("click", this.onOpenClick);
|
|
3814
|
+
} else {
|
|
3815
|
+
(_a = this.opener) == null ? void 0 : _a.disconnect();
|
|
3816
|
+
this.opener = new MutationObserver(() => {
|
|
3817
|
+
if (this.$opener) {
|
|
3818
|
+
this.opener.disconnect();
|
|
3819
|
+
this.opener = null;
|
|
3820
|
+
this.addOpenListener();
|
|
3821
|
+
}
|
|
3822
|
+
});
|
|
3823
|
+
this.opener.observe(document.body, {
|
|
3824
|
+
childList: true,
|
|
3825
|
+
subtree: true
|
|
3826
|
+
});
|
|
3827
|
+
}
|
|
3828
|
+
}
|
|
3829
|
+
removeOpenListener() {
|
|
3830
|
+
var _a, _b;
|
|
3831
|
+
(_a = this.opener) == null ? void 0 : _a.disconnect();
|
|
3832
|
+
this.opener = null;
|
|
3833
|
+
(_b = this.openerElement) == null ? void 0 : _b.removeEventListener("click", this.onOpenClick);
|
|
3834
|
+
this.openerElement = null;
|
|
3835
|
+
}
|
|
3836
|
+
addCloseListener(value) {
|
|
3837
|
+
var _a, _b;
|
|
3838
|
+
if (value === "none") {
|
|
3839
|
+
(_a = this.$dialog) == null ? void 0 : _a.setAttribute("closedby", "none");
|
|
3840
|
+
}
|
|
3841
|
+
this.removeCloseListener();
|
|
3842
|
+
if (value && value !== "none") {
|
|
3843
|
+
this.closerElement = document.querySelector(`#${value}`);
|
|
3844
|
+
(_b = this.closerElement) == null ? void 0 : _b.addEventListener("click", this.onCloseClick);
|
|
3845
|
+
}
|
|
3846
|
+
}
|
|
3847
|
+
removeCloseListener() {
|
|
3848
|
+
var _a;
|
|
3849
|
+
(_a = this.closerElement) == null ? void 0 : _a.removeEventListener("click", this.onCloseClick);
|
|
3850
|
+
this.closerElement = null;
|
|
3851
|
+
}
|
|
3852
|
+
toggleDescriptionVisibility() {
|
|
3853
|
+
if (!this.$slottedDescription) {
|
|
3854
|
+
this.$descriptionContainer.style.display = "none";
|
|
3855
|
+
} else {
|
|
3856
|
+
this.$descriptionContainer.style.display = "block";
|
|
3857
|
+
}
|
|
3858
|
+
}
|
|
3859
|
+
toggleCloseButtonSafeArea() {
|
|
3860
|
+
var _a, _b, _c;
|
|
3861
|
+
if (this.$slottedCloseButton) {
|
|
3862
|
+
(_a = this.$container) == null ? void 0 : _a.classList.add("has-close-button");
|
|
3863
|
+
} else {
|
|
3864
|
+
if ((_b = this.$container) == null ? void 0 : _b.classList.contains("has-close-button")) {
|
|
3865
|
+
(_c = this.$container) == null ? void 0 : _c.classList.remove("has-close-button");
|
|
3866
|
+
}
|
|
3867
|
+
}
|
|
3868
|
+
}
|
|
3869
|
+
get $slottedCloseButton() {
|
|
3870
|
+
return this.querySelector('[slot="close-button"]');
|
|
3871
|
+
}
|
|
3872
|
+
get $slotCloseButton() {
|
|
3873
|
+
return this.shadowRoot.querySelector(
|
|
3874
|
+
'slot[name="close-button"]'
|
|
3875
|
+
);
|
|
3876
|
+
}
|
|
3877
|
+
get $slottedDescription() {
|
|
3878
|
+
return this.querySelector('[slot="description"]');
|
|
3879
|
+
}
|
|
3880
|
+
get $slotDescription() {
|
|
3881
|
+
return this.shadowRoot.querySelector(
|
|
3882
|
+
'slot[name="description"]'
|
|
3883
|
+
);
|
|
3884
|
+
}
|
|
3885
|
+
get $descriptionContainer() {
|
|
3886
|
+
return this.shadowRoot.querySelector(
|
|
3887
|
+
'px-p[font-weight="title"]'
|
|
3888
|
+
);
|
|
3889
|
+
}
|
|
3890
|
+
get $titleContainer() {
|
|
3891
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
3892
|
+
}
|
|
3893
|
+
get $opener() {
|
|
3894
|
+
return document.querySelector(
|
|
3895
|
+
`px-button#${this.getAttribute("openedby")}`
|
|
3896
|
+
);
|
|
3897
|
+
}
|
|
3898
|
+
get status() {
|
|
3899
|
+
return this.getAttribute("status");
|
|
3900
|
+
}
|
|
3901
|
+
set status(value) {
|
|
3902
|
+
this.setAttribute("status", value);
|
|
3903
|
+
}
|
|
3904
|
+
get openedby() {
|
|
3905
|
+
return this.getAttribute("openedby");
|
|
3906
|
+
}
|
|
3907
|
+
set openedby(value) {
|
|
3908
|
+
this.setAttribute("openedby", value);
|
|
3909
|
+
}
|
|
3910
|
+
get closedby() {
|
|
3911
|
+
return this.getAttribute("closedby");
|
|
3912
|
+
}
|
|
3913
|
+
set closedby(value) {
|
|
3914
|
+
this.setAttribute("closedby", value);
|
|
3915
|
+
}
|
|
3469
3916
|
get $closeButton() {
|
|
3470
3917
|
return this.shadowRoot.querySelector("px-button-icon");
|
|
3471
3918
|
}
|
|
@@ -3474,6 +3921,19 @@ class Modal extends HTMLElement {
|
|
|
3474
3921
|
"#icon-container > px-icon"
|
|
3475
3922
|
);
|
|
3476
3923
|
}
|
|
3924
|
+
get $mediaContainer() {
|
|
3925
|
+
return this.shadowRoot.querySelector("#media-container");
|
|
3926
|
+
}
|
|
3927
|
+
get mediaSrc() {
|
|
3928
|
+
return this.getAttribute("media-src");
|
|
3929
|
+
}
|
|
3930
|
+
set mediaSrc(value) {
|
|
3931
|
+
if (value === null) {
|
|
3932
|
+
this.removeAttribute("media-src");
|
|
3933
|
+
} else {
|
|
3934
|
+
this.setAttribute("media-src", value);
|
|
3935
|
+
}
|
|
3936
|
+
}
|
|
3477
3937
|
get $container() {
|
|
3478
3938
|
return this.shadowRoot.querySelector("#container");
|
|
3479
3939
|
}
|
|
@@ -3490,9 +3950,9 @@ class Modal extends HTMLElement {
|
|
|
3490
3950
|
if (!customElements.get("px-modal")) {
|
|
3491
3951
|
customElements.define("px-modal", Modal);
|
|
3492
3952
|
}
|
|
3493
|
-
const buttonCss = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn: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:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`;
|
|
3494
|
-
const patchCss = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media
|
|
3495
|
-
const tagCss =
|
|
3953
|
+
const buttonCss = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0;flex-shrink:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn: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:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile);text-align:left}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-primary-default);color:var(--px-color-text-neutral-inverted)}.btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-default);color:var(--px-color-text-brand-default)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile);border-radius:var(--px-radius-pill);border:solid var(--px-size-border-m) transparent;font-weight:var(--px-font-weight-body)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading),.btn.actionable-tag-secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading),.btn.actionable-tag-secondary:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true],.btn.actionable-tag-secondary[disabled],.btn.actionable-tag-secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.btn.header-minimal-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);border:none;padding:0;border-radius:0;background:none}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-text-brand-default)}:host([inverted]) .btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.actionable-tag-secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.actionable-tag-secondary:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true],:host([inverted]) .btn.actionable-tag-secondary[disabled],:host([inverted]) .btn.actionable-tag-secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (max-width: 47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:none;padding:0;border-radius:0;background:none}}@media screen and (min-width: 90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`;
|
|
3954
|
+
const patchCss = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
|
|
3955
|
+
const tagCss = ':host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-2xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size="m"]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="m"]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}';
|
|
3496
3956
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
3497
3957
|
const linkStyles$1 = new CSSStyleSheet();
|
|
3498
3958
|
const patchStyles = new CSSStyleSheet();
|
|
@@ -3512,7 +3972,9 @@ const variantValues = [
|
|
|
3512
3972
|
"patch-black-friday",
|
|
3513
3973
|
"patch-eco",
|
|
3514
3974
|
"actionable-tag",
|
|
3515
|
-
"
|
|
3975
|
+
"actionable-tag-secondary",
|
|
3976
|
+
"header-dropdown",
|
|
3977
|
+
"header-minimal-dropdown"
|
|
3516
3978
|
];
|
|
3517
3979
|
const shapeValues = [
|
|
3518
3980
|
"",
|
|
@@ -3546,7 +4008,8 @@ const _Button = class _Button extends PxElement {
|
|
|
3546
4008
|
"extended--mobile",
|
|
3547
4009
|
"extended--tablet",
|
|
3548
4010
|
"extended--laptop",
|
|
3549
|
-
"extended--desktop"
|
|
4011
|
+
"extended--desktop",
|
|
4012
|
+
"size"
|
|
3550
4013
|
];
|
|
3551
4014
|
}
|
|
3552
4015
|
connectedCallback() {
|
|
@@ -3568,7 +4031,7 @@ const _Button = class _Button extends PxElement {
|
|
|
3568
4031
|
}
|
|
3569
4032
|
});
|
|
3570
4033
|
}
|
|
3571
|
-
transferAccessibilityAttributes(this, this.$el);
|
|
4034
|
+
transferAccessibilityAttributes(this, this.$el, true);
|
|
3572
4035
|
if (this.$el.type === "submit") {
|
|
3573
4036
|
this.addEventListener("click", (event) => {
|
|
3574
4037
|
var _a;
|
|
@@ -3584,6 +4047,8 @@ const _Button = class _Button extends PxElement {
|
|
|
3584
4047
|
});
|
|
3585
4048
|
}
|
|
3586
4049
|
}
|
|
4050
|
+
disconnectedCallback() {
|
|
4051
|
+
}
|
|
3587
4052
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3588
4053
|
if (oldValue !== newValue) {
|
|
3589
4054
|
switch (attrName) {
|
|
@@ -3603,6 +4068,9 @@ const _Button = class _Button extends PxElement {
|
|
|
3603
4068
|
case "loading":
|
|
3604
4069
|
this.updateLoading();
|
|
3605
4070
|
break;
|
|
4071
|
+
case "disabled":
|
|
4072
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4073
|
+
break;
|
|
3606
4074
|
case "shape":
|
|
3607
4075
|
case "shape--mobile":
|
|
3608
4076
|
case "shape--tablet":
|
|
@@ -3651,7 +4119,7 @@ const _Button = class _Button extends PxElement {
|
|
|
3651
4119
|
this._toggleClass(oldValue, newValue);
|
|
3652
4120
|
if (!this.checkName(variantValues, newValue)) {
|
|
3653
4121
|
log(
|
|
3654
|
-
|
|
4122
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${variantValues.join('", "')}".`
|
|
3655
4123
|
);
|
|
3656
4124
|
}
|
|
3657
4125
|
}
|
|
@@ -3660,7 +4128,7 @@ const _Button = class _Button extends PxElement {
|
|
|
3660
4128
|
this._toggleClass(oldValue, newValue);
|
|
3661
4129
|
if (!this.checkName(values, newValue)) {
|
|
3662
4130
|
log(
|
|
3663
|
-
|
|
4131
|
+
`"${newValue}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${values.join('", "')}".`
|
|
3664
4132
|
);
|
|
3665
4133
|
}
|
|
3666
4134
|
}
|
|
@@ -3684,7 +4152,7 @@ const _Button = class _Button extends PxElement {
|
|
|
3684
4152
|
updateShape(attrName, newValue, attrValue) {
|
|
3685
4153
|
if (!checkName(attrValue, newValue)) {
|
|
3686
4154
|
log(
|
|
3687
|
-
|
|
4155
|
+
`"${newValue}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3688
4156
|
);
|
|
3689
4157
|
return;
|
|
3690
4158
|
}
|
|
@@ -3786,21 +4254,78 @@ const _Button = class _Button extends PxElement {
|
|
|
3786
4254
|
this.removeAttribute("aria-expanded");
|
|
3787
4255
|
}
|
|
3788
4256
|
}
|
|
4257
|
+
get size() {
|
|
4258
|
+
return this.getAttribute("size") || "";
|
|
4259
|
+
}
|
|
4260
|
+
set size(value) {
|
|
4261
|
+
this.setAttribute("size", value);
|
|
4262
|
+
}
|
|
3789
4263
|
};
|
|
3790
4264
|
_Button.nativeName = "button";
|
|
3791
4265
|
let Button = _Button;
|
|
3792
4266
|
if (!customElements.get("px-button")) {
|
|
3793
4267
|
customElements.define("px-button", Button);
|
|
3794
4268
|
}
|
|
3795
|
-
|
|
4269
|
+
class ButtonWrapper extends Button {
|
|
4270
|
+
constructor() {
|
|
4271
|
+
super();
|
|
4272
|
+
__privateAdd(this, _ButtonWrapper_instances);
|
|
4273
|
+
__privateAdd(this, _wrappedInteractiveStateController);
|
|
4274
|
+
this.$el.classList.remove("btn");
|
|
4275
|
+
this.$el.classList.add("wrapper");
|
|
4276
|
+
__privateSet(this, _wrappedInteractiveStateController, new WrappedInteractiveStateController(
|
|
4277
|
+
this,
|
|
4278
|
+
this.$el,
|
|
4279
|
+
() => __privateMethod(this, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn).call(this)
|
|
4280
|
+
));
|
|
4281
|
+
}
|
|
4282
|
+
connectedCallback() {
|
|
4283
|
+
super.connectedCallback();
|
|
4284
|
+
__privateGet(this, _wrappedInteractiveStateController).connect();
|
|
4285
|
+
}
|
|
4286
|
+
disconnectedCallback() {
|
|
4287
|
+
super.disconnectedCallback();
|
|
4288
|
+
__privateGet(this, _wrappedInteractiveStateController).disconnect();
|
|
4289
|
+
}
|
|
4290
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4291
|
+
if (oldValue !== newValue) {
|
|
4292
|
+
switch (attrName) {
|
|
4293
|
+
case "loading":
|
|
4294
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4295
|
+
if (newValue !== null) {
|
|
4296
|
+
__privateGet(this, _wrappedInteractiveStateController).clearInteractiveState();
|
|
4297
|
+
}
|
|
4298
|
+
break;
|
|
4299
|
+
case "disabled":
|
|
4300
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4301
|
+
if (newValue !== null) {
|
|
4302
|
+
__privateGet(this, _wrappedInteractiveStateController).clearInteractiveState();
|
|
4303
|
+
}
|
|
4304
|
+
break;
|
|
4305
|
+
default:
|
|
4306
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4307
|
+
break;
|
|
4308
|
+
}
|
|
4309
|
+
}
|
|
4310
|
+
}
|
|
4311
|
+
}
|
|
4312
|
+
_wrappedInteractiveStateController = new WeakMap();
|
|
4313
|
+
_ButtonWrapper_instances = new WeakSet();
|
|
4314
|
+
canSetWrappedInteractiveState_fn = function() {
|
|
4315
|
+
return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
|
|
4316
|
+
};
|
|
4317
|
+
if (!customElements.get("px-button-wrapper")) {
|
|
4318
|
+
customElements.define("px-button-wrapper", ButtonWrapper);
|
|
4319
|
+
}
|
|
4320
|
+
const styles$2 = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
|
|
3796
4321
|
const styleSheet = new CSSStyleSheet();
|
|
3797
4322
|
styleSheet.replaceSync(styles$2);
|
|
3798
|
-
class Section extends
|
|
4323
|
+
class Section extends WithExtraAttributes {
|
|
3799
4324
|
constructor() {
|
|
3800
|
-
super();
|
|
4325
|
+
super(styleSheet);
|
|
3801
4326
|
this.template = () => `
|
|
3802
|
-
<px-container border-radius="none" padding-inline="none"
|
|
3803
|
-
<div class="content-wrapper
|
|
4327
|
+
<px-container border-radius="none" padding-inline="none">
|
|
4328
|
+
<div class="content-wrapper">
|
|
3804
4329
|
<px-vstack gap="heading-to-content">
|
|
3805
4330
|
<slot name="heading"></slot>
|
|
3806
4331
|
<px-vstack gap="none">
|
|
@@ -3813,21 +4338,27 @@ class Section extends HTMLElement {
|
|
|
3813
4338
|
<slot name="overlap"></slot>
|
|
3814
4339
|
</div>
|
|
3815
4340
|
`;
|
|
3816
|
-
this.attachShadow({ mode: "open" });
|
|
3817
4341
|
this.shadowRoot.innerHTML = this.template();
|
|
3818
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
3819
4342
|
}
|
|
3820
4343
|
connectedCallback() {
|
|
3821
|
-
|
|
4344
|
+
var _a, _b;
|
|
4345
|
+
this.$container.setAttribute("background-color", this.backgroundColor);
|
|
3822
4346
|
if (!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop) {
|
|
3823
4347
|
this.$container.paddingBlock = "none";
|
|
3824
4348
|
}
|
|
3825
|
-
|
|
3826
|
-
|
|
3827
|
-
|
|
4349
|
+
this.setHeadingSpacing = this.setHeadingSpacing.bind(this);
|
|
4350
|
+
this.setHeadingSpacing();
|
|
4351
|
+
(_a = this.$slotHeading) == null ? void 0 : _a.addEventListener("slotchange", this.setHeadingSpacing);
|
|
4352
|
+
this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this);
|
|
4353
|
+
this.toggleOverlapSpacing();
|
|
4354
|
+
(_b = this.$slotOverlap) == null ? void 0 : _b.addEventListener(
|
|
4355
|
+
"slotchange",
|
|
4356
|
+
this.toggleOverlapSpacing
|
|
4357
|
+
);
|
|
3828
4358
|
}
|
|
3829
4359
|
static get observedAttributes() {
|
|
3830
4360
|
return [
|
|
4361
|
+
...super.observedAttributes,
|
|
3831
4362
|
"background-color",
|
|
3832
4363
|
"background-gradient",
|
|
3833
4364
|
"background-image",
|
|
@@ -3855,9 +4386,6 @@ class Section extends HTMLElement {
|
|
|
3855
4386
|
"border-side--laptop"
|
|
3856
4387
|
];
|
|
3857
4388
|
}
|
|
3858
|
-
get $container() {
|
|
3859
|
-
return this.shadowRoot.querySelector("px-container");
|
|
3860
|
-
}
|
|
3861
4389
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
3862
4390
|
if (oldValue !== newValue) {
|
|
3863
4391
|
switch (name) {
|
|
@@ -3936,12 +4464,77 @@ class Section extends HTMLElement {
|
|
|
3936
4464
|
case "border-side--laptop":
|
|
3937
4465
|
this.$container.borderSideLaptop = newValue;
|
|
3938
4466
|
break;
|
|
4467
|
+
default:
|
|
4468
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
4469
|
+
break;
|
|
4470
|
+
}
|
|
4471
|
+
}
|
|
4472
|
+
}
|
|
4473
|
+
disconnectedCallback() {
|
|
4474
|
+
var _a, _b;
|
|
4475
|
+
(_a = this.$slotHeading) == null ? void 0 : _a.removeEventListener(
|
|
4476
|
+
"slotchange",
|
|
4477
|
+
this.setHeadingSpacing
|
|
4478
|
+
);
|
|
4479
|
+
(_b = this.$slotOverlap) == null ? void 0 : _b.removeEventListener(
|
|
4480
|
+
"slotchange",
|
|
4481
|
+
this.toggleOverlapSpacing
|
|
4482
|
+
);
|
|
4483
|
+
}
|
|
4484
|
+
toggleOverlapSpacing() {
|
|
4485
|
+
const overlapSlot = this.$slotOverlap;
|
|
4486
|
+
const mainContentWrapper = this.$mainContentWrapper;
|
|
4487
|
+
if (!overlapSlot || !mainContentWrapper) return;
|
|
4488
|
+
const assignedNodes = overlapSlot.assignedNodes({ flatten: true });
|
|
4489
|
+
const hasOverlapContent = assignedNodes.some(this.isNotEmptyNode);
|
|
4490
|
+
mainContentWrapper.classList.toggle("overlapped", hasOverlapContent);
|
|
4491
|
+
}
|
|
4492
|
+
isNotEmptyNode(node) {
|
|
4493
|
+
if (node.nodeType === Node.ELEMENT_NODE) return true;
|
|
4494
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
4495
|
+
return (node.textContent ?? "").trim().length > 0;
|
|
4496
|
+
}
|
|
4497
|
+
return false;
|
|
4498
|
+
}
|
|
4499
|
+
setHeadingSpacing() {
|
|
4500
|
+
var _a;
|
|
4501
|
+
const headingSlot = this.$slotHeading;
|
|
4502
|
+
const vStack = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-vstack");
|
|
4503
|
+
if (headingSlot && vStack) {
|
|
4504
|
+
const hasHeadingContent = headingSlot.assignedElements().length > 0;
|
|
4505
|
+
if (hasHeadingContent) {
|
|
4506
|
+
vStack.setAttribute("gap", "heading-to-content");
|
|
4507
|
+
} else {
|
|
4508
|
+
vStack.setAttribute("gap", "none");
|
|
3939
4509
|
}
|
|
3940
4510
|
}
|
|
3941
4511
|
}
|
|
4512
|
+
get $container() {
|
|
4513
|
+
var _a;
|
|
4514
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-container");
|
|
4515
|
+
}
|
|
4516
|
+
get $mainContentWrapper() {
|
|
4517
|
+
var _a;
|
|
4518
|
+
return (_a = this.$container) == null ? void 0 : _a.querySelector(".content-wrapper");
|
|
4519
|
+
}
|
|
3942
4520
|
get $slotOverlap() {
|
|
4521
|
+
var _a;
|
|
4522
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
4523
|
+
'slot[name="overlap"]'
|
|
4524
|
+
);
|
|
4525
|
+
}
|
|
4526
|
+
get $slottedOverlap() {
|
|
3943
4527
|
return this.querySelector('[slot="overlap"]');
|
|
3944
4528
|
}
|
|
4529
|
+
get $slotHeading() {
|
|
4530
|
+
var _a;
|
|
4531
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
4532
|
+
'slot[name="heading"]'
|
|
4533
|
+
);
|
|
4534
|
+
}
|
|
4535
|
+
get $slottedHeading() {
|
|
4536
|
+
return this.querySelector('[slot="heading"]');
|
|
4537
|
+
}
|
|
3945
4538
|
get backgroundColor() {
|
|
3946
4539
|
return this.getAttribute("background-color") || "none";
|
|
3947
4540
|
}
|
|
@@ -4096,7 +4689,7 @@ class Section extends HTMLElement {
|
|
|
4096
4689
|
if (!customElements.get("px-section")) {
|
|
4097
4690
|
customElements.define("px-section", Section);
|
|
4098
4691
|
}
|
|
4099
|
-
const styles$1 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:
|
|
4692
|
+
const styles$1 = ":host{display:block;height:100%}:host *{box-sizing:border-box}button,a{display:flex;flex-direction:column;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:var(--px-padding-m-mobile) 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:var(--px-size-border-m) 0 0 0;height:calc(100% - var(--px-size-border-m));border:0;border-bottom:var(--px-size-border-m) solid transparent;outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media screen and (min-width: 48rem){button,a{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-m-tablet) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){button,a{font-size:var(--px-text-size-label-m-laptop);padding:var(--px-padding-m-laptop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){button,a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-m-desktop) 0}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
4100
4693
|
const stylesheet$1 = new CSSStyleSheet();
|
|
4101
4694
|
stylesheet$1.replaceSync(styles$1);
|
|
4102
4695
|
class HeaderItem extends WithExtraAttributes {
|
|
@@ -4109,15 +4702,15 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4109
4702
|
this.shadowRoot.innerHTML = this.template();
|
|
4110
4703
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
4111
4704
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4112
|
-
this.role = "listitem";
|
|
4113
4705
|
if (this.internals) {
|
|
4114
4706
|
this.internals.role = "listitem";
|
|
4115
4707
|
}
|
|
4116
4708
|
}
|
|
4117
4709
|
static get observedAttributes() {
|
|
4118
|
-
return ["for", "href"];
|
|
4710
|
+
return ["for", "href", "current"];
|
|
4119
4711
|
}
|
|
4120
4712
|
connectedCallback() {
|
|
4713
|
+
this.role = "listitem";
|
|
4121
4714
|
this.setAttribute("slot", "header-entries");
|
|
4122
4715
|
if (this.$button) {
|
|
4123
4716
|
this.setupButtonA11y();
|
|
@@ -4136,9 +4729,9 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4136
4729
|
}
|
|
4137
4730
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
4138
4731
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
4139
|
-
if (name === "href" &&
|
|
4732
|
+
if (name === "href" && oldValue !== newValue) {
|
|
4140
4733
|
this.shadowRoot.innerHTML = this.template();
|
|
4141
|
-
} else if (name === "for" && this.$button
|
|
4734
|
+
} else if (name === "for" && oldValue !== newValue && this.$button) {
|
|
4142
4735
|
this.shadowRoot.innerHTML = this.template();
|
|
4143
4736
|
this.setupButtonA11y();
|
|
4144
4737
|
}
|
|
@@ -4173,6 +4766,16 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4173
4766
|
this.$button.setAttribute("aria-controls", this.for);
|
|
4174
4767
|
}
|
|
4175
4768
|
}
|
|
4769
|
+
get current() {
|
|
4770
|
+
return this.hasAttribute("current");
|
|
4771
|
+
}
|
|
4772
|
+
set current(value) {
|
|
4773
|
+
if (value) {
|
|
4774
|
+
this.setAttribute("current", "");
|
|
4775
|
+
} else {
|
|
4776
|
+
this.removeAttribute("current");
|
|
4777
|
+
}
|
|
4778
|
+
}
|
|
4176
4779
|
get $button() {
|
|
4177
4780
|
return this.shadowRoot.querySelector("button");
|
|
4178
4781
|
}
|
|
@@ -4197,7 +4800,8 @@ const linkVariantValues = [
|
|
|
4197
4800
|
"btn-default",
|
|
4198
4801
|
"btn-secondary",
|
|
4199
4802
|
"btn-tertiary",
|
|
4200
|
-
"icon-link"
|
|
4803
|
+
"icon-link",
|
|
4804
|
+
"wrapper"
|
|
4201
4805
|
];
|
|
4202
4806
|
const linkShapeValues = ["", "default", "alternative"];
|
|
4203
4807
|
const _Link = class _Link extends PxElement {
|
|
@@ -4239,6 +4843,8 @@ const _Link = class _Link extends PxElement {
|
|
|
4239
4843
|
}
|
|
4240
4844
|
transferAccessibilityAttributes(this, this.$el, false);
|
|
4241
4845
|
}
|
|
4846
|
+
disconnectedCallback() {
|
|
4847
|
+
}
|
|
4242
4848
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4243
4849
|
if (oldValue !== newValue) {
|
|
4244
4850
|
switch (attrName) {
|
|
@@ -4323,17 +4929,14 @@ const _Link = class _Link extends PxElement {
|
|
|
4323
4929
|
}
|
|
4324
4930
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
4325
4931
|
log(
|
|
4326
|
-
|
|
4932
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
|
|
4327
4933
|
);
|
|
4328
4934
|
}
|
|
4329
|
-
if (newValue === "icon-link") {
|
|
4330
|
-
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
4331
|
-
}
|
|
4332
4935
|
}
|
|
4333
4936
|
updateShape(attrName, newValue, attrValue) {
|
|
4334
4937
|
if (!checkName(attrValue, newValue)) {
|
|
4335
4938
|
log(
|
|
4336
|
-
|
|
4939
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4337
4940
|
);
|
|
4338
4941
|
return;
|
|
4339
4942
|
}
|
|
@@ -4350,7 +4953,7 @@ const _Link = class _Link extends PxElement {
|
|
|
4350
4953
|
}
|
|
4351
4954
|
if (!this.checkName(attrValue, newValue)) {
|
|
4352
4955
|
log(
|
|
4353
|
-
|
|
4956
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4354
4957
|
);
|
|
4355
4958
|
}
|
|
4356
4959
|
}
|
|
@@ -4484,10 +5087,54 @@ let Link = _Link;
|
|
|
4484
5087
|
if (!customElements.get("px-a")) {
|
|
4485
5088
|
customElements.define("px-a", Link);
|
|
4486
5089
|
}
|
|
5090
|
+
class LinkWrapper extends Link {
|
|
5091
|
+
constructor() {
|
|
5092
|
+
super();
|
|
5093
|
+
__privateAdd(this, _LinkWrapper_instances);
|
|
5094
|
+
__privateAdd(this, _wrappedInteractiveStateController2);
|
|
5095
|
+
this.$el.classList.add("wrapper");
|
|
5096
|
+
__privateSet(this, _wrappedInteractiveStateController2, new WrappedInteractiveStateController(
|
|
5097
|
+
this,
|
|
5098
|
+
this.$el,
|
|
5099
|
+
() => __privateMethod(this, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2).call(this)
|
|
5100
|
+
));
|
|
5101
|
+
}
|
|
5102
|
+
connectedCallback() {
|
|
5103
|
+
super.connectedCallback();
|
|
5104
|
+
__privateGet(this, _wrappedInteractiveStateController2).connect();
|
|
5105
|
+
}
|
|
5106
|
+
disconnectedCallback() {
|
|
5107
|
+
super.disconnectedCallback();
|
|
5108
|
+
__privateGet(this, _wrappedInteractiveStateController2).disconnect();
|
|
5109
|
+
}
|
|
5110
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5111
|
+
if (oldValue !== newValue) {
|
|
5112
|
+
switch (attrName) {
|
|
5113
|
+
case "disabled":
|
|
5114
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5115
|
+
if (newValue !== null) {
|
|
5116
|
+
__privateGet(this, _wrappedInteractiveStateController2).clearInteractiveState();
|
|
5117
|
+
}
|
|
5118
|
+
break;
|
|
5119
|
+
default:
|
|
5120
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5121
|
+
break;
|
|
5122
|
+
}
|
|
5123
|
+
}
|
|
5124
|
+
}
|
|
5125
|
+
}
|
|
5126
|
+
_wrappedInteractiveStateController2 = new WeakMap();
|
|
5127
|
+
_LinkWrapper_instances = new WeakSet();
|
|
5128
|
+
canSetWrappedInteractiveState_fn2 = function() {
|
|
5129
|
+
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
5130
|
+
};
|
|
5131
|
+
if (!customElements.get("px-a-wrapper")) {
|
|
5132
|
+
customElements.define("px-a-wrapper", LinkWrapper);
|
|
5133
|
+
}
|
|
4487
5134
|
class MDDLink extends HTMLElement {
|
|
4488
5135
|
constructor() {
|
|
4489
5136
|
super();
|
|
4490
|
-
this.template = `<px-a font-weight="title" font-size="body-
|
|
5137
|
+
this.template = `<px-a font-weight="title" font-size="body-m" color="brand" variant="no-style">
|
|
4491
5138
|
<slot></slot>
|
|
4492
5139
|
</px-a>`;
|
|
4493
5140
|
this.attachShadow({ mode: "open" });
|
|
@@ -4503,7 +5150,7 @@ class MDDLink extends HTMLElement {
|
|
|
4503
5150
|
if (!customElements.get("px-mdd-a")) {
|
|
4504
5151
|
customElements.define("px-mdd-a", MDDLink);
|
|
4505
5152
|
}
|
|
4506
|
-
const styles =
|
|
5153
|
+
const styles = '#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#primary-navigation div,#primary-navigation px-hstack{height:100%}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}::slotted([slot="header-logo"]){--px-size-icon-l: 1.9rem;--px-size-icon-xl: 1.9rem}@media screen and (min-width: 64.0625rem){#primary-navigation{display:block}#panel-container{top:auto}#dropdown-zone--desktop{display:flex;justify-content:space-between;align-items:center}#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-laptop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-laptop)}::slotted([slot="header-logo"]){--px-size-icon-l: 3.2rem;--px-size-icon-xl: 3.2rem;margin-left:-.1rem}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop ::slotted([slot="target-group"]),#dropdown-zone--desktop ::slotted([slot="user-language"]){margin-bottom:var(--px-spacing-s-desktop)}::slotted([slot="header-actions"]){margin-bottom:var(--px-padding-s-desktop)}}';
|
|
4507
5154
|
function isObject(value) {
|
|
4508
5155
|
var type = typeof value;
|
|
4509
5156
|
return value != null && (type == "object" || type == "function");
|
|
@@ -4702,14 +5349,21 @@ class Header extends WithExtraAttributes {
|
|
|
4702
5349
|
<div>
|
|
4703
5350
|
<header>
|
|
4704
5351
|
<slot name="skip"></slot>
|
|
4705
|
-
<px-section
|
|
4706
|
-
|
|
4707
|
-
|
|
5352
|
+
<px-section
|
|
5353
|
+
id="navigation-container"
|
|
5354
|
+
padding-bottom="none" padding-bottom--mobile="s" padding-bottom--tablet="s"
|
|
5355
|
+
padding-top="s"
|
|
5356
|
+
background-color="none"
|
|
5357
|
+
>
|
|
5358
|
+
<div id="dropdown-zone--desktop">
|
|
4708
5359
|
<slot name="target-group"></slot>
|
|
4709
5360
|
<px-spacer></px-spacer>
|
|
4710
5361
|
<slot name="user-language"></slot>
|
|
4711
|
-
</
|
|
4712
|
-
<px-hstack gap="default" wrap="wrap"
|
|
5362
|
+
</div>
|
|
5363
|
+
<px-hstack gap="default" wrap="wrap" id="navigation-wrapper">
|
|
5364
|
+
<px-hstack align-items="center">
|
|
5365
|
+
<slot name="header-logo"></slot>
|
|
5366
|
+
</px-hstack>
|
|
4713
5367
|
<slot name="header-logo"></slot>
|
|
4714
5368
|
<nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
|
|
4715
5369
|
<div role="list">
|
|
@@ -4719,12 +5373,13 @@ class Header extends WithExtraAttributes {
|
|
|
4719
5373
|
</div>
|
|
4720
5374
|
</nav>
|
|
4721
5375
|
<px-spacer></px-spacer>
|
|
4722
|
-
<px-hstack
|
|
5376
|
+
<px-hstack align-items="center" gap="xs">
|
|
4723
5377
|
<slot name="header-actions"></slot>
|
|
4724
|
-
<px-button-icon
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
5378
|
+
<px-button-icon
|
|
5379
|
+
id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
|
|
5380
|
+
aria-expanded="false" hidden--laptop hidden--desktop
|
|
5381
|
+
>
|
|
5382
|
+
<px-icon name="burger_menu" from="lavender" size="m"></px-icon>
|
|
4728
5383
|
</px-button-icon>
|
|
4729
5384
|
</px-hstack>
|
|
4730
5385
|
</px-hstack>
|
|
@@ -4739,19 +5394,19 @@ class Header extends WithExtraAttributes {
|
|
|
4739
5394
|
</div>
|
|
4740
5395
|
`;
|
|
4741
5396
|
__privateSet(this, _onResize, () => {
|
|
4742
|
-
if (window.innerWidth >=
|
|
5397
|
+
if (window.innerWidth >= 1024) {
|
|
4743
5398
|
__privateMethod(this, _Header_instances, hideMobileMenu_fn).call(this);
|
|
4744
5399
|
__privateMethod(this, _Header_instances, setMDDDialogOffset_fn).call(this);
|
|
4745
5400
|
}
|
|
4746
5401
|
});
|
|
4747
5402
|
this.shadowRoot.innerHTML = this.template;
|
|
4748
5403
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4749
|
-
this.role = "navigation";
|
|
4750
5404
|
if (this.internals) {
|
|
4751
5405
|
this.internals.role = "navigation";
|
|
4752
5406
|
}
|
|
4753
5407
|
}
|
|
4754
5408
|
connectedCallback() {
|
|
5409
|
+
this.role = "navigation";
|
|
4755
5410
|
this.addEventListener("click", (event) => {
|
|
4756
5411
|
const targetElement = event.target.closest(
|
|
4757
5412
|
"px-header-item"
|
|
@@ -4786,11 +5441,9 @@ class Header extends WithExtraAttributes {
|
|
|
4786
5441
|
});
|
|
4787
5442
|
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4788
5443
|
});
|
|
4789
|
-
this.
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4793
|
-
}
|
|
5444
|
+
this.$burgerMenu.addEventListener("click", () => {
|
|
5445
|
+
this.$burgerMenu.setAttribute("aria-expanded", "true");
|
|
5446
|
+
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4794
5447
|
});
|
|
4795
5448
|
this.addEventListener("close-panel", () => {
|
|
4796
5449
|
__privateMethod(this, _Header_instances, hidePanel_fn).call(this);
|
|
@@ -4853,7 +5506,7 @@ class Header extends WithExtraAttributes {
|
|
|
4853
5506
|
return this.shadowRoot.querySelector("#backdrop-filter");
|
|
4854
5507
|
}
|
|
4855
5508
|
get $burgerMenu() {
|
|
4856
|
-
return this.shadowRoot.querySelector("
|
|
5509
|
+
return this.shadowRoot.querySelector("#burger-menu");
|
|
4857
5510
|
}
|
|
4858
5511
|
get $slotMain() {
|
|
4859
5512
|
return this.querySelector('[slot="main"]');
|
|
@@ -4949,8 +5602,13 @@ hideMobileMenu_fn = function() {
|
|
|
4949
5602
|
if (__privateGet(this, _Header_instances, $mobileMenu_get)) {
|
|
4950
5603
|
__privateGet(this, _Header_instances, $mobileMenu_get).$megaDropDown.hidden = true;
|
|
4951
5604
|
this.$burgerMenu.setAttribute("aria-expanded", "false");
|
|
4952
|
-
|
|
4953
|
-
|
|
5605
|
+
const anyMDDOpen = Array.from(__privateGet(this, _Header_instances, $megaDropdowns_get)).some(
|
|
5606
|
+
(mdd) => !mdd.hidden
|
|
5607
|
+
);
|
|
5608
|
+
if (!anyMDDOpen) {
|
|
5609
|
+
document.body.style.overflow = "auto";
|
|
5610
|
+
this.$backdropFilter.style.display = "none";
|
|
5611
|
+
}
|
|
4954
5612
|
}
|
|
4955
5613
|
};
|
|
4956
5614
|
hidePanel_fn = function() {
|
|
@@ -4979,8 +5637,8 @@ $megaDropdowns_get = function() {
|
|
|
4979
5637
|
if (!customElements.get("px-header")) {
|
|
4980
5638
|
customElements.define("px-header", Header);
|
|
4981
5639
|
}
|
|
4982
|
-
const contentHeaderCss =
|
|
4983
|
-
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media
|
|
5640
|
+
const contentHeaderCss = ':host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;z-index:2;position:relative;box-sizing:border-box}.content-header-content ::slotted([slot="patch"]){margin-top:var(--px-spacing-l-mobile)}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media screen and (min-width: 48rem){.content-header-content ::slotted([slot="patch"]){flex-shrink:0}.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-tablet)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media screen and (min-width: 64.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}@media screen and (min-width: 90.0625rem){.content-header-content ::slotted([slot="patch"]),.content-header-content ::slotted([slot="patch-description"]){margin-top:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--desktop) - (var(--px-spacing-l-desktop) * 2))}}';
|
|
5641
|
+
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (max-width: 47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (min-width: 48rem) and (max-width: 64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (min-width: 64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
4984
5642
|
const gridStyles = new CSSStyleSheet();
|
|
4985
5643
|
gridStyles.replaceSync(gridCss);
|
|
4986
5644
|
const gridColsValues = [
|
|
@@ -5114,7 +5772,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
5114
5772
|
updateGap(oldValue, newValue, attrValue) {
|
|
5115
5773
|
if (!this.checkName(attrValue, newValue)) {
|
|
5116
5774
|
log(
|
|
5117
|
-
|
|
5775
|
+
`"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
5118
5776
|
);
|
|
5119
5777
|
return;
|
|
5120
5778
|
}
|
|
@@ -5140,7 +5798,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
5140
5798
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
5141
5799
|
if (!this.checkName(attrValues, newValue)) {
|
|
5142
5800
|
log(
|
|
5143
|
-
|
|
5801
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
5144
5802
|
);
|
|
5145
5803
|
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
|
|
5146
5804
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
@@ -5335,21 +5993,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5335
5993
|
this.template = () => `<div class="content-header">
|
|
5336
5994
|
<div class="contrast-helper"></div>
|
|
5337
5995
|
<px-section padding-block="l">
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5996
|
+
<px-grid gap="none">
|
|
5997
|
+
<px-container padding="none" border-radius="none" background-color="none" >
|
|
5998
|
+
<div class="content-header-content">
|
|
5999
|
+
<px-vstack gap="heading-to-subtitle">
|
|
6000
|
+
<px-h1><slot></slot></px-h1>
|
|
6001
|
+
<slot name="subtitle"></slot>
|
|
6002
|
+
</px-vstack>
|
|
6003
|
+
<px-stack gap="s" direction="row" direction--mobile="column">
|
|
6004
|
+
<slot name="patch" shrink></slot>
|
|
6005
|
+
<slot name="patch-description"></slot>
|
|
6006
|
+
</px-stack>
|
|
6007
|
+
</div>
|
|
6008
|
+
</px-container>
|
|
6009
|
+
</px-grid>
|
|
6010
|
+
<slot name="overlap" slot="overlap"></slot>
|
|
5353
6011
|
</px-section>
|
|
5354
6012
|
</div>`;
|
|
5355
6013
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -5371,27 +6029,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5371
6029
|
"has-gridding--mobile",
|
|
5372
6030
|
"has-gridding--tablet",
|
|
5373
6031
|
"has-gridding--laptop",
|
|
6032
|
+
"has-gridding--desktop",
|
|
5374
6033
|
"inverted"
|
|
5375
6034
|
];
|
|
5376
6035
|
}
|
|
5377
6036
|
connectedCallback() {
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
5384
|
-
}
|
|
5385
|
-
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
5386
|
-
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
5387
|
-
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
5388
|
-
this.$patchDescriptionSlot.removeAttribute("color");
|
|
5389
|
-
}
|
|
5390
|
-
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
5391
|
-
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
5392
|
-
}
|
|
5393
|
-
}
|
|
6037
|
+
var _a, _b;
|
|
6038
|
+
this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
|
|
6039
|
+
this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
|
|
6040
|
+
this.styleSubtitleSlot();
|
|
6041
|
+
this.stylepatchDescriptionSlotted();
|
|
5394
6042
|
this.createGridding();
|
|
6043
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
|
|
6044
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
|
|
6045
|
+
"slotchange",
|
|
6046
|
+
this.stylepatchDescriptionSlotted
|
|
6047
|
+
);
|
|
5395
6048
|
}
|
|
5396
6049
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5397
6050
|
if (oldValue !== newValue) {
|
|
@@ -5424,6 +6077,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5424
6077
|
case "has-gridding--mobile":
|
|
5425
6078
|
case "has-gridding--tablet":
|
|
5426
6079
|
case "has-gridding--laptop":
|
|
6080
|
+
case "has-gridding--desktop":
|
|
5427
6081
|
this.createGridding(newValue);
|
|
5428
6082
|
break;
|
|
5429
6083
|
case "inverted":
|
|
@@ -5441,6 +6095,37 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5441
6095
|
}
|
|
5442
6096
|
}
|
|
5443
6097
|
}
|
|
6098
|
+
disconnectedCallback() {
|
|
6099
|
+
var _a, _b;
|
|
6100
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
|
|
6101
|
+
"slotchange",
|
|
6102
|
+
this.styleSubtitleSlot
|
|
6103
|
+
);
|
|
6104
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
|
|
6105
|
+
"slotchange",
|
|
6106
|
+
this.stylepatchDescriptionSlotted
|
|
6107
|
+
);
|
|
6108
|
+
}
|
|
6109
|
+
stylepatchDescriptionSlotted() {
|
|
6110
|
+
if (this.$patchDescriptionSlotted) {
|
|
6111
|
+
if (this.$patchDescriptionSlotted.localName === "px-p") {
|
|
6112
|
+
this.$patchDescriptionSlotted.setAttribute("variant", "default");
|
|
6113
|
+
}
|
|
6114
|
+
if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
|
|
6115
|
+
this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
|
|
6116
|
+
this.$patchDescriptionSlotted.removeAttribute("font-weight");
|
|
6117
|
+
this.$patchDescriptionSlotted.removeAttribute("color");
|
|
6118
|
+
}
|
|
6119
|
+
if (this.$patchDescriptionSlotted.localName === "px-price") {
|
|
6120
|
+
this.$patchDescriptionSlotted.setAttribute("size", "m");
|
|
6121
|
+
}
|
|
6122
|
+
}
|
|
6123
|
+
}
|
|
6124
|
+
styleSubtitleSlot() {
|
|
6125
|
+
if (this.$subtitleSlotted) {
|
|
6126
|
+
this.$subtitleSlotted.setAttribute("variant", "subtitle");
|
|
6127
|
+
}
|
|
6128
|
+
}
|
|
5444
6129
|
createGridding(value) {
|
|
5445
6130
|
const breakpoints = [
|
|
5446
6131
|
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
@@ -5458,6 +6143,11 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5458
6143
|
prop: "hasGriddingLaptop",
|
|
5459
6144
|
gridAttr: "grid-cols--laptop",
|
|
5460
6145
|
attr: "col-span--laptop"
|
|
6146
|
+
},
|
|
6147
|
+
{
|
|
6148
|
+
prop: "hasGriddingDesktop",
|
|
6149
|
+
gridAttr: "grid-cols--desktop",
|
|
6150
|
+
attr: "col-span--desktop"
|
|
5461
6151
|
}
|
|
5462
6152
|
];
|
|
5463
6153
|
const spanElement = this.shadowRoot.querySelector(
|
|
@@ -5466,8 +6156,8 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5466
6156
|
if (value !== null) {
|
|
5467
6157
|
breakpoints.forEach(({ prop, gridAttr, attr }) => {
|
|
5468
6158
|
if (this[prop]) {
|
|
5469
|
-
this.$grid.setAttribute(gridAttr, "
|
|
5470
|
-
spanElement == null ? void 0 : spanElement.setAttribute(attr, "
|
|
6159
|
+
this.$grid.setAttribute(gridAttr, "2");
|
|
6160
|
+
spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
|
|
5471
6161
|
}
|
|
5472
6162
|
});
|
|
5473
6163
|
} else {
|
|
@@ -5487,9 +6177,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5487
6177
|
return this.shadowRoot.querySelector("px-h1");
|
|
5488
6178
|
}
|
|
5489
6179
|
get $subtitleSlot() {
|
|
6180
|
+
var _a;
|
|
6181
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6182
|
+
'slot[name="subtitle"]'
|
|
6183
|
+
);
|
|
6184
|
+
}
|
|
6185
|
+
get $subtitleSlotted() {
|
|
5490
6186
|
return this.querySelector('[slot="subtitle"]');
|
|
5491
6187
|
}
|
|
5492
6188
|
get $patchDescriptionSlot() {
|
|
6189
|
+
var _a;
|
|
6190
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6191
|
+
'slot[name="patch-description"]'
|
|
6192
|
+
);
|
|
6193
|
+
}
|
|
6194
|
+
get $patchDescriptionSlotted() {
|
|
5493
6195
|
return this.querySelector('[slot="patch-description"]');
|
|
5494
6196
|
}
|
|
5495
6197
|
get $overlapSlot() {
|
|
@@ -5606,6 +6308,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5606
6308
|
this.removeAttribute("has-gridding--laptop");
|
|
5607
6309
|
}
|
|
5608
6310
|
}
|
|
6311
|
+
get hasGriddingDesktop() {
|
|
6312
|
+
return this.hasAttribute("has-gridding--desktop");
|
|
6313
|
+
}
|
|
6314
|
+
set hasGriddingDesktop(value) {
|
|
6315
|
+
if (value) {
|
|
6316
|
+
this.setAttribute("has-gridding--desktop", "");
|
|
6317
|
+
} else {
|
|
6318
|
+
this.removeAttribute("has-gridding--desktop");
|
|
6319
|
+
}
|
|
6320
|
+
}
|
|
5609
6321
|
get inverted() {
|
|
5610
6322
|
return this.hasAttribute("inverted");
|
|
5611
6323
|
}
|
|
@@ -5641,5 +6353,6 @@ export {
|
|
|
5641
6353
|
Typography,
|
|
5642
6354
|
contentAlignmentValues,
|
|
5643
6355
|
gridColsValues,
|
|
5644
|
-
itemsAlignmentValues
|
|
6356
|
+
itemsAlignmentValues,
|
|
6357
|
+
statusValues
|
|
5645
6358
|
};
|