@proximus/lavender 2.0.0-alpha.1 → 2.0.0-alpha.4
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 +478 -221
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -434,6 +434,12 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
436
|
class PxElement extends WithExtraAttributes {
|
|
437
|
+
constructor(...adoptedStylesheets) {
|
|
438
|
+
super(...adoptedStylesheets);
|
|
439
|
+
this.accessorExclusions = [];
|
|
440
|
+
this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
|
|
441
|
+
this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
|
|
442
|
+
}
|
|
437
443
|
static get observedAttributes() {
|
|
438
444
|
return [
|
|
439
445
|
...super.observedAttributes,
|
|
@@ -448,14 +454,10 @@ class PxElement extends WithExtraAttributes {
|
|
|
448
454
|
this.$el.setAttribute(name, newValue);
|
|
449
455
|
}
|
|
450
456
|
}
|
|
451
|
-
constructor(...adoptedStylesheets) {
|
|
452
|
-
super(...adoptedStylesheets);
|
|
453
|
-
this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
|
|
454
|
-
}
|
|
455
457
|
connectedCallback() {
|
|
456
458
|
var _a;
|
|
457
459
|
for (const name of getSupportedPropertyNames(this.nativeName)) {
|
|
458
|
-
if (name === "constructor") {
|
|
460
|
+
if (name === "constructor" || this.accessorExclusions.includes(name)) {
|
|
459
461
|
continue;
|
|
460
462
|
}
|
|
461
463
|
try {
|
|
@@ -979,9 +981,9 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
979
981
|
this.setCSSProperties();
|
|
980
982
|
}
|
|
981
983
|
}
|
|
982
|
-
const styles$
|
|
983
|
-
const styleSheet$
|
|
984
|
-
styleSheet$
|
|
984
|
+
const styles$I = ':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))}}';
|
|
985
|
+
const styleSheet$z = new CSSStyleSheet();
|
|
986
|
+
styleSheet$z.replaceSync(styles$I);
|
|
985
987
|
const directionValues = [
|
|
986
988
|
"",
|
|
987
989
|
"default",
|
|
@@ -1013,7 +1015,7 @@ const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
|
1013
1015
|
const overflowValues = ["", "visible", "hidden", "scroll", "auto"];
|
|
1014
1016
|
class Stack extends WithExtraAttributes {
|
|
1015
1017
|
constructor() {
|
|
1016
|
-
super(styleSheet$
|
|
1018
|
+
super(styleSheet$z);
|
|
1017
1019
|
this.overflowXAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
1018
1020
|
this,
|
|
1019
1021
|
"overflow-x",
|
|
@@ -1434,12 +1436,12 @@ class Spacer extends HTMLElement {
|
|
|
1434
1436
|
if (!customElements.get("px-spacer")) {
|
|
1435
1437
|
customElements.define("px-spacer", Spacer);
|
|
1436
1438
|
}
|
|
1437
|
-
const styles$
|
|
1438
|
-
const styleSheet$
|
|
1439
|
-
styleSheet$
|
|
1439
|
+
const styles$H = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}";
|
|
1440
|
+
const styleSheet$y = new CSSStyleSheet();
|
|
1441
|
+
styleSheet$y.replaceSync(styles$H);
|
|
1440
1442
|
class Page extends WithExtraAttributes {
|
|
1441
1443
|
constructor() {
|
|
1442
|
-
super(styleSheet$
|
|
1444
|
+
super(styleSheet$y);
|
|
1443
1445
|
this.template = (stickyContainer) => `
|
|
1444
1446
|
<px-container border-radius="none" padding="none">
|
|
1445
1447
|
<px-vstack>
|
|
@@ -2007,16 +2009,16 @@ if (!customElements.get("px-grid")) {
|
|
|
2007
2009
|
}
|
|
2008
2010
|
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
2011
|
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$
|
|
2012
|
+
const styles$G = ".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)}}";
|
|
2013
|
+
const styles$F = ":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
2014
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
2013
2015
|
const linkStyles$2 = new CSSStyleSheet();
|
|
2014
2016
|
const patchStyles = new CSSStyleSheet();
|
|
2015
2017
|
const tagStyles = new CSSStyleSheet();
|
|
2016
2018
|
buttonStyles$1.replaceSync(buttonCss);
|
|
2017
2019
|
linkStyles$2.replaceSync(linkCss);
|
|
2018
|
-
patchStyles.replaceSync(styles$
|
|
2019
|
-
tagStyles.replaceSync(styles$
|
|
2020
|
+
patchStyles.replaceSync(styles$G);
|
|
2021
|
+
tagStyles.replaceSync(styles$F);
|
|
2020
2022
|
const variantValues = [
|
|
2021
2023
|
"",
|
|
2022
2024
|
"default",
|
|
@@ -2353,6 +2355,7 @@ if (!customElements.get("px-icon-set")) {
|
|
|
2353
2355
|
}
|
|
2354
2356
|
const iconColorValues = [
|
|
2355
2357
|
"Brand",
|
|
2358
|
+
"Accent",
|
|
2356
2359
|
"Neutral",
|
|
2357
2360
|
"Dimmed",
|
|
2358
2361
|
"PurposeSuccess",
|
|
@@ -2367,9 +2370,9 @@ const iconColorValues = [
|
|
|
2367
2370
|
const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
|
|
2368
2371
|
(value) => value.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
2369
2372
|
);
|
|
2370
|
-
const styles$
|
|
2371
|
-
const styleSheet$
|
|
2372
|
-
styleSheet$
|
|
2373
|
+
const styles$E = ":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)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
|
|
2374
|
+
const styleSheet$x = new CSSStyleSheet();
|
|
2375
|
+
styleSheet$x.replaceSync(styles$E);
|
|
2373
2376
|
const observedAttributes = [
|
|
2374
2377
|
"name",
|
|
2375
2378
|
"size",
|
|
@@ -2382,7 +2385,7 @@ const observedAttributes = [
|
|
|
2382
2385
|
class Icon extends WithExtraAttributes {
|
|
2383
2386
|
constructor(...styleSheets) {
|
|
2384
2387
|
var _a;
|
|
2385
|
-
super(...styleSheets, styleSheet$
|
|
2388
|
+
super(...styleSheets, styleSheet$x);
|
|
2386
2389
|
__privateAdd(this, _src);
|
|
2387
2390
|
__privateAdd(this, _internals);
|
|
2388
2391
|
__privateAdd(this, _template, () => `<svg aria-hidden="true">
|
|
@@ -2583,10 +2586,10 @@ const _Container = class _Container extends PxElement {
|
|
|
2583
2586
|
)
|
|
2584
2587
|
);
|
|
2585
2588
|
this.template = () => `<div class="container">
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2589
|
+
<slot></slot>
|
|
2590
|
+
<slot name="anchor-left"></slot>
|
|
2591
|
+
<slot name="anchor-right"></slot>
|
|
2592
|
+
<slot name="anchor-full"></slot>
|
|
2590
2593
|
</div>`;
|
|
2591
2594
|
this._bgObserver = null;
|
|
2592
2595
|
this._isInViewport = false;
|
|
@@ -3430,9 +3433,9 @@ let H6 = _H6;
|
|
|
3430
3433
|
if (!customElements.get("px-h6")) {
|
|
3431
3434
|
customElements.define("px-h6", H6);
|
|
3432
3435
|
}
|
|
3433
|
-
const styles$
|
|
3434
|
-
const styleSheet$
|
|
3435
|
-
styleSheet$
|
|
3436
|
+
const styles$D = ':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)}}';
|
|
3437
|
+
const styleSheet$w = new CSSStyleSheet();
|
|
3438
|
+
styleSheet$w.replaceSync(styles$D);
|
|
3436
3439
|
class Section extends HTMLElement {
|
|
3437
3440
|
constructor() {
|
|
3438
3441
|
super();
|
|
@@ -3453,7 +3456,7 @@ class Section extends HTMLElement {
|
|
|
3453
3456
|
`;
|
|
3454
3457
|
this.attachShadow({ mode: "open" });
|
|
3455
3458
|
this.shadowRoot.innerHTML = this.template();
|
|
3456
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3459
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$w];
|
|
3457
3460
|
}
|
|
3458
3461
|
connectedCallback() {
|
|
3459
3462
|
const headingSlot = this.querySelector('[slot="heading"]');
|
|
@@ -3843,16 +3846,16 @@ if (!customElements.get("px-accordion")) {
|
|
|
3843
3846
|
customElements.define("px-accordion", Accordion);
|
|
3844
3847
|
}
|
|
3845
3848
|
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$
|
|
3849
|
+
const styleSheet$v = new CSSStyleSheet();
|
|
3850
|
+
styleSheet$v.replaceSync(imgCss);
|
|
3848
3851
|
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3849
3852
|
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3850
3853
|
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
3851
3854
|
const heightPrefix = "px-image";
|
|
3852
|
-
class
|
|
3855
|
+
const _AbstractImage = class _AbstractImage extends PxElement {
|
|
3853
3856
|
constructor() {
|
|
3854
3857
|
super(
|
|
3855
|
-
styleSheet$
|
|
3858
|
+
styleSheet$v,
|
|
3856
3859
|
cssTokenBreakpoints(
|
|
3857
3860
|
"height",
|
|
3858
3861
|
heightAttributeBreakpointCSSSelector,
|
|
@@ -4122,7 +4125,9 @@ class AbstractImage extends PxElement {
|
|
|
4122
4125
|
this.removeAttribute("cover");
|
|
4123
4126
|
}
|
|
4124
4127
|
}
|
|
4125
|
-
}
|
|
4128
|
+
};
|
|
4129
|
+
_AbstractImage.accessorExclusions = ["height", "width"];
|
|
4130
|
+
let AbstractImage = _AbstractImage;
|
|
4126
4131
|
const _Image = class _Image extends AbstractImage {
|
|
4127
4132
|
constructor() {
|
|
4128
4133
|
super();
|
|
@@ -4292,8 +4297,8 @@ let Picture = _Picture;
|
|
|
4292
4297
|
if (!customElements.get("px-picture")) {
|
|
4293
4298
|
customElements.define("px-picture", Picture);
|
|
4294
4299
|
}
|
|
4295
|
-
const styleSheet$
|
|
4296
|
-
styleSheet$
|
|
4300
|
+
const styleSheet$u = new CSSStyleSheet();
|
|
4301
|
+
styleSheet$u.replaceSync(styles$G);
|
|
4297
4302
|
const patchVariantValues = [
|
|
4298
4303
|
"",
|
|
4299
4304
|
"default",
|
|
@@ -4315,7 +4320,7 @@ class Patch extends HTMLElement {
|
|
|
4315
4320
|
super();
|
|
4316
4321
|
this.attachShadow({ mode: "open" });
|
|
4317
4322
|
this.shadowRoot.innerHTML = this.template();
|
|
4318
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4323
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$u];
|
|
4319
4324
|
}
|
|
4320
4325
|
static get observedAttributes() {
|
|
4321
4326
|
return ["variant", "shape", "inverted"];
|
|
@@ -4384,8 +4389,8 @@ if (!customElements.get("px-patch")) {
|
|
|
4384
4389
|
customElements.define("px-patch", Patch);
|
|
4385
4390
|
}
|
|
4386
4391
|
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$
|
|
4392
|
+
const styles$C = new CSSStyleSheet();
|
|
4393
|
+
styles$C.replaceSync(css$1);
|
|
4389
4394
|
const priceVariantValues = [
|
|
4390
4395
|
"default",
|
|
4391
4396
|
"promo",
|
|
@@ -4397,7 +4402,7 @@ const priceVariantValues = [
|
|
|
4397
4402
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
4398
4403
|
const _Price = class _Price extends PxElement {
|
|
4399
4404
|
constructor() {
|
|
4400
|
-
super(styles$
|
|
4405
|
+
super(styles$C);
|
|
4401
4406
|
this.template = () => `<span class="price"><slot></slot></span>`;
|
|
4402
4407
|
this.shadowRoot.innerHTML = this.template();
|
|
4403
4408
|
}
|
|
@@ -4484,11 +4489,11 @@ if (!customElements.get("px-price")) {
|
|
|
4484
4489
|
customElements.define("px-price", Price);
|
|
4485
4490
|
}
|
|
4486
4491
|
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$
|
|
4492
|
+
const styles$B = new CSSStyleSheet();
|
|
4493
|
+
styles$B.replaceSync(css);
|
|
4489
4494
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
4490
4495
|
constructor() {
|
|
4491
|
-
super(styles$
|
|
4496
|
+
super(styles$B);
|
|
4492
4497
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
4493
4498
|
this.shadowRoot.innerHTML = this.template();
|
|
4494
4499
|
}
|
|
@@ -4511,9 +4516,9 @@ let Ribbon = _Ribbon;
|
|
|
4511
4516
|
if (!customElements.get("px-ribbon")) {
|
|
4512
4517
|
customElements.define("px-ribbon", Ribbon);
|
|
4513
4518
|
}
|
|
4514
|
-
const styles$
|
|
4515
|
-
const styleSheet$
|
|
4516
|
-
styleSheet$
|
|
4519
|
+
const styles$A = ".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}}";
|
|
4520
|
+
const styleSheet$t = new CSSStyleSheet();
|
|
4521
|
+
styleSheet$t.replaceSync(styles$A);
|
|
4517
4522
|
const separatorDirectionValues = [
|
|
4518
4523
|
"",
|
|
4519
4524
|
"default",
|
|
@@ -4537,7 +4542,7 @@ const separatorColorValues = [
|
|
|
4537
4542
|
const _Separator = class _Separator extends PxElement {
|
|
4538
4543
|
constructor() {
|
|
4539
4544
|
var _a;
|
|
4540
|
-
super(styleSheet$
|
|
4545
|
+
super(styleSheet$t);
|
|
4541
4546
|
const $root = document.createElement(this.nativeName);
|
|
4542
4547
|
$root.classList.add("separator");
|
|
4543
4548
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
@@ -4856,8 +4861,8 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4856
4861
|
if (!customElements.get("px-button-icon")) {
|
|
4857
4862
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4858
4863
|
}
|
|
4859
|
-
const styleSheet$
|
|
4860
|
-
styleSheet$
|
|
4864
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
4865
|
+
styleSheet$s.replaceSync(styles$F);
|
|
4861
4866
|
const _Tag = class _Tag extends PxElement {
|
|
4862
4867
|
template() {
|
|
4863
4868
|
return `
|
|
@@ -4869,9 +4874,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
4869
4874
|
`;
|
|
4870
4875
|
}
|
|
4871
4876
|
constructor() {
|
|
4872
|
-
super(styleSheet$
|
|
4877
|
+
super(styleSheet$s);
|
|
4873
4878
|
this.shadowRoot.innerHTML = this.template();
|
|
4874
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4879
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$s];
|
|
4875
4880
|
}
|
|
4876
4881
|
connectedCallback() {
|
|
4877
4882
|
super.connectedCallback();
|
|
@@ -4929,9 +4934,9 @@ let Tag = _Tag;
|
|
|
4929
4934
|
if (!customElements.get("px-tag")) {
|
|
4930
4935
|
customElements.define("px-tag", Tag);
|
|
4931
4936
|
}
|
|
4932
|
-
const styles$
|
|
4933
|
-
const styleSheet$
|
|
4934
|
-
styleSheet$
|
|
4937
|
+
const styles$z = '*{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))}}';
|
|
4938
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
4939
|
+
styleSheet$r.replaceSync(styles$z);
|
|
4935
4940
|
class Tabs extends HTMLElement {
|
|
4936
4941
|
constructor() {
|
|
4937
4942
|
var _a;
|
|
@@ -4961,7 +4966,7 @@ class Tabs extends HTMLElement {
|
|
|
4961
4966
|
this._label = this.getAttribute("label");
|
|
4962
4967
|
}
|
|
4963
4968
|
this.shadowRoot.innerHTML = this.template();
|
|
4964
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4969
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$r];
|
|
4965
4970
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4966
4971
|
if (this.internals) {
|
|
4967
4972
|
this.internals.role = "tablist";
|
|
@@ -5136,9 +5141,9 @@ class Tabs extends HTMLElement {
|
|
|
5136
5141
|
return this.getAttribute("aria-label-previous");
|
|
5137
5142
|
}
|
|
5138
5143
|
}
|
|
5139
|
-
const styles$
|
|
5140
|
-
const styleSheet$
|
|
5141
|
-
styleSheet$
|
|
5144
|
+
const styles$y = "*{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)}}";
|
|
5145
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
5146
|
+
styleSheet$q.replaceSync(styles$y);
|
|
5142
5147
|
class Tab extends HTMLElement {
|
|
5143
5148
|
constructor() {
|
|
5144
5149
|
var _a;
|
|
@@ -5150,7 +5155,7 @@ class Tab extends HTMLElement {
|
|
|
5150
5155
|
`;
|
|
5151
5156
|
this.attachShadow({ mode: "open" });
|
|
5152
5157
|
this.shadowRoot.innerHTML = this.template();
|
|
5153
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5158
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$q];
|
|
5154
5159
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
5155
5160
|
if (this.internals) {
|
|
5156
5161
|
this.internals.role = "tab";
|
|
@@ -5237,7 +5242,7 @@ class TabPanel extends HTMLElement {
|
|
|
5237
5242
|
`;
|
|
5238
5243
|
this.attachShadow({ mode: "open" });
|
|
5239
5244
|
this.shadowRoot.innerHTML = this.template();
|
|
5240
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5245
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$r];
|
|
5241
5246
|
}
|
|
5242
5247
|
static get observedAttributes() {
|
|
5243
5248
|
return ["name"];
|
|
@@ -5316,9 +5321,9 @@ class PxTabPanel extends TabPanel {
|
|
|
5316
5321
|
if (!customElements.get("px-tab-panel")) {
|
|
5317
5322
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
5318
5323
|
}
|
|
5319
|
-
const styles$
|
|
5320
|
-
const styleSheet$
|
|
5321
|
-
styleSheet$
|
|
5324
|
+
const styles$x = ".timeline{list-style:none;margin:0;padding:0}";
|
|
5325
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
5326
|
+
styleSheet$p.replaceSync(styles$x);
|
|
5322
5327
|
class Timeline extends HTMLElement {
|
|
5323
5328
|
template() {
|
|
5324
5329
|
return `
|
|
@@ -5331,7 +5336,7 @@ class Timeline extends HTMLElement {
|
|
|
5331
5336
|
super();
|
|
5332
5337
|
this.attachShadow({ mode: "open" });
|
|
5333
5338
|
this.shadowRoot.innerHTML = this.template();
|
|
5334
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5339
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
5335
5340
|
}
|
|
5336
5341
|
static get observedAttributes() {
|
|
5337
5342
|
return ["inverted"];
|
|
@@ -5375,9 +5380,9 @@ class Timeline extends HTMLElement {
|
|
|
5375
5380
|
if (!customElements.get("px-timeline")) {
|
|
5376
5381
|
customElements.define("px-timeline", Timeline);
|
|
5377
5382
|
}
|
|
5378
|
-
const styles$
|
|
5379
|
-
const styleSheet$
|
|
5380
|
-
styleSheet$
|
|
5383
|
+
const styles$w = '.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)}}';
|
|
5384
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
5385
|
+
styleSheet$o.replaceSync(styles$w);
|
|
5381
5386
|
let item = "1";
|
|
5382
5387
|
class TimelineItem extends HTMLElement {
|
|
5383
5388
|
template() {
|
|
@@ -5397,7 +5402,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5397
5402
|
super();
|
|
5398
5403
|
this.attachShadow({ mode: "open" });
|
|
5399
5404
|
this.shadowRoot.innerHTML = this.template();
|
|
5400
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5405
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
|
|
5401
5406
|
}
|
|
5402
5407
|
static get observedAttributes() {
|
|
5403
5408
|
return ["inverted", "lastchild", "item"];
|
|
@@ -5617,9 +5622,9 @@ let Paragraph = _Paragraph;
|
|
|
5617
5622
|
if (!customElements.get("px-p")) {
|
|
5618
5623
|
customElements.define("px-p", Paragraph);
|
|
5619
5624
|
}
|
|
5620
|
-
const styles$
|
|
5621
|
-
const styleSheet$
|
|
5622
|
-
styleSheet$
|
|
5625
|
+
const styles$v = "#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}}";
|
|
5626
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
5627
|
+
styleSheet$n.replaceSync(styles$v);
|
|
5623
5628
|
const CLOSE_EVENT$1 = "px.lavender.modal.close";
|
|
5624
5629
|
class Modal extends HTMLElement {
|
|
5625
5630
|
constructor() {
|
|
@@ -5659,7 +5664,7 @@ class Modal extends HTMLElement {
|
|
|
5659
5664
|
</dialog>`;
|
|
5660
5665
|
this.attachShadow({ mode: "open" });
|
|
5661
5666
|
this.shadowRoot.innerHTML = this.template;
|
|
5662
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5667
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n];
|
|
5663
5668
|
}
|
|
5664
5669
|
connectedCallback() {
|
|
5665
5670
|
if (this.hasAttribute("open")) {
|
|
@@ -6210,10 +6215,10 @@ class Typography extends HTMLElement {
|
|
|
6210
6215
|
if (!customElements.get("px-typography")) {
|
|
6211
6216
|
customElements.define("px-typography", Typography);
|
|
6212
6217
|
}
|
|
6213
|
-
const styles$
|
|
6214
|
-
const styleSheet$
|
|
6218
|
+
const styles$u = ".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)}}";
|
|
6219
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
6215
6220
|
const typographyStyles = new CSSStyleSheet();
|
|
6216
|
-
styleSheet$
|
|
6221
|
+
styleSheet$m.replaceSync(styles$u);
|
|
6217
6222
|
typographyStyles.replaceSync(typographyCss$1);
|
|
6218
6223
|
class Spinner extends HTMLElement {
|
|
6219
6224
|
template() {
|
|
@@ -6229,7 +6234,7 @@ class Spinner extends HTMLElement {
|
|
|
6229
6234
|
this.attachShadow({ mode: "open" });
|
|
6230
6235
|
this.shadowRoot.innerHTML = this.template();
|
|
6231
6236
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
6232
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
6237
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$m, typographyStyles];
|
|
6233
6238
|
}
|
|
6234
6239
|
static get observedAttributes() {
|
|
6235
6240
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -6395,11 +6400,11 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6395
6400
|
}
|
|
6396
6401
|
}
|
|
6397
6402
|
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$
|
|
6403
|
+
const styles$t = ':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
6404
|
const commonStyleSheet$b = new CSSStyleSheet();
|
|
6400
|
-
const styleSheet$
|
|
6405
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
6401
6406
|
commonStyleSheet$b.replaceSync(common$1);
|
|
6402
|
-
styleSheet$
|
|
6407
|
+
styleSheet$l.replaceSync(styles$t);
|
|
6403
6408
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
6404
6409
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
6405
6410
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -6424,7 +6429,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6424
6429
|
`;
|
|
6425
6430
|
}
|
|
6426
6431
|
constructor() {
|
|
6427
|
-
super(styleSheet$
|
|
6432
|
+
super(styleSheet$l, commonStyleSheet$b);
|
|
6428
6433
|
const $root = document.createElement(this.nativeName);
|
|
6429
6434
|
$root.classList.add("cell");
|
|
6430
6435
|
$root.innerHTML = this.template();
|
|
@@ -6706,11 +6711,11 @@ let Cell = _Cell;
|
|
|
6706
6711
|
if (!customElements.get("px-cell")) {
|
|
6707
6712
|
customElements.define("px-cell", Cell);
|
|
6708
6713
|
}
|
|
6709
|
-
const styles$
|
|
6714
|
+
const styles$s = '.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
6715
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6711
6716
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6712
|
-
const styleSheet$
|
|
6713
|
-
styleSheet$
|
|
6717
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
6718
|
+
styleSheet$k.replaceSync(styles$s);
|
|
6714
6719
|
const _CellLink = class _CellLink extends PxElement {
|
|
6715
6720
|
template() {
|
|
6716
6721
|
return `
|
|
@@ -6730,7 +6735,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6730
6735
|
`;
|
|
6731
6736
|
}
|
|
6732
6737
|
constructor() {
|
|
6733
|
-
super(styleSheet$
|
|
6738
|
+
super(styleSheet$k, commonStyleSheet$a);
|
|
6734
6739
|
const $root = document.createElement(this.nativeName);
|
|
6735
6740
|
$root.classList.add("cell-link");
|
|
6736
6741
|
$root.innerHTML = this.template();
|
|
@@ -6952,11 +6957,11 @@ let CellLink = _CellLink;
|
|
|
6952
6957
|
if (!customElements.get("px-cell-link")) {
|
|
6953
6958
|
customElements.define("px-cell-link", CellLink);
|
|
6954
6959
|
}
|
|
6955
|
-
const styles$
|
|
6960
|
+
const styles$r = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}";
|
|
6956
6961
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6957
6962
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6958
|
-
const styleSheet$
|
|
6959
|
-
styleSheet$
|
|
6963
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
6964
|
+
styleSheet$j.replaceSync(styles$r);
|
|
6960
6965
|
const _CellButton = class _CellButton extends PxElement {
|
|
6961
6966
|
template() {
|
|
6962
6967
|
return `
|
|
@@ -6969,7 +6974,7 @@ const _CellButton = class _CellButton extends PxElement {
|
|
|
6969
6974
|
`;
|
|
6970
6975
|
}
|
|
6971
6976
|
constructor() {
|
|
6972
|
-
super(styleSheet$
|
|
6977
|
+
super(styleSheet$j, commonStyleSheet$9);
|
|
6973
6978
|
const $root = document.createElement(this.nativeName);
|
|
6974
6979
|
$root.classList.add("cell-button");
|
|
6975
6980
|
$root.innerHTML = this.template();
|
|
@@ -8190,11 +8195,12 @@ const _RadioBase = class _RadioBase extends PxElement {
|
|
|
8190
8195
|
}
|
|
8191
8196
|
};
|
|
8192
8197
|
_RadioBase.nativeName = "input";
|
|
8198
|
+
_RadioBase.accessorExclusions = ["checked"];
|
|
8193
8199
|
let RadioBase = _RadioBase;
|
|
8194
8200
|
if (!customElements.get("px-radio-base")) {
|
|
8195
8201
|
customElements.define("px-radio-base", RadioBase);
|
|
8196
8202
|
}
|
|
8197
|
-
|
|
8203
|
+
class Radio extends RadioBase {
|
|
8198
8204
|
constructor() {
|
|
8199
8205
|
var _a, _b;
|
|
8200
8206
|
super();
|
|
@@ -8209,6 +8215,7 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
8209
8215
|
return [...super.observedAttributes, "state", "variant", "inverted"];
|
|
8210
8216
|
}
|
|
8211
8217
|
connectedCallback() {
|
|
8218
|
+
super.connectedCallback();
|
|
8212
8219
|
this.addEventListener("keypress", (e) => {
|
|
8213
8220
|
e.stopPropagation();
|
|
8214
8221
|
e.preventDefault();
|
|
@@ -8226,9 +8233,6 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
8226
8233
|
e.preventDefault();
|
|
8227
8234
|
});
|
|
8228
8235
|
this.setupForId();
|
|
8229
|
-
if (this.hasAttribute("checked")) {
|
|
8230
|
-
this.checked = true;
|
|
8231
|
-
}
|
|
8232
8236
|
if (this.$iconSlot) {
|
|
8233
8237
|
this.$iconSlot.setAttribute("size", "xs");
|
|
8234
8238
|
this.$iconSlot.setAttribute("color", "inherit");
|
|
@@ -8303,10 +8307,8 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
8303
8307
|
if (this.internals) {
|
|
8304
8308
|
this.internals.ariaChecked = "true";
|
|
8305
8309
|
}
|
|
8306
|
-
this.setAttribute("checked", "");
|
|
8307
8310
|
} else {
|
|
8308
8311
|
this.tabIndex = -1;
|
|
8309
|
-
this.removeAttribute("checked");
|
|
8310
8312
|
if (this.internals) {
|
|
8311
8313
|
this.internals.ariaChecked = "false";
|
|
8312
8314
|
}
|
|
@@ -8386,9 +8388,7 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
8386
8388
|
get $iconSlot() {
|
|
8387
8389
|
return this.querySelector('px-icon[slot="before"]');
|
|
8388
8390
|
}
|
|
8389
|
-
}
|
|
8390
|
-
_Radio.nativeName = "input";
|
|
8391
|
-
let Radio = _Radio;
|
|
8391
|
+
}
|
|
8392
8392
|
if (!customElements.get("px-radio")) {
|
|
8393
8393
|
customElements.define("px-radio", Radio);
|
|
8394
8394
|
}
|
|
@@ -8428,7 +8428,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
8428
8428
|
};
|
|
8429
8429
|
this.handleRadioChange = (event) => {
|
|
8430
8430
|
const target = event.target;
|
|
8431
|
-
if (target.localName === "px-tile-radio" || target.localName === "px-radio" || target.localName === "px-cell-radio") {
|
|
8431
|
+
if (target.localName === "px-tile-radio" || target.localName === "px-radio" || target.localName === "px-cell-radio" || target.localName === "px-selectable-box-radio") {
|
|
8432
8432
|
this.currentCheckedRadio = target;
|
|
8433
8433
|
const name = target.getAttribute("name");
|
|
8434
8434
|
if (name && this.currentCheckedRadio.checked) {
|
|
@@ -8531,10 +8531,10 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
8531
8531
|
}
|
|
8532
8532
|
uncheckOtherRadios(name) {
|
|
8533
8533
|
const radios = this.querySelectorAll(
|
|
8534
|
-
`px-radio[name="${name}"], px-tile-radio[name="${name}"], px-cell-radio[name="${name}"]`
|
|
8534
|
+
`px-radio[name="${name}"], px-tile-radio[name="${name}"], px-cell-radio[name="${name}"], px-selectable-box-radio[name="${name}"]`
|
|
8535
8535
|
);
|
|
8536
8536
|
radios.forEach((radio) => {
|
|
8537
|
-
if (radio !== this.currentCheckedRadio) {
|
|
8537
|
+
if (radio !== this.currentCheckedRadio && radio.shadowRoot) {
|
|
8538
8538
|
radio.checked = false;
|
|
8539
8539
|
}
|
|
8540
8540
|
});
|
|
@@ -8617,7 +8617,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
8617
8617
|
}
|
|
8618
8618
|
get $radioList() {
|
|
8619
8619
|
return this.querySelectorAll(
|
|
8620
|
-
"px-radio, px-tile-radio, px-cell-radio"
|
|
8620
|
+
"px-radio, px-tile-radio, px-cell-radio, px-selectable-box-radio"
|
|
8621
8621
|
);
|
|
8622
8622
|
}
|
|
8623
8623
|
get gap() {
|
|
@@ -9135,10 +9135,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
9135
9135
|
}
|
|
9136
9136
|
}
|
|
9137
9137
|
}
|
|
9138
|
-
const styles$
|
|
9138
|
+
const styles$q = '.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$i = new CSSStyleSheet();
|
|
9141
|
+
styleSheet$i.replaceSync(styles$q);
|
|
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$i);
|
|
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$p = ".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$h = new CSSStyleSheet();
|
|
9319
|
+
styleSheet$h.replaceSync(styles$p);
|
|
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$h);
|
|
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$o = ".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$g = new CSSStyleSheet();
|
|
10003
|
+
styleSheet$g.replaceSync(styles$o);
|
|
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$g);
|
|
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$n = "#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$n);
|
|
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$m = '#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{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%}#content{max-height:calc(100dvh - 22.625em)}}@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{min-height:2.813em;max-height:50dvh}}@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$f = new CSSStyleSheet();
|
|
10504
|
+
styleSheet$f.replaceSync(styles$m);
|
|
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$f];
|
|
10543
10543
|
if (!this.hasAttribute("showfrom")) {
|
|
10544
10544
|
this.setAttribute("showfrom", "bottom");
|
|
10545
10545
|
}
|
|
@@ -10564,6 +10564,9 @@ class Drawer extends HTMLElement {
|
|
|
10564
10564
|
this.$closeButton.addEventListener("click", () => {
|
|
10565
10565
|
this.hide();
|
|
10566
10566
|
});
|
|
10567
|
+
if (this.$buttons.length === 0) {
|
|
10568
|
+
this.$separator.remove();
|
|
10569
|
+
}
|
|
10567
10570
|
}
|
|
10568
10571
|
static get observedAttributes() {
|
|
10569
10572
|
return ["open", "aria-label-close-button"];
|
|
@@ -10611,6 +10614,12 @@ class Drawer extends HTMLElement {
|
|
|
10611
10614
|
get open() {
|
|
10612
10615
|
return this.hasAttribute("open");
|
|
10613
10616
|
}
|
|
10617
|
+
get $buttons() {
|
|
10618
|
+
return this.querySelectorAll('[slot="footer"]');
|
|
10619
|
+
}
|
|
10620
|
+
get $separator() {
|
|
10621
|
+
return this.shadowRoot.querySelector("px-separator");
|
|
10622
|
+
}
|
|
10614
10623
|
set open(value) {
|
|
10615
10624
|
if (value) {
|
|
10616
10625
|
this.setAttribute("open", "");
|
|
@@ -10628,11 +10637,11 @@ class Drawer extends HTMLElement {
|
|
|
10628
10637
|
if (!customElements.get("px-drawer")) {
|
|
10629
10638
|
customElements.define("px-drawer", Drawer);
|
|
10630
10639
|
}
|
|
10631
|
-
const styles$
|
|
10640
|
+
const styles$l = ":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
10641
|
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$
|
|
10642
|
+
const styles$k = ":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)}";
|
|
10643
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
10644
|
+
styleSheet$e.replaceSync(styles$k);
|
|
10636
10645
|
class AppleSeed extends HTMLElement {
|
|
10637
10646
|
constructor() {
|
|
10638
10647
|
super();
|
|
@@ -10647,7 +10656,7 @@ class AppleSeed extends HTMLElement {
|
|
|
10647
10656
|
</div>`;
|
|
10648
10657
|
};
|
|
10649
10658
|
this.attachShadow({ mode: "open" });
|
|
10650
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10659
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$e];
|
|
10651
10660
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
10652
10661
|
}
|
|
10653
10662
|
static get observedAttributes() {
|
|
@@ -10874,8 +10883,8 @@ function throttle(func, wait, options) {
|
|
|
10874
10883
|
"trailing": trailing
|
|
10875
10884
|
});
|
|
10876
10885
|
}
|
|
10877
|
-
const styleSheet$
|
|
10878
|
-
styleSheet$
|
|
10886
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
10887
|
+
styleSheet$d.replaceSync(styles$l);
|
|
10879
10888
|
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10880
10889
|
const prefix = "px-spacing";
|
|
10881
10890
|
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 +10949,7 @@ class Carousel extends HTMLElement {
|
|
|
10940
10949
|
this.attachShadow({ mode: "open" });
|
|
10941
10950
|
this.shadowRoot.innerHTML = this.template;
|
|
10942
10951
|
this.shadowRoot.adoptedStyleSheets = [
|
|
10943
|
-
styleSheet$
|
|
10952
|
+
styleSheet$d,
|
|
10944
10953
|
cssTokenBreakpoints(
|
|
10945
10954
|
"gap",
|
|
10946
10955
|
attributeBreakpointCSSSelector$1,
|
|
@@ -11051,7 +11060,7 @@ class CarouselItem extends HTMLElement {
|
|
|
11051
11060
|
</div>`;
|
|
11052
11061
|
this.attachShadow({ mode: "open" });
|
|
11053
11062
|
this.shadowRoot.innerHTML = this.template;
|
|
11054
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11063
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$d, itemStyleSheet];
|
|
11055
11064
|
}
|
|
11056
11065
|
}
|
|
11057
11066
|
if (!customElements.get("px-carousel-item")) {
|
|
@@ -11425,9 +11434,9 @@ let Fieldset = _Fieldset;
|
|
|
11425
11434
|
if (!customElements.get("px-fieldset")) {
|
|
11426
11435
|
customElements.define("px-fieldset", Fieldset);
|
|
11427
11436
|
}
|
|
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%}}`;
|
|
11437
|
+
const styles$j = `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
11438
|
const stylesheet$7 = new CSSStyleSheet();
|
|
11430
|
-
stylesheet$7.replaceSync(styles$
|
|
11439
|
+
stylesheet$7.replaceSync(styles$j);
|
|
11431
11440
|
class AbstractInputElement extends PxElement {
|
|
11432
11441
|
constructor() {
|
|
11433
11442
|
var _a;
|
|
@@ -11505,10 +11514,13 @@ class AbstractInputElement extends PxElement {
|
|
|
11505
11514
|
}
|
|
11506
11515
|
connectedCallback() {
|
|
11507
11516
|
super.connectedCallback();
|
|
11508
|
-
["change"
|
|
11517
|
+
["change"].forEach((event) => {
|
|
11509
11518
|
this.$el.addEventListener(event, () => {
|
|
11510
11519
|
var _a;
|
|
11511
11520
|
(_a = this.internals) == null ? void 0 : _a.setFormValue(this.formData());
|
|
11521
|
+
this.dispatchEvent(
|
|
11522
|
+
new CustomEvent(event, { bubbles: true, composed: true })
|
|
11523
|
+
);
|
|
11512
11524
|
});
|
|
11513
11525
|
});
|
|
11514
11526
|
this.setupForId();
|
|
@@ -11705,11 +11717,11 @@ const _Select = class _Select extends AbstractInputElement {
|
|
|
11705
11717
|
$options.forEach(($option) => {
|
|
11706
11718
|
this.$el.appendChild($option);
|
|
11707
11719
|
});
|
|
11708
|
-
this.observer = new MutationObserver(() => {
|
|
11709
|
-
this.$el.innerHTML = this.innerHTML;
|
|
11710
|
-
});
|
|
11711
|
-
this.observer.observe(this, { childList: true });
|
|
11712
11720
|
}
|
|
11721
|
+
this.observer = new MutationObserver(() => {
|
|
11722
|
+
this.$el.innerHTML = this.innerHTML;
|
|
11723
|
+
});
|
|
11724
|
+
this.observer.observe(this, { childList: true });
|
|
11713
11725
|
}
|
|
11714
11726
|
disconnectedCallback() {
|
|
11715
11727
|
this.observer.disconnect();
|
|
@@ -11890,9 +11902,9 @@ let Switch = _Switch;
|
|
|
11890
11902
|
if (!customElements.get("px-switch")) {
|
|
11891
11903
|
customElements.define("px-switch", Switch);
|
|
11892
11904
|
}
|
|
11893
|
-
const styles$
|
|
11894
|
-
const styleSheet$
|
|
11895
|
-
styleSheet$
|
|
11905
|
+
const styles$i = ":host{display:table;width:100%}";
|
|
11906
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
11907
|
+
styleSheet$c.replaceSync(styles$i);
|
|
11896
11908
|
class Table extends HTMLElement {
|
|
11897
11909
|
constructor() {
|
|
11898
11910
|
super();
|
|
@@ -11901,7 +11913,7 @@ class Table extends HTMLElement {
|
|
|
11901
11913
|
`;
|
|
11902
11914
|
this.attachShadow({ mode: "open" });
|
|
11903
11915
|
this.shadowRoot.innerHTML = this.template();
|
|
11904
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11916
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$c];
|
|
11905
11917
|
}
|
|
11906
11918
|
connectedCallback() {
|
|
11907
11919
|
this.style.display = "table";
|
|
@@ -11911,9 +11923,9 @@ class Table extends HTMLElement {
|
|
|
11911
11923
|
if (!customElements.get("px-table")) {
|
|
11912
11924
|
customElements.define("px-table", Table);
|
|
11913
11925
|
}
|
|
11914
|
-
const styles$
|
|
11915
|
-
const styleSheet$
|
|
11916
|
-
styleSheet$
|
|
11926
|
+
const styles$h = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
11927
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
11928
|
+
styleSheet$b.replaceSync(styles$h);
|
|
11917
11929
|
class Thead extends HTMLElement {
|
|
11918
11930
|
constructor() {
|
|
11919
11931
|
super();
|
|
@@ -11922,7 +11934,7 @@ class Thead extends HTMLElement {
|
|
|
11922
11934
|
`;
|
|
11923
11935
|
this.attachShadow({ mode: "open" });
|
|
11924
11936
|
this.shadowRoot.innerHTML = this.template();
|
|
11925
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11937
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$b];
|
|
11926
11938
|
}
|
|
11927
11939
|
connectedCallback() {
|
|
11928
11940
|
this.style.display = "table-header-group";
|
|
@@ -11932,9 +11944,9 @@ class Thead extends HTMLElement {
|
|
|
11932
11944
|
if (!customElements.get("px-thead")) {
|
|
11933
11945
|
customElements.define("px-thead", Thead);
|
|
11934
11946
|
}
|
|
11935
|
-
const styles$
|
|
11936
|
-
const styleSheet$
|
|
11937
|
-
styleSheet$
|
|
11947
|
+
const styles$g = ":host{display:table-row}";
|
|
11948
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
11949
|
+
styleSheet$a.replaceSync(styles$g);
|
|
11938
11950
|
class Tr extends HTMLElement {
|
|
11939
11951
|
constructor() {
|
|
11940
11952
|
super();
|
|
@@ -11943,7 +11955,7 @@ class Tr extends HTMLElement {
|
|
|
11943
11955
|
`;
|
|
11944
11956
|
this.attachShadow({ mode: "open" });
|
|
11945
11957
|
this.shadowRoot.innerHTML = this.template();
|
|
11946
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11958
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$a];
|
|
11947
11959
|
}
|
|
11948
11960
|
connectedCallback() {
|
|
11949
11961
|
this.style.display = "table-row";
|
|
@@ -11953,9 +11965,9 @@ class Tr extends HTMLElement {
|
|
|
11953
11965
|
if (!customElements.get("px-tr")) {
|
|
11954
11966
|
customElements.define("px-tr", Tr);
|
|
11955
11967
|
}
|
|
11956
|
-
const styles$
|
|
11957
|
-
const styleSheet$
|
|
11958
|
-
styleSheet$
|
|
11968
|
+
const styles$f = ':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)}}';
|
|
11969
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
11970
|
+
styleSheet$9.replaceSync(styles$f);
|
|
11959
11971
|
class Th extends HTMLElement {
|
|
11960
11972
|
constructor() {
|
|
11961
11973
|
super();
|
|
@@ -11972,7 +11984,7 @@ class Th extends HTMLElement {
|
|
|
11972
11984
|
`;
|
|
11973
11985
|
this.attachShadow({ mode: "open" });
|
|
11974
11986
|
this.shadowRoot.innerHTML = this.template();
|
|
11975
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11987
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
11976
11988
|
}
|
|
11977
11989
|
connectedCallback() {
|
|
11978
11990
|
this.style.display = "table-cell";
|
|
@@ -11989,9 +12001,9 @@ class Th extends HTMLElement {
|
|
|
11989
12001
|
if (!customElements.get("px-th")) {
|
|
11990
12002
|
customElements.define("px-th", Th);
|
|
11991
12003
|
}
|
|
11992
|
-
const styles$
|
|
11993
|
-
const styleSheet$
|
|
11994
|
-
styleSheet$
|
|
12004
|
+
const styles$e = ":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)}";
|
|
12005
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
12006
|
+
styleSheet$8.replaceSync(styles$e);
|
|
11995
12007
|
class Tbody extends HTMLElement {
|
|
11996
12008
|
constructor() {
|
|
11997
12009
|
super();
|
|
@@ -12000,7 +12012,7 @@ class Tbody extends HTMLElement {
|
|
|
12000
12012
|
`;
|
|
12001
12013
|
this.attachShadow({ mode: "open" });
|
|
12002
12014
|
this.shadowRoot.innerHTML = this.template();
|
|
12003
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
12015
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
12004
12016
|
}
|
|
12005
12017
|
connectedCallback() {
|
|
12006
12018
|
this.style.display = "table-row-group";
|
|
@@ -12010,9 +12022,9 @@ class Tbody extends HTMLElement {
|
|
|
12010
12022
|
if (!customElements.get("px-tbody")) {
|
|
12011
12023
|
customElements.define("px-tbody", Tbody);
|
|
12012
12024
|
}
|
|
12013
|
-
const styles$
|
|
12014
|
-
const styleSheet$
|
|
12015
|
-
styleSheet$
|
|
12025
|
+
const styles$d = ':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)}}';
|
|
12026
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
12027
|
+
styleSheet$7.replaceSync(styles$d);
|
|
12016
12028
|
class Td extends HTMLElement {
|
|
12017
12029
|
constructor() {
|
|
12018
12030
|
super();
|
|
@@ -12032,7 +12044,7 @@ class Td extends HTMLElement {
|
|
|
12032
12044
|
`;
|
|
12033
12045
|
this.attachShadow({ mode: "open" });
|
|
12034
12046
|
this.shadowRoot.innerHTML = this.template();
|
|
12035
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
12047
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
|
|
12036
12048
|
}
|
|
12037
12049
|
connectedCallback() {
|
|
12038
12050
|
this.style.display = "table-cell";
|
|
@@ -12054,9 +12066,9 @@ class Td extends HTMLElement {
|
|
|
12054
12066
|
if (!customElements.get("px-td")) {
|
|
12055
12067
|
customElements.define("px-td", Td);
|
|
12056
12068
|
}
|
|
12057
|
-
const styles$
|
|
12069
|
+
const styles$c = ":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
12070
|
const stylesheet$6 = new CSSStyleSheet();
|
|
12059
|
-
stylesheet$6.replaceSync(styles$
|
|
12071
|
+
stylesheet$6.replaceSync(styles$c);
|
|
12060
12072
|
class HeaderItem extends WithExtraAttributes {
|
|
12061
12073
|
constructor() {
|
|
12062
12074
|
var _a;
|
|
@@ -12159,9 +12171,9 @@ class MDDLink extends HTMLElement {
|
|
|
12159
12171
|
if (!customElements.get("px-mdd-a")) {
|
|
12160
12172
|
customElements.define("px-mdd-a", MDDLink);
|
|
12161
12173
|
}
|
|
12162
|
-
const styles$
|
|
12174
|
+
const styles$b = "#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
12175
|
const stylesheet$5 = new CSSStyleSheet();
|
|
12164
|
-
stylesheet$5.replaceSync(styles$
|
|
12176
|
+
stylesheet$5.replaceSync(styles$b);
|
|
12165
12177
|
const menuAriaLabel = "Menu";
|
|
12166
12178
|
class Header extends WithExtraAttributes {
|
|
12167
12179
|
constructor() {
|
|
@@ -12449,15 +12461,15 @@ $megaDropdowns_get = function() {
|
|
|
12449
12461
|
if (!customElements.get("px-header")) {
|
|
12450
12462
|
customElements.define("px-header", Header);
|
|
12451
12463
|
}
|
|
12452
|
-
const styles$
|
|
12464
|
+
const styles$a = ':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
12465
|
const anchorAlignmentValues = [
|
|
12454
12466
|
"top-left",
|
|
12455
12467
|
"top-right",
|
|
12456
12468
|
"bottom-left",
|
|
12457
12469
|
"bottom-right"
|
|
12458
12470
|
];
|
|
12459
|
-
function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle) {
|
|
12460
|
-
if ("anchorName" in document.documentElement.style) {
|
|
12471
|
+
function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle, usePolyfill = false) {
|
|
12472
|
+
if ("anchorName" in document.documentElement.style && usePolyfill === false) {
|
|
12461
12473
|
return;
|
|
12462
12474
|
}
|
|
12463
12475
|
$popoverElement.addEventListener("toggle", () => {
|
|
@@ -12491,7 +12503,7 @@ function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-lef
|
|
|
12491
12503
|
});
|
|
12492
12504
|
}
|
|
12493
12505
|
const stylesheet$4 = new CSSStyleSheet();
|
|
12494
|
-
stylesheet$4.replaceSync(styles$
|
|
12506
|
+
stylesheet$4.replaceSync(styles$a);
|
|
12495
12507
|
const defaultAnchorAlignment = "bottom-left";
|
|
12496
12508
|
class Dropdown extends WithExtraAttributes {
|
|
12497
12509
|
constructor() {
|
|
@@ -12565,7 +12577,12 @@ class Dropdown extends WithExtraAttributes {
|
|
|
12565
12577
|
}`;
|
|
12566
12578
|
}
|
|
12567
12579
|
static get observedAttributes() {
|
|
12568
|
-
return [
|
|
12580
|
+
return [
|
|
12581
|
+
...super.observedAttributes,
|
|
12582
|
+
"id",
|
|
12583
|
+
"anchoralignment",
|
|
12584
|
+
"use-polyfill"
|
|
12585
|
+
];
|
|
12569
12586
|
}
|
|
12570
12587
|
connectedCallback() {
|
|
12571
12588
|
if (!this.getAttribute("id")) {
|
|
@@ -12581,19 +12598,29 @@ class Dropdown extends WithExtraAttributes {
|
|
|
12581
12598
|
this.$trigger,
|
|
12582
12599
|
this.$popoverElement,
|
|
12583
12600
|
this.anchorAlignment,
|
|
12584
|
-
getComputedStyle(this)
|
|
12601
|
+
getComputedStyle(this),
|
|
12602
|
+
this.usePolyfill
|
|
12585
12603
|
);
|
|
12586
12604
|
}
|
|
12587
12605
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
12588
|
-
|
|
12589
|
-
|
|
12590
|
-
|
|
12606
|
+
if (oldValue !== newValue) {
|
|
12607
|
+
switch (name) {
|
|
12608
|
+
case "id":
|
|
12591
12609
|
this.initPopover();
|
|
12592
|
-
|
|
12593
|
-
|
|
12594
|
-
|
|
12595
|
-
|
|
12596
|
-
|
|
12610
|
+
break;
|
|
12611
|
+
case "use-polyfill":
|
|
12612
|
+
anchorPolyfill(
|
|
12613
|
+
this.$trigger,
|
|
12614
|
+
this.$popoverElement,
|
|
12615
|
+
this.anchorAlignment,
|
|
12616
|
+
getComputedStyle(this),
|
|
12617
|
+
this.usePolyfill
|
|
12618
|
+
);
|
|
12619
|
+
break;
|
|
12620
|
+
default:
|
|
12621
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
12622
|
+
break;
|
|
12623
|
+
}
|
|
12597
12624
|
}
|
|
12598
12625
|
}
|
|
12599
12626
|
initPopover() {
|
|
@@ -12636,6 +12663,16 @@ class Dropdown extends WithExtraAttributes {
|
|
|
12636
12663
|
this.setAttribute("anchoralignment", defaultAnchorAlignment);
|
|
12637
12664
|
}
|
|
12638
12665
|
}
|
|
12666
|
+
get usePolyfill() {
|
|
12667
|
+
return this.hasAttribute("use-polyfill");
|
|
12668
|
+
}
|
|
12669
|
+
set usePolyfill(value) {
|
|
12670
|
+
if (value) {
|
|
12671
|
+
this.setAttribute("use-polyfill", "");
|
|
12672
|
+
} else {
|
|
12673
|
+
this.removeAttribute("use-polyfill");
|
|
12674
|
+
}
|
|
12675
|
+
}
|
|
12639
12676
|
}
|
|
12640
12677
|
_Dropdown_instances = new WeakSet();
|
|
12641
12678
|
resetManualPopoverDisplay_fn = function() {
|
|
@@ -12775,9 +12812,9 @@ class MDDCloser extends HTMLElement {
|
|
|
12775
12812
|
if (!customElements.get("px-mdd-closer")) {
|
|
12776
12813
|
customElements.define("px-mdd-closer", MDDCloser);
|
|
12777
12814
|
}
|
|
12778
|
-
const styles$
|
|
12815
|
+
const styles$9 = ":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
12816
|
const stylesheet$2 = new CSSStyleSheet();
|
|
12780
|
-
stylesheet$2.replaceSync(styles$
|
|
12817
|
+
stylesheet$2.replaceSync(styles$9);
|
|
12781
12818
|
class MegaDropDown extends HTMLElement {
|
|
12782
12819
|
constructor() {
|
|
12783
12820
|
var _a;
|
|
@@ -12803,9 +12840,8 @@ class MegaDropDown extends HTMLElement {
|
|
|
12803
12840
|
<px-button-icon
|
|
12804
12841
|
size="small"
|
|
12805
12842
|
variant="secondary"
|
|
12806
|
-
aria-label="${this.closeButtonAriaLabel || "Close"}"
|
|
12807
12843
|
>
|
|
12808
|
-
<px-icon name="cross" from="lavender"></px-icon>
|
|
12844
|
+
<px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
|
|
12809
12845
|
</px-button-icon>
|
|
12810
12846
|
</px-hstack>
|
|
12811
12847
|
<px-p
|
|
@@ -12818,9 +12854,8 @@ class MegaDropDown extends HTMLElement {
|
|
|
12818
12854
|
<px-button-icon
|
|
12819
12855
|
size="small"
|
|
12820
12856
|
variant="secondary"
|
|
12821
|
-
aria-label="${this.closeButtonAriaLabel || "Close"}"
|
|
12822
12857
|
>
|
|
12823
|
-
<px-icon name="cross" from="lavender"></px-icon>
|
|
12858
|
+
<px-icon name="cross" from="lavender" aria-label="${this.closeButtonAriaLabel || "Close"}" title="${this.closeButtonAriaLabel || "Close"}"></px-icon>
|
|
12824
12859
|
</px-button-icon>
|
|
12825
12860
|
<px-stack
|
|
12826
12861
|
direction--mobile="column"
|
|
@@ -13029,9 +13064,9 @@ $closeButtons_get = function() {
|
|
|
13029
13064
|
if (!customElements.get("px-mdd")) {
|
|
13030
13065
|
customElements.define("px-mdd", MegaDropDown);
|
|
13031
13066
|
}
|
|
13032
|
-
const styles$
|
|
13067
|
+
const styles$8 = ':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
13068
|
const stylesheet$1 = new CSSStyleSheet();
|
|
13034
|
-
stylesheet$1.replaceSync(styles$
|
|
13069
|
+
stylesheet$1.replaceSync(styles$8);
|
|
13035
13070
|
class MddSection extends HTMLElement {
|
|
13036
13071
|
constructor() {
|
|
13037
13072
|
super();
|
|
@@ -13101,9 +13136,9 @@ class MddSection extends HTMLElement {
|
|
|
13101
13136
|
if (!customElements.get("px-mdd-section")) {
|
|
13102
13137
|
customElements.define("px-mdd-section", MddSection);
|
|
13103
13138
|
}
|
|
13104
|
-
const styles$
|
|
13139
|
+
const styles$7 = '.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
13140
|
const stylesheet = new CSSStyleSheet();
|
|
13106
|
-
stylesheet.replaceSync(styles$
|
|
13141
|
+
stylesheet.replaceSync(styles$7);
|
|
13107
13142
|
class MddSectionItem extends HTMLElement {
|
|
13108
13143
|
constructor() {
|
|
13109
13144
|
var _a;
|
|
@@ -13238,19 +13273,12 @@ const _Status = class _Status extends PxElement {
|
|
|
13238
13273
|
"icon-aria-label"
|
|
13239
13274
|
];
|
|
13240
13275
|
}
|
|
13241
|
-
connectedCallback() {
|
|
13242
|
-
super.connectedCallback();
|
|
13243
|
-
if (!this.state) {
|
|
13244
|
-
this.setRole("info");
|
|
13245
|
-
}
|
|
13246
|
-
}
|
|
13247
13276
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
13248
13277
|
if (oldValue !== newValue) {
|
|
13249
13278
|
switch (attrName) {
|
|
13250
13279
|
case "state":
|
|
13251
13280
|
this.updateState(newValue);
|
|
13252
13281
|
this.$el.classList.toggle(`${newValue}`);
|
|
13253
|
-
this.setRole(newValue);
|
|
13254
13282
|
break;
|
|
13255
13283
|
case "icon-aria-label":
|
|
13256
13284
|
this.$statusIcon.setAttribute("aria-label", newValue);
|
|
@@ -13303,12 +13331,6 @@ const _Status = class _Status extends PxElement {
|
|
|
13303
13331
|
this.$statusIcon.name = name;
|
|
13304
13332
|
this.$statusIcon.color = color;
|
|
13305
13333
|
}
|
|
13306
|
-
setRole(statusValue) {
|
|
13307
|
-
this.$el.setAttribute(
|
|
13308
|
-
"role",
|
|
13309
|
-
!statusValue || statusValue === "info" ? "status" : statusValue
|
|
13310
|
-
);
|
|
13311
|
-
}
|
|
13312
13334
|
updateIconOnly(breakpoint) {
|
|
13313
13335
|
var _a;
|
|
13314
13336
|
const iconOnlyBreakpoint = breakpoint ? `--${breakpoint}` : "";
|
|
@@ -13407,9 +13429,9 @@ let Status = _Status;
|
|
|
13407
13429
|
if (!customElements.get("px-status")) {
|
|
13408
13430
|
customElements.define("px-status", Status);
|
|
13409
13431
|
}
|
|
13410
|
-
const styles$
|
|
13411
|
-
const styleSheet$
|
|
13412
|
-
styleSheet$
|
|
13432
|
+
const styles$6 = ':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}}';
|
|
13433
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
13434
|
+
styleSheet$6.replaceSync(styles$6);
|
|
13413
13435
|
const cardBackgroundColorValues = [
|
|
13414
13436
|
"",
|
|
13415
13437
|
"container-default",
|
|
@@ -13447,7 +13469,7 @@ const _Card = class _Card extends PxElement {
|
|
|
13447
13469
|
}
|
|
13448
13470
|
constructor() {
|
|
13449
13471
|
super(
|
|
13450
|
-
styleSheet$
|
|
13472
|
+
styleSheet$6,
|
|
13451
13473
|
cssTokenBreakpoints(
|
|
13452
13474
|
"padding",
|
|
13453
13475
|
attributeBreakpointCSSSelector,
|
|
@@ -14343,16 +14365,16 @@ let BreadcrumbItem = _BreadcrumbItem;
|
|
|
14343
14365
|
if (!customElements.get("px-breadcrumb-item")) {
|
|
14344
14366
|
customElements.define("px-breadcrumb-item", BreadcrumbItem);
|
|
14345
14367
|
}
|
|
14346
|
-
const styles$
|
|
14347
|
-
const styleSheet$
|
|
14348
|
-
styleSheet$
|
|
14368
|
+
const styles$5 = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
|
|
14369
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
14370
|
+
styleSheet$5.replaceSync(styles$5);
|
|
14349
14371
|
const breakpointsValues = ["", "mobile", "tablet", "laptop"];
|
|
14350
14372
|
const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
|
|
14351
14373
|
const gapPrefix = "px-spacing";
|
|
14352
14374
|
const _List = class _List extends PxElement {
|
|
14353
14375
|
constructor() {
|
|
14354
14376
|
super(
|
|
14355
|
-
styleSheet$
|
|
14377
|
+
styleSheet$5,
|
|
14356
14378
|
cssTokenBreakpoints(
|
|
14357
14379
|
"gap",
|
|
14358
14380
|
AttributeBreakpointCSSSelector,
|
|
@@ -14468,9 +14490,9 @@ let List = _List;
|
|
|
14468
14490
|
if (!customElements.get("px-list")) {
|
|
14469
14491
|
customElements.define("px-list", List);
|
|
14470
14492
|
}
|
|
14471
|
-
const styles$
|
|
14472
|
-
const styleSheet$
|
|
14473
|
-
styleSheet$
|
|
14493
|
+
const styles$4 = '.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)}}';
|
|
14494
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
14495
|
+
styleSheet$4.replaceSync(styles$4);
|
|
14474
14496
|
const _ListItem = class _ListItem extends PxElement {
|
|
14475
14497
|
template() {
|
|
14476
14498
|
return `
|
|
@@ -14481,7 +14503,7 @@ const _ListItem = class _ListItem extends PxElement {
|
|
|
14481
14503
|
`;
|
|
14482
14504
|
}
|
|
14483
14505
|
constructor() {
|
|
14484
|
-
super(styleSheet$
|
|
14506
|
+
super(styleSheet$4);
|
|
14485
14507
|
this.shadowRoot.innerHTML = this.template();
|
|
14486
14508
|
}
|
|
14487
14509
|
static get observedAttributes() {
|
|
@@ -14970,9 +14992,9 @@ class AgGridTable extends WithExtraAttributes {
|
|
|
14970
14992
|
if (!customElements.get("px-ag-grid-table")) {
|
|
14971
14993
|
customElements.define("px-ag-grid-table", AgGridTable);
|
|
14972
14994
|
}
|
|
14973
|
-
const styles$
|
|
14974
|
-
const styleSheet$
|
|
14975
|
-
styleSheet$
|
|
14995
|
+
const styles$3 = ':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)}';
|
|
14996
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
14997
|
+
styleSheet$3.replaceSync(styles$3);
|
|
14976
14998
|
const colorOptionSizeValues = ["", "default", "small"];
|
|
14977
14999
|
const _ColorOption = class _ColorOption extends PxElement {
|
|
14978
15000
|
template() {
|
|
@@ -14981,7 +15003,7 @@ const _ColorOption = class _ColorOption extends PxElement {
|
|
|
14981
15003
|
`;
|
|
14982
15004
|
}
|
|
14983
15005
|
constructor() {
|
|
14984
|
-
super(styleSheet$
|
|
15006
|
+
super(styleSheet$3);
|
|
14985
15007
|
const $root = document.createElement(this.nativeName);
|
|
14986
15008
|
$root.classList.add("color-option");
|
|
14987
15009
|
$root.innerHTML = this.template();
|
|
@@ -15067,9 +15089,9 @@ let ColorOption = _ColorOption;
|
|
|
15067
15089
|
if (!customElements.get("px-color-option")) {
|
|
15068
15090
|
customElements.define("px-color-option", ColorOption);
|
|
15069
15091
|
}
|
|
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);
|
|
15092
|
+
const styles$2 = ":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)}}";
|
|
15093
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
15094
|
+
styleSheet$2.replaceSync(styles$2);
|
|
15073
15095
|
const CLICK_EVENT = "px.lavender.color-option-link.click";
|
|
15074
15096
|
const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
15075
15097
|
template() {
|
|
@@ -15078,7 +15100,7 @@ const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
|
15078
15100
|
`;
|
|
15079
15101
|
}
|
|
15080
15102
|
constructor() {
|
|
15081
|
-
super(styleSheet);
|
|
15103
|
+
super(styleSheet$2);
|
|
15082
15104
|
const $root = document.createElement(this.nativeName);
|
|
15083
15105
|
$root.classList.add("color-option-link");
|
|
15084
15106
|
$root.innerHTML = this.template();
|
|
@@ -15164,8 +15186,241 @@ let ColorOptionLink = _ColorOptionLink;
|
|
|
15164
15186
|
if (!customElements.get("px-color-option-link")) {
|
|
15165
15187
|
customElements.define("px-color-option-link", ColorOptionLink);
|
|
15166
15188
|
}
|
|
15189
|
+
const _FooterSitemap = class _FooterSitemap extends PxElement {
|
|
15190
|
+
constructor() {
|
|
15191
|
+
super();
|
|
15192
|
+
this.template = () => `<div class="footer-sitemap">
|
|
15193
|
+
<px-grid grid-cols="4" grid-cols--mobile="1" role="list" gap--mobile="none">
|
|
15194
|
+
<slot></slot>
|
|
15195
|
+
</px-grid>
|
|
15196
|
+
</div>`;
|
|
15197
|
+
this.shadowRoot.innerHTML = this.template();
|
|
15198
|
+
}
|
|
15199
|
+
static get observedAttributes() {
|
|
15200
|
+
return [...super.observedAttributes, "inverted"];
|
|
15201
|
+
}
|
|
15202
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
15203
|
+
if (oldValue !== newValue) {
|
|
15204
|
+
switch (attrName) {
|
|
15205
|
+
case "inverted":
|
|
15206
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
15207
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
15208
|
+
this.$children[i].toggleAttribute("inverted");
|
|
15209
|
+
}
|
|
15210
|
+
}
|
|
15211
|
+
break;
|
|
15212
|
+
default:
|
|
15213
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
15214
|
+
break;
|
|
15215
|
+
}
|
|
15216
|
+
}
|
|
15217
|
+
}
|
|
15218
|
+
get $children() {
|
|
15219
|
+
return this.querySelectorAll("px-footer-sitemap > *");
|
|
15220
|
+
}
|
|
15221
|
+
get inverted() {
|
|
15222
|
+
return this.hasAttribute("inverted");
|
|
15223
|
+
}
|
|
15224
|
+
set inverted(value) {
|
|
15225
|
+
if (value) {
|
|
15226
|
+
this.setAttribute("inverted", "");
|
|
15227
|
+
} else {
|
|
15228
|
+
this.removeAttribute("inverted");
|
|
15229
|
+
}
|
|
15230
|
+
}
|
|
15231
|
+
};
|
|
15232
|
+
_FooterSitemap.nativeName = "div";
|
|
15233
|
+
let FooterSitemap = _FooterSitemap;
|
|
15234
|
+
if (!customElements.get("px-footer-sitemap")) {
|
|
15235
|
+
customElements.define("px-footer-sitemap", FooterSitemap);
|
|
15236
|
+
}
|
|
15237
|
+
const styles$1 = ":host,:host>*{display:block;box-sizing:border-box}::slotted(ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}::slotted(ul.link-list-img){display:flex;flex-wrap:wrap;flex-direction:row;gap:20px}";
|
|
15238
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
15239
|
+
styleSheet$1.replaceSync(styles$1);
|
|
15240
|
+
const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
|
|
15241
|
+
constructor() {
|
|
15242
|
+
super(styleSheet$1);
|
|
15243
|
+
this.templateMobile = () => `<div role="listitem">
|
|
15244
|
+
<px-accordion ${this.inverted ? "inverted" : ""}>
|
|
15245
|
+
<span slot="title"><slot name="links-list-title"></slot></span>
|
|
15246
|
+
<span slot="content">
|
|
15247
|
+
<slot name="links-list"></slot>
|
|
15248
|
+
</span>
|
|
15249
|
+
</px-accordion>
|
|
15250
|
+
</div>`;
|
|
15251
|
+
this.templateDesktop = () => `<div role="listitem">
|
|
15252
|
+
<px-vstack gap="default">
|
|
15253
|
+
<px-p variant="title-l" ${this.inverted ? "inverted" : ""}>
|
|
15254
|
+
<slot name="links-list-title"></slot>
|
|
15255
|
+
</px-p>
|
|
15256
|
+
<slot name="links-list"></slot>
|
|
15257
|
+
</px-vstack>
|
|
15258
|
+
</div>`;
|
|
15259
|
+
this.throttledLoadTemplate = throttle(this.loadTemplate.bind(this), 50);
|
|
15260
|
+
this.loadTemplate();
|
|
15261
|
+
}
|
|
15262
|
+
static get observedAttributes() {
|
|
15263
|
+
return [...super.observedAttributes, "inverted"];
|
|
15264
|
+
}
|
|
15265
|
+
connectedCallback() {
|
|
15266
|
+
super.connectedCallback();
|
|
15267
|
+
this.loadTemplate();
|
|
15268
|
+
window.addEventListener("resize", this.throttledLoadTemplate);
|
|
15269
|
+
if (!this.$ul) {
|
|
15270
|
+
console.error(
|
|
15271
|
+
"The footer sitemap item must contain a <ul> element with links."
|
|
15272
|
+
);
|
|
15273
|
+
} else {
|
|
15274
|
+
if (this.$ul.querySelector("px-img")) {
|
|
15275
|
+
this.$ul.classList.add("link-list-img");
|
|
15276
|
+
}
|
|
15277
|
+
}
|
|
15278
|
+
}
|
|
15279
|
+
disconnectedCallback() {
|
|
15280
|
+
window.removeEventListener("resize", this.throttledLoadTemplate);
|
|
15281
|
+
}
|
|
15282
|
+
loadTemplate() {
|
|
15283
|
+
const previousSize = this.lastSize;
|
|
15284
|
+
const currentSize = window.innerWidth < 768 ? "mobile" : "desktop";
|
|
15285
|
+
if (previousSize !== currentSize) {
|
|
15286
|
+
if (currentSize === "mobile") {
|
|
15287
|
+
this.shadowRoot.innerHTML = this.templateMobile();
|
|
15288
|
+
} else {
|
|
15289
|
+
this.shadowRoot.innerHTML = this.templateDesktop();
|
|
15290
|
+
}
|
|
15291
|
+
this.lastSize = currentSize;
|
|
15292
|
+
}
|
|
15293
|
+
}
|
|
15294
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
15295
|
+
if (oldValue !== newValue) {
|
|
15296
|
+
switch (attrName) {
|
|
15297
|
+
case "inverted":
|
|
15298
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
15299
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
15300
|
+
this.$children[i].toggleAttribute("inverted");
|
|
15301
|
+
}
|
|
15302
|
+
}
|
|
15303
|
+
this.$ul.querySelectorAll("px-a").forEach((link) => {
|
|
15304
|
+
link.toggleAttribute("inverted");
|
|
15305
|
+
});
|
|
15306
|
+
break;
|
|
15307
|
+
default:
|
|
15308
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
15309
|
+
break;
|
|
15310
|
+
}
|
|
15311
|
+
}
|
|
15312
|
+
}
|
|
15313
|
+
get $ul() {
|
|
15314
|
+
return this.querySelector("ul");
|
|
15315
|
+
}
|
|
15316
|
+
get $children() {
|
|
15317
|
+
return this.querySelectorAll("px-footer-sitemap-item > *");
|
|
15318
|
+
}
|
|
15319
|
+
get inverted() {
|
|
15320
|
+
return this.hasAttribute("inverted");
|
|
15321
|
+
}
|
|
15322
|
+
set inverted(value) {
|
|
15323
|
+
if (value) {
|
|
15324
|
+
this.setAttribute("inverted", "");
|
|
15325
|
+
} else {
|
|
15326
|
+
this.removeAttribute("inverted");
|
|
15327
|
+
}
|
|
15328
|
+
}
|
|
15329
|
+
};
|
|
15330
|
+
_FooterSitemapItem.nativeName = "div";
|
|
15331
|
+
let FooterSitemapItem = _FooterSitemapItem;
|
|
15332
|
+
if (!customElements.get("px-footer-sitemap-item")) {
|
|
15333
|
+
customElements.define("px-footer-sitemap-item", FooterSitemapItem);
|
|
15334
|
+
}
|
|
15335
|
+
const styles = ":host{display:block}:host *{box-sizing:border-box}:host(:not([promoted])){display:none}a{display:block;padding:var(--px-padding-xs-mobile);cursor:pointer;border-radius:var(--px-radius-main);text-decoration:none;color:var(--px-color-text-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}a px-span{font-size:var(--px-text-size-label-s-mobile)}a:hover{background-color:var(--px-color-background-container-secondary-default)}a: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){a{padding:var(--px-padding-xs-tablet) var(--px-padding-2xs-tablet);min-width:65px}a px-span{font-size:var(--px-text-size-label-s-tablet)}a:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:host(:not([promoted])){display:block}}@media only screen and (min-width: 64.0625em){a{padding:var(--px-padding-xs-laptop) var(--px-padding-2xs-laptop)}a px-span{font-size:var(--px-text-size-label-s-laptop)}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){a{padding:var(--px-padding-xs-desktop) var(--px-padding-2xs-desktop)}a px-span{font-size:var(--px-text-size-label-s-desktop)}a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
15336
|
+
const styleSheet = new CSSStyleSheet();
|
|
15337
|
+
styleSheet.replaceSync(styles);
|
|
15338
|
+
const _ActionLink = class _ActionLink extends PxElement {
|
|
15339
|
+
constructor() {
|
|
15340
|
+
super(styleSheet);
|
|
15341
|
+
this.template = () => `<a href="${this.getAttribute("href")}">
|
|
15342
|
+
<px-vstack gap="none" align-items="center">
|
|
15343
|
+
<px-icon
|
|
15344
|
+
name="${this.getAttribute("icon-name")}"
|
|
15345
|
+
from="${this.getAttribute("icon-from")}"
|
|
15346
|
+
size="s"
|
|
15347
|
+
>
|
|
15348
|
+
</px-icon>
|
|
15349
|
+
<px-span color="brand" hidden--mobile><slot></slot></px-span>
|
|
15350
|
+
</px-vstack>
|
|
15351
|
+
</a>`;
|
|
15352
|
+
this.shadowRoot.innerHTML = this.template();
|
|
15353
|
+
}
|
|
15354
|
+
static get observedAttributes() {
|
|
15355
|
+
return [...super.observedAttributes, "icon-name", "icon-from", "promoted"];
|
|
15356
|
+
}
|
|
15357
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
15358
|
+
if ((name === "icon-name" || name === "icon-from" || name === "label") && !newValue) {
|
|
15359
|
+
console.error("Action link needs a value from the attribute", name);
|
|
15360
|
+
throw new Error(`Action link needs a value from the attribute ${name}`);
|
|
15361
|
+
}
|
|
15362
|
+
if (name === "icon-name") {
|
|
15363
|
+
this.$icon.setAttribute("name", newValue);
|
|
15364
|
+
} else if (name === "icon-from") {
|
|
15365
|
+
this.$icon.setAttribute("from", newValue);
|
|
15366
|
+
} else {
|
|
15367
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
15368
|
+
}
|
|
15369
|
+
}
|
|
15370
|
+
connectedCallback() {
|
|
15371
|
+
var _a;
|
|
15372
|
+
super.connectedCallback();
|
|
15373
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-header") {
|
|
15374
|
+
this.setAttribute("slot", "header-actions");
|
|
15375
|
+
}
|
|
15376
|
+
if (!this.hasAttribute("icon-from")) {
|
|
15377
|
+
this.setAttribute("icon-from", "lavender");
|
|
15378
|
+
}
|
|
15379
|
+
if (!this.hasAttribute("icon-name")) {
|
|
15380
|
+
this.setAttribute("icon-name", "bug");
|
|
15381
|
+
}
|
|
15382
|
+
transferAccessibilityAttributes(this, this.$el, false);
|
|
15383
|
+
if (!this.getAttribute("aria-label")) {
|
|
15384
|
+
this.$el.setAttribute("aria-label", this.textContent);
|
|
15385
|
+
}
|
|
15386
|
+
}
|
|
15387
|
+
get $icon() {
|
|
15388
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
15389
|
+
}
|
|
15390
|
+
get $anchor() {
|
|
15391
|
+
return this.shadowRoot.querySelector("a");
|
|
15392
|
+
}
|
|
15393
|
+
get iconName() {
|
|
15394
|
+
return this.getAttribute("icon-name");
|
|
15395
|
+
}
|
|
15396
|
+
set iconName(value) {
|
|
15397
|
+
this.setAttribute("icon-name", value);
|
|
15398
|
+
}
|
|
15399
|
+
get iconFrom() {
|
|
15400
|
+
return this.getAttribute("icon-from");
|
|
15401
|
+
}
|
|
15402
|
+
set iconFrom(value) {
|
|
15403
|
+
this.setAttribute("icon-from", value);
|
|
15404
|
+
}
|
|
15405
|
+
get promoted() {
|
|
15406
|
+
return this.hasAttribute("promoted");
|
|
15407
|
+
}
|
|
15408
|
+
set promoted(value) {
|
|
15409
|
+
if (value) {
|
|
15410
|
+
this.setAttribute("promoted", "");
|
|
15411
|
+
} else {
|
|
15412
|
+
this.removeAttribute("promoted");
|
|
15413
|
+
}
|
|
15414
|
+
}
|
|
15415
|
+
};
|
|
15416
|
+
_ActionLink.nativeName = "a";
|
|
15417
|
+
let ActionLink = _ActionLink;
|
|
15418
|
+
if (!customElements.get("px-action-link")) {
|
|
15419
|
+
customElements.define("px-action-link", ActionLink);
|
|
15420
|
+
}
|
|
15167
15421
|
export {
|
|
15168
15422
|
Accordion,
|
|
15423
|
+
ActionLink,
|
|
15169
15424
|
AgGridTable,
|
|
15170
15425
|
AppleSeed,
|
|
15171
15426
|
AttributeBreakpointHandlerDelegate,
|
|
@@ -15191,6 +15446,8 @@ export {
|
|
|
15191
15446
|
Drawer,
|
|
15192
15447
|
Dropdown,
|
|
15193
15448
|
Fieldset,
|
|
15449
|
+
FooterSitemap,
|
|
15450
|
+
FooterSitemapItem,
|
|
15194
15451
|
Grid,
|
|
15195
15452
|
H1,
|
|
15196
15453
|
H2,
|
|
@@ -15336,7 +15593,7 @@ export {
|
|
|
15336
15593
|
stateValues,
|
|
15337
15594
|
statusCardStateValues,
|
|
15338
15595
|
statusStateValues,
|
|
15339
|
-
styleSheet$
|
|
15596
|
+
styleSheet$x as styleSheet,
|
|
15340
15597
|
suffixButtonIconVariantValues,
|
|
15341
15598
|
textalignValues,
|
|
15342
15599
|
tileBackgroundColorValues,
|