@proximus/lavender 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lavender.cjs.js +1 -1
- package/dist/lavender.es.js +1118 -151
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -979,9 +979,9 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
979
979
|
this.setCSSProperties();
|
|
980
980
|
}
|
|
981
981
|
}
|
|
982
|
-
const styles$
|
|
983
|
-
const styleSheet$
|
|
984
|
-
styleSheet$
|
|
982
|
+
const styles$G = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
|
|
983
|
+
const styleSheet$x = new CSSStyleSheet();
|
|
984
|
+
styleSheet$x.replaceSync(styles$G);
|
|
985
985
|
const directionValues = [
|
|
986
986
|
"",
|
|
987
987
|
"default",
|
|
@@ -1013,7 +1013,7 @@ const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
|
1013
1013
|
const overflowValues = ["", "visible", "hidden", "scroll", "auto"];
|
|
1014
1014
|
class Stack extends WithExtraAttributes {
|
|
1015
1015
|
constructor() {
|
|
1016
|
-
super(styleSheet$
|
|
1016
|
+
super(styleSheet$x);
|
|
1017
1017
|
this.overflowXAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
1018
1018
|
this,
|
|
1019
1019
|
"overflow-x",
|
|
@@ -1434,12 +1434,12 @@ class Spacer extends HTMLElement {
|
|
|
1434
1434
|
if (!customElements.get("px-spacer")) {
|
|
1435
1435
|
customElements.define("px-spacer", Spacer);
|
|
1436
1436
|
}
|
|
1437
|
-
const styles$
|
|
1438
|
-
const styleSheet$
|
|
1439
|
-
styleSheet$
|
|
1437
|
+
const styles$F = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}";
|
|
1438
|
+
const styleSheet$w = new CSSStyleSheet();
|
|
1439
|
+
styleSheet$w.replaceSync(styles$F);
|
|
1440
1440
|
class Page extends WithExtraAttributes {
|
|
1441
1441
|
constructor() {
|
|
1442
|
-
super(styleSheet$
|
|
1442
|
+
super(styleSheet$w);
|
|
1443
1443
|
this.template = (stickyContainer) => `
|
|
1444
1444
|
<px-container border-radius="none" padding="none">
|
|
1445
1445
|
<px-vstack>
|
|
@@ -1682,7 +1682,7 @@ const contentAlignmentValues = [
|
|
|
1682
1682
|
];
|
|
1683
1683
|
const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
|
|
1684
1684
|
const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
|
|
1685
|
-
const gapPrefix = "px-spacing";
|
|
1685
|
+
const gapPrefix$1 = "px-spacing";
|
|
1686
1686
|
const _Grid = class _Grid extends PxElement {
|
|
1687
1687
|
constructor() {
|
|
1688
1688
|
super(
|
|
@@ -1691,7 +1691,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1691
1691
|
"gap",
|
|
1692
1692
|
attributeBreakpointCSSSelector$3,
|
|
1693
1693
|
gapValues,
|
|
1694
|
-
gapPrefix,
|
|
1694
|
+
gapPrefix$1,
|
|
1695
1695
|
"--grid-gap"
|
|
1696
1696
|
)
|
|
1697
1697
|
);
|
|
@@ -2007,16 +2007,16 @@ if (!customElements.get("px-grid")) {
|
|
|
2007
2007
|
}
|
|
2008
2008
|
const buttonCss = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-state-active-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-state-hover-bordered-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-state-active-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-container-default-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-state-hover-bordered-inverted );color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-state-active-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 (min-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)}}`;
|
|
2009
2009
|
const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus-visible{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media 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)}}';
|
|
2010
|
-
const styles$
|
|
2011
|
-
const styles$
|
|
2010
|
+
const styles$E = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;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);text-align:center;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)}}";
|
|
2011
|
+
const styles$D = ":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)}}";
|
|
2012
2012
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
2013
2013
|
const linkStyles$2 = new CSSStyleSheet();
|
|
2014
2014
|
const patchStyles = new CSSStyleSheet();
|
|
2015
2015
|
const tagStyles = new CSSStyleSheet();
|
|
2016
2016
|
buttonStyles$1.replaceSync(buttonCss);
|
|
2017
2017
|
linkStyles$2.replaceSync(linkCss);
|
|
2018
|
-
patchStyles.replaceSync(styles$
|
|
2019
|
-
tagStyles.replaceSync(styles$
|
|
2018
|
+
patchStyles.replaceSync(styles$E);
|
|
2019
|
+
tagStyles.replaceSync(styles$D);
|
|
2020
2020
|
const variantValues = [
|
|
2021
2021
|
"",
|
|
2022
2022
|
"default",
|
|
@@ -2367,9 +2367,9 @@ const iconColorValues = [
|
|
|
2367
2367
|
const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
|
|
2368
2368
|
(value) => value.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
2369
2369
|
);
|
|
2370
|
-
const styles$
|
|
2371
|
-
const styleSheet$
|
|
2372
|
-
styleSheet$
|
|
2370
|
+
const styles$C = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-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-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-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)}";
|
|
2371
|
+
const styleSheet$v = new CSSStyleSheet();
|
|
2372
|
+
styleSheet$v.replaceSync(styles$C);
|
|
2373
2373
|
const observedAttributes = [
|
|
2374
2374
|
"name",
|
|
2375
2375
|
"size",
|
|
@@ -2382,7 +2382,7 @@ const observedAttributes = [
|
|
|
2382
2382
|
class Icon extends WithExtraAttributes {
|
|
2383
2383
|
constructor(...styleSheets) {
|
|
2384
2384
|
var _a;
|
|
2385
|
-
super(...styleSheets, styleSheet$
|
|
2385
|
+
super(...styleSheets, styleSheet$v);
|
|
2386
2386
|
__privateAdd(this, _src);
|
|
2387
2387
|
__privateAdd(this, _internals);
|
|
2388
2388
|
__privateAdd(this, _template, () => `<svg aria-hidden="true">
|
|
@@ -3430,9 +3430,9 @@ let H6 = _H6;
|
|
|
3430
3430
|
if (!customElements.get("px-h6")) {
|
|
3431
3431
|
customElements.define("px-h6", H6);
|
|
3432
3432
|
}
|
|
3433
|
-
const styles$
|
|
3434
|
-
const styleSheet$
|
|
3435
|
-
styleSheet$
|
|
3433
|
+
const styles$B = ':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)}}';
|
|
3434
|
+
const styleSheet$u = new CSSStyleSheet();
|
|
3435
|
+
styleSheet$u.replaceSync(styles$B);
|
|
3436
3436
|
class Section extends HTMLElement {
|
|
3437
3437
|
constructor() {
|
|
3438
3438
|
super();
|
|
@@ -3453,7 +3453,7 @@ class Section extends HTMLElement {
|
|
|
3453
3453
|
`;
|
|
3454
3454
|
this.attachShadow({ mode: "open" });
|
|
3455
3455
|
this.shadowRoot.innerHTML = this.template();
|
|
3456
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3456
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$u];
|
|
3457
3457
|
}
|
|
3458
3458
|
connectedCallback() {
|
|
3459
3459
|
const headingSlot = this.querySelector('[slot="heading"]');
|
|
@@ -3843,8 +3843,8 @@ if (!customElements.get("px-accordion")) {
|
|
|
3843
3843
|
customElements.define("px-accordion", Accordion);
|
|
3844
3844
|
}
|
|
3845
3845
|
const imgCss = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2) grayscale(100%)}@media only screen and (max-width: 767px){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){img{width:var(--img-width--tablet, auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){img{width:var(--img-width--laptop, auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}";
|
|
3846
|
-
const styleSheet$
|
|
3847
|
-
styleSheet$
|
|
3846
|
+
const styleSheet$t = new CSSStyleSheet();
|
|
3847
|
+
styleSheet$t.replaceSync(imgCss);
|
|
3848
3848
|
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3849
3849
|
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3850
3850
|
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
@@ -3852,7 +3852,7 @@ const heightPrefix = "px-image";
|
|
|
3852
3852
|
class AbstractImage extends PxElement {
|
|
3853
3853
|
constructor() {
|
|
3854
3854
|
super(
|
|
3855
|
-
styleSheet$
|
|
3855
|
+
styleSheet$t,
|
|
3856
3856
|
cssTokenBreakpoints(
|
|
3857
3857
|
"height",
|
|
3858
3858
|
heightAttributeBreakpointCSSSelector,
|
|
@@ -4292,8 +4292,8 @@ let Picture = _Picture;
|
|
|
4292
4292
|
if (!customElements.get("px-picture")) {
|
|
4293
4293
|
customElements.define("px-picture", Picture);
|
|
4294
4294
|
}
|
|
4295
|
-
const styleSheet$
|
|
4296
|
-
styleSheet$
|
|
4295
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
4296
|
+
styleSheet$s.replaceSync(styles$E);
|
|
4297
4297
|
const patchVariantValues = [
|
|
4298
4298
|
"",
|
|
4299
4299
|
"default",
|
|
@@ -4315,7 +4315,7 @@ class Patch extends HTMLElement {
|
|
|
4315
4315
|
super();
|
|
4316
4316
|
this.attachShadow({ mode: "open" });
|
|
4317
4317
|
this.shadowRoot.innerHTML = this.template();
|
|
4318
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4318
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$s];
|
|
4319
4319
|
}
|
|
4320
4320
|
static get observedAttributes() {
|
|
4321
4321
|
return ["variant", "shape", "inverted"];
|
|
@@ -4384,8 +4384,8 @@ if (!customElements.get("px-patch")) {
|
|
|
4384
4384
|
customElements.define("px-patch", Patch);
|
|
4385
4385
|
}
|
|
4386
4386
|
const css$1 = ".price{--price-s: var(--px-price-size-unit-s-mobile);--price-m: var(--px-price-size-unit-m-mobile);--price-l: var(--px-price-size-unit-l-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default);font-size:var(--price-s);line-height:var(--px-line-height-ratio-l)}@media only screen and (min-width: 48em){.price{--price-s: var(--px-price-size-unit-s-tablet);--price-m: var(--px-price-size-unit-m-tablet);--price-l: var(--px-price-size-unit-l-tablet)}}@media only screen and (min-width: 64.0625em){.price{--price-s: var(--px-price-size-unit-s-laptop);--price-m: var(--px-price-size-unit-m-laptop);--price-l: var(--px-price-size-unit-l-laptop)}}.promo,.free{color:var(--px-color-text-purpose-promo-default)}.neutral{color:var(--px-color-text-neutral-default)}.exceeding{color:var(--px-color-text-purpose-error-default)}.disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .price{color:var(--px-color-text-brand-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-text-state-disabled-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}.euro{font-size:var(--px-price-ratio-l)}.decimals{font-size:var(--px-price-ratio-s)}.m{font-size:var(--price-m)}.l{font-size:var(--price-l)}";
|
|
4387
|
-
const styles$
|
|
4388
|
-
styles$
|
|
4387
|
+
const styles$A = new CSSStyleSheet();
|
|
4388
|
+
styles$A.replaceSync(css$1);
|
|
4389
4389
|
const priceVariantValues = [
|
|
4390
4390
|
"default",
|
|
4391
4391
|
"promo",
|
|
@@ -4397,7 +4397,7 @@ const priceVariantValues = [
|
|
|
4397
4397
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
4398
4398
|
const _Price = class _Price extends PxElement {
|
|
4399
4399
|
constructor() {
|
|
4400
|
-
super(styles$
|
|
4400
|
+
super(styles$A);
|
|
4401
4401
|
this.template = () => `<span class="price"><slot></slot></span>`;
|
|
4402
4402
|
this.shadowRoot.innerHTML = this.template();
|
|
4403
4403
|
}
|
|
@@ -4484,11 +4484,11 @@ if (!customElements.get("px-price")) {
|
|
|
4484
4484
|
customElements.define("px-price", Price);
|
|
4485
4485
|
}
|
|
4486
4486
|
const css = ":host{box-sizing:border-box}.ribbon{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);white-space:nowrap;text-align:left;color:var(--px-color-text-brand-inverted);background-color:var(--px-color-background-surface-dark);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}:host([inverted]) .ribbon{color:var(--px-color-text-neutral-default);background-color:var(--px-color-background-surface-light)}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}";
|
|
4487
|
-
const styles$
|
|
4488
|
-
styles$
|
|
4487
|
+
const styles$z = new CSSStyleSheet();
|
|
4488
|
+
styles$z.replaceSync(css);
|
|
4489
4489
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
4490
4490
|
constructor() {
|
|
4491
|
-
super(styles$
|
|
4491
|
+
super(styles$z);
|
|
4492
4492
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
4493
4493
|
this.shadowRoot.innerHTML = this.template();
|
|
4494
4494
|
}
|
|
@@ -4511,9 +4511,9 @@ let Ribbon = _Ribbon;
|
|
|
4511
4511
|
if (!customElements.get("px-ribbon")) {
|
|
4512
4512
|
customElements.define("px-ribbon", Ribbon);
|
|
4513
4513
|
}
|
|
4514
|
-
const styles$
|
|
4515
|
-
const styleSheet$
|
|
4516
|
-
styleSheet$
|
|
4514
|
+
const styles$y = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
|
|
4515
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
4516
|
+
styleSheet$r.replaceSync(styles$y);
|
|
4517
4517
|
const separatorDirectionValues = [
|
|
4518
4518
|
"",
|
|
4519
4519
|
"default",
|
|
@@ -4537,7 +4537,7 @@ const separatorColorValues = [
|
|
|
4537
4537
|
const _Separator = class _Separator extends PxElement {
|
|
4538
4538
|
constructor() {
|
|
4539
4539
|
var _a;
|
|
4540
|
-
super(styleSheet$
|
|
4540
|
+
super(styleSheet$r);
|
|
4541
4541
|
const $root = document.createElement(this.nativeName);
|
|
4542
4542
|
$root.classList.add("separator");
|
|
4543
4543
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
@@ -4856,8 +4856,8 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4856
4856
|
if (!customElements.get("px-button-icon")) {
|
|
4857
4857
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4858
4858
|
}
|
|
4859
|
-
const styleSheet$
|
|
4860
|
-
styleSheet$
|
|
4859
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
4860
|
+
styleSheet$q.replaceSync(styles$D);
|
|
4861
4861
|
const _Tag = class _Tag extends PxElement {
|
|
4862
4862
|
template() {
|
|
4863
4863
|
return `
|
|
@@ -4869,9 +4869,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
4869
4869
|
`;
|
|
4870
4870
|
}
|
|
4871
4871
|
constructor() {
|
|
4872
|
-
super(styleSheet$
|
|
4872
|
+
super(styleSheet$q);
|
|
4873
4873
|
this.shadowRoot.innerHTML = this.template();
|
|
4874
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4874
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$q];
|
|
4875
4875
|
}
|
|
4876
4876
|
connectedCallback() {
|
|
4877
4877
|
super.connectedCallback();
|
|
@@ -4929,9 +4929,9 @@ let Tag = _Tag;
|
|
|
4929
4929
|
if (!customElements.get("px-tag")) {
|
|
4930
4930
|
customElements.define("px-tag", Tag);
|
|
4931
4931
|
}
|
|
4932
|
-
const styles$
|
|
4933
|
-
const styleSheet$
|
|
4934
|
-
styleSheet$
|
|
4932
|
+
const styles$x = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}#tablist{margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1);padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
|
|
4933
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
4934
|
+
styleSheet$p.replaceSync(styles$x);
|
|
4935
4935
|
class Tabs extends HTMLElement {
|
|
4936
4936
|
constructor() {
|
|
4937
4937
|
var _a;
|
|
@@ -4961,7 +4961,7 @@ class Tabs extends HTMLElement {
|
|
|
4961
4961
|
this._label = this.getAttribute("label");
|
|
4962
4962
|
}
|
|
4963
4963
|
this.shadowRoot.innerHTML = this.template();
|
|
4964
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4964
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
4965
4965
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4966
4966
|
if (this.internals) {
|
|
4967
4967
|
this.internals.role = "tablist";
|
|
@@ -5136,9 +5136,9 @@ class Tabs extends HTMLElement {
|
|
|
5136
5136
|
return this.getAttribute("aria-label-previous");
|
|
5137
5137
|
}
|
|
5138
5138
|
}
|
|
5139
|
-
const styles$
|
|
5140
|
-
const styleSheet$
|
|
5141
|
-
styleSheet$
|
|
5139
|
+
const styles$w = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}";
|
|
5140
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
5141
|
+
styleSheet$o.replaceSync(styles$w);
|
|
5142
5142
|
class Tab extends HTMLElement {
|
|
5143
5143
|
constructor() {
|
|
5144
5144
|
var _a;
|
|
@@ -5150,7 +5150,7 @@ class Tab extends HTMLElement {
|
|
|
5150
5150
|
`;
|
|
5151
5151
|
this.attachShadow({ mode: "open" });
|
|
5152
5152
|
this.shadowRoot.innerHTML = this.template();
|
|
5153
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5153
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
|
|
5154
5154
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
5155
5155
|
if (this.internals) {
|
|
5156
5156
|
this.internals.role = "tab";
|
|
@@ -5237,7 +5237,7 @@ class TabPanel extends HTMLElement {
|
|
|
5237
5237
|
`;
|
|
5238
5238
|
this.attachShadow({ mode: "open" });
|
|
5239
5239
|
this.shadowRoot.innerHTML = this.template();
|
|
5240
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5240
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
5241
5241
|
}
|
|
5242
5242
|
static get observedAttributes() {
|
|
5243
5243
|
return ["name"];
|
|
@@ -5316,9 +5316,9 @@ class PxTabPanel extends TabPanel {
|
|
|
5316
5316
|
if (!customElements.get("px-tab-panel")) {
|
|
5317
5317
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
5318
5318
|
}
|
|
5319
|
-
const styles$
|
|
5320
|
-
const styleSheet$
|
|
5321
|
-
styleSheet$
|
|
5319
|
+
const styles$v = ".timeline{list-style:none;margin:0;padding:0}";
|
|
5320
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
5321
|
+
styleSheet$n.replaceSync(styles$v);
|
|
5322
5322
|
class Timeline extends HTMLElement {
|
|
5323
5323
|
template() {
|
|
5324
5324
|
return `
|
|
@@ -5331,7 +5331,7 @@ class Timeline extends HTMLElement {
|
|
|
5331
5331
|
super();
|
|
5332
5332
|
this.attachShadow({ mode: "open" });
|
|
5333
5333
|
this.shadowRoot.innerHTML = this.template();
|
|
5334
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5334
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n];
|
|
5335
5335
|
}
|
|
5336
5336
|
static get observedAttributes() {
|
|
5337
5337
|
return ["inverted"];
|
|
@@ -5375,9 +5375,9 @@ class Timeline extends HTMLElement {
|
|
|
5375
5375
|
if (!customElements.get("px-timeline")) {
|
|
5376
5376
|
customElements.define("px-timeline", Timeline);
|
|
5377
5377
|
}
|
|
5378
|
-
const styles$
|
|
5379
|
-
const styleSheet$
|
|
5380
|
-
styleSheet$
|
|
5378
|
+
const styles$u = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media only screen and (min-width: 90.0625em){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}';
|
|
5379
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
5380
|
+
styleSheet$m.replaceSync(styles$u);
|
|
5381
5381
|
let item = "1";
|
|
5382
5382
|
class TimelineItem extends HTMLElement {
|
|
5383
5383
|
template() {
|
|
@@ -5397,7 +5397,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5397
5397
|
super();
|
|
5398
5398
|
this.attachShadow({ mode: "open" });
|
|
5399
5399
|
this.shadowRoot.innerHTML = this.template();
|
|
5400
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5400
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$m];
|
|
5401
5401
|
}
|
|
5402
5402
|
static get observedAttributes() {
|
|
5403
5403
|
return ["inverted", "lastchild", "item"];
|
|
@@ -5617,10 +5617,10 @@ let Paragraph = _Paragraph;
|
|
|
5617
5617
|
if (!customElements.get("px-p")) {
|
|
5618
5618
|
customElements.define("px-p", Paragraph);
|
|
5619
5619
|
}
|
|
5620
|
-
const styles$
|
|
5621
|
-
const styleSheet$
|
|
5622
|
-
styleSheet$
|
|
5623
|
-
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
5620
|
+
const styles$t = "#container{width:1080px;display:block;border:0;border-radius:var(--px-radius-main);padding:var(--px-padding-m-desktop);background-color:var(--px-color-background-surface-default)}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:90vh;overflow:auto}@media screen and (max-width: 1081px){#container{width:inherit;padding:var(--px-padding-m-mobile)}::slotted(px-button-icon){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}";
|
|
5621
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
5622
|
+
styleSheet$l.replaceSync(styles$t);
|
|
5623
|
+
const CLOSE_EVENT$1 = "px.lavender.modal.close";
|
|
5624
5624
|
class Modal extends HTMLElement {
|
|
5625
5625
|
constructor() {
|
|
5626
5626
|
super();
|
|
@@ -5659,7 +5659,7 @@ class Modal extends HTMLElement {
|
|
|
5659
5659
|
</dialog>`;
|
|
5660
5660
|
this.attachShadow({ mode: "open" });
|
|
5661
5661
|
this.shadowRoot.innerHTML = this.template;
|
|
5662
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5662
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
5663
5663
|
}
|
|
5664
5664
|
connectedCallback() {
|
|
5665
5665
|
if (this.hasAttribute("open")) {
|
|
@@ -5742,7 +5742,7 @@ class Modal extends HTMLElement {
|
|
|
5742
5742
|
close() {
|
|
5743
5743
|
this.$dialog.close();
|
|
5744
5744
|
this.dispatchEvent(
|
|
5745
|
-
new CustomEvent(CLOSE_EVENT, {
|
|
5745
|
+
new CustomEvent(CLOSE_EVENT$1, {
|
|
5746
5746
|
bubbles: true,
|
|
5747
5747
|
composed: true
|
|
5748
5748
|
})
|
|
@@ -6210,10 +6210,10 @@ class Typography extends HTMLElement {
|
|
|
6210
6210
|
if (!customElements.get("px-typography")) {
|
|
6211
6211
|
customElements.define("px-typography", Typography);
|
|
6212
6212
|
}
|
|
6213
|
-
const styles$
|
|
6214
|
-
const styleSheet$
|
|
6213
|
+
const styles$s = ".spinner{display:inline-block;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);border-top:3px solid var(--px-color-text-brand-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-text-brand-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}";
|
|
6214
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
6215
6215
|
const typographyStyles = new CSSStyleSheet();
|
|
6216
|
-
styleSheet$
|
|
6216
|
+
styleSheet$k.replaceSync(styles$s);
|
|
6217
6217
|
typographyStyles.replaceSync(typographyCss$1);
|
|
6218
6218
|
class Spinner extends HTMLElement {
|
|
6219
6219
|
template() {
|
|
@@ -6229,7 +6229,7 @@ class Spinner extends HTMLElement {
|
|
|
6229
6229
|
this.attachShadow({ mode: "open" });
|
|
6230
6230
|
this.shadowRoot.innerHTML = this.template();
|
|
6231
6231
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
6232
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
6232
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$k, typographyStyles];
|
|
6233
6233
|
}
|
|
6234
6234
|
static get observedAttributes() {
|
|
6235
6235
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -6395,11 +6395,11 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6395
6395
|
}
|
|
6396
6396
|
}
|
|
6397
6397
|
const common$1 = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}";
|
|
6398
|
-
const styles$
|
|
6398
|
+
const styles$r = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}';
|
|
6399
6399
|
const commonStyleSheet$b = new CSSStyleSheet();
|
|
6400
|
-
const styleSheet$
|
|
6400
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
6401
6401
|
commonStyleSheet$b.replaceSync(common$1);
|
|
6402
|
-
styleSheet$
|
|
6402
|
+
styleSheet$j.replaceSync(styles$r);
|
|
6403
6403
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
6404
6404
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
6405
6405
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -6424,7 +6424,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6424
6424
|
`;
|
|
6425
6425
|
}
|
|
6426
6426
|
constructor() {
|
|
6427
|
-
super(styleSheet$
|
|
6427
|
+
super(styleSheet$j, commonStyleSheet$b);
|
|
6428
6428
|
const $root = document.createElement(this.nativeName);
|
|
6429
6429
|
$root.classList.add("cell");
|
|
6430
6430
|
$root.innerHTML = this.template();
|
|
@@ -6706,11 +6706,11 @@ let Cell = _Cell;
|
|
|
6706
6706
|
if (!customElements.get("px-cell")) {
|
|
6707
6707
|
customElements.define("px-cell", Cell);
|
|
6708
6708
|
}
|
|
6709
|
-
const styles$
|
|
6709
|
+
const styles$q = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}';
|
|
6710
6710
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6711
6711
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6712
|
-
const styleSheet$
|
|
6713
|
-
styleSheet$
|
|
6712
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
6713
|
+
styleSheet$i.replaceSync(styles$q);
|
|
6714
6714
|
const _CellLink = class _CellLink extends PxElement {
|
|
6715
6715
|
template() {
|
|
6716
6716
|
return `
|
|
@@ -6730,7 +6730,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6730
6730
|
`;
|
|
6731
6731
|
}
|
|
6732
6732
|
constructor() {
|
|
6733
|
-
super(styleSheet$
|
|
6733
|
+
super(styleSheet$i, commonStyleSheet$a);
|
|
6734
6734
|
const $root = document.createElement(this.nativeName);
|
|
6735
6735
|
$root.classList.add("cell-link");
|
|
6736
6736
|
$root.innerHTML = this.template();
|
|
@@ -6952,11 +6952,11 @@ let CellLink = _CellLink;
|
|
|
6952
6952
|
if (!customElements.get("px-cell-link")) {
|
|
6953
6953
|
customElements.define("px-cell-link", CellLink);
|
|
6954
6954
|
}
|
|
6955
|
-
const styles$
|
|
6955
|
+
const styles$p = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}";
|
|
6956
6956
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6957
6957
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6958
|
-
const styleSheet$
|
|
6959
|
-
styleSheet$
|
|
6958
|
+
const styleSheet$h = new CSSStyleSheet();
|
|
6959
|
+
styleSheet$h.replaceSync(styles$p);
|
|
6960
6960
|
const _CellButton = class _CellButton extends PxElement {
|
|
6961
6961
|
template() {
|
|
6962
6962
|
return `
|
|
@@ -6969,7 +6969,7 @@ const _CellButton = class _CellButton extends PxElement {
|
|
|
6969
6969
|
`;
|
|
6970
6970
|
}
|
|
6971
6971
|
constructor() {
|
|
6972
|
-
super(styleSheet$
|
|
6972
|
+
super(styleSheet$h, commonStyleSheet$9);
|
|
6973
6973
|
const $root = document.createElement(this.nativeName);
|
|
6974
6974
|
$root.classList.add("cell-button");
|
|
6975
6975
|
$root.innerHTML = this.template();
|
|
@@ -9135,10 +9135,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
9135
9135
|
}
|
|
9136
9136
|
}
|
|
9137
9137
|
}
|
|
9138
|
-
const styles$
|
|
9138
|
+
const styles$o = '.tile{display:flex;flex-direction:column;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-color-background-container-light-default) )}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (min-width: 48em){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}';
|
|
9139
9139
|
const common = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 768px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}';
|
|
9140
|
-
const styleSheet$
|
|
9141
|
-
styleSheet$
|
|
9140
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
9141
|
+
styleSheet$g.replaceSync(styles$o);
|
|
9142
9142
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
9143
9143
|
commonStyleSheet$5.replaceSync(common);
|
|
9144
9144
|
const tileBackgroundColorValues = [
|
|
@@ -9161,7 +9161,7 @@ const _Tile = class _Tile extends PxElement {
|
|
|
9161
9161
|
`;
|
|
9162
9162
|
}
|
|
9163
9163
|
constructor() {
|
|
9164
|
-
super(commonStyleSheet$5, styleSheet$
|
|
9164
|
+
super(commonStyleSheet$5, styleSheet$g);
|
|
9165
9165
|
const $root = document.createElement(this.nativeName);
|
|
9166
9166
|
$root.classList.add("tile");
|
|
9167
9167
|
$root.innerHTML = this.template();
|
|
@@ -9314,9 +9314,9 @@ let Tile = _Tile;
|
|
|
9314
9314
|
if (!customElements.get("px-tile")) {
|
|
9315
9315
|
customElements.define("px-tile", Tile);
|
|
9316
9316
|
}
|
|
9317
|
-
const styles$
|
|
9318
|
-
const styleSheet$
|
|
9319
|
-
styleSheet$
|
|
9317
|
+
const styles$n = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media only screen and (min-width: 48em){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}";
|
|
9318
|
+
const styleSheet$f = new CSSStyleSheet();
|
|
9319
|
+
styleSheet$f.replaceSync(styles$n);
|
|
9320
9320
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
9321
9321
|
commonStyleSheet$4.replaceSync(common);
|
|
9322
9322
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -9331,7 +9331,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
9331
9331
|
`;
|
|
9332
9332
|
}
|
|
9333
9333
|
constructor() {
|
|
9334
|
-
super(commonStyleSheet$4, styleSheet$
|
|
9334
|
+
super(commonStyleSheet$4, styleSheet$f);
|
|
9335
9335
|
const $root = document.createElement(this.nativeName);
|
|
9336
9336
|
$root.classList.add("tile-button");
|
|
9337
9337
|
$root.innerHTML = this.template();
|
|
@@ -9998,9 +9998,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9998
9998
|
if (!customElements.get("px-tile-radio")) {
|
|
9999
9999
|
customElements.define("px-tile-radio", TileRadio);
|
|
10000
10000
|
}
|
|
10001
|
-
const styles$
|
|
10002
|
-
const styleSheet$
|
|
10003
|
-
styleSheet$
|
|
10001
|
+
const styles$m = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}";
|
|
10002
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
10003
|
+
styleSheet$e.replaceSync(styles$m);
|
|
10004
10004
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
10005
10005
|
commonStyleSheet$1.replaceSync(common);
|
|
10006
10006
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -10021,7 +10021,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
10021
10021
|
`;
|
|
10022
10022
|
}
|
|
10023
10023
|
constructor() {
|
|
10024
|
-
super(commonStyleSheet$1, styleSheet$
|
|
10024
|
+
super(commonStyleSheet$1, styleSheet$e);
|
|
10025
10025
|
const $root = document.createElement(this.nativeName);
|
|
10026
10026
|
$root.classList.add("tile-link");
|
|
10027
10027
|
$root.innerHTML = this.template();
|
|
@@ -10407,9 +10407,9 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
10407
10407
|
if (!customElements.get("px-tile-switch")) {
|
|
10408
10408
|
customElements.define("px-tile-switch", TileSwitch);
|
|
10409
10409
|
}
|
|
10410
|
-
const styles$
|
|
10410
|
+
const styles$l = "#content{overflow:auto}#sticky-left{position:sticky;top:0;float:left;margin-top:var(--px-sticky-container-offset-left-desktop, var(--px-sticky-container-offset-left-all))}@media only screen and (max-width: 768px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-mobile, var(--px-sticky-container-offset-left-all))}}@media only screen and (max-width: 1025px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-laptop, var(--px-sticky-container-offset-left-all))}}#sticky-right{position:sticky;top:0;float:right;margin-top:var(--px-sticky-container-offset-right-desktop, var(--px-sticky-container-offset-right-all))}@media only screen and (max-width: 768px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-mobile, var(--px-sticky-container-offset-right-all))}}@media only screen and (max-width: 1025px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-laptop, var(--px-sticky-container-offset-right-all))}}#middle{position:relative;height:var(--px-sticky-container-middle-height, 100vh);width:100%;overflow:auto}.sticky-footer{position:sticky;bottom:0;width:100%}";
|
|
10411
10411
|
const stylesheet$8 = new CSSStyleSheet();
|
|
10412
|
-
stylesheet$8.replaceSync(styles$
|
|
10412
|
+
stylesheet$8.replaceSync(styles$l);
|
|
10413
10413
|
class StickyContainer extends HTMLElement {
|
|
10414
10414
|
constructor() {
|
|
10415
10415
|
super();
|
|
@@ -10499,9 +10499,9 @@ class StickyContainer extends HTMLElement {
|
|
|
10499
10499
|
if (!customElements.get("px-sticky-container")) {
|
|
10500
10500
|
customElements.define("px-sticky-container", StickyContainer);
|
|
10501
10501
|
}
|
|
10502
|
-
const styles$
|
|
10503
|
-
const styleSheet$
|
|
10504
|
-
styleSheet$
|
|
10502
|
+
const styles$k = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);box-sizing:border-box}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:80vh;overflow:auto}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media only screen and (max-width: 67.563em){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:2.813em}}@keyframes dialog-fade-in-right{0%{margin-right:-67.5em}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-67.5em}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-12.5em}to{margin-bottom:0}}';
|
|
10503
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
10504
|
+
styleSheet$d.replaceSync(styles$k);
|
|
10505
10505
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
10506
10506
|
class Drawer extends HTMLElement {
|
|
10507
10507
|
constructor() {
|
|
@@ -10539,7 +10539,7 @@ class Drawer extends HTMLElement {
|
|
|
10539
10539
|
</dialog>`;
|
|
10540
10540
|
this.attachShadow({ mode: "open" });
|
|
10541
10541
|
this.shadowRoot.innerHTML = this.template;
|
|
10542
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10542
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$d];
|
|
10543
10543
|
if (!this.hasAttribute("showfrom")) {
|
|
10544
10544
|
this.setAttribute("showfrom", "bottom");
|
|
10545
10545
|
}
|
|
@@ -10628,11 +10628,11 @@ class Drawer extends HTMLElement {
|
|
|
10628
10628
|
if (!customElements.get("px-drawer")) {
|
|
10629
10629
|
customElements.define("px-drawer", Drawer);
|
|
10630
10630
|
}
|
|
10631
|
-
const styles$
|
|
10631
|
+
const styles$j = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}";
|
|
10632
10632
|
const itemStyles = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}";
|
|
10633
|
-
const styles$
|
|
10634
|
-
const styleSheet$
|
|
10635
|
-
styleSheet$
|
|
10633
|
+
const styles$i = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 47.938em){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}";
|
|
10634
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
10635
|
+
styleSheet$c.replaceSync(styles$i);
|
|
10636
10636
|
class AppleSeed extends HTMLElement {
|
|
10637
10637
|
constructor() {
|
|
10638
10638
|
super();
|
|
@@ -10647,7 +10647,7 @@ class AppleSeed extends HTMLElement {
|
|
|
10647
10647
|
</div>`;
|
|
10648
10648
|
};
|
|
10649
10649
|
this.attachShadow({ mode: "open" });
|
|
10650
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10650
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$c];
|
|
10651
10651
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
10652
10652
|
}
|
|
10653
10653
|
static get observedAttributes() {
|
|
@@ -10874,8 +10874,8 @@ function throttle(func, wait, options) {
|
|
|
10874
10874
|
"trailing": trailing
|
|
10875
10875
|
});
|
|
10876
10876
|
}
|
|
10877
|
-
const styleSheet$
|
|
10878
|
-
styleSheet$
|
|
10877
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
10878
|
+
styleSheet$b.replaceSync(styles$j);
|
|
10879
10879
|
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10880
10880
|
const prefix = "px-spacing";
|
|
10881
10881
|
const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100% - ${Math.max(parseInt(numberOfItems), 2)} * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
|
|
@@ -10940,7 +10940,7 @@ class Carousel extends HTMLElement {
|
|
|
10940
10940
|
this.attachShadow({ mode: "open" });
|
|
10941
10941
|
this.shadowRoot.innerHTML = this.template;
|
|
10942
10942
|
this.shadowRoot.adoptedStyleSheets = [
|
|
10943
|
-
styleSheet$
|
|
10943
|
+
styleSheet$b,
|
|
10944
10944
|
cssTokenBreakpoints(
|
|
10945
10945
|
"gap",
|
|
10946
10946
|
attributeBreakpointCSSSelector$1,
|
|
@@ -11051,7 +11051,7 @@ class CarouselItem extends HTMLElement {
|
|
|
11051
11051
|
</div>`;
|
|
11052
11052
|
this.attachShadow({ mode: "open" });
|
|
11053
11053
|
this.shadowRoot.innerHTML = this.template;
|
|
11054
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11054
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$b, itemStyleSheet];
|
|
11055
11055
|
}
|
|
11056
11056
|
}
|
|
11057
11057
|
if (!customElements.get("px-carousel-item")) {
|
|
@@ -11425,9 +11425,9 @@ let Fieldset = _Fieldset;
|
|
|
11425
11425
|
if (!customElements.get("px-fieldset")) {
|
|
11426
11426
|
customElements.define("px-fieldset", Fieldset);
|
|
11427
11427
|
}
|
|
11428
|
-
const styles$d = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:var(--px-size-l)!important;background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0 var(--px-size-border-m) inset;border:none;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);line-height:var(--px-font-line-height-m);text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}input:not([type=file]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):hover,input:not([type=file]).error:hover,input:not([type=file]).success:hover,textarea:hover,textarea.error:hover,textarea.success:hover,select:hover,select.error:hover,select.success:hover,#input-file-container:hover,#input-file-container.error:hover,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-active-default) 0 0 0 var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}input:not([type=file]):disabled,input:not([type=file]):read-only:not(:is(select),#input-file-container),textarea:disabled,textarea:read-only:not(:is(select),#input-file-container),select:disabled,select:read-only:not(:is(select),#input-file-container),#input-file-container:disabled,#input-file-container:read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:var(--px-font-weight-title);text-align:left}input:not([type=file]).error,textarea.error,select.error,#input-file-container.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7em,center right 1em}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus-visible::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus-visible::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus-visible,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus-visible,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus-visible,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus-visible,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:hover,textarea[type=search].success:hover,textarea[type=search].error:hover,select[type=search].success:hover,select[type=search].error:hover,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:hover{background-position:center right 1em;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){width:auto;min-width:max-content;background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto!important;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5em right 1em}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center;max-width:100%}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media only screen and (max-width: 47.938em){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media only screen and (min-width: 48em) and (min-width: 64em){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media only screen and (min-width: 48em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet);height:2.45em!important}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media only screen and (min-width: 64.0625em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);background-position:center right var(--px-padding-s-laptop)}input:not([type=file]):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){input:not([type=file]).extended--desktop,textarea.extended--desktop,select.extended--desktop,#input-file-container.extended--desktop{width:100%}:host([extended--desktop]) #container{width:100%}}`;
|
|
11428
|
+
const styles$h = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:var(--px-size-l)!important;background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0 var(--px-size-border-m) inset;border:none;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);line-height:var(--px-font-line-height-m);text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}input:not([type=file]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):hover,input:not([type=file]).error:hover,input:not([type=file]).success:hover,textarea:hover,textarea.error:hover,textarea.success:hover,select:hover,select.error:hover,select.success:hover,#input-file-container:hover,#input-file-container.error:hover,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-active-default) 0 0 0 var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}input:not([type=file]):disabled,input:not([type=file]):read-only:not(:is(select),#input-file-container),textarea:disabled,textarea:read-only:not(:is(select),#input-file-container),select:disabled,select:read-only:not(:is(select),#input-file-container),#input-file-container:disabled,#input-file-container:read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:var(--px-font-weight-title);text-align:left}input:not([type=file]).error,textarea.error,select.error,#input-file-container.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7em,center right 1em}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus-visible::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus-visible::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus-visible,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus-visible,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus-visible,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus-visible,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:hover,textarea[type=search].success:hover,textarea[type=search].error:hover,select[type=search].success:hover,select[type=search].error:hover,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:hover{background-position:center right 1em;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){width:auto;min-width:max-content;background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto!important;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5em right 1em}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center;max-width:100%}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media only screen and (max-width: 47.938em){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media only screen and (min-width: 48em) and (min-width: 64em){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media only screen and (min-width: 48em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet);height:2.45em!important}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media only screen and (min-width: 64.0625em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);background-position:center right var(--px-padding-s-laptop)}input:not([type=file]):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){input:not([type=file]).extended--desktop,textarea.extended--desktop,select.extended--desktop,#input-file-container.extended--desktop{width:100%}:host([extended--desktop]) #container{width:100%}}`;
|
|
11429
11429
|
const stylesheet$7 = new CSSStyleSheet();
|
|
11430
|
-
stylesheet$7.replaceSync(styles$
|
|
11430
|
+
stylesheet$7.replaceSync(styles$h);
|
|
11431
11431
|
class AbstractInputElement extends PxElement {
|
|
11432
11432
|
constructor() {
|
|
11433
11433
|
var _a;
|
|
@@ -11890,9 +11890,9 @@ let Switch = _Switch;
|
|
|
11890
11890
|
if (!customElements.get("px-switch")) {
|
|
11891
11891
|
customElements.define("px-switch", Switch);
|
|
11892
11892
|
}
|
|
11893
|
-
const styles$
|
|
11894
|
-
const styleSheet$
|
|
11895
|
-
styleSheet$
|
|
11893
|
+
const styles$g = ":host{display:table;width:100%}";
|
|
11894
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
11895
|
+
styleSheet$a.replaceSync(styles$g);
|
|
11896
11896
|
class Table extends HTMLElement {
|
|
11897
11897
|
constructor() {
|
|
11898
11898
|
super();
|
|
@@ -11901,7 +11901,7 @@ class Table extends HTMLElement {
|
|
|
11901
11901
|
`;
|
|
11902
11902
|
this.attachShadow({ mode: "open" });
|
|
11903
11903
|
this.shadowRoot.innerHTML = this.template();
|
|
11904
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11904
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$a];
|
|
11905
11905
|
}
|
|
11906
11906
|
connectedCallback() {
|
|
11907
11907
|
this.style.display = "table";
|
|
@@ -11911,9 +11911,9 @@ class Table extends HTMLElement {
|
|
|
11911
11911
|
if (!customElements.get("px-table")) {
|
|
11912
11912
|
customElements.define("px-table", Table);
|
|
11913
11913
|
}
|
|
11914
|
-
const styles$
|
|
11915
|
-
const styleSheet$
|
|
11916
|
-
styleSheet$
|
|
11914
|
+
const styles$f = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
11915
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
11916
|
+
styleSheet$9.replaceSync(styles$f);
|
|
11917
11917
|
class Thead extends HTMLElement {
|
|
11918
11918
|
constructor() {
|
|
11919
11919
|
super();
|
|
@@ -11922,7 +11922,7 @@ class Thead extends HTMLElement {
|
|
|
11922
11922
|
`;
|
|
11923
11923
|
this.attachShadow({ mode: "open" });
|
|
11924
11924
|
this.shadowRoot.innerHTML = this.template();
|
|
11925
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11925
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
11926
11926
|
}
|
|
11927
11927
|
connectedCallback() {
|
|
11928
11928
|
this.style.display = "table-header-group";
|
|
@@ -11932,9 +11932,9 @@ class Thead extends HTMLElement {
|
|
|
11932
11932
|
if (!customElements.get("px-thead")) {
|
|
11933
11933
|
customElements.define("px-thead", Thead);
|
|
11934
11934
|
}
|
|
11935
|
-
const styles$
|
|
11936
|
-
const styleSheet$
|
|
11937
|
-
styleSheet$
|
|
11935
|
+
const styles$e = ":host{display:table-row}";
|
|
11936
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
11937
|
+
styleSheet$8.replaceSync(styles$e);
|
|
11938
11938
|
class Tr extends HTMLElement {
|
|
11939
11939
|
constructor() {
|
|
11940
11940
|
super();
|
|
@@ -11943,7 +11943,7 @@ class Tr extends HTMLElement {
|
|
|
11943
11943
|
`;
|
|
11944
11944
|
this.attachShadow({ mode: "open" });
|
|
11945
11945
|
this.shadowRoot.innerHTML = this.template();
|
|
11946
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11946
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
11947
11947
|
}
|
|
11948
11948
|
connectedCallback() {
|
|
11949
11949
|
this.style.display = "table-row";
|
|
@@ -11953,9 +11953,9 @@ class Tr extends HTMLElement {
|
|
|
11953
11953
|
if (!customElements.get("px-tr")) {
|
|
11954
11954
|
customElements.define("px-tr", Tr);
|
|
11955
11955
|
}
|
|
11956
|
-
const styles$
|
|
11957
|
-
const styleSheet$
|
|
11958
|
-
styleSheet$
|
|
11956
|
+
const styles$d = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default, var(--px-color-border-main-default))}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11957
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
11958
|
+
styleSheet$7.replaceSync(styles$d);
|
|
11959
11959
|
class Th extends HTMLElement {
|
|
11960
11960
|
constructor() {
|
|
11961
11961
|
super();
|
|
@@ -11972,7 +11972,7 @@ class Th extends HTMLElement {
|
|
|
11972
11972
|
`;
|
|
11973
11973
|
this.attachShadow({ mode: "open" });
|
|
11974
11974
|
this.shadowRoot.innerHTML = this.template();
|
|
11975
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11975
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
|
|
11976
11976
|
}
|
|
11977
11977
|
connectedCallback() {
|
|
11978
11978
|
this.style.display = "table-cell";
|
|
@@ -11989,9 +11989,9 @@ class Th extends HTMLElement {
|
|
|
11989
11989
|
if (!customElements.get("px-th")) {
|
|
11990
11990
|
customElements.define("px-th", Th);
|
|
11991
11991
|
}
|
|
11992
|
-
const styles$
|
|
11993
|
-
const styleSheet$
|
|
11994
|
-
styleSheet$
|
|
11992
|
+
const styles$c = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}::slotted(px-tr:hover){background-color:var(--px-color-background-state-hover-default)}";
|
|
11993
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
11994
|
+
styleSheet$6.replaceSync(styles$c);
|
|
11995
11995
|
class Tbody extends HTMLElement {
|
|
11996
11996
|
constructor() {
|
|
11997
11997
|
super();
|
|
@@ -12000,7 +12000,7 @@ class Tbody extends HTMLElement {
|
|
|
12000
12000
|
`;
|
|
12001
12001
|
this.attachShadow({ mode: "open" });
|
|
12002
12002
|
this.shadowRoot.innerHTML = this.template();
|
|
12003
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
12003
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
|
|
12004
12004
|
}
|
|
12005
12005
|
connectedCallback() {
|
|
12006
12006
|
this.style.display = "table-row-group";
|
|
@@ -12010,9 +12010,9 @@ class Tbody extends HTMLElement {
|
|
|
12010
12010
|
if (!customElements.get("px-tbody")) {
|
|
12011
12011
|
customElements.define("px-tbody", Tbody);
|
|
12012
12012
|
}
|
|
12013
|
-
const styles$
|
|
12014
|
-
const styleSheet$
|
|
12015
|
-
styleSheet$
|
|
12013
|
+
const styles$b = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-m) solid var(--td-border-color-default, var(--px-color-border-main-default))}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
12014
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
12015
|
+
styleSheet$5.replaceSync(styles$b);
|
|
12016
12016
|
class Td extends HTMLElement {
|
|
12017
12017
|
constructor() {
|
|
12018
12018
|
super();
|
|
@@ -12032,7 +12032,7 @@ class Td extends HTMLElement {
|
|
|
12032
12032
|
`;
|
|
12033
12033
|
this.attachShadow({ mode: "open" });
|
|
12034
12034
|
this.shadowRoot.innerHTML = this.template();
|
|
12035
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
12035
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$5];
|
|
12036
12036
|
}
|
|
12037
12037
|
connectedCallback() {
|
|
12038
12038
|
this.style.display = "table-cell";
|
|
@@ -12054,9 +12054,9 @@ class Td extends HTMLElement {
|
|
|
12054
12054
|
if (!customElements.get("px-td")) {
|
|
12055
12055
|
customElements.define("px-td", Td);
|
|
12056
12056
|
}
|
|
12057
|
-
const styles$
|
|
12057
|
+
const styles$a = ":host{display:block}:host *{box-sizing:border-box}button,a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-l);color:var(--px-color-text-neutral-default);text-align:center;cursor:pointer;padding:2em 0;height:100%}button:after,a:after{content:attr(data-label);display:block;height:0;width:auto;visibility:hidden;overflow:hidden;-webkit-user-select:none;user-select:none;pointer-events:none;font-weight:var(--px-font-weight-title)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button:hover,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}button{margin:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit}button[aria-expanded=true]{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);border-bottom-color:var(--px-color-background-container-primary-default)}a{text-decoration:none}@media only screen and (min-width: 48em){button,a{font-size:var(--px-text-size-label-m-tablet)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){button,a{font-size:var(--px-text-size-label-m-laptop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){button,a{font-size:var(--px-text-size-label-m-desktop)}button:focus-visible,a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
12058
12058
|
const stylesheet$6 = new CSSStyleSheet();
|
|
12059
|
-
stylesheet$6.replaceSync(styles$
|
|
12059
|
+
stylesheet$6.replaceSync(styles$a);
|
|
12060
12060
|
class HeaderItem extends WithExtraAttributes {
|
|
12061
12061
|
constructor() {
|
|
12062
12062
|
var _a;
|
|
@@ -12159,9 +12159,9 @@ class MDDLink extends HTMLElement {
|
|
|
12159
12159
|
if (!customElements.get("px-mdd-a")) {
|
|
12160
12160
|
customElements.define("px-mdd-a", MDDLink);
|
|
12161
12161
|
}
|
|
12162
|
-
const styles$
|
|
12162
|
+
const styles$9 = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media only screen and (min-width: 48em){#dropdown-zone--desktop{display:block;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media only screen and (min-width: 64.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
|
|
12163
12163
|
const stylesheet$5 = new CSSStyleSheet();
|
|
12164
|
-
stylesheet$5.replaceSync(styles$
|
|
12164
|
+
stylesheet$5.replaceSync(styles$9);
|
|
12165
12165
|
const menuAriaLabel = "Menu";
|
|
12166
12166
|
class Header extends WithExtraAttributes {
|
|
12167
12167
|
constructor() {
|
|
@@ -12449,7 +12449,7 @@ $megaDropdowns_get = function() {
|
|
|
12449
12449
|
if (!customElements.get("px-header")) {
|
|
12450
12450
|
customElements.define("px-header", Header);
|
|
12451
12451
|
}
|
|
12452
|
-
const styles$
|
|
12452
|
+
const styles$8 = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
|
|
12453
12453
|
const anchorAlignmentValues = [
|
|
12454
12454
|
"top-left",
|
|
12455
12455
|
"top-right",
|
|
@@ -12491,7 +12491,7 @@ function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-lef
|
|
|
12491
12491
|
});
|
|
12492
12492
|
}
|
|
12493
12493
|
const stylesheet$4 = new CSSStyleSheet();
|
|
12494
|
-
stylesheet$4.replaceSync(styles$
|
|
12494
|
+
stylesheet$4.replaceSync(styles$8);
|
|
12495
12495
|
const defaultAnchorAlignment = "bottom-left";
|
|
12496
12496
|
class Dropdown extends WithExtraAttributes {
|
|
12497
12497
|
constructor() {
|
|
@@ -12775,9 +12775,9 @@ class MDDCloser extends HTMLElement {
|
|
|
12775
12775
|
if (!customElements.get("px-mdd-closer")) {
|
|
12776
12776
|
customElements.define("px-mdd-closer", MDDCloser);
|
|
12777
12777
|
}
|
|
12778
|
-
const styles$
|
|
12778
|
+
const styles$7 = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-width: 767px){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:2em;right:1em}#sections-container{padding-bottom:calc(var(--mdd-section-container-padding-bottom) + var(--px-spacing-default-mobile));overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
|
|
12779
12779
|
const stylesheet$2 = new CSSStyleSheet();
|
|
12780
|
-
stylesheet$2.replaceSync(styles$
|
|
12780
|
+
stylesheet$2.replaceSync(styles$7);
|
|
12781
12781
|
class MegaDropDown extends HTMLElement {
|
|
12782
12782
|
constructor() {
|
|
12783
12783
|
var _a;
|
|
@@ -13029,9 +13029,9 @@ $closeButtons_get = function() {
|
|
|
13029
13029
|
if (!customElements.get("px-mdd")) {
|
|
13030
13030
|
customElements.define("px-mdd", MegaDropDown);
|
|
13031
13031
|
}
|
|
13032
|
-
const styles$
|
|
13032
|
+
const styles$6 = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}}';
|
|
13033
13033
|
const stylesheet$1 = new CSSStyleSheet();
|
|
13034
|
-
stylesheet$1.replaceSync(styles$
|
|
13034
|
+
stylesheet$1.replaceSync(styles$6);
|
|
13035
13035
|
class MddSection extends HTMLElement {
|
|
13036
13036
|
constructor() {
|
|
13037
13037
|
super();
|
|
@@ -13101,9 +13101,9 @@ class MddSection extends HTMLElement {
|
|
|
13101
13101
|
if (!customElements.get("px-mdd-section")) {
|
|
13102
13102
|
customElements.define("px-mdd-section", MddSection);
|
|
13103
13103
|
}
|
|
13104
|
-
const styles$
|
|
13104
|
+
const styles$5 = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (max-width: 47.9375em){a,button{padding:var(--px-spacing-s-mobile) 0}}@media only screen and (min-width: 48em){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
|
|
13105
13105
|
const stylesheet = new CSSStyleSheet();
|
|
13106
|
-
stylesheet.replaceSync(styles$
|
|
13106
|
+
stylesheet.replaceSync(styles$5);
|
|
13107
13107
|
class MddSectionItem extends HTMLElement {
|
|
13108
13108
|
constructor() {
|
|
13109
13109
|
var _a;
|
|
@@ -13407,9 +13407,9 @@ let Status = _Status;
|
|
|
13407
13407
|
if (!customElements.get("px-status")) {
|
|
13408
13408
|
customElements.define("px-status", Status);
|
|
13409
13409
|
}
|
|
13410
|
-
const styles = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__container{height:100%}.card .card__content{position:relative;background-color:var(--card-background-color-default);flex-grow:1;z-index:2}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover .card__content{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size);flex:0 0 auto}@media only screen and (max-width: 47.938em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (min-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}.media-position-top--laptop .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--laptop) .card__container,.media-position-left--laptop .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--laptop,.media-position-left--laptop .card__container .card__media-left--laptop{background-size:cover;background-position:center center;width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,.media-position-background--laptop .card__content{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,.media-position-background--laptop:hover .card__content{background-color:transparent}}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card .card__content{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,:host([inverted]) .media-position-background--mobile .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,:host([inverted]) .media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (min-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,:host([inverted]) .media-position-background--tablet .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,:host([inverted]) .media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,:host([inverted]) .media-position-background--laptop .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,:host([inverted]) .media-position-background--laptop:hover .card__content{background-color:transparent}}';
|
|
13411
|
-
const styleSheet = new CSSStyleSheet();
|
|
13412
|
-
styleSheet.replaceSync(styles);
|
|
13410
|
+
const styles$4 = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;height:100%;position:relative;text-decoration:none;color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__container{height:100%}.card .card__content{position:relative;background-color:var(--card-background-color-default);flex-grow:1;z-index:2}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover .card__content{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size);flex:0 0 auto}@media only screen and (max-width: 47.938em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (min-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}.media-position-top--laptop .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--laptop) .card__container,.media-position-left--laptop .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--laptop,.media-position-left--laptop .card__container .card__media-left--laptop{background-size:cover;background-position:center center;width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,.media-position-background--laptop .card__content{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,.media-position-background--laptop:hover .card__content{background-color:transparent}}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card .card__content{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 47.938em){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,:host([inverted]) .media-position-background--mobile .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,:host([inverted]) .media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 48em) and (min-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,:host([inverted]) .media-position-background--tablet .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,:host([inverted]) .media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 64.0625em){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,:host([inverted]) .media-position-background--laptop .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,:host([inverted]) .media-position-background--laptop:hover .card__content{background-color:transparent}}';
|
|
13411
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
13412
|
+
styleSheet$4.replaceSync(styles$4);
|
|
13413
13413
|
const cardBackgroundColorValues = [
|
|
13414
13414
|
"",
|
|
13415
13415
|
"container-default",
|
|
@@ -13447,7 +13447,7 @@ const _Card = class _Card extends PxElement {
|
|
|
13447
13447
|
}
|
|
13448
13448
|
constructor() {
|
|
13449
13449
|
super(
|
|
13450
|
-
styleSheet,
|
|
13450
|
+
styleSheet$4,
|
|
13451
13451
|
cssTokenBreakpoints(
|
|
13452
13452
|
"padding",
|
|
13453
13453
|
attributeBreakpointCSSSelector,
|
|
@@ -14213,11 +14213,965 @@ let ContentHeader = _ContentHeader;
|
|
|
14213
14213
|
if (!customElements.get("px-content-header")) {
|
|
14214
14214
|
customElements.define("px-content-header", ContentHeader);
|
|
14215
14215
|
}
|
|
14216
|
+
const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item:not(:first-child)){line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-link-s-mobile)}.breadcrumb px-breadcrumb-item:has(px-a[variant=icon-link]){font-size:var(--px-font-size-base)}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-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='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%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='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media only screen and (min-width: 48em){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item:not(:first-child)){font-size:var(--px-text-size-link-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item:not(:first-child)){font-size:var(--px-text-size-link-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item:not(:first-child)){font-size:var(--px-text-size-link-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
|
|
14217
|
+
const breadcrumbStyles = new CSSStyleSheet();
|
|
14218
|
+
breadcrumbStyles.replaceSync(breadcrumbCss);
|
|
14219
|
+
class Breadcrumb extends WithExtraAttributes {
|
|
14220
|
+
template() {
|
|
14221
|
+
return `
|
|
14222
|
+
<nav class="breadcrumb" aria-label="${this.ariaLabel || "Breadcrumb"}">
|
|
14223
|
+
<div role="list">
|
|
14224
|
+
<slot></slot>
|
|
14225
|
+
</div>
|
|
14226
|
+
</nav>
|
|
14227
|
+
`;
|
|
14228
|
+
}
|
|
14229
|
+
constructor() {
|
|
14230
|
+
super(breadcrumbStyles);
|
|
14231
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14232
|
+
}
|
|
14233
|
+
static get observedAttributes() {
|
|
14234
|
+
return [...super.observedAttributes, "inverted", "aria-label"];
|
|
14235
|
+
}
|
|
14236
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14237
|
+
if (oldValue !== newValue) {
|
|
14238
|
+
switch (attrName) {
|
|
14239
|
+
case "aria-label":
|
|
14240
|
+
this.$el.setAttribute("aria-label", this.ariaLabel);
|
|
14241
|
+
break;
|
|
14242
|
+
case "inverted":
|
|
14243
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14244
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
14245
|
+
this.$children[i].toggleAttribute("inverted");
|
|
14246
|
+
}
|
|
14247
|
+
}
|
|
14248
|
+
break;
|
|
14249
|
+
default:
|
|
14250
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14251
|
+
break;
|
|
14252
|
+
}
|
|
14253
|
+
}
|
|
14254
|
+
}
|
|
14255
|
+
get $el() {
|
|
14256
|
+
return this.shadowRoot.querySelector(".breadcrumb");
|
|
14257
|
+
}
|
|
14258
|
+
get $children() {
|
|
14259
|
+
return this.querySelectorAll("px-breadcrumb > *");
|
|
14260
|
+
}
|
|
14261
|
+
get inverted() {
|
|
14262
|
+
return this.hasAttribute("inverted");
|
|
14263
|
+
}
|
|
14264
|
+
set inverted(value) {
|
|
14265
|
+
if (value) {
|
|
14266
|
+
this.setAttribute("inverted", "");
|
|
14267
|
+
} else {
|
|
14268
|
+
this.removeAttribute("inverted");
|
|
14269
|
+
}
|
|
14270
|
+
}
|
|
14271
|
+
get ariaLabel() {
|
|
14272
|
+
return this.getAttribute("aria-label");
|
|
14273
|
+
}
|
|
14274
|
+
set ariaLabel(value) {
|
|
14275
|
+
if (value) {
|
|
14276
|
+
this.setAttribute("aria-label", value);
|
|
14277
|
+
} else {
|
|
14278
|
+
this.removeAttribute("aria-label");
|
|
14279
|
+
}
|
|
14280
|
+
}
|
|
14281
|
+
}
|
|
14282
|
+
if (!customElements.get("px-breadcrumb")) {
|
|
14283
|
+
customElements.define("px-breadcrumb", Breadcrumb);
|
|
14284
|
+
}
|
|
14285
|
+
const _BreadcrumbItem = class _BreadcrumbItem extends PxElement {
|
|
14286
|
+
constructor() {
|
|
14287
|
+
super();
|
|
14288
|
+
this.template = () => `<div role="listitem"><slot></slot></div>`;
|
|
14289
|
+
if (this.shadowRoot) {
|
|
14290
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14291
|
+
}
|
|
14292
|
+
}
|
|
14293
|
+
static get observedAttributes() {
|
|
14294
|
+
return [...super.observedAttributes, "inverted"];
|
|
14295
|
+
}
|
|
14296
|
+
connectedCallback() {
|
|
14297
|
+
super.connectedCallback();
|
|
14298
|
+
if (this.$icon) {
|
|
14299
|
+
this.$icon.setAttribute("size", "s");
|
|
14300
|
+
}
|
|
14301
|
+
if (!this.$link) {
|
|
14302
|
+
this.$el.setAttribute("aria-current", "page");
|
|
14303
|
+
}
|
|
14304
|
+
}
|
|
14305
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14306
|
+
if (oldValue !== newValue) {
|
|
14307
|
+
switch (attrName) {
|
|
14308
|
+
case "inverted":
|
|
14309
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14310
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
14311
|
+
this.$children[i].toggleAttribute("inverted");
|
|
14312
|
+
}
|
|
14313
|
+
}
|
|
14314
|
+
break;
|
|
14315
|
+
default:
|
|
14316
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14317
|
+
break;
|
|
14318
|
+
}
|
|
14319
|
+
}
|
|
14320
|
+
}
|
|
14321
|
+
get $link() {
|
|
14322
|
+
return this.querySelector("px-a");
|
|
14323
|
+
}
|
|
14324
|
+
get $icon() {
|
|
14325
|
+
return this.querySelector("px-icon");
|
|
14326
|
+
}
|
|
14327
|
+
get $children() {
|
|
14328
|
+
return this.querySelectorAll("px-breadcrumb-item > *");
|
|
14329
|
+
}
|
|
14330
|
+
get inverted() {
|
|
14331
|
+
return this.hasAttribute("inverted");
|
|
14332
|
+
}
|
|
14333
|
+
set inverted(value) {
|
|
14334
|
+
if (value) {
|
|
14335
|
+
this.setAttribute("inverted", "");
|
|
14336
|
+
} else {
|
|
14337
|
+
this.removeAttribute("inverted");
|
|
14338
|
+
}
|
|
14339
|
+
}
|
|
14340
|
+
};
|
|
14341
|
+
_BreadcrumbItem.nativeName = "div";
|
|
14342
|
+
let BreadcrumbItem = _BreadcrumbItem;
|
|
14343
|
+
if (!customElements.get("px-breadcrumb-item")) {
|
|
14344
|
+
customElements.define("px-breadcrumb-item", BreadcrumbItem);
|
|
14345
|
+
}
|
|
14346
|
+
const styles$3 = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
|
|
14347
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
14348
|
+
styleSheet$3.replaceSync(styles$3);
|
|
14349
|
+
const breakpointsValues = ["", "mobile", "tablet", "laptop"];
|
|
14350
|
+
const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
|
|
14351
|
+
const gapPrefix = "px-spacing";
|
|
14352
|
+
const _List = class _List extends PxElement {
|
|
14353
|
+
constructor() {
|
|
14354
|
+
super(
|
|
14355
|
+
styleSheet$3,
|
|
14356
|
+
cssTokenBreakpoints(
|
|
14357
|
+
"gap",
|
|
14358
|
+
AttributeBreakpointCSSSelector,
|
|
14359
|
+
gapValues,
|
|
14360
|
+
gapPrefix,
|
|
14361
|
+
"--list-gap"
|
|
14362
|
+
)
|
|
14363
|
+
);
|
|
14364
|
+
this.AttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
14365
|
+
this,
|
|
14366
|
+
"gap",
|
|
14367
|
+
(newValue) => newValue,
|
|
14368
|
+
"--list-gap"
|
|
14369
|
+
);
|
|
14370
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14371
|
+
}
|
|
14372
|
+
template() {
|
|
14373
|
+
return `
|
|
14374
|
+
<div class="list" role="list">
|
|
14375
|
+
<slot></slot>
|
|
14376
|
+
</div>
|
|
14377
|
+
`;
|
|
14378
|
+
}
|
|
14379
|
+
static get observedAttributes() {
|
|
14380
|
+
return ["inverted"];
|
|
14381
|
+
}
|
|
14382
|
+
connectedCallback() {
|
|
14383
|
+
super.connectedCallback();
|
|
14384
|
+
if (!this.gap) {
|
|
14385
|
+
this.gap = "xs";
|
|
14386
|
+
}
|
|
14387
|
+
}
|
|
14388
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14389
|
+
if (oldValue !== newValue) {
|
|
14390
|
+
switch (attrName) {
|
|
14391
|
+
case "inverted":
|
|
14392
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14393
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
14394
|
+
this.$children[i].toggleAttribute("inverted");
|
|
14395
|
+
}
|
|
14396
|
+
}
|
|
14397
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
14398
|
+
break;
|
|
14399
|
+
}
|
|
14400
|
+
}
|
|
14401
|
+
}
|
|
14402
|
+
get $children() {
|
|
14403
|
+
return this.querySelectorAll("px-list-item");
|
|
14404
|
+
}
|
|
14405
|
+
get inverted() {
|
|
14406
|
+
return this.hasAttribute("inverted");
|
|
14407
|
+
}
|
|
14408
|
+
set inverted(value) {
|
|
14409
|
+
if (value) {
|
|
14410
|
+
this.setAttribute("inverted", "");
|
|
14411
|
+
} else {
|
|
14412
|
+
this.removeAttribute("inverted");
|
|
14413
|
+
}
|
|
14414
|
+
}
|
|
14415
|
+
get gap() {
|
|
14416
|
+
return this.getAttribute("gap");
|
|
14417
|
+
}
|
|
14418
|
+
set gap(value) {
|
|
14419
|
+
if (value) {
|
|
14420
|
+
this.setAttribute("gap", value);
|
|
14421
|
+
} else {
|
|
14422
|
+
this.removeAttribute("gap");
|
|
14423
|
+
}
|
|
14424
|
+
}
|
|
14425
|
+
get gapMobile() {
|
|
14426
|
+
return this.getAttribute("gap--mobile");
|
|
14427
|
+
}
|
|
14428
|
+
set gapMobile(value) {
|
|
14429
|
+
if (value) {
|
|
14430
|
+
this.setAttribute("gap--mobile", value);
|
|
14431
|
+
} else {
|
|
14432
|
+
this.removeAttribute("gap--mobile");
|
|
14433
|
+
}
|
|
14434
|
+
}
|
|
14435
|
+
get gapTablet() {
|
|
14436
|
+
return this.getAttribute("gap--tablet");
|
|
14437
|
+
}
|
|
14438
|
+
set gapTablet(value) {
|
|
14439
|
+
if (value) {
|
|
14440
|
+
this.setAttribute("gap--tablet", value);
|
|
14441
|
+
} else {
|
|
14442
|
+
this.removeAttribute("gap--tablet");
|
|
14443
|
+
}
|
|
14444
|
+
}
|
|
14445
|
+
get gapLaptop() {
|
|
14446
|
+
return this.getAttribute("gap--laptop");
|
|
14447
|
+
}
|
|
14448
|
+
set gapLaptop(value) {
|
|
14449
|
+
if (value) {
|
|
14450
|
+
this.setAttribute("gap--laptop", value);
|
|
14451
|
+
} else {
|
|
14452
|
+
this.removeAttribute("gap--laptop");
|
|
14453
|
+
}
|
|
14454
|
+
}
|
|
14455
|
+
get gapDesktop() {
|
|
14456
|
+
return this.getAttribute("gap--desktop");
|
|
14457
|
+
}
|
|
14458
|
+
set gapDesktop(value) {
|
|
14459
|
+
if (value) {
|
|
14460
|
+
this.setAttribute("gap--desktop", value);
|
|
14461
|
+
} else {
|
|
14462
|
+
this.removeAttribute("gap--desktop");
|
|
14463
|
+
}
|
|
14464
|
+
}
|
|
14465
|
+
};
|
|
14466
|
+
_List.nativeName = "div";
|
|
14467
|
+
let List = _List;
|
|
14468
|
+
if (!customElements.get("px-list")) {
|
|
14469
|
+
customElements.define("px-list", List);
|
|
14470
|
+
}
|
|
14471
|
+
const styles$2 = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}';
|
|
14472
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
14473
|
+
styleSheet$2.replaceSync(styles$2);
|
|
14474
|
+
const _ListItem = class _ListItem extends PxElement {
|
|
14475
|
+
template() {
|
|
14476
|
+
return `
|
|
14477
|
+
<div class="list-item" role="listitem">
|
|
14478
|
+
<slot name="icon"></slot>
|
|
14479
|
+
<slot name="label"></slot>
|
|
14480
|
+
</div>
|
|
14481
|
+
`;
|
|
14482
|
+
}
|
|
14483
|
+
constructor() {
|
|
14484
|
+
super(styleSheet$2);
|
|
14485
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14486
|
+
}
|
|
14487
|
+
static get observedAttributes() {
|
|
14488
|
+
return ["inverted"];
|
|
14489
|
+
}
|
|
14490
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14491
|
+
if (oldValue !== newValue) {
|
|
14492
|
+
switch (attrName) {
|
|
14493
|
+
case "inverted":
|
|
14494
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14495
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
14496
|
+
this.$children[i].toggleAttribute("inverted");
|
|
14497
|
+
}
|
|
14498
|
+
}
|
|
14499
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
14500
|
+
break;
|
|
14501
|
+
}
|
|
14502
|
+
}
|
|
14503
|
+
}
|
|
14504
|
+
get $children() {
|
|
14505
|
+
return this.querySelectorAll("px-list-item > *");
|
|
14506
|
+
}
|
|
14507
|
+
get inverted() {
|
|
14508
|
+
return this.hasAttribute("inverted");
|
|
14509
|
+
}
|
|
14510
|
+
set inverted(value) {
|
|
14511
|
+
if (value) {
|
|
14512
|
+
this.setAttribute("inverted", "");
|
|
14513
|
+
} else {
|
|
14514
|
+
this.removeAttribute("inverted");
|
|
14515
|
+
}
|
|
14516
|
+
}
|
|
14517
|
+
};
|
|
14518
|
+
_ListItem.nativeName = "div";
|
|
14519
|
+
let ListItem = _ListItem;
|
|
14520
|
+
if (!customElements.get("px-list-item")) {
|
|
14521
|
+
customElements.define("px-list-item", ListItem);
|
|
14522
|
+
}
|
|
14523
|
+
const pillarCss = ':host{display:block}:host *{box-sizing:border-box}.pillar{height:100%;text-align:var(--pillar-text-align, left)}.pillar px-container{height:100%}.pillar__layout{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-s-mobile);height:100%}.pillar__content{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-xs-mobile)}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default)}::slotted([slot="description"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.pillar__layout{gap:var(--px-spacing-s-desktop)}.pillar__content{gap:var(--px-spacing-xs-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-m-desktop)}::slotted([slot="description"]){font-size:var(--px-text-size-body-m-desktop)}}@media only screen and (min-width: 1025px){.pillar__layout{gap:var(--px-spacing-s-desktop)}.pillar__content{gap:var(--px-spacing-xs-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-m-desktop)}::slotted([slot="description"]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}';
|
|
14524
|
+
const pillarStyles = new CSSStyleSheet();
|
|
14525
|
+
pillarStyles.replaceSync(pillarCss);
|
|
14526
|
+
const pillarVariantValues = ["", "naked", "contained"];
|
|
14527
|
+
const pillarAlignmentValues = ["", "left", "center"];
|
|
14528
|
+
class Pillar extends WithExtraAttributes {
|
|
14529
|
+
constructor() {
|
|
14530
|
+
super(pillarStyles);
|
|
14531
|
+
this.template = () => `<div class="pillar">
|
|
14532
|
+
<px-container>
|
|
14533
|
+
<div class="pillar__layout">
|
|
14534
|
+
<slot name="media"></slot>
|
|
14535
|
+
<div class="pillar__content">
|
|
14536
|
+
<slot name="title"></slot>
|
|
14537
|
+
<slot name="description"></slot>
|
|
14538
|
+
</div>
|
|
14539
|
+
<slot name="action"></slot>
|
|
14540
|
+
</div>
|
|
14541
|
+
</px-container>
|
|
14542
|
+
</div>`;
|
|
14543
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14544
|
+
}
|
|
14545
|
+
static get observedAttributes() {
|
|
14546
|
+
return [
|
|
14547
|
+
"variant",
|
|
14548
|
+
"background-color",
|
|
14549
|
+
"background-gradient",
|
|
14550
|
+
"alignment",
|
|
14551
|
+
"inverted"
|
|
14552
|
+
];
|
|
14553
|
+
}
|
|
14554
|
+
connectedCallback() {
|
|
14555
|
+
this.configureContainer();
|
|
14556
|
+
if (!this.$title) {
|
|
14557
|
+
console.error(
|
|
14558
|
+
'Pillar component requires a title slot. Please add a slot with name="title" inside the pillar.'
|
|
14559
|
+
);
|
|
14560
|
+
}
|
|
14561
|
+
}
|
|
14562
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14563
|
+
if (oldValue !== newValue) {
|
|
14564
|
+
switch (attrName) {
|
|
14565
|
+
case "variant":
|
|
14566
|
+
this.updateVariant(attrName, oldValue, newValue);
|
|
14567
|
+
this.configureContainer();
|
|
14568
|
+
break;
|
|
14569
|
+
case "background-color":
|
|
14570
|
+
this.$container.backgroundColor = newValue;
|
|
14571
|
+
break;
|
|
14572
|
+
case "background-gradient":
|
|
14573
|
+
this.$container.gradient = newValue;
|
|
14574
|
+
break;
|
|
14575
|
+
case "alignment":
|
|
14576
|
+
this.updateAlignment(attrName, oldValue, newValue);
|
|
14577
|
+
break;
|
|
14578
|
+
case "inverted":
|
|
14579
|
+
if (newValue === null || newValue === "") {
|
|
14580
|
+
this.$container.setAttribute("inverted", "");
|
|
14581
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14582
|
+
this.$children[i].setAttribute("inverted", "");
|
|
14583
|
+
}
|
|
14584
|
+
} else {
|
|
14585
|
+
this.$container.removeAttribute("inverted");
|
|
14586
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14587
|
+
this.$children[i].removeAttribute("inverted");
|
|
14588
|
+
}
|
|
14589
|
+
}
|
|
14590
|
+
break;
|
|
14591
|
+
default:
|
|
14592
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14593
|
+
break;
|
|
14594
|
+
}
|
|
14595
|
+
}
|
|
14596
|
+
}
|
|
14597
|
+
configureContainer() {
|
|
14598
|
+
if (this.variant === "contained") {
|
|
14599
|
+
this.$container.padding = "l";
|
|
14600
|
+
if (!this.backgroundColor && !this.gradient) {
|
|
14601
|
+
this.$container.backgroundColor = this.inverted ? "surface-brand" : "surface-default";
|
|
14602
|
+
}
|
|
14603
|
+
} else {
|
|
14604
|
+
this.$container.padding = "none";
|
|
14605
|
+
this.$container.backgroundColor = "none";
|
|
14606
|
+
this.$container.borderRadius = "none";
|
|
14607
|
+
}
|
|
14608
|
+
}
|
|
14609
|
+
updateAlignment(attrName, oldValue, newValue) {
|
|
14610
|
+
if (!this.checkName(pillarAlignmentValues, newValue)) {
|
|
14611
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
14612
|
+
return;
|
|
14613
|
+
}
|
|
14614
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
14615
|
+
this.updateAlignmentStyle(oldValue);
|
|
14616
|
+
}
|
|
14617
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
14618
|
+
this.updateAlignmentStyle(newValue);
|
|
14619
|
+
}
|
|
14620
|
+
}
|
|
14621
|
+
updateAlignmentStyle(value) {
|
|
14622
|
+
const alignItemsValue = value === "left" ? "flex-start" : value;
|
|
14623
|
+
this.$el.style.setProperty(`--pillar-align-items`, alignItemsValue);
|
|
14624
|
+
this.$el.style.setProperty(`--pillar-text-align`, value);
|
|
14625
|
+
}
|
|
14626
|
+
updateVariant(attrName, oldValue, newValue) {
|
|
14627
|
+
if (!this.checkName(pillarVariantValues, newValue)) {
|
|
14628
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
14629
|
+
return;
|
|
14630
|
+
}
|
|
14631
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
14632
|
+
this.$el.classList.toggle(oldValue);
|
|
14633
|
+
}
|
|
14634
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
14635
|
+
this.$el.classList.toggle(newValue);
|
|
14636
|
+
}
|
|
14637
|
+
}
|
|
14638
|
+
get $el() {
|
|
14639
|
+
return this.shadowRoot.querySelector(".pillar");
|
|
14640
|
+
}
|
|
14641
|
+
get $container() {
|
|
14642
|
+
return this.shadowRoot.querySelector("px-container");
|
|
14643
|
+
}
|
|
14644
|
+
get $title() {
|
|
14645
|
+
return this.querySelector('[slot="title"]');
|
|
14646
|
+
}
|
|
14647
|
+
get $children() {
|
|
14648
|
+
return this.querySelectorAll("px-pillar > *");
|
|
14649
|
+
}
|
|
14650
|
+
get variant() {
|
|
14651
|
+
return this.getAttribute("variant");
|
|
14652
|
+
}
|
|
14653
|
+
set variant(value) {
|
|
14654
|
+
if (value) {
|
|
14655
|
+
this.setAttribute("variant", value);
|
|
14656
|
+
} else {
|
|
14657
|
+
this.removeAttribute("variant");
|
|
14658
|
+
}
|
|
14659
|
+
}
|
|
14660
|
+
get backgroundColor() {
|
|
14661
|
+
return this.getAttribute("background-color");
|
|
14662
|
+
}
|
|
14663
|
+
set backgroundColor(value) {
|
|
14664
|
+
this.setAttribute("background-color", value);
|
|
14665
|
+
}
|
|
14666
|
+
get gradient() {
|
|
14667
|
+
return this.getAttribute("background-gradient");
|
|
14668
|
+
}
|
|
14669
|
+
set gradient(value) {
|
|
14670
|
+
this.setAttribute("background-gradient", value);
|
|
14671
|
+
}
|
|
14672
|
+
get alignment() {
|
|
14673
|
+
return this.getAttribute("alignment");
|
|
14674
|
+
}
|
|
14675
|
+
set alignment(value) {
|
|
14676
|
+
if (value) {
|
|
14677
|
+
this.setAttribute("alignment", value);
|
|
14678
|
+
} else {
|
|
14679
|
+
this.removeAttribute("alignment");
|
|
14680
|
+
}
|
|
14681
|
+
}
|
|
14682
|
+
get inverted() {
|
|
14683
|
+
return this.hasAttribute("inverted");
|
|
14684
|
+
}
|
|
14685
|
+
set inverted(value) {
|
|
14686
|
+
if (value) {
|
|
14687
|
+
this.setAttribute("inverted", "");
|
|
14688
|
+
} else {
|
|
14689
|
+
this.removeAttribute("inverted");
|
|
14690
|
+
}
|
|
14691
|
+
}
|
|
14692
|
+
}
|
|
14693
|
+
if (!customElements.get("px-pillar")) {
|
|
14694
|
+
customElements.define("px-pillar", Pillar);
|
|
14695
|
+
}
|
|
14696
|
+
const skeletonCss = ":host,:host>*{display:block;box-sizing:border-box}.skeleton-wrapper{display:flex;min-width:40px;flex-direction:column;align-items:flex-start;gap:10px;min-height:16px}.skeleton{border-radius:var(--px-radius-main);background-color:var(--px-color-background-state-disabled-default);align-self:stretch;height:16px;background-image:linear-gradient(-80deg,#0000,#0000 25%,#ffffff3d,#ffffff3d 55%,#0000 75%,#0000);background-size:200% 100%;animation:skeletonLoading 1.5s ease-in-out infinite}[inverted] .skeleton{background-color:var(--px-color-background-state-disabled-inverted);background-image:linear-gradient(-80deg,#fff0,#fff0 25%,#0000001a,#0000001a 55%,#fff0 75%,#fff0)}.skeleton.heading-s,.skeleton.heading-m,.skeleton.heading-l{max-width:240px}.skeleton.heading-s{height:24px}.skeleton.heading-m{height:32px}.skeleton.heading-l{height:40px}.skeleton.body,.skeleton.body-block{width:300px}.skeleton.body,.skeleton.body-block{height:16px}.skeleton.body-block:nth-of-type(3){width:180px}.skeleton.action-s,.skeleton.action-l{height:40px;border-radius:var(--px-radius-pill)}.skeleton.action-s{width:40px}.skeleton.action-l{width:160px}.skeleton.asset-s{width:40px;height:40px}.skeleton.asset-l{width:80px;height:80px}.skeleton.panel{width:300px;height:200px}@keyframes skeletonLoading{0%{background-position-x:150%}40%{background-position-x:-50%}to{background-position-x:-50%}}";
|
|
14697
|
+
const skeletonStyles = new CSSStyleSheet();
|
|
14698
|
+
skeletonStyles.replaceSync(skeletonCss);
|
|
14699
|
+
const skeletonsVariantValues = [
|
|
14700
|
+
"heading-s",
|
|
14701
|
+
"heading-m",
|
|
14702
|
+
"heading-l",
|
|
14703
|
+
"body",
|
|
14704
|
+
"body-block",
|
|
14705
|
+
"action-s",
|
|
14706
|
+
"action-l",
|
|
14707
|
+
"asset-s",
|
|
14708
|
+
"asset-l",
|
|
14709
|
+
"panel"
|
|
14710
|
+
];
|
|
14711
|
+
const _Skeleton = class _Skeleton extends PxElement {
|
|
14712
|
+
constructor() {
|
|
14713
|
+
super(skeletonStyles);
|
|
14714
|
+
this.template = () => `<div class="skeleton-wrapper">
|
|
14715
|
+
<div class="skeleton" aria-hidden="true"></div>
|
|
14716
|
+
<slot name="skeleton-text"></slot>
|
|
14717
|
+
</div>`;
|
|
14718
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14719
|
+
}
|
|
14720
|
+
static get observedAttributes() {
|
|
14721
|
+
return ["variant", "inverted"];
|
|
14722
|
+
}
|
|
14723
|
+
connectedCallback() {
|
|
14724
|
+
if (!this.hasAttribute("variant")) {
|
|
14725
|
+
this.setAttribute("variant", "body");
|
|
14726
|
+
}
|
|
14727
|
+
const slot = this.shadowRoot.querySelector(
|
|
14728
|
+
'slot[name="skeleton-text"]'
|
|
14729
|
+
);
|
|
14730
|
+
if (slot && slot.assignedNodes().length === 0) {
|
|
14731
|
+
console.error(
|
|
14732
|
+
'The "skeleton-text" slot cannot be empty for accessibility. This text will only be visible to screen readers by adding `shown--sr` property to the slot.'
|
|
14733
|
+
);
|
|
14734
|
+
}
|
|
14735
|
+
}
|
|
14736
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14737
|
+
if (oldValue !== newValue) {
|
|
14738
|
+
switch (attrName) {
|
|
14739
|
+
case "variant":
|
|
14740
|
+
this.updateVariant(newValue);
|
|
14741
|
+
this.$el.querySelector(".skeleton").classList.toggle(`${newValue}`);
|
|
14742
|
+
if (newValue === "body-block") {
|
|
14743
|
+
const wrapper = this.shadowRoot.querySelector(".skeleton-wrapper");
|
|
14744
|
+
const skeletons = Array.from({ length: 2 }, () => {
|
|
14745
|
+
const s = document.createElement("div");
|
|
14746
|
+
s.className = "skeleton body-block";
|
|
14747
|
+
s.setAttribute("aria-hidden", "true");
|
|
14748
|
+
return s;
|
|
14749
|
+
});
|
|
14750
|
+
skeletons.forEach((s) => wrapper.appendChild(s));
|
|
14751
|
+
}
|
|
14752
|
+
break;
|
|
14753
|
+
case "inverted":
|
|
14754
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
14755
|
+
break;
|
|
14756
|
+
default:
|
|
14757
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14758
|
+
break;
|
|
14759
|
+
}
|
|
14760
|
+
}
|
|
14761
|
+
}
|
|
14762
|
+
updateVariant(variant) {
|
|
14763
|
+
if (!this.checkName(skeletonsVariantValues, variant)) {
|
|
14764
|
+
console.error(`${variant} is not a valid variant value`);
|
|
14765
|
+
return;
|
|
14766
|
+
}
|
|
14767
|
+
}
|
|
14768
|
+
get $container() {
|
|
14769
|
+
return this.shadowRoot.querySelector("px-container");
|
|
14770
|
+
}
|
|
14771
|
+
get variant() {
|
|
14772
|
+
return this.getAttribute("variant");
|
|
14773
|
+
}
|
|
14774
|
+
set variant(value) {
|
|
14775
|
+
this.setAttribute("variant", value);
|
|
14776
|
+
}
|
|
14777
|
+
get inverted() {
|
|
14778
|
+
return this.hasAttribute("inverted");
|
|
14779
|
+
}
|
|
14780
|
+
set inverted(value) {
|
|
14781
|
+
if (value) {
|
|
14782
|
+
this.setAttribute("inverted", "");
|
|
14783
|
+
} else {
|
|
14784
|
+
this.removeAttribute("inverted");
|
|
14785
|
+
}
|
|
14786
|
+
}
|
|
14787
|
+
};
|
|
14788
|
+
_Skeleton.nativeName = "div";
|
|
14789
|
+
let Skeleton = _Skeleton;
|
|
14790
|
+
if (!customElements.get("px-skeleton")) {
|
|
14791
|
+
customElements.define("px-skeleton", Skeleton);
|
|
14792
|
+
}
|
|
14793
|
+
const statusCardCss = ':host,:host>*{display:block;box-sizing:border-box}px-container{height:100%}.status-card{position:relative}.status-card:before{content:"";position:absolute;display:block;border-left:5px solid var(--px-color-border-brand-default);height:100%;left:0;top:0;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.status-card.success:before{border-color:var(--px-color-border-purpose-success-default)}.status-card.warning:before,.status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-default)}.status-card.error:before{border-color:var(--px-color-border-purpose-error-default)}::slotted([slot="title"]){display:block;font-size:var(--px-text-size-heading-s-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}:host([inverted]) .status-card:before{border-color:var(--px-color-border-brand-inverted)}:host([inverted]) .status-card.success:before{border-color:var(--px-color-border-purpose-success-inverted)}:host([inverted]) .status-card.warning:before,:host([inverted]) .status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-inverted)}:host([inverted]) .status-card.error:before{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 768px){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-desktop)}}@media only screen and (min-width: 1025px){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-desktop)}}';
|
|
14794
|
+
const statusCardStyles = new CSSStyleSheet();
|
|
14795
|
+
statusCardStyles.replaceSync(statusCardCss);
|
|
14796
|
+
const statusCardStateValues = [
|
|
14797
|
+
"",
|
|
14798
|
+
"info",
|
|
14799
|
+
"success",
|
|
14800
|
+
"warning",
|
|
14801
|
+
"error",
|
|
14802
|
+
"ongoing"
|
|
14803
|
+
];
|
|
14804
|
+
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
14805
|
+
const _StatusCard = class _StatusCard extends PxElement {
|
|
14806
|
+
constructor() {
|
|
14807
|
+
super(statusCardStyles);
|
|
14808
|
+
this.template = () => `<div class="status-card">
|
|
14809
|
+
<px-container background-color="container-default" padding="s">
|
|
14810
|
+
<px-hstack gap="s" align-items="flex-start">
|
|
14811
|
+
<px-icon name="information_fill" from="lavender" size="l" color="brand"></px-icon>
|
|
14812
|
+
<px-vstack gap="s" grow="1">
|
|
14813
|
+
<px-vstack gap="xs">
|
|
14814
|
+
<slot name="title"></slot>
|
|
14815
|
+
<slot></slot>
|
|
14816
|
+
</px-vstack>
|
|
14817
|
+
<slot name="action"></slot>
|
|
14818
|
+
</px-vstack>
|
|
14819
|
+
<slot name="close-button"></slot>
|
|
14820
|
+
</px-hstack>
|
|
14821
|
+
</px-container>
|
|
14822
|
+
</div>`;
|
|
14823
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14824
|
+
}
|
|
14825
|
+
static get observedAttributes() {
|
|
14826
|
+
return ["state", "inverted", "status-icon-aria-label"];
|
|
14827
|
+
}
|
|
14828
|
+
connectedCallback() {
|
|
14829
|
+
super.connectedCallback();
|
|
14830
|
+
this.$closeButtonSlot.addEventListener("click", () => {
|
|
14831
|
+
this.close();
|
|
14832
|
+
});
|
|
14833
|
+
}
|
|
14834
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14835
|
+
if (oldValue !== newValue) {
|
|
14836
|
+
switch (attrName) {
|
|
14837
|
+
case "state":
|
|
14838
|
+
this.updateState(newValue);
|
|
14839
|
+
this.$el.classList.toggle(`${newValue}`);
|
|
14840
|
+
break;
|
|
14841
|
+
case "inverted":
|
|
14842
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
14843
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
14844
|
+
this.$children[i].toggleAttribute("inverted");
|
|
14845
|
+
}
|
|
14846
|
+
}
|
|
14847
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
14848
|
+
this.$container.toggleAttribute("inverted", newValue !== null);
|
|
14849
|
+
this.$statusIcon.toggleAttribute("inverted", newValue !== null);
|
|
14850
|
+
break;
|
|
14851
|
+
case "status-icon-aria-label":
|
|
14852
|
+
if (this.statusIconAriaLabel) {
|
|
14853
|
+
this.$statusIcon.setAttribute(
|
|
14854
|
+
"aria-label",
|
|
14855
|
+
this.statusIconAriaLabel
|
|
14856
|
+
);
|
|
14857
|
+
} else {
|
|
14858
|
+
this.$statusIcon.removeAttribute("aria-label");
|
|
14859
|
+
}
|
|
14860
|
+
break;
|
|
14861
|
+
default:
|
|
14862
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14863
|
+
break;
|
|
14864
|
+
}
|
|
14865
|
+
}
|
|
14866
|
+
}
|
|
14867
|
+
updateState(state) {
|
|
14868
|
+
if (!this.checkName(statusCardStateValues, state)) {
|
|
14869
|
+
console.error(`${state} is not a valid state value`);
|
|
14870
|
+
return;
|
|
14871
|
+
}
|
|
14872
|
+
const iconMap = {
|
|
14873
|
+
info: { name: "information_fill", color: "brand" },
|
|
14874
|
+
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
14875
|
+
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
14876
|
+
error: { name: "minus_fill", color: "purpose-error" },
|
|
14877
|
+
ongoing: { name: "clock_fill", color: "purpose-warning" }
|
|
14878
|
+
};
|
|
14879
|
+
const { name, color } = iconMap[state] || iconMap["info"];
|
|
14880
|
+
this.$statusIcon.name = name;
|
|
14881
|
+
this.$statusIcon.color = color;
|
|
14882
|
+
}
|
|
14883
|
+
close() {
|
|
14884
|
+
this.remove();
|
|
14885
|
+
this.dispatchEvent(
|
|
14886
|
+
new CustomEvent(CLOSE_EVENT, {
|
|
14887
|
+
bubbles: true,
|
|
14888
|
+
composed: true
|
|
14889
|
+
})
|
|
14890
|
+
);
|
|
14891
|
+
}
|
|
14892
|
+
get $closeButtonSlot() {
|
|
14893
|
+
return this.shadowRoot.querySelector(
|
|
14894
|
+
'slot[name="close-button"]'
|
|
14895
|
+
);
|
|
14896
|
+
}
|
|
14897
|
+
get $statusIcon() {
|
|
14898
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
14899
|
+
}
|
|
14900
|
+
get $container() {
|
|
14901
|
+
return this.shadowRoot.querySelector("px-container");
|
|
14902
|
+
}
|
|
14903
|
+
get $children() {
|
|
14904
|
+
return this.querySelectorAll("px-status-card > *");
|
|
14905
|
+
}
|
|
14906
|
+
get state() {
|
|
14907
|
+
return this.getAttribute("state");
|
|
14908
|
+
}
|
|
14909
|
+
set state(value) {
|
|
14910
|
+
this.setAttribute("state", value);
|
|
14911
|
+
}
|
|
14912
|
+
get inverted() {
|
|
14913
|
+
return this.hasAttribute("inverted");
|
|
14914
|
+
}
|
|
14915
|
+
set inverted(value) {
|
|
14916
|
+
if (value) {
|
|
14917
|
+
this.setAttribute("inverted", "");
|
|
14918
|
+
} else {
|
|
14919
|
+
this.removeAttribute("inverted");
|
|
14920
|
+
}
|
|
14921
|
+
}
|
|
14922
|
+
get statusIconAriaLabel() {
|
|
14923
|
+
return this.getAttribute("status-icon-aria-label");
|
|
14924
|
+
}
|
|
14925
|
+
set statusIconAriaLabel(value) {
|
|
14926
|
+
if (value) {
|
|
14927
|
+
this.setAttribute("status-icon-aria-label", value);
|
|
14928
|
+
} else {
|
|
14929
|
+
this.removeAttribute("status-icon-aria-label");
|
|
14930
|
+
}
|
|
14931
|
+
}
|
|
14932
|
+
};
|
|
14933
|
+
_StatusCard.nativeName = "div";
|
|
14934
|
+
let StatusCard = _StatusCard;
|
|
14935
|
+
if (!customElements.get("px-status-card")) {
|
|
14936
|
+
customElements.define("px-status-card", StatusCard);
|
|
14937
|
+
}
|
|
14938
|
+
const agGridTableCss = ":host{--ag-font-family: var(--px-font-family);--ag-font-size: 1em;--ag-data-font-size: 1em;--ag-accent-color: var(--px-color-text-brand-default);--ag-background-color: var(--px-color-background-container-light-default);--ag-foreground-color: var(--px-color-text-neutral-default);--ag-cell-text-color: var(--px-color-text-neutral-default);--ag-border-color: var(--px-color-border-main-default);--ag-border-radius: var(--px-radius-main);--ag-wrapper-border-radius: var(--px-radius-main);--ag-spacing: var(--px-padding-xs-mobile);--ag-header-background-color: var( --px-color-background-container-default-default );--ag-header-font-weight: var(--px-font-weight-title);--ag-icon-size: 1em;--ag-row-hover-color: rgba(0, 0, 0, .04);--ag-checkbox-border-radius: 4px;--ag-checkbox-indeterminate-background-color: var( --px-color-background-surface-brand );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-default );--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-default);--ag-invalid-color: var(--px-color-text-purpose-error-default);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-default );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-default );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-selected-row-background-color: rgba(0, 0, 0, .04)}@media only screen and (min-width: 48em){:host{--ag-spacing: var(--px-padding-xs-tablet)}}@media only screen and (min-width: 64.0625em){:host{--ag-spacing: var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){:host{--ag-spacing: var(--px-padding-xs-desktop)}}:host([inverted]){--ag-accent-color: var(--px-color-text-brand-inverted);--ag-background-color: var(--px-color-background-surface-dark);--ag-foreground-color: var(--px-color-text-neutral-inverted);--ag-cell-text-color: var(--px-color-text-neutral-inverted);--ag-border-color: var(--px-color-border-main-inverted);--ag-header-background-color: var( --px-color-background-container-default-inverted );--ag-row-hover-color: rgba(255, 255, 255, .08);--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-inverted);--ag-invalid-color: var(--px-color-text-purpose-error-inverted);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-inverted );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-inverted );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-selected-row-background-color: rgba(255, 255, 255, .08);--ag-checkbox-checked-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-background-color: var( --px-color-background-container-primary-inverted );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-inverted )}";
|
|
14939
|
+
const agGridTableStyles = new CSSStyleSheet();
|
|
14940
|
+
agGridTableStyles.replaceSync(agGridTableCss);
|
|
14941
|
+
class AgGridTable extends WithExtraAttributes {
|
|
14942
|
+
constructor() {
|
|
14943
|
+
super(agGridTableStyles);
|
|
14944
|
+
this.template = () => `<slot></slot>`;
|
|
14945
|
+
this.shadowRoot.innerHTML = this.template();
|
|
14946
|
+
}
|
|
14947
|
+
static get observedAttributes() {
|
|
14948
|
+
return ["inverted"];
|
|
14949
|
+
}
|
|
14950
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14951
|
+
if (oldValue !== newValue) {
|
|
14952
|
+
switch (attrName) {
|
|
14953
|
+
default:
|
|
14954
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
14955
|
+
break;
|
|
14956
|
+
}
|
|
14957
|
+
}
|
|
14958
|
+
}
|
|
14959
|
+
get inverted() {
|
|
14960
|
+
return this.hasAttribute("inverted");
|
|
14961
|
+
}
|
|
14962
|
+
set inverted(value) {
|
|
14963
|
+
if (value) {
|
|
14964
|
+
this.setAttribute("inverted", "");
|
|
14965
|
+
} else {
|
|
14966
|
+
this.removeAttribute("inverted");
|
|
14967
|
+
}
|
|
14968
|
+
}
|
|
14969
|
+
}
|
|
14970
|
+
if (!customElements.get("px-ag-grid-table")) {
|
|
14971
|
+
customElements.define("px-ag-grid-table", AgGridTable);
|
|
14972
|
+
}
|
|
14973
|
+
const styles$1 = ':host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option{display:inline-block;width:32px;height:32px!important;border-radius:var(--px-radius-pill);background-color:var(--color-option-device-color);border:var(--px-size-border-m) var(--px-color-border-main-default) solid}.color-option[unavailable]{position:relative}.color-option[unavailable]:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:44px;height:var(--px-size-border-m);background-color:var(--px-color-border-neutral-default)}.color-option--size-small{width:16px;height:16px!important;border-width:var(--px-size-border-s)}.color-option--size-small[unavailable]:before{width:22px;height:var(--px-size-border-s)}';
|
|
14974
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
14975
|
+
styleSheet$1.replaceSync(styles$1);
|
|
14976
|
+
const colorOptionSizeValues = ["", "default", "small"];
|
|
14977
|
+
const _ColorOption = class _ColorOption extends PxElement {
|
|
14978
|
+
template() {
|
|
14979
|
+
return `
|
|
14980
|
+
<slot></slot>
|
|
14981
|
+
`;
|
|
14982
|
+
}
|
|
14983
|
+
constructor() {
|
|
14984
|
+
super(styleSheet$1);
|
|
14985
|
+
const $root = document.createElement(this.nativeName);
|
|
14986
|
+
$root.classList.add("color-option");
|
|
14987
|
+
$root.innerHTML = this.template();
|
|
14988
|
+
this.shadowRoot.appendChild($root);
|
|
14989
|
+
}
|
|
14990
|
+
connectedCallback() {
|
|
14991
|
+
super.connectedCallback();
|
|
14992
|
+
}
|
|
14993
|
+
static get observedAttributes() {
|
|
14994
|
+
return [...super.observedAttributes, "size", "device-color", "unavailable"];
|
|
14995
|
+
}
|
|
14996
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14997
|
+
if (oldValue !== newValue) {
|
|
14998
|
+
switch (attrName) {
|
|
14999
|
+
case "size":
|
|
15000
|
+
this.updateSize(attrName, oldValue, newValue, colorOptionSizeValues);
|
|
15001
|
+
break;
|
|
15002
|
+
case "device-color":
|
|
15003
|
+
this.updateDeviceColor(attrName, oldValue, newValue);
|
|
15004
|
+
break;
|
|
15005
|
+
case "unavailable":
|
|
15006
|
+
this.$el.toggleAttribute("unavailable");
|
|
15007
|
+
break;
|
|
15008
|
+
default:
|
|
15009
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
15010
|
+
break;
|
|
15011
|
+
}
|
|
15012
|
+
}
|
|
15013
|
+
}
|
|
15014
|
+
updateSize(attrName, oldValue, newValue, attrValues) {
|
|
15015
|
+
if (!checkName(attrValues, newValue)) {
|
|
15016
|
+
console.error(`${newValue} is not an allowed ${attrName} value.`);
|
|
15017
|
+
return;
|
|
15018
|
+
}
|
|
15019
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
15020
|
+
this.$el.classList.toggle(`color-option--size-${oldValue}`);
|
|
15021
|
+
}
|
|
15022
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
15023
|
+
this.$el.classList.toggle(`color-option--size-${newValue}`);
|
|
15024
|
+
}
|
|
15025
|
+
}
|
|
15026
|
+
updateDeviceColor(attrName, oldValue, newValue) {
|
|
15027
|
+
if (oldValue !== null && oldValue !== "") {
|
|
15028
|
+
this.$el.style.setProperty("--color-option-device-color", oldValue);
|
|
15029
|
+
}
|
|
15030
|
+
if (newValue !== null && newValue !== "") {
|
|
15031
|
+
this.$el.style.setProperty("--color-option-device-color", newValue);
|
|
15032
|
+
}
|
|
15033
|
+
}
|
|
15034
|
+
get size() {
|
|
15035
|
+
return this.getAttribute("size");
|
|
15036
|
+
}
|
|
15037
|
+
set size(value) {
|
|
15038
|
+
if (value) {
|
|
15039
|
+
this.setAttribute("size", value);
|
|
15040
|
+
} else {
|
|
15041
|
+
this.removeAttribute("size");
|
|
15042
|
+
}
|
|
15043
|
+
}
|
|
15044
|
+
get deviceColor() {
|
|
15045
|
+
return this.getAttribute("device-color");
|
|
15046
|
+
}
|
|
15047
|
+
set deviceColor(value) {
|
|
15048
|
+
if (value) {
|
|
15049
|
+
this.setAttribute("device-color", value);
|
|
15050
|
+
} else {
|
|
15051
|
+
this.removeAttribute("device-color");
|
|
15052
|
+
}
|
|
15053
|
+
}
|
|
15054
|
+
get unavailable() {
|
|
15055
|
+
return this.hasAttribute("unavailable");
|
|
15056
|
+
}
|
|
15057
|
+
set unavailable(value) {
|
|
15058
|
+
if (value) {
|
|
15059
|
+
this.setAttribute("unavailable", "");
|
|
15060
|
+
} else {
|
|
15061
|
+
this.removeAttribute("unavailable");
|
|
15062
|
+
}
|
|
15063
|
+
}
|
|
15064
|
+
};
|
|
15065
|
+
_ColorOption.nativeName = "div";
|
|
15066
|
+
let ColorOption = _ColorOption;
|
|
15067
|
+
if (!customElements.get("px-color-option")) {
|
|
15068
|
+
customElements.define("px-color-option", ColorOption);
|
|
15069
|
+
}
|
|
15070
|
+
const styles = ":host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option-link{display:inline-block;text-decoration:none;padding:var(--px-padding-2xs-mobile);border-radius:var(--px-radius-pill);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.color-option-link[selected]{box-shadow:inset 0 0 0 var(--px-size-border-m) var(--px-color-border-brand-default)}.color-option-link:hover{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-neutral-default)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48em){.color-option-link{padding:var(--px-padding-2xs-tablet)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){.color-option-link{padding:var(--px-padding-2xs-laptop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){.color-option-link{padding:var(--px-padding-2xs-desktop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
15071
|
+
const styleSheet = new CSSStyleSheet();
|
|
15072
|
+
styleSheet.replaceSync(styles);
|
|
15073
|
+
const CLICK_EVENT = "px.lavender.color-option-link.click";
|
|
15074
|
+
const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
15075
|
+
template() {
|
|
15076
|
+
return `
|
|
15077
|
+
<px-color-option device-color="${this.deviceColor}"><slot></slot></px-color-option>
|
|
15078
|
+
`;
|
|
15079
|
+
}
|
|
15080
|
+
constructor() {
|
|
15081
|
+
super(styleSheet);
|
|
15082
|
+
const $root = document.createElement(this.nativeName);
|
|
15083
|
+
$root.classList.add("color-option-link");
|
|
15084
|
+
$root.innerHTML = this.template();
|
|
15085
|
+
this.shadowRoot.appendChild($root);
|
|
15086
|
+
}
|
|
15087
|
+
connectedCallback() {
|
|
15088
|
+
super.connectedCallback();
|
|
15089
|
+
this.addEventListener("click", (e) => {
|
|
15090
|
+
e.preventDefault();
|
|
15091
|
+
this.clickColorOptionLink();
|
|
15092
|
+
});
|
|
15093
|
+
}
|
|
15094
|
+
static get observedAttributes() {
|
|
15095
|
+
return [
|
|
15096
|
+
...super.observedAttributes,
|
|
15097
|
+
"device-color",
|
|
15098
|
+
"unavailable",
|
|
15099
|
+
"selected"
|
|
15100
|
+
];
|
|
15101
|
+
}
|
|
15102
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
15103
|
+
if (oldValue !== newValue) {
|
|
15104
|
+
switch (attrName) {
|
|
15105
|
+
case "device-color":
|
|
15106
|
+
this.$colorOption.setAttribute(attrName, newValue);
|
|
15107
|
+
break;
|
|
15108
|
+
case "unavailable":
|
|
15109
|
+
this.$colorOption.toggleAttribute(attrName);
|
|
15110
|
+
break;
|
|
15111
|
+
case "selected":
|
|
15112
|
+
this.$el.toggleAttribute("selected");
|
|
15113
|
+
break;
|
|
15114
|
+
default:
|
|
15115
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
15116
|
+
break;
|
|
15117
|
+
}
|
|
15118
|
+
}
|
|
15119
|
+
}
|
|
15120
|
+
clickColorOptionLink() {
|
|
15121
|
+
this.dispatchEvent(
|
|
15122
|
+
new CustomEvent(CLICK_EVENT, {
|
|
15123
|
+
bubbles: true,
|
|
15124
|
+
composed: true
|
|
15125
|
+
})
|
|
15126
|
+
);
|
|
15127
|
+
}
|
|
15128
|
+
get $colorOption() {
|
|
15129
|
+
return this.shadowRoot.querySelector("px-color-option");
|
|
15130
|
+
}
|
|
15131
|
+
get deviceColor() {
|
|
15132
|
+
return this.getAttribute("device-color");
|
|
15133
|
+
}
|
|
15134
|
+
set deviceColor(value) {
|
|
15135
|
+
if (value) {
|
|
15136
|
+
this.setAttribute("device-color", value);
|
|
15137
|
+
} else {
|
|
15138
|
+
this.removeAttribute("device-color");
|
|
15139
|
+
}
|
|
15140
|
+
}
|
|
15141
|
+
get unavailable() {
|
|
15142
|
+
return this.hasAttribute("unavailable");
|
|
15143
|
+
}
|
|
15144
|
+
set unavailable(value) {
|
|
15145
|
+
if (value) {
|
|
15146
|
+
this.setAttribute("unavailable", "");
|
|
15147
|
+
} else {
|
|
15148
|
+
this.removeAttribute("unavailable");
|
|
15149
|
+
}
|
|
15150
|
+
}
|
|
15151
|
+
get selected() {
|
|
15152
|
+
return this.hasAttribute("selected");
|
|
15153
|
+
}
|
|
15154
|
+
set selected(value) {
|
|
15155
|
+
if (value) {
|
|
15156
|
+
this.setAttribute("selected", "");
|
|
15157
|
+
} else {
|
|
15158
|
+
this.removeAttribute("selected");
|
|
15159
|
+
}
|
|
15160
|
+
}
|
|
15161
|
+
};
|
|
15162
|
+
_ColorOptionLink.nativeName = "a";
|
|
15163
|
+
let ColorOptionLink = _ColorOptionLink;
|
|
15164
|
+
if (!customElements.get("px-color-option-link")) {
|
|
15165
|
+
customElements.define("px-color-option-link", ColorOptionLink);
|
|
15166
|
+
}
|
|
14216
15167
|
export {
|
|
14217
15168
|
Accordion,
|
|
15169
|
+
AgGridTable,
|
|
14218
15170
|
AppleSeed,
|
|
14219
15171
|
AttributeBreakpointHandlerDelegate,
|
|
14220
15172
|
Banner,
|
|
15173
|
+
Breadcrumb,
|
|
15174
|
+
BreadcrumbItem,
|
|
14221
15175
|
Button,
|
|
14222
15176
|
ButtonIcon,
|
|
14223
15177
|
Card,
|
|
@@ -14230,6 +15184,8 @@ export {
|
|
|
14230
15184
|
CellRadio,
|
|
14231
15185
|
CellSwitch,
|
|
14232
15186
|
Checkbox,
|
|
15187
|
+
ColorOption,
|
|
15188
|
+
ColorOptionLink,
|
|
14233
15189
|
Container,
|
|
14234
15190
|
ContentHeader,
|
|
14235
15191
|
Drawer,
|
|
@@ -14253,6 +15209,8 @@ export {
|
|
|
14253
15209
|
Input,
|
|
14254
15210
|
InputState,
|
|
14255
15211
|
Link,
|
|
15212
|
+
List,
|
|
15213
|
+
ListItem,
|
|
14256
15214
|
MddSection,
|
|
14257
15215
|
MddSectionItem,
|
|
14258
15216
|
MegaDropDown,
|
|
@@ -14261,6 +15219,7 @@ export {
|
|
|
14261
15219
|
Paragraph,
|
|
14262
15220
|
Patch,
|
|
14263
15221
|
Picture,
|
|
15222
|
+
Pillar,
|
|
14264
15223
|
Price,
|
|
14265
15224
|
PxElement,
|
|
14266
15225
|
PxTab,
|
|
@@ -14273,11 +15232,13 @@ export {
|
|
|
14273
15232
|
Section,
|
|
14274
15233
|
Select,
|
|
14275
15234
|
Separator,
|
|
15235
|
+
Skeleton,
|
|
14276
15236
|
Spacer,
|
|
14277
15237
|
Span,
|
|
14278
15238
|
Spinner,
|
|
14279
15239
|
Stack,
|
|
14280
15240
|
Status,
|
|
15241
|
+
StatusCard,
|
|
14281
15242
|
Switch,
|
|
14282
15243
|
Table,
|
|
14283
15244
|
Tag,
|
|
@@ -14311,6 +15272,7 @@ export {
|
|
|
14311
15272
|
borderSideValues,
|
|
14312
15273
|
borderValues,
|
|
14313
15274
|
boxShadowValues,
|
|
15275
|
+
breakpointsValues,
|
|
14314
15276
|
buttonIconSizeValues,
|
|
14315
15277
|
buttonIconVariantValues,
|
|
14316
15278
|
cardBackgroundColorValues,
|
|
@@ -14322,6 +15284,7 @@ export {
|
|
|
14322
15284
|
checkName,
|
|
14323
15285
|
checkboxStateValues,
|
|
14324
15286
|
checkboxVariantValues,
|
|
15287
|
+
colorOptionSizeValues,
|
|
14325
15288
|
colorValues,
|
|
14326
15289
|
contentAlignmentValues,
|
|
14327
15290
|
cssGridAlignSelfValues,
|
|
@@ -14358,6 +15321,8 @@ export {
|
|
|
14358
15321
|
paddingValues,
|
|
14359
15322
|
patchShapeValues,
|
|
14360
15323
|
patchVariantValues,
|
|
15324
|
+
pillarAlignmentValues,
|
|
15325
|
+
pillarVariantValues,
|
|
14361
15326
|
priceSizeValues,
|
|
14362
15327
|
priceVariantValues,
|
|
14363
15328
|
radioGroupGapValues,
|
|
@@ -14367,9 +15332,11 @@ export {
|
|
|
14367
15332
|
separatorDirectionValues,
|
|
14368
15333
|
separatorSizeValues,
|
|
14369
15334
|
shapeValues,
|
|
15335
|
+
skeletonsVariantValues,
|
|
14370
15336
|
stateValues,
|
|
15337
|
+
statusCardStateValues,
|
|
14371
15338
|
statusStateValues,
|
|
14372
|
-
styleSheet$
|
|
15339
|
+
styleSheet$v as styleSheet,
|
|
14373
15340
|
suffixButtonIconVariantValues,
|
|
14374
15341
|
textalignValues,
|
|
14375
15342
|
tileBackgroundColorValues,
|