@proximus/lavender-mega-dropdown 2.0.0-alpha.16 → 2.0.0-alpha.161
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +586 -321
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
var
|
|
1
|
+
var it = (s) => {
|
|
2
2
|
throw TypeError(s);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var n = (s, t, e) => (
|
|
6
|
-
import { PxElement as
|
|
4
|
+
var I = (s, t, e) => t.has(s) || it("Cannot " + e);
|
|
5
|
+
var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? it("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, o) => (I(s, t, "write to private field"), o ? o.call(s, e) : t.set(s, e), e), j = (s, t, e) => (I(s, t, "access private method"), e);
|
|
6
|
+
import { PxElement as $, transferAccessibilityAttributes as pt, log as d, checkName as w, WrappedInteractiveStateController as bt, WithExtraAttributes as X, iconSizeValuesKC as _t, textalignValues as ct, colorValues as Z, headingValues as gt, cssTokenBreakpoints as g, paddingValues as u, gapValues as Wt, boxShadowValues as Ft, backgroundSizeValues as Gt, noBorderRadiusValues as Yt, borderRadiusValues as Xt, borderSideValues as Zt, borderValues as Kt, gradientValues as st, backgroundColorValues as P, borderColorValues as nt, fontweightValues as ht, fontsizeValues as ut } from "@proximus/lavender-common";
|
|
7
7
|
import "@proximus/lavender-layout";
|
|
8
|
-
const at = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, st = ':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)}}', _t = ".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)}}", Ft = ":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)}}", nt = new CSSStyleSheet(), dt = new CSSStyleSheet(), lt = new CSSStyleSheet(), pt = new CSSStyleSheet();
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
8
|
+
const xt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0;flex-shrink:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile);text-align:left}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-primary-default);color:var(--px-color-text-neutral-inverted)}.btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-default);color:var(--px-color-text-brand-default)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile);border-radius:var(--px-radius-pill);border:solid var(--px-size-border-m) transparent;font-weight:var(--px-font-weight-body)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading),.btn.actionable-tag-secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading),.btn.actionable-tag-secondary:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true],.btn.actionable-tag-secondary[disabled],.btn.actionable-tag-secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.btn.header-minimal-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);border:none;padding:0;border-radius:0;background:none}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-text-brand-default)}:host([inverted]) .btn.actionable-tag-secondary{background:var(--px-color-background-container-secondary-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.actionable-tag-secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn.actionable-tag-secondary:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true],:host([inverted]) .btn.actionable-tag-secondary[disabled],:host([inverted]) .btn.actionable-tag-secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (max-width: 47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:none;padding:0;border-radius:0;background:none}}@media screen and (min-width: 90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag,.btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="s"]) .btn.actionable-tag,:host([size="s"]) .btn.actionable-tag-secondary{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="m"]) .btn.actionable-tag,:host([size="m"]) .btn.actionable-tag-secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.actionable-tag-secondary,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, vt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Ut = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Jt = ':host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-2xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-2xs-mobile)}:host([size="m"]) .tag{padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);gap:var(--px-spacing-xs-mobile)}:host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}:host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-default);color:var(--px-color-text-neutral-inverted)}:host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-default);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]:not([dismissible])) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([state="success"]) .tag{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="warning"]) .tag{background-color:var(--px-color-background-purpose-warning-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]):host([state="error"]) .tag{background-color:var(--px-color-background-purpose-error-inverted);color:var(--px-color-text-neutral-default)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-2xs-tablet)}:host([size="m"]) .tag{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-2xs-laptop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}:host([size="s"]) .tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-2xs-desktop)}:host([size="m"]) .tag{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);gap:var(--px-spacing-xs-desktop)}}', mt = new CSSStyleSheet(), ft = new CSSStyleSheet(), kt = new CSSStyleSheet(), yt = new CSSStyleSheet();
|
|
9
|
+
mt.replaceSync(xt);
|
|
10
|
+
ft.replaceSync(vt);
|
|
11
|
+
kt.replaceSync(Ut);
|
|
12
|
+
yt.replaceSync(Jt);
|
|
13
|
+
const dt = [
|
|
14
14
|
"",
|
|
15
15
|
"default",
|
|
16
16
|
"secondary",
|
|
@@ -21,16 +21,18 @@ const Nt = [
|
|
|
21
21
|
"patch-black-friday",
|
|
22
22
|
"patch-eco",
|
|
23
23
|
"actionable-tag",
|
|
24
|
-
"
|
|
25
|
-
|
|
24
|
+
"actionable-tag-secondary",
|
|
25
|
+
"header-dropdown",
|
|
26
|
+
"header-minimal-dropdown"
|
|
27
|
+
], Qt = [
|
|
26
28
|
"",
|
|
27
29
|
"default",
|
|
28
30
|
"bottom-right",
|
|
29
31
|
"bottom-left",
|
|
30
32
|
"alternative"
|
|
31
|
-
],
|
|
33
|
+
], U = class U extends $ {
|
|
32
34
|
constructor() {
|
|
33
|
-
super(
|
|
35
|
+
super(mt, ft, kt, yt), this.template = () => `<button class="btn">
|
|
34
36
|
<slot name="before"></slot><slot></slot><slot name="after"></slot>
|
|
35
37
|
</button>`, this.shadowRoot.innerHTML = this.template();
|
|
36
38
|
}
|
|
@@ -51,7 +53,8 @@ const Nt = [
|
|
|
51
53
|
"extended--mobile",
|
|
52
54
|
"extended--tablet",
|
|
53
55
|
"extended--laptop",
|
|
54
|
-
"extended--desktop"
|
|
56
|
+
"extended--desktop",
|
|
57
|
+
"size"
|
|
55
58
|
];
|
|
56
59
|
}
|
|
57
60
|
connectedCallback() {
|
|
@@ -61,7 +64,7 @@ const Nt = [
|
|
|
61
64
|
e && (e.addEventListener("click", () => {
|
|
62
65
|
this.$el.focus();
|
|
63
66
|
}), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
|
|
64
|
-
}),
|
|
67
|
+
}), pt(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
65
68
|
var o;
|
|
66
69
|
e.preventDefault(), (o = this.closest("form")) == null || o.submit();
|
|
67
70
|
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
@@ -69,6 +72,8 @@ const Nt = [
|
|
|
69
72
|
e.preventDefault(), (o = this.closest("form")) == null || o.reset();
|
|
70
73
|
});
|
|
71
74
|
}
|
|
75
|
+
disconnectedCallback() {
|
|
76
|
+
}
|
|
72
77
|
attributeChangedCallback(t, e, o) {
|
|
73
78
|
if (e !== o)
|
|
74
79
|
switch (t) {
|
|
@@ -88,12 +93,15 @@ const Nt = [
|
|
|
88
93
|
case "loading":
|
|
89
94
|
this.updateLoading();
|
|
90
95
|
break;
|
|
96
|
+
case "disabled":
|
|
97
|
+
super.attributeChangedCallback(t, e, o);
|
|
98
|
+
break;
|
|
91
99
|
case "shape":
|
|
92
100
|
case "shape--mobile":
|
|
93
101
|
case "shape--tablet":
|
|
94
102
|
case "shape--laptop":
|
|
95
103
|
case "shape--desktop":
|
|
96
|
-
this.updateShape(t, o,
|
|
104
|
+
this.updateShape(t, o, Qt);
|
|
97
105
|
break;
|
|
98
106
|
case "aria-expanded":
|
|
99
107
|
o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
|
|
@@ -115,14 +123,14 @@ const Nt = [
|
|
|
115
123
|
t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
|
|
116
124
|
}
|
|
117
125
|
updateVariant(t, e) {
|
|
118
|
-
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(
|
|
119
|
-
|
|
126
|
+
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(dt, e) || d(
|
|
127
|
+
`"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${dt.join('", "')}".`
|
|
120
128
|
);
|
|
121
129
|
}
|
|
122
130
|
updateState(t, e) {
|
|
123
131
|
const o = ["", "default", "success", "error"];
|
|
124
132
|
this._toggleClass(t, e), this.checkName(o, e) || d(
|
|
125
|
-
|
|
133
|
+
`"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
126
134
|
);
|
|
127
135
|
}
|
|
128
136
|
updateExtended(t, e) {
|
|
@@ -133,9 +141,9 @@ const Nt = [
|
|
|
133
141
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
134
142
|
}
|
|
135
143
|
updateShape(t, e, o) {
|
|
136
|
-
if (!
|
|
144
|
+
if (!w(o, e)) {
|
|
137
145
|
d(
|
|
138
|
-
|
|
146
|
+
`"${e}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
139
147
|
);
|
|
140
148
|
return;
|
|
141
149
|
}
|
|
@@ -231,11 +239,54 @@ const Nt = [
|
|
|
231
239
|
set ariaExpanded(t) {
|
|
232
240
|
t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
|
|
233
241
|
}
|
|
242
|
+
get size() {
|
|
243
|
+
return this.getAttribute("size") || "";
|
|
244
|
+
}
|
|
245
|
+
set size(t) {
|
|
246
|
+
this.setAttribute("size", t);
|
|
247
|
+
}
|
|
234
248
|
};
|
|
235
|
-
|
|
236
|
-
let C =
|
|
249
|
+
U.nativeName = "button";
|
|
250
|
+
let C = U;
|
|
237
251
|
customElements.get("px-button") || customElements.define("px-button", C);
|
|
238
|
-
|
|
252
|
+
var x, T, At;
|
|
253
|
+
class Vt extends C {
|
|
254
|
+
constructor() {
|
|
255
|
+
super();
|
|
256
|
+
c(this, T);
|
|
257
|
+
c(this, x);
|
|
258
|
+
this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new bt(
|
|
259
|
+
this,
|
|
260
|
+
this.$el,
|
|
261
|
+
() => j(this, T, At).call(this)
|
|
262
|
+
));
|
|
263
|
+
}
|
|
264
|
+
connectedCallback() {
|
|
265
|
+
super.connectedCallback(), n(this, x).connect();
|
|
266
|
+
}
|
|
267
|
+
disconnectedCallback() {
|
|
268
|
+
super.disconnectedCallback(), n(this, x).disconnect();
|
|
269
|
+
}
|
|
270
|
+
attributeChangedCallback(e, o, r) {
|
|
271
|
+
if (o !== r)
|
|
272
|
+
switch (e) {
|
|
273
|
+
case "loading":
|
|
274
|
+
super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
|
|
275
|
+
break;
|
|
276
|
+
case "disabled":
|
|
277
|
+
super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
|
|
278
|
+
break;
|
|
279
|
+
default:
|
|
280
|
+
super.attributeChangedCallback(e, o, r);
|
|
281
|
+
break;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
x = new WeakMap(), T = new WeakSet(), At = function() {
|
|
286
|
+
return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
|
|
287
|
+
};
|
|
288
|
+
customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Vt);
|
|
289
|
+
class te extends HTMLElement {
|
|
239
290
|
constructor() {
|
|
240
291
|
super();
|
|
241
292
|
}
|
|
@@ -268,8 +319,8 @@ class jt extends HTMLElement {
|
|
|
268
319
|
t && t.remove();
|
|
269
320
|
}
|
|
270
321
|
}
|
|
271
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
272
|
-
const
|
|
322
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", te);
|
|
323
|
+
const ee = [
|
|
273
324
|
"Brand",
|
|
274
325
|
"Accent",
|
|
275
326
|
"Neutral",
|
|
@@ -282,33 +333,33 @@ const Yt = [
|
|
|
282
333
|
"StateHover",
|
|
283
334
|
"StateActive",
|
|
284
335
|
"StateDisabled"
|
|
285
|
-
],
|
|
336
|
+
], oe = ["Inherit", ...ee].map(
|
|
286
337
|
(s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
287
|
-
),
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
"size",
|
|
292
|
-
"color",
|
|
293
|
-
"aria-label",
|
|
294
|
-
"inverted",
|
|
295
|
-
"from",
|
|
296
|
-
"disabled"
|
|
297
|
-
];
|
|
298
|
-
var x, b, $;
|
|
299
|
-
class Xt extends Tt {
|
|
338
|
+
), re = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:1;width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", zt = new CSSStyleSheet();
|
|
339
|
+
zt.replaceSync(re);
|
|
340
|
+
var m, b, E;
|
|
341
|
+
class ae extends X {
|
|
300
342
|
constructor(...e) {
|
|
301
343
|
var o;
|
|
302
|
-
super(...e,
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
<use
|
|
344
|
+
super(...e, zt);
|
|
345
|
+
c(this, m);
|
|
346
|
+
c(this, b);
|
|
347
|
+
c(this, E, () => `<svg aria-hidden="true">
|
|
348
|
+
<use></use>
|
|
307
349
|
</svg>`);
|
|
308
|
-
this.shadowRoot.innerHTML = n(this,
|
|
350
|
+
this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (o = this.attachInternals) == null ? void 0 : o.call(this)), n(this, b) && (n(this, b).role = "img");
|
|
309
351
|
}
|
|
310
352
|
static get observedAttributes() {
|
|
311
|
-
return [
|
|
353
|
+
return [
|
|
354
|
+
...super.observedAttributes,
|
|
355
|
+
"name",
|
|
356
|
+
"size",
|
|
357
|
+
"color",
|
|
358
|
+
"aria-label",
|
|
359
|
+
"inverted",
|
|
360
|
+
"from",
|
|
361
|
+
"disabled"
|
|
362
|
+
];
|
|
312
363
|
}
|
|
313
364
|
attributeChangedCallback(e, o, r) {
|
|
314
365
|
if (o !== r)
|
|
@@ -317,10 +368,10 @@ class Xt extends Tt {
|
|
|
317
368
|
this.updateName(o, r);
|
|
318
369
|
break;
|
|
319
370
|
case "size":
|
|
320
|
-
this.updateAttribute(e, o, r,
|
|
371
|
+
this.updateAttribute(e, o, r, _t);
|
|
321
372
|
break;
|
|
322
373
|
case "color":
|
|
323
|
-
this.updateAttribute(e, o, r,
|
|
374
|
+
this.updateAttribute(e, o, r, oe);
|
|
324
375
|
break;
|
|
325
376
|
case "disabled":
|
|
326
377
|
this.color = "state-disabled";
|
|
@@ -333,29 +384,31 @@ class Xt extends Tt {
|
|
|
333
384
|
}
|
|
334
385
|
}
|
|
335
386
|
connectedCallback() {
|
|
387
|
+
var o;
|
|
388
|
+
this.role = "img";
|
|
336
389
|
const e = document.querySelectorAll("px-icon-set");
|
|
337
390
|
e || console.log("<px-icon-set> component not found");
|
|
338
|
-
for (const
|
|
339
|
-
if (!
|
|
391
|
+
for (const r of e) {
|
|
392
|
+
if (!r.getAttribute("name") || !r.getAttribute("src")) {
|
|
340
393
|
console.error("Icon name or src not found");
|
|
341
394
|
continue;
|
|
342
395
|
}
|
|
343
|
-
|
|
344
|
-
"
|
|
345
|
-
`${n(this,
|
|
396
|
+
r.getAttribute("name") === this.from && r.getAttribute("type") !== "font" && (k(this, m, r.getAttribute("src")), this.$el.firstElementChild.setAttribute(
|
|
397
|
+
"href",
|
|
398
|
+
`${n(this, m)}#icon-${this.name}`
|
|
346
399
|
));
|
|
347
400
|
}
|
|
348
|
-
!this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
|
|
401
|
+
!this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true"), ((o = this.parentElement) == null ? void 0 : o.localName) === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
|
|
349
402
|
}
|
|
350
|
-
updateAttribute(e, o, r,
|
|
351
|
-
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(
|
|
403
|
+
updateAttribute(e, o, r, a) {
|
|
404
|
+
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(a, r) || d(
|
|
352
405
|
`${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
|
|
353
406
|
);
|
|
354
407
|
}
|
|
355
408
|
updateName(e, o) {
|
|
356
|
-
n(this,
|
|
357
|
-
"
|
|
358
|
-
`${n(this,
|
|
409
|
+
n(this, m) && this.$el.firstElementChild.setAttribute(
|
|
410
|
+
"href",
|
|
411
|
+
`${n(this, m)}#icon-${o}`
|
|
359
412
|
);
|
|
360
413
|
}
|
|
361
414
|
get $el() {
|
|
@@ -404,18 +457,18 @@ class Xt extends Tt {
|
|
|
404
457
|
this.setAttribute("disabled", e);
|
|
405
458
|
}
|
|
406
459
|
}
|
|
407
|
-
|
|
408
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
409
|
-
const ct = "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-3xl-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-2xl-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-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-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: 768px){::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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){::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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){::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)}}", F = ".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)}", ht = new CSSStyleSheet();
|
|
410
|
-
|
|
411
|
-
const
|
|
412
|
-
|
|
413
|
-
class
|
|
460
|
+
m = new WeakMap(), b = new WeakMap(), E = new WeakMap();
|
|
461
|
+
customElements.get("px-icon") || customElements.define("px-icon", ae);
|
|
462
|
+
const wt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", K = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (min-width: 90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", $t = new CSSStyleSheet();
|
|
463
|
+
$t.replaceSync(wt);
|
|
464
|
+
const St = new CSSStyleSheet();
|
|
465
|
+
St.replaceSync(K);
|
|
466
|
+
class A extends $ {
|
|
414
467
|
template() {
|
|
415
468
|
return "<slot></slot>";
|
|
416
469
|
}
|
|
417
470
|
constructor(t) {
|
|
418
|
-
super(
|
|
471
|
+
super($t, St);
|
|
419
472
|
const e = document.createElement(t);
|
|
420
473
|
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
421
474
|
}
|
|
@@ -429,24 +482,25 @@ class f extends y {
|
|
|
429
482
|
"text-align--tablet",
|
|
430
483
|
"text-align--laptop",
|
|
431
484
|
"text-align--desktop",
|
|
432
|
-
"inverted"
|
|
485
|
+
"inverted",
|
|
486
|
+
"auto-spacing"
|
|
433
487
|
];
|
|
434
488
|
}
|
|
435
489
|
attributeChangedCallback(t, e, o) {
|
|
436
490
|
if (e !== o)
|
|
437
491
|
switch (t) {
|
|
438
492
|
case "variant":
|
|
439
|
-
this.updateAttribute(t, e, o,
|
|
493
|
+
this.updateAttribute(t, e, o, gt);
|
|
440
494
|
break;
|
|
441
495
|
case "color":
|
|
442
|
-
this.updateColor(e, o,
|
|
496
|
+
this.updateColor(e, o, Z);
|
|
443
497
|
break;
|
|
444
498
|
case "text-align":
|
|
445
499
|
case "text-align--mobile":
|
|
446
500
|
case "text-align--tablet":
|
|
447
501
|
case "text-align--laptop":
|
|
448
502
|
case "text-align--desktop":
|
|
449
|
-
this.updateTextAlign(t, e, o,
|
|
503
|
+
this.updateTextAlign(t, e, o, ct);
|
|
450
504
|
break;
|
|
451
505
|
default:
|
|
452
506
|
super.attributeChangedCallback(t, e, o);
|
|
@@ -458,23 +512,23 @@ class f extends y {
|
|
|
458
512
|
}
|
|
459
513
|
updateAttribute(t, e, o, r) {
|
|
460
514
|
this.checkName(r, o) ? this.toggleClass(e, o) : d(
|
|
461
|
-
|
|
515
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
462
516
|
);
|
|
463
517
|
}
|
|
464
518
|
updateColor(t, e, o) {
|
|
465
519
|
if (!this.checkName(o, e)) {
|
|
466
520
|
d(
|
|
467
|
-
|
|
521
|
+
`"${e}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
468
522
|
);
|
|
469
523
|
return;
|
|
470
524
|
}
|
|
471
|
-
const r = (
|
|
472
|
-
|
|
525
|
+
const r = (a) => {
|
|
526
|
+
a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
|
|
473
527
|
"--heading-color-default",
|
|
474
|
-
`var(--px-color-text-${
|
|
528
|
+
`var(--px-color-text-${a}-default)`
|
|
475
529
|
), this.$el.style.setProperty(
|
|
476
530
|
"--heading-color-inverted",
|
|
477
|
-
`var(--px-color-text-${
|
|
531
|
+
`var(--px-color-text-${a}-inverted)`
|
|
478
532
|
));
|
|
479
533
|
};
|
|
480
534
|
r(t), r(e);
|
|
@@ -482,23 +536,23 @@ class f extends y {
|
|
|
482
536
|
updateTextAlign(t, e, o, r) {
|
|
483
537
|
if (!this.checkName(r, o)) {
|
|
484
538
|
d(
|
|
485
|
-
|
|
539
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
486
540
|
);
|
|
487
541
|
return;
|
|
488
542
|
}
|
|
489
|
-
const
|
|
543
|
+
const a = (i, l) => {
|
|
490
544
|
l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
|
|
491
|
-
`--heading-text-align--${
|
|
545
|
+
`--heading-text-align--${i}`,
|
|
492
546
|
l
|
|
493
547
|
);
|
|
494
548
|
};
|
|
495
549
|
if (t === "text-align")
|
|
496
|
-
["mobile", "tablet", "laptop", "desktop"].forEach((
|
|
497
|
-
i
|
|
550
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
|
|
551
|
+
a(i, e), a(i, o);
|
|
498
552
|
});
|
|
499
553
|
else {
|
|
500
|
-
const
|
|
501
|
-
i
|
|
554
|
+
const i = t.split("--")[1];
|
|
555
|
+
a(i, e), a(i, o);
|
|
502
556
|
}
|
|
503
557
|
}
|
|
504
558
|
get variant() {
|
|
@@ -549,63 +603,69 @@ class f extends y {
|
|
|
549
603
|
set inverted(t) {
|
|
550
604
|
this.setAttribute("inverted", t);
|
|
551
605
|
}
|
|
606
|
+
get autoSpacing() {
|
|
607
|
+
return this.hasAttribute("auto-spacing");
|
|
608
|
+
}
|
|
609
|
+
set autoSpacing(t) {
|
|
610
|
+
t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
|
|
611
|
+
}
|
|
552
612
|
}
|
|
553
|
-
const
|
|
613
|
+
const J = class J extends A {
|
|
554
614
|
constructor() {
|
|
555
615
|
super("h1");
|
|
556
616
|
}
|
|
557
617
|
};
|
|
558
|
-
|
|
559
|
-
let
|
|
560
|
-
customElements.get("px-h1") || customElements.define("px-h1",
|
|
561
|
-
const
|
|
618
|
+
J.nativeName = "h1";
|
|
619
|
+
let H = J;
|
|
620
|
+
customElements.get("px-h1") || customElements.define("px-h1", H);
|
|
621
|
+
const Q = class Q extends A {
|
|
562
622
|
constructor() {
|
|
563
623
|
super("h2");
|
|
564
624
|
}
|
|
565
625
|
};
|
|
566
|
-
|
|
567
|
-
let
|
|
568
|
-
customElements.get("px-h2") || customElements.define("px-h2",
|
|
569
|
-
const
|
|
626
|
+
Q.nativeName = "h2";
|
|
627
|
+
let O = Q;
|
|
628
|
+
customElements.get("px-h2") || customElements.define("px-h2", O);
|
|
629
|
+
const V = class V extends A {
|
|
570
630
|
constructor() {
|
|
571
631
|
super("h3");
|
|
572
632
|
}
|
|
573
633
|
};
|
|
574
|
-
|
|
575
|
-
let
|
|
576
|
-
customElements.get("px-h3") || customElements.define("px-h3",
|
|
577
|
-
const
|
|
634
|
+
V.nativeName = "h3";
|
|
635
|
+
let q = V;
|
|
636
|
+
customElements.get("px-h3") || customElements.define("px-h3", q);
|
|
637
|
+
const tt = class tt extends A {
|
|
578
638
|
constructor() {
|
|
579
639
|
super("h4");
|
|
580
640
|
}
|
|
581
641
|
};
|
|
582
|
-
|
|
583
|
-
let
|
|
584
|
-
customElements.get("px-h4") || customElements.define("px-h4",
|
|
585
|
-
const
|
|
642
|
+
tt.nativeName = "h4";
|
|
643
|
+
let D = tt;
|
|
644
|
+
customElements.get("px-h4") || customElements.define("px-h4", D);
|
|
645
|
+
const et = class et extends A {
|
|
586
646
|
constructor() {
|
|
587
647
|
super("h5");
|
|
588
648
|
}
|
|
589
649
|
};
|
|
590
|
-
|
|
591
|
-
let
|
|
592
|
-
customElements.get("px-h5") || customElements.define("px-h5",
|
|
593
|
-
const
|
|
650
|
+
et.nativeName = "h5";
|
|
651
|
+
let N = et;
|
|
652
|
+
customElements.get("px-h5") || customElements.define("px-h5", N);
|
|
653
|
+
const ot = class ot extends A {
|
|
594
654
|
constructor() {
|
|
595
655
|
super("h6");
|
|
596
656
|
}
|
|
597
657
|
};
|
|
598
|
-
|
|
599
|
-
let
|
|
600
|
-
customElements.get("px-h6") || customElements.define("px-h6",
|
|
601
|
-
const
|
|
602
|
-
|
|
603
|
-
const
|
|
658
|
+
ot.nativeName = "h6";
|
|
659
|
+
let _ = ot;
|
|
660
|
+
customElements.get("px-h6") || customElements.define("px-h6", _);
|
|
661
|
+
const ie = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", Ct = new CSSStyleSheet();
|
|
662
|
+
Ct.replaceSync(ie);
|
|
663
|
+
const se = [
|
|
604
664
|
"",
|
|
605
665
|
"default",
|
|
606
666
|
"horizontal",
|
|
607
667
|
"vertical"
|
|
608
|
-
],
|
|
668
|
+
], ne = ["", "default", "none", "s", "m", "l"], de = [
|
|
609
669
|
"",
|
|
610
670
|
"main",
|
|
611
671
|
"brand",
|
|
@@ -617,11 +677,11 @@ const Jt = [
|
|
|
617
677
|
"purpose-unlimited",
|
|
618
678
|
"state-hover",
|
|
619
679
|
"state-active"
|
|
620
|
-
],
|
|
680
|
+
], B = class B extends $ {
|
|
621
681
|
constructor() {
|
|
622
682
|
var e;
|
|
623
|
-
super(
|
|
624
|
-
const t = document.createElement(
|
|
683
|
+
super(Ct);
|
|
684
|
+
const t = document.createElement(B.nativeName);
|
|
625
685
|
t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
|
|
626
686
|
}
|
|
627
687
|
static get observedAttributes() {
|
|
@@ -649,14 +709,14 @@ const Jt = [
|
|
|
649
709
|
t,
|
|
650
710
|
e,
|
|
651
711
|
o,
|
|
652
|
-
|
|
712
|
+
se
|
|
653
713
|
);
|
|
654
714
|
break;
|
|
655
715
|
case "size":
|
|
656
|
-
this.updateSize(t, e, o,
|
|
716
|
+
this.updateSize(t, e, o, ne);
|
|
657
717
|
break;
|
|
658
718
|
case "color":
|
|
659
|
-
this.updateColor(t, e, o,
|
|
719
|
+
this.updateColor(t, e, o, de);
|
|
660
720
|
break;
|
|
661
721
|
default:
|
|
662
722
|
super.attributeChangedCallback(t, e, o);
|
|
@@ -664,52 +724,52 @@ const Jt = [
|
|
|
664
724
|
}
|
|
665
725
|
}
|
|
666
726
|
updateSize(t, e, o, r) {
|
|
667
|
-
const
|
|
668
|
-
|
|
727
|
+
const a = (i) => {
|
|
728
|
+
i !== null && i !== "" && i !== "default" && this.$el.style.setProperty(
|
|
669
729
|
"--separator-size",
|
|
670
|
-
`var(--px-size-border-${
|
|
730
|
+
`var(--px-size-border-${i})`
|
|
671
731
|
);
|
|
672
732
|
};
|
|
673
|
-
this.checkName(r, o) ? (
|
|
674
|
-
|
|
733
|
+
this.checkName(r, o) ? (a(e), a(o)) : d(
|
|
734
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
675
735
|
);
|
|
676
736
|
}
|
|
677
737
|
updateColor(t, e, o, r) {
|
|
678
|
-
const
|
|
679
|
-
|
|
738
|
+
const a = (i) => {
|
|
739
|
+
i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
|
|
680
740
|
"--separator-color-default",
|
|
681
|
-
`var(--px-color-border-${
|
|
741
|
+
`var(--px-color-border-${i}-default)`
|
|
682
742
|
), this.$el.style.setProperty(
|
|
683
743
|
"--separator-color-inverted",
|
|
684
|
-
`var(--px-color-border-${
|
|
744
|
+
`var(--px-color-border-${i}-inverted)`
|
|
685
745
|
));
|
|
686
746
|
};
|
|
687
|
-
this.checkName(r, o) ? (
|
|
688
|
-
|
|
747
|
+
this.checkName(r, o) ? (a(e), a(o)) : d(
|
|
748
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
689
749
|
);
|
|
690
750
|
}
|
|
691
751
|
updateDirection(t, e, o, r) {
|
|
692
|
-
const
|
|
693
|
-
l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${
|
|
752
|
+
const a = (i, l) => {
|
|
753
|
+
l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${i}`);
|
|
694
754
|
};
|
|
695
755
|
if (!this.checkName(r, o))
|
|
696
756
|
d(
|
|
697
|
-
|
|
757
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
698
758
|
);
|
|
699
759
|
else if (t === "direction")
|
|
700
|
-
["mobile", "tablet", "laptop", "desktop"].forEach((
|
|
760
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((i) => {
|
|
701
761
|
Array.from(this.$el.classList).find(
|
|
702
|
-
(
|
|
703
|
-
) || i
|
|
762
|
+
(z) => z.startsWith("separator-direction-") && z.endsWith(`--${i}`)
|
|
763
|
+
) || a(i, o);
|
|
704
764
|
});
|
|
705
765
|
else {
|
|
706
|
-
const
|
|
707
|
-
(
|
|
766
|
+
const i = t.split("--")[1], l = Array.from(this.$el.classList).find(
|
|
767
|
+
(z) => z.startsWith("separator-direction-") && z.endsWith(`--${i}`)
|
|
708
768
|
);
|
|
709
769
|
l ? this.$el.classList.replace(
|
|
710
770
|
l,
|
|
711
|
-
`separator-direction-${o}--${
|
|
712
|
-
) : i
|
|
771
|
+
`separator-direction-${o}--${i}`
|
|
772
|
+
) : a(i, o);
|
|
713
773
|
}
|
|
714
774
|
}
|
|
715
775
|
get direction() {
|
|
@@ -761,65 +821,92 @@ const Jt = [
|
|
|
761
821
|
this.setAttribute("inverted", t);
|
|
762
822
|
}
|
|
763
823
|
};
|
|
764
|
-
|
|
765
|
-
let
|
|
766
|
-
customElements.get("px-separator") || customElements.define("px-separator",
|
|
767
|
-
const te = ':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)}}', ee = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', xt = new CSSStyleSheet();
|
|
768
|
-
|
|
769
|
-
const
|
|
770
|
-
|
|
824
|
+
B.nativeName = "hr";
|
|
825
|
+
let W = B;
|
|
826
|
+
customElements.get("px-separator") || customElements.define("px-separator", W);
|
|
827
|
+
const le = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', pe = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', Lt = new CSSStyleSheet();
|
|
828
|
+
Lt.replaceSync(pe);
|
|
829
|
+
const be = [
|
|
830
|
+
"top-patch",
|
|
831
|
+
"top-neighbor-patch",
|
|
832
|
+
"top-ribbon",
|
|
833
|
+
"top-neighbor-ribbon",
|
|
834
|
+
"top-patch-and-neighbor-ribbon"
|
|
835
|
+
], ce = [
|
|
836
|
+
"1",
|
|
837
|
+
"2",
|
|
838
|
+
"3",
|
|
839
|
+
"4",
|
|
840
|
+
"5",
|
|
841
|
+
"6",
|
|
842
|
+
"7",
|
|
843
|
+
"8",
|
|
844
|
+
"9",
|
|
845
|
+
"10",
|
|
846
|
+
"11",
|
|
847
|
+
"12"
|
|
848
|
+
], h = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", ge = [
|
|
849
|
+
g(
|
|
771
850
|
"padding",
|
|
772
|
-
|
|
773
|
-
c,
|
|
851
|
+
h,
|
|
774
852
|
u,
|
|
853
|
+
v,
|
|
775
854
|
"--container-padding"
|
|
776
855
|
),
|
|
777
|
-
|
|
856
|
+
g(
|
|
778
857
|
"padding-inline",
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
858
|
+
h,
|
|
859
|
+
u,
|
|
860
|
+
v
|
|
782
861
|
),
|
|
783
|
-
|
|
862
|
+
g(
|
|
784
863
|
"padding-block",
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
864
|
+
h,
|
|
865
|
+
u,
|
|
866
|
+
v
|
|
788
867
|
),
|
|
789
|
-
|
|
868
|
+
g(
|
|
790
869
|
"padding-top",
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
870
|
+
h,
|
|
871
|
+
u,
|
|
872
|
+
v
|
|
794
873
|
),
|
|
795
|
-
|
|
874
|
+
g(
|
|
796
875
|
"padding-right",
|
|
797
|
-
|
|
798
|
-
c,
|
|
876
|
+
h,
|
|
799
877
|
u,
|
|
878
|
+
v,
|
|
800
879
|
"--container-padding-right"
|
|
801
880
|
),
|
|
802
|
-
|
|
881
|
+
g(
|
|
803
882
|
"padding-bottom",
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
883
|
+
h,
|
|
884
|
+
u,
|
|
885
|
+
v
|
|
807
886
|
),
|
|
808
|
-
|
|
887
|
+
g(
|
|
809
888
|
"padding-left",
|
|
810
|
-
|
|
811
|
-
c,
|
|
889
|
+
h,
|
|
812
890
|
u,
|
|
891
|
+
v,
|
|
813
892
|
"--container-padding-left"
|
|
893
|
+
),
|
|
894
|
+
g(
|
|
895
|
+
"gap",
|
|
896
|
+
h,
|
|
897
|
+
Wt,
|
|
898
|
+
"px-spacing",
|
|
899
|
+
void 0,
|
|
900
|
+
"subgrid-gap"
|
|
814
901
|
)
|
|
815
|
-
],
|
|
902
|
+
], rt = class rt extends X {
|
|
816
903
|
constructor() {
|
|
817
|
-
super(
|
|
904
|
+
super(Lt, ...ge), this.template = () => `<div class="container">
|
|
818
905
|
<slot></slot>
|
|
819
906
|
<slot name="anchor-left"></slot>
|
|
820
907
|
<slot name="anchor-right"></slot>
|
|
821
908
|
<slot name="anchor-full"></slot>
|
|
822
|
-
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
909
|
+
</div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
|
|
823
910
|
}
|
|
824
911
|
static get observedAttributes() {
|
|
825
912
|
return [
|
|
@@ -851,11 +938,13 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
851
938
|
"background-position",
|
|
852
939
|
"box-shadow",
|
|
853
940
|
"anchor-offset",
|
|
854
|
-
"
|
|
941
|
+
"anchor-spacing",
|
|
942
|
+
"inverted",
|
|
943
|
+
"subgrid-rows"
|
|
855
944
|
];
|
|
856
945
|
}
|
|
857
946
|
connectedCallback() {
|
|
858
|
-
|
|
947
|
+
this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
|
|
859
948
|
this.$slotAnchor && this.addAnchorClass();
|
|
860
949
|
}), this.contentObserver.observe(this, {
|
|
861
950
|
childList: !0,
|
|
@@ -869,14 +958,14 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
869
958
|
}), this._bgObserver.observe(this.$el);
|
|
870
959
|
}
|
|
871
960
|
disconnectedCallback() {
|
|
872
|
-
var t;
|
|
873
|
-
(t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
|
|
961
|
+
var t, e;
|
|
962
|
+
(t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
|
|
874
963
|
}
|
|
875
964
|
attributeChangedCallback(t, e, o) {
|
|
876
965
|
if (e !== o)
|
|
877
966
|
switch (t) {
|
|
878
967
|
case "border":
|
|
879
|
-
this.updateAttribute(t, e, o,
|
|
968
|
+
this.updateAttribute(t, e, o, Kt);
|
|
880
969
|
break;
|
|
881
970
|
case "border-color":
|
|
882
971
|
this.updateBorderColor(t, o);
|
|
@@ -885,14 +974,14 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
885
974
|
case "border-side--mobile":
|
|
886
975
|
case "border-side--tablet":
|
|
887
976
|
case "border-side--laptop":
|
|
888
|
-
this.updateAttribute(t, e, o,
|
|
977
|
+
this.updateAttribute(t, e, o, Zt);
|
|
889
978
|
break;
|
|
890
979
|
case "border-radius":
|
|
891
980
|
this.updateAttribute(
|
|
892
981
|
t,
|
|
893
982
|
e,
|
|
894
983
|
o,
|
|
895
|
-
|
|
984
|
+
Xt
|
|
896
985
|
);
|
|
897
986
|
break;
|
|
898
987
|
case "no-border-radius":
|
|
@@ -903,7 +992,7 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
903
992
|
t,
|
|
904
993
|
e,
|
|
905
994
|
o,
|
|
906
|
-
|
|
995
|
+
Yt
|
|
907
996
|
);
|
|
908
997
|
break;
|
|
909
998
|
case "background-color":
|
|
@@ -923,7 +1012,7 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
923
1012
|
t,
|
|
924
1013
|
e,
|
|
925
1014
|
o,
|
|
926
|
-
|
|
1015
|
+
Gt
|
|
927
1016
|
);
|
|
928
1017
|
break;
|
|
929
1018
|
case "background-image":
|
|
@@ -936,10 +1025,21 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
936
1025
|
o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
|
|
937
1026
|
break;
|
|
938
1027
|
case "box-shadow":
|
|
939
|
-
this.updateAttribute(t, e, o,
|
|
1028
|
+
this.updateAttribute(t, e, o, Ft);
|
|
940
1029
|
break;
|
|
941
1030
|
case "anchor-offset":
|
|
942
|
-
this.updateAnchorOffset(e, o,
|
|
1031
|
+
this.updateAnchorOffset(e, o, u);
|
|
1032
|
+
break;
|
|
1033
|
+
case "anchor-spacing":
|
|
1034
|
+
this.updateAnchorSpacing(e, o, be);
|
|
1035
|
+
break;
|
|
1036
|
+
case "subgrid-rows":
|
|
1037
|
+
this.updateSubgridRows(
|
|
1038
|
+
t,
|
|
1039
|
+
e,
|
|
1040
|
+
o,
|
|
1041
|
+
ce
|
|
1042
|
+
);
|
|
943
1043
|
break;
|
|
944
1044
|
default:
|
|
945
1045
|
super.attributeChangedCallback(t, e, o);
|
|
@@ -961,7 +1061,7 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
961
1061
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
962
1062
|
}
|
|
963
1063
|
updateGradient(t, e) {
|
|
964
|
-
if (this.checkName(
|
|
1064
|
+
if (this.checkName(st, e)) {
|
|
965
1065
|
const o = this.splitAttrNameFromBreakpoint(t);
|
|
966
1066
|
t = o.attrName;
|
|
967
1067
|
const r = o.breakpoint;
|
|
@@ -971,61 +1071,61 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
971
1071
|
);
|
|
972
1072
|
} else
|
|
973
1073
|
d(
|
|
974
|
-
|
|
1074
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${st.join('", "')}".`
|
|
975
1075
|
);
|
|
976
1076
|
}
|
|
977
1077
|
updateBackgroundColor(t, e) {
|
|
978
1078
|
const o = e.startsWith("surface-");
|
|
979
|
-
if (this.checkName(
|
|
980
|
-
const r = this.splitAttrNameFromBreakpoint(t),
|
|
1079
|
+
if (this.checkName(P, e)) {
|
|
1080
|
+
const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
|
|
981
1081
|
this.$el.style.setProperty(
|
|
982
|
-
`--${r.attrName}${
|
|
1082
|
+
`--${r.attrName}${a}`,
|
|
983
1083
|
`var(--px-color-background-${e}${o ? "" : "-default"})`
|
|
984
1084
|
), this.$el.style.setProperty(
|
|
985
|
-
`--${r.attrName}-inverted${
|
|
1085
|
+
`--${r.attrName}-inverted${a}`,
|
|
986
1086
|
`var(--px-color-background-${e}${o ? "" : "-inverted"})`
|
|
987
1087
|
);
|
|
988
1088
|
} else
|
|
989
1089
|
d(
|
|
990
|
-
|
|
1090
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join('", "')}".`
|
|
991
1091
|
);
|
|
992
1092
|
}
|
|
993
1093
|
updateBorderColor(t, e) {
|
|
994
|
-
this.checkName(
|
|
1094
|
+
this.checkName(nt, e) ? (this.$el.style.setProperty(
|
|
995
1095
|
`--${t}`,
|
|
996
1096
|
`var(--px-color-border-${e}-default)`
|
|
997
1097
|
), this.$el.style.setProperty(
|
|
998
1098
|
`--${t}-inverted`,
|
|
999
1099
|
`var(--px-color-border-${e}-inverted)`
|
|
1000
1100
|
)) : d(
|
|
1001
|
-
|
|
1101
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${nt.join('", "')}".`
|
|
1002
1102
|
);
|
|
1003
1103
|
}
|
|
1004
1104
|
updateNoBorderRadius(t, e, o, r) {
|
|
1005
1105
|
if (!this.checkName(r, o))
|
|
1006
1106
|
d(
|
|
1007
|
-
|
|
1107
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
1008
1108
|
);
|
|
1009
1109
|
else {
|
|
1010
|
-
const
|
|
1110
|
+
const a = this.splitAttrNameFromBreakpoint(t), i = a.breakpoint;
|
|
1011
1111
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1012
|
-
`${
|
|
1112
|
+
`${a.attrName}-${e}${i}`
|
|
1013
1113
|
), o !== null && o !== "" && this.$el.classList.toggle(
|
|
1014
|
-
`${
|
|
1114
|
+
`${a.attrName}-${o}${i}`
|
|
1015
1115
|
);
|
|
1016
1116
|
}
|
|
1017
1117
|
}
|
|
1018
1118
|
updateAttribute(t, e, o, r) {
|
|
1019
1119
|
if (!this.checkName(r, o))
|
|
1020
1120
|
d(
|
|
1021
|
-
|
|
1121
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
1022
1122
|
);
|
|
1023
1123
|
else {
|
|
1024
|
-
const
|
|
1124
|
+
const a = this.splitAttrNameFromBreakpoint(t), i = a.breakpoint;
|
|
1025
1125
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1026
|
-
`${
|
|
1126
|
+
`${a.attrName}-${e}${i}`
|
|
1027
1127
|
), o !== null && o !== "" && this.$el.classList.toggle(
|
|
1028
|
-
`${
|
|
1128
|
+
`${a.attrName}-${o}${i}`
|
|
1029
1129
|
);
|
|
1030
1130
|
}
|
|
1031
1131
|
}
|
|
@@ -1040,22 +1140,22 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
1040
1140
|
return { attrName: t, breakpoint: e };
|
|
1041
1141
|
}
|
|
1042
1142
|
updateAnchorOffset(t, e, o) {
|
|
1043
|
-
if (!
|
|
1143
|
+
if (!w(o, e)) {
|
|
1044
1144
|
d(
|
|
1045
|
-
|
|
1145
|
+
`"${e}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
1046
1146
|
);
|
|
1047
1147
|
return;
|
|
1048
1148
|
}
|
|
1049
|
-
const r = (
|
|
1050
|
-
|
|
1149
|
+
const r = (a) => {
|
|
1150
|
+
a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
|
|
1051
1151
|
"--container-anchor-offset--mobile",
|
|
1052
|
-
`var(--px-padding-${
|
|
1152
|
+
`var(--px-padding-${a}-mobile)`
|
|
1053
1153
|
), this.$el.style.setProperty(
|
|
1054
1154
|
"--container-anchor-offset--tablet",
|
|
1055
|
-
`var(--px-padding-${
|
|
1155
|
+
`var(--px-padding-${a}-tablet)`
|
|
1056
1156
|
), this.$el.style.setProperty(
|
|
1057
1157
|
"--container-anchor-offset--laptop",
|
|
1058
|
-
`var(--px-padding-${
|
|
1158
|
+
`var(--px-padding-${a}-laptop)`
|
|
1059
1159
|
));
|
|
1060
1160
|
};
|
|
1061
1161
|
r(t), r(e);
|
|
@@ -1063,6 +1163,39 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
1063
1163
|
addAnchorClass() {
|
|
1064
1164
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
1065
1165
|
}
|
|
1166
|
+
updateAnchorSpacing(t, e, o) {
|
|
1167
|
+
if (!w(o, e)) {
|
|
1168
|
+
d(
|
|
1169
|
+
`"${e}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
1170
|
+
);
|
|
1171
|
+
return;
|
|
1172
|
+
}
|
|
1173
|
+
const r = (a) => {
|
|
1174
|
+
a !== null && a !== "" && a !== "default" && (this.style.setProperty(
|
|
1175
|
+
"--container-anchor-spacing--mobile",
|
|
1176
|
+
`var(--px-spacing-${a}-mobile)`
|
|
1177
|
+
), this.style.setProperty(
|
|
1178
|
+
"--container-anchor-spacing--tablet",
|
|
1179
|
+
`var(--px-spacing-${a}-tablet)`
|
|
1180
|
+
), this.style.setProperty(
|
|
1181
|
+
"--container-anchor-spacing--laptop",
|
|
1182
|
+
`var(--px-spacing-${a}-laptop)`
|
|
1183
|
+
), this.style.setProperty(
|
|
1184
|
+
"--container-anchor-spacing--desktop",
|
|
1185
|
+
`var(--px-spacing-${a}-desktop)`
|
|
1186
|
+
));
|
|
1187
|
+
};
|
|
1188
|
+
r(t), r(e);
|
|
1189
|
+
}
|
|
1190
|
+
updateSubgridRows(t, e, o, r) {
|
|
1191
|
+
w(r, o) ? this.style.setProperty(`--${t}`, o) : d(
|
|
1192
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
1193
|
+
);
|
|
1194
|
+
}
|
|
1195
|
+
get $el() {
|
|
1196
|
+
var t;
|
|
1197
|
+
return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
|
|
1198
|
+
}
|
|
1066
1199
|
get $slotAnchor() {
|
|
1067
1200
|
return this.querySelector('[slot^="anchor"]');
|
|
1068
1201
|
}
|
|
@@ -1396,23 +1529,59 @@ const g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, u
|
|
|
1396
1529
|
set anchorOffset(t) {
|
|
1397
1530
|
this.setAttribute("anchor-offset", t);
|
|
1398
1531
|
}
|
|
1532
|
+
get anchorSpacing() {
|
|
1533
|
+
return this.getAttribute("anchor-spacing");
|
|
1534
|
+
}
|
|
1535
|
+
set anchorSpacing(t) {
|
|
1536
|
+
this.setAttribute("anchor-spacing", t);
|
|
1537
|
+
}
|
|
1399
1538
|
get inverted() {
|
|
1400
|
-
return this.
|
|
1539
|
+
return this.hasAttribute("inverted");
|
|
1401
1540
|
}
|
|
1402
1541
|
set inverted(t) {
|
|
1403
|
-
this.setAttribute("inverted",
|
|
1542
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
1543
|
+
}
|
|
1544
|
+
get subgridRows() {
|
|
1545
|
+
return this.getAttribute("subgrid-rows");
|
|
1546
|
+
}
|
|
1547
|
+
set subgridRows(t) {
|
|
1548
|
+
this.setAttribute("subgrid-rows", t);
|
|
1549
|
+
}
|
|
1550
|
+
get subgridGap() {
|
|
1551
|
+
return this.getAttribute("subgrid-gap");
|
|
1552
|
+
}
|
|
1553
|
+
set subgridGap(t) {
|
|
1554
|
+
this.setAttribute("subgrid-gap", t);
|
|
1555
|
+
}
|
|
1556
|
+
get subgridGapMobile() {
|
|
1557
|
+
return this.getAttribute("subgrid-gap--mobile");
|
|
1558
|
+
}
|
|
1559
|
+
set subgridGapMobile(t) {
|
|
1560
|
+
this.setAttribute("subgrid-gap--mobile", t);
|
|
1561
|
+
}
|
|
1562
|
+
get subgridGapTablet() {
|
|
1563
|
+
return this.getAttribute("subgrid-gap--tablet");
|
|
1564
|
+
}
|
|
1565
|
+
set subgridGapTablet(t) {
|
|
1566
|
+
this.setAttribute("subgrid-gap--tablet", t);
|
|
1567
|
+
}
|
|
1568
|
+
get subgridGapLaptop() {
|
|
1569
|
+
return this.getAttribute("subgrid-gap--laptop");
|
|
1570
|
+
}
|
|
1571
|
+
set subgridGapLaptop(t) {
|
|
1572
|
+
this.setAttribute("subgrid-gap--laptop", t);
|
|
1404
1573
|
}
|
|
1405
1574
|
};
|
|
1406
|
-
|
|
1407
|
-
let
|
|
1408
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
1409
|
-
const
|
|
1410
|
-
|
|
1411
|
-
class
|
|
1575
|
+
rt.nativeName = "div";
|
|
1576
|
+
let F = rt;
|
|
1577
|
+
customElements.get("px-container") || customElements.define("px-container", F);
|
|
1578
|
+
const Tt = new CSSStyleSheet();
|
|
1579
|
+
Tt.replaceSync(le);
|
|
1580
|
+
class he extends X {
|
|
1412
1581
|
constructor() {
|
|
1413
|
-
super(), this.template = () => `
|
|
1414
|
-
<px-container border-radius="none" padding-inline="none"
|
|
1415
|
-
<div class="content-wrapper
|
|
1582
|
+
super(Tt), this.template = () => `
|
|
1583
|
+
<px-container border-radius="none" padding-inline="none">
|
|
1584
|
+
<div class="content-wrapper">
|
|
1416
1585
|
<px-vstack gap="heading-to-content">
|
|
1417
1586
|
<slot name="heading"></slot>
|
|
1418
1587
|
<px-vstack gap="none">
|
|
@@ -1424,14 +1593,18 @@ class re extends HTMLElement {
|
|
|
1424
1593
|
<div class="content-wrapper">
|
|
1425
1594
|
<slot name="overlap"></slot>
|
|
1426
1595
|
</div>
|
|
1427
|
-
`, this.
|
|
1596
|
+
`, this.shadowRoot.innerHTML = this.template();
|
|
1428
1597
|
}
|
|
1429
1598
|
connectedCallback() {
|
|
1430
|
-
|
|
1431
|
-
!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"),
|
|
1599
|
+
var t, e;
|
|
1600
|
+
this.$container.setAttribute("background-color", this.backgroundColor), !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (e = this.$slotOverlap) == null || e.addEventListener(
|
|
1601
|
+
"slotchange",
|
|
1602
|
+
this.toggleOverlapSpacing
|
|
1603
|
+
);
|
|
1432
1604
|
}
|
|
1433
1605
|
static get observedAttributes() {
|
|
1434
1606
|
return [
|
|
1607
|
+
...super.observedAttributes,
|
|
1435
1608
|
"background-color",
|
|
1436
1609
|
"background-gradient",
|
|
1437
1610
|
"background-image",
|
|
@@ -1459,14 +1632,11 @@ class re extends HTMLElement {
|
|
|
1459
1632
|
"border-side--laptop"
|
|
1460
1633
|
];
|
|
1461
1634
|
}
|
|
1462
|
-
get $container() {
|
|
1463
|
-
return this.shadowRoot.querySelector("px-container");
|
|
1464
|
-
}
|
|
1465
1635
|
attributeChangedCallback(t, e, o) {
|
|
1466
1636
|
if (e !== o)
|
|
1467
1637
|
switch (t) {
|
|
1468
1638
|
case "background-color":
|
|
1469
|
-
this.$container.backgroundColor =
|
|
1639
|
+
this.$container.backgroundColor = P.indexOf(o) > 0 ? o : "none";
|
|
1470
1640
|
break;
|
|
1471
1641
|
case "background-gradient":
|
|
1472
1642
|
this.$container.gradient = this.gradient;
|
|
@@ -1540,11 +1710,61 @@ class re extends HTMLElement {
|
|
|
1540
1710
|
case "border-side--laptop":
|
|
1541
1711
|
this.$container.borderSideLaptop = o;
|
|
1542
1712
|
break;
|
|
1713
|
+
default:
|
|
1714
|
+
super.attributeChangedCallback(t, e, o);
|
|
1715
|
+
break;
|
|
1543
1716
|
}
|
|
1544
1717
|
}
|
|
1718
|
+
disconnectedCallback() {
|
|
1719
|
+
var t, e;
|
|
1720
|
+
(t = this.$slotHeading) == null || t.removeEventListener(
|
|
1721
|
+
"slotchange",
|
|
1722
|
+
this.setHeadingSpacing
|
|
1723
|
+
), (e = this.$slotOverlap) == null || e.removeEventListener(
|
|
1724
|
+
"slotchange",
|
|
1725
|
+
this.toggleOverlapSpacing
|
|
1726
|
+
);
|
|
1727
|
+
}
|
|
1728
|
+
toggleOverlapSpacing() {
|
|
1729
|
+
const t = this.$slotOverlap, e = this.$mainContentWrapper;
|
|
1730
|
+
if (!t || !e) return;
|
|
1731
|
+
const r = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
|
|
1732
|
+
e.classList.toggle("overlapped", r);
|
|
1733
|
+
}
|
|
1734
|
+
isNotEmptyNode(t) {
|
|
1735
|
+
return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
|
|
1736
|
+
}
|
|
1737
|
+
setHeadingSpacing() {
|
|
1738
|
+
var o;
|
|
1739
|
+
const t = this.$slotHeading, e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("px-vstack");
|
|
1740
|
+
t && e && (t.assignedElements().length > 0 ? e.setAttribute("gap", "heading-to-content") : e.setAttribute("gap", "none"));
|
|
1741
|
+
}
|
|
1742
|
+
get $container() {
|
|
1743
|
+
var t;
|
|
1744
|
+
return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
|
|
1745
|
+
}
|
|
1746
|
+
get $mainContentWrapper() {
|
|
1747
|
+
var t;
|
|
1748
|
+
return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
|
|
1749
|
+
}
|
|
1545
1750
|
get $slotOverlap() {
|
|
1751
|
+
var t;
|
|
1752
|
+
return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
|
|
1753
|
+
'slot[name="overlap"]'
|
|
1754
|
+
);
|
|
1755
|
+
}
|
|
1756
|
+
get $slottedOverlap() {
|
|
1546
1757
|
return this.querySelector('[slot="overlap"]');
|
|
1547
1758
|
}
|
|
1759
|
+
get $slotHeading() {
|
|
1760
|
+
var t;
|
|
1761
|
+
return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
|
|
1762
|
+
'slot[name="heading"]'
|
|
1763
|
+
);
|
|
1764
|
+
}
|
|
1765
|
+
get $slottedHeading() {
|
|
1766
|
+
return this.querySelector('[slot="heading"]');
|
|
1767
|
+
}
|
|
1548
1768
|
get backgroundColor() {
|
|
1549
1769
|
return this.getAttribute("background-color") || "none";
|
|
1550
1770
|
}
|
|
@@ -1696,14 +1916,14 @@ class re extends HTMLElement {
|
|
|
1696
1916
|
this.setAttribute("border-side--laptop", t);
|
|
1697
1917
|
}
|
|
1698
1918
|
}
|
|
1699
|
-
customElements.get("px-section") || customElements.define("px-section",
|
|
1700
|
-
const
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
const
|
|
1919
|
+
customElements.get("px-section") || customElements.define("px-section", he);
|
|
1920
|
+
const ue = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", Et = new CSSStyleSheet(), Bt = new CSSStyleSheet(), Mt = new CSSStyleSheet();
|
|
1921
|
+
Et.replaceSync(ue);
|
|
1922
|
+
Bt.replaceSync(K);
|
|
1923
|
+
Mt.replaceSync(wt);
|
|
1924
|
+
const at = class at extends $ {
|
|
1705
1925
|
constructor() {
|
|
1706
|
-
super(
|
|
1926
|
+
super(Bt, Mt, Et), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
|
|
1707
1927
|
}
|
|
1708
1928
|
static get observedAttributes() {
|
|
1709
1929
|
return [
|
|
@@ -1724,22 +1944,22 @@ const U = class U extends y {
|
|
|
1724
1944
|
if (e !== o)
|
|
1725
1945
|
switch (t) {
|
|
1726
1946
|
case "variant":
|
|
1727
|
-
this.updateVariant(t, e, o,
|
|
1947
|
+
this.updateVariant(t, e, o, gt);
|
|
1728
1948
|
break;
|
|
1729
1949
|
case "color":
|
|
1730
|
-
this.updateTypography(t, e, o,
|
|
1950
|
+
this.updateTypography(t, e, o, Z);
|
|
1731
1951
|
break;
|
|
1732
1952
|
case "font-size":
|
|
1733
|
-
this.updateTypography(t, e, o,
|
|
1953
|
+
this.updateTypography(t, e, o, ut);
|
|
1734
1954
|
break;
|
|
1735
1955
|
case "font-weight":
|
|
1736
|
-
this.updateTypography(t, e, o,
|
|
1956
|
+
this.updateTypography(t, e, o, ht);
|
|
1737
1957
|
break;
|
|
1738
1958
|
case "text-align":
|
|
1739
1959
|
case "text-align--mobile":
|
|
1740
1960
|
case "text-align--tablet":
|
|
1741
1961
|
case "text-align--laptop":
|
|
1742
|
-
this.updateTypography(t, e, o,
|
|
1962
|
+
this.updateTypography(t, e, o, ct);
|
|
1743
1963
|
break;
|
|
1744
1964
|
case "disabled":
|
|
1745
1965
|
this.color = "state-disabled";
|
|
@@ -1754,20 +1974,20 @@ const U = class U extends y {
|
|
|
1754
1974
|
}
|
|
1755
1975
|
updateVariant(t, e, o, r) {
|
|
1756
1976
|
this.checkName(r, o) ? this.toggleClass(e, o) : d(
|
|
1757
|
-
|
|
1977
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
1758
1978
|
);
|
|
1759
1979
|
}
|
|
1760
1980
|
updateTypography(t, e, o, r) {
|
|
1761
1981
|
if (!this.checkName(r, o))
|
|
1762
1982
|
d(
|
|
1763
|
-
|
|
1983
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
1764
1984
|
);
|
|
1765
1985
|
else {
|
|
1766
|
-
const
|
|
1986
|
+
const a = this.splitAttrNameFromBreakpoint(t), i = a.breakpoint;
|
|
1767
1987
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
1768
|
-
`${
|
|
1988
|
+
`${a.attrName}-${e}${i}`
|
|
1769
1989
|
), o !== null && o !== "" && this.$el.classList.toggle(
|
|
1770
|
-
`${
|
|
1990
|
+
`${a.attrName}-${o}${i}`
|
|
1771
1991
|
);
|
|
1772
1992
|
}
|
|
1773
1993
|
}
|
|
@@ -1842,13 +2062,13 @@ const U = class U extends y {
|
|
|
1842
2062
|
this.setAttribute("disabled", t);
|
|
1843
2063
|
}
|
|
1844
2064
|
};
|
|
1845
|
-
|
|
1846
|
-
let
|
|
1847
|
-
customElements.get("px-p") || customElements.define("px-p",
|
|
1848
|
-
class
|
|
2065
|
+
at.nativeName = "p";
|
|
2066
|
+
let G = at;
|
|
2067
|
+
customElements.get("px-p") || customElements.define("px-p", G);
|
|
2068
|
+
class xe extends HTMLElement {
|
|
1849
2069
|
constructor() {
|
|
1850
2070
|
super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
|
|
1851
|
-
<button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
|
|
2071
|
+
<button aria-hidden="true" style="width: 0; height: 0; padding: 0; border: 0; background-color: #00000000;"></button>
|
|
1852
2072
|
`;
|
|
1853
2073
|
}
|
|
1854
2074
|
connectedCallback() {
|
|
@@ -1859,26 +2079,27 @@ class ae extends HTMLElement {
|
|
|
1859
2079
|
});
|
|
1860
2080
|
}
|
|
1861
2081
|
}
|
|
1862
|
-
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer",
|
|
1863
|
-
const
|
|
1864
|
-
|
|
1865
|
-
var
|
|
1866
|
-
class
|
|
2082
|
+
customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", xe);
|
|
2083
|
+
const ve = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;padding:0;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:calc(100% - var(--mdd-dialog-offset-top));background-color:var(--px-color-background-surface-default)}px-mdd-closer{display:contents}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.8125rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 64rem){dialog{max-height:100%;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:not(#mobile-close-button){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:var(--px-padding-l-laptop);right:0}@media screen and (min-width: 90.0625rem){px-container>px-vstack>px-button-icon{top:var(--px-padding-l-desktop)}}#sections-container{overflow:auto}@media only screen and (min-width: 64.0625rem){#sections-container{padding-bottom:0;max-width:calc(100% - var(--px-spacing-default-laptop) - var(--px-size-icon-xs) - var(--px-padding-2xs-laptop) - var(--px-padding-2xs-laptop))}}@media screen and (min-width: 90.0625rem){#sections-container{max-width:calc(100% - var(--px-spacing-default-desktop) - var(--px-size-icon-xs) - var(--px-padding-2xs-desktop) - var(--px-padding-2xs-desktop))}}#mobile-header{display:none}@media screen and (max-width: 64rem){#mobile-header{display:block}}@media screen and (max-width: 47.938rem){#mobile-header{padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}@media screen and (min-width: 48rem) and (max-width: 64rem){#mobile-header{padding-bottom:var(--px-spacing-page-layout-between-sections-tablet)}}px-p{display:none}@media screen and (max-width: 64rem){px-p{display:block}}@media screen and (max-width: 47.938rem){px-p{padding-bottom:var(--px-spacing-page-layout-between-sections-mobile)}}@media screen and (min-width: 48rem) and (max-width: 64rem){px-p{padding-bottom:var(--px-spacing-page-layout-between-sections-tablet)}}#footer{display:none}@media screen and (max-width: 64rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;background-color:var(--px-color-background-container-light-default);border-top:var(--px-size-border-m) solid var(--px-color-border-main-default)}}@media screen and (max-width: 47.938rem){#footer{padding:var(--px-padding-m-mobile) var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem) and (max-width: 64rem){#footer{padding:var(--px-padding-m-tablet) var(--px-padding-s-tablet)}}", Rt = new CSSStyleSheet();
|
|
2084
|
+
Rt.replaceSync(ve);
|
|
2085
|
+
var y, p, Y, It, S, jt;
|
|
2086
|
+
class me extends HTMLElement {
|
|
1867
2087
|
constructor() {
|
|
1868
2088
|
var e;
|
|
1869
2089
|
super();
|
|
1870
|
-
|
|
1871
|
-
|
|
2090
|
+
c(this, p);
|
|
2091
|
+
c(this, y);
|
|
1872
2092
|
this.template = `<dialog>
|
|
1873
2093
|
<px-section>
|
|
1874
2094
|
<px-container
|
|
1875
2095
|
padding-inline="none"
|
|
1876
2096
|
padding-block="l"
|
|
1877
2097
|
padding-block--mobile="m"
|
|
2098
|
+
padding-block--tablet="m"
|
|
1878
2099
|
background-color="none"
|
|
1879
2100
|
>
|
|
1880
2101
|
<px-vstack>
|
|
1881
|
-
<px-hstack id="mobile-header" gap="
|
|
2102
|
+
<px-hstack id="mobile-header" gap="default" align-items="center">
|
|
1882
2103
|
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
1883
2104
|
<px-button id="back-button" variant="tertiary">
|
|
1884
2105
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
@@ -1888,14 +2109,14 @@ class ne extends HTMLElement {
|
|
|
1888
2109
|
<px-button-icon
|
|
1889
2110
|
size="small"
|
|
1890
2111
|
variant="secondary"
|
|
2112
|
+
id="mobile-close-button"
|
|
1891
2113
|
>
|
|
1892
2114
|
<px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
|
|
1893
2115
|
</px-button-icon>
|
|
1894
2116
|
</px-hstack>
|
|
1895
2117
|
<px-p
|
|
1896
|
-
|
|
2118
|
+
variant="title-2xl"
|
|
1897
2119
|
color="neutral"
|
|
1898
|
-
font-weight="title"
|
|
1899
2120
|
>
|
|
1900
2121
|
<slot name="title"></slot>
|
|
1901
2122
|
</px-p>
|
|
@@ -1907,8 +2128,15 @@ class ne extends HTMLElement {
|
|
|
1907
2128
|
</px-button-icon>
|
|
1908
2129
|
<px-stack
|
|
1909
2130
|
direction--mobile="column"
|
|
2131
|
+
direction--tablet="column"
|
|
1910
2132
|
direction="row"
|
|
1911
|
-
gap="
|
|
2133
|
+
gap="default"
|
|
2134
|
+
gap--mobile="page-layout-between-sections"
|
|
2135
|
+
gap--tablet="page-layout-between-sections"
|
|
2136
|
+
wrap="wrap"
|
|
2137
|
+
wrap--mobile="nowrap"
|
|
2138
|
+
wrap--tablet="nowrap"
|
|
2139
|
+
grow="1"
|
|
1912
2140
|
id="sections-container"
|
|
1913
2141
|
>
|
|
1914
2142
|
<slot></slot>
|
|
@@ -1925,14 +2153,14 @@ class ne extends HTMLElement {
|
|
|
1925
2153
|
<slot name="mdd-footer"></slot>
|
|
1926
2154
|
</px-hstack>
|
|
1927
2155
|
</px-section>
|
|
1928
|
-
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
2156
|
+
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Rt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "menu");
|
|
1929
2157
|
}
|
|
1930
2158
|
static get observedAttributes() {
|
|
1931
2159
|
return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
|
|
1932
2160
|
}
|
|
1933
2161
|
connectedCallback() {
|
|
1934
2162
|
var e, o;
|
|
1935
|
-
if (this.querySelectorAll("px-mdd-section").length === 0)
|
|
2163
|
+
if (this.role = "menu", this.querySelectorAll("px-mdd-section").length === 0)
|
|
1936
2164
|
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
1937
2165
|
this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (r) => {
|
|
1938
2166
|
if (r.target.closest("px-button-icon"))
|
|
@@ -1940,11 +2168,11 @@ class ne extends HTMLElement {
|
|
|
1940
2168
|
new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
|
|
1941
2169
|
);
|
|
1942
2170
|
else if (r.target.closest("#back-button")) {
|
|
1943
|
-
const
|
|
2171
|
+
const a = new CustomEvent("back-to-mobile-menu", {
|
|
1944
2172
|
bubbles: !0,
|
|
1945
2173
|
composed: !0
|
|
1946
2174
|
});
|
|
1947
|
-
this.dispatchEvent(
|
|
2175
|
+
this.dispatchEvent(a);
|
|
1948
2176
|
}
|
|
1949
2177
|
}), this.$dialog.addEventListener("cancel", () => {
|
|
1950
2178
|
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
|
|
@@ -1958,30 +2186,30 @@ class ne extends HTMLElement {
|
|
|
1958
2186
|
}
|
|
1959
2187
|
})
|
|
1960
2188
|
);
|
|
1961
|
-
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p,
|
|
2189
|
+
}), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, Y).style.display = "none"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, It).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
|
|
1962
2190
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
1963
|
-
)) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p,
|
|
1964
|
-
this.$slotMddFooter && (n(this, p,
|
|
1965
|
-
})), n(this,
|
|
2191
|
+
)) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
|
|
2192
|
+
this.$slotMddFooter && (n(this, p, S).style.display = "block");
|
|
2193
|
+
})), n(this, y).observe(this, { childList: !0, subtree: !0 });
|
|
1966
2194
|
}
|
|
1967
2195
|
disconnectedCallback() {
|
|
1968
|
-
n(this,
|
|
2196
|
+
n(this, y).disconnect();
|
|
1969
2197
|
}
|
|
1970
2198
|
attributeChangedCallback(e, o, r) {
|
|
1971
2199
|
if (e === "name" && !r)
|
|
1972
2200
|
throw new Error("Media Drop Down must have a name attribute");
|
|
1973
2201
|
if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
|
|
1974
|
-
const
|
|
1975
|
-
this.internals.ariaHidden =
|
|
1976
|
-
const l = n(this, p,
|
|
2202
|
+
const a = r === "true" || r === "" ? "true" : "false";
|
|
2203
|
+
this.internals.ariaHidden = a, this.ariaHidden = a;
|
|
2204
|
+
const l = n(this, p, S).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
1977
2205
|
this.style.setProperty(
|
|
1978
2206
|
"--mdd-section-container-padding-bottom",
|
|
1979
2207
|
`${l}em`
|
|
1980
2208
|
);
|
|
1981
2209
|
}
|
|
1982
|
-
e === "close-button-aria-label" && n(this, p,
|
|
1983
|
-
r ?
|
|
1984
|
-
}), e === "back-to-menu-label" && (n(this, p,
|
|
2210
|
+
e === "close-button-aria-label" && n(this, p, jt).forEach((a) => {
|
|
2211
|
+
r ? a.setAttribute("aria-label", r || "Close") : a.removeAttribute("aria-label");
|
|
2212
|
+
}), e === "back-to-menu-label" && (n(this, p, Y).innerHTML = `
|
|
1985
2213
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
1986
2214
|
${r || "Back to menu"}
|
|
1987
2215
|
`);
|
|
@@ -2024,19 +2252,19 @@ class ne extends HTMLElement {
|
|
|
2024
2252
|
this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
|
|
2025
2253
|
}
|
|
2026
2254
|
}
|
|
2027
|
-
|
|
2255
|
+
y = new WeakMap(), p = new WeakSet(), Y = function() {
|
|
2028
2256
|
return this.shadowRoot.querySelector("#back-button");
|
|
2029
|
-
},
|
|
2257
|
+
}, It = function() {
|
|
2030
2258
|
return this.shadowRoot.querySelector("px-p");
|
|
2031
|
-
},
|
|
2259
|
+
}, S = function() {
|
|
2032
2260
|
return this.shadowRoot.querySelector("#footer");
|
|
2033
|
-
},
|
|
2261
|
+
}, jt = function() {
|
|
2034
2262
|
return this.shadowRoot.querySelectorAll("px-button-icon");
|
|
2035
2263
|
};
|
|
2036
|
-
customElements.get("px-mdd") || customElements.define("px-mdd",
|
|
2037
|
-
const
|
|
2038
|
-
|
|
2039
|
-
class
|
|
2264
|
+
customElements.get("px-mdd") || customElements.define("px-mdd", me);
|
|
2265
|
+
const fe = ':host{flex-basis:30%}@media screen and (max-width: 64rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:first-of-type){padding-top:0}::slotted(px-mdd-section-item:last-of-type){padding-bottom:0;border-bottom:none}::slotted([slot="footer"]){background-color:var(--px-color-background-surface-light);border-radius:var(--px-radius-main)}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}@media screen and (max-width: 47.938rem){#section-wrapper{padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile)}::slotted(px-mdd-section-item){padding-block:var(--px-spacing-xs-mobile)}::slotted([slot="footer"]){padding:var(--px-padding-s-mobile) var(--px-padding-m-mobile)}}@media screen and (min-width: 48rem) and (max-width: 64rem){#section-wrapper{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}::slotted(px-mdd-section-item){padding-block:var(--px-spacing-xs-tablet)}::slotted([slot="footer"]){padding:var(--px-padding-s-tablet) var(--px-padding-m-tablet)}}', Pt = new CSSStyleSheet();
|
|
2266
|
+
Pt.replaceSync(fe);
|
|
2267
|
+
class ke extends HTMLElement {
|
|
2040
2268
|
constructor() {
|
|
2041
2269
|
super(), this.template = `<px-vstack gap="default">
|
|
2042
2270
|
<px-p font-size="heading-l" font-weight="title">
|
|
@@ -2047,10 +2275,10 @@ class le extends HTMLElement {
|
|
|
2047
2275
|
<slot></slot>
|
|
2048
2276
|
</px-vstack>
|
|
2049
2277
|
</nav>
|
|
2050
|
-
<px-vstack gap="default" gap--mobile="
|
|
2278
|
+
<px-vstack gap="default" gap--mobile="s">
|
|
2051
2279
|
<slot name="footer"></slot>
|
|
2052
2280
|
</px-vstack>
|
|
2053
|
-
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
|
|
2281
|
+
</px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Pt];
|
|
2054
2282
|
}
|
|
2055
2283
|
connectedCallback() {
|
|
2056
2284
|
this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
|
|
@@ -2089,23 +2317,24 @@ class le extends HTMLElement {
|
|
|
2089
2317
|
t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
|
|
2090
2318
|
}
|
|
2091
2319
|
}
|
|
2092
|
-
customElements.get("px-mdd-section") || customElements.define("px-mdd-section",
|
|
2093
|
-
const
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
const
|
|
2320
|
+
customElements.get("px-mdd-section") || customElements.define("px-mdd-section", ke);
|
|
2321
|
+
const Ht = new CSSStyleSheet(), Ot = new CSSStyleSheet(), qt = new CSSStyleSheet();
|
|
2322
|
+
Ht.replaceSync(vt);
|
|
2323
|
+
Ot.replaceSync(xt);
|
|
2324
|
+
qt.replaceSync(K);
|
|
2325
|
+
const ye = [...ut, "link-m", "link-s"], lt = [
|
|
2098
2326
|
"link",
|
|
2099
2327
|
"no-style",
|
|
2100
2328
|
"skip-link",
|
|
2101
2329
|
"btn-default",
|
|
2102
2330
|
"btn-secondary",
|
|
2103
2331
|
"btn-tertiary",
|
|
2104
|
-
"icon-link"
|
|
2105
|
-
|
|
2332
|
+
"icon-link",
|
|
2333
|
+
"wrapper"
|
|
2334
|
+
], Ae = ["", "default", "alternative"], M = class M extends $ {
|
|
2106
2335
|
constructor() {
|
|
2107
|
-
super(
|
|
2108
|
-
const t = document.createElement(
|
|
2336
|
+
super(Ht, Ot, qt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
2337
|
+
const t = document.createElement(M.nativeName);
|
|
2109
2338
|
t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
2110
2339
|
}
|
|
2111
2340
|
static get observedAttributes() {
|
|
@@ -2131,7 +2360,9 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2131
2360
|
];
|
|
2132
2361
|
}
|
|
2133
2362
|
connectedCallback() {
|
|
2134
|
-
this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after),
|
|
2363
|
+
this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), pt(this, this.$el, !1);
|
|
2364
|
+
}
|
|
2365
|
+
disconnectedCallback() {
|
|
2135
2366
|
}
|
|
2136
2367
|
attributeChangedCallback(t, e, o) {
|
|
2137
2368
|
if (e !== o)
|
|
@@ -2147,7 +2378,7 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2147
2378
|
case "shape--tablet":
|
|
2148
2379
|
case "shape--laptop":
|
|
2149
2380
|
case "shape--desktop":
|
|
2150
|
-
this.updateShape(t, o,
|
|
2381
|
+
this.updateShape(t, o, Ae);
|
|
2151
2382
|
break;
|
|
2152
2383
|
case "extended":
|
|
2153
2384
|
case "extended--mobile":
|
|
@@ -2161,14 +2392,14 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2161
2392
|
t,
|
|
2162
2393
|
e,
|
|
2163
2394
|
o,
|
|
2164
|
-
|
|
2395
|
+
ye
|
|
2165
2396
|
);
|
|
2166
2397
|
break;
|
|
2167
2398
|
case "color":
|
|
2168
|
-
this.updateTypography(t, e, o,
|
|
2399
|
+
this.updateTypography(t, e, o, Z);
|
|
2169
2400
|
break;
|
|
2170
2401
|
case "font-weight":
|
|
2171
|
-
this.updateTypography(t, e, o,
|
|
2402
|
+
this.updateTypography(t, e, o, ht);
|
|
2172
2403
|
break;
|
|
2173
2404
|
case "title":
|
|
2174
2405
|
o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
|
|
@@ -2193,14 +2424,14 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2193
2424
|
this.$el.classList.toggle(t);
|
|
2194
2425
|
}
|
|
2195
2426
|
updateVariant(t, e) {
|
|
2196
|
-
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(
|
|
2197
|
-
|
|
2198
|
-
)
|
|
2427
|
+
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(lt, e) || d(
|
|
2428
|
+
`"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${lt.join('", "')}".`
|
|
2429
|
+
);
|
|
2199
2430
|
}
|
|
2200
2431
|
updateShape(t, e, o) {
|
|
2201
|
-
if (!
|
|
2432
|
+
if (!w(o, e)) {
|
|
2202
2433
|
d(
|
|
2203
|
-
|
|
2434
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
2204
2435
|
);
|
|
2205
2436
|
return;
|
|
2206
2437
|
}
|
|
@@ -2208,7 +2439,7 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2208
2439
|
}
|
|
2209
2440
|
updateTypography(t, e, o, r) {
|
|
2210
2441
|
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) || d(
|
|
2211
|
-
|
|
2442
|
+
`"${o}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
|
|
2212
2443
|
);
|
|
2213
2444
|
}
|
|
2214
2445
|
updateExtended(t, e) {
|
|
@@ -2328,23 +2559,57 @@ const pe = [...it, "link-m", "link-s"], be = [
|
|
|
2328
2559
|
t ? this.setAttribute("title", t) : this.removeAttribute("title");
|
|
2329
2560
|
}
|
|
2330
2561
|
};
|
|
2331
|
-
|
|
2332
|
-
let
|
|
2333
|
-
customElements.get("px-a") || customElements.define("px-a",
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2562
|
+
M.nativeName = "a";
|
|
2563
|
+
let L = M;
|
|
2564
|
+
customElements.get("px-a") || customElements.define("px-a", L);
|
|
2565
|
+
var f, R, Dt;
|
|
2566
|
+
class ze extends L {
|
|
2567
|
+
constructor() {
|
|
2568
|
+
super();
|
|
2569
|
+
c(this, R);
|
|
2570
|
+
c(this, f);
|
|
2571
|
+
this.$el.classList.add("wrapper"), k(this, f, new bt(
|
|
2572
|
+
this,
|
|
2573
|
+
this.$el,
|
|
2574
|
+
() => j(this, R, Dt).call(this)
|
|
2575
|
+
));
|
|
2576
|
+
}
|
|
2577
|
+
connectedCallback() {
|
|
2578
|
+
super.connectedCallback(), n(this, f).connect();
|
|
2579
|
+
}
|
|
2580
|
+
disconnectedCallback() {
|
|
2581
|
+
super.disconnectedCallback(), n(this, f).disconnect();
|
|
2582
|
+
}
|
|
2583
|
+
attributeChangedCallback(e, o, r) {
|
|
2584
|
+
if (o !== r)
|
|
2585
|
+
switch (e) {
|
|
2586
|
+
case "disabled":
|
|
2587
|
+
super.attributeChangedCallback(e, o, r), r !== null && n(this, f).clearInteractiveState();
|
|
2588
|
+
break;
|
|
2589
|
+
default:
|
|
2590
|
+
super.attributeChangedCallback(e, o, r);
|
|
2591
|
+
break;
|
|
2592
|
+
}
|
|
2593
|
+
}
|
|
2594
|
+
}
|
|
2595
|
+
f = new WeakMap(), R = new WeakSet(), Dt = function() {
|
|
2596
|
+
return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
|
|
2597
|
+
};
|
|
2598
|
+
customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
|
|
2599
|
+
const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit}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%;text-align:left;font-weight:var(--px-font-weight-title)}a,button{display:block;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.938rem){a,button{padding:var(--px-spacing-xs-mobile) 0}}@media screen and (min-width: 48rem) and (max-width: 64rem){a,button{padding:var(--px-spacing-xs-tablet) 0}}@media screen and (min-width: 48rem){a,button{font-size:var(--px-text-size-label-m-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{display:inline-block}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a,button{font-size:var(--px-text-size-label-m-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a,button{font-size:var(--px-text-size-label-m-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Nt = new CSSStyleSheet();
|
|
2600
|
+
Nt.replaceSync(we);
|
|
2601
|
+
class $e extends HTMLElement {
|
|
2337
2602
|
constructor() {
|
|
2338
2603
|
var t;
|
|
2339
2604
|
super(), this.template = `
|
|
2340
|
-
<px-hstack align-items="center">
|
|
2605
|
+
<px-hstack align-items="center" gap="default">
|
|
2341
2606
|
<span class="mdd-section-item-action-container">
|
|
2342
2607
|
<slot></slot>
|
|
2343
2608
|
<slot name="after"></slot>
|
|
2344
2609
|
</span>
|
|
2345
2610
|
<px-spacer></px-spacer>
|
|
2346
|
-
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
2347
|
-
</px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
2611
|
+
<px-icon name="chevron_right" from="lavender" size="m"></px-icon>
|
|
2612
|
+
</px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Nt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
|
|
2348
2613
|
}
|
|
2349
2614
|
static get observedAttributes() {
|
|
2350
2615
|
return ["href", "for"];
|
|
@@ -2357,7 +2622,7 @@ class ge extends HTMLElement {
|
|
|
2357
2622
|
t === "href" && this.$link ? this.$link.href = e : t === "href" && !this.$link && e ? (this.shadowRoot.innerHTML = `<a href="${e}">${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : t === "for" && !this.$button && e && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
|
|
2358
2623
|
}
|
|
2359
2624
|
connectedCallback() {
|
|
2360
|
-
this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
|
|
2625
|
+
this.role = "listitem", this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
|
|
2361
2626
|
}
|
|
2362
2627
|
handleClick() {
|
|
2363
2628
|
const t = new CustomEvent("section-item-click", {
|
|
@@ -2393,9 +2658,9 @@ class ge extends HTMLElement {
|
|
|
2393
2658
|
);
|
|
2394
2659
|
}
|
|
2395
2660
|
}
|
|
2396
|
-
customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item",
|
|
2661
|
+
customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", $e);
|
|
2397
2662
|
export {
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2663
|
+
ke as MddSection,
|
|
2664
|
+
$e as MddSectionItem,
|
|
2665
|
+
me as MegaDropDown
|
|
2401
2666
|
};
|