@proximus/lavender-mega-dropdown 2.0.0-alpha.92 → 2.0.0-alpha.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +245 -245
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
1
|
+
var ot = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var I = (s, t, e) => t.has(s) ||
|
|
5
|
-
var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ?
|
|
4
|
+
var I = (s, t, e) => t.has(s) || ot("Cannot " + e);
|
|
5
|
+
var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, r) => (I(s, t, "write to private field"), r ? r.call(s, e) : t.set(s, e), e), P = (s, t, e) => (I(s, t, "access private method"), e);
|
|
6
6
|
import { PxElement as $, transferAccessibilityAttributes as it, log as d, checkName as w, WrappedInteractiveStateController as at, WithExtraAttributes as st, iconSizeValuesKC as qt, textalignValues as nt, colorValues as Y, headingValues as dt, cssTokenBreakpoints as h, paddingValues as u, gapValues as Dt, boxShadowValues as jt, backgroundSizeValues as Nt, noBorderRadiusValues as _t, borderRadiusValues as Wt, borderSideValues as Ft, borderValues as Gt, gradientValues as Yt, backgroundColorValues as lt, borderColorValues as Xt, fontweightValues as pt, fontsizeValues as bt } from "@proximus/lavender-common";
|
|
7
7
|
import "@proximus/lavender-layout";
|
|
8
|
-
const ct = `.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-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)}.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 only screen and (max-width: 47.938em){.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 only screen and (min-width: 48em) and (max-width: 64em){.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 only screen and (min-width: 48em){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{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 only screen and (min-width: 64.0625em) and (max-width: 90em){.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 only screen and (min-width: 64.0625em){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{padding:0}}@media only screen and (min-width: 90.0625em){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)}}`, ht = ':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 only screen and (min-width: 768px){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 only screen and (min-width: 1025px){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 only screen and (min-width: 90.0625em){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)}}', Zt = ".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 only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Kt = ":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 only screen and (min-width: 768px){.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 only screen and (min-width: 1025px){.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)}}", gt = new CSSStyleSheet(), ut = new CSSStyleSheet(), xt = new CSSStyleSheet(), vt = new CSSStyleSheet();
|
|
8
|
+
const ct = `.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-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)}.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{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: 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{padding:0}}@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)}}`, ht = ':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)}}', Zt = ".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)}}", Kt = ":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)}}", gt = new CSSStyleSheet(), ut = new CSSStyleSheet(), xt = new CSSStyleSheet(), vt = new CSSStyleSheet();
|
|
9
9
|
gt.replaceSync(ct);
|
|
10
10
|
ut.replaceSync(ht);
|
|
11
11
|
xt.replaceSync(Zt);
|
|
@@ -58,62 +58,62 @@ const Ut = [
|
|
|
58
58
|
connectedCallback() {
|
|
59
59
|
const t = this.querySelectorAll("px-icon");
|
|
60
60
|
t && t.forEach((e) => {
|
|
61
|
-
const
|
|
61
|
+
const r = e.getAttribute("size"), o = e.getAttribute("color");
|
|
62
62
|
e && (e.addEventListener("click", () => {
|
|
63
63
|
this.$el.focus();
|
|
64
|
-
}),
|
|
64
|
+
}), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
|
|
65
65
|
}), it(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
66
|
-
var
|
|
67
|
-
e.preventDefault(), (
|
|
66
|
+
var r;
|
|
67
|
+
e.preventDefault(), (r = this.closest("form")) == null || r.submit();
|
|
68
68
|
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
69
|
-
var
|
|
70
|
-
e.preventDefault(), (
|
|
69
|
+
var r;
|
|
70
|
+
e.preventDefault(), (r = this.closest("form")) == null || r.reset();
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
disconnectedCallback() {
|
|
74
74
|
}
|
|
75
|
-
attributeChangedCallback(t, e,
|
|
76
|
-
if (e !==
|
|
75
|
+
attributeChangedCallback(t, e, r) {
|
|
76
|
+
if (e !== r)
|
|
77
77
|
switch (t) {
|
|
78
78
|
case "variant":
|
|
79
|
-
this.updateVariant(e,
|
|
79
|
+
this.updateVariant(e, r);
|
|
80
80
|
break;
|
|
81
81
|
case "state":
|
|
82
|
-
this.updateState(e,
|
|
82
|
+
this.updateState(e, r);
|
|
83
83
|
break;
|
|
84
84
|
case "extended":
|
|
85
85
|
case "extended--mobile":
|
|
86
86
|
case "extended--tablet":
|
|
87
87
|
case "extended--laptop":
|
|
88
88
|
case "extended--desktop":
|
|
89
|
-
this.updateExtended(t,
|
|
89
|
+
this.updateExtended(t, r);
|
|
90
90
|
break;
|
|
91
91
|
case "loading":
|
|
92
92
|
this.updateLoading();
|
|
93
93
|
break;
|
|
94
94
|
case "disabled":
|
|
95
|
-
super.attributeChangedCallback(t, e,
|
|
95
|
+
super.attributeChangedCallback(t, e, r);
|
|
96
96
|
break;
|
|
97
97
|
case "shape":
|
|
98
98
|
case "shape--mobile":
|
|
99
99
|
case "shape--tablet":
|
|
100
100
|
case "shape--laptop":
|
|
101
101
|
case "shape--desktop":
|
|
102
|
-
this.updateShape(t,
|
|
102
|
+
this.updateShape(t, r, Jt);
|
|
103
103
|
break;
|
|
104
104
|
case "aria-expanded":
|
|
105
|
-
|
|
105
|
+
r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
|
|
106
106
|
break;
|
|
107
107
|
default:
|
|
108
|
-
super.attributeChangedCallback(t, e,
|
|
108
|
+
super.attributeChangedCallback(t, e, r);
|
|
109
109
|
break;
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
checkClass(t) {
|
|
113
113
|
if (t.startsWith("patch-")) {
|
|
114
114
|
const e = t.split(/-(.*)/s);
|
|
115
|
-
for (const
|
|
116
|
-
|
|
115
|
+
for (const r of e)
|
|
116
|
+
r != "" && this.$el.classList.toggle(r);
|
|
117
117
|
} else
|
|
118
118
|
this.$el.classList.toggle(t);
|
|
119
119
|
}
|
|
@@ -126,8 +126,8 @@ const Ut = [
|
|
|
126
126
|
);
|
|
127
127
|
}
|
|
128
128
|
updateState(t, e) {
|
|
129
|
-
const
|
|
130
|
-
this._toggleClass(t, e), this.checkName(
|
|
129
|
+
const r = ["", "default", "success", "error"];
|
|
130
|
+
this._toggleClass(t, e), this.checkName(r, e) || d(
|
|
131
131
|
`${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
|
|
132
132
|
);
|
|
133
133
|
}
|
|
@@ -138,8 +138,8 @@ const Ut = [
|
|
|
138
138
|
const t = this.querySelector("px-spinner");
|
|
139
139
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
140
140
|
}
|
|
141
|
-
updateShape(t, e,
|
|
142
|
-
if (!w(
|
|
141
|
+
updateShape(t, e, r) {
|
|
142
|
+
if (!w(r, e)) {
|
|
143
143
|
d(
|
|
144
144
|
`${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
|
|
145
145
|
);
|
|
@@ -259,17 +259,17 @@ class Qt extends C {
|
|
|
259
259
|
disconnectedCallback() {
|
|
260
260
|
super.disconnectedCallback(), n(this, x).disconnect();
|
|
261
261
|
}
|
|
262
|
-
attributeChangedCallback(e,
|
|
263
|
-
if (
|
|
262
|
+
attributeChangedCallback(e, r, o) {
|
|
263
|
+
if (r !== o)
|
|
264
264
|
switch (e) {
|
|
265
265
|
case "loading":
|
|
266
|
-
super.attributeChangedCallback(e,
|
|
266
|
+
super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
|
|
267
267
|
break;
|
|
268
268
|
case "disabled":
|
|
269
|
-
super.attributeChangedCallback(e,
|
|
269
|
+
super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
|
|
270
270
|
break;
|
|
271
271
|
default:
|
|
272
|
-
super.attributeChangedCallback(e,
|
|
272
|
+
super.attributeChangedCallback(e, r, o);
|
|
273
273
|
break;
|
|
274
274
|
}
|
|
275
275
|
}
|
|
@@ -327,19 +327,19 @@ const te = [
|
|
|
327
327
|
"StateDisabled"
|
|
328
328
|
], ee = ["Inherit", ...te].map(
|
|
329
329
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
330
|
-
),
|
|
331
|
-
ft.replaceSync(
|
|
330
|
+
), re = ":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)}", ft = new CSSStyleSheet();
|
|
331
|
+
ft.replaceSync(re);
|
|
332
332
|
var m, b, E;
|
|
333
|
-
class
|
|
333
|
+
class oe extends st {
|
|
334
334
|
constructor(...e) {
|
|
335
|
-
var
|
|
335
|
+
var r;
|
|
336
336
|
super(...e, ft);
|
|
337
337
|
c(this, m);
|
|
338
338
|
c(this, b);
|
|
339
339
|
c(this, E, () => `<svg aria-hidden="true">
|
|
340
340
|
<use></use>
|
|
341
341
|
</svg>`);
|
|
342
|
-
this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (
|
|
342
|
+
this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (r = this.attachInternals) == null ? void 0 : r.call(this)), n(this, b) && (n(this, b).role = "img");
|
|
343
343
|
}
|
|
344
344
|
static get observedAttributes() {
|
|
345
345
|
return [
|
|
@@ -353,17 +353,17 @@ class re extends st {
|
|
|
353
353
|
"disabled"
|
|
354
354
|
];
|
|
355
355
|
}
|
|
356
|
-
attributeChangedCallback(e,
|
|
357
|
-
if (
|
|
356
|
+
attributeChangedCallback(e, r, o) {
|
|
357
|
+
if (r !== o)
|
|
358
358
|
switch (e) {
|
|
359
359
|
case "name":
|
|
360
|
-
this.updateName(
|
|
360
|
+
this.updateName(r, o);
|
|
361
361
|
break;
|
|
362
362
|
case "size":
|
|
363
|
-
this.updateAttribute(e,
|
|
363
|
+
this.updateAttribute(e, r, o, qt);
|
|
364
364
|
break;
|
|
365
365
|
case "color":
|
|
366
|
-
this.updateAttribute(e,
|
|
366
|
+
this.updateAttribute(e, r, o, ee);
|
|
367
367
|
break;
|
|
368
368
|
case "disabled":
|
|
369
369
|
this.color = "state-disabled";
|
|
@@ -371,7 +371,7 @@ class re extends st {
|
|
|
371
371
|
case "aria-label":
|
|
372
372
|
if (!n(this, b))
|
|
373
373
|
return;
|
|
374
|
-
|
|
374
|
+
o ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
375
375
|
break;
|
|
376
376
|
}
|
|
377
377
|
}
|
|
@@ -379,27 +379,27 @@ class re extends st {
|
|
|
379
379
|
this.role = "img";
|
|
380
380
|
const e = document.querySelectorAll("px-icon-set");
|
|
381
381
|
e || console.log("<px-icon-set> component not found");
|
|
382
|
-
for (const
|
|
383
|
-
if (!
|
|
382
|
+
for (const r of e) {
|
|
383
|
+
if (!r.getAttribute("name") || !r.getAttribute("src")) {
|
|
384
384
|
console.error("Icon name or src not found");
|
|
385
385
|
continue;
|
|
386
386
|
}
|
|
387
|
-
|
|
387
|
+
r.getAttribute("name") === this.from && r.getAttribute("type") !== "font" && (k(this, m, r.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
388
388
|
"href",
|
|
389
389
|
`${n(this, m)}#icon-${this.name}`
|
|
390
390
|
));
|
|
391
391
|
}
|
|
392
392
|
!this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
393
393
|
}
|
|
394
|
-
updateAttribute(e,
|
|
395
|
-
|
|
396
|
-
`${
|
|
394
|
+
updateAttribute(e, r, o, i) {
|
|
395
|
+
r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(i, o) || d(
|
|
396
|
+
`${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
397
397
|
);
|
|
398
398
|
}
|
|
399
|
-
updateName(e,
|
|
399
|
+
updateName(e, r) {
|
|
400
400
|
n(this, m) && this.$el.firstElementChild.setAttribute(
|
|
401
401
|
"href",
|
|
402
|
-
`${n(this, m)}#icon-${
|
|
402
|
+
`${n(this, m)}#icon-${r}`
|
|
403
403
|
);
|
|
404
404
|
}
|
|
405
405
|
get $el() {
|
|
@@ -449,8 +449,8 @@ class re extends st {
|
|
|
449
449
|
}
|
|
450
450
|
}
|
|
451
451
|
m = new WeakMap(), b = new WeakMap(), E = new WeakMap();
|
|
452
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
453
|
-
const kt = "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 only screen and (min-width: 48em){::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 only screen and (min-width: 64.0625em){::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 only screen and (min-width: 90.0625em){::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)}}", X = ".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 only screen and (min-width: 48em){.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)}}@media only screen and (min-width: 64.0625em){.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)}", yt = new CSSStyleSheet();
|
|
452
|
+
customElements.get("px-icon") || customElements.define("px-icon", oe);
|
|
453
|
+
const kt = "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)}}", X = ".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-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)}}@media screen and (min-width: 64.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)}", yt = new CSSStyleSheet();
|
|
454
454
|
yt.replaceSync(kt);
|
|
455
455
|
const At = new CSSStyleSheet();
|
|
456
456
|
At.replaceSync(X);
|
|
@@ -477,43 +477,43 @@ class A extends $ {
|
|
|
477
477
|
"auto-spacing"
|
|
478
478
|
];
|
|
479
479
|
}
|
|
480
|
-
attributeChangedCallback(t, e,
|
|
481
|
-
if (e !==
|
|
480
|
+
attributeChangedCallback(t, e, r) {
|
|
481
|
+
if (e !== r)
|
|
482
482
|
switch (t) {
|
|
483
483
|
case "variant":
|
|
484
|
-
this.updateAttribute(t, e,
|
|
484
|
+
this.updateAttribute(t, e, r, dt);
|
|
485
485
|
break;
|
|
486
486
|
case "color":
|
|
487
|
-
this.updateColor(e,
|
|
487
|
+
this.updateColor(e, r, Y);
|
|
488
488
|
break;
|
|
489
489
|
case "text-align":
|
|
490
490
|
case "text-align--mobile":
|
|
491
491
|
case "text-align--tablet":
|
|
492
492
|
case "text-align--laptop":
|
|
493
493
|
case "text-align--desktop":
|
|
494
|
-
this.updateTextAlign(t, e,
|
|
494
|
+
this.updateTextAlign(t, e, r, nt);
|
|
495
495
|
break;
|
|
496
496
|
default:
|
|
497
|
-
super.attributeChangedCallback(t, e,
|
|
497
|
+
super.attributeChangedCallback(t, e, r);
|
|
498
498
|
break;
|
|
499
499
|
}
|
|
500
500
|
}
|
|
501
501
|
toggleClass(t, e) {
|
|
502
502
|
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
503
503
|
}
|
|
504
|
-
updateAttribute(t, e,
|
|
505
|
-
this.checkName(
|
|
506
|
-
`${
|
|
504
|
+
updateAttribute(t, e, r, o) {
|
|
505
|
+
this.checkName(o, r) ? this.toggleClass(e, r) : d(
|
|
506
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
507
507
|
);
|
|
508
508
|
}
|
|
509
|
-
updateColor(t, e,
|
|
510
|
-
if (!this.checkName(
|
|
509
|
+
updateColor(t, e, r) {
|
|
510
|
+
if (!this.checkName(r, e)) {
|
|
511
511
|
d(
|
|
512
512
|
`${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
|
|
513
513
|
);
|
|
514
514
|
return;
|
|
515
515
|
}
|
|
516
|
-
const
|
|
516
|
+
const o = (i) => {
|
|
517
517
|
i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
|
|
518
518
|
"--heading-color-default",
|
|
519
519
|
`var(--px-color-text-${i}-default)`
|
|
@@ -522,12 +522,12 @@ class A extends $ {
|
|
|
522
522
|
`var(--px-color-text-${i}-inverted)`
|
|
523
523
|
));
|
|
524
524
|
};
|
|
525
|
-
|
|
525
|
+
o(t), o(e);
|
|
526
526
|
}
|
|
527
|
-
updateTextAlign(t, e,
|
|
528
|
-
if (!this.checkName(
|
|
527
|
+
updateTextAlign(t, e, r, o) {
|
|
528
|
+
if (!this.checkName(o, r)) {
|
|
529
529
|
d(
|
|
530
|
-
`${
|
|
530
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
531
531
|
);
|
|
532
532
|
return;
|
|
533
533
|
}
|
|
@@ -539,11 +539,11 @@ class A extends $ {
|
|
|
539
539
|
};
|
|
540
540
|
if (t === "text-align")
|
|
541
541
|
["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
|
|
542
|
-
i(a, e), i(a,
|
|
542
|
+
i(a, e), i(a, r);
|
|
543
543
|
});
|
|
544
544
|
else {
|
|
545
545
|
const a = t.split("--")[1];
|
|
546
|
-
i(a, e), i(a,
|
|
546
|
+
i(a, e), i(a, r);
|
|
547
547
|
}
|
|
548
548
|
}
|
|
549
549
|
get variant() {
|
|
@@ -649,7 +649,7 @@ const tt = class tt extends A {
|
|
|
649
649
|
tt.nativeName = "h6";
|
|
650
650
|
let N = tt;
|
|
651
651
|
customElements.get("px-h6") || customElements.define("px-h6", N);
|
|
652
|
-
const ie = ".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
|
|
652
|
+
const ie = ".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}}", zt = new CSSStyleSheet();
|
|
653
653
|
zt.replaceSync(ie);
|
|
654
654
|
const ae = [
|
|
655
655
|
"",
|
|
@@ -688,8 +688,8 @@ const ae = [
|
|
|
688
688
|
"inverted"
|
|
689
689
|
];
|
|
690
690
|
}
|
|
691
|
-
attributeChangedCallback(t, e,
|
|
692
|
-
if (e !==
|
|
691
|
+
attributeChangedCallback(t, e, r) {
|
|
692
|
+
if (e !== r)
|
|
693
693
|
switch (t) {
|
|
694
694
|
case "direction":
|
|
695
695
|
case "direction--mobile":
|
|
@@ -699,33 +699,33 @@ const ae = [
|
|
|
699
699
|
this.updateDirection(
|
|
700
700
|
t,
|
|
701
701
|
e,
|
|
702
|
-
|
|
702
|
+
r,
|
|
703
703
|
ae
|
|
704
704
|
);
|
|
705
705
|
break;
|
|
706
706
|
case "size":
|
|
707
|
-
this.updateSize(t, e,
|
|
707
|
+
this.updateSize(t, e, r, se);
|
|
708
708
|
break;
|
|
709
709
|
case "color":
|
|
710
|
-
this.updateColor(t, e,
|
|
710
|
+
this.updateColor(t, e, r, ne);
|
|
711
711
|
break;
|
|
712
712
|
default:
|
|
713
|
-
super.attributeChangedCallback(t, e,
|
|
713
|
+
super.attributeChangedCallback(t, e, r);
|
|
714
714
|
break;
|
|
715
715
|
}
|
|
716
716
|
}
|
|
717
|
-
updateSize(t, e,
|
|
717
|
+
updateSize(t, e, r, o) {
|
|
718
718
|
const i = (a) => {
|
|
719
719
|
a !== null && a !== "" && a !== "default" && this.$el.style.setProperty(
|
|
720
720
|
"--separator-size",
|
|
721
721
|
`var(--px-size-border-${a})`
|
|
722
722
|
);
|
|
723
723
|
};
|
|
724
|
-
this.checkName(
|
|
725
|
-
`${
|
|
724
|
+
this.checkName(o, r) ? (i(e), i(r)) : d(
|
|
725
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
726
726
|
);
|
|
727
727
|
}
|
|
728
|
-
updateColor(t, e,
|
|
728
|
+
updateColor(t, e, r, o) {
|
|
729
729
|
const i = (a) => {
|
|
730
730
|
a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
|
|
731
731
|
"--separator-color-default",
|
|
@@ -735,23 +735,23 @@ const ae = [
|
|
|
735
735
|
`var(--px-color-border-${a}-inverted)`
|
|
736
736
|
));
|
|
737
737
|
};
|
|
738
|
-
this.checkName(
|
|
739
|
-
`${
|
|
738
|
+
this.checkName(o, r) ? (i(e), i(r)) : d(
|
|
739
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
740
740
|
);
|
|
741
741
|
}
|
|
742
|
-
updateDirection(t, e,
|
|
742
|
+
updateDirection(t, e, r, o) {
|
|
743
743
|
const i = (a, l) => {
|
|
744
744
|
l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
|
|
745
745
|
};
|
|
746
|
-
if (!this.checkName(
|
|
746
|
+
if (!this.checkName(o, r))
|
|
747
747
|
d(
|
|
748
|
-
`${
|
|
748
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
749
749
|
);
|
|
750
750
|
else if (t === "direction")
|
|
751
751
|
["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
|
|
752
752
|
Array.from(this.$el.classList).find(
|
|
753
753
|
(z) => z.startsWith("separator-direction-") && z.endsWith(`--${a}`)
|
|
754
|
-
) || i(a,
|
|
754
|
+
) || i(a, r);
|
|
755
755
|
});
|
|
756
756
|
else {
|
|
757
757
|
const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
|
|
@@ -759,8 +759,8 @@ const ae = [
|
|
|
759
759
|
);
|
|
760
760
|
l ? this.$el.classList.replace(
|
|
761
761
|
l,
|
|
762
|
-
`separator-direction-${
|
|
763
|
-
) : i(a,
|
|
762
|
+
`separator-direction-${r}--${a}`
|
|
763
|
+
) : i(a, r);
|
|
764
764
|
}
|
|
765
765
|
}
|
|
766
766
|
get direction() {
|
|
@@ -815,7 +815,7 @@ const ae = [
|
|
|
815
815
|
B.nativeName = "hr";
|
|
816
816
|
let _ = B;
|
|
817
817
|
customElements.get("px-separator") || customElements.define("px-separator", _);
|
|
818
|
-
const de = ':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 only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', le = ':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 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)}: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 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)) ) )}: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 only screen and (min-width: 64.0625em) and (max-width: 90em){: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 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)) ) )}: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.0625em){: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)}}', wt = new CSSStyleSheet();
|
|
818
|
+
const de = ':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)}}', le = ':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)}}', wt = new CSSStyleSheet();
|
|
819
819
|
wt.replaceSync(le);
|
|
820
820
|
const pe = [
|
|
821
821
|
"top-patch",
|
|
@@ -943,8 +943,8 @@ const pe = [
|
|
|
943
943
|
characterData: !0
|
|
944
944
|
}), this._bgObserver = new IntersectionObserver((t) => {
|
|
945
945
|
t.forEach((e) => {
|
|
946
|
-
var
|
|
947
|
-
e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (
|
|
946
|
+
var r;
|
|
947
|
+
e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
|
|
948
948
|
});
|
|
949
949
|
}), this._bgObserver.observe(this.$el);
|
|
950
950
|
}
|
|
@@ -952,26 +952,26 @@ const pe = [
|
|
|
952
952
|
var t, e;
|
|
953
953
|
(t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
|
|
954
954
|
}
|
|
955
|
-
attributeChangedCallback(t, e,
|
|
956
|
-
if (e !==
|
|
955
|
+
attributeChangedCallback(t, e, r) {
|
|
956
|
+
if (e !== r)
|
|
957
957
|
switch (t) {
|
|
958
958
|
case "border":
|
|
959
|
-
this.updateAttribute(t, e,
|
|
959
|
+
this.updateAttribute(t, e, r, Gt);
|
|
960
960
|
break;
|
|
961
961
|
case "border-color":
|
|
962
|
-
this.updateBorderColor(t,
|
|
962
|
+
this.updateBorderColor(t, r);
|
|
963
963
|
break;
|
|
964
964
|
case "border-side":
|
|
965
965
|
case "border-side--mobile":
|
|
966
966
|
case "border-side--tablet":
|
|
967
967
|
case "border-side--laptop":
|
|
968
|
-
this.updateAttribute(t, e,
|
|
968
|
+
this.updateAttribute(t, e, r, Ft);
|
|
969
969
|
break;
|
|
970
970
|
case "border-radius":
|
|
971
971
|
this.updateAttribute(
|
|
972
972
|
t,
|
|
973
973
|
e,
|
|
974
|
-
|
|
974
|
+
r,
|
|
975
975
|
Wt
|
|
976
976
|
);
|
|
977
977
|
break;
|
|
@@ -982,7 +982,7 @@ const pe = [
|
|
|
982
982
|
this.updateNoBorderRadius(
|
|
983
983
|
t,
|
|
984
984
|
e,
|
|
985
|
-
|
|
985
|
+
r,
|
|
986
986
|
_t
|
|
987
987
|
);
|
|
988
988
|
break;
|
|
@@ -990,19 +990,19 @@ const pe = [
|
|
|
990
990
|
case "background-color--mobile":
|
|
991
991
|
case "background-color--tablet":
|
|
992
992
|
case "background-color--laptop":
|
|
993
|
-
this.updateBackgroundColor(t,
|
|
993
|
+
this.updateBackgroundColor(t, r);
|
|
994
994
|
break;
|
|
995
995
|
case "background-gradient":
|
|
996
996
|
case "background-gradient--mobile":
|
|
997
997
|
case "background-gradient--tablet":
|
|
998
998
|
case "background-gradient--laptop":
|
|
999
|
-
this.updateGradient(t,
|
|
999
|
+
this.updateGradient(t, r);
|
|
1000
1000
|
break;
|
|
1001
1001
|
case "background-size":
|
|
1002
1002
|
this.updateAttribute(
|
|
1003
1003
|
t,
|
|
1004
1004
|
e,
|
|
1005
|
-
|
|
1005
|
+
r,
|
|
1006
1006
|
Nt
|
|
1007
1007
|
);
|
|
1008
1008
|
break;
|
|
@@ -1010,30 +1010,30 @@ const pe = [
|
|
|
1010
1010
|
case "background-image--mobile":
|
|
1011
1011
|
case "background-image--tablet":
|
|
1012
1012
|
case "background-image--laptop":
|
|
1013
|
-
this._isInViewport && this.updateBackgroundImg(t,
|
|
1013
|
+
this._isInViewport && this.updateBackgroundImg(t, r);
|
|
1014
1014
|
break;
|
|
1015
1015
|
case "background-position":
|
|
1016
|
-
|
|
1016
|
+
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
1017
1017
|
break;
|
|
1018
1018
|
case "box-shadow":
|
|
1019
|
-
this.updateAttribute(t, e,
|
|
1019
|
+
this.updateAttribute(t, e, r, jt);
|
|
1020
1020
|
break;
|
|
1021
1021
|
case "anchor-offset":
|
|
1022
|
-
this.updateAnchorOffset(e,
|
|
1022
|
+
this.updateAnchorOffset(e, r, u);
|
|
1023
1023
|
break;
|
|
1024
1024
|
case "anchor-spacing":
|
|
1025
|
-
this.updateAnchorSpacing(e,
|
|
1025
|
+
this.updateAnchorSpacing(e, r, pe);
|
|
1026
1026
|
break;
|
|
1027
1027
|
case "subgrid-rows":
|
|
1028
1028
|
this.updateSubgridRows(
|
|
1029
1029
|
t,
|
|
1030
1030
|
e,
|
|
1031
|
-
|
|
1031
|
+
r,
|
|
1032
1032
|
be
|
|
1033
1033
|
);
|
|
1034
1034
|
break;
|
|
1035
1035
|
default:
|
|
1036
|
-
super.attributeChangedCallback(t, e,
|
|
1036
|
+
super.attributeChangedCallback(t, e, r);
|
|
1037
1037
|
break;
|
|
1038
1038
|
}
|
|
1039
1039
|
}
|
|
@@ -1044,8 +1044,8 @@ const pe = [
|
|
|
1044
1044
|
"background-image--tablet",
|
|
1045
1045
|
"background-image--laptop"
|
|
1046
1046
|
].forEach((e) => {
|
|
1047
|
-
const
|
|
1048
|
-
|
|
1047
|
+
const r = this.getAttribute(e);
|
|
1048
|
+
r && this.updateBackgroundImg(e, r);
|
|
1049
1049
|
});
|
|
1050
1050
|
}
|
|
1051
1051
|
updateBackgroundImg(t, e) {
|
|
@@ -1053,11 +1053,11 @@ const pe = [
|
|
|
1053
1053
|
}
|
|
1054
1054
|
updateGradient(t, e) {
|
|
1055
1055
|
if (this.checkName(Yt, e)) {
|
|
1056
|
-
const
|
|
1057
|
-
t =
|
|
1058
|
-
const
|
|
1056
|
+
const r = this.splitAttrNameFromBreakpoint(t);
|
|
1057
|
+
t = r.attrName;
|
|
1058
|
+
const o = r.breakpoint;
|
|
1059
1059
|
this.$el.style.setProperty(
|
|
1060
|
-
`--${t}${
|
|
1060
|
+
`--${t}${o}`,
|
|
1061
1061
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
1062
1062
|
);
|
|
1063
1063
|
} else
|
|
@@ -1066,15 +1066,15 @@ const pe = [
|
|
|
1066
1066
|
);
|
|
1067
1067
|
}
|
|
1068
1068
|
updateBackgroundColor(t, e) {
|
|
1069
|
-
const
|
|
1069
|
+
const r = e.startsWith("surface-");
|
|
1070
1070
|
if (this.checkName(lt, e)) {
|
|
1071
|
-
const
|
|
1071
|
+
const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
|
|
1072
1072
|
this.$el.style.setProperty(
|
|
1073
|
-
`--${
|
|
1074
|
-
`var(--px-color-background-${e}${
|
|
1073
|
+
`--${o.attrName}${i}`,
|
|
1074
|
+
`var(--px-color-background-${e}${r ? "" : "-default"})`
|
|
1075
1075
|
), this.$el.style.setProperty(
|
|
1076
|
-
`--${
|
|
1077
|
-
`var(--px-color-background-${e}${
|
|
1076
|
+
`--${o.attrName}-inverted${i}`,
|
|
1077
|
+
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
1078
1078
|
);
|
|
1079
1079
|
} else
|
|
1080
1080
|
d(
|
|
@@ -1092,52 +1092,52 @@ const pe = [
|
|
|
1092
1092
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1093
1093
|
);
|
|
1094
1094
|
}
|
|
1095
|
-
updateNoBorderRadius(t, e,
|
|
1096
|
-
if (!this.checkName(
|
|
1095
|
+
updateNoBorderRadius(t, e, r, o) {
|
|
1096
|
+
if (!this.checkName(o, r))
|
|
1097
1097
|
d(
|
|
1098
|
-
`${
|
|
1098
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1099
1099
|
);
|
|
1100
1100
|
else {
|
|
1101
1101
|
const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
|
|
1102
1102
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1103
1103
|
`${i.attrName}-${e}${a}`
|
|
1104
|
-
),
|
|
1105
|
-
`${i.attrName}-${
|
|
1104
|
+
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
1105
|
+
`${i.attrName}-${r}${a}`
|
|
1106
1106
|
);
|
|
1107
1107
|
}
|
|
1108
1108
|
}
|
|
1109
|
-
updateAttribute(t, e,
|
|
1110
|
-
if (!this.checkName(
|
|
1109
|
+
updateAttribute(t, e, r, o) {
|
|
1110
|
+
if (!this.checkName(o, r))
|
|
1111
1111
|
d(
|
|
1112
|
-
`${
|
|
1112
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1113
1113
|
);
|
|
1114
1114
|
else {
|
|
1115
1115
|
const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
|
|
1116
1116
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1117
1117
|
`${i.attrName}-${e}${a}`
|
|
1118
|
-
),
|
|
1119
|
-
`${i.attrName}-${
|
|
1118
|
+
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
1119
|
+
`${i.attrName}-${r}${a}`
|
|
1120
1120
|
);
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
1123
|
splitAttrNameFromBreakpoint(t) {
|
|
1124
1124
|
let e = "";
|
|
1125
1125
|
if (["--mobile", "--tablet", "--laptop"].some(
|
|
1126
|
-
(
|
|
1126
|
+
(r) => t.includes(r)
|
|
1127
1127
|
)) {
|
|
1128
|
-
const
|
|
1129
|
-
t =
|
|
1128
|
+
const r = t.split("--");
|
|
1129
|
+
t = r[0], e = `--${r[1]}`;
|
|
1130
1130
|
}
|
|
1131
1131
|
return { attrName: t, breakpoint: e };
|
|
1132
1132
|
}
|
|
1133
|
-
updateAnchorOffset(t, e,
|
|
1134
|
-
if (!w(
|
|
1133
|
+
updateAnchorOffset(t, e, r) {
|
|
1134
|
+
if (!w(r, e)) {
|
|
1135
1135
|
d(
|
|
1136
1136
|
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
1137
1137
|
);
|
|
1138
1138
|
return;
|
|
1139
1139
|
}
|
|
1140
|
-
const
|
|
1140
|
+
const o = (i) => {
|
|
1141
1141
|
i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
|
|
1142
1142
|
"--container-anchor-offset--mobile",
|
|
1143
1143
|
`var(--px-padding-${i}-mobile)`
|
|
@@ -1149,19 +1149,19 @@ const pe = [
|
|
|
1149
1149
|
`var(--px-padding-${i}-laptop)`
|
|
1150
1150
|
));
|
|
1151
1151
|
};
|
|
1152
|
-
|
|
1152
|
+
o(t), o(e);
|
|
1153
1153
|
}
|
|
1154
1154
|
addAnchorClass() {
|
|
1155
1155
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
1156
1156
|
}
|
|
1157
|
-
updateAnchorSpacing(t, e,
|
|
1158
|
-
if (!w(
|
|
1157
|
+
updateAnchorSpacing(t, e, r) {
|
|
1158
|
+
if (!w(r, e)) {
|
|
1159
1159
|
d(
|
|
1160
1160
|
`${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
|
|
1161
1161
|
);
|
|
1162
1162
|
return;
|
|
1163
1163
|
}
|
|
1164
|
-
const
|
|
1164
|
+
const o = (i) => {
|
|
1165
1165
|
i !== null && i !== "" && i !== "default" && (this.style.setProperty(
|
|
1166
1166
|
"--container-anchor-spacing--mobile",
|
|
1167
1167
|
`var(--px-spacing-${i}-mobile)`
|
|
@@ -1176,11 +1176,11 @@ const pe = [
|
|
|
1176
1176
|
`var(--px-spacing-${i}-desktop)`
|
|
1177
1177
|
));
|
|
1178
1178
|
};
|
|
1179
|
-
|
|
1179
|
+
o(t), o(e);
|
|
1180
1180
|
}
|
|
1181
|
-
updateSubgridRows(t, e,
|
|
1182
|
-
w(
|
|
1183
|
-
`${
|
|
1181
|
+
updateSubgridRows(t, e, r, o) {
|
|
1182
|
+
w(o, r) ? this.style.setProperty(`--${t}`, r) : d(
|
|
1183
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1184
1184
|
);
|
|
1185
1185
|
}
|
|
1186
1186
|
get $el() {
|
|
@@ -1622,83 +1622,83 @@ class he extends HTMLElement {
|
|
|
1622
1622
|
"border-side--laptop"
|
|
1623
1623
|
];
|
|
1624
1624
|
}
|
|
1625
|
-
attributeChangedCallback(t, e,
|
|
1626
|
-
if (e !==
|
|
1625
|
+
attributeChangedCallback(t, e, r) {
|
|
1626
|
+
if (e !== r)
|
|
1627
1627
|
switch (t) {
|
|
1628
1628
|
case "background-color":
|
|
1629
|
-
this.$container.backgroundColor = lt.indexOf(
|
|
1629
|
+
this.$container.backgroundColor = lt.indexOf(r) > 0 ? r : "none";
|
|
1630
1630
|
break;
|
|
1631
1631
|
case "background-gradient":
|
|
1632
1632
|
this.$container.gradient = this.gradient;
|
|
1633
1633
|
break;
|
|
1634
1634
|
case "background-image":
|
|
1635
|
-
this.$container.backgroundImage =
|
|
1635
|
+
this.$container.backgroundImage = r;
|
|
1636
1636
|
break;
|
|
1637
1637
|
case "background-image--mobile":
|
|
1638
|
-
this.$container.backgroundImageMobile =
|
|
1638
|
+
this.$container.backgroundImageMobile = r;
|
|
1639
1639
|
break;
|
|
1640
1640
|
case "background-image--tablet":
|
|
1641
|
-
this.$container.backgroundImageTablet =
|
|
1641
|
+
this.$container.backgroundImageTablet = r;
|
|
1642
1642
|
break;
|
|
1643
1643
|
case "background-image--laptop":
|
|
1644
|
-
this.$container.backgroundImageLaptop =
|
|
1644
|
+
this.$container.backgroundImageLaptop = r;
|
|
1645
1645
|
break;
|
|
1646
1646
|
case "background-size":
|
|
1647
|
-
this.$container.backgroundSize =
|
|
1647
|
+
this.$container.backgroundSize = r;
|
|
1648
1648
|
break;
|
|
1649
1649
|
case "background-position":
|
|
1650
|
-
this.$container.backgroundPosition =
|
|
1650
|
+
this.$container.backgroundPosition = r;
|
|
1651
1651
|
break;
|
|
1652
1652
|
case "padding-block":
|
|
1653
|
-
this.$container.paddingBlock =
|
|
1653
|
+
this.$container.paddingBlock = r;
|
|
1654
1654
|
break;
|
|
1655
1655
|
case "padding-top":
|
|
1656
|
-
this.$container.paddingTop =
|
|
1656
|
+
this.$container.paddingTop = r;
|
|
1657
1657
|
break;
|
|
1658
1658
|
case "padding-bottom":
|
|
1659
|
-
this.$container.paddingBottom =
|
|
1659
|
+
this.$container.paddingBottom = r;
|
|
1660
1660
|
break;
|
|
1661
1661
|
case "padding-block--mobile":
|
|
1662
|
-
this.$container.paddingBlockMobile =
|
|
1662
|
+
this.$container.paddingBlockMobile = r;
|
|
1663
1663
|
break;
|
|
1664
1664
|
case "padding-top--mobile":
|
|
1665
|
-
this.$container.paddingTopMobile =
|
|
1665
|
+
this.$container.paddingTopMobile = r;
|
|
1666
1666
|
break;
|
|
1667
1667
|
case "padding-bottom--mobile":
|
|
1668
|
-
this.$container.paddingBottomMobile =
|
|
1668
|
+
this.$container.paddingBottomMobile = r;
|
|
1669
1669
|
break;
|
|
1670
1670
|
case "padding-block--tablet":
|
|
1671
|
-
this.$container.paddingBlockTablet =
|
|
1671
|
+
this.$container.paddingBlockTablet = r;
|
|
1672
1672
|
break;
|
|
1673
1673
|
case "padding-top--tablet":
|
|
1674
|
-
this.$container.paddingTopTablet =
|
|
1674
|
+
this.$container.paddingTopTablet = r;
|
|
1675
1675
|
break;
|
|
1676
1676
|
case "padding-bottom--tablet":
|
|
1677
|
-
this.$container.paddingBottomTablet =
|
|
1677
|
+
this.$container.paddingBottomTablet = r;
|
|
1678
1678
|
break;
|
|
1679
1679
|
case "padding-block--laptop":
|
|
1680
|
-
this.$container.paddingBlockLaptop =
|
|
1680
|
+
this.$container.paddingBlockLaptop = r;
|
|
1681
1681
|
break;
|
|
1682
1682
|
case "padding-top--laptop":
|
|
1683
|
-
this.$container.paddingTopLaptop =
|
|
1683
|
+
this.$container.paddingTopLaptop = r;
|
|
1684
1684
|
break;
|
|
1685
1685
|
case "padding-bottom--laptop":
|
|
1686
|
-
this.$container.paddingBottomLaptop =
|
|
1686
|
+
this.$container.paddingBottomLaptop = r;
|
|
1687
1687
|
break;
|
|
1688
1688
|
case "border":
|
|
1689
|
-
this.$container.border =
|
|
1689
|
+
this.$container.border = r;
|
|
1690
1690
|
break;
|
|
1691
1691
|
case "border-side":
|
|
1692
|
-
this.$container.borderSide =
|
|
1692
|
+
this.$container.borderSide = r;
|
|
1693
1693
|
break;
|
|
1694
1694
|
case "border-side--mobile":
|
|
1695
|
-
this.$container.borderSideMobile =
|
|
1695
|
+
this.$container.borderSideMobile = r;
|
|
1696
1696
|
break;
|
|
1697
1697
|
case "border-side--tablet":
|
|
1698
|
-
this.$container.borderSideTablet =
|
|
1698
|
+
this.$container.borderSideTablet = r;
|
|
1699
1699
|
break;
|
|
1700
1700
|
case "border-side--laptop":
|
|
1701
|
-
this.$container.borderSideLaptop =
|
|
1701
|
+
this.$container.borderSideLaptop = r;
|
|
1702
1702
|
break;
|
|
1703
1703
|
}
|
|
1704
1704
|
}
|
|
@@ -1715,15 +1715,15 @@ class he extends HTMLElement {
|
|
|
1715
1715
|
toggleOverlapSpacing() {
|
|
1716
1716
|
const t = this.$slotOverlap, e = this.$mainContentWrapper;
|
|
1717
1717
|
if (!t || !e) return;
|
|
1718
|
-
const
|
|
1719
|
-
e.classList.toggle("overlapped",
|
|
1718
|
+
const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
|
|
1719
|
+
e.classList.toggle("overlapped", o);
|
|
1720
1720
|
}
|
|
1721
1721
|
isNotEmptyNode(t) {
|
|
1722
1722
|
return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
|
|
1723
1723
|
}
|
|
1724
1724
|
setHeadingSpacing() {
|
|
1725
|
-
var
|
|
1726
|
-
const t = this.$slotHeading, e = (
|
|
1725
|
+
var r;
|
|
1726
|
+
const t = this.$slotHeading, e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("px-vstack");
|
|
1727
1727
|
t && e && (t.assignedElements().length > 0 ? e.setAttribute("gap", "heading-to-content") : e.setAttribute("gap", "none"));
|
|
1728
1728
|
}
|
|
1729
1729
|
get $container() {
|
|
@@ -1904,11 +1904,11 @@ class he extends HTMLElement {
|
|
|
1904
1904
|
}
|
|
1905
1905
|
}
|
|
1906
1906
|
customElements.get("px-section") || customElements.define("px-section", he);
|
|
1907
|
-
const ge = "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
|
|
1907
|
+
const ge = "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)}}", St = new CSSStyleSheet(), Ct = new CSSStyleSheet(), Lt = new CSSStyleSheet();
|
|
1908
1908
|
St.replaceSync(ge);
|
|
1909
1909
|
Ct.replaceSync(X);
|
|
1910
1910
|
Lt.replaceSync(kt);
|
|
1911
|
-
const
|
|
1911
|
+
const rt = class rt extends $ {
|
|
1912
1912
|
constructor() {
|
|
1913
1913
|
super(Ct, Lt, St), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
|
|
1914
1914
|
}
|
|
@@ -1927,64 +1927,64 @@ const ot = class ot extends $ {
|
|
|
1927
1927
|
"disabled"
|
|
1928
1928
|
];
|
|
1929
1929
|
}
|
|
1930
|
-
attributeChangedCallback(t, e,
|
|
1931
|
-
if (e !==
|
|
1930
|
+
attributeChangedCallback(t, e, r) {
|
|
1931
|
+
if (e !== r)
|
|
1932
1932
|
switch (t) {
|
|
1933
1933
|
case "variant":
|
|
1934
|
-
this.updateVariant(t, e,
|
|
1934
|
+
this.updateVariant(t, e, r, dt);
|
|
1935
1935
|
break;
|
|
1936
1936
|
case "color":
|
|
1937
|
-
this.updateTypography(t, e,
|
|
1937
|
+
this.updateTypography(t, e, r, Y);
|
|
1938
1938
|
break;
|
|
1939
1939
|
case "font-size":
|
|
1940
|
-
this.updateTypography(t, e,
|
|
1940
|
+
this.updateTypography(t, e, r, bt);
|
|
1941
1941
|
break;
|
|
1942
1942
|
case "font-weight":
|
|
1943
|
-
this.updateTypography(t, e,
|
|
1943
|
+
this.updateTypography(t, e, r, pt);
|
|
1944
1944
|
break;
|
|
1945
1945
|
case "text-align":
|
|
1946
1946
|
case "text-align--mobile":
|
|
1947
1947
|
case "text-align--tablet":
|
|
1948
1948
|
case "text-align--laptop":
|
|
1949
|
-
this.updateTypography(t, e,
|
|
1949
|
+
this.updateTypography(t, e, r, nt);
|
|
1950
1950
|
break;
|
|
1951
1951
|
case "disabled":
|
|
1952
1952
|
this.color = "state-disabled";
|
|
1953
1953
|
break;
|
|
1954
1954
|
default:
|
|
1955
|
-
super.attributeChangedCallback(t, e,
|
|
1955
|
+
super.attributeChangedCallback(t, e, r);
|
|
1956
1956
|
break;
|
|
1957
1957
|
}
|
|
1958
1958
|
}
|
|
1959
1959
|
toggleClass(t, e) {
|
|
1960
1960
|
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
1961
1961
|
}
|
|
1962
|
-
updateVariant(t, e,
|
|
1963
|
-
this.checkName(
|
|
1964
|
-
`${
|
|
1962
|
+
updateVariant(t, e, r, o) {
|
|
1963
|
+
this.checkName(o, r) ? this.toggleClass(e, r) : d(
|
|
1964
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1965
1965
|
);
|
|
1966
1966
|
}
|
|
1967
|
-
updateTypography(t, e,
|
|
1968
|
-
if (!this.checkName(
|
|
1967
|
+
updateTypography(t, e, r, o) {
|
|
1968
|
+
if (!this.checkName(o, r))
|
|
1969
1969
|
d(
|
|
1970
|
-
`${
|
|
1970
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1971
1971
|
);
|
|
1972
1972
|
else {
|
|
1973
1973
|
const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
|
|
1974
1974
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1975
1975
|
`${i.attrName}-${e}${a}`
|
|
1976
|
-
),
|
|
1977
|
-
`${i.attrName}-${
|
|
1976
|
+
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
1977
|
+
`${i.attrName}-${r}${a}`
|
|
1978
1978
|
);
|
|
1979
1979
|
}
|
|
1980
1980
|
}
|
|
1981
1981
|
splitAttrNameFromBreakpoint(t) {
|
|
1982
1982
|
let e = "";
|
|
1983
1983
|
if (["--mobile", "--tablet", "--laptop"].some(
|
|
1984
|
-
(
|
|
1984
|
+
(r) => t.includes(r)
|
|
1985
1985
|
)) {
|
|
1986
|
-
const
|
|
1987
|
-
t =
|
|
1986
|
+
const r = t.split("--");
|
|
1987
|
+
t = r[0], e = `--${r[1]}`;
|
|
1988
1988
|
}
|
|
1989
1989
|
return { attrName: t, breakpoint: e };
|
|
1990
1990
|
}
|
|
@@ -2049,8 +2049,8 @@ const ot = class ot extends $ {
|
|
|
2049
2049
|
this.setAttribute("disabled", t);
|
|
2050
2050
|
}
|
|
2051
2051
|
};
|
|
2052
|
-
|
|
2053
|
-
let F =
|
|
2052
|
+
rt.nativeName = "p";
|
|
2053
|
+
let F = rt;
|
|
2054
2054
|
customElements.get("px-p") || customElements.define("px-p", F);
|
|
2055
2055
|
class ue extends HTMLElement {
|
|
2056
2056
|
constructor() {
|
|
@@ -2067,7 +2067,7 @@ class ue extends HTMLElement {
|
|
|
2067
2067
|
}
|
|
2068
2068
|
}
|
|
2069
2069
|
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", ue);
|
|
2070
|
-
const xe = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height:
|
|
2070
|
+
const xe = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.8125rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.938rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.938rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.938rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.938rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}", Tt = new CSSStyleSheet();
|
|
2071
2071
|
Tt.replaceSync(xe);
|
|
2072
2072
|
var y, p, G, Et, S, Bt;
|
|
2073
2073
|
class ve extends HTMLElement {
|
|
@@ -2138,15 +2138,15 @@ class ve extends HTMLElement {
|
|
|
2138
2138
|
return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
|
|
2139
2139
|
}
|
|
2140
2140
|
connectedCallback() {
|
|
2141
|
-
var e,
|
|
2141
|
+
var e, r;
|
|
2142
2142
|
if (this.querySelectorAll("px-mdd-section").length === 0)
|
|
2143
2143
|
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
2144
|
-
this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (
|
|
2145
|
-
if (
|
|
2144
|
+
this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (o) => {
|
|
2145
|
+
if (o.target.closest("px-button-icon"))
|
|
2146
2146
|
this.dispatchEvent(
|
|
2147
2147
|
new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
|
|
2148
2148
|
);
|
|
2149
|
-
else if (
|
|
2149
|
+
else if (o.target.closest("#back-button")) {
|
|
2150
2150
|
const i = new CustomEvent("back-to-mobile-menu", {
|
|
2151
2151
|
bubbles: !0,
|
|
2152
2152
|
composed: !0
|
|
@@ -2155,30 +2155,30 @@ class ve extends HTMLElement {
|
|
|
2155
2155
|
}
|
|
2156
2156
|
}), this.$dialog.addEventListener("cancel", () => {
|
|
2157
2157
|
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
|
|
2158
|
-
}), this.$dialog.addEventListener("click", (
|
|
2159
|
-
|
|
2158
|
+
}), this.$dialog.addEventListener("click", (o) => {
|
|
2159
|
+
o.target === this.$dialog && this.dispatchEvent(
|
|
2160
2160
|
new CustomEvent("close-panel-from-dialog", {
|
|
2161
2161
|
bubbles: !0,
|
|
2162
2162
|
detail: {
|
|
2163
|
-
clientX:
|
|
2164
|
-
clientY:
|
|
2163
|
+
clientX: o.clientX,
|
|
2164
|
+
clientY: o.clientY
|
|
2165
2165
|
}
|
|
2166
2166
|
})
|
|
2167
2167
|
);
|
|
2168
|
-
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, G).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, Et).innerText = ((
|
|
2168
|
+
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, G).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, Et).innerText = ((r = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
|
|
2169
2169
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
2170
|
-
)) == null ? void 0 :
|
|
2170
|
+
)) == null ? void 0 : r.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
|
|
2171
2171
|
this.$slotMddFooter && (n(this, p, S).style.display = "block");
|
|
2172
2172
|
})), n(this, y).observe(this, { childList: !0, subtree: !0 });
|
|
2173
2173
|
}
|
|
2174
2174
|
disconnectedCallback() {
|
|
2175
2175
|
n(this, y).disconnect();
|
|
2176
2176
|
}
|
|
2177
|
-
attributeChangedCallback(e,
|
|
2178
|
-
if (e === "name" && !
|
|
2177
|
+
attributeChangedCallback(e, r, o) {
|
|
2178
|
+
if (e === "name" && !o)
|
|
2179
2179
|
throw new Error("Media Drop Down must have a name attribute");
|
|
2180
|
-
if (e === "name" && (this.id =
|
|
2181
|
-
const i =
|
|
2180
|
+
if (e === "name" && (this.id = o), e === "hidden" && this.internals) {
|
|
2181
|
+
const i = o === "true" || o === "" ? "true" : "false";
|
|
2182
2182
|
this.internals.ariaHidden = i, this.ariaHidden = i;
|
|
2183
2183
|
const l = n(this, p, S).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
2184
2184
|
this.style.setProperty(
|
|
@@ -2187,10 +2187,10 @@ class ve extends HTMLElement {
|
|
|
2187
2187
|
);
|
|
2188
2188
|
}
|
|
2189
2189
|
e === "close-button-aria-label" && n(this, p, Bt).forEach((i) => {
|
|
2190
|
-
|
|
2190
|
+
o ? i.setAttribute("aria-label", o || "Close") : i.removeAttribute("aria-label");
|
|
2191
2191
|
}), e === "back-to-menu-label" && (n(this, p, G).innerHTML = `
|
|
2192
2192
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
2193
|
-
${
|
|
2193
|
+
${o || "Back to menu"}
|
|
2194
2194
|
`);
|
|
2195
2195
|
}
|
|
2196
2196
|
get $dialog() {
|
|
@@ -2241,7 +2241,7 @@ y = new WeakMap(), p = new WeakSet(), G = function() {
|
|
|
2241
2241
|
return this.shadowRoot.querySelectorAll("px-button-icon");
|
|
2242
2242
|
};
|
|
2243
2243
|
customElements.get("px-mdd") || customElements.define("px-mdd", ve);
|
|
2244
|
-
const me = ':host{flex-basis:25%}@media screen and (max-width:
|
|
2244
|
+
const me = ':host{flex-basis:25%}@media screen and (max-width: 47.938rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:8px;padding-inline:16px}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:8px;padding-inline:16px;line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Mt = new CSSStyleSheet();
|
|
2245
2245
|
Mt.replaceSync(me);
|
|
2246
2246
|
class fe extends HTMLElement {
|
|
2247
2247
|
constructor() {
|
|
@@ -2265,11 +2265,11 @@ class fe extends HTMLElement {
|
|
|
2265
2265
|
static get observedAttributes() {
|
|
2266
2266
|
return ["title-hidden"];
|
|
2267
2267
|
}
|
|
2268
|
-
attributeChangedCallback(t, e,
|
|
2269
|
-
if (e !==
|
|
2268
|
+
attributeChangedCallback(t, e, r) {
|
|
2269
|
+
if (e !== r)
|
|
2270
2270
|
switch (t) {
|
|
2271
2271
|
case "title-hidden":
|
|
2272
|
-
this.$title.style.display =
|
|
2272
|
+
this.$title.style.display = r !== null ? "none" : "block";
|
|
2273
2273
|
break;
|
|
2274
2274
|
}
|
|
2275
2275
|
}
|
|
@@ -2342,62 +2342,62 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2342
2342
|
}
|
|
2343
2343
|
disconnectedCallback() {
|
|
2344
2344
|
}
|
|
2345
|
-
attributeChangedCallback(t, e,
|
|
2346
|
-
if (e !==
|
|
2345
|
+
attributeChangedCallback(t, e, r) {
|
|
2346
|
+
if (e !== r)
|
|
2347
2347
|
switch (t) {
|
|
2348
2348
|
case "disabled":
|
|
2349
|
-
this.$el.toggleAttribute("aria-disabled"),
|
|
2349
|
+
this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
|
|
2350
2350
|
break;
|
|
2351
2351
|
case "variant":
|
|
2352
|
-
this.updateVariant(e,
|
|
2352
|
+
this.updateVariant(e, r);
|
|
2353
2353
|
break;
|
|
2354
2354
|
case "shape":
|
|
2355
2355
|
case "shape--mobile":
|
|
2356
2356
|
case "shape--tablet":
|
|
2357
2357
|
case "shape--laptop":
|
|
2358
2358
|
case "shape--desktop":
|
|
2359
|
-
this.updateShape(t,
|
|
2359
|
+
this.updateShape(t, r, Ae);
|
|
2360
2360
|
break;
|
|
2361
2361
|
case "extended":
|
|
2362
2362
|
case "extended--mobile":
|
|
2363
2363
|
case "extended--tablet":
|
|
2364
2364
|
case "extended--laptop":
|
|
2365
2365
|
case "extended--desktop":
|
|
2366
|
-
this.updateExtended(t,
|
|
2366
|
+
this.updateExtended(t, r);
|
|
2367
2367
|
break;
|
|
2368
2368
|
case "font-size":
|
|
2369
2369
|
this.updateTypography(
|
|
2370
2370
|
t,
|
|
2371
2371
|
e,
|
|
2372
|
-
|
|
2372
|
+
r,
|
|
2373
2373
|
ke
|
|
2374
2374
|
);
|
|
2375
2375
|
break;
|
|
2376
2376
|
case "color":
|
|
2377
|
-
this.updateTypography(t, e,
|
|
2377
|
+
this.updateTypography(t, e, r, Y);
|
|
2378
2378
|
break;
|
|
2379
2379
|
case "font-weight":
|
|
2380
|
-
this.updateTypography(t, e,
|
|
2380
|
+
this.updateTypography(t, e, r, pt);
|
|
2381
2381
|
break;
|
|
2382
2382
|
case "title":
|
|
2383
|
-
|
|
2383
|
+
r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
|
|
2384
2384
|
break;
|
|
2385
2385
|
default:
|
|
2386
|
-
super.attributeChangedCallback(t, e,
|
|
2386
|
+
super.attributeChangedCallback(t, e, r);
|
|
2387
2387
|
break;
|
|
2388
2388
|
}
|
|
2389
2389
|
}
|
|
2390
2390
|
configureBeforeAfterIcon(t) {
|
|
2391
|
-
const e = t.getAttribute("size"),
|
|
2391
|
+
const e = t.getAttribute("size"), r = t.getAttribute("color");
|
|
2392
2392
|
t.addEventListener("click", () => {
|
|
2393
2393
|
this.$el.focus();
|
|
2394
|
-
}), e || t.setAttribute("size", "xs"),
|
|
2394
|
+
}), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
|
|
2395
2395
|
}
|
|
2396
2396
|
_toggleClassList(t) {
|
|
2397
2397
|
if (t.startsWith("btn-")) {
|
|
2398
2398
|
const e = t.split("-");
|
|
2399
|
-
for (const
|
|
2400
|
-
this.$el.classList.toggle(
|
|
2399
|
+
for (const r of e)
|
|
2400
|
+
this.$el.classList.toggle(r);
|
|
2401
2401
|
} else
|
|
2402
2402
|
this.$el.classList.toggle(t);
|
|
2403
2403
|
}
|
|
@@ -2406,8 +2406,8 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2406
2406
|
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
2407
2407
|
), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
2408
2408
|
}
|
|
2409
|
-
updateShape(t, e,
|
|
2410
|
-
if (!w(
|
|
2409
|
+
updateShape(t, e, r) {
|
|
2410
|
+
if (!w(r, e)) {
|
|
2411
2411
|
d(
|
|
2412
2412
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
2413
2413
|
);
|
|
@@ -2415,9 +2415,9 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2415
2415
|
}
|
|
2416
2416
|
e !== null && e !== "" && this.$el.setAttribute(t, e);
|
|
2417
2417
|
}
|
|
2418
|
-
updateTypography(t, e,
|
|
2419
|
-
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`),
|
|
2420
|
-
`${
|
|
2418
|
+
updateTypography(t, e, r, o) {
|
|
2419
|
+
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || d(
|
|
2420
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
2421
2421
|
);
|
|
2422
2422
|
}
|
|
2423
2423
|
updateExtended(t, e) {
|
|
@@ -2558,14 +2558,14 @@ class ze extends L {
|
|
|
2558
2558
|
disconnectedCallback() {
|
|
2559
2559
|
super.disconnectedCallback(), n(this, f).disconnect();
|
|
2560
2560
|
}
|
|
2561
|
-
attributeChangedCallback(e,
|
|
2562
|
-
if (
|
|
2561
|
+
attributeChangedCallback(e, r, o) {
|
|
2562
|
+
if (r !== o)
|
|
2563
2563
|
switch (e) {
|
|
2564
2564
|
case "disabled":
|
|
2565
|
-
super.attributeChangedCallback(e,
|
|
2565
|
+
super.attributeChangedCallback(e, r, o), o !== null && n(this, f).clearInteractiveState();
|
|
2566
2566
|
break;
|
|
2567
2567
|
default:
|
|
2568
|
-
super.attributeChangedCallback(e,
|
|
2568
|
+
super.attributeChangedCallback(e, r, o);
|
|
2569
2569
|
break;
|
|
2570
2570
|
}
|
|
2571
2571
|
}
|
|
@@ -2574,7 +2574,7 @@ f = new WeakMap(), R = new WeakSet(), Ht = function() {
|
|
|
2574
2574
|
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
2575
2575
|
};
|
|
2576
2576
|
customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
|
|
2577
|
-
const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media
|
|
2577
|
+
const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.938rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Ot = new CSSStyleSheet();
|
|
2578
2578
|
Ot.replaceSync(we);
|
|
2579
2579
|
class $e extends HTMLElement {
|
|
2580
2580
|
constructor() {
|
|
@@ -2593,8 +2593,8 @@ class $e extends HTMLElement {
|
|
|
2593
2593
|
return ["href", "for"];
|
|
2594
2594
|
}
|
|
2595
2595
|
// ... existing code ...
|
|
2596
|
-
attributeChangedCallback(t, e,
|
|
2597
|
-
this.updateView(t,
|
|
2596
|
+
attributeChangedCallback(t, e, r) {
|
|
2597
|
+
this.updateView(t, r);
|
|
2598
2598
|
}
|
|
2599
2599
|
updateView(t, e) {
|
|
2600
2600
|
t === "href" && this.$link ? this.$link.href = e : t === "href" && !this.$link && e ? (this.shadowRoot.innerHTML = `<a href="${e}">${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : t === "for" && !this.$button && e && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
|