@proximus/lavender 1.1.0-beta.3 → 1.1.0-beta.5
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 +428 -425
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -6,8 +6,8 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
|
|
|
6
6
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
7
7
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
8
8
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
9
|
-
var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get;
|
|
10
|
-
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px)
|
|
9
|
+
var _src, _internals, _template, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _Dropdown_instances, resetManualPopoverDisplay_fn, _onTriggerClick, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn;
|
|
10
|
+
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
11
11
|
function getSupportedPropertyNames(htmlElementName) {
|
|
12
12
|
const $element = document.createElement(htmlElementName);
|
|
13
13
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -486,6 +486,20 @@ class PxElement extends WithExtraAttributes {
|
|
|
486
486
|
get $el() {
|
|
487
487
|
return this.shadowRoot.querySelector(this.nativeName);
|
|
488
488
|
}
|
|
489
|
+
_updateAttribute(name, value) {
|
|
490
|
+
if (value) {
|
|
491
|
+
this.setAttribute(name, value);
|
|
492
|
+
} else {
|
|
493
|
+
this.removeAttribute(name);
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
_updateBooleanAttribute(name, value) {
|
|
497
|
+
if (value) {
|
|
498
|
+
this.setAttribute(name, "");
|
|
499
|
+
} else {
|
|
500
|
+
this.removeAttribute(name);
|
|
501
|
+
}
|
|
502
|
+
}
|
|
489
503
|
}
|
|
490
504
|
const gridGapValues = ["", "default", "none", "l"];
|
|
491
505
|
const flexboxAlignSelfValues = [
|
|
@@ -1655,7 +1669,7 @@ class Page extends WithExtraAttributes {
|
|
|
1655
1669
|
if (customElements.get("px-page") === void 0) {
|
|
1656
1670
|
customElements.define("px-page", Page);
|
|
1657
1671
|
}
|
|
1658
|
-
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width:
|
|
1672
|
+
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
1659
1673
|
const gridStyles = new CSSStyleSheet();
|
|
1660
1674
|
gridStyles.replaceSync(gridCss);
|
|
1661
1675
|
const gridColsValues = [
|
|
@@ -1812,7 +1826,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1812
1826
|
);
|
|
1813
1827
|
this.$el.style.setProperty(
|
|
1814
1828
|
`--grid-gap--laptop`,
|
|
1815
|
-
`var(--px-spacing-${value}-
|
|
1829
|
+
`var(--px-spacing-${value}-laptop)`
|
|
1816
1830
|
);
|
|
1817
1831
|
}
|
|
1818
1832
|
};
|
|
@@ -1822,7 +1836,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1822
1836
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1823
1837
|
if (!this.checkName(attrValues, newValue)) {
|
|
1824
1838
|
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
1825
|
-
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop") {
|
|
1839
|
+
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
|
|
1826
1840
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
1827
1841
|
} else {
|
|
1828
1842
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -2007,9 +2021,9 @@ let Grid = _Grid;
|
|
|
2007
2021
|
if (!customElements.get("px-grid")) {
|
|
2008
2022
|
customElements.define("px-grid", Grid);
|
|
2009
2023
|
}
|
|
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)}}`;
|
|
2024
|
+
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-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4753 7.37808C15.1565 7.06426 14.6396 7.06426 14.3208 7.37808L10.0001 11.6313L5.67934 7.37808C5.36055 7.06426 4.84368 7.06426 4.52488 7.37808C4.20608 7.69189 4.20608 8.20069 4.52488 8.5145L9.42284 13.3359C9.74163 13.6497 10.2585 13.6497 10.5773 13.3359L15.4753 8.5145C15.7941 8.20069 15.7941 7.69189 15.4753 7.37808Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-state-active-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.header-dropdown{font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`;
|
|
2011
2025
|
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)}}';
|
|
2012
|
-
const styles$G = ".patch{display:inline-flex;align-items:center;padding:
|
|
2026
|
+
const styles$G = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
|
|
2013
2027
|
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)}}";
|
|
2014
2028
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
2015
2029
|
const linkStyles$2 = new CSSStyleSheet();
|
|
@@ -2639,6 +2653,18 @@ const _Container = class _Container extends PxElement {
|
|
|
2639
2653
|
if (!this.borderColor) {
|
|
2640
2654
|
this.borderColor = "main";
|
|
2641
2655
|
}
|
|
2656
|
+
if (!this.backgroundImage) {
|
|
2657
|
+
this.$el.style.removeProperty("--background-image");
|
|
2658
|
+
}
|
|
2659
|
+
if (!this.backgroundImageMobile) {
|
|
2660
|
+
this.$el.style.removeProperty("--background-image--mobile");
|
|
2661
|
+
}
|
|
2662
|
+
if (!this.backgroundImageTablet) {
|
|
2663
|
+
this.$el.style.removeProperty("--background-image--tablet");
|
|
2664
|
+
}
|
|
2665
|
+
if (!this.backgroundImageLaptop) {
|
|
2666
|
+
this.$el.style.removeProperty("--background-image--laptop");
|
|
2667
|
+
}
|
|
2642
2668
|
const anchorSlot = this.querySelector("[slot]");
|
|
2643
2669
|
if (anchorSlot) {
|
|
2644
2670
|
if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
|
|
@@ -3737,7 +3763,7 @@ class Section extends HTMLElement {
|
|
|
3737
3763
|
if (!customElements.get("px-section")) {
|
|
3738
3764
|
customElements.define("px-section", Section);
|
|
3739
3765
|
}
|
|
3740
|
-
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{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%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%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%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
|
|
3766
|
+
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{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%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%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%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained[no-content-padding] slot[name=content]{padding:0}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
|
|
3741
3767
|
const accordionStyles = new CSSStyleSheet();
|
|
3742
3768
|
accordionStyles.replaceSync(accordionCss);
|
|
3743
3769
|
const accordionVariantValues = [
|
|
@@ -3765,7 +3791,8 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3765
3791
|
...super.observedAttributes,
|
|
3766
3792
|
"variant",
|
|
3767
3793
|
"background-color",
|
|
3768
|
-
"inverted"
|
|
3794
|
+
"inverted",
|
|
3795
|
+
"no-content-padding"
|
|
3769
3796
|
];
|
|
3770
3797
|
}
|
|
3771
3798
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -3839,6 +3866,16 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3839
3866
|
this.removeAttribute("inverted");
|
|
3840
3867
|
}
|
|
3841
3868
|
}
|
|
3869
|
+
get noContentPadding() {
|
|
3870
|
+
return this.hasAttribute("no-content-padding");
|
|
3871
|
+
}
|
|
3872
|
+
set noContentPadding(value) {
|
|
3873
|
+
if (value) {
|
|
3874
|
+
this.setAttribute("no-content-padding", "");
|
|
3875
|
+
} else {
|
|
3876
|
+
this.removeAttribute("no-content-padding");
|
|
3877
|
+
}
|
|
3878
|
+
}
|
|
3842
3879
|
};
|
|
3843
3880
|
_Accordion.nativeName = "details";
|
|
3844
3881
|
let Accordion = _Accordion;
|
|
@@ -8679,7 +8716,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8679
8716
|
return `
|
|
8680
8717
|
<div class="cell-radio">
|
|
8681
8718
|
<px-cell hoverable>
|
|
8682
|
-
<px-radio
|
|
8719
|
+
<px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
8683
8720
|
<slot name="visual" slot="visual"></slot>
|
|
8684
8721
|
<slot name="label" slot="label"></slot>
|
|
8685
8722
|
<slot name="description" slot="description"></slot>
|
|
@@ -8688,17 +8725,18 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8688
8725
|
`;
|
|
8689
8726
|
}
|
|
8690
8727
|
constructor() {
|
|
8691
|
-
var _a
|
|
8728
|
+
var _a;
|
|
8692
8729
|
super(commonStyleSheet$6);
|
|
8693
8730
|
this.shadowRoot.innerHTML = this.template();
|
|
8694
8731
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
8695
|
-
this.tabIndex = ((_b = this.parentElement) == null ? void 0 : _b.firstElementChild) === this ? 0 : -1;
|
|
8696
8732
|
if (this.internals) {
|
|
8697
8733
|
this.internals.role = "radio";
|
|
8698
8734
|
this.internals.ariaChecked = `${this.checked}`;
|
|
8699
8735
|
}
|
|
8700
8736
|
}
|
|
8701
8737
|
connectedCallback() {
|
|
8738
|
+
var _a;
|
|
8739
|
+
this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
|
|
8702
8740
|
if (this.$slotVisual) {
|
|
8703
8741
|
const slotVisualImg = this.querySelector('px-img[slot="visual"]');
|
|
8704
8742
|
if (slotVisualImg) {
|
|
@@ -8843,7 +8881,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8843
8881
|
if (this.internals) {
|
|
8844
8882
|
this.internals.ariaChecked = "false";
|
|
8845
8883
|
}
|
|
8846
|
-
this.
|
|
8884
|
+
this.tabIndex = -1;
|
|
8847
8885
|
this.checked = false;
|
|
8848
8886
|
if (this.$radio) {
|
|
8849
8887
|
this.$radio.removeAttribute("checked");
|
|
@@ -8852,7 +8890,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8852
8890
|
if (this.internals) {
|
|
8853
8891
|
this.internals.ariaChecked = "true";
|
|
8854
8892
|
}
|
|
8855
|
-
this.
|
|
8893
|
+
this.tabIndex = 0;
|
|
8856
8894
|
this.checked = true;
|
|
8857
8895
|
if (this.$radio) {
|
|
8858
8896
|
this.$radio.setAttribute("checked", "");
|
|
@@ -8911,7 +8949,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8911
8949
|
return this.shadowRoot.querySelector(".cell-radio");
|
|
8912
8950
|
}
|
|
8913
8951
|
get $radio() {
|
|
8914
|
-
return this.shadowRoot.querySelector("px-radio
|
|
8952
|
+
return this.shadowRoot.querySelector("px-radio");
|
|
8915
8953
|
}
|
|
8916
8954
|
get $slotVisual() {
|
|
8917
8955
|
return this.querySelector('[slot="visual"]');
|
|
@@ -9726,7 +9764,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9726
9764
|
<div class="tile-radio">
|
|
9727
9765
|
<px-tile hoverable>
|
|
9728
9766
|
<slot name="prefix" slot="prefix"></slot>
|
|
9729
|
-
<px-radio
|
|
9767
|
+
<px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
9730
9768
|
<slot name="label" slot="label"></slot>
|
|
9731
9769
|
<slot name="description" slot="description"></slot>
|
|
9732
9770
|
</px-tile>
|
|
@@ -9734,17 +9772,18 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9734
9772
|
`;
|
|
9735
9773
|
}
|
|
9736
9774
|
constructor() {
|
|
9737
|
-
var _a
|
|
9775
|
+
var _a;
|
|
9738
9776
|
super(commonStyleSheet$2);
|
|
9739
9777
|
this.shadowRoot.innerHTML = this.template();
|
|
9740
9778
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
9741
|
-
this.tabIndex = ((_b = this.parentElement) == null ? void 0 : _b.firstElementChild) === this ? 0 : -1;
|
|
9742
9779
|
if (this.internals) {
|
|
9743
9780
|
this.internals.role = "radio";
|
|
9744
9781
|
this.internals.ariaChecked = `${this.checked}`;
|
|
9745
9782
|
}
|
|
9746
9783
|
}
|
|
9747
9784
|
connectedCallback() {
|
|
9785
|
+
var _a;
|
|
9786
|
+
this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
|
|
9748
9787
|
if (this.$slotPrefix) {
|
|
9749
9788
|
const prefixImg = this.querySelector('px-img[slot="prefix"]');
|
|
9750
9789
|
if (prefixImg) {
|
|
@@ -9851,7 +9890,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9851
9890
|
if (this.internals) {
|
|
9852
9891
|
this.internals.ariaChecked = "false";
|
|
9853
9892
|
}
|
|
9854
|
-
this.
|
|
9893
|
+
this.tabIndex = -1;
|
|
9855
9894
|
this.checked = false;
|
|
9856
9895
|
if (this.$radio) {
|
|
9857
9896
|
this.$radio.removeAttribute("checked");
|
|
@@ -9860,7 +9899,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9860
9899
|
if (this.internals) {
|
|
9861
9900
|
this.internals.ariaChecked = "true";
|
|
9862
9901
|
}
|
|
9863
|
-
this.
|
|
9902
|
+
this.tabIndex = 0;
|
|
9864
9903
|
this.checked = true;
|
|
9865
9904
|
if (this.$radio) {
|
|
9866
9905
|
this.$radio.setAttribute("checked", "");
|
|
@@ -9906,7 +9945,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9906
9945
|
return this.shadowRoot.querySelector(".tile-radio");
|
|
9907
9946
|
}
|
|
9908
9947
|
get $radio() {
|
|
9909
|
-
return this.shadowRoot.querySelector("px-radio
|
|
9948
|
+
return this.shadowRoot.querySelector("px-radio");
|
|
9910
9949
|
}
|
|
9911
9950
|
get $slotPrefix() {
|
|
9912
9951
|
return this.querySelector('[slot="prefix"]');
|
|
@@ -11074,15 +11113,19 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11074
11113
|
super(bannerStyles);
|
|
11075
11114
|
this.template = () => `<div class="banner">
|
|
11076
11115
|
<div class="contrast-helper"></div>
|
|
11077
|
-
<px-container padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
|
|
11078
|
-
<
|
|
11079
|
-
<
|
|
11080
|
-
|
|
11081
|
-
|
|
11082
|
-
|
|
11083
|
-
|
|
11084
|
-
|
|
11085
|
-
|
|
11116
|
+
<px-container class="banner-container" padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
|
|
11117
|
+
<px-grid gap="none">
|
|
11118
|
+
<px-container padding="none" background-color="none" background-image="none" background-image--mobile="none" background-image--tablet="none" background-image--laptop="none" >
|
|
11119
|
+
<div class="banner-content">
|
|
11120
|
+
<slot name="tag"></slot>
|
|
11121
|
+
<slot name="media"></slot>
|
|
11122
|
+
<slot name="title"></slot>
|
|
11123
|
+
<slot name="description"></slot>
|
|
11124
|
+
<slot name="content"></slot>
|
|
11125
|
+
<slot name="action"></slot>
|
|
11126
|
+
</div>
|
|
11127
|
+
</px-container>
|
|
11128
|
+
</px-grid>
|
|
11086
11129
|
</px-container>
|
|
11087
11130
|
</div>`;
|
|
11088
11131
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -11099,6 +11142,10 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11099
11142
|
"background-position",
|
|
11100
11143
|
"contrast-helper-gradient",
|
|
11101
11144
|
"contrast-helper-overlay",
|
|
11145
|
+
"has-gridding",
|
|
11146
|
+
"has-gridding--mobile",
|
|
11147
|
+
"has-gridding--tablet",
|
|
11148
|
+
"has-gridding--laptop",
|
|
11102
11149
|
"reduced",
|
|
11103
11150
|
"inverted"
|
|
11104
11151
|
];
|
|
@@ -11107,6 +11154,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11107
11154
|
var _a;
|
|
11108
11155
|
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
11109
11156
|
this.createGridTemplateAreas();
|
|
11157
|
+
this.createGridding();
|
|
11110
11158
|
}
|
|
11111
11159
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
11112
11160
|
if (oldValue !== newValue) {
|
|
@@ -11139,6 +11187,12 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11139
11187
|
this.$el.toggleAttribute("reduced", newValue !== null);
|
|
11140
11188
|
this.createGridTemplateAreas();
|
|
11141
11189
|
break;
|
|
11190
|
+
case "has-gridding":
|
|
11191
|
+
case "has-gridding--mobile":
|
|
11192
|
+
case "has-gridding--tablet":
|
|
11193
|
+
case "has-gridding--laptop":
|
|
11194
|
+
this.createGridding();
|
|
11195
|
+
break;
|
|
11142
11196
|
case "inverted":
|
|
11143
11197
|
for (let i = 0; i < this.$children.length; i++) {
|
|
11144
11198
|
if (!this.$children[i].hasAttribute("inverted")) {
|
|
@@ -11184,8 +11238,40 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11184
11238
|
if (!areas) areas = "'content'";
|
|
11185
11239
|
grid.style.gridTemplateAreas = areas;
|
|
11186
11240
|
}
|
|
11241
|
+
createGridding() {
|
|
11242
|
+
const breakpoints = [
|
|
11243
|
+
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
11244
|
+
{
|
|
11245
|
+
prop: "hasGriddingMobile",
|
|
11246
|
+
gridProp: "gridColsMobile",
|
|
11247
|
+
attr: "col-span--mobile"
|
|
11248
|
+
},
|
|
11249
|
+
{
|
|
11250
|
+
prop: "hasGriddingTablet",
|
|
11251
|
+
gridProp: "gridColsTablet",
|
|
11252
|
+
attr: "col-span--tablet"
|
|
11253
|
+
},
|
|
11254
|
+
{
|
|
11255
|
+
prop: "hasGriddingLaptop",
|
|
11256
|
+
gridProp: "gridColsLaptop",
|
|
11257
|
+
attr: "col-span--laptop"
|
|
11258
|
+
}
|
|
11259
|
+
];
|
|
11260
|
+
const spanElement = this.shadowRoot.querySelector(
|
|
11261
|
+
"px-grid > px-container"
|
|
11262
|
+
);
|
|
11263
|
+
breakpoints.forEach(({ prop, gridProp, attr }) => {
|
|
11264
|
+
if (this[prop]) {
|
|
11265
|
+
this.$grid[gridProp] = "3";
|
|
11266
|
+
spanElement.setAttribute(attr, "2");
|
|
11267
|
+
}
|
|
11268
|
+
});
|
|
11269
|
+
}
|
|
11270
|
+
get $grid() {
|
|
11271
|
+
return this.shadowRoot.querySelector("px-grid");
|
|
11272
|
+
}
|
|
11187
11273
|
get $container() {
|
|
11188
|
-
return this.shadowRoot.querySelector("
|
|
11274
|
+
return this.shadowRoot.querySelector(".banner-container");
|
|
11189
11275
|
}
|
|
11190
11276
|
get $children() {
|
|
11191
11277
|
return this.querySelectorAll("px-banner > *");
|
|
@@ -11278,6 +11364,46 @@ const _Banner = class _Banner extends PxElement {
|
|
|
11278
11364
|
this.removeAttribute("reduced");
|
|
11279
11365
|
}
|
|
11280
11366
|
}
|
|
11367
|
+
get hasGridding() {
|
|
11368
|
+
return this.hasAttribute("has-gridding");
|
|
11369
|
+
}
|
|
11370
|
+
set hasGridding(value) {
|
|
11371
|
+
if (value) {
|
|
11372
|
+
this.setAttribute("has-gridding", "");
|
|
11373
|
+
} else {
|
|
11374
|
+
this.removeAttribute("has-gridding");
|
|
11375
|
+
}
|
|
11376
|
+
}
|
|
11377
|
+
get hasGriddingMobile() {
|
|
11378
|
+
return this.hasAttribute("has-gridding--mobile");
|
|
11379
|
+
}
|
|
11380
|
+
set hasGriddingMobile(value) {
|
|
11381
|
+
if (value) {
|
|
11382
|
+
this.setAttribute("has-gridding--mobile", "");
|
|
11383
|
+
} else {
|
|
11384
|
+
this.removeAttribute("has-gridding--mobile");
|
|
11385
|
+
}
|
|
11386
|
+
}
|
|
11387
|
+
get hasGriddingTablet() {
|
|
11388
|
+
return this.hasAttribute("has-gridding--tablet");
|
|
11389
|
+
}
|
|
11390
|
+
set hasGriddingTablet(value) {
|
|
11391
|
+
if (value) {
|
|
11392
|
+
this.setAttribute("has-gridding--tablet", "");
|
|
11393
|
+
} else {
|
|
11394
|
+
this.removeAttribute("has-gridding--tablet");
|
|
11395
|
+
}
|
|
11396
|
+
}
|
|
11397
|
+
get hasGriddingLaptop() {
|
|
11398
|
+
return this.hasAttribute("has-gridding--laptop");
|
|
11399
|
+
}
|
|
11400
|
+
set hasGriddingLaptop(value) {
|
|
11401
|
+
if (value) {
|
|
11402
|
+
this.setAttribute("has-gridding--laptop", "");
|
|
11403
|
+
} else {
|
|
11404
|
+
this.removeAttribute("has-gridding--laptop");
|
|
11405
|
+
}
|
|
11406
|
+
}
|
|
11281
11407
|
};
|
|
11282
11408
|
_Banner.nativeName = "div";
|
|
11283
11409
|
let Banner = _Banner;
|
|
@@ -11434,7 +11560,7 @@ let Fieldset = _Fieldset;
|
|
|
11434
11560
|
if (!customElements.get("px-fieldset")) {
|
|
11435
11561
|
customElements.define("px-fieldset", Fieldset);
|
|
11436
11562
|
}
|
|
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%}}`;
|
|
11563
|
+
const styles$j = `label{all:unset;font-size:1em;line-height:var(--px-line-height-ratio-l)}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:100%;text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;padding-right:calc(var(--px-padding-s-mobile) + 20px)}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#input-file-container:is(select).error{padding-right:calc(var(--px-padding-s-mobile) + 20px + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) + 20px)}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:var(--px-spacing-2xs-mobile)}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 (max-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)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-tablet) + 20px)}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#input-file-container:is(select).error{padding-right:calc(var(--px-padding-s-tablet) + 20px + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) + 20px)}slot{font-size:var(--px-text-size-label-m-tablet)}#label-helper{gap:var(--px-spacing-2xs-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)}:scope:is(select){padding-right:calc(var(--px-padding-s-laptop) + 20px)}:scope:is(select).success,:scope:is(select).error{padding-right:calc(var(--px-padding-s-laptop) + 20px + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) + 20px)}slot{font-size:var(--px-text-size-label-m-laptop)}#label-helper{gap:var(--px-spacing-2xs-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%}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-desktop) + 20px)}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#input-file-container:is(select).error{padding-right:calc(var(--px-padding-s-desktop) + 20px + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) + 20px)}:host([extended--desktop]) #container{width:100%}slot{font-size:var(--px-text-size-label-m-desktop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}`;
|
|
11438
11564
|
const stylesheet$7 = new CSSStyleSheet();
|
|
11439
11565
|
stylesheet$7.replaceSync(styles$j);
|
|
11440
11566
|
class AbstractInputElement extends PxElement {
|
|
@@ -12066,7 +12192,7 @@ class Td extends HTMLElement {
|
|
|
12066
12192
|
if (!customElements.get("px-td")) {
|
|
12067
12193
|
customElements.define("px-td", Td);
|
|
12068
12194
|
}
|
|
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)}}";
|
|
12195
|
+
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);padding-block:calc(2em - 2px)}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)}}";
|
|
12070
12196
|
const stylesheet$6 = new CSSStyleSheet();
|
|
12071
12197
|
stylesheet$6.replaceSync(styles$c);
|
|
12072
12198
|
class HeaderItem extends WithExtraAttributes {
|
|
@@ -12187,8 +12313,9 @@ class Header extends WithExtraAttributes {
|
|
|
12187
12313
|
<slot name="skip"></slot>
|
|
12188
12314
|
<px-section id="navigation-container" padding-block--mobile="s" padding-block="none"
|
|
12189
12315
|
background-color="none">
|
|
12190
|
-
<px-hstack id="dropdown-zone--desktop"
|
|
12316
|
+
<px-hstack id="dropdown-zone--desktop" align-items="center">
|
|
12191
12317
|
<slot name="target-group"></slot>
|
|
12318
|
+
<px-spacer></px-spacer>
|
|
12192
12319
|
<slot name="user-language"></slot>
|
|
12193
12320
|
</px-hstack>
|
|
12194
12321
|
<px-hstack gap="default" wrap="wrap" align-items="center">
|
|
@@ -13429,7 +13556,7 @@ let Status = _Status;
|
|
|
13429
13556
|
if (!customElements.get("px-status")) {
|
|
13430
13557
|
customElements.define("px-status", Status);
|
|
13431
13558
|
}
|
|
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 .
|
|
13559
|
+
const styles$6 = ':host{--card-background-color-default: var(--px-color-background-container-light-default);--card-media-left-size-s: 120px;--card-media-left-size-m: 250px;--card-media-left-size: var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position="background"]) picture{display:none!important}:host(:not([media-position="background"])) picture:has(img[src]){display:block}.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__content{position:relative;flex-grow:1;z-index:2}.card px-container{background-color:var(--card-background-color-default)}.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 px-container{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)}:host([media-left-size="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-left-size="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}@media only screen and (max-width: 48em){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--mobile="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--mobile="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(1)[srcset]){display:block}:host([media-position="top"]) img,:host([media-position--mobile="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}:host([media-position="left"]:not([media-position--mobile="top"])) img,:host([media-position--mobile="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) px-container,.media-position-background--mobile px-container{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,.media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--tablet="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--tablet="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(2)[srcset]){display:block}:host([media-position="left"]:not([media-position--tablet="top"])) img,:host([media-position--tablet="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--tablet="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,.media-position-background--tablet px-container{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,.media-position-background--tablet:hover px-container{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}:host([media-left-size--laptop="m"]) img{--card-media-left-size: var(--card-media-left-size-m)}:host([media-left-size--laptop="s"]) img{--card-media-left-size: var(--card-media-left-size-s)}:host([media-position--laptop="background"]) picture{display:none!important}:host(:not([media-position--mobile="background"],[media-position="background"])) picture:has(source:nth-child(3)[srcset]){display:block}:host([media-position="left"]:not([media-position--laptop="top"])) img,:host([media-position--laptop="left"]) img{height:100%;aspect-ratio:1 / 1;width:var(--card-media-left-size);object-fit:cover}:host([media-position="top"]) img,:host([media-position--laptop="top"]) img{display:block;height:100%;width:100%;aspect-ratio:initial;object-fit:initial}.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)}img[src=null]{display:none}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) px-container,.media-position-background--laptop px-container{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,.media-position-background--laptop:hover px-container{background-color:transparent}}:host([inverted]){--card-background-color-inverted: var(--px-color-background-container-light-inverted)}: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 px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{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) px-container,:host([inverted]) .media-position-background--mobile px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover px-container,:host([inverted]) .media-position-background--mobile:hover px-container{background-color:transparent}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) px-container,:host([inverted]) .media-position-background--tablet px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover px-container,:host([inverted]) .media-position-background--tablet:hover px-container{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) px-container,:host([inverted]) .media-position-background--laptop px-container{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover px-container,:host([inverted]) .media-position-background--laptop:hover px-container{background-color:transparent}}';
|
|
13433
13560
|
const styleSheet$6 = new CSSStyleSheet();
|
|
13434
13561
|
styleSheet$6.replaceSync(styles$6);
|
|
13435
13562
|
const cardBackgroundColorValues = [
|
|
@@ -13439,34 +13566,10 @@ const cardBackgroundColorValues = [
|
|
|
13439
13566
|
];
|
|
13440
13567
|
const cardPaddingValues = ["", "s", "m", "l"];
|
|
13441
13568
|
const cardMediaLeftSizeValues = ["", "s", "m"];
|
|
13442
|
-
const cardMediaPositionValues = [
|
|
13443
|
-
"",
|
|
13444
|
-
"none",
|
|
13445
|
-
"top",
|
|
13446
|
-
"left",
|
|
13447
|
-
"background"
|
|
13448
|
-
];
|
|
13569
|
+
const cardMediaPositionValues = ["", "top", "left", "background"];
|
|
13449
13570
|
const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
|
|
13450
13571
|
const paddingPrefix = "px-padding";
|
|
13451
13572
|
const _Card = class _Card extends PxElement {
|
|
13452
|
-
template() {
|
|
13453
|
-
return `
|
|
13454
|
-
<div class="contrast-helper"></div>
|
|
13455
|
-
<px-container padding="none" background-color="none" border-radius="none">
|
|
13456
|
-
<div class="card__container">
|
|
13457
|
-
<div class="card__content">
|
|
13458
|
-
<px-vstack gap="default">
|
|
13459
|
-
<px-vstack gap="s">
|
|
13460
|
-
<slot name="title"></slot>
|
|
13461
|
-
<slot name="content"></slot>
|
|
13462
|
-
</px-vstack>
|
|
13463
|
-
<slot></slot>
|
|
13464
|
-
</px-vstack>
|
|
13465
|
-
</div>
|
|
13466
|
-
</card>
|
|
13467
|
-
</px-container>
|
|
13468
|
-
`;
|
|
13469
|
-
}
|
|
13470
13573
|
constructor() {
|
|
13471
13574
|
super(
|
|
13472
13575
|
styleSheet$6,
|
|
@@ -13478,10 +13581,34 @@ const _Card = class _Card extends PxElement {
|
|
|
13478
13581
|
"--card__content-padding"
|
|
13479
13582
|
)
|
|
13480
13583
|
);
|
|
13481
|
-
|
|
13482
|
-
|
|
13483
|
-
|
|
13484
|
-
|
|
13584
|
+
__privateAdd(this, _Card_instances);
|
|
13585
|
+
this.shadowRoot.innerHTML = this.template();
|
|
13586
|
+
}
|
|
13587
|
+
template() {
|
|
13588
|
+
return `
|
|
13589
|
+
<a class="card">
|
|
13590
|
+
<div class="contrast-helper"></div>
|
|
13591
|
+
<px-container padding="none" background-color="none" border-radius="none">
|
|
13592
|
+
<px-stack direction="column" id="stack-container" gap="none">
|
|
13593
|
+
<picture>
|
|
13594
|
+
<source media="(max-width: 48em)" >
|
|
13595
|
+
<source media="(max-width: 64em)" >
|
|
13596
|
+
<source media="(min-width: 64em)" >
|
|
13597
|
+
<img loading="lazy">
|
|
13598
|
+
</picture>
|
|
13599
|
+
<div class="card__content">
|
|
13600
|
+
<px-vstack gap="default">
|
|
13601
|
+
<px-vstack gap="s">
|
|
13602
|
+
<slot name="title"></slot>
|
|
13603
|
+
<slot name="content"></slot>
|
|
13604
|
+
</px-vstack>
|
|
13605
|
+
<slot></slot>
|
|
13606
|
+
</px-vstack>
|
|
13607
|
+
</div>
|
|
13608
|
+
</px-stack>
|
|
13609
|
+
</px-container>
|
|
13610
|
+
</a>
|
|
13611
|
+
`;
|
|
13485
13612
|
}
|
|
13486
13613
|
connectedCallback() {
|
|
13487
13614
|
super.connectedCallback();
|
|
@@ -13496,10 +13623,6 @@ const _Card = class _Card extends PxElement {
|
|
|
13496
13623
|
"background-position",
|
|
13497
13624
|
"contrast-helper-gradient",
|
|
13498
13625
|
"contrast-helper-overlay",
|
|
13499
|
-
"media-left-size",
|
|
13500
|
-
"media-left-size--mobile",
|
|
13501
|
-
"media-left-size--tablet",
|
|
13502
|
-
"media-left-size--laptop",
|
|
13503
13626
|
"media-position",
|
|
13504
13627
|
"media-position--mobile",
|
|
13505
13628
|
"media-position--tablet",
|
|
@@ -13527,56 +13650,38 @@ const _Card = class _Card extends PxElement {
|
|
|
13527
13650
|
}
|
|
13528
13651
|
break;
|
|
13529
13652
|
case "background-color":
|
|
13530
|
-
this.
|
|
13531
|
-
attrName,
|
|
13532
|
-
oldValue,
|
|
13533
|
-
newValue,
|
|
13534
|
-
cardBackgroundColorValues
|
|
13535
|
-
);
|
|
13653
|
+
__privateMethod(this, _Card_instances, updateBackgroundColor_fn).call(this, attrName, oldValue, newValue, cardBackgroundColorValues);
|
|
13536
13654
|
break;
|
|
13537
13655
|
case "background-size":
|
|
13538
|
-
this.$container.
|
|
13656
|
+
this.$container.setAttribute("background-size", newValue);
|
|
13539
13657
|
break;
|
|
13540
13658
|
case "background-position":
|
|
13541
|
-
this.$container.
|
|
13659
|
+
this.$container.setAttribute("background-position", newValue);
|
|
13542
13660
|
break;
|
|
13543
13661
|
case "media-position":
|
|
13662
|
+
__privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue);
|
|
13663
|
+
break;
|
|
13544
13664
|
case "media-position--mobile":
|
|
13665
|
+
__privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "mobile");
|
|
13666
|
+
break;
|
|
13545
13667
|
case "media-position--tablet":
|
|
13546
|
-
|
|
13547
|
-
this.updateMediaPosition(attrName, newValue, cardMediaPositionValues);
|
|
13668
|
+
__privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "tablet");
|
|
13548
13669
|
break;
|
|
13549
|
-
case "media-
|
|
13550
|
-
|
|
13551
|
-
case "media-left-size--tablet":
|
|
13552
|
-
case "media-left-size--laptop":
|
|
13553
|
-
this.updateMediaLeftSize(
|
|
13554
|
-
attrName,
|
|
13555
|
-
oldValue,
|
|
13556
|
-
newValue,
|
|
13557
|
-
cardMediaLeftSizeValues
|
|
13558
|
-
);
|
|
13670
|
+
case "media-position--laptop":
|
|
13671
|
+
__privateMethod(this, _Card_instances, updateMediaPosition_fn).call(this, newValue, "laptop");
|
|
13559
13672
|
break;
|
|
13560
13673
|
case "media-src":
|
|
13674
|
+
__privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue);
|
|
13675
|
+
break;
|
|
13561
13676
|
case "media-src--mobile":
|
|
13677
|
+
__privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "mobile");
|
|
13678
|
+
break;
|
|
13562
13679
|
case "media-src--tablet":
|
|
13563
|
-
|
|
13564
|
-
|
|
13565
|
-
|
|
13566
|
-
|
|
13567
|
-
}
|
|
13568
|
-
let positionAttr = "media-position";
|
|
13569
|
-
if (breakpoint) {
|
|
13570
|
-
positionAttr += `--${breakpoint}`;
|
|
13571
|
-
}
|
|
13572
|
-
const positionValue = this.getAttribute(positionAttr) || this.mediaPosition;
|
|
13573
|
-
this.updateMediaPosition(
|
|
13574
|
-
positionAttr,
|
|
13575
|
-
positionValue,
|
|
13576
|
-
cardMediaPositionValues
|
|
13577
|
-
);
|
|
13680
|
+
__privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "tablet");
|
|
13681
|
+
break;
|
|
13682
|
+
case "media-src--laptop":
|
|
13683
|
+
__privateMethod(this, _Card_instances, updateMedia_fn).call(this, newValue, "laptop");
|
|
13578
13684
|
break;
|
|
13579
|
-
}
|
|
13580
13685
|
default:
|
|
13581
13686
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
13582
13687
|
break;
|
|
@@ -13584,15 +13689,9 @@ const _Card = class _Card extends PxElement {
|
|
|
13584
13689
|
}
|
|
13585
13690
|
}
|
|
13586
13691
|
configureCard() {
|
|
13587
|
-
if (!this.backgroundColor) {
|
|
13588
|
-
this.backgroundColor = "container-light";
|
|
13589
|
-
}
|
|
13590
13692
|
if (!this.padding) {
|
|
13591
13693
|
this.padding = "m";
|
|
13592
13694
|
}
|
|
13593
|
-
if (!this.mediaLeftSize) {
|
|
13594
|
-
this.mediaLeftSize = "s";
|
|
13595
|
-
}
|
|
13596
13695
|
if (!this.mediaPosition) {
|
|
13597
13696
|
this.mediaPosition = "top";
|
|
13598
13697
|
}
|
|
@@ -13605,423 +13704,240 @@ const _Card = class _Card extends PxElement {
|
|
|
13605
13704
|
}
|
|
13606
13705
|
}
|
|
13607
13706
|
}
|
|
13608
|
-
|
|
13609
|
-
|
|
13610
|
-
console.error(
|
|
13611
|
-
`${newValue} is not an allowed ${attrName} value`,
|
|
13612
|
-
this.$el
|
|
13613
|
-
);
|
|
13614
|
-
return;
|
|
13615
|
-
}
|
|
13616
|
-
const hasBreakpoint = attrName.includes("--");
|
|
13617
|
-
const cssPropertyName = hasBreakpoint ? attrName.split("--")[0] : attrName;
|
|
13618
|
-
if (!hasBreakpoint) {
|
|
13619
|
-
if (!this.$el.classList.contains(`media-position-${newValue}`)) {
|
|
13620
|
-
this.$el.classList.add(`media-position-${newValue}`);
|
|
13621
|
-
}
|
|
13622
|
-
if (newValue === "top") {
|
|
13623
|
-
this.updateMediaPositionTop(cssPropertyName);
|
|
13624
|
-
} else if (newValue === "left") {
|
|
13625
|
-
this.updateMediaPositionLeft(cssPropertyName);
|
|
13626
|
-
} else if (newValue === "background") {
|
|
13627
|
-
this.updateMediaPositionBackground(cssPropertyName);
|
|
13628
|
-
}
|
|
13629
|
-
} else {
|
|
13630
|
-
const breakpointName = attrName.split("--")[1];
|
|
13631
|
-
if (!this.$el.classList.contains(
|
|
13632
|
-
`media-position-${newValue}--${breakpointName}`
|
|
13633
|
-
)) {
|
|
13634
|
-
this.$el.classList.add(`media-position-${newValue}--${breakpointName}`);
|
|
13635
|
-
}
|
|
13636
|
-
if (newValue === "top") {
|
|
13637
|
-
this.createImgTop(
|
|
13638
|
-
breakpointName,
|
|
13639
|
-
this.getAttribute(`media-src--${breakpointName}`)
|
|
13640
|
-
);
|
|
13641
|
-
}
|
|
13642
|
-
if (newValue === "left") {
|
|
13643
|
-
this.createDivLeft(
|
|
13644
|
-
breakpointName,
|
|
13645
|
-
this.getAttribute(`media-src--${breakpointName}`)
|
|
13646
|
-
);
|
|
13647
|
-
}
|
|
13648
|
-
if (newValue === "background") {
|
|
13649
|
-
this.$container.setAttribute(
|
|
13650
|
-
`background-image--${breakpointName}`,
|
|
13651
|
-
this.getAttribute(`media-src--${breakpointName}`) || ""
|
|
13652
|
-
);
|
|
13653
|
-
}
|
|
13654
|
-
}
|
|
13655
|
-
}
|
|
13656
|
-
updateMediaPositionTop(cssPropertyName) {
|
|
13657
|
-
if (this.mediaSrc) {
|
|
13658
|
-
const img = document.createElement("img");
|
|
13659
|
-
img.className = "card__media-top";
|
|
13660
|
-
img.src = this.mediaSrc || "";
|
|
13661
|
-
img.alt = "";
|
|
13662
|
-
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
13663
|
-
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
13664
|
-
img.classList.add(`hidden--${device}`);
|
|
13665
|
-
}
|
|
13666
|
-
});
|
|
13667
|
-
if (this.$cardContainer.querySelector(".card__media-top")) {
|
|
13668
|
-
this.$cardContainer.querySelector(".card__media-top").replaceWith(img);
|
|
13669
|
-
} else {
|
|
13670
|
-
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
13671
|
-
}
|
|
13672
|
-
}
|
|
13673
|
-
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
13674
|
-
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
13675
|
-
this.createImgTop(device, this.getAttribute(`media-src--${device}`));
|
|
13676
|
-
}
|
|
13677
|
-
});
|
|
13678
|
-
}
|
|
13679
|
-
updateMediaPositionLeft(cssPropertyName) {
|
|
13680
|
-
if (this.mediaSrc) {
|
|
13681
|
-
const div = document.createElement("div");
|
|
13682
|
-
div.className = "card__media-left";
|
|
13683
|
-
div.style.backgroundImage = `url(${this.mediaSrc || ""})`;
|
|
13684
|
-
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
13685
|
-
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
13686
|
-
div.classList.add(`hidden--${device}`);
|
|
13687
|
-
}
|
|
13688
|
-
});
|
|
13689
|
-
if (this.$cardContainer.querySelector(".card__media-left")) {
|
|
13690
|
-
this.$cardContainer.querySelector(".card__media-left").replaceWith(div);
|
|
13691
|
-
} else {
|
|
13692
|
-
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
13693
|
-
}
|
|
13694
|
-
}
|
|
13695
|
-
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
13696
|
-
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
13697
|
-
this.createDivLeft(device, this.getAttribute(`media-src--${device}`));
|
|
13698
|
-
}
|
|
13699
|
-
});
|
|
13700
|
-
}
|
|
13701
|
-
updateMediaPositionBackground(cssPropertyName) {
|
|
13702
|
-
if (this.mediaSrc) {
|
|
13703
|
-
this.$container.setAttribute(
|
|
13704
|
-
"background-image--mobile",
|
|
13705
|
-
this.mediaSrc || ""
|
|
13706
|
-
);
|
|
13707
|
-
this.$container.setAttribute(
|
|
13708
|
-
"background-image--tablet",
|
|
13709
|
-
this.mediaSrc || ""
|
|
13710
|
-
);
|
|
13711
|
-
this.$container.setAttribute(
|
|
13712
|
-
"background-image--laptop",
|
|
13713
|
-
this.mediaSrc || ""
|
|
13714
|
-
);
|
|
13715
|
-
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
13716
|
-
const mediaSrcDevice = this.getAttribute(`media-src--${device}`);
|
|
13717
|
-
const hasBreakpoint = this.getAttribute(
|
|
13718
|
-
`${cssPropertyName}--${device}`
|
|
13719
|
-
);
|
|
13720
|
-
if (mediaSrcDevice && !hasBreakpoint) {
|
|
13721
|
-
this.$container.setAttribute(
|
|
13722
|
-
`background-image--${device}`,
|
|
13723
|
-
mediaSrcDevice
|
|
13724
|
-
);
|
|
13725
|
-
} else if (hasBreakpoint) {
|
|
13726
|
-
this.$container.removeAttribute(`background-image--${device}`);
|
|
13727
|
-
}
|
|
13728
|
-
});
|
|
13729
|
-
} else {
|
|
13730
|
-
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
13731
|
-
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
13732
|
-
this.$container.setAttribute(
|
|
13733
|
-
`background-image--${device}`,
|
|
13734
|
-
this.getAttribute(`media-src--${device}`)
|
|
13735
|
-
);
|
|
13736
|
-
}
|
|
13737
|
-
});
|
|
13738
|
-
}
|
|
13707
|
+
get $children() {
|
|
13708
|
+
return this.querySelectorAll("px-card > *");
|
|
13739
13709
|
}
|
|
13740
|
-
|
|
13741
|
-
|
|
13742
|
-
img.className = `card__media-top--${device}`;
|
|
13743
|
-
img.src = src || "";
|
|
13744
|
-
img.classList.add(`shown--${device}`);
|
|
13745
|
-
img.alt = "";
|
|
13746
|
-
if (this.$cardContainer.querySelector(`.card__media-top--${device}`)) {
|
|
13747
|
-
this.$cardContainer.querySelector(`.card__media-top--${device}`).replaceWith(img);
|
|
13748
|
-
} else {
|
|
13749
|
-
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
13750
|
-
}
|
|
13710
|
+
get $img() {
|
|
13711
|
+
return this.shadowRoot.querySelector("picture > img");
|
|
13751
13712
|
}
|
|
13752
|
-
|
|
13753
|
-
|
|
13754
|
-
|
|
13755
|
-
|
|
13756
|
-
div.classList.add(`shown--${device}`);
|
|
13757
|
-
if (this.$cardContainer.querySelector(`.card__media-left--${device}`)) {
|
|
13758
|
-
this.$cardContainer.querySelector(`.card__media-left--${device}`).replaceWith(div);
|
|
13759
|
-
} else {
|
|
13760
|
-
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
13761
|
-
}
|
|
13713
|
+
get $pictureSourceMobile() {
|
|
13714
|
+
return this.shadowRoot.querySelector(
|
|
13715
|
+
"picture > source:nth-child(1)"
|
|
13716
|
+
);
|
|
13762
13717
|
}
|
|
13763
|
-
|
|
13764
|
-
|
|
13765
|
-
|
|
13766
|
-
|
|
13767
|
-
this.$el
|
|
13768
|
-
);
|
|
13769
|
-
return;
|
|
13770
|
-
}
|
|
13771
|
-
const updateBackgroundColorStyle = (value) => {
|
|
13772
|
-
if (value !== null && value !== "" && value !== "default") {
|
|
13773
|
-
this.$el.style.setProperty(
|
|
13774
|
-
`--card-background-color-default`,
|
|
13775
|
-
`var(--px-color-background-${value}-default)`
|
|
13776
|
-
);
|
|
13777
|
-
this.$el.style.setProperty(
|
|
13778
|
-
`--card-background-color-inverted`,
|
|
13779
|
-
`var(--px-color-background-${value}-inverted)`
|
|
13780
|
-
);
|
|
13781
|
-
}
|
|
13782
|
-
};
|
|
13783
|
-
updateBackgroundColorStyle(oldValue);
|
|
13784
|
-
updateBackgroundColorStyle(newValue);
|
|
13718
|
+
get $pictureSourceTablet() {
|
|
13719
|
+
return this.shadowRoot.querySelector(
|
|
13720
|
+
"picture > source:nth-child(2)"
|
|
13721
|
+
);
|
|
13785
13722
|
}
|
|
13786
|
-
|
|
13787
|
-
|
|
13788
|
-
|
|
13789
|
-
|
|
13790
|
-
this.$el
|
|
13791
|
-
);
|
|
13792
|
-
return;
|
|
13793
|
-
}
|
|
13794
|
-
const updateMediaLeftSizeStyle = (breakpoint, value) => {
|
|
13795
|
-
if (value !== null && value !== "") {
|
|
13796
|
-
let sizeValue = "";
|
|
13797
|
-
if (value === "s") {
|
|
13798
|
-
sizeValue = "120px";
|
|
13799
|
-
}
|
|
13800
|
-
if (value === "m") {
|
|
13801
|
-
sizeValue = "240px";
|
|
13802
|
-
}
|
|
13803
|
-
this.$el.style.setProperty(
|
|
13804
|
-
`--card-media-left-size${breakpoint ? `--${breakpoint}` : ""}`,
|
|
13805
|
-
sizeValue
|
|
13806
|
-
);
|
|
13807
|
-
}
|
|
13808
|
-
};
|
|
13809
|
-
const hasBreakpoint = attrName.includes("--");
|
|
13810
|
-
if (hasBreakpoint) {
|
|
13811
|
-
const breakpoint = attrName.split("--")[1];
|
|
13812
|
-
updateMediaLeftSizeStyle(breakpoint, oldValue);
|
|
13813
|
-
updateMediaLeftSizeStyle(breakpoint, newValue);
|
|
13814
|
-
} else {
|
|
13815
|
-
updateMediaLeftSizeStyle("", oldValue);
|
|
13816
|
-
updateMediaLeftSizeStyle("", newValue);
|
|
13817
|
-
}
|
|
13723
|
+
get $pictureSourceLaptop() {
|
|
13724
|
+
return this.shadowRoot.querySelector(
|
|
13725
|
+
"picture > source:nth-child(3)"
|
|
13726
|
+
);
|
|
13818
13727
|
}
|
|
13819
|
-
get $
|
|
13820
|
-
return this.
|
|
13728
|
+
get $stackContainer() {
|
|
13729
|
+
return this.shadowRoot.querySelector("#stack-container");
|
|
13821
13730
|
}
|
|
13822
13731
|
get $container() {
|
|
13823
13732
|
return this.shadowRoot.querySelector("px-container");
|
|
13824
13733
|
}
|
|
13825
|
-
get $cardContainer() {
|
|
13826
|
-
return this.shadowRoot.querySelector(".card__container");
|
|
13827
|
-
}
|
|
13828
13734
|
get inverted() {
|
|
13829
13735
|
return this.hasAttribute("inverted");
|
|
13830
13736
|
}
|
|
13831
13737
|
set inverted(value) {
|
|
13832
|
-
|
|
13833
|
-
this.setAttribute("inverted", "");
|
|
13834
|
-
} else {
|
|
13835
|
-
this.removeAttribute("inverted");
|
|
13836
|
-
}
|
|
13738
|
+
super._updateBooleanAttribute("inverted", value);
|
|
13837
13739
|
}
|
|
13838
13740
|
get backgroundColor() {
|
|
13839
13741
|
return this.getAttribute("background-color");
|
|
13840
13742
|
}
|
|
13841
13743
|
set backgroundColor(value) {
|
|
13842
|
-
|
|
13843
|
-
this.setAttribute("background-color", value);
|
|
13844
|
-
} else {
|
|
13845
|
-
this.removeAttribute("background-color");
|
|
13846
|
-
}
|
|
13744
|
+
super._updateAttribute("background-color", value);
|
|
13847
13745
|
}
|
|
13848
13746
|
get backgroundSize() {
|
|
13849
13747
|
return this.getAttribute("background-size");
|
|
13850
13748
|
}
|
|
13851
13749
|
set backgroundSize(value) {
|
|
13852
|
-
|
|
13853
|
-
this.setAttribute("background-size", value);
|
|
13854
|
-
} else {
|
|
13855
|
-
this.removeAttribute("background-size");
|
|
13856
|
-
}
|
|
13750
|
+
super._updateAttribute("background-size", value);
|
|
13857
13751
|
}
|
|
13858
13752
|
get backgroundPosition() {
|
|
13859
13753
|
return this.getAttribute("background-position");
|
|
13860
13754
|
}
|
|
13861
13755
|
set backgroundPosition(value) {
|
|
13862
|
-
|
|
13863
|
-
this.setAttribute("background-position", value);
|
|
13864
|
-
} else {
|
|
13865
|
-
this.removeAttribute("background-position");
|
|
13866
|
-
}
|
|
13756
|
+
super._updateAttribute("background-position", value);
|
|
13867
13757
|
}
|
|
13868
13758
|
get padding() {
|
|
13869
13759
|
return this.getAttribute("padding");
|
|
13870
13760
|
}
|
|
13871
13761
|
set padding(value) {
|
|
13872
|
-
|
|
13873
|
-
this.setAttribute("padding", value);
|
|
13874
|
-
} else {
|
|
13875
|
-
this.removeAttribute("padding");
|
|
13876
|
-
}
|
|
13762
|
+
super._updateAttribute("padding", value);
|
|
13877
13763
|
}
|
|
13878
13764
|
get gradientContrastHelper() {
|
|
13879
13765
|
return this.hasAttribute("contrast-helper-gradient");
|
|
13880
13766
|
}
|
|
13881
13767
|
set gradientContrastHelper(value) {
|
|
13882
|
-
|
|
13883
|
-
this.setAttribute("contrast-helper-gradient", "");
|
|
13884
|
-
} else {
|
|
13885
|
-
this.removeAttribute("contrast-helper-gradient");
|
|
13886
|
-
}
|
|
13768
|
+
super._updateBooleanAttribute("contrast-helper-gradient", value);
|
|
13887
13769
|
}
|
|
13888
13770
|
get overlayContrastHelper() {
|
|
13889
13771
|
return this.hasAttribute("contrast-helper-overlay");
|
|
13890
13772
|
}
|
|
13891
13773
|
set overlayContrastHelper(value) {
|
|
13892
|
-
|
|
13893
|
-
this.setAttribute("contrast-helper-overlay", "");
|
|
13894
|
-
} else {
|
|
13895
|
-
this.removeAttribute("contrast-helper-overlay");
|
|
13896
|
-
}
|
|
13774
|
+
super._updateBooleanAttribute("contrast-helper-overlay", value);
|
|
13897
13775
|
}
|
|
13898
13776
|
get mediaLeftSize() {
|
|
13899
13777
|
return this.getAttribute("media-left-size");
|
|
13900
13778
|
}
|
|
13901
13779
|
set mediaLeftSize(value) {
|
|
13902
|
-
|
|
13903
|
-
this.setAttribute("media-left-size", value);
|
|
13904
|
-
} else {
|
|
13905
|
-
this.removeAttribute("media-left-size");
|
|
13906
|
-
}
|
|
13780
|
+
super._updateAttribute("media-left-size", value);
|
|
13907
13781
|
}
|
|
13908
13782
|
get mediaLeftSizeMobile() {
|
|
13909
13783
|
return this.getAttribute("media-left-size--mobile");
|
|
13910
13784
|
}
|
|
13911
13785
|
set mediaLeftSizeMobile(value) {
|
|
13912
|
-
|
|
13913
|
-
this.setAttribute("media-left-size--mobile", value);
|
|
13914
|
-
} else {
|
|
13915
|
-
this.removeAttribute("media-left-size--mobile");
|
|
13916
|
-
}
|
|
13786
|
+
super._updateAttribute("media-left-size--mobile", value);
|
|
13917
13787
|
}
|
|
13918
13788
|
get mediaLeftSizeTablet() {
|
|
13919
13789
|
return this.getAttribute("media-left-size--tablet");
|
|
13920
13790
|
}
|
|
13921
13791
|
set mediaLeftSizeTablet(value) {
|
|
13922
|
-
|
|
13923
|
-
this.setAttribute("media-left-size--tablet", value);
|
|
13924
|
-
} else {
|
|
13925
|
-
this.removeAttribute("media-left-size--tablet");
|
|
13926
|
-
}
|
|
13792
|
+
super._updateAttribute("media-left-size--tablet", value);
|
|
13927
13793
|
}
|
|
13928
13794
|
get mediaLeftSizeLaptop() {
|
|
13929
13795
|
return this.getAttribute("media-left-size--laptop");
|
|
13930
13796
|
}
|
|
13931
13797
|
set mediaLeftSizeLaptop(value) {
|
|
13932
|
-
|
|
13933
|
-
this.setAttribute("media-left-size--laptop", value);
|
|
13934
|
-
} else {
|
|
13935
|
-
this.removeAttribute("media-left-size--laptop");
|
|
13936
|
-
}
|
|
13798
|
+
super._updateAttribute("media-left-size--laptop", value);
|
|
13937
13799
|
}
|
|
13938
13800
|
get mediaPosition() {
|
|
13939
13801
|
return this.getAttribute("media-position");
|
|
13940
13802
|
}
|
|
13941
13803
|
set mediaPosition(value) {
|
|
13942
|
-
|
|
13943
|
-
this.setAttribute("media-position", value);
|
|
13944
|
-
} else {
|
|
13945
|
-
this.removeAttribute("media-position");
|
|
13946
|
-
}
|
|
13804
|
+
super._updateAttribute("media-position", value);
|
|
13947
13805
|
}
|
|
13948
13806
|
get mediaPositionMobile() {
|
|
13949
13807
|
return this.getAttribute("media-position--mobile");
|
|
13950
13808
|
}
|
|
13951
13809
|
set mediaPositionMobile(value) {
|
|
13952
|
-
|
|
13953
|
-
this.setAttribute("media-position--mobile", value);
|
|
13954
|
-
} else {
|
|
13955
|
-
this.removeAttribute("media-position--mobile");
|
|
13956
|
-
}
|
|
13810
|
+
super._updateAttribute("media-position--mobile", value);
|
|
13957
13811
|
}
|
|
13958
13812
|
get mediaPositionTablet() {
|
|
13959
13813
|
return this.getAttribute("media-position--tablet");
|
|
13960
13814
|
}
|
|
13961
13815
|
set mediaPositionTablet(value) {
|
|
13962
|
-
|
|
13963
|
-
this.setAttribute("media-position--tablet", value);
|
|
13964
|
-
} else {
|
|
13965
|
-
this.removeAttribute("media-position--tablet");
|
|
13966
|
-
}
|
|
13816
|
+
super._updateAttribute("media-position--tablet", value);
|
|
13967
13817
|
}
|
|
13968
13818
|
get mediaPositionLaptop() {
|
|
13969
13819
|
return this.getAttribute("media-position--laptop");
|
|
13970
13820
|
}
|
|
13971
13821
|
set mediaPositionLaptop(value) {
|
|
13972
|
-
|
|
13973
|
-
this.setAttribute("media-position--laptop", value);
|
|
13974
|
-
} else {
|
|
13975
|
-
this.removeAttribute("media-position--laptop");
|
|
13976
|
-
}
|
|
13822
|
+
super._updateAttribute("media-position--laptop", value);
|
|
13977
13823
|
}
|
|
13978
13824
|
get mediaSrc() {
|
|
13979
13825
|
return this.getAttribute("media-src");
|
|
13980
13826
|
}
|
|
13981
13827
|
set mediaSrc(value) {
|
|
13982
|
-
|
|
13983
|
-
this.setAttribute("media-src", value);
|
|
13984
|
-
} else {
|
|
13985
|
-
this.removeAttribute("media-src");
|
|
13986
|
-
}
|
|
13828
|
+
super._updateAttribute("media-src", value);
|
|
13987
13829
|
}
|
|
13988
13830
|
get mediaSrcMobile() {
|
|
13989
13831
|
return this.getAttribute("media-src--mobile");
|
|
13990
13832
|
}
|
|
13991
13833
|
set mediaSrcMobile(value) {
|
|
13992
|
-
|
|
13993
|
-
this.setAttribute("media-src--mobile", value);
|
|
13994
|
-
} else {
|
|
13995
|
-
this.removeAttribute("media-src--mobile");
|
|
13996
|
-
}
|
|
13834
|
+
super._updateAttribute("media-src--mobile", value);
|
|
13997
13835
|
}
|
|
13998
13836
|
get mediaSrcTablet() {
|
|
13999
13837
|
return this.getAttribute("media-src--tablet");
|
|
14000
13838
|
}
|
|
14001
13839
|
set mediaSrcTablet(value) {
|
|
14002
|
-
|
|
14003
|
-
this.setAttribute("media-src--tablet", value);
|
|
14004
|
-
} else {
|
|
14005
|
-
this.removeAttribute("media-src--tablet");
|
|
14006
|
-
}
|
|
13840
|
+
super._updateAttribute("media-src--tablet", value);
|
|
14007
13841
|
}
|
|
14008
13842
|
get mediaSrcLaptop() {
|
|
14009
13843
|
return this.getAttribute("media-src--laptop");
|
|
14010
13844
|
}
|
|
14011
13845
|
set mediaSrcLaptop(value) {
|
|
14012
|
-
|
|
14013
|
-
|
|
13846
|
+
super._updateAttribute("media-src--laptop", value);
|
|
13847
|
+
}
|
|
13848
|
+
};
|
|
13849
|
+
_Card_instances = new WeakSet();
|
|
13850
|
+
updateMediaPosition_fn = function(newValue, screenSize) {
|
|
13851
|
+
const attributeName = screenSize ? `direction--${screenSize}` : "direction";
|
|
13852
|
+
if (newValue === "left") {
|
|
13853
|
+
this.$stackContainer.setAttribute(attributeName, "row");
|
|
13854
|
+
if (screenSize === "laptop") {
|
|
13855
|
+
this.$stackContainer.setAttribute("direction--desktop", "row");
|
|
14014
13856
|
} else {
|
|
14015
|
-
this.removeAttribute("
|
|
13857
|
+
this.$stackContainer.removeAttribute("direction--desktop");
|
|
13858
|
+
}
|
|
13859
|
+
} else if (newValue === "top" || newValue === "null") {
|
|
13860
|
+
this.$stackContainer.setAttribute(attributeName, "column");
|
|
13861
|
+
if (screenSize === "laptop") {
|
|
13862
|
+
this.$stackContainer.setAttribute("direction--desktop", "column");
|
|
13863
|
+
} else {
|
|
13864
|
+
this.$stackContainer.removeAttribute("direction--desktop");
|
|
14016
13865
|
}
|
|
14017
13866
|
}
|
|
14018
13867
|
};
|
|
13868
|
+
updateMedia_fn = function(newValue, screenSize) {
|
|
13869
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13870
|
+
switch (screenSize) {
|
|
13871
|
+
case "mobile":
|
|
13872
|
+
if (this.mediaPosition === "background" || this.mediaPositionMobile === "background") {
|
|
13873
|
+
this.$container.setAttribute("background-image--mobile", newValue);
|
|
13874
|
+
}
|
|
13875
|
+
if (newValue) {
|
|
13876
|
+
(_a = this.$pictureSourceMobile) == null ? void 0 : _a.setAttribute("srcset", newValue);
|
|
13877
|
+
} else {
|
|
13878
|
+
(_b = this.$pictureSourceMobile) == null ? void 0 : _b.removeAttribute("srcset");
|
|
13879
|
+
}
|
|
13880
|
+
break;
|
|
13881
|
+
case "tablet":
|
|
13882
|
+
if (this.mediaPosition === "background" || this.mediaPositionTablet === "background") {
|
|
13883
|
+
this.$container.setAttribute("background-image--tablet", newValue);
|
|
13884
|
+
}
|
|
13885
|
+
if (newValue) {
|
|
13886
|
+
(_c = this.$pictureSourceTablet) == null ? void 0 : _c.setAttribute("srcset", newValue);
|
|
13887
|
+
} else {
|
|
13888
|
+
(_d = this.$pictureSourceTablet) == null ? void 0 : _d.removeAttribute("srcset");
|
|
13889
|
+
}
|
|
13890
|
+
break;
|
|
13891
|
+
case "laptop":
|
|
13892
|
+
if (this.mediaPosition === "background" || this.mediaPositionLaptop === "background") {
|
|
13893
|
+
this.$container.setAttribute("background-image--laptop", newValue);
|
|
13894
|
+
}
|
|
13895
|
+
if (newValue) {
|
|
13896
|
+
(_e = this.$pictureSourceLaptop) == null ? void 0 : _e.setAttribute("srcset", newValue);
|
|
13897
|
+
} else {
|
|
13898
|
+
(_f = this.$pictureSourceLaptop) == null ? void 0 : _f.removeAttribute("srcset");
|
|
13899
|
+
}
|
|
13900
|
+
break;
|
|
13901
|
+
default:
|
|
13902
|
+
if (this.mediaPosition === "background") {
|
|
13903
|
+
this.$container.setAttribute("background-image", newValue);
|
|
13904
|
+
}
|
|
13905
|
+
if (newValue) {
|
|
13906
|
+
(_g = this.$img) == null ? void 0 : _g.setAttribute("src", newValue);
|
|
13907
|
+
} else {
|
|
13908
|
+
(_h = this.$img) == null ? void 0 : _h.removeAttribute("src");
|
|
13909
|
+
}
|
|
13910
|
+
}
|
|
13911
|
+
};
|
|
13912
|
+
updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
|
|
13913
|
+
if (!checkName(attrValue, newValue)) {
|
|
13914
|
+
console.error(
|
|
13915
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
13916
|
+
this.$el
|
|
13917
|
+
);
|
|
13918
|
+
return;
|
|
13919
|
+
}
|
|
13920
|
+
const updateBackgroundColorStyle = (value) => {
|
|
13921
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
13922
|
+
this.$el.style.setProperty(
|
|
13923
|
+
`--card-background-color-default`,
|
|
13924
|
+
`var(--px-color-background-${value}-default)`
|
|
13925
|
+
);
|
|
13926
|
+
this.$el.style.setProperty(
|
|
13927
|
+
`--card-background-color-inverted`,
|
|
13928
|
+
`var(--px-color-background-${value}-inverted)`
|
|
13929
|
+
);
|
|
13930
|
+
}
|
|
13931
|
+
};
|
|
13932
|
+
updateBackgroundColorStyle(oldValue);
|
|
13933
|
+
updateBackgroundColorStyle(newValue);
|
|
13934
|
+
};
|
|
14019
13935
|
_Card.nativeName = "a";
|
|
14020
13936
|
let Card = _Card;
|
|
14021
13937
|
if (!customElements.get("px-card")) {
|
|
14022
13938
|
customElements.define("px-card", Card);
|
|
14023
13939
|
}
|
|
14024
|
-
const contentHeaderCss = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none
|
|
13940
|
+
const contentHeaderCss = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}";
|
|
14025
13941
|
const contentHeaderStyles = new CSSStyleSheet();
|
|
14026
13942
|
contentHeaderStyles.replaceSync(contentHeaderCss);
|
|
14027
13943
|
const _ContentHeader = class _ContentHeader extends PxElement {
|
|
@@ -14030,16 +13946,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14030
13946
|
this.template = () => `<div class="content-header">
|
|
14031
13947
|
<div class="contrast-helper"></div>
|
|
14032
13948
|
<px-section padding-block="l">
|
|
14033
|
-
|
|
14034
|
-
|
|
14035
|
-
|
|
14036
|
-
<
|
|
14037
|
-
|
|
14038
|
-
|
|
14039
|
-
|
|
14040
|
-
|
|
14041
|
-
|
|
14042
|
-
|
|
13949
|
+
<px-grid gap="none">
|
|
13950
|
+
<px-container padding="none" border-radius="none" background-color="none" background-image="none" background-image--mobile="none" background-image--tablet="none" background-image--laptop="none" >
|
|
13951
|
+
<div class="content-header-content">
|
|
13952
|
+
<px-vstack gap="heading-to-subtitle">
|
|
13953
|
+
<px-h1 variant="title-3xl"><slot></slot></px-h1>
|
|
13954
|
+
<slot name="subtitle"></slot>
|
|
13955
|
+
</px-vstack>
|
|
13956
|
+
${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
|
|
13957
|
+
<slot name="patch" shrink></slot>
|
|
13958
|
+
<slot name="patch-description"></slot>
|
|
13959
|
+
</px-stack>` : ""}
|
|
13960
|
+
</div>
|
|
13961
|
+
</px-container>
|
|
13962
|
+
</px-grid>
|
|
14043
13963
|
${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
|
|
14044
13964
|
</px-section>
|
|
14045
13965
|
</div>`;
|
|
@@ -14058,6 +13978,10 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14058
13978
|
"contrast-helper-gradient",
|
|
14059
13979
|
"contrast-helper-overlay",
|
|
14060
13980
|
"min-height",
|
|
13981
|
+
"has-gridding",
|
|
13982
|
+
"has-gridding--mobile",
|
|
13983
|
+
"has-gridding--tablet",
|
|
13984
|
+
"has-gridding--laptop",
|
|
14061
13985
|
"inverted"
|
|
14062
13986
|
];
|
|
14063
13987
|
}
|
|
@@ -14080,6 +14004,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14080
14004
|
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
14081
14005
|
}
|
|
14082
14006
|
}
|
|
14007
|
+
this.createGridding();
|
|
14083
14008
|
}
|
|
14084
14009
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
14085
14010
|
if (oldValue !== newValue) {
|
|
@@ -14108,6 +14033,12 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14108
14033
|
case "background-position":
|
|
14109
14034
|
this.$section.backgroundPosition = newValue;
|
|
14110
14035
|
break;
|
|
14036
|
+
case "has-gridding":
|
|
14037
|
+
case "has-gridding--mobile":
|
|
14038
|
+
case "has-gridding--tablet":
|
|
14039
|
+
case "has-gridding--laptop":
|
|
14040
|
+
this.createGridding();
|
|
14041
|
+
break;
|
|
14111
14042
|
case "inverted":
|
|
14112
14043
|
for (let i = 0; i < this.$children.length; i++) {
|
|
14113
14044
|
if (!this.$children[i].hasAttribute("inverted")) {
|
|
@@ -14123,6 +14054,38 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14123
14054
|
}
|
|
14124
14055
|
}
|
|
14125
14056
|
}
|
|
14057
|
+
createGridding() {
|
|
14058
|
+
const breakpoints = [
|
|
14059
|
+
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
14060
|
+
{
|
|
14061
|
+
prop: "hasGriddingMobile",
|
|
14062
|
+
gridProp: "gridColsMobile",
|
|
14063
|
+
attr: "col-span--mobile"
|
|
14064
|
+
},
|
|
14065
|
+
{
|
|
14066
|
+
prop: "hasGriddingTablet",
|
|
14067
|
+
gridProp: "gridColsTablet",
|
|
14068
|
+
attr: "col-span--tablet"
|
|
14069
|
+
},
|
|
14070
|
+
{
|
|
14071
|
+
prop: "hasGriddingLaptop",
|
|
14072
|
+
gridProp: "gridColsLaptop",
|
|
14073
|
+
attr: "col-span--laptop"
|
|
14074
|
+
}
|
|
14075
|
+
];
|
|
14076
|
+
const spanElement = this.shadowRoot.querySelector(
|
|
14077
|
+
"px-grid > px-container"
|
|
14078
|
+
);
|
|
14079
|
+
breakpoints.forEach(({ prop, gridProp, attr }) => {
|
|
14080
|
+
if (this[prop]) {
|
|
14081
|
+
this.$grid[gridProp] = "3";
|
|
14082
|
+
spanElement.setAttribute(attr, "2");
|
|
14083
|
+
}
|
|
14084
|
+
});
|
|
14085
|
+
}
|
|
14086
|
+
get $grid() {
|
|
14087
|
+
return this.shadowRoot.querySelector("px-grid");
|
|
14088
|
+
}
|
|
14126
14089
|
get $section() {
|
|
14127
14090
|
return this.shadowRoot.querySelector("px-section");
|
|
14128
14091
|
}
|
|
@@ -14209,6 +14172,46 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
14209
14172
|
this.removeAttribute("contrast-helper-overlay");
|
|
14210
14173
|
}
|
|
14211
14174
|
}
|
|
14175
|
+
get hasGridding() {
|
|
14176
|
+
return this.hasAttribute("has-gridding");
|
|
14177
|
+
}
|
|
14178
|
+
set hasGridding(value) {
|
|
14179
|
+
if (value) {
|
|
14180
|
+
this.setAttribute("has-gridding", "");
|
|
14181
|
+
} else {
|
|
14182
|
+
this.removeAttribute("has-gridding");
|
|
14183
|
+
}
|
|
14184
|
+
}
|
|
14185
|
+
get hasGriddingMobile() {
|
|
14186
|
+
return this.hasAttribute("has-gridding--mobile");
|
|
14187
|
+
}
|
|
14188
|
+
set hasGriddingMobile(value) {
|
|
14189
|
+
if (value) {
|
|
14190
|
+
this.setAttribute("has-gridding--mobile", "");
|
|
14191
|
+
} else {
|
|
14192
|
+
this.removeAttribute("has-gridding--mobile");
|
|
14193
|
+
}
|
|
14194
|
+
}
|
|
14195
|
+
get hasGriddingTablet() {
|
|
14196
|
+
return this.hasAttribute("has-gridding--tablet");
|
|
14197
|
+
}
|
|
14198
|
+
set hasGriddingTablet(value) {
|
|
14199
|
+
if (value) {
|
|
14200
|
+
this.setAttribute("has-gridding--tablet", "");
|
|
14201
|
+
} else {
|
|
14202
|
+
this.removeAttribute("has-gridding--tablet");
|
|
14203
|
+
}
|
|
14204
|
+
}
|
|
14205
|
+
get hasGriddingLaptop() {
|
|
14206
|
+
return this.hasAttribute("has-gridding--laptop");
|
|
14207
|
+
}
|
|
14208
|
+
set hasGriddingLaptop(value) {
|
|
14209
|
+
if (value) {
|
|
14210
|
+
this.setAttribute("has-gridding--laptop", "");
|
|
14211
|
+
} else {
|
|
14212
|
+
this.removeAttribute("has-gridding--laptop");
|
|
14213
|
+
}
|
|
14214
|
+
}
|
|
14212
14215
|
get inverted() {
|
|
14213
14216
|
return this.hasAttribute("inverted");
|
|
14214
14217
|
}
|