@proximus/lavender-mega-dropdown 1.4.7-beta.2 → 1.4.7
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 +231 -309
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
1
|
+
var J = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
import { PxElement as
|
|
4
|
+
var Q = (s, t, e) => t.has(s) || J("Cannot " + e);
|
|
5
|
+
var d = (s, t, e) => (Q(s, t, "read from private field"), e ? e.call(s) : t.get(s)), v = (s, t, e) => t.has(s) ? J("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), z = (s, t, e, o) => (Q(s, t, "write to private field"), o ? o.call(s, e) : t.set(s, e), e);
|
|
6
|
+
import { PxElement as A, transferAccessibilityAttributes as V, log as n, checkName as y, WithExtraAttributes as tt, iconSizeValuesKC as Et, textalignValues as et, colorValues as O, headingValues as ot, cssTokenBreakpoints as c, paddingValues as g, gapValues as Bt, boxShadowValues as Mt, backgroundSizeValues as Rt, noBorderRadiusValues as It, borderRadiusValues as Pt, borderSideValues as qt, borderValues as Dt, gradientValues as Ht, backgroundColorValues as rt, borderColorValues as jt, fontweightValues as it, fontsizeValues as at } 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){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-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{display:flex;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);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='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{transform:rotate(180deg)}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){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){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){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-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{justify-content:flex-start;align-items:center;gap:var(--px-spacing-xs-tablet);width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){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){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary: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{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop);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)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary: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{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop);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}a.wrapper:hover,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:hover,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:hover,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:hover,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)}}', Kt = ".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)}}", Xt = ":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();
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
8
|
+
const st = `.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){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;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);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='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{transform:rotate(180deg)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;gap:var(--px-spacing-xs-tablet);width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, nt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){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,.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,.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)}}', Ot = ".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)}}", _t = ":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)}}", dt = new CSSStyleSheet(), lt = new CSSStyleSheet(), pt = new CSSStyleSheet(), bt = new CSSStyleSheet();
|
|
9
|
+
dt.replaceSync(st);
|
|
10
|
+
lt.replaceSync(nt);
|
|
11
|
+
pt.replaceSync(Ot);
|
|
12
|
+
bt.replaceSync(_t);
|
|
13
|
+
const Ft = [
|
|
14
14
|
"",
|
|
15
15
|
"default",
|
|
16
16
|
"secondary",
|
|
@@ -22,15 +22,15 @@ const Ut = [
|
|
|
22
22
|
"patch-eco",
|
|
23
23
|
"actionable-tag",
|
|
24
24
|
"header-dropdown"
|
|
25
|
-
],
|
|
25
|
+
], Nt = [
|
|
26
26
|
"",
|
|
27
27
|
"default",
|
|
28
28
|
"bottom-right",
|
|
29
29
|
"bottom-left",
|
|
30
30
|
"alternative"
|
|
31
|
-
],
|
|
31
|
+
], F = class F extends A {
|
|
32
32
|
constructor() {
|
|
33
|
-
super(
|
|
33
|
+
super(dt, lt, pt, bt), this.template = () => `<button class="btn">
|
|
34
34
|
<slot name="before"></slot><slot></slot><slot name="after"></slot>
|
|
35
35
|
</button>`, this.shadowRoot.innerHTML = this.template();
|
|
36
36
|
}
|
|
@@ -61,7 +61,7 @@ const Ut = [
|
|
|
61
61
|
e && (e.addEventListener("click", () => {
|
|
62
62
|
this.$el.focus();
|
|
63
63
|
}), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
|
|
64
|
-
}),
|
|
64
|
+
}), V(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
65
65
|
var o;
|
|
66
66
|
e.preventDefault(), (o = this.closest("form")) == null || o.submit();
|
|
67
67
|
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
@@ -69,8 +69,6 @@ const Ut = [
|
|
|
69
69
|
e.preventDefault(), (o = this.closest("form")) == null || o.reset();
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
|
-
disconnectedCallback() {
|
|
73
|
-
}
|
|
74
72
|
attributeChangedCallback(t, e, o) {
|
|
75
73
|
if (e !== o)
|
|
76
74
|
switch (t) {
|
|
@@ -90,15 +88,12 @@ const Ut = [
|
|
|
90
88
|
case "loading":
|
|
91
89
|
this.updateLoading();
|
|
92
90
|
break;
|
|
93
|
-
case "disabled":
|
|
94
|
-
super.attributeChangedCallback(t, e, o);
|
|
95
|
-
break;
|
|
96
91
|
case "shape":
|
|
97
92
|
case "shape--mobile":
|
|
98
93
|
case "shape--tablet":
|
|
99
94
|
case "shape--laptop":
|
|
100
95
|
case "shape--desktop":
|
|
101
|
-
this.updateShape(t, o,
|
|
96
|
+
this.updateShape(t, o, Nt);
|
|
102
97
|
break;
|
|
103
98
|
case "aria-expanded":
|
|
104
99
|
o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
|
|
@@ -120,13 +115,13 @@ const Ut = [
|
|
|
120
115
|
t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
|
|
121
116
|
}
|
|
122
117
|
updateVariant(t, e) {
|
|
123
|
-
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(
|
|
118
|
+
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Ft, e) || n(
|
|
124
119
|
`${e} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
|
|
125
120
|
);
|
|
126
121
|
}
|
|
127
122
|
updateState(t, e) {
|
|
128
123
|
const o = ["", "default", "success", "error"];
|
|
129
|
-
this._toggleClass(t, e), this.checkName(o, e) ||
|
|
124
|
+
this._toggleClass(t, e), this.checkName(o, e) || n(
|
|
130
125
|
`${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
|
|
131
126
|
);
|
|
132
127
|
}
|
|
@@ -138,8 +133,8 @@ const Ut = [
|
|
|
138
133
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
139
134
|
}
|
|
140
135
|
updateShape(t, e, o) {
|
|
141
|
-
if (
|
|
142
|
-
|
|
136
|
+
if (!y(o, e)) {
|
|
137
|
+
n(
|
|
143
138
|
`${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
|
|
144
139
|
);
|
|
145
140
|
return;
|
|
@@ -237,47 +232,10 @@ const Ut = [
|
|
|
237
232
|
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
238
233
|
}
|
|
239
234
|
};
|
|
240
|
-
|
|
241
|
-
let
|
|
242
|
-
customElements.get("px-button") || customElements.define("px-button",
|
|
243
|
-
|
|
244
|
-
class Qt extends C {
|
|
245
|
-
constructor() {
|
|
246
|
-
super();
|
|
247
|
-
c(this, T);
|
|
248
|
-
c(this, x);
|
|
249
|
-
this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new at(
|
|
250
|
-
this,
|
|
251
|
-
this.$el,
|
|
252
|
-
() => P(this, T, ft).call(this)
|
|
253
|
-
));
|
|
254
|
-
}
|
|
255
|
-
connectedCallback() {
|
|
256
|
-
super.connectedCallback(), n(this, x).connect();
|
|
257
|
-
}
|
|
258
|
-
disconnectedCallback() {
|
|
259
|
-
super.disconnectedCallback(), n(this, x).disconnect();
|
|
260
|
-
}
|
|
261
|
-
attributeChangedCallback(e, o, r) {
|
|
262
|
-
if (o !== r)
|
|
263
|
-
switch (e) {
|
|
264
|
-
case "loading":
|
|
265
|
-
super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
|
|
266
|
-
break;
|
|
267
|
-
case "disabled":
|
|
268
|
-
super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
|
|
269
|
-
break;
|
|
270
|
-
default:
|
|
271
|
-
super.attributeChangedCallback(e, o, r);
|
|
272
|
-
break;
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
x = new WeakMap(), T = new WeakSet(), ft = function() {
|
|
277
|
-
return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
|
|
278
|
-
};
|
|
279
|
-
customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Qt);
|
|
280
|
-
class Vt extends HTMLElement {
|
|
235
|
+
F.nativeName = "button";
|
|
236
|
+
let L = F;
|
|
237
|
+
customElements.get("px-button") || customElements.define("px-button", L);
|
|
238
|
+
class Wt extends HTMLElement {
|
|
281
239
|
constructor() {
|
|
282
240
|
super();
|
|
283
241
|
}
|
|
@@ -310,8 +268,8 @@ class Vt extends HTMLElement {
|
|
|
310
268
|
t && t.remove();
|
|
311
269
|
}
|
|
312
270
|
}
|
|
313
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
314
|
-
const
|
|
271
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", Wt);
|
|
272
|
+
const Gt = [
|
|
315
273
|
"Brand",
|
|
316
274
|
"Accent",
|
|
317
275
|
"Neutral",
|
|
@@ -324,21 +282,21 @@ const te = [
|
|
|
324
282
|
"StateHover",
|
|
325
283
|
"StateActive",
|
|
326
284
|
"StateDisabled"
|
|
327
|
-
],
|
|
285
|
+
], Yt = ["Inherit", ...Gt].map(
|
|
328
286
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
329
|
-
),
|
|
330
|
-
|
|
331
|
-
var
|
|
332
|
-
class
|
|
287
|
+
), Zt = ":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)}", ct = new CSSStyleSheet();
|
|
288
|
+
ct.replaceSync(Zt);
|
|
289
|
+
var x, b, w;
|
|
290
|
+
class Kt extends tt {
|
|
333
291
|
constructor(...e) {
|
|
334
292
|
var o;
|
|
335
|
-
super(...e,
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
293
|
+
super(...e, ct);
|
|
294
|
+
v(this, x);
|
|
295
|
+
v(this, b);
|
|
296
|
+
v(this, w, () => `<svg aria-hidden="true">
|
|
339
297
|
<use></use>
|
|
340
298
|
</svg>`);
|
|
341
|
-
this.shadowRoot.innerHTML =
|
|
299
|
+
this.shadowRoot.innerHTML = d(this, w).call(this), z(this, b, (o = this.attachInternals) == null ? void 0 : o.call(this)), d(this, b) && (d(this, b).role = "img");
|
|
342
300
|
}
|
|
343
301
|
static get observedAttributes() {
|
|
344
302
|
return [
|
|
@@ -359,18 +317,18 @@ class re extends st {
|
|
|
359
317
|
this.updateName(o, r);
|
|
360
318
|
break;
|
|
361
319
|
case "size":
|
|
362
|
-
this.updateAttribute(e, o, r,
|
|
320
|
+
this.updateAttribute(e, o, r, Et);
|
|
363
321
|
break;
|
|
364
322
|
case "color":
|
|
365
|
-
this.updateAttribute(e, o, r,
|
|
323
|
+
this.updateAttribute(e, o, r, Yt);
|
|
366
324
|
break;
|
|
367
325
|
case "disabled":
|
|
368
326
|
this.color = "state-disabled";
|
|
369
327
|
break;
|
|
370
328
|
case "aria-label":
|
|
371
|
-
if (!
|
|
329
|
+
if (!d(this, b))
|
|
372
330
|
return;
|
|
373
|
-
r ? (
|
|
331
|
+
r ? (d(this, b).ariaHidden = "false", this.ariaHidden = "false") : (d(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
374
332
|
break;
|
|
375
333
|
}
|
|
376
334
|
}
|
|
@@ -383,22 +341,22 @@ class re extends st {
|
|
|
383
341
|
console.error("Icon name or src not found");
|
|
384
342
|
continue;
|
|
385
343
|
}
|
|
386
|
-
o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (
|
|
344
|
+
o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (z(this, x, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
387
345
|
"href",
|
|
388
|
-
`${
|
|
346
|
+
`${d(this, x)}#icon-${this.name}`
|
|
389
347
|
));
|
|
390
348
|
}
|
|
391
|
-
!this.ariaLabel &&
|
|
349
|
+
!this.ariaLabel && d(this, b) && (d(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
392
350
|
}
|
|
393
351
|
updateAttribute(e, o, r, i) {
|
|
394
|
-
o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), this.checkName(i, r) ||
|
|
352
|
+
o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), this.checkName(i, r) || n(
|
|
395
353
|
`${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
396
354
|
);
|
|
397
355
|
}
|
|
398
356
|
updateName(e, o) {
|
|
399
|
-
|
|
357
|
+
d(this, x) && this.$el.firstElementChild.setAttribute(
|
|
400
358
|
"href",
|
|
401
|
-
`${
|
|
359
|
+
`${d(this, x)}#icon-${o}`
|
|
402
360
|
);
|
|
403
361
|
}
|
|
404
362
|
get $el() {
|
|
@@ -447,18 +405,18 @@ class re extends st {
|
|
|
447
405
|
this.setAttribute("disabled", e);
|
|
448
406
|
}
|
|
449
407
|
}
|
|
450
|
-
|
|
451
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
452
|
-
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)}}", Z = ".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();
|
|
453
|
-
|
|
454
|
-
const
|
|
455
|
-
|
|
456
|
-
class
|
|
408
|
+
x = new WeakMap(), b = new WeakMap(), w = new WeakMap();
|
|
409
|
+
customElements.get("px-icon") || customElements.define("px-icon", Kt);
|
|
410
|
+
const ht = "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)}}", _ = ".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)}", gt = new CSSStyleSheet();
|
|
411
|
+
gt.replaceSync(ht);
|
|
412
|
+
const ut = new CSSStyleSheet();
|
|
413
|
+
ut.replaceSync(_);
|
|
414
|
+
class m extends A {
|
|
457
415
|
template() {
|
|
458
416
|
return "<slot></slot>";
|
|
459
417
|
}
|
|
460
418
|
constructor(t) {
|
|
461
|
-
super(
|
|
419
|
+
super(gt, ut);
|
|
462
420
|
const e = document.createElement(t);
|
|
463
421
|
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
464
422
|
}
|
|
@@ -480,17 +438,17 @@ class A extends w {
|
|
|
480
438
|
if (e !== o)
|
|
481
439
|
switch (t) {
|
|
482
440
|
case "variant":
|
|
483
|
-
this.updateAttribute(t, e, o,
|
|
441
|
+
this.updateAttribute(t, e, o, ot);
|
|
484
442
|
break;
|
|
485
443
|
case "color":
|
|
486
|
-
this.updateColor(e, o,
|
|
444
|
+
this.updateColor(e, o, O);
|
|
487
445
|
break;
|
|
488
446
|
case "text-align":
|
|
489
447
|
case "text-align--mobile":
|
|
490
448
|
case "text-align--tablet":
|
|
491
449
|
case "text-align--laptop":
|
|
492
450
|
case "text-align--desktop":
|
|
493
|
-
this.updateTextAlign(t, e, o,
|
|
451
|
+
this.updateTextAlign(t, e, o, et);
|
|
494
452
|
break;
|
|
495
453
|
default:
|
|
496
454
|
super.attributeChangedCallback(t, e, o);
|
|
@@ -501,13 +459,13 @@ class A extends w {
|
|
|
501
459
|
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
502
460
|
}
|
|
503
461
|
updateAttribute(t, e, o, r) {
|
|
504
|
-
this.checkName(r, o) ? this.toggleClass(e, o) :
|
|
462
|
+
this.checkName(r, o) ? this.toggleClass(e, o) : n(
|
|
505
463
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
506
464
|
);
|
|
507
465
|
}
|
|
508
466
|
updateColor(t, e, o) {
|
|
509
467
|
if (!this.checkName(o, e)) {
|
|
510
|
-
|
|
468
|
+
n(
|
|
511
469
|
`${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
|
|
512
470
|
);
|
|
513
471
|
return;
|
|
@@ -525,7 +483,7 @@ class A extends w {
|
|
|
525
483
|
}
|
|
526
484
|
updateTextAlign(t, e, o, r) {
|
|
527
485
|
if (!this.checkName(r, o)) {
|
|
528
|
-
|
|
486
|
+
n(
|
|
529
487
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
530
488
|
);
|
|
531
489
|
return;
|
|
@@ -600,62 +558,62 @@ class A extends w {
|
|
|
600
558
|
t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
|
|
601
559
|
}
|
|
602
560
|
}
|
|
603
|
-
const
|
|
561
|
+
const N = class N extends m {
|
|
604
562
|
constructor() {
|
|
605
563
|
super("h1");
|
|
606
564
|
}
|
|
607
565
|
};
|
|
608
|
-
|
|
609
|
-
let
|
|
610
|
-
customElements.get("px-h1") || customElements.define("px-h1",
|
|
611
|
-
const
|
|
566
|
+
N.nativeName = "h1";
|
|
567
|
+
let T = N;
|
|
568
|
+
customElements.get("px-h1") || customElements.define("px-h1", T);
|
|
569
|
+
const W = class W extends m {
|
|
612
570
|
constructor() {
|
|
613
571
|
super("h2");
|
|
614
572
|
}
|
|
615
573
|
};
|
|
616
|
-
|
|
617
|
-
let
|
|
618
|
-
customElements.get("px-h2") || customElements.define("px-h2",
|
|
619
|
-
const
|
|
574
|
+
W.nativeName = "h2";
|
|
575
|
+
let E = W;
|
|
576
|
+
customElements.get("px-h2") || customElements.define("px-h2", E);
|
|
577
|
+
const G = class G extends m {
|
|
620
578
|
constructor() {
|
|
621
579
|
super("h3");
|
|
622
580
|
}
|
|
623
581
|
};
|
|
624
|
-
|
|
625
|
-
let
|
|
626
|
-
customElements.get("px-h3") || customElements.define("px-h3",
|
|
627
|
-
const
|
|
582
|
+
G.nativeName = "h3";
|
|
583
|
+
let B = G;
|
|
584
|
+
customElements.get("px-h3") || customElements.define("px-h3", B);
|
|
585
|
+
const Y = class Y extends m {
|
|
628
586
|
constructor() {
|
|
629
587
|
super("h4");
|
|
630
588
|
}
|
|
631
589
|
};
|
|
632
|
-
|
|
633
|
-
let
|
|
634
|
-
customElements.get("px-h4") || customElements.define("px-h4",
|
|
635
|
-
const
|
|
590
|
+
Y.nativeName = "h4";
|
|
591
|
+
let M = Y;
|
|
592
|
+
customElements.get("px-h4") || customElements.define("px-h4", M);
|
|
593
|
+
const Z = class Z extends m {
|
|
636
594
|
constructor() {
|
|
637
595
|
super("h5");
|
|
638
596
|
}
|
|
639
597
|
};
|
|
640
|
-
|
|
641
|
-
let
|
|
642
|
-
customElements.get("px-h5") || customElements.define("px-h5",
|
|
643
|
-
const
|
|
598
|
+
Z.nativeName = "h5";
|
|
599
|
+
let R = Z;
|
|
600
|
+
customElements.get("px-h5") || customElements.define("px-h5", R);
|
|
601
|
+
const K = class K extends m {
|
|
644
602
|
constructor() {
|
|
645
603
|
super("h6");
|
|
646
604
|
}
|
|
647
605
|
};
|
|
648
|
-
|
|
649
|
-
let
|
|
650
|
-
customElements.get("px-h6") || customElements.define("px-h6",
|
|
651
|
-
const
|
|
652
|
-
|
|
653
|
-
const
|
|
606
|
+
K.nativeName = "h6";
|
|
607
|
+
let I = K;
|
|
608
|
+
customElements.get("px-h6") || customElements.define("px-h6", I);
|
|
609
|
+
const Xt = ".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 only screen and (min-width: 768px){.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 only screen and (min-width: 1025px){.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 only screen and (min-width: 1441px){.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}}", xt = new CSSStyleSheet();
|
|
610
|
+
xt.replaceSync(Xt);
|
|
611
|
+
const Ut = [
|
|
654
612
|
"",
|
|
655
613
|
"default",
|
|
656
614
|
"horizontal",
|
|
657
615
|
"vertical"
|
|
658
|
-
],
|
|
616
|
+
], Jt = ["", "default", "none", "s", "m", "l"], Qt = [
|
|
659
617
|
"",
|
|
660
618
|
"main",
|
|
661
619
|
"brand",
|
|
@@ -667,11 +625,11 @@ const ae = [
|
|
|
667
625
|
"purpose-unlimited",
|
|
668
626
|
"state-hover",
|
|
669
627
|
"state-active"
|
|
670
|
-
],
|
|
628
|
+
], S = class S extends A {
|
|
671
629
|
constructor() {
|
|
672
630
|
var e;
|
|
673
|
-
super(
|
|
674
|
-
const t = document.createElement(
|
|
631
|
+
super(xt);
|
|
632
|
+
const t = document.createElement(S.nativeName);
|
|
675
633
|
t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
|
|
676
634
|
}
|
|
677
635
|
static get observedAttributes() {
|
|
@@ -699,14 +657,14 @@ const ae = [
|
|
|
699
657
|
t,
|
|
700
658
|
e,
|
|
701
659
|
o,
|
|
702
|
-
|
|
660
|
+
Ut
|
|
703
661
|
);
|
|
704
662
|
break;
|
|
705
663
|
case "size":
|
|
706
|
-
this.updateSize(t, e, o,
|
|
664
|
+
this.updateSize(t, e, o, Jt);
|
|
707
665
|
break;
|
|
708
666
|
case "color":
|
|
709
|
-
this.updateColor(t, e, o,
|
|
667
|
+
this.updateColor(t, e, o, Qt);
|
|
710
668
|
break;
|
|
711
669
|
default:
|
|
712
670
|
super.attributeChangedCallback(t, e, o);
|
|
@@ -720,7 +678,7 @@ const ae = [
|
|
|
720
678
|
`var(--px-size-border-${a})`
|
|
721
679
|
);
|
|
722
680
|
};
|
|
723
|
-
this.checkName(r, o) ? (i(e), i(o)) :
|
|
681
|
+
this.checkName(r, o) ? (i(e), i(o)) : n(
|
|
724
682
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
725
683
|
);
|
|
726
684
|
}
|
|
@@ -734,7 +692,7 @@ const ae = [
|
|
|
734
692
|
`var(--px-color-border-${a}-inverted)`
|
|
735
693
|
));
|
|
736
694
|
};
|
|
737
|
-
this.checkName(r, o) ? (i(e), i(o)) :
|
|
695
|
+
this.checkName(r, o) ? (i(e), i(o)) : n(
|
|
738
696
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
739
697
|
);
|
|
740
698
|
}
|
|
@@ -743,18 +701,18 @@ const ae = [
|
|
|
743
701
|
l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
|
|
744
702
|
};
|
|
745
703
|
if (!this.checkName(r, o))
|
|
746
|
-
|
|
704
|
+
n(
|
|
747
705
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
748
706
|
);
|
|
749
707
|
else if (t === "direction")
|
|
750
708
|
["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
|
|
751
709
|
Array.from(this.$el.classList).find(
|
|
752
|
-
(
|
|
710
|
+
(k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
|
|
753
711
|
) || i(a, o);
|
|
754
712
|
});
|
|
755
713
|
else {
|
|
756
714
|
const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
|
|
757
|
-
(
|
|
715
|
+
(k) => k.startsWith("separator-direction-") && k.endsWith(`--${a}`)
|
|
758
716
|
);
|
|
759
717
|
l ? this.$el.classList.replace(
|
|
760
718
|
l,
|
|
@@ -811,17 +769,17 @@ const ae = [
|
|
|
811
769
|
this.setAttribute("inverted", t);
|
|
812
770
|
}
|
|
813
771
|
};
|
|
814
|
-
|
|
815
|
-
let
|
|
816
|
-
customElements.get("px-separator") || customElements.define("px-separator",
|
|
817
|
-
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)}@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)}}@media only screen and (min-width: 1025px) and (max-width: 1440px){: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)}}@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: 1441px){: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)}}', $t = new CSSStyleSheet();
|
|
818
|
-
|
|
819
|
-
const
|
|
772
|
+
S.nativeName = "hr";
|
|
773
|
+
let P = S;
|
|
774
|
+
customElements.get("px-separator") || customElements.define("px-separator", P);
|
|
775
|
+
const Vt = ':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)}}', te = ':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)}@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)}}@media only screen and (min-width: 1025px) and (max-width: 1440px){: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)}}@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: 1441px){: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)}}', vt = new CSSStyleSheet();
|
|
776
|
+
vt.replaceSync(te);
|
|
777
|
+
const ee = [
|
|
820
778
|
"has-patch",
|
|
821
779
|
"neighbor-has-patch",
|
|
822
780
|
"has-ribbon",
|
|
823
781
|
"neighbor-has-ribbon"
|
|
824
|
-
],
|
|
782
|
+
], oe = [
|
|
825
783
|
"1",
|
|
826
784
|
"2",
|
|
827
785
|
"3",
|
|
@@ -834,63 +792,63 @@ const pe = [
|
|
|
834
792
|
"10",
|
|
835
793
|
"11",
|
|
836
794
|
"12"
|
|
837
|
-
],
|
|
838
|
-
|
|
795
|
+
], h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u = "px-padding", re = [
|
|
796
|
+
c(
|
|
839
797
|
"padding",
|
|
798
|
+
h,
|
|
840
799
|
g,
|
|
841
800
|
u,
|
|
842
|
-
v,
|
|
843
801
|
"--container-padding"
|
|
844
802
|
),
|
|
845
|
-
|
|
803
|
+
c(
|
|
846
804
|
"padding-inline",
|
|
805
|
+
h,
|
|
847
806
|
g,
|
|
848
|
-
u
|
|
849
|
-
v
|
|
807
|
+
u
|
|
850
808
|
),
|
|
851
|
-
|
|
809
|
+
c(
|
|
852
810
|
"padding-block",
|
|
811
|
+
h,
|
|
853
812
|
g,
|
|
854
|
-
u
|
|
855
|
-
v
|
|
813
|
+
u
|
|
856
814
|
),
|
|
857
|
-
|
|
815
|
+
c(
|
|
858
816
|
"padding-top",
|
|
817
|
+
h,
|
|
859
818
|
g,
|
|
860
|
-
u
|
|
861
|
-
v
|
|
819
|
+
u
|
|
862
820
|
),
|
|
863
|
-
|
|
821
|
+
c(
|
|
864
822
|
"padding-right",
|
|
823
|
+
h,
|
|
865
824
|
g,
|
|
866
825
|
u,
|
|
867
|
-
v,
|
|
868
826
|
"--container-padding-right"
|
|
869
827
|
),
|
|
870
|
-
|
|
828
|
+
c(
|
|
871
829
|
"padding-bottom",
|
|
830
|
+
h,
|
|
872
831
|
g,
|
|
873
|
-
u
|
|
874
|
-
v
|
|
832
|
+
u
|
|
875
833
|
),
|
|
876
|
-
|
|
834
|
+
c(
|
|
877
835
|
"padding-left",
|
|
836
|
+
h,
|
|
878
837
|
g,
|
|
879
838
|
u,
|
|
880
|
-
v,
|
|
881
839
|
"--container-padding-left"
|
|
882
840
|
),
|
|
883
|
-
|
|
841
|
+
c(
|
|
884
842
|
"gap",
|
|
885
|
-
|
|
886
|
-
|
|
843
|
+
h,
|
|
844
|
+
Bt,
|
|
887
845
|
"px-spacing",
|
|
888
846
|
void 0,
|
|
889
847
|
"subgrid-gap"
|
|
890
848
|
)
|
|
891
|
-
],
|
|
849
|
+
], X = class X extends tt {
|
|
892
850
|
constructor() {
|
|
893
|
-
super(
|
|
851
|
+
super(vt, ...re), this.template = () => `<div class="container">
|
|
894
852
|
<slot></slot>
|
|
895
853
|
<slot name="anchor-left"></slot>
|
|
896
854
|
<slot name="anchor-right"></slot>
|
|
@@ -954,7 +912,7 @@ const pe = [
|
|
|
954
912
|
if (e !== o)
|
|
955
913
|
switch (t) {
|
|
956
914
|
case "border":
|
|
957
|
-
this.updateAttribute(t, e, o,
|
|
915
|
+
this.updateAttribute(t, e, o, Dt);
|
|
958
916
|
break;
|
|
959
917
|
case "border-color":
|
|
960
918
|
this.updateBorderColor(t, o);
|
|
@@ -963,14 +921,14 @@ const pe = [
|
|
|
963
921
|
case "border-side--mobile":
|
|
964
922
|
case "border-side--tablet":
|
|
965
923
|
case "border-side--laptop":
|
|
966
|
-
this.updateAttribute(t, e, o,
|
|
924
|
+
this.updateAttribute(t, e, o, qt);
|
|
967
925
|
break;
|
|
968
926
|
case "border-radius":
|
|
969
927
|
this.updateAttribute(
|
|
970
928
|
t,
|
|
971
929
|
e,
|
|
972
930
|
o,
|
|
973
|
-
|
|
931
|
+
Pt
|
|
974
932
|
);
|
|
975
933
|
break;
|
|
976
934
|
case "no-border-radius":
|
|
@@ -981,7 +939,7 @@ const pe = [
|
|
|
981
939
|
t,
|
|
982
940
|
e,
|
|
983
941
|
o,
|
|
984
|
-
|
|
942
|
+
It
|
|
985
943
|
);
|
|
986
944
|
break;
|
|
987
945
|
case "background-color":
|
|
@@ -1001,7 +959,7 @@ const pe = [
|
|
|
1001
959
|
t,
|
|
1002
960
|
e,
|
|
1003
961
|
o,
|
|
1004
|
-
|
|
962
|
+
Rt
|
|
1005
963
|
);
|
|
1006
964
|
break;
|
|
1007
965
|
case "background-image":
|
|
@@ -1014,20 +972,20 @@ const pe = [
|
|
|
1014
972
|
o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
|
|
1015
973
|
break;
|
|
1016
974
|
case "box-shadow":
|
|
1017
|
-
this.updateAttribute(t, e, o,
|
|
975
|
+
this.updateAttribute(t, e, o, Mt);
|
|
1018
976
|
break;
|
|
1019
977
|
case "anchor-offset":
|
|
1020
|
-
this.updateAnchorOffset(e, o,
|
|
978
|
+
this.updateAnchorOffset(e, o, g);
|
|
1021
979
|
break;
|
|
1022
980
|
case "anchor-spacing":
|
|
1023
|
-
this.updateAnchorSpacing(e, o,
|
|
981
|
+
this.updateAnchorSpacing(e, o, ee);
|
|
1024
982
|
break;
|
|
1025
983
|
case "subgrid-rows":
|
|
1026
984
|
this.updateSubgridRows(
|
|
1027
985
|
t,
|
|
1028
986
|
e,
|
|
1029
987
|
o,
|
|
1030
|
-
|
|
988
|
+
oe
|
|
1031
989
|
);
|
|
1032
990
|
break;
|
|
1033
991
|
default:
|
|
@@ -1050,7 +1008,7 @@ const pe = [
|
|
|
1050
1008
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
1051
1009
|
}
|
|
1052
1010
|
updateGradient(t, e) {
|
|
1053
|
-
if (this.checkName(
|
|
1011
|
+
if (this.checkName(Ht, e)) {
|
|
1054
1012
|
const o = this.splitAttrNameFromBreakpoint(t);
|
|
1055
1013
|
t = o.attrName;
|
|
1056
1014
|
const r = o.breakpoint;
|
|
@@ -1059,13 +1017,13 @@ const pe = [
|
|
|
1059
1017
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
1060
1018
|
);
|
|
1061
1019
|
} else
|
|
1062
|
-
|
|
1020
|
+
n(
|
|
1063
1021
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1064
1022
|
);
|
|
1065
1023
|
}
|
|
1066
1024
|
updateBackgroundColor(t, e) {
|
|
1067
1025
|
const o = e.startsWith("surface-");
|
|
1068
|
-
if (this.checkName(
|
|
1026
|
+
if (this.checkName(rt, e)) {
|
|
1069
1027
|
const r = this.splitAttrNameFromBreakpoint(t), i = r.breakpoint;
|
|
1070
1028
|
this.$el.style.setProperty(
|
|
1071
1029
|
`--${r.attrName}${i}`,
|
|
@@ -1075,24 +1033,24 @@ const pe = [
|
|
|
1075
1033
|
`var(--px-color-background-${e}${o ? "" : "-inverted"})`
|
|
1076
1034
|
);
|
|
1077
1035
|
} else
|
|
1078
|
-
|
|
1036
|
+
n(
|
|
1079
1037
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1080
1038
|
);
|
|
1081
1039
|
}
|
|
1082
1040
|
updateBorderColor(t, e) {
|
|
1083
|
-
this.checkName(
|
|
1041
|
+
this.checkName(jt, e) ? (this.$el.style.setProperty(
|
|
1084
1042
|
`--${t}`,
|
|
1085
1043
|
`var(--px-color-border-${e}-default)`
|
|
1086
1044
|
), this.$el.style.setProperty(
|
|
1087
1045
|
`--${t}-inverted`,
|
|
1088
1046
|
`var(--px-color-border-${e}-inverted)`
|
|
1089
|
-
)) :
|
|
1047
|
+
)) : n(
|
|
1090
1048
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1091
1049
|
);
|
|
1092
1050
|
}
|
|
1093
1051
|
updateNoBorderRadius(t, e, o, r) {
|
|
1094
1052
|
if (!this.checkName(r, o))
|
|
1095
|
-
|
|
1053
|
+
n(
|
|
1096
1054
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1097
1055
|
);
|
|
1098
1056
|
else {
|
|
@@ -1106,7 +1064,7 @@ const pe = [
|
|
|
1106
1064
|
}
|
|
1107
1065
|
updateAttribute(t, e, o, r) {
|
|
1108
1066
|
if (!this.checkName(r, o))
|
|
1109
|
-
|
|
1067
|
+
n(
|
|
1110
1068
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1111
1069
|
);
|
|
1112
1070
|
else {
|
|
@@ -1129,8 +1087,8 @@ const pe = [
|
|
|
1129
1087
|
return { attrName: t, breakpoint: e };
|
|
1130
1088
|
}
|
|
1131
1089
|
updateAnchorOffset(t, e, o) {
|
|
1132
|
-
if (
|
|
1133
|
-
|
|
1090
|
+
if (!y(o, e)) {
|
|
1091
|
+
n(
|
|
1134
1092
|
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
1135
1093
|
);
|
|
1136
1094
|
return;
|
|
@@ -1153,8 +1111,8 @@ const pe = [
|
|
|
1153
1111
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
1154
1112
|
}
|
|
1155
1113
|
updateAnchorSpacing(t, e, o) {
|
|
1156
|
-
if (
|
|
1157
|
-
|
|
1114
|
+
if (!y(o, e)) {
|
|
1115
|
+
n(
|
|
1158
1116
|
`${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
|
|
1159
1117
|
);
|
|
1160
1118
|
return;
|
|
@@ -1174,7 +1132,7 @@ const pe = [
|
|
|
1174
1132
|
r(t), r(e);
|
|
1175
1133
|
}
|
|
1176
1134
|
updateSubgridRows(t, e, o, r) {
|
|
1177
|
-
|
|
1135
|
+
y(r, o) ? this.style.setProperty(`--${t}`, o) : n(
|
|
1178
1136
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1179
1137
|
);
|
|
1180
1138
|
}
|
|
@@ -1558,12 +1516,12 @@ const pe = [
|
|
|
1558
1516
|
this.setAttribute("subgrid-gap--laptop", t);
|
|
1559
1517
|
}
|
|
1560
1518
|
};
|
|
1561
|
-
|
|
1562
|
-
let
|
|
1563
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
1564
|
-
const
|
|
1565
|
-
|
|
1566
|
-
class
|
|
1519
|
+
X.nativeName = "div";
|
|
1520
|
+
let q = X;
|
|
1521
|
+
customElements.get("px-container") || customElements.define("px-container", q);
|
|
1522
|
+
const ft = new CSSStyleSheet();
|
|
1523
|
+
ft.replaceSync(Vt);
|
|
1524
|
+
class ie extends HTMLElement {
|
|
1567
1525
|
constructor() {
|
|
1568
1526
|
super(), this.template = () => `
|
|
1569
1527
|
<px-container border-radius="none" padding-inline="none">
|
|
@@ -1579,7 +1537,7 @@ class he extends HTMLElement {
|
|
|
1579
1537
|
<div class="content-wrapper">
|
|
1580
1538
|
<slot name="overlap"></slot>
|
|
1581
1539
|
</div>
|
|
1582
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
1540
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [ft];
|
|
1583
1541
|
}
|
|
1584
1542
|
connectedCallback() {
|
|
1585
1543
|
this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
|
|
@@ -1622,7 +1580,7 @@ class he extends HTMLElement {
|
|
|
1622
1580
|
if (e !== o)
|
|
1623
1581
|
switch (t) {
|
|
1624
1582
|
case "background-color":
|
|
1625
|
-
this.$container.backgroundColor =
|
|
1583
|
+
this.$container.backgroundColor = rt.indexOf(o) > 0 ? o : "none";
|
|
1626
1584
|
break;
|
|
1627
1585
|
case "background-gradient":
|
|
1628
1586
|
this.$container.gradient = this.gradient;
|
|
@@ -1852,14 +1810,14 @@ class he extends HTMLElement {
|
|
|
1852
1810
|
this.setAttribute("border-side--laptop", t);
|
|
1853
1811
|
}
|
|
1854
1812
|
}
|
|
1855
|
-
customElements.get("px-section") || customElements.define("px-section",
|
|
1856
|
-
const
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
const
|
|
1813
|
+
customElements.get("px-section") || customElements.define("px-section", ie);
|
|
1814
|
+
const ae = "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 only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){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 only screen and (min-width: 1025px){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 only screen and (min-width: 90.0625em){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", mt = new CSSStyleSheet(), kt = new CSSStyleSheet(), yt = new CSSStyleSheet();
|
|
1815
|
+
mt.replaceSync(ae);
|
|
1816
|
+
kt.replaceSync(_);
|
|
1817
|
+
yt.replaceSync(ht);
|
|
1818
|
+
const U = class U extends A {
|
|
1861
1819
|
constructor() {
|
|
1862
|
-
super(
|
|
1820
|
+
super(kt, yt, mt), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
|
|
1863
1821
|
}
|
|
1864
1822
|
static get observedAttributes() {
|
|
1865
1823
|
return [
|
|
@@ -1880,22 +1838,22 @@ const ot = class ot extends w {
|
|
|
1880
1838
|
if (e !== o)
|
|
1881
1839
|
switch (t) {
|
|
1882
1840
|
case "variant":
|
|
1883
|
-
this.updateVariant(t, e, o,
|
|
1841
|
+
this.updateVariant(t, e, o, ot);
|
|
1884
1842
|
break;
|
|
1885
1843
|
case "color":
|
|
1886
|
-
this.updateTypography(t, e, o,
|
|
1844
|
+
this.updateTypography(t, e, o, O);
|
|
1887
1845
|
break;
|
|
1888
1846
|
case "font-size":
|
|
1889
|
-
this.updateTypography(t, e, o,
|
|
1847
|
+
this.updateTypography(t, e, o, at);
|
|
1890
1848
|
break;
|
|
1891
1849
|
case "font-weight":
|
|
1892
|
-
this.updateTypography(t, e, o,
|
|
1850
|
+
this.updateTypography(t, e, o, it);
|
|
1893
1851
|
break;
|
|
1894
1852
|
case "text-align":
|
|
1895
1853
|
case "text-align--mobile":
|
|
1896
1854
|
case "text-align--tablet":
|
|
1897
1855
|
case "text-align--laptop":
|
|
1898
|
-
this.updateTypography(t, e, o,
|
|
1856
|
+
this.updateTypography(t, e, o, et);
|
|
1899
1857
|
break;
|
|
1900
1858
|
case "disabled":
|
|
1901
1859
|
this.color = "state-disabled";
|
|
@@ -1909,13 +1867,13 @@ const ot = class ot extends w {
|
|
|
1909
1867
|
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
1910
1868
|
}
|
|
1911
1869
|
updateVariant(t, e, o, r) {
|
|
1912
|
-
this.checkName(r, o) ? this.toggleClass(e, o) :
|
|
1870
|
+
this.checkName(r, o) ? this.toggleClass(e, o) : n(
|
|
1913
1871
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1914
1872
|
);
|
|
1915
1873
|
}
|
|
1916
1874
|
updateTypography(t, e, o, r) {
|
|
1917
1875
|
if (!this.checkName(r, o))
|
|
1918
|
-
|
|
1876
|
+
n(
|
|
1919
1877
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1920
1878
|
);
|
|
1921
1879
|
else {
|
|
@@ -1998,10 +1956,10 @@ const ot = class ot extends w {
|
|
|
1998
1956
|
this.setAttribute("disabled", t);
|
|
1999
1957
|
}
|
|
2000
1958
|
};
|
|
2001
|
-
|
|
2002
|
-
let
|
|
2003
|
-
customElements.get("px-p") || customElements.define("px-p",
|
|
2004
|
-
class
|
|
1959
|
+
U.nativeName = "p";
|
|
1960
|
+
let D = U;
|
|
1961
|
+
customElements.get("px-p") || customElements.define("px-p", D);
|
|
1962
|
+
class se extends HTMLElement {
|
|
2005
1963
|
constructor() {
|
|
2006
1964
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
|
|
2007
1965
|
<button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
|
|
@@ -2015,16 +1973,16 @@ class ue extends HTMLElement {
|
|
|
2015
1973
|
});
|
|
2016
1974
|
}
|
|
2017
1975
|
}
|
|
2018
|
-
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer",
|
|
2019
|
-
const
|
|
2020
|
-
|
|
2021
|
-
var
|
|
2022
|
-
class
|
|
1976
|
+
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", se);
|
|
1977
|
+
const ne = ":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: 285px){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 767px){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:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#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)}}", At = new CSSStyleSheet();
|
|
1978
|
+
At.replaceSync(ne);
|
|
1979
|
+
var f, p, H, zt, $, $t;
|
|
1980
|
+
class de extends HTMLElement {
|
|
2023
1981
|
constructor() {
|
|
2024
1982
|
var e;
|
|
2025
1983
|
super();
|
|
2026
|
-
|
|
2027
|
-
|
|
1984
|
+
v(this, p);
|
|
1985
|
+
v(this, f);
|
|
2028
1986
|
this.template = `<dialog>
|
|
2029
1987
|
<px-section>
|
|
2030
1988
|
<px-container
|
|
@@ -2081,7 +2039,7 @@ class ve extends HTMLElement {
|
|
|
2081
2039
|
<slot name="mdd-footer"></slot>
|
|
2082
2040
|
</px-hstack>
|
|
2083
2041
|
</px-section>
|
|
2084
|
-
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
2042
|
+
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [At], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "menu", this.internals && (this.internals.role = "menu");
|
|
2085
2043
|
}
|
|
2086
2044
|
static get observedAttributes() {
|
|
2087
2045
|
return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
|
|
@@ -2114,14 +2072,14 @@ class ve extends HTMLElement {
|
|
|
2114
2072
|
}
|
|
2115
2073
|
})
|
|
2116
2074
|
);
|
|
2117
|
-
}), this.getAttribute("name") === "__lavender_mobile_menu" && (
|
|
2075
|
+
}), this.getAttribute("name") === "__lavender_mobile_menu" && (d(this, p, H).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (d(this, p, zt).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
|
|
2118
2076
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
2119
|
-
)) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (
|
|
2120
|
-
this.$slotMddFooter && (
|
|
2121
|
-
})),
|
|
2077
|
+
)) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (d(this, p, $).style.display = "none"), z(this, f, new MutationObserver(() => {
|
|
2078
|
+
this.$slotMddFooter && (d(this, p, $).style.display = "block");
|
|
2079
|
+
})), d(this, f).observe(this, { childList: !0, subtree: !0 });
|
|
2122
2080
|
}
|
|
2123
2081
|
disconnectedCallback() {
|
|
2124
|
-
|
|
2082
|
+
d(this, f).disconnect();
|
|
2125
2083
|
}
|
|
2126
2084
|
attributeChangedCallback(e, o, r) {
|
|
2127
2085
|
if (e === "name" && !r)
|
|
@@ -2129,15 +2087,15 @@ class ve extends HTMLElement {
|
|
|
2129
2087
|
if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
|
|
2130
2088
|
const i = r === "true" || r === "" ? "true" : "false";
|
|
2131
2089
|
this.internals.ariaHidden = i, this.ariaHidden = i;
|
|
2132
|
-
const l =
|
|
2090
|
+
const l = d(this, p, $).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
2133
2091
|
this.style.setProperty(
|
|
2134
2092
|
"--mdd-section-container-padding-bottom",
|
|
2135
2093
|
`${l}em`
|
|
2136
2094
|
);
|
|
2137
2095
|
}
|
|
2138
|
-
e === "close-button-aria-label" &&
|
|
2096
|
+
e === "close-button-aria-label" && d(this, p, $t).forEach((i) => {
|
|
2139
2097
|
r ? i.setAttribute("aria-label", r || "Close") : i.removeAttribute("aria-label");
|
|
2140
|
-
}), e === "back-to-menu-label" && (
|
|
2098
|
+
}), e === "back-to-menu-label" && (d(this, p, H).innerHTML = `
|
|
2141
2099
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
2142
2100
|
${r || "Back to menu"}
|
|
2143
2101
|
`);
|
|
@@ -2180,19 +2138,19 @@ class ve extends HTMLElement {
|
|
|
2180
2138
|
this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
|
|
2181
2139
|
}
|
|
2182
2140
|
}
|
|
2183
|
-
|
|
2141
|
+
f = new WeakMap(), p = new WeakSet(), H = function() {
|
|
2184
2142
|
return this.shadowRoot.querySelector("#back-button");
|
|
2185
|
-
},
|
|
2143
|
+
}, zt = function() {
|
|
2186
2144
|
return this.shadowRoot.querySelector("px-p");
|
|
2187
|
-
},
|
|
2145
|
+
}, $ = function() {
|
|
2188
2146
|
return this.shadowRoot.querySelector("#footer");
|
|
2189
|
-
},
|
|
2147
|
+
}, $t = function() {
|
|
2190
2148
|
return this.shadowRoot.querySelectorAll("px-button-icon");
|
|
2191
2149
|
};
|
|
2192
|
-
customElements.get("px-mdd") || customElements.define("px-mdd",
|
|
2193
|
-
const
|
|
2194
|
-
|
|
2195
|
-
class
|
|
2150
|
+
customElements.get("px-mdd") || customElements.define("px-mdd", de);
|
|
2151
|
+
const le = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::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:.5em;padding-inline:1em;line-height:4em}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', wt = new CSSStyleSheet();
|
|
2152
|
+
wt.replaceSync(le);
|
|
2153
|
+
class pe extends HTMLElement {
|
|
2196
2154
|
constructor() {
|
|
2197
2155
|
super(), this.template = `<px-vstack gap="default">
|
|
2198
2156
|
<px-p font-size="heading-l" font-weight="title">
|
|
@@ -2206,7 +2164,7 @@ class me extends HTMLElement {
|
|
|
2206
2164
|
<px-vstack gap="default" gap--mobile="default">
|
|
2207
2165
|
<slot name="footer"></slot>
|
|
2208
2166
|
</px-vstack>
|
|
2209
|
-
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
2167
|
+
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [wt];
|
|
2210
2168
|
}
|
|
2211
2169
|
connectedCallback() {
|
|
2212
2170
|
this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
|
|
@@ -2245,12 +2203,12 @@ class me extends HTMLElement {
|
|
|
2245
2203
|
t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
|
|
2246
2204
|
}
|
|
2247
2205
|
}
|
|
2248
|
-
customElements.get("px-mdd-section") || customElements.define("px-mdd-section",
|
|
2249
|
-
const
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
const
|
|
2206
|
+
customElements.get("px-mdd-section") || customElements.define("px-mdd-section", pe);
|
|
2207
|
+
const St = new CSSStyleSheet(), Ct = new CSSStyleSheet(), Lt = new CSSStyleSheet();
|
|
2208
|
+
St.replaceSync(nt);
|
|
2209
|
+
Ct.replaceSync(st);
|
|
2210
|
+
Lt.replaceSync(_);
|
|
2211
|
+
const be = [...at, "link-m", "link-s"], ce = [
|
|
2254
2212
|
"link",
|
|
2255
2213
|
"no-style",
|
|
2256
2214
|
"skip-link",
|
|
@@ -2258,10 +2216,10 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2258
2216
|
"btn-secondary",
|
|
2259
2217
|
"btn-tertiary",
|
|
2260
2218
|
"icon-link"
|
|
2261
|
-
],
|
|
2219
|
+
], he = ["", "default", "alternative"], C = class C extends A {
|
|
2262
2220
|
constructor() {
|
|
2263
|
-
super(
|
|
2264
|
-
const t = document.createElement(
|
|
2221
|
+
super(St, Ct, Lt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
2222
|
+
const t = document.createElement(C.nativeName);
|
|
2265
2223
|
t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
2266
2224
|
}
|
|
2267
2225
|
static get observedAttributes() {
|
|
@@ -2287,9 +2245,7 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2287
2245
|
];
|
|
2288
2246
|
}
|
|
2289
2247
|
connectedCallback() {
|
|
2290
|
-
this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after),
|
|
2291
|
-
}
|
|
2292
|
-
disconnectedCallback() {
|
|
2248
|
+
this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), V(this, this.$el, !1);
|
|
2293
2249
|
}
|
|
2294
2250
|
attributeChangedCallback(t, e, o) {
|
|
2295
2251
|
if (e !== o)
|
|
@@ -2305,7 +2261,7 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2305
2261
|
case "shape--tablet":
|
|
2306
2262
|
case "shape--laptop":
|
|
2307
2263
|
case "shape--desktop":
|
|
2308
|
-
this.updateShape(t, o,
|
|
2264
|
+
this.updateShape(t, o, he);
|
|
2309
2265
|
break;
|
|
2310
2266
|
case "extended":
|
|
2311
2267
|
case "extended--mobile":
|
|
@@ -2319,14 +2275,14 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2319
2275
|
t,
|
|
2320
2276
|
e,
|
|
2321
2277
|
o,
|
|
2322
|
-
|
|
2278
|
+
be
|
|
2323
2279
|
);
|
|
2324
2280
|
break;
|
|
2325
2281
|
case "color":
|
|
2326
|
-
this.updateTypography(t, e, o,
|
|
2282
|
+
this.updateTypography(t, e, o, O);
|
|
2327
2283
|
break;
|
|
2328
2284
|
case "font-weight":
|
|
2329
|
-
this.updateTypography(t, e, o,
|
|
2285
|
+
this.updateTypography(t, e, o, it);
|
|
2330
2286
|
break;
|
|
2331
2287
|
case "title":
|
|
2332
2288
|
o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
|
|
@@ -2351,13 +2307,13 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2351
2307
|
this.$el.classList.toggle(t);
|
|
2352
2308
|
}
|
|
2353
2309
|
updateVariant(t, e) {
|
|
2354
|
-
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(
|
|
2310
|
+
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ce, e) || n(
|
|
2355
2311
|
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
2356
2312
|
), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
2357
2313
|
}
|
|
2358
2314
|
updateShape(t, e, o) {
|
|
2359
|
-
if (
|
|
2360
|
-
|
|
2315
|
+
if (!y(o, e)) {
|
|
2316
|
+
n(
|
|
2361
2317
|
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
2362
2318
|
);
|
|
2363
2319
|
return;
|
|
@@ -2365,7 +2321,7 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2365
2321
|
e !== null && e !== "" && this.$el.setAttribute(t, e);
|
|
2366
2322
|
}
|
|
2367
2323
|
updateTypography(t, e, o, r) {
|
|
2368
|
-
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(r, o) ||
|
|
2324
|
+
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(r, o) || n(
|
|
2369
2325
|
`${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
2370
2326
|
);
|
|
2371
2327
|
}
|
|
@@ -2486,46 +2442,12 @@ const ke = [...bt, "link-m", "link-s"], ye = [
|
|
|
2486
2442
|
t ? this.setAttribute("title", t) : this.removeAttribute("title");
|
|
2487
2443
|
}
|
|
2488
2444
|
};
|
|
2489
|
-
|
|
2490
|
-
let
|
|
2491
|
-
customElements.get("px-a") || customElements.define("px-a",
|
|
2492
|
-
var
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
super();
|
|
2496
|
-
c(this, R);
|
|
2497
|
-
c(this, m);
|
|
2498
|
-
this.$el.classList.add("wrapper"), k(this, m, new at(
|
|
2499
|
-
this,
|
|
2500
|
-
this.$el,
|
|
2501
|
-
() => P(this, R, qt).call(this)
|
|
2502
|
-
));
|
|
2503
|
-
}
|
|
2504
|
-
connectedCallback() {
|
|
2505
|
-
super.connectedCallback(), n(this, m).connect();
|
|
2506
|
-
}
|
|
2507
|
-
disconnectedCallback() {
|
|
2508
|
-
super.disconnectedCallback(), n(this, m).disconnect();
|
|
2509
|
-
}
|
|
2510
|
-
attributeChangedCallback(e, o, r) {
|
|
2511
|
-
if (o !== r)
|
|
2512
|
-
switch (e) {
|
|
2513
|
-
case "disabled":
|
|
2514
|
-
super.attributeChangedCallback(e, o, r), r !== null && n(this, m).clearInteractiveState();
|
|
2515
|
-
break;
|
|
2516
|
-
default:
|
|
2517
|
-
super.attributeChangedCallback(e, o, r);
|
|
2518
|
-
break;
|
|
2519
|
-
}
|
|
2520
|
-
}
|
|
2521
|
-
}
|
|
2522
|
-
m = new WeakMap(), R = new WeakSet(), qt = function() {
|
|
2523
|
-
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
2524
|
-
};
|
|
2525
|
-
customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
|
|
2526
|
-
const $e = '.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 only screen and (max-width: 47.9375em){a,button{padding:var(--px-spacing-s-mobile) 0}}@media only screen and (min-width: 48em){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 only screen and (min-width: 64.0625em){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 only screen and (min-width: 90.0625em){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)}}', Dt = new CSSStyleSheet();
|
|
2527
|
-
Dt.replaceSync($e);
|
|
2528
|
-
class we extends HTMLElement {
|
|
2445
|
+
C.nativeName = "a";
|
|
2446
|
+
let j = C;
|
|
2447
|
+
customElements.get("px-a") || customElements.define("px-a", j);
|
|
2448
|
+
const ge = '.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 only screen and (max-width: 47.9375em){a,button{padding:var(--px-spacing-s-mobile) 0}}@media only screen and (min-width: 48em){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 only screen and (min-width: 64.0625em){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 only screen and (min-width: 90.0625em){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)}}', Tt = new CSSStyleSheet();
|
|
2449
|
+
Tt.replaceSync(ge);
|
|
2450
|
+
class ue extends HTMLElement {
|
|
2529
2451
|
constructor() {
|
|
2530
2452
|
var t;
|
|
2531
2453
|
super(), this.template = `
|
|
@@ -2536,7 +2458,7 @@ class we extends HTMLElement {
|
|
|
2536
2458
|
</span>
|
|
2537
2459
|
<px-spacer></px-spacer>
|
|
2538
2460
|
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
2539
|
-
</px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
2461
|
+
</px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Tt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
|
|
2540
2462
|
}
|
|
2541
2463
|
static get observedAttributes() {
|
|
2542
2464
|
return ["href", "for"];
|
|
@@ -2585,9 +2507,9 @@ class we extends HTMLElement {
|
|
|
2585
2507
|
);
|
|
2586
2508
|
}
|
|
2587
2509
|
}
|
|
2588
|
-
customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item",
|
|
2510
|
+
customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", ue);
|
|
2589
2511
|
export {
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2512
|
+
pe as MddSection,
|
|
2513
|
+
ue as MddSectionItem,
|
|
2514
|
+
de as MegaDropDown
|
|
2593
2515
|
};
|