@proximus/lavender-light 2.0.0-alpha.14 → 2.0.0-alpha.140
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 +1038 -267
- package/dist/lavender-light.umd.js +1 -1
- package/package.json +1 -1
|
@@ -6,12 +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:
|
|
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" };
|
|
15
16
|
function getSupportedPropertyNames(htmlElementName) {
|
|
16
17
|
const $element = document.createElement(htmlElementName);
|
|
17
18
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -26,6 +27,121 @@ function getSupportedAttributeNames(htmlElementName) {
|
|
|
26
27
|
}
|
|
27
28
|
const commonStyleSheet = new CSSStyleSheet();
|
|
28
29
|
commonStyleSheet.replaceSync(commonStyles);
|
|
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;
|
|
32
|
+
if (typeof window !== "undefined") {
|
|
33
|
+
window.isComponentDebug = isComponentDebug;
|
|
34
|
+
}
|
|
35
|
+
function isComponentDebug() {
|
|
36
|
+
return PX_COMPONENT_DEBUG;
|
|
37
|
+
}
|
|
38
|
+
function log(message) {
|
|
39
|
+
if (isComponentDebug()) {
|
|
40
|
+
console.error(message);
|
|
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
|
+
}
|
|
142
|
+
if (typeof window !== "undefined") {
|
|
143
|
+
window.isComponentDebug = isComponentDebug;
|
|
144
|
+
}
|
|
29
145
|
class WithExtraAttributes extends HTMLElement {
|
|
30
146
|
static get observedAttributes() {
|
|
31
147
|
return [
|
|
@@ -73,7 +189,14 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
73
189
|
"order--mobile",
|
|
74
190
|
"order--tablet",
|
|
75
191
|
"order--laptop",
|
|
76
|
-
"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"
|
|
77
200
|
];
|
|
78
201
|
}
|
|
79
202
|
constructor(...adoptedStylesheets) {
|
|
@@ -152,8 +275,9 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
152
275
|
updateProperties(name, oldValue, newValue, attrValue) {
|
|
153
276
|
if (attrValue) {
|
|
154
277
|
if (!this.checkName(attrValue, newValue)) {
|
|
155
|
-
|
|
156
|
-
|
|
278
|
+
log(
|
|
279
|
+
`"${newValue}" is not an allowed ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
280
|
+
);
|
|
157
281
|
}
|
|
158
282
|
}
|
|
159
283
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
@@ -516,20 +640,14 @@ const _PxElement = class _PxElement extends WithExtraAttributes {
|
|
|
516
640
|
};
|
|
517
641
|
_PxElement.accessorExclusions = [];
|
|
518
642
|
let PxElement = _PxElement;
|
|
519
|
-
class VerticallyExtendedElement extends PxElement {
|
|
520
|
-
connectedCallback() {
|
|
521
|
-
if (this.isInsideGridOrStack) {
|
|
522
|
-
this.$el.style.display = "block";
|
|
523
|
-
this.$el.style.height = "100%";
|
|
524
|
-
}
|
|
525
|
-
}
|
|
526
|
-
}
|
|
527
643
|
const flexboxAlignSelfValues = [
|
|
528
644
|
"",
|
|
529
645
|
"default",
|
|
530
646
|
"auto",
|
|
531
647
|
"flex-start",
|
|
648
|
+
"start",
|
|
532
649
|
"flex-end",
|
|
650
|
+
"end",
|
|
533
651
|
"center",
|
|
534
652
|
"baseline",
|
|
535
653
|
"stretch"
|
|
@@ -693,7 +811,7 @@ const backgroundColorValues = [
|
|
|
693
811
|
"purpose-info",
|
|
694
812
|
"purpose-eco",
|
|
695
813
|
"purpose-notification",
|
|
696
|
-
"footer"
|
|
814
|
+
"footer-sitemap"
|
|
697
815
|
];
|
|
698
816
|
const backgroundSizeValues = ["", "cover", "contain", "default"];
|
|
699
817
|
const boxShadowValues = ["", "none", "s", "m", "l", "xl"];
|
|
@@ -787,93 +905,94 @@ function addGlobalStylesheet(inlineStyles) {
|
|
|
787
905
|
function checkName(values, value) {
|
|
788
906
|
return values.includes(value);
|
|
789
907
|
}
|
|
790
|
-
|
|
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) {
|
|
791
944
|
var _a;
|
|
792
|
-
|
|
793
|
-
"aria-label",
|
|
794
|
-
"aria-labelledby",
|
|
795
|
-
"aria-describedby",
|
|
796
|
-
"aria-controls",
|
|
797
|
-
"aria-expanded",
|
|
798
|
-
"aria-haspopup",
|
|
799
|
-
"aria-pressed",
|
|
800
|
-
"aria-selected",
|
|
801
|
-
"aria-required",
|
|
802
|
-
"aria-disabled",
|
|
803
|
-
"aria-live",
|
|
804
|
-
"aria-atomic",
|
|
805
|
-
"aria-relevant",
|
|
806
|
-
"aria-orientation",
|
|
807
|
-
"aria-valuenow",
|
|
808
|
-
"aria-valuetext",
|
|
809
|
-
"aria-valuemin",
|
|
810
|
-
"aria-valuemax",
|
|
811
|
-
"aria-details",
|
|
812
|
-
"aria-modal",
|
|
813
|
-
"aria-autocomplete",
|
|
814
|
-
"aria-activedescendant",
|
|
815
|
-
"aria-colcount",
|
|
816
|
-
"aria-colindex",
|
|
817
|
-
"aria-colspan",
|
|
818
|
-
"aria-rowcount",
|
|
819
|
-
"aria-rowindex",
|
|
820
|
-
"aria-rowspan",
|
|
821
|
-
"aria-keyshortcuts",
|
|
822
|
-
"aria-placeholder",
|
|
823
|
-
"aria-invalid",
|
|
824
|
-
"aria-busy",
|
|
825
|
-
"aria-owns"
|
|
826
|
-
].forEach((attr) => {
|
|
945
|
+
accessibilityAttributes.forEach((attr) => {
|
|
827
946
|
if (sourceElement.getAttribute(attr)) {
|
|
828
947
|
targetElement.setAttribute(attr, sourceElement.getAttribute(attr));
|
|
829
948
|
sourceElement.removeAttribute(attr);
|
|
830
949
|
}
|
|
831
950
|
});
|
|
832
|
-
if (applyLabelledBy) {
|
|
951
|
+
if (applyLabelledBy && !sourceElement.getAttribute("aria-labelledby")) {
|
|
833
952
|
const id = `px-${((_a = targetElement.localName) == null ? void 0 : _a.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
|
|
834
953
|
targetElement.setAttribute("id", id);
|
|
835
954
|
sourceElement.setAttribute("aria-labelledby", id);
|
|
836
955
|
}
|
|
837
956
|
}
|
|
838
|
-
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
957
|
+
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName, selectorAttributeName = attributeName) {
|
|
839
958
|
const stylesheet2 = new CSSStyleSheet();
|
|
840
959
|
const styles2 = attributeValues.reduce(
|
|
841
960
|
(prev, attributeValue) => prev + `
|
|
842
|
-
${selector(
|
|
961
|
+
${selector(selectorAttributeName, attributeValue)} {
|
|
843
962
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
844
963
|
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
845
964
|
}
|
|
846
965
|
/* Mobile only - max 767px */
|
|
847
|
-
@media only screen and (max-width: 47.
|
|
848
|
-
${selector(
|
|
966
|
+
@media only screen and (max-width: 47.938rem) {
|
|
967
|
+
${selector(selectorAttributeName, attributeValue)} {
|
|
849
968
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
850
969
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
851
970
|
}
|
|
852
971
|
}
|
|
853
|
-
${selector(
|
|
972
|
+
${selector(selectorAttributeName, attributeValue, "mobile")} {
|
|
854
973
|
/* Mobile only - max 767px */
|
|
855
|
-
@media only screen and (max-width: 47.
|
|
974
|
+
@media only screen and (max-width: 47.938rem) {
|
|
856
975
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
|
|
857
976
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
858
977
|
}
|
|
859
978
|
}
|
|
860
|
-
${selector(
|
|
979
|
+
${selector(selectorAttributeName, attributeValue, "tablet")} {
|
|
861
980
|
/* Tablet - min 768px max 1024px */
|
|
862
|
-
@media only screen and (min-width:
|
|
981
|
+
@media only screen and (min-width: 48rem) and (max-width: 64rem) {
|
|
863
982
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
864
983
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
865
984
|
}
|
|
866
985
|
}
|
|
867
|
-
${selector(
|
|
986
|
+
${selector(selectorAttributeName, attributeValue, "laptop")} {
|
|
868
987
|
/* Laptop - 1025px*/
|
|
869
|
-
@media only screen and (min-width: 64.
|
|
988
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
870
989
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
871
990
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
872
991
|
}
|
|
873
992
|
}
|
|
874
|
-
${selector(
|
|
993
|
+
${selector(selectorAttributeName, attributeValue, "desktop")} {
|
|
875
994
|
/* Desktop - 1025px*/
|
|
876
|
-
@media only screen and (min-width: 64.
|
|
995
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
877
996
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
878
997
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
879
998
|
}
|
|
@@ -988,8 +1107,8 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
988
1107
|
this.setCSSProperties();
|
|
989
1108
|
}
|
|
990
1109
|
}
|
|
991
|
-
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
|
|
992
|
-
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)}}";
|
|
993
1112
|
const typographyStyles$3 = new CSSStyleSheet();
|
|
994
1113
|
const headingStyles$2 = new CSSStyleSheet();
|
|
995
1114
|
const linkStyles$2 = new CSSStyleSheet();
|
|
@@ -1033,9 +1152,30 @@ class Typography extends HTMLElement {
|
|
|
1033
1152
|
if (!customElements.get("px-typography")) {
|
|
1034
1153
|
customElements.define("px-typography", Typography);
|
|
1035
1154
|
}
|
|
1036
|
-
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)}}';
|
|
1037
1156
|
const containerStyles = new CSSStyleSheet();
|
|
1038
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
|
+
];
|
|
1039
1179
|
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
|
|
1040
1180
|
const paddingPrefix = "px-padding";
|
|
1041
1181
|
const containerBreakpoints = [
|
|
@@ -1083,9 +1223,17 @@ const containerBreakpoints = [
|
|
|
1083
1223
|
paddingValues,
|
|
1084
1224
|
paddingPrefix,
|
|
1085
1225
|
"--container-padding-left"
|
|
1226
|
+
),
|
|
1227
|
+
cssTokenBreakpoints(
|
|
1228
|
+
"gap",
|
|
1229
|
+
attributeBreakpointCSSSelector$1,
|
|
1230
|
+
gapValues,
|
|
1231
|
+
"px-spacing",
|
|
1232
|
+
void 0,
|
|
1233
|
+
"subgrid-gap"
|
|
1086
1234
|
)
|
|
1087
1235
|
];
|
|
1088
|
-
const _Container = class _Container extends
|
|
1236
|
+
const _Container = class _Container extends WithExtraAttributes {
|
|
1089
1237
|
constructor() {
|
|
1090
1238
|
super(containerStyles, ...containerBreakpoints);
|
|
1091
1239
|
this.template = () => `<div class="container">
|
|
@@ -1096,6 +1244,7 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1096
1244
|
</div>`;
|
|
1097
1245
|
this._bgObserver = null;
|
|
1098
1246
|
this._isInViewport = false;
|
|
1247
|
+
this.contentObserver = null;
|
|
1099
1248
|
this.shadowRoot.innerHTML = this.template();
|
|
1100
1249
|
}
|
|
1101
1250
|
static get observedAttributes() {
|
|
@@ -1128,11 +1277,12 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1128
1277
|
"background-position",
|
|
1129
1278
|
"box-shadow",
|
|
1130
1279
|
"anchor-offset",
|
|
1131
|
-
"
|
|
1280
|
+
"anchor-spacing",
|
|
1281
|
+
"inverted",
|
|
1282
|
+
"subgrid-rows"
|
|
1132
1283
|
];
|
|
1133
1284
|
}
|
|
1134
1285
|
connectedCallback() {
|
|
1135
|
-
super.connectedCallback();
|
|
1136
1286
|
if (!this.padding) {
|
|
1137
1287
|
this.padding = "m";
|
|
1138
1288
|
}
|
|
@@ -1168,9 +1318,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1168
1318
|
this._bgObserver.observe(this.$el);
|
|
1169
1319
|
}
|
|
1170
1320
|
disconnectedCallback() {
|
|
1171
|
-
var _a;
|
|
1321
|
+
var _a, _b;
|
|
1172
1322
|
(_a = this._bgObserver) == null ? void 0 : _a.disconnect();
|
|
1173
|
-
this.contentObserver.disconnect();
|
|
1323
|
+
(_b = this.contentObserver) == null ? void 0 : _b.disconnect();
|
|
1174
1324
|
}
|
|
1175
1325
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
1176
1326
|
if (oldValue !== newValue) {
|
|
@@ -1245,6 +1395,17 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1245
1395
|
case "anchor-offset":
|
|
1246
1396
|
this.updateAnchorOffset(oldValue, newValue, paddingValues);
|
|
1247
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;
|
|
1248
1409
|
default:
|
|
1249
1410
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
1250
1411
|
break;
|
|
@@ -1278,7 +1439,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1278
1439
|
`linear-gradient(var(--px-color-background-gradient-${newValue}))`
|
|
1279
1440
|
);
|
|
1280
1441
|
} else {
|
|
1281
|
-
|
|
1442
|
+
log(
|
|
1443
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${gradientValues.join('", "')}".`
|
|
1444
|
+
);
|
|
1282
1445
|
}
|
|
1283
1446
|
}
|
|
1284
1447
|
updateBackgroundColor(attrName, newValue) {
|
|
@@ -1295,7 +1458,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1295
1458
|
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-inverted"})`
|
|
1296
1459
|
);
|
|
1297
1460
|
} else {
|
|
1298
|
-
|
|
1461
|
+
log(
|
|
1462
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${backgroundColorValues.join('", "')}".`
|
|
1463
|
+
);
|
|
1299
1464
|
}
|
|
1300
1465
|
}
|
|
1301
1466
|
updateBorderColor(attrName, newValue) {
|
|
@@ -1309,12 +1474,16 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1309
1474
|
`var(--px-color-border-${newValue}-inverted)`
|
|
1310
1475
|
);
|
|
1311
1476
|
} else {
|
|
1312
|
-
|
|
1477
|
+
log(
|
|
1478
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${borderColorValues.join('", "')}".`
|
|
1479
|
+
);
|
|
1313
1480
|
}
|
|
1314
1481
|
}
|
|
1315
1482
|
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
1316
1483
|
if (!this.checkName(attrValues, newValue)) {
|
|
1317
|
-
|
|
1484
|
+
log(
|
|
1485
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1486
|
+
);
|
|
1318
1487
|
} else {
|
|
1319
1488
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1320
1489
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -1332,7 +1501,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1332
1501
|
}
|
|
1333
1502
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1334
1503
|
if (!this.checkName(attrValues, newValue)) {
|
|
1335
|
-
|
|
1504
|
+
log(
|
|
1505
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1506
|
+
);
|
|
1336
1507
|
} else {
|
|
1337
1508
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1338
1509
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -1361,7 +1532,9 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1361
1532
|
}
|
|
1362
1533
|
updateAnchorOffset(oldValue, newValue, attrValue) {
|
|
1363
1534
|
if (!checkName(attrValue, newValue)) {
|
|
1364
|
-
|
|
1535
|
+
log(
|
|
1536
|
+
`"${newValue}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1537
|
+
);
|
|
1365
1538
|
return;
|
|
1366
1539
|
}
|
|
1367
1540
|
const updateAnchorOffsetStyle = (value) => {
|
|
@@ -1388,6 +1561,49 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1388
1561
|
this.$el.classList.add("anchored");
|
|
1389
1562
|
}
|
|
1390
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
|
+
}
|
|
1391
1607
|
get $slotAnchor() {
|
|
1392
1608
|
return this.querySelector('[slot^="anchor"]');
|
|
1393
1609
|
}
|
|
@@ -1721,11 +1937,51 @@ const _Container = class _Container extends VerticallyExtendedElement {
|
|
|
1721
1937
|
set anchorOffset(value) {
|
|
1722
1938
|
this.setAttribute("anchor-offset", value);
|
|
1723
1939
|
}
|
|
1940
|
+
get anchorSpacing() {
|
|
1941
|
+
return this.getAttribute("anchor-spacing");
|
|
1942
|
+
}
|
|
1943
|
+
set anchorSpacing(value) {
|
|
1944
|
+
this.setAttribute("anchor-spacing", value);
|
|
1945
|
+
}
|
|
1724
1946
|
get inverted() {
|
|
1725
|
-
return this.
|
|
1947
|
+
return this.hasAttribute("inverted");
|
|
1726
1948
|
}
|
|
1727
1949
|
set inverted(value) {
|
|
1728
|
-
|
|
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);
|
|
1729
1985
|
}
|
|
1730
1986
|
};
|
|
1731
1987
|
_Container.nativeName = "div";
|
|
@@ -1733,7 +1989,7 @@ let Container = _Container;
|
|
|
1733
1989
|
if (!customElements.get("px-container")) {
|
|
1734
1990
|
customElements.define("px-container", Container);
|
|
1735
1991
|
}
|
|
1736
|
-
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}}";
|
|
1737
1993
|
const styleSheet$5 = new CSSStyleSheet();
|
|
1738
1994
|
styleSheet$5.replaceSync(styles$7);
|
|
1739
1995
|
const separatorDirectionValues = [
|
|
@@ -1815,7 +2071,9 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1815
2071
|
}
|
|
1816
2072
|
};
|
|
1817
2073
|
if (!this.checkName(attrValue, newValue)) {
|
|
1818
|
-
|
|
2074
|
+
log(
|
|
2075
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2076
|
+
);
|
|
1819
2077
|
} else {
|
|
1820
2078
|
updateSizeStyle(oldValue);
|
|
1821
2079
|
updateSizeStyle(newValue);
|
|
@@ -1835,7 +2093,9 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1835
2093
|
}
|
|
1836
2094
|
};
|
|
1837
2095
|
if (!this.checkName(attrValue, newValue)) {
|
|
1838
|
-
|
|
2096
|
+
log(
|
|
2097
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2098
|
+
);
|
|
1839
2099
|
} else {
|
|
1840
2100
|
updateColorStyle(oldValue);
|
|
1841
2101
|
updateColorStyle(newValue);
|
|
@@ -1848,7 +2108,9 @@ const _Separator = class _Separator extends PxElement {
|
|
|
1848
2108
|
}
|
|
1849
2109
|
};
|
|
1850
2110
|
if (!this.checkName(attrValue, newValue)) {
|
|
1851
|
-
|
|
2111
|
+
log(
|
|
2112
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2113
|
+
);
|
|
1852
2114
|
} else {
|
|
1853
2115
|
if (attrName === "direction") {
|
|
1854
2116
|
["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
|
|
@@ -1929,7 +2191,7 @@ let Separator = _Separator;
|
|
|
1929
2191
|
if (!customElements.get("px-separator")) {
|
|
1930
2192
|
customElements.define("px-separator", Separator);
|
|
1931
2193
|
}
|
|
1932
|
-
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))}}';
|
|
1933
2195
|
const styleSheet$4 = new CSSStyleSheet();
|
|
1934
2196
|
styleSheet$4.replaceSync(styles$6);
|
|
1935
2197
|
const directionValues = [
|
|
@@ -1945,7 +2207,9 @@ const alignItemsValues = [
|
|
|
1945
2207
|
"default",
|
|
1946
2208
|
"stretch",
|
|
1947
2209
|
"flex-start",
|
|
2210
|
+
"start",
|
|
1948
2211
|
"flex-end",
|
|
2212
|
+
"end",
|
|
1949
2213
|
"center",
|
|
1950
2214
|
"baseline"
|
|
1951
2215
|
];
|
|
@@ -1953,7 +2217,9 @@ const justifyContentValues = [
|
|
|
1953
2217
|
"",
|
|
1954
2218
|
"default",
|
|
1955
2219
|
"flex-start",
|
|
2220
|
+
"start",
|
|
1956
2221
|
"flex-end",
|
|
2222
|
+
"end",
|
|
1957
2223
|
"center",
|
|
1958
2224
|
"space-between",
|
|
1959
2225
|
"space-around",
|
|
@@ -2086,7 +2352,9 @@ class Stack extends WithExtraAttributes {
|
|
|
2086
2352
|
}
|
|
2087
2353
|
updateOverflowX(name, oldValue, newValue, attrValue) {
|
|
2088
2354
|
if (!checkName(attrValue, newValue)) {
|
|
2089
|
-
|
|
2355
|
+
log(
|
|
2356
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2357
|
+
);
|
|
2090
2358
|
return;
|
|
2091
2359
|
}
|
|
2092
2360
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
@@ -2097,7 +2365,9 @@ class Stack extends WithExtraAttributes {
|
|
|
2097
2365
|
}
|
|
2098
2366
|
updateFlexProperties(name, oldValue, newValue, attrValue) {
|
|
2099
2367
|
if (!this.checkName(attrValue, newValue)) {
|
|
2100
|
-
|
|
2368
|
+
log(
|
|
2369
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2370
|
+
);
|
|
2101
2371
|
}
|
|
2102
2372
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
2103
2373
|
const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
|
|
@@ -2132,6 +2402,10 @@ class Stack extends WithExtraAttributes {
|
|
|
2132
2402
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
2133
2403
|
`var(--px-spacing-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
|
|
2134
2404
|
);
|
|
2405
|
+
this.style.setProperty(
|
|
2406
|
+
`--host-gap--${breakpoint}`,
|
|
2407
|
+
`var(--px-spacing-${value}-${breakpoint === "laptop" ? "desktop" : breakpoint})`
|
|
2408
|
+
);
|
|
2135
2409
|
} else {
|
|
2136
2410
|
this.$el.style.setProperty(
|
|
2137
2411
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
@@ -2453,7 +2727,7 @@ class Spacer extends HTMLElement {
|
|
|
2453
2727
|
if (!customElements.get("px-spacer")) {
|
|
2454
2728
|
customElements.define("px-spacer", Spacer);
|
|
2455
2729
|
}
|
|
2456
|
-
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}";
|
|
2457
2731
|
const styleSheet$3 = new CSSStyleSheet();
|
|
2458
2732
|
styleSheet$3.replaceSync(styles$5);
|
|
2459
2733
|
class Page extends WithExtraAttributes {
|
|
@@ -2738,15 +3012,6 @@ const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
|
|
|
2738
3012
|
const styles$4 = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
|
|
2739
3013
|
const styleSheet$2 = new CSSStyleSheet();
|
|
2740
3014
|
styleSheet$2.replaceSync(styles$4);
|
|
2741
|
-
const observedAttributes = [
|
|
2742
|
-
"name",
|
|
2743
|
-
"size",
|
|
2744
|
-
"color",
|
|
2745
|
-
"aria-label",
|
|
2746
|
-
"inverted",
|
|
2747
|
-
"from",
|
|
2748
|
-
"disabled"
|
|
2749
|
-
];
|
|
2750
3015
|
class Icon extends WithExtraAttributes {
|
|
2751
3016
|
constructor(...styleSheets) {
|
|
2752
3017
|
var _a;
|
|
@@ -2754,17 +3019,25 @@ class Icon extends WithExtraAttributes {
|
|
|
2754
3019
|
__privateAdd(this, _src);
|
|
2755
3020
|
__privateAdd(this, _internals);
|
|
2756
3021
|
__privateAdd(this, _template, () => `<svg aria-hidden="true">
|
|
2757
|
-
<use
|
|
3022
|
+
<use></use>
|
|
2758
3023
|
</svg>`);
|
|
2759
3024
|
this.shadowRoot.innerHTML = __privateGet(this, _template).call(this);
|
|
2760
|
-
this.role = "img";
|
|
2761
3025
|
__privateSet(this, _internals, (_a = this.attachInternals) == null ? void 0 : _a.call(this));
|
|
2762
3026
|
if (__privateGet(this, _internals)) {
|
|
2763
3027
|
__privateGet(this, _internals).role = "img";
|
|
2764
3028
|
}
|
|
2765
3029
|
}
|
|
2766
3030
|
static get observedAttributes() {
|
|
2767
|
-
return [
|
|
3031
|
+
return [
|
|
3032
|
+
...super.observedAttributes,
|
|
3033
|
+
"name",
|
|
3034
|
+
"size",
|
|
3035
|
+
"color",
|
|
3036
|
+
"aria-label",
|
|
3037
|
+
"inverted",
|
|
3038
|
+
"from",
|
|
3039
|
+
"disabled"
|
|
3040
|
+
];
|
|
2768
3041
|
}
|
|
2769
3042
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
2770
3043
|
if (oldValue !== newValue) {
|
|
@@ -2797,6 +3070,8 @@ class Icon extends WithExtraAttributes {
|
|
|
2797
3070
|
}
|
|
2798
3071
|
}
|
|
2799
3072
|
connectedCallback() {
|
|
3073
|
+
var _a;
|
|
3074
|
+
this.role = "img";
|
|
2800
3075
|
const iconSet = document.querySelectorAll("px-icon-set");
|
|
2801
3076
|
if (!iconSet) {
|
|
2802
3077
|
console.log("<px-icon-set> component not found");
|
|
@@ -2809,7 +3084,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2809
3084
|
if (icon.getAttribute("name") === this.from && icon.getAttribute("type") !== "font") {
|
|
2810
3085
|
__privateSet(this, _src, icon.getAttribute("src"));
|
|
2811
3086
|
this.$el.firstElementChild.setAttribute(
|
|
2812
|
-
"
|
|
3087
|
+
"href",
|
|
2813
3088
|
`${__privateGet(this, _src)}#icon-${this.name}`
|
|
2814
3089
|
);
|
|
2815
3090
|
}
|
|
@@ -2818,6 +3093,11 @@ class Icon extends WithExtraAttributes {
|
|
|
2818
3093
|
__privateGet(this, _internals).ariaHidden = "true";
|
|
2819
3094
|
this.ariaHidden = "true";
|
|
2820
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
|
+
}
|
|
2821
3101
|
}
|
|
2822
3102
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2823
3103
|
if (oldValue !== null && oldValue !== "") {
|
|
@@ -2835,13 +3115,15 @@ class Icon extends WithExtraAttributes {
|
|
|
2835
3115
|
}
|
|
2836
3116
|
}
|
|
2837
3117
|
if (!this.checkName(attrValues, newValue)) {
|
|
2838
|
-
|
|
3118
|
+
log(
|
|
3119
|
+
`${newValue} is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}`
|
|
3120
|
+
);
|
|
2839
3121
|
}
|
|
2840
3122
|
}
|
|
2841
3123
|
updateName(oldValue, newValue) {
|
|
2842
3124
|
if (__privateGet(this, _src)) {
|
|
2843
3125
|
this.$el.firstElementChild.setAttribute(
|
|
2844
|
-
"
|
|
3126
|
+
"href",
|
|
2845
3127
|
`${__privateGet(this, _src)}#icon-${newValue}`
|
|
2846
3128
|
);
|
|
2847
3129
|
}
|
|
@@ -2898,7 +3180,7 @@ _template = new WeakMap();
|
|
|
2898
3180
|
if (!customElements.get("px-icon")) {
|
|
2899
3181
|
customElements.define("px-icon", Icon);
|
|
2900
3182
|
}
|
|
2901
|
-
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)}";
|
|
2902
3184
|
const headingStyles$1 = new CSSStyleSheet();
|
|
2903
3185
|
headingStyles$1.replaceSync(headingCss);
|
|
2904
3186
|
const typographyStyles$2 = new CSSStyleSheet();
|
|
@@ -2923,7 +3205,8 @@ class AbstractHeading extends PxElement {
|
|
|
2923
3205
|
"text-align--tablet",
|
|
2924
3206
|
"text-align--laptop",
|
|
2925
3207
|
"text-align--desktop",
|
|
2926
|
-
"inverted"
|
|
3208
|
+
"inverted",
|
|
3209
|
+
"auto-spacing"
|
|
2927
3210
|
];
|
|
2928
3211
|
}
|
|
2929
3212
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -2958,14 +3241,18 @@ class AbstractHeading extends PxElement {
|
|
|
2958
3241
|
}
|
|
2959
3242
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
2960
3243
|
if (!this.checkName(attrValue, newValue)) {
|
|
2961
|
-
|
|
3244
|
+
log(
|
|
3245
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3246
|
+
);
|
|
2962
3247
|
} else {
|
|
2963
3248
|
this.toggleClass(oldValue, newValue);
|
|
2964
3249
|
}
|
|
2965
3250
|
}
|
|
2966
3251
|
updateColor(oldValue, newValue, attrValue) {
|
|
2967
3252
|
if (!this.checkName(attrValue, newValue)) {
|
|
2968
|
-
|
|
3253
|
+
log(
|
|
3254
|
+
`"${newValue}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3255
|
+
);
|
|
2969
3256
|
return;
|
|
2970
3257
|
}
|
|
2971
3258
|
const updateColorStyle = (value) => {
|
|
@@ -2985,7 +3272,9 @@ class AbstractHeading extends PxElement {
|
|
|
2985
3272
|
}
|
|
2986
3273
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
2987
3274
|
if (!this.checkName(attrValue, newValue)) {
|
|
2988
|
-
|
|
3275
|
+
log(
|
|
3276
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3277
|
+
);
|
|
2989
3278
|
return;
|
|
2990
3279
|
}
|
|
2991
3280
|
const updateStyle = (breakpoint, value) => {
|
|
@@ -3055,6 +3344,16 @@ class AbstractHeading extends PxElement {
|
|
|
3055
3344
|
set inverted(value) {
|
|
3056
3345
|
this.setAttribute("inverted", value);
|
|
3057
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
|
+
}
|
|
3058
3357
|
}
|
|
3059
3358
|
const _H1 = class _H1 extends AbstractHeading {
|
|
3060
3359
|
constructor() {
|
|
@@ -3183,14 +3482,18 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3183
3482
|
}
|
|
3184
3483
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
3185
3484
|
if (!this.checkName(attrValue, newValue)) {
|
|
3186
|
-
|
|
3485
|
+
log(
|
|
3486
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3487
|
+
);
|
|
3187
3488
|
} else {
|
|
3188
3489
|
this.toggleClass(oldValue, newValue);
|
|
3189
3490
|
}
|
|
3190
3491
|
}
|
|
3191
3492
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
3192
3493
|
if (!this.checkName(attrValue, newValue)) {
|
|
3193
|
-
|
|
3494
|
+
log(
|
|
3495
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3496
|
+
);
|
|
3194
3497
|
} else {
|
|
3195
3498
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
3196
3499
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -3283,44 +3586,55 @@ let Paragraph = _Paragraph;
|
|
|
3283
3586
|
if (!customElements.get("px-p")) {
|
|
3284
3587
|
customElements.define("px-p", Paragraph);
|
|
3285
3588
|
}
|
|
3286
|
-
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}}';
|
|
3287
3590
|
const styleSheet$1 = new CSSStyleSheet();
|
|
3288
3591
|
styleSheet$1.replaceSync(styles$3);
|
|
3289
3592
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
3593
|
+
const statusValues = ["", "info", "success", "error", "warning"];
|
|
3290
3594
|
class Modal extends HTMLElement {
|
|
3291
3595
|
constructor() {
|
|
3292
3596
|
super();
|
|
3293
|
-
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>
|
|
3294
3605
|
<div id="container">
|
|
3295
|
-
<
|
|
3296
|
-
<px-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
</px-
|
|
3306
|
-
</px-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
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>
|
|
3324
3638
|
</div>
|
|
3325
3639
|
</dialog>`;
|
|
3326
3640
|
this.attachShadow({ mode: "open" });
|
|
@@ -3328,40 +3642,99 @@ class Modal extends HTMLElement {
|
|
|
3328
3642
|
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
3329
3643
|
}
|
|
3330
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);
|
|
3331
3650
|
if (this.hasAttribute("open")) {
|
|
3332
3651
|
this.show();
|
|
3333
3652
|
}
|
|
3334
|
-
this.handleStatusChange("notnull", this.getAttribute("status"));
|
|
3335
|
-
if (this.hasAttribute("closedby")) {
|
|
3336
|
-
const $closer = document.querySelector(
|
|
3337
|
-
`#${this.getAttribute("closedby")}`
|
|
3338
|
-
);
|
|
3339
|
-
$closer == null ? void 0 : $closer.addEventListener("click", () => {
|
|
3340
|
-
this.close();
|
|
3341
|
-
});
|
|
3342
|
-
}
|
|
3343
3653
|
if (this.hasAttribute("openedby")) {
|
|
3344
|
-
|
|
3345
|
-
`px-button#${this.getAttribute("openedby")}`
|
|
3346
|
-
);
|
|
3347
|
-
$opener == null ? void 0 : $opener.addEventListener("click", () => {
|
|
3348
|
-
this.show();
|
|
3349
|
-
});
|
|
3654
|
+
this.addOpenListener();
|
|
3350
3655
|
}
|
|
3656
|
+
if (this.hasAttribute("closedby")) {
|
|
3657
|
+
this.addCloseListener(this.getAttribute("closedby"));
|
|
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
|
+
);
|
|
3351
3669
|
}
|
|
3352
3670
|
static get observedAttributes() {
|
|
3353
|
-
return ["open", "status"];
|
|
3671
|
+
return ["open", "status", "media-src", "openedby", "closedby", "id"];
|
|
3354
3672
|
}
|
|
3355
3673
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3356
3674
|
switch (attrName) {
|
|
3357
3675
|
case "open":
|
|
3358
|
-
this.
|
|
3676
|
+
if (this.isConnected) {
|
|
3677
|
+
this.handleOpenChange();
|
|
3678
|
+
}
|
|
3359
3679
|
break;
|
|
3360
3680
|
case "status":
|
|
3361
3681
|
this.handleStatusChange(oldValue, newValue);
|
|
3362
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;
|
|
3363
3699
|
}
|
|
3364
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
|
+
}
|
|
3365
3738
|
handleOpenChange() {
|
|
3366
3739
|
if (this.hasAttribute("open")) {
|
|
3367
3740
|
this.show();
|
|
@@ -3371,6 +3744,18 @@ class Modal extends HTMLElement {
|
|
|
3371
3744
|
}
|
|
3372
3745
|
handleStatusChange(oldStatus, newStatus) {
|
|
3373
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
|
+
}
|
|
3374
3759
|
if (newStatus === "success") {
|
|
3375
3760
|
this.$container.classList.add("success");
|
|
3376
3761
|
} else {
|
|
@@ -3386,27 +3771,30 @@ class Modal extends HTMLElement {
|
|
|
3386
3771
|
} else {
|
|
3387
3772
|
this.$container.classList.remove("warning");
|
|
3388
3773
|
}
|
|
3389
|
-
if (newStatus === null) {
|
|
3774
|
+
if (newStatus === null && this.$statusIcon) {
|
|
3390
3775
|
(_a = this.$statusIcon) == null ? void 0 : _a.remove();
|
|
3391
3776
|
} else if (oldStatus === null && newStatus && !this.$statusIcon) {
|
|
3392
3777
|
const icon = document.createElement("px-icon");
|
|
3393
3778
|
icon.setAttribute("name", this.getIcon(newStatus));
|
|
3394
3779
|
icon.setAttribute("from", "lavender");
|
|
3395
3780
|
icon.setAttribute("color", `purpose-${newStatus}`);
|
|
3396
|
-
|
|
3781
|
+
icon.setAttribute("size", "l");
|
|
3782
|
+
this.$iconContainer.prepend(icon);
|
|
3397
3783
|
} else {
|
|
3398
3784
|
(_b = this.$statusIcon) == null ? void 0 : _b.setAttribute("name", this.getIcon(newStatus));
|
|
3399
3785
|
(_c = this.$statusIcon) == null ? void 0 : _c.setAttribute("color", `purpose-${newStatus}`);
|
|
3400
3786
|
}
|
|
3401
3787
|
}
|
|
3402
3788
|
getIcon(status) {
|
|
3403
|
-
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";
|
|
3404
3790
|
}
|
|
3405
3791
|
show() {
|
|
3406
3792
|
this.$dialog.showModal();
|
|
3793
|
+
document.body.style.overflow = "hidden";
|
|
3407
3794
|
}
|
|
3408
3795
|
close() {
|
|
3409
3796
|
this.$dialog.close();
|
|
3797
|
+
document.body.style.overflow = "";
|
|
3410
3798
|
this.dispatchEvent(
|
|
3411
3799
|
new CustomEvent(CLOSE_EVENT, {
|
|
3412
3800
|
bubbles: true,
|
|
@@ -3414,6 +3802,117 @@ class Modal extends HTMLElement {
|
|
|
3414
3802
|
})
|
|
3415
3803
|
);
|
|
3416
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
|
+
}
|
|
3417
3916
|
get $closeButton() {
|
|
3418
3917
|
return this.shadowRoot.querySelector("px-button-icon");
|
|
3419
3918
|
}
|
|
@@ -3422,6 +3921,19 @@ class Modal extends HTMLElement {
|
|
|
3422
3921
|
"#icon-container > px-icon"
|
|
3423
3922
|
);
|
|
3424
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
|
+
}
|
|
3425
3937
|
get $container() {
|
|
3426
3938
|
return this.shadowRoot.querySelector("#container");
|
|
3427
3939
|
}
|
|
@@ -3438,9 +3950,9 @@ class Modal extends HTMLElement {
|
|
|
3438
3950
|
if (!customElements.get("px-modal")) {
|
|
3439
3951
|
customElements.define("px-modal", Modal);
|
|
3440
3952
|
}
|
|
3441
|
-
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)}}`;
|
|
3442
|
-
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
|
|
3443
|
-
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-xs-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]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media
|
|
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,.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,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.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,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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-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,.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,.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,.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,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.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-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)}: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,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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{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,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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{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,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.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,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.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-xs-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]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}";
|
|
3444
3956
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
3445
3957
|
const linkStyles$1 = new CSSStyleSheet();
|
|
3446
3958
|
const patchStyles = new CSSStyleSheet();
|
|
@@ -3460,7 +3972,8 @@ const variantValues = [
|
|
|
3460
3972
|
"patch-black-friday",
|
|
3461
3973
|
"patch-eco",
|
|
3462
3974
|
"actionable-tag",
|
|
3463
|
-
"header-dropdown"
|
|
3975
|
+
"header-dropdown",
|
|
3976
|
+
"header-minimal-dropdown"
|
|
3464
3977
|
];
|
|
3465
3978
|
const shapeValues = [
|
|
3466
3979
|
"",
|
|
@@ -3516,7 +4029,7 @@ const _Button = class _Button extends PxElement {
|
|
|
3516
4029
|
}
|
|
3517
4030
|
});
|
|
3518
4031
|
}
|
|
3519
|
-
transferAccessibilityAttributes(this, this.$el);
|
|
4032
|
+
transferAccessibilityAttributes(this, this.$el, true);
|
|
3520
4033
|
if (this.$el.type === "submit") {
|
|
3521
4034
|
this.addEventListener("click", (event) => {
|
|
3522
4035
|
var _a;
|
|
@@ -3532,6 +4045,8 @@ const _Button = class _Button extends PxElement {
|
|
|
3532
4045
|
});
|
|
3533
4046
|
}
|
|
3534
4047
|
}
|
|
4048
|
+
disconnectedCallback() {
|
|
4049
|
+
}
|
|
3535
4050
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3536
4051
|
if (oldValue !== newValue) {
|
|
3537
4052
|
switch (attrName) {
|
|
@@ -3551,6 +4066,9 @@ const _Button = class _Button extends PxElement {
|
|
|
3551
4066
|
case "loading":
|
|
3552
4067
|
this.updateLoading();
|
|
3553
4068
|
break;
|
|
4069
|
+
case "disabled":
|
|
4070
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4071
|
+
break;
|
|
3554
4072
|
case "shape":
|
|
3555
4073
|
case "shape--mobile":
|
|
3556
4074
|
case "shape--tablet":
|
|
@@ -3598,8 +4116,8 @@ const _Button = class _Button extends PxElement {
|
|
|
3598
4116
|
}
|
|
3599
4117
|
this._toggleClass(oldValue, newValue);
|
|
3600
4118
|
if (!this.checkName(variantValues, newValue)) {
|
|
3601
|
-
|
|
3602
|
-
|
|
4119
|
+
log(
|
|
4120
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${variantValues.join('", "')}".`
|
|
3603
4121
|
);
|
|
3604
4122
|
}
|
|
3605
4123
|
}
|
|
@@ -3607,7 +4125,9 @@ const _Button = class _Button extends PxElement {
|
|
|
3607
4125
|
const values = ["", "default", "success", "error"];
|
|
3608
4126
|
this._toggleClass(oldValue, newValue);
|
|
3609
4127
|
if (!this.checkName(values, newValue)) {
|
|
3610
|
-
|
|
4128
|
+
log(
|
|
4129
|
+
`"${newValue}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${values.join('", "')}".`
|
|
4130
|
+
);
|
|
3611
4131
|
}
|
|
3612
4132
|
}
|
|
3613
4133
|
updateExtended(attributeName, newValue) {
|
|
@@ -3629,7 +4149,9 @@ const _Button = class _Button extends PxElement {
|
|
|
3629
4149
|
}
|
|
3630
4150
|
updateShape(attrName, newValue, attrValue) {
|
|
3631
4151
|
if (!checkName(attrValue, newValue)) {
|
|
3632
|
-
|
|
4152
|
+
log(
|
|
4153
|
+
`"${newValue}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4154
|
+
);
|
|
3633
4155
|
return;
|
|
3634
4156
|
}
|
|
3635
4157
|
if (newValue !== null && newValue !== "") {
|
|
@@ -3736,15 +4258,66 @@ let Button = _Button;
|
|
|
3736
4258
|
if (!customElements.get("px-button")) {
|
|
3737
4259
|
customElements.define("px-button", Button);
|
|
3738
4260
|
}
|
|
3739
|
-
|
|
4261
|
+
class ButtonWrapper extends Button {
|
|
4262
|
+
constructor() {
|
|
4263
|
+
super();
|
|
4264
|
+
__privateAdd(this, _ButtonWrapper_instances);
|
|
4265
|
+
__privateAdd(this, _wrappedInteractiveStateController);
|
|
4266
|
+
this.$el.classList.remove("btn");
|
|
4267
|
+
this.$el.classList.add("wrapper");
|
|
4268
|
+
__privateSet(this, _wrappedInteractiveStateController, new WrappedInteractiveStateController(
|
|
4269
|
+
this,
|
|
4270
|
+
this.$el,
|
|
4271
|
+
() => __privateMethod(this, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn).call(this)
|
|
4272
|
+
));
|
|
4273
|
+
}
|
|
4274
|
+
connectedCallback() {
|
|
4275
|
+
super.connectedCallback();
|
|
4276
|
+
__privateGet(this, _wrappedInteractiveStateController).connect();
|
|
4277
|
+
}
|
|
4278
|
+
disconnectedCallback() {
|
|
4279
|
+
super.disconnectedCallback();
|
|
4280
|
+
__privateGet(this, _wrappedInteractiveStateController).disconnect();
|
|
4281
|
+
}
|
|
4282
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4283
|
+
if (oldValue !== newValue) {
|
|
4284
|
+
switch (attrName) {
|
|
4285
|
+
case "loading":
|
|
4286
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4287
|
+
if (newValue !== null) {
|
|
4288
|
+
__privateGet(this, _wrappedInteractiveStateController).clearInteractiveState();
|
|
4289
|
+
}
|
|
4290
|
+
break;
|
|
4291
|
+
case "disabled":
|
|
4292
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4293
|
+
if (newValue !== null) {
|
|
4294
|
+
__privateGet(this, _wrappedInteractiveStateController).clearInteractiveState();
|
|
4295
|
+
}
|
|
4296
|
+
break;
|
|
4297
|
+
default:
|
|
4298
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4299
|
+
break;
|
|
4300
|
+
}
|
|
4301
|
+
}
|
|
4302
|
+
}
|
|
4303
|
+
}
|
|
4304
|
+
_wrappedInteractiveStateController = new WeakMap();
|
|
4305
|
+
_ButtonWrapper_instances = new WeakSet();
|
|
4306
|
+
canSetWrappedInteractiveState_fn = function() {
|
|
4307
|
+
return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
|
|
4308
|
+
};
|
|
4309
|
+
if (!customElements.get("px-button-wrapper")) {
|
|
4310
|
+
customElements.define("px-button-wrapper", ButtonWrapper);
|
|
4311
|
+
}
|
|
4312
|
+
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)}}';
|
|
3740
4313
|
const styleSheet = new CSSStyleSheet();
|
|
3741
4314
|
styleSheet.replaceSync(styles$2);
|
|
3742
|
-
class Section extends
|
|
4315
|
+
class Section extends WithExtraAttributes {
|
|
3743
4316
|
constructor() {
|
|
3744
|
-
super();
|
|
4317
|
+
super(styleSheet);
|
|
3745
4318
|
this.template = () => `
|
|
3746
|
-
<px-container border-radius="none" padding-inline="none"
|
|
3747
|
-
<div class="content-wrapper
|
|
4319
|
+
<px-container border-radius="none" padding-inline="none">
|
|
4320
|
+
<div class="content-wrapper">
|
|
3748
4321
|
<px-vstack gap="heading-to-content">
|
|
3749
4322
|
<slot name="heading"></slot>
|
|
3750
4323
|
<px-vstack gap="none">
|
|
@@ -3757,21 +4330,27 @@ class Section extends HTMLElement {
|
|
|
3757
4330
|
<slot name="overlap"></slot>
|
|
3758
4331
|
</div>
|
|
3759
4332
|
`;
|
|
3760
|
-
this.attachShadow({ mode: "open" });
|
|
3761
4333
|
this.shadowRoot.innerHTML = this.template();
|
|
3762
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
3763
4334
|
}
|
|
3764
4335
|
connectedCallback() {
|
|
3765
|
-
|
|
4336
|
+
var _a, _b;
|
|
4337
|
+
this.$container.setAttribute("background-color", this.backgroundColor);
|
|
3766
4338
|
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) {
|
|
3767
4339
|
this.$container.paddingBlock = "none";
|
|
3768
4340
|
}
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
|
|
4341
|
+
this.setHeadingSpacing = this.setHeadingSpacing.bind(this);
|
|
4342
|
+
this.setHeadingSpacing();
|
|
4343
|
+
(_a = this.$slotHeading) == null ? void 0 : _a.addEventListener("slotchange", this.setHeadingSpacing);
|
|
4344
|
+
this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this);
|
|
4345
|
+
this.toggleOverlapSpacing();
|
|
4346
|
+
(_b = this.$slotOverlap) == null ? void 0 : _b.addEventListener(
|
|
4347
|
+
"slotchange",
|
|
4348
|
+
this.toggleOverlapSpacing
|
|
4349
|
+
);
|
|
3772
4350
|
}
|
|
3773
4351
|
static get observedAttributes() {
|
|
3774
4352
|
return [
|
|
4353
|
+
...super.observedAttributes,
|
|
3775
4354
|
"background-color",
|
|
3776
4355
|
"background-gradient",
|
|
3777
4356
|
"background-image",
|
|
@@ -3799,9 +4378,6 @@ class Section extends HTMLElement {
|
|
|
3799
4378
|
"border-side--laptop"
|
|
3800
4379
|
];
|
|
3801
4380
|
}
|
|
3802
|
-
get $container() {
|
|
3803
|
-
return this.shadowRoot.querySelector("px-container");
|
|
3804
|
-
}
|
|
3805
4381
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
3806
4382
|
if (oldValue !== newValue) {
|
|
3807
4383
|
switch (name) {
|
|
@@ -3880,12 +4456,77 @@ class Section extends HTMLElement {
|
|
|
3880
4456
|
case "border-side--laptop":
|
|
3881
4457
|
this.$container.borderSideLaptop = newValue;
|
|
3882
4458
|
break;
|
|
4459
|
+
default:
|
|
4460
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
4461
|
+
break;
|
|
3883
4462
|
}
|
|
3884
4463
|
}
|
|
3885
4464
|
}
|
|
4465
|
+
disconnectedCallback() {
|
|
4466
|
+
var _a, _b;
|
|
4467
|
+
(_a = this.$slotHeading) == null ? void 0 : _a.removeEventListener(
|
|
4468
|
+
"slotchange",
|
|
4469
|
+
this.setHeadingSpacing
|
|
4470
|
+
);
|
|
4471
|
+
(_b = this.$slotOverlap) == null ? void 0 : _b.removeEventListener(
|
|
4472
|
+
"slotchange",
|
|
4473
|
+
this.toggleOverlapSpacing
|
|
4474
|
+
);
|
|
4475
|
+
}
|
|
4476
|
+
toggleOverlapSpacing() {
|
|
4477
|
+
const overlapSlot = this.$slotOverlap;
|
|
4478
|
+
const mainContentWrapper = this.$mainContentWrapper;
|
|
4479
|
+
if (!overlapSlot || !mainContentWrapper) return;
|
|
4480
|
+
const assignedNodes = overlapSlot.assignedNodes({ flatten: true });
|
|
4481
|
+
const hasOverlapContent = assignedNodes.some(this.isNotEmptyNode);
|
|
4482
|
+
mainContentWrapper.classList.toggle("overlapped", hasOverlapContent);
|
|
4483
|
+
}
|
|
4484
|
+
isNotEmptyNode(node) {
|
|
4485
|
+
if (node.nodeType === Node.ELEMENT_NODE) return true;
|
|
4486
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
4487
|
+
return (node.textContent ?? "").trim().length > 0;
|
|
4488
|
+
}
|
|
4489
|
+
return false;
|
|
4490
|
+
}
|
|
4491
|
+
setHeadingSpacing() {
|
|
4492
|
+
var _a;
|
|
4493
|
+
const headingSlot = this.$slotHeading;
|
|
4494
|
+
const vStack = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-vstack");
|
|
4495
|
+
if (headingSlot && vStack) {
|
|
4496
|
+
const hasHeadingContent = headingSlot.assignedElements().length > 0;
|
|
4497
|
+
if (hasHeadingContent) {
|
|
4498
|
+
vStack.setAttribute("gap", "heading-to-content");
|
|
4499
|
+
} else {
|
|
4500
|
+
vStack.setAttribute("gap", "none");
|
|
4501
|
+
}
|
|
4502
|
+
}
|
|
4503
|
+
}
|
|
4504
|
+
get $container() {
|
|
4505
|
+
var _a;
|
|
4506
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("px-container");
|
|
4507
|
+
}
|
|
4508
|
+
get $mainContentWrapper() {
|
|
4509
|
+
var _a;
|
|
4510
|
+
return (_a = this.$container) == null ? void 0 : _a.querySelector(".content-wrapper");
|
|
4511
|
+
}
|
|
3886
4512
|
get $slotOverlap() {
|
|
4513
|
+
var _a;
|
|
4514
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
4515
|
+
'slot[name="overlap"]'
|
|
4516
|
+
);
|
|
4517
|
+
}
|
|
4518
|
+
get $slottedOverlap() {
|
|
3887
4519
|
return this.querySelector('[slot="overlap"]');
|
|
3888
4520
|
}
|
|
4521
|
+
get $slotHeading() {
|
|
4522
|
+
var _a;
|
|
4523
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
4524
|
+
'slot[name="heading"]'
|
|
4525
|
+
);
|
|
4526
|
+
}
|
|
4527
|
+
get $slottedHeading() {
|
|
4528
|
+
return this.querySelector('[slot="heading"]');
|
|
4529
|
+
}
|
|
3889
4530
|
get backgroundColor() {
|
|
3890
4531
|
return this.getAttribute("background-color") || "none";
|
|
3891
4532
|
}
|
|
@@ -4040,7 +4681,7 @@ class Section extends HTMLElement {
|
|
|
4040
4681
|
if (!customElements.get("px-section")) {
|
|
4041
4682
|
customElements.define("px-section", Section);
|
|
4042
4683
|
}
|
|
4043
|
-
const styles$1 = ":host{display:block}:host *{box-sizing:border-box}button,a{display:
|
|
4684
|
+
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)}}";
|
|
4044
4685
|
const stylesheet$1 = new CSSStyleSheet();
|
|
4045
4686
|
stylesheet$1.replaceSync(styles$1);
|
|
4046
4687
|
class HeaderItem extends WithExtraAttributes {
|
|
@@ -4053,15 +4694,15 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4053
4694
|
this.shadowRoot.innerHTML = this.template();
|
|
4054
4695
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
4055
4696
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4056
|
-
this.role = "listitem";
|
|
4057
4697
|
if (this.internals) {
|
|
4058
4698
|
this.internals.role = "listitem";
|
|
4059
4699
|
}
|
|
4060
4700
|
}
|
|
4061
4701
|
static get observedAttributes() {
|
|
4062
|
-
return ["for", "href"];
|
|
4702
|
+
return ["for", "href", "current"];
|
|
4063
4703
|
}
|
|
4064
4704
|
connectedCallback() {
|
|
4705
|
+
this.role = "listitem";
|
|
4065
4706
|
this.setAttribute("slot", "header-entries");
|
|
4066
4707
|
if (this.$button) {
|
|
4067
4708
|
this.setupButtonA11y();
|
|
@@ -4080,9 +4721,9 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4080
4721
|
}
|
|
4081
4722
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
4082
4723
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
4083
|
-
if (name === "href" &&
|
|
4724
|
+
if (name === "href" && oldValue !== newValue) {
|
|
4084
4725
|
this.shadowRoot.innerHTML = this.template();
|
|
4085
|
-
} else if (name === "for" && this.$button
|
|
4726
|
+
} else if (name === "for" && oldValue !== newValue && this.$button) {
|
|
4086
4727
|
this.shadowRoot.innerHTML = this.template();
|
|
4087
4728
|
this.setupButtonA11y();
|
|
4088
4729
|
}
|
|
@@ -4117,6 +4758,16 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
4117
4758
|
this.$button.setAttribute("aria-controls", this.for);
|
|
4118
4759
|
}
|
|
4119
4760
|
}
|
|
4761
|
+
get current() {
|
|
4762
|
+
return this.hasAttribute("current");
|
|
4763
|
+
}
|
|
4764
|
+
set current(value) {
|
|
4765
|
+
if (value) {
|
|
4766
|
+
this.setAttribute("current", "");
|
|
4767
|
+
} else {
|
|
4768
|
+
this.removeAttribute("current");
|
|
4769
|
+
}
|
|
4770
|
+
}
|
|
4120
4771
|
get $button() {
|
|
4121
4772
|
return this.shadowRoot.querySelector("button");
|
|
4122
4773
|
}
|
|
@@ -4141,7 +4792,8 @@ const linkVariantValues = [
|
|
|
4141
4792
|
"btn-default",
|
|
4142
4793
|
"btn-secondary",
|
|
4143
4794
|
"btn-tertiary",
|
|
4144
|
-
"icon-link"
|
|
4795
|
+
"icon-link",
|
|
4796
|
+
"wrapper"
|
|
4145
4797
|
];
|
|
4146
4798
|
const linkShapeValues = ["", "default", "alternative"];
|
|
4147
4799
|
const _Link = class _Link extends PxElement {
|
|
@@ -4183,6 +4835,8 @@ const _Link = class _Link extends PxElement {
|
|
|
4183
4835
|
}
|
|
4184
4836
|
transferAccessibilityAttributes(this, this.$el, false);
|
|
4185
4837
|
}
|
|
4838
|
+
disconnectedCallback() {
|
|
4839
|
+
}
|
|
4186
4840
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4187
4841
|
if (oldValue !== newValue) {
|
|
4188
4842
|
switch (attrName) {
|
|
@@ -4266,15 +4920,16 @@ const _Link = class _Link extends PxElement {
|
|
|
4266
4920
|
this._toggleClassList(newValue);
|
|
4267
4921
|
}
|
|
4268
4922
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
4923
|
+
log(
|
|
4924
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
|
|
4925
|
+
);
|
|
4273
4926
|
}
|
|
4274
4927
|
}
|
|
4275
4928
|
updateShape(attrName, newValue, attrValue) {
|
|
4276
4929
|
if (!checkName(attrValue, newValue)) {
|
|
4277
|
-
|
|
4930
|
+
log(
|
|
4931
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4932
|
+
);
|
|
4278
4933
|
return;
|
|
4279
4934
|
}
|
|
4280
4935
|
if (newValue !== null && newValue !== "") {
|
|
@@ -4289,7 +4944,9 @@ const _Link = class _Link extends PxElement {
|
|
|
4289
4944
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
4290
4945
|
}
|
|
4291
4946
|
if (!this.checkName(attrValue, newValue)) {
|
|
4292
|
-
|
|
4947
|
+
log(
|
|
4948
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4949
|
+
);
|
|
4293
4950
|
}
|
|
4294
4951
|
}
|
|
4295
4952
|
updateExtended(attributeName, newValue) {
|
|
@@ -4422,10 +5079,54 @@ let Link = _Link;
|
|
|
4422
5079
|
if (!customElements.get("px-a")) {
|
|
4423
5080
|
customElements.define("px-a", Link);
|
|
4424
5081
|
}
|
|
5082
|
+
class LinkWrapper extends Link {
|
|
5083
|
+
constructor() {
|
|
5084
|
+
super();
|
|
5085
|
+
__privateAdd(this, _LinkWrapper_instances);
|
|
5086
|
+
__privateAdd(this, _wrappedInteractiveStateController2);
|
|
5087
|
+
this.$el.classList.add("wrapper");
|
|
5088
|
+
__privateSet(this, _wrappedInteractiveStateController2, new WrappedInteractiveStateController(
|
|
5089
|
+
this,
|
|
5090
|
+
this.$el,
|
|
5091
|
+
() => __privateMethod(this, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2).call(this)
|
|
5092
|
+
));
|
|
5093
|
+
}
|
|
5094
|
+
connectedCallback() {
|
|
5095
|
+
super.connectedCallback();
|
|
5096
|
+
__privateGet(this, _wrappedInteractiveStateController2).connect();
|
|
5097
|
+
}
|
|
5098
|
+
disconnectedCallback() {
|
|
5099
|
+
super.disconnectedCallback();
|
|
5100
|
+
__privateGet(this, _wrappedInteractiveStateController2).disconnect();
|
|
5101
|
+
}
|
|
5102
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5103
|
+
if (oldValue !== newValue) {
|
|
5104
|
+
switch (attrName) {
|
|
5105
|
+
case "disabled":
|
|
5106
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5107
|
+
if (newValue !== null) {
|
|
5108
|
+
__privateGet(this, _wrappedInteractiveStateController2).clearInteractiveState();
|
|
5109
|
+
}
|
|
5110
|
+
break;
|
|
5111
|
+
default:
|
|
5112
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5113
|
+
break;
|
|
5114
|
+
}
|
|
5115
|
+
}
|
|
5116
|
+
}
|
|
5117
|
+
}
|
|
5118
|
+
_wrappedInteractiveStateController2 = new WeakMap();
|
|
5119
|
+
_LinkWrapper_instances = new WeakSet();
|
|
5120
|
+
canSetWrappedInteractiveState_fn2 = function() {
|
|
5121
|
+
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
5122
|
+
};
|
|
5123
|
+
if (!customElements.get("px-a-wrapper")) {
|
|
5124
|
+
customElements.define("px-a-wrapper", LinkWrapper);
|
|
5125
|
+
}
|
|
4425
5126
|
class MDDLink extends HTMLElement {
|
|
4426
5127
|
constructor() {
|
|
4427
5128
|
super();
|
|
4428
|
-
this.template = `<px-a font-weight="title" font-size="body-
|
|
5129
|
+
this.template = `<px-a font-weight="title" font-size="body-m" color="brand" variant="no-style">
|
|
4429
5130
|
<slot></slot>
|
|
4430
5131
|
</px-a>`;
|
|
4431
5132
|
this.attachShadow({ mode: "open" });
|
|
@@ -4441,7 +5142,7 @@ class MDDLink extends HTMLElement {
|
|
|
4441
5142
|
if (!customElements.get("px-mdd-a")) {
|
|
4442
5143
|
customElements.define("px-mdd-a", MDDLink);
|
|
4443
5144
|
}
|
|
4444
|
-
const styles =
|
|
5145
|
+
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)}@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)}}@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)}}';
|
|
4445
5146
|
function isObject(value) {
|
|
4446
5147
|
var type = typeof value;
|
|
4447
5148
|
return value != null && (type == "object" || type == "function");
|
|
@@ -4640,14 +5341,21 @@ class Header extends WithExtraAttributes {
|
|
|
4640
5341
|
<div>
|
|
4641
5342
|
<header>
|
|
4642
5343
|
<slot name="skip"></slot>
|
|
4643
|
-
<px-section
|
|
4644
|
-
|
|
4645
|
-
|
|
5344
|
+
<px-section
|
|
5345
|
+
id="navigation-container"
|
|
5346
|
+
padding-bottom="none" padding-bottom--mobile="s" padding-bottom--tablet="s"
|
|
5347
|
+
padding-top="s"
|
|
5348
|
+
background-color="none"
|
|
5349
|
+
>
|
|
5350
|
+
<div id="dropdown-zone--desktop">
|
|
4646
5351
|
<slot name="target-group"></slot>
|
|
4647
5352
|
<px-spacer></px-spacer>
|
|
4648
5353
|
<slot name="user-language"></slot>
|
|
4649
|
-
</
|
|
4650
|
-
<px-hstack gap="default" wrap="wrap"
|
|
5354
|
+
</div>
|
|
5355
|
+
<px-hstack gap="default" wrap="wrap" id="navigation-wrapper">
|
|
5356
|
+
<px-hstack align-items="center">
|
|
5357
|
+
<slot name="header-logo"></slot>
|
|
5358
|
+
</px-hstack>
|
|
4651
5359
|
<slot name="header-logo"></slot>
|
|
4652
5360
|
<nav id="primary-navigation" aria-label="${this.primaryNavigationAriaLabel}">
|
|
4653
5361
|
<div role="list">
|
|
@@ -4657,12 +5365,13 @@ class Header extends WithExtraAttributes {
|
|
|
4657
5365
|
</div>
|
|
4658
5366
|
</nav>
|
|
4659
5367
|
<px-spacer></px-spacer>
|
|
4660
|
-
<px-hstack gap--mobile="
|
|
5368
|
+
<px-hstack gap--mobile="s" gap--tablet="s" align-items="center" gap="default">
|
|
4661
5369
|
<slot name="header-actions"></slot>
|
|
4662
|
-
<px-button-icon
|
|
4663
|
-
|
|
4664
|
-
|
|
4665
|
-
|
|
5370
|
+
<px-button-icon
|
|
5371
|
+
id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
|
|
5372
|
+
aria-expanded="false" hidden--laptop hidden--desktop
|
|
5373
|
+
>
|
|
5374
|
+
<px-icon name="burger_menu" from="lavender" size="m"></px-icon>
|
|
4666
5375
|
</px-button-icon>
|
|
4667
5376
|
</px-hstack>
|
|
4668
5377
|
</px-hstack>
|
|
@@ -4677,19 +5386,19 @@ class Header extends WithExtraAttributes {
|
|
|
4677
5386
|
</div>
|
|
4678
5387
|
`;
|
|
4679
5388
|
__privateSet(this, _onResize, () => {
|
|
4680
|
-
if (window.innerWidth >=
|
|
5389
|
+
if (window.innerWidth >= 1024) {
|
|
4681
5390
|
__privateMethod(this, _Header_instances, hideMobileMenu_fn).call(this);
|
|
4682
5391
|
__privateMethod(this, _Header_instances, setMDDDialogOffset_fn).call(this);
|
|
4683
5392
|
}
|
|
4684
5393
|
});
|
|
4685
5394
|
this.shadowRoot.innerHTML = this.template;
|
|
4686
5395
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4687
|
-
this.role = "navigation";
|
|
4688
5396
|
if (this.internals) {
|
|
4689
5397
|
this.internals.role = "navigation";
|
|
4690
5398
|
}
|
|
4691
5399
|
}
|
|
4692
5400
|
connectedCallback() {
|
|
5401
|
+
this.role = "navigation";
|
|
4693
5402
|
this.addEventListener("click", (event) => {
|
|
4694
5403
|
const targetElement = event.target.closest(
|
|
4695
5404
|
"px-header-item"
|
|
@@ -4724,11 +5433,9 @@ class Header extends WithExtraAttributes {
|
|
|
4724
5433
|
});
|
|
4725
5434
|
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4726
5435
|
});
|
|
4727
|
-
this.
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4731
|
-
}
|
|
5436
|
+
this.$burgerMenu.addEventListener("click", () => {
|
|
5437
|
+
this.$burgerMenu.setAttribute("aria-expanded", "true");
|
|
5438
|
+
__privateMethod(this, _Header_instances, showMobileMenu_fn).call(this);
|
|
4732
5439
|
});
|
|
4733
5440
|
this.addEventListener("close-panel", () => {
|
|
4734
5441
|
__privateMethod(this, _Header_instances, hidePanel_fn).call(this);
|
|
@@ -4791,7 +5498,7 @@ class Header extends WithExtraAttributes {
|
|
|
4791
5498
|
return this.shadowRoot.querySelector("#backdrop-filter");
|
|
4792
5499
|
}
|
|
4793
5500
|
get $burgerMenu() {
|
|
4794
|
-
return this.shadowRoot.querySelector("
|
|
5501
|
+
return this.shadowRoot.querySelector("#burger-menu");
|
|
4795
5502
|
}
|
|
4796
5503
|
get $slotMain() {
|
|
4797
5504
|
return this.querySelector('[slot="main"]');
|
|
@@ -4887,8 +5594,13 @@ hideMobileMenu_fn = function() {
|
|
|
4887
5594
|
if (__privateGet(this, _Header_instances, $mobileMenu_get)) {
|
|
4888
5595
|
__privateGet(this, _Header_instances, $mobileMenu_get).$megaDropDown.hidden = true;
|
|
4889
5596
|
this.$burgerMenu.setAttribute("aria-expanded", "false");
|
|
4890
|
-
|
|
4891
|
-
|
|
5597
|
+
const anyMDDOpen = Array.from(__privateGet(this, _Header_instances, $megaDropdowns_get)).some(
|
|
5598
|
+
(mdd) => !mdd.hidden
|
|
5599
|
+
);
|
|
5600
|
+
if (!anyMDDOpen) {
|
|
5601
|
+
document.body.style.overflow = "auto";
|
|
5602
|
+
this.$backdropFilter.style.display = "none";
|
|
5603
|
+
}
|
|
4892
5604
|
}
|
|
4893
5605
|
};
|
|
4894
5606
|
hidePanel_fn = function() {
|
|
@@ -4917,8 +5629,8 @@ $megaDropdowns_get = function() {
|
|
|
4917
5629
|
if (!customElements.get("px-header")) {
|
|
4918
5630
|
customElements.define("px-header", Header);
|
|
4919
5631
|
}
|
|
4920
|
-
const contentHeaderCss =
|
|
4921
|
-
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
|
|
5632
|
+
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))}}';
|
|
5633
|
+
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}}";
|
|
4922
5634
|
const gridStyles = new CSSStyleSheet();
|
|
4923
5635
|
gridStyles.replaceSync(gridCss);
|
|
4924
5636
|
const gridColsValues = [
|
|
@@ -5051,7 +5763,9 @@ const _Grid = class _Grid extends PxElement {
|
|
|
5051
5763
|
}
|
|
5052
5764
|
updateGap(oldValue, newValue, attrValue) {
|
|
5053
5765
|
if (!this.checkName(attrValue, newValue)) {
|
|
5054
|
-
|
|
5766
|
+
log(
|
|
5767
|
+
`"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
5768
|
+
);
|
|
5055
5769
|
return;
|
|
5056
5770
|
}
|
|
5057
5771
|
const updateGapStyle = (value) => {
|
|
@@ -5075,7 +5789,9 @@ const _Grid = class _Grid extends PxElement {
|
|
|
5075
5789
|
}
|
|
5076
5790
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
5077
5791
|
if (!this.checkName(attrValues, newValue)) {
|
|
5078
|
-
|
|
5792
|
+
log(
|
|
5793
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
5794
|
+
);
|
|
5079
5795
|
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
|
|
5080
5796
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
5081
5797
|
} else {
|
|
@@ -5269,21 +5985,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5269
5985
|
this.template = () => `<div class="content-header">
|
|
5270
5986
|
<div class="contrast-helper"></div>
|
|
5271
5987
|
<px-section padding-block="l">
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5285
|
-
|
|
5286
|
-
|
|
5988
|
+
<px-grid gap="none">
|
|
5989
|
+
<px-container padding="none" border-radius="none" background-color="none" >
|
|
5990
|
+
<div class="content-header-content">
|
|
5991
|
+
<px-vstack gap="heading-to-subtitle">
|
|
5992
|
+
<px-h1><slot></slot></px-h1>
|
|
5993
|
+
<slot name="subtitle"></slot>
|
|
5994
|
+
</px-vstack>
|
|
5995
|
+
<px-stack gap="s" direction="row" direction--mobile="column">
|
|
5996
|
+
<slot name="patch" shrink></slot>
|
|
5997
|
+
<slot name="patch-description"></slot>
|
|
5998
|
+
</px-stack>
|
|
5999
|
+
</div>
|
|
6000
|
+
</px-container>
|
|
6001
|
+
</px-grid>
|
|
6002
|
+
<slot name="overlap" slot="overlap"></slot>
|
|
5287
6003
|
</px-section>
|
|
5288
6004
|
</div>`;
|
|
5289
6005
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -5305,27 +6021,22 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5305
6021
|
"has-gridding--mobile",
|
|
5306
6022
|
"has-gridding--tablet",
|
|
5307
6023
|
"has-gridding--laptop",
|
|
6024
|
+
"has-gridding--desktop",
|
|
5308
6025
|
"inverted"
|
|
5309
6026
|
];
|
|
5310
6027
|
}
|
|
5311
6028
|
connectedCallback() {
|
|
5312
|
-
|
|
5313
|
-
|
|
5314
|
-
|
|
5315
|
-
|
|
5316
|
-
|
|
5317
|
-
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
5318
|
-
}
|
|
5319
|
-
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
5320
|
-
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
5321
|
-
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
5322
|
-
this.$patchDescriptionSlot.removeAttribute("color");
|
|
5323
|
-
}
|
|
5324
|
-
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
5325
|
-
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
5326
|
-
}
|
|
5327
|
-
}
|
|
6029
|
+
var _a, _b;
|
|
6030
|
+
this.styleSubtitleSlot = this.styleSubtitleSlot.bind(this);
|
|
6031
|
+
this.stylepatchDescriptionSlotted = this.stylepatchDescriptionSlotted.bind(this);
|
|
6032
|
+
this.styleSubtitleSlot();
|
|
6033
|
+
this.stylepatchDescriptionSlotted();
|
|
5328
6034
|
this.createGridding();
|
|
6035
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.addEventListener("slotchange", this.styleSubtitleSlot);
|
|
6036
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.addEventListener(
|
|
6037
|
+
"slotchange",
|
|
6038
|
+
this.stylepatchDescriptionSlotted
|
|
6039
|
+
);
|
|
5329
6040
|
}
|
|
5330
6041
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5331
6042
|
if (oldValue !== newValue) {
|
|
@@ -5358,6 +6069,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5358
6069
|
case "has-gridding--mobile":
|
|
5359
6070
|
case "has-gridding--tablet":
|
|
5360
6071
|
case "has-gridding--laptop":
|
|
6072
|
+
case "has-gridding--desktop":
|
|
5361
6073
|
this.createGridding(newValue);
|
|
5362
6074
|
break;
|
|
5363
6075
|
case "inverted":
|
|
@@ -5375,39 +6087,75 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5375
6087
|
}
|
|
5376
6088
|
}
|
|
5377
6089
|
}
|
|
6090
|
+
disconnectedCallback() {
|
|
6091
|
+
var _a, _b;
|
|
6092
|
+
(_a = this.$subtitleSlot) == null ? void 0 : _a.removeEventListener(
|
|
6093
|
+
"slotchange",
|
|
6094
|
+
this.styleSubtitleSlot
|
|
6095
|
+
);
|
|
6096
|
+
(_b = this.$patchDescriptionSlot) == null ? void 0 : _b.removeEventListener(
|
|
6097
|
+
"slotchange",
|
|
6098
|
+
this.stylepatchDescriptionSlotted
|
|
6099
|
+
);
|
|
6100
|
+
}
|
|
6101
|
+
stylepatchDescriptionSlotted() {
|
|
6102
|
+
if (this.$patchDescriptionSlotted) {
|
|
6103
|
+
if (this.$patchDescriptionSlotted.localName === "px-p") {
|
|
6104
|
+
this.$patchDescriptionSlotted.setAttribute("variant", "default");
|
|
6105
|
+
}
|
|
6106
|
+
if (this.$patchDescriptionSlotted.localName === "px-p" || this.$patchDescriptionSlotted.localName === "px-span") {
|
|
6107
|
+
this.$patchDescriptionSlotted.setAttribute("font-size", "body-l");
|
|
6108
|
+
this.$patchDescriptionSlotted.removeAttribute("font-weight");
|
|
6109
|
+
this.$patchDescriptionSlotted.removeAttribute("color");
|
|
6110
|
+
}
|
|
6111
|
+
if (this.$patchDescriptionSlotted.localName === "px-price") {
|
|
6112
|
+
this.$patchDescriptionSlotted.setAttribute("size", "m");
|
|
6113
|
+
}
|
|
6114
|
+
}
|
|
6115
|
+
}
|
|
6116
|
+
styleSubtitleSlot() {
|
|
6117
|
+
if (this.$subtitleSlotted) {
|
|
6118
|
+
this.$subtitleSlotted.setAttribute("variant", "subtitle");
|
|
6119
|
+
}
|
|
6120
|
+
}
|
|
5378
6121
|
createGridding(value) {
|
|
5379
6122
|
const breakpoints = [
|
|
5380
|
-
{ prop: "hasGridding",
|
|
6123
|
+
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
5381
6124
|
{
|
|
5382
6125
|
prop: "hasGriddingMobile",
|
|
5383
|
-
|
|
6126
|
+
gridAttr: "grid-cols--mobile",
|
|
5384
6127
|
attr: "col-span--mobile"
|
|
5385
6128
|
},
|
|
5386
6129
|
{
|
|
5387
6130
|
prop: "hasGriddingTablet",
|
|
5388
|
-
|
|
6131
|
+
gridAttr: "grid-cols--tablet",
|
|
5389
6132
|
attr: "col-span--tablet"
|
|
5390
6133
|
},
|
|
5391
6134
|
{
|
|
5392
6135
|
prop: "hasGriddingLaptop",
|
|
5393
|
-
|
|
6136
|
+
gridAttr: "grid-cols--laptop",
|
|
5394
6137
|
attr: "col-span--laptop"
|
|
6138
|
+
},
|
|
6139
|
+
{
|
|
6140
|
+
prop: "hasGriddingDesktop",
|
|
6141
|
+
gridAttr: "grid-cols--desktop",
|
|
6142
|
+
attr: "col-span--desktop"
|
|
5395
6143
|
}
|
|
5396
6144
|
];
|
|
5397
6145
|
const spanElement = this.shadowRoot.querySelector(
|
|
5398
6146
|
"px-grid > px-container"
|
|
5399
6147
|
);
|
|
5400
6148
|
if (value !== null) {
|
|
5401
|
-
breakpoints.forEach(({ prop,
|
|
6149
|
+
breakpoints.forEach(({ prop, gridAttr, attr }) => {
|
|
5402
6150
|
if (this[prop]) {
|
|
5403
|
-
this.$grid
|
|
5404
|
-
spanElement.setAttribute(attr, "
|
|
6151
|
+
this.$grid.setAttribute(gridAttr, "2");
|
|
6152
|
+
spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
|
|
5405
6153
|
}
|
|
5406
6154
|
});
|
|
5407
6155
|
} else {
|
|
5408
|
-
breakpoints.forEach(({
|
|
5409
|
-
this.$grid
|
|
5410
|
-
spanElement.
|
|
6156
|
+
breakpoints.forEach(({ gridAttr, attr }) => {
|
|
6157
|
+
this.$grid.setAttribute(gridAttr, "1");
|
|
6158
|
+
spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
|
|
5411
6159
|
});
|
|
5412
6160
|
}
|
|
5413
6161
|
}
|
|
@@ -5421,9 +6169,21 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5421
6169
|
return this.shadowRoot.querySelector("px-h1");
|
|
5422
6170
|
}
|
|
5423
6171
|
get $subtitleSlot() {
|
|
6172
|
+
var _a;
|
|
6173
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6174
|
+
'slot[name="subtitle"]'
|
|
6175
|
+
);
|
|
6176
|
+
}
|
|
6177
|
+
get $subtitleSlotted() {
|
|
5424
6178
|
return this.querySelector('[slot="subtitle"]');
|
|
5425
6179
|
}
|
|
5426
6180
|
get $patchDescriptionSlot() {
|
|
6181
|
+
var _a;
|
|
6182
|
+
return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
|
|
6183
|
+
'slot[name="patch-description"]'
|
|
6184
|
+
);
|
|
6185
|
+
}
|
|
6186
|
+
get $patchDescriptionSlotted() {
|
|
5427
6187
|
return this.querySelector('[slot="patch-description"]');
|
|
5428
6188
|
}
|
|
5429
6189
|
get $overlapSlot() {
|
|
@@ -5540,6 +6300,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
5540
6300
|
this.removeAttribute("has-gridding--laptop");
|
|
5541
6301
|
}
|
|
5542
6302
|
}
|
|
6303
|
+
get hasGriddingDesktop() {
|
|
6304
|
+
return this.hasAttribute("has-gridding--desktop");
|
|
6305
|
+
}
|
|
6306
|
+
set hasGriddingDesktop(value) {
|
|
6307
|
+
if (value) {
|
|
6308
|
+
this.setAttribute("has-gridding--desktop", "");
|
|
6309
|
+
} else {
|
|
6310
|
+
this.removeAttribute("has-gridding--desktop");
|
|
6311
|
+
}
|
|
6312
|
+
}
|
|
5543
6313
|
get inverted() {
|
|
5544
6314
|
return this.hasAttribute("inverted");
|
|
5545
6315
|
}
|
|
@@ -5575,5 +6345,6 @@ export {
|
|
|
5575
6345
|
Typography,
|
|
5576
6346
|
contentAlignmentValues,
|
|
5577
6347
|
gridColsValues,
|
|
5578
|
-
itemsAlignmentValues
|
|
6348
|
+
itemsAlignmentValues,
|
|
6349
|
+
statusValues
|
|
5579
6350
|
};
|