@proximus/lavender 1.4.10-alpha.8 → 1.4.10-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lavender.cjs.js +1 -1
- package/dist/lavender.es.js +682 -290
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -6,10 +6,10 @@ 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 _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3;
|
|
10
|
-
const styles$
|
|
9
|
+
var _host, _interactiveElement, _canSetInteractiveState, _isConnected, _showInteractiveState, _WrappedInteractiveStateController_instances, interactiveStateTargets_get, _src, _internals, _template, _Banner_instances, applyReducedPadding_fn, _Breadcrumb_instances, applyInverted_fn, _wrappedInteractiveStateController, _ButtonWrapper_instances, canSetWrappedInteractiveState_fn, _Card_instances, updateMediaPosition_fn, updateMedia_fn, updateBackgroundColor_fn, _Carousel_instances, syncItems_fn, _Dropdown_instances, resetManualPopoverDisplay_fn, _beforeToggle, _onToggle, handleManualPopoverDisplay_fn, _wrappedInteractiveStateController2, _LinkWrapper_instances, canSetWrappedInteractiveState_fn2, _onResize, _Header_instances, setMDDDialogOffset_fn, togglePanel_fn, showMobileMenu_fn, hideMobileMenu_fn, hidePanel_fn, $mobileMenu_get, $navigationItems_get, $headerWrapper_get, $megaDropdowns_get, _template2, _HeaderMobileMenu_instances, createMobileMenuPanelDropDowns_fn, _Select_instances, updateOptions_fn, _List_instances, syncChildren_fn, applyInverted_fn2, applyVariant_fn, _mutationObserver, _MegaDropDown_instances, $backButton_get, $title_get, $footer_get, $closeButtons_get, _CardContainer_instances, updateImageSrc_fn, applyAspectRatio_fn, syncBackgroundColor_fn, syncBorder_fn, syncDefaultBackgroundColor_fn, syncDefaultBorder_fn, syncInteractiveState_fn, hasInteractiveState_fn, syncInvertedOnChildren_fn, setOrRemove_fn, _Tabs_instances, handleInverted_fn, handleHideControls_fn, _Timeline_instances, applyInverted_fn3, _controlId, _onKeyDown, _Autocomplete_instances, options_get, _onInput, updateFormValue_fn, _AutocompleteHeader_instances, syncSlot_fn, _AutocompleteOption_instances, syncSlot_fn2;
|
|
10
|
+
const styles$P = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}';
|
|
11
11
|
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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}: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: 47.938rem){: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: 48rem) and (max-width: 64rem){: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: 64.0625rem){: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}: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: 90.0625rem){: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}}";
|
|
12
|
-
const __vite_import_meta_env__ = {};
|
|
12
|
+
const __vite_import_meta_env__ = { "DEV": true, "VITE_COMPONENT_DEBUG": "true" };
|
|
13
13
|
function getSupportedPropertyNames(htmlElementName) {
|
|
14
14
|
const $element = document.createElement(htmlElementName);
|
|
15
15
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -24,7 +24,8 @@ function getSupportedAttributeNames(htmlElementName) {
|
|
|
24
24
|
}
|
|
25
25
|
const commonStyleSheet$c = new CSSStyleSheet();
|
|
26
26
|
commonStyleSheet$c.replaceSync(commonStyles);
|
|
27
|
-
const
|
|
27
|
+
const VITE_ENV = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" ? __vite_import_meta_env__ : void 0;
|
|
28
|
+
const PX_COMPONENT_DEBUG = (VITE_ENV == null ? void 0 : VITE_ENV.VITE_COMPONENT_DEBUG) === "true" || (VITE_ENV == null ? void 0 : VITE_ENV.DEV) === true;
|
|
28
29
|
if (typeof window !== "undefined") {
|
|
29
30
|
window.isComponentDebug = isComponentDebug;
|
|
30
31
|
}
|
|
@@ -267,7 +268,7 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
267
268
|
if (attrValue) {
|
|
268
269
|
if (!this.checkName(attrValue, newValue)) {
|
|
269
270
|
log(
|
|
270
|
-
|
|
271
|
+
`"${newValue}" is not an allowed ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
271
272
|
);
|
|
272
273
|
}
|
|
273
274
|
}
|
|
@@ -645,7 +646,9 @@ const flexboxAlignSelfValues = [
|
|
|
645
646
|
"default",
|
|
646
647
|
"auto",
|
|
647
648
|
"flex-start",
|
|
649
|
+
"start",
|
|
648
650
|
"flex-end",
|
|
651
|
+
"end",
|
|
649
652
|
"center",
|
|
650
653
|
"baseline",
|
|
651
654
|
"stretch"
|
|
@@ -1135,8 +1138,8 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
1135
1138
|
this.setCSSProperties();
|
|
1136
1139
|
}
|
|
1137
1140
|
}
|
|
1138
|
-
const styleSheet$
|
|
1139
|
-
styleSheet$
|
|
1141
|
+
const styleSheet$I = new CSSStyleSheet();
|
|
1142
|
+
styleSheet$I.replaceSync(styles$P);
|
|
1140
1143
|
const directionValues = [
|
|
1141
1144
|
"",
|
|
1142
1145
|
"default",
|
|
@@ -1150,7 +1153,9 @@ const alignItemsValues = [
|
|
|
1150
1153
|
"default",
|
|
1151
1154
|
"stretch",
|
|
1152
1155
|
"flex-start",
|
|
1156
|
+
"start",
|
|
1153
1157
|
"flex-end",
|
|
1158
|
+
"end",
|
|
1154
1159
|
"center",
|
|
1155
1160
|
"baseline"
|
|
1156
1161
|
];
|
|
@@ -1158,7 +1163,9 @@ const justifyContentValues = [
|
|
|
1158
1163
|
"",
|
|
1159
1164
|
"default",
|
|
1160
1165
|
"flex-start",
|
|
1166
|
+
"start",
|
|
1161
1167
|
"flex-end",
|
|
1168
|
+
"end",
|
|
1162
1169
|
"center",
|
|
1163
1170
|
"space-between",
|
|
1164
1171
|
"space-around",
|
|
@@ -1168,7 +1175,7 @@ const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
|
1168
1175
|
const overflowValues = ["", "visible", "hidden", "scroll", "auto"];
|
|
1169
1176
|
class Stack extends WithExtraAttributes {
|
|
1170
1177
|
constructor() {
|
|
1171
|
-
super(styleSheet$
|
|
1178
|
+
super(styleSheet$I);
|
|
1172
1179
|
this.overflowXAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
1173
1180
|
this,
|
|
1174
1181
|
"overflow-x",
|
|
@@ -1292,7 +1299,7 @@ class Stack extends WithExtraAttributes {
|
|
|
1292
1299
|
updateOverflowX(name, oldValue, newValue, attrValue) {
|
|
1293
1300
|
if (!checkName(attrValue, newValue)) {
|
|
1294
1301
|
log(
|
|
1295
|
-
|
|
1302
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1296
1303
|
);
|
|
1297
1304
|
return;
|
|
1298
1305
|
}
|
|
@@ -1305,7 +1312,7 @@ class Stack extends WithExtraAttributes {
|
|
|
1305
1312
|
updateFlexProperties(name, oldValue, newValue, attrValue) {
|
|
1306
1313
|
if (!this.checkName(attrValue, newValue)) {
|
|
1307
1314
|
log(
|
|
1308
|
-
|
|
1315
|
+
`"${newValue}" is not a valid ${name} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1309
1316
|
);
|
|
1310
1317
|
}
|
|
1311
1318
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
@@ -1666,12 +1673,12 @@ class Spacer extends HTMLElement {
|
|
|
1666
1673
|
if (!customElements.get("px-spacer")) {
|
|
1667
1674
|
customElements.define("px-spacer", Spacer);
|
|
1668
1675
|
}
|
|
1669
|
-
const styles$
|
|
1670
|
-
const styleSheet$
|
|
1671
|
-
styleSheet$
|
|
1676
|
+
const styles$O = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
|
|
1677
|
+
const styleSheet$H = new CSSStyleSheet();
|
|
1678
|
+
styleSheet$H.replaceSync(styles$O);
|
|
1672
1679
|
class Page extends WithExtraAttributes {
|
|
1673
1680
|
constructor() {
|
|
1674
|
-
super(styleSheet$
|
|
1681
|
+
super(styleSheet$H);
|
|
1675
1682
|
this.template = (stickyContainer) => `
|
|
1676
1683
|
<px-container border-radius="none" padding="none">
|
|
1677
1684
|
<px-vstack>
|
|
@@ -1962,7 +1969,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
1962
1969
|
}
|
|
1963
1970
|
if (!this.checkName(attrValues, newValue)) {
|
|
1964
1971
|
log(
|
|
1965
|
-
|
|
1972
|
+
`"${newValue}" is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
1966
1973
|
);
|
|
1967
1974
|
}
|
|
1968
1975
|
}
|
|
@@ -1978,7 +1985,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
1978
1985
|
);
|
|
1979
1986
|
} else {
|
|
1980
1987
|
log(
|
|
1981
|
-
|
|
1988
|
+
`"${newValue}" is not an allowed ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
1982
1989
|
);
|
|
1983
1990
|
}
|
|
1984
1991
|
}
|
|
@@ -2095,13 +2102,13 @@ const iconColorValues = [
|
|
|
2095
2102
|
const iconColorValuesKC = ["Inherit", ...iconColorValues].map(
|
|
2096
2103
|
(value) => value.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
|
|
2097
2104
|
);
|
|
2098
|
-
const styles$
|
|
2099
|
-
const styleSheet$
|
|
2100
|
-
styleSheet$
|
|
2105
|
+
const styles$N = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}";
|
|
2106
|
+
const styleSheet$G = new CSSStyleSheet();
|
|
2107
|
+
styleSheet$G.replaceSync(styles$N);
|
|
2101
2108
|
class Icon extends WithExtraAttributes {
|
|
2102
2109
|
constructor(...styleSheets) {
|
|
2103
2110
|
var _a;
|
|
2104
|
-
super(...styleSheets, styleSheet$
|
|
2111
|
+
super(...styleSheets, styleSheet$G);
|
|
2105
2112
|
__privateAdd(this, _src);
|
|
2106
2113
|
__privateAdd(this, _internals);
|
|
2107
2114
|
__privateAdd(this, _template, () => `<svg aria-hidden="true">
|
|
@@ -2313,7 +2320,7 @@ const _Span = class _Span extends PxElement {
|
|
|
2313
2320
|
}
|
|
2314
2321
|
if (!this.checkName(attrValue, newValue)) {
|
|
2315
2322
|
log(
|
|
2316
|
-
|
|
2323
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2317
2324
|
);
|
|
2318
2325
|
}
|
|
2319
2326
|
}
|
|
@@ -2371,6 +2378,90 @@ let Span = _Span;
|
|
|
2371
2378
|
if (!customElements.get("px-span")) {
|
|
2372
2379
|
customElements.define("px-span", Span);
|
|
2373
2380
|
}
|
|
2381
|
+
const actionButtonCss = "button{border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-secondary-default);border:var(--px-size-border-m) solid transparent;width:var(--px-size-l);height:var(--px-size-l)}button:hover{background-color:transparent;border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 48rem){button{border-radius:var(--px-radius-main);width:inherit;height:inherit}}";
|
|
2382
|
+
const styles$M = ":host{display:block}:host *{box-sizing:border-box}:host(:not([promoted])){display:none}a,button{display:block;padding:var(--px-padding-xs-mobile);cursor:pointer;border-radius:var(--px-radius-main);text-decoration:none;color:var(--px-color-text-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}a px-span,button px-span{font-size:var(--px-text-size-label-s-mobile)}a:hover,button:hover{background-color:var(--px-color-background-container-secondary-default)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (min-width: 48rem){a,button{padding:var(--px-padding-xs-tablet) var(--px-padding-2xs-tablet);min-width:65px}a px-span,button px-span{font-size:var(--px-text-size-label-s-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:host(:not([promoted])){display:block}}@media only screen and (min-width: 64.0625rem){a{padding:var(--px-padding-xs-laptop) var(--px-padding-2xs-laptop)}a px-span{font-size:var(--px-text-size-label-s-laptop)}a:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625rem){a{padding:var(--px-padding-xs-desktop) var(--px-padding-2xs-desktop)}a px-span{font-size:var(--px-text-size-label-s-desktop)}a:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
2383
|
+
const actionButtonStyles = new CSSStyleSheet();
|
|
2384
|
+
const actionLinkStyles = new CSSStyleSheet();
|
|
2385
|
+
actionButtonStyles.replaceSync(actionButtonCss);
|
|
2386
|
+
actionLinkStyles.replaceSync(styles$M);
|
|
2387
|
+
const _ActionButton = class _ActionButton extends PxElement {
|
|
2388
|
+
constructor() {
|
|
2389
|
+
super(actionLinkStyles, actionButtonStyles);
|
|
2390
|
+
this.template = () => `
|
|
2391
|
+
<button class="action-button">
|
|
2392
|
+
<px-vstack gap="none" align-items="center" justify-content="center">
|
|
2393
|
+
<px-icon
|
|
2394
|
+
name="${this.getAttribute("icon-name")}"
|
|
2395
|
+
from="${this.getAttribute("icon-from")}"
|
|
2396
|
+
size="s"
|
|
2397
|
+
hidden--mobile
|
|
2398
|
+
>
|
|
2399
|
+
</px-icon>
|
|
2400
|
+
<px-span color="brand"><slot></slot></px-span>
|
|
2401
|
+
</px-vstack>
|
|
2402
|
+
</button>
|
|
2403
|
+
`;
|
|
2404
|
+
this.shadowRoot.innerHTML = this.template();
|
|
2405
|
+
}
|
|
2406
|
+
static get observedAttributes() {
|
|
2407
|
+
return [...super.observedAttributes, "icon-name", "icon-from", "promoted"];
|
|
2408
|
+
}
|
|
2409
|
+
connectedCallback() {
|
|
2410
|
+
var _a;
|
|
2411
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-header") {
|
|
2412
|
+
this.setAttribute("slot", "header-actions");
|
|
2413
|
+
}
|
|
2414
|
+
transferAccessibilityAttributes(this, this.$el, false);
|
|
2415
|
+
}
|
|
2416
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
2417
|
+
if (oldValue !== newValue) {
|
|
2418
|
+
switch (attrName) {
|
|
2419
|
+
case "icon-name":
|
|
2420
|
+
this.$icon.setAttribute("name", newValue);
|
|
2421
|
+
break;
|
|
2422
|
+
case "icon-from":
|
|
2423
|
+
this.$icon.setAttribute("from", newValue);
|
|
2424
|
+
break;
|
|
2425
|
+
default:
|
|
2426
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
2427
|
+
break;
|
|
2428
|
+
}
|
|
2429
|
+
}
|
|
2430
|
+
}
|
|
2431
|
+
get $icon() {
|
|
2432
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
2433
|
+
}
|
|
2434
|
+
get $dropdown() {
|
|
2435
|
+
return this.shadowRoot.querySelector("px-dropdown");
|
|
2436
|
+
}
|
|
2437
|
+
get iconName() {
|
|
2438
|
+
return this.getAttribute("icon-name");
|
|
2439
|
+
}
|
|
2440
|
+
set iconName(value) {
|
|
2441
|
+
this.setAttribute("icon-name", value);
|
|
2442
|
+
}
|
|
2443
|
+
get iconFrom() {
|
|
2444
|
+
return this.getAttribute("icon-from");
|
|
2445
|
+
}
|
|
2446
|
+
set iconFrom(value) {
|
|
2447
|
+
this.setAttribute("icon-from", value);
|
|
2448
|
+
}
|
|
2449
|
+
get promoted() {
|
|
2450
|
+
return this.hasAttribute("promoted");
|
|
2451
|
+
}
|
|
2452
|
+
set promoted(value) {
|
|
2453
|
+
if (value) {
|
|
2454
|
+
this.setAttribute("promoted", "");
|
|
2455
|
+
} else {
|
|
2456
|
+
this.removeAttribute("promoted");
|
|
2457
|
+
}
|
|
2458
|
+
}
|
|
2459
|
+
};
|
|
2460
|
+
_ActionButton.nativeName = "button";
|
|
2461
|
+
let ActionButton = _ActionButton;
|
|
2462
|
+
if (!customElements.get("px-action-button")) {
|
|
2463
|
+
customElements.define("px-action-button", ActionButton);
|
|
2464
|
+
}
|
|
2374
2465
|
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}';
|
|
2375
2466
|
const containerStyles = new CSSStyleSheet();
|
|
2376
2467
|
containerStyles.replaceSync(containerCss);
|
|
@@ -2659,7 +2750,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2659
2750
|
);
|
|
2660
2751
|
} else {
|
|
2661
2752
|
log(
|
|
2662
|
-
|
|
2753
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${gradientValues.join('", "')}".`
|
|
2663
2754
|
);
|
|
2664
2755
|
}
|
|
2665
2756
|
}
|
|
@@ -2678,7 +2769,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2678
2769
|
);
|
|
2679
2770
|
} else {
|
|
2680
2771
|
log(
|
|
2681
|
-
|
|
2772
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${backgroundColorValues.join('", "')}".`
|
|
2682
2773
|
);
|
|
2683
2774
|
}
|
|
2684
2775
|
}
|
|
@@ -2694,14 +2785,14 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2694
2785
|
);
|
|
2695
2786
|
} else {
|
|
2696
2787
|
log(
|
|
2697
|
-
|
|
2788
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${borderColorValues.join('", "')}".`
|
|
2698
2789
|
);
|
|
2699
2790
|
}
|
|
2700
2791
|
}
|
|
2701
2792
|
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
2702
2793
|
if (!this.checkName(attrValues, newValue)) {
|
|
2703
2794
|
log(
|
|
2704
|
-
|
|
2795
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
2705
2796
|
);
|
|
2706
2797
|
} else {
|
|
2707
2798
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -2721,7 +2812,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2721
2812
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2722
2813
|
if (!this.checkName(attrValues, newValue)) {
|
|
2723
2814
|
log(
|
|
2724
|
-
|
|
2815
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
2725
2816
|
);
|
|
2726
2817
|
} else {
|
|
2727
2818
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -2752,7 +2843,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2752
2843
|
updateAnchorOffset(oldValue, newValue, attrValue) {
|
|
2753
2844
|
if (!checkName(attrValue, newValue)) {
|
|
2754
2845
|
log(
|
|
2755
|
-
|
|
2846
|
+
`"${newValue}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2756
2847
|
);
|
|
2757
2848
|
return;
|
|
2758
2849
|
}
|
|
@@ -2783,7 +2874,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2783
2874
|
updateAnchorSpacing(oldValue, newValue, attrValue) {
|
|
2784
2875
|
if (!checkName(attrValue, newValue)) {
|
|
2785
2876
|
log(
|
|
2786
|
-
|
|
2877
|
+
`"${newValue}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
2787
2878
|
);
|
|
2788
2879
|
return;
|
|
2789
2880
|
}
|
|
@@ -2813,7 +2904,7 @@ const _Container = class _Container extends WithExtraAttributes {
|
|
|
2813
2904
|
updateSubgridRows(attrName, oldValue, newValue, attrValues) {
|
|
2814
2905
|
if (!checkName(attrValues, newValue)) {
|
|
2815
2906
|
log(
|
|
2816
|
-
|
|
2907
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
2817
2908
|
);
|
|
2818
2909
|
} else {
|
|
2819
2910
|
this.style.setProperty(`--${attrName}`, newValue);
|
|
@@ -3208,12 +3299,11 @@ let Container = _Container;
|
|
|
3208
3299
|
if (!customElements.get("px-container")) {
|
|
3209
3300
|
customElements.define("px-container", Container);
|
|
3210
3301
|
}
|
|
3211
|
-
const
|
|
3212
|
-
|
|
3213
|
-
styleSheet$C.replaceSync(styles$K);
|
|
3302
|
+
const styleSheet$F = new CSSStyleSheet();
|
|
3303
|
+
styleSheet$F.replaceSync(styles$M);
|
|
3214
3304
|
const _ActionLink = class _ActionLink extends PxElement {
|
|
3215
3305
|
constructor() {
|
|
3216
|
-
super(styleSheet$
|
|
3306
|
+
super(styleSheet$F);
|
|
3217
3307
|
this.template = () => `<a href="${this.getAttribute("href")}">
|
|
3218
3308
|
<px-vstack gap="none" align-items="center">
|
|
3219
3309
|
<px-icon
|
|
@@ -3649,7 +3739,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
3649
3739
|
updateGap(oldValue, newValue, attrValue) {
|
|
3650
3740
|
if (!this.checkName(attrValue, newValue)) {
|
|
3651
3741
|
log(
|
|
3652
|
-
|
|
3742
|
+
`"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
3653
3743
|
);
|
|
3654
3744
|
return;
|
|
3655
3745
|
}
|
|
@@ -3675,7 +3765,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
3675
3765
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
3676
3766
|
if (!this.checkName(attrValues, newValue)) {
|
|
3677
3767
|
log(
|
|
3678
|
-
|
|
3768
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
3679
3769
|
);
|
|
3680
3770
|
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop" || attrName === "grid-cols--desktop") {
|
|
3681
3771
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
@@ -3880,6 +3970,7 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
|
|
|
3880
3970
|
<slot name="title"></slot>
|
|
3881
3971
|
<slot name="description"></slot>
|
|
3882
3972
|
<slot name="content"></slot>
|
|
3973
|
+
|
|
3883
3974
|
</div>
|
|
3884
3975
|
</px-container>
|
|
3885
3976
|
</px-grid>
|
|
@@ -4015,20 +4106,20 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
|
|
|
4015
4106
|
}
|
|
4016
4107
|
createGridding(value) {
|
|
4017
4108
|
const breakpoints = [
|
|
4018
|
-
{ prop: "hasGridding",
|
|
4109
|
+
{ prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
|
|
4019
4110
|
{
|
|
4020
4111
|
prop: "hasGriddingMobile",
|
|
4021
|
-
|
|
4112
|
+
gridProp: "gridColsMobile",
|
|
4022
4113
|
attr: "col-span--mobile"
|
|
4023
4114
|
},
|
|
4024
4115
|
{
|
|
4025
4116
|
prop: "hasGriddingTablet",
|
|
4026
|
-
|
|
4117
|
+
gridProp: "gridColsTablet",
|
|
4027
4118
|
attr: "col-span--tablet"
|
|
4028
4119
|
},
|
|
4029
4120
|
{
|
|
4030
4121
|
prop: "hasGriddingLaptop",
|
|
4031
|
-
|
|
4122
|
+
gridProp: "gridColsLaptop",
|
|
4032
4123
|
attr: "col-span--laptop"
|
|
4033
4124
|
}
|
|
4034
4125
|
];
|
|
@@ -4036,16 +4127,16 @@ const _Banner = class _Banner extends VerticallyExtendedElement {
|
|
|
4036
4127
|
"px-grid > px-container"
|
|
4037
4128
|
);
|
|
4038
4129
|
if (value !== null) {
|
|
4039
|
-
breakpoints.forEach(({ prop,
|
|
4130
|
+
breakpoints.forEach(({ prop, gridProp, attr }) => {
|
|
4040
4131
|
if (this[prop]) {
|
|
4041
|
-
this.$grid
|
|
4042
|
-
spanElement
|
|
4132
|
+
this.$grid[gridProp] = "3";
|
|
4133
|
+
spanElement.setAttribute(attr, "2");
|
|
4043
4134
|
}
|
|
4044
4135
|
});
|
|
4045
4136
|
} else {
|
|
4046
|
-
breakpoints.forEach(({
|
|
4047
|
-
this.$grid
|
|
4048
|
-
spanElement
|
|
4137
|
+
breakpoints.forEach(({ gridProp, attr }) => {
|
|
4138
|
+
this.$grid[gridProp] = "1";
|
|
4139
|
+
spanElement.removeAttribute(attr);
|
|
4049
4140
|
});
|
|
4050
4141
|
}
|
|
4051
4142
|
}
|
|
@@ -4197,7 +4288,7 @@ if (!customElements.get("px-banner")) {
|
|
|
4197
4288
|
customElements.define("px-banner", Banner);
|
|
4198
4289
|
}
|
|
4199
4290
|
const breadcrumbCss = `:host{display:block}:host *{box-sizing:border-box}.breadcrumb{font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);margin:calc(var(--px-spacing-s-mobile) * -1) 0 0 0;padding:0}.breadcrumb div[role=list]{display:flex;flex-wrap:wrap;align-items:center}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){display:flex;align-items:center;margin-right:var(--px-spacing-xs-mobile)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{display:inline-block;content:"";width:16px;height:16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90255 3.61987C5.6515 3.8749 5.6515 4.2884 5.90255 4.54343L9.30512 8.00002L5.90255 11.4566C5.6515 11.7116 5.6515 12.1251 5.90255 12.3802C6.1536 12.6352 6.56063 12.6352 6.81169 12.3802L10.6688 8.4618C10.9199 8.20677 10.9199 7.79327 10.6688 7.53823L6.81169 3.61987C6.56063 3.36483 6.1536 3.36483 5.90255 3.61987Z' fill='%23252525'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-neutral-default);margin-left:var(--px-spacing-xs-mobile)}@media screen and (min-width: 48rem){.breadcrumb{margin:calc(var(--px-spacing-s-tablet) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-tablet)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.breadcrumb{margin:calc(var(--px-spacing-s-laptop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-laptop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.breadcrumb{margin:calc(var(--px-spacing-s-desktop) * -1) 0 0 0}.breadcrumb ::slotted(px-breadcrumb-item){margin-top:var(--px-spacing-s-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)){margin-right:var(--px-spacing-xs-desktop)}.breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{margin-left:var(--px-spacing-xs-desktop)}}:host([inverted]) .breadcrumb{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .breadcrumb ::slotted(px-breadcrumb-item:not(:last-child)):after{color:var(--px-color-icon-neutral-inverted)}`;
|
|
4200
|
-
const breadcrumbItemCss =
|
|
4291
|
+
const breadcrumbItemCss = ':host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex;line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-label-m-mobile)}:host ::slotted(px-a[variant="icon-link"][color="inherit"]){color:var(--px-color-icon-accent-default)}@media screen and (min-width: 48rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) ::slotted(px-a[variant="icon-link"][color="inherit"]){color:var(--px-color-icon-neutral-default)}:is():hover{color:var(--px-color-text-state-hover-default)}';
|
|
4201
4292
|
const breadcrumbItemStyles = new CSSStyleSheet();
|
|
4202
4293
|
breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
|
|
4203
4294
|
const BREADCRUMB_ITEM_CONNECTED_EVENT = "px-breadcrumb-item-connected";
|
|
@@ -4352,16 +4443,16 @@ if (!customElements.get("px-breadcrumb")) {
|
|
|
4352
4443
|
}
|
|
4353
4444
|
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-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.btn.header-minimal-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);border:none;padding:0;border-radius:0;background:none}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (max-width: 47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:none;padding:0;border-radius:0;background:none}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{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,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{padding:0}}@media screen and (min-width: 90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{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,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`;
|
|
4354
4445
|
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,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
|
|
4355
|
-
const styles$
|
|
4356
|
-
const styles$
|
|
4446
|
+
const styles$L = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-laptop);font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
|
|
4447
|
+
const styles$K = ":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 screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}}";
|
|
4357
4448
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
4358
4449
|
const linkStyles$2 = new CSSStyleSheet();
|
|
4359
4450
|
const patchStyles = new CSSStyleSheet();
|
|
4360
4451
|
const tagStyles = new CSSStyleSheet();
|
|
4361
4452
|
buttonStyles$1.replaceSync(buttonCss);
|
|
4362
4453
|
linkStyles$2.replaceSync(linkCss);
|
|
4363
|
-
patchStyles.replaceSync(styles$
|
|
4364
|
-
tagStyles.replaceSync(styles$
|
|
4454
|
+
patchStyles.replaceSync(styles$L);
|
|
4455
|
+
tagStyles.replaceSync(styles$K);
|
|
4365
4456
|
const variantValues = [
|
|
4366
4457
|
"",
|
|
4367
4458
|
"default",
|
|
@@ -4518,7 +4609,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4518
4609
|
this._toggleClass(oldValue, newValue);
|
|
4519
4610
|
if (!this.checkName(variantValues, newValue)) {
|
|
4520
4611
|
log(
|
|
4521
|
-
|
|
4612
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${variantValues.join('", "')}".`
|
|
4522
4613
|
);
|
|
4523
4614
|
}
|
|
4524
4615
|
}
|
|
@@ -4527,7 +4618,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4527
4618
|
this._toggleClass(oldValue, newValue);
|
|
4528
4619
|
if (!this.checkName(values, newValue)) {
|
|
4529
4620
|
log(
|
|
4530
|
-
|
|
4621
|
+
`"${newValue}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${values.join('", "')}".`
|
|
4531
4622
|
);
|
|
4532
4623
|
}
|
|
4533
4624
|
}
|
|
@@ -4551,7 +4642,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4551
4642
|
updateShape(attrName, newValue, attrValue) {
|
|
4552
4643
|
if (!checkName(attrValue, newValue)) {
|
|
4553
4644
|
log(
|
|
4554
|
-
|
|
4645
|
+
`"${newValue}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4555
4646
|
);
|
|
4556
4647
|
return;
|
|
4557
4648
|
}
|
|
@@ -4797,7 +4888,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4797
4888
|
updateSize(oldValue, newValue) {
|
|
4798
4889
|
if (!this.checkName(buttonIconSizeValues, newValue)) {
|
|
4799
4890
|
log(
|
|
4800
|
-
|
|
4891
|
+
`"${newValue}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconSizeValues.join('", "')}".`
|
|
4801
4892
|
);
|
|
4802
4893
|
} else {
|
|
4803
4894
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -4811,7 +4902,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4811
4902
|
updateVariant(oldValue, newValue) {
|
|
4812
4903
|
if (!this.checkName(buttonIconVariantValues, newValue)) {
|
|
4813
4904
|
log(
|
|
4814
|
-
|
|
4905
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconVariantValues.join('", "')}".`
|
|
4815
4906
|
);
|
|
4816
4907
|
} else {
|
|
4817
4908
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -4862,9 +4953,9 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4862
4953
|
if (!customElements.get("px-button-icon")) {
|
|
4863
4954
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4864
4955
|
}
|
|
4865
|
-
const styles$
|
|
4866
|
-
const styleSheet$
|
|
4867
|
-
styleSheet$
|
|
4956
|
+
const styles$J = ':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 .card__content>px-vstack{height:100%}.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 screen and (max-width: 48rem){.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 screen and (min-width: 48rem) and (max-width: 64rem){.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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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 screen and (max-width: 47.938rem){: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 screen and (min-width: 48rem) and (max-width: 64rem){: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 screen and (min-width: 64.0625rem){: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}}';
|
|
4957
|
+
const styleSheet$E = new CSSStyleSheet();
|
|
4958
|
+
styleSheet$E.replaceSync(styles$J);
|
|
4868
4959
|
const cardBackgroundColorValues = [
|
|
4869
4960
|
"",
|
|
4870
4961
|
"container-default",
|
|
@@ -4878,7 +4969,7 @@ const paddingPrefix = "px-padding";
|
|
|
4878
4969
|
const _Card = class _Card extends VerticallyExtendedElement {
|
|
4879
4970
|
constructor() {
|
|
4880
4971
|
super(
|
|
4881
|
-
styleSheet$
|
|
4972
|
+
styleSheet$E,
|
|
4882
4973
|
cssTokenBreakpoints(
|
|
4883
4974
|
"padding",
|
|
4884
4975
|
attributeBreakpointCSSSelector$1,
|
|
@@ -5218,7 +5309,7 @@ updateMedia_fn = function(newValue, screenSize) {
|
|
|
5218
5309
|
updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
|
|
5219
5310
|
if (!checkName(attrValue, newValue)) {
|
|
5220
5311
|
log(
|
|
5221
|
-
|
|
5312
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
5222
5313
|
);
|
|
5223
5314
|
return;
|
|
5224
5315
|
}
|
|
@@ -5242,11 +5333,11 @@ let Card = _Card;
|
|
|
5242
5333
|
if (!customElements.get("px-card")) {
|
|
5243
5334
|
customElements.define("px-card", Card);
|
|
5244
5335
|
}
|
|
5245
|
-
const styles$
|
|
5336
|
+
const styles$I = ':host{display:block;--px-carousel-visible-items: 1;--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host *{box-sizing:border-box}:host([visible-items="1"]){--px-carousel-visible-items: 1}:host([visible-items="2"]){--px-carousel-visible-items: 2}:host([visible-items="3"]){--px-carousel-visible-items: 3}:host([visible-items="4"]){--px-carousel-visible-items: 4}:host([visible-items="5"]){--px-carousel-visible-items: 5}:host([visible-items="6"]){--px-carousel-visible-items: 6}:host([visible-items="7"]){--px-carousel-visible-items: 7}:host([visible-items="8"]){--px-carousel-visible-items: 8}:host([visible-items="9"]){--px-carousel-visible-items: 9}:host([visible-items--mobile="1"]){--px-carousel-visible-items--mobile: 1}:host([visible-items--mobile="2"]){--px-carousel-visible-items--mobile: 2}:host([visible-items--mobile="3"]){--px-carousel-visible-items--mobile: 3}:host([visible-items--mobile="4"]){--px-carousel-visible-items--mobile: 4}:host([visible-items--mobile="5"]){--px-carousel-visible-items--mobile: 5}:host([visible-items--mobile="6"]){--px-carousel-visible-items--mobile: 6}:host([visible-items--mobile="7"]){--px-carousel-visible-items--mobile: 7}:host([visible-items--mobile="8"]){--px-carousel-visible-items--mobile: 8}:host([visible-items--mobile="9"]){--px-carousel-visible-items--mobile: 9}:host([visible-items--tablet="1"]){--px-carousel-visible-items--tablet: 1}:host([visible-items--tablet="2"]){--px-carousel-visible-items--tablet: 2}:host([visible-items--tablet="3"]){--px-carousel-visible-items--tablet: 3}:host([visible-items--tablet="4"]){--px-carousel-visible-items--tablet: 4}:host([visible-items--tablet="5"]){--px-carousel-visible-items--tablet: 5}:host([visible-items--tablet="6"]){--px-carousel-visible-items--tablet: 6}:host([visible-items--tablet="7"]){--px-carousel-visible-items--tablet: 7}:host([visible-items--tablet="8"]){--px-carousel-visible-items--tablet: 8}:host([visible-items--tablet="9"]){--px-carousel-visible-items--tablet: 9}:host([visible-items--laptop="1"]){--px-carousel-visible-items--laptop: 1}:host([visible-items--laptop="2"]){--px-carousel-visible-items--laptop: 2}:host([visible-items--laptop="3"]){--px-carousel-visible-items--laptop: 3}:host([visible-items--laptop="4"]){--px-carousel-visible-items--laptop: 4}:host([visible-items--laptop="5"]){--px-carousel-visible-items--laptop: 5}:host([visible-items--laptop="6"]){--px-carousel-visible-items--laptop: 6}:host([visible-items--laptop="7"]){--px-carousel-visible-items--laptop: 7}:host([visible-items--laptop="8"]){--px-carousel-visible-items--laptop: 8}:host([visible-items--laptop="9"]){--px-carousel-visible-items--laptop: 9}:host([visible-items--desktop="1"]){--px-carousel-visible-items--desktop: 1}:host([visible-items--desktop="2"]){--px-carousel-visible-items--desktop: 2}:host([visible-items--desktop="3"]){--px-carousel-visible-items--desktop: 3}:host([visible-items--desktop="4"]){--px-carousel-visible-items--desktop: 4}:host([visible-items--desktop="5"]){--px-carousel-visible-items--desktop: 5}:host([visible-items--desktop="6"]){--px-carousel-visible-items--desktop: 6}:host([visible-items--desktop="7"]){--px-carousel-visible-items--desktop: 7}:host([visible-items--desktop="8"]){--px-carousel-visible-items--desktop: 8}:host([visible-items--desktop="9"]){--px-carousel-visible-items--desktop: 9}:host([gap="default"]){--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host([gap="s"]){--px-carousel-gap-default: var(--px-spacing-s-desktop)}:host([gap="xs"]){--px-carousel-gap-default: var(--px-spacing-xs-desktop)}:host([gap="2xs"]){--px-carousel-gap-default: var(--px-spacing-2xs-desktop)}:host([gap="l"]){--px-carousel-gap-default: var(--px-spacing-l-desktop)}:host([gap="none"]){--px-carousel-gap-default: 0}:host([gap--mobile="default"]){--px-carousel-gap-default--mobile: var(--px-spacing-default-mobile)}:host([gap--mobile="s"]){--px-carousel-gap-default--mobile: var(--px-spacing-s-mobile)}:host([gap--mobile="xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-xs-mobile)}:host([gap--mobile="2xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-2xs-mobile)}:host([gap--mobile="l"]){--px-carousel-gap-default--mobile: var(--px-spacing-l-mobile)}:host([gap--mobile="none"]){--px-carousel-gap-default--mobile: 0}:host([gap--tablet="default"]){--px-carousel-gap-default--tablet: var(--px-spacing-default-tablet)}:host([gap--tablet="s"]){--px-carousel-gap-default--tablet: var(--px-spacing-s-tablet)}:host([gap--tablet="xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-xs-tablet)}:host([gap--tablet="2xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-2xs-tablet)}:host([gap--tablet="l"]){--px-carousel-gap-default--tablet: var(--px-spacing-l-tablet)}:host([gap--tablet="none"]){--px-carousel-gap-default--tablet: 0}:host([gap--laptop="default"]){--px-carousel-gap-default--laptop: var(--px-spacing-default-laptop)}:host([gap--laptop="s"]){--px-carousel-gap-default--laptop: var(--px-spacing-s-laptop)}:host([gap--laptop="xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-xs-laptop)}:host([gap--laptop="2xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-2xs-laptop)}:host([gap--laptop="l"]){--px-carousel-gap-default--laptop: var(--px-spacing-l-laptop)}:host([gap--laptop="none"]){--px-carousel-gap-default--laptop: 0}:host([gap--desktop="default"]){--px-carousel-gap-default--desktop: var(--px-spacing-default-desktop)}:host([gap--desktop="s"]){--px-carousel-gap-default--desktop: var(--px-spacing-s-desktop)}:host([gap--desktop="xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-xs-desktop)}:host([gap--desktop="2xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-2xs-desktop)}:host([gap--desktop="l"]){--px-carousel-gap-default--desktop: var(--px-spacing-l-desktop)}:host([gap--desktop="none"]){--px-carousel-gap-default--desktop: 0}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default))}@media screen and (max-width: 47.938rem){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (max-width: 47.938rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}';
|
|
5246
5337
|
const itemStyles = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;border-radius:var(--px-radius-main);background:#fff;overflow:hidden;--visible-items: var( --px-carousel-visible-items--desktop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--desktop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) );min-width:calc((100% - max(var(--visible-items),2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items),2))}@media screen and (max-width: 47.938rem){:host{--visible-items: var( --px-carousel-visible-items--mobile, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--mobile, var(--px-carousel-gap-default, var(--px-spacing-s-mobile)) )}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host{--visible-items: var( --px-carousel-visible-items--tablet, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--tablet, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host{--visible-items: var( --px-carousel-visible-items--laptop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--laptop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (max-width: 48rem){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}";
|
|
5247
|
-
const styles$
|
|
5248
|
-
const styleSheet$
|
|
5249
|
-
styleSheet$
|
|
5338
|
+
const styles$H = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media screen and (max-width: 47.938rem){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}";
|
|
5339
|
+
const styleSheet$D = new CSSStyleSheet();
|
|
5340
|
+
styleSheet$D.replaceSync(styles$H);
|
|
5250
5341
|
class AppleSeed extends HTMLElement {
|
|
5251
5342
|
constructor() {
|
|
5252
5343
|
super();
|
|
@@ -5261,7 +5352,7 @@ class AppleSeed extends HTMLElement {
|
|
|
5261
5352
|
</div>`;
|
|
5262
5353
|
};
|
|
5263
5354
|
this.attachShadow({ mode: "open" });
|
|
5264
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5355
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$D];
|
|
5265
5356
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
5266
5357
|
}
|
|
5267
5358
|
static get observedAttributes() {
|
|
@@ -5488,8 +5579,8 @@ function throttle(func, wait, options) {
|
|
|
5488
5579
|
"trailing": trailing
|
|
5489
5580
|
});
|
|
5490
5581
|
}
|
|
5491
|
-
const styleSheet$
|
|
5492
|
-
styleSheet$
|
|
5582
|
+
const styleSheet$C = new CSSStyleSheet();
|
|
5583
|
+
styleSheet$C.replaceSync(styles$I);
|
|
5493
5584
|
const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
|
|
5494
5585
|
class Carousel extends HTMLElement {
|
|
5495
5586
|
constructor() {
|
|
@@ -5546,7 +5637,7 @@ class Carousel extends HTMLElement {
|
|
|
5546
5637
|
};
|
|
5547
5638
|
this.attachShadow({ mode: "open" });
|
|
5548
5639
|
this.shadowRoot.innerHTML = this.template;
|
|
5549
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5640
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$C];
|
|
5550
5641
|
}
|
|
5551
5642
|
connectedCallback() {
|
|
5552
5643
|
this.addEventListener(CAROUSEL_ITEM_CONNECTED_EVENT, () => {
|
|
@@ -5665,7 +5756,9 @@ function configureCellBackgroundColor(el) {
|
|
|
5665
5756
|
}
|
|
5666
5757
|
function updateVariant(element, oldValue, newValue) {
|
|
5667
5758
|
if (!checkName(cellVariantValues, newValue)) {
|
|
5668
|
-
log(
|
|
5759
|
+
log(
|
|
5760
|
+
`"${newValue}" is not a valid variant value for a cell. Allowed values are: "${cellVariantValues.join('", "')}".`
|
|
5761
|
+
);
|
|
5669
5762
|
return;
|
|
5670
5763
|
}
|
|
5671
5764
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -5697,7 +5790,7 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
5697
5790
|
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
5698
5791
|
if (!checkName(attrValue, newValue)) {
|
|
5699
5792
|
log(
|
|
5700
|
-
|
|
5793
|
+
`"${newValue}" is not a valid ${attrName} value for a cell. Allowed values are: "${attrValue.join('", "')}".`
|
|
5701
5794
|
);
|
|
5702
5795
|
return;
|
|
5703
5796
|
}
|
|
@@ -5748,11 +5841,11 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
5748
5841
|
}
|
|
5749
5842
|
}
|
|
5750
5843
|
const common$1 = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{width:100%;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media screen and (min-width: 48rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}";
|
|
5751
|
-
const styles$
|
|
5844
|
+
const styles$G = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right;font-weight:var(--px-font-weight-title)}.cell[compact]{padding-block:var(--px-spacing-xs-mobile)}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-container-light-default) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-default)}@media screen and (max-width: 47.938rem){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media screen and (min-width: 48rem){:host{display:block}.cell{padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.cell[compact]{padding-block:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media screen and (min-width: 64.0625rem){:host{display:block}.cell{padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.cell[compact]{padding-block:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media screen and (min-width: 90.0625rem){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="label"]){font-size:var(--px-text-size-label-l-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.cell[compact]{padding-block:var(--px-spacing-xs-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([hoverable][disabled]) .contained{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}';
|
|
5752
5845
|
const commonStyleSheet$b = new CSSStyleSheet();
|
|
5753
|
-
const styleSheet$
|
|
5846
|
+
const styleSheet$B = new CSSStyleSheet();
|
|
5754
5847
|
commonStyleSheet$b.replaceSync(common$1);
|
|
5755
|
-
styleSheet$
|
|
5848
|
+
styleSheet$B.replaceSync(styles$G);
|
|
5756
5849
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
5757
5850
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
5758
5851
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -5777,7 +5870,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
5777
5870
|
`;
|
|
5778
5871
|
}
|
|
5779
5872
|
constructor() {
|
|
5780
|
-
super(styleSheet$
|
|
5873
|
+
super(styleSheet$B, commonStyleSheet$b);
|
|
5781
5874
|
const $root = document.createElement("div");
|
|
5782
5875
|
$root.classList.add("cell");
|
|
5783
5876
|
$root.innerHTML = this.template();
|
|
@@ -5883,7 +5976,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
5883
5976
|
updateRadius(attrName, oldValue, newValue, attrValues) {
|
|
5884
5977
|
if (!checkName(attrValues, newValue)) {
|
|
5885
5978
|
log(
|
|
5886
|
-
|
|
5979
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
5887
5980
|
);
|
|
5888
5981
|
return;
|
|
5889
5982
|
}
|
|
@@ -6055,11 +6148,11 @@ let Cell = _Cell;
|
|
|
6055
6148
|
if (!customElements.get("px-cell")) {
|
|
6056
6149
|
customElements.define("px-cell", Cell);
|
|
6057
6150
|
}
|
|
6058
|
-
const styles$
|
|
6151
|
+
const styles$F = '.cell-link{text-decoration:none}.cell-link[noicon=""] px-icon{display:none}.cell-link px-icon{color:var(--px-color-icon-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}[compact] .cell-link{padding-block:var(--px-spacing-xs-mobile)}:host([inverted]) .cell-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}';
|
|
6059
6152
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6060
6153
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6061
|
-
const styleSheet$
|
|
6062
|
-
styleSheet$
|
|
6154
|
+
const styleSheet$A = new CSSStyleSheet();
|
|
6155
|
+
styleSheet$A.replaceSync(styles$F);
|
|
6063
6156
|
const _CellLink = class _CellLink extends PxElement {
|
|
6064
6157
|
template() {
|
|
6065
6158
|
return `
|
|
@@ -6079,7 +6172,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6079
6172
|
`;
|
|
6080
6173
|
}
|
|
6081
6174
|
constructor() {
|
|
6082
|
-
super(styleSheet$
|
|
6175
|
+
super(styleSheet$A, commonStyleSheet$a);
|
|
6083
6176
|
const $root = document.createElement(_CellLink.nativeName);
|
|
6084
6177
|
$root.classList.add("cell-link");
|
|
6085
6178
|
$root.innerHTML = this.template();
|
|
@@ -6300,11 +6393,11 @@ let CellLink = _CellLink;
|
|
|
6300
6393
|
if (!customElements.get("px-cell-link")) {
|
|
6301
6394
|
customElements.define("px-cell-link", CellLink);
|
|
6302
6395
|
}
|
|
6303
|
-
const styles$
|
|
6396
|
+
const styles$E = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}";
|
|
6304
6397
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6305
6398
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6306
|
-
const styleSheet$
|
|
6307
|
-
styleSheet$
|
|
6399
|
+
const styleSheet$z = new CSSStyleSheet();
|
|
6400
|
+
styleSheet$z.replaceSync(styles$E);
|
|
6308
6401
|
const _CellButton = class _CellButton extends PxElement {
|
|
6309
6402
|
template() {
|
|
6310
6403
|
return `
|
|
@@ -6317,7 +6410,7 @@ const _CellButton = class _CellButton extends PxElement {
|
|
|
6317
6410
|
`;
|
|
6318
6411
|
}
|
|
6319
6412
|
constructor() {
|
|
6320
|
-
super(styleSheet$
|
|
6413
|
+
super(styleSheet$z, commonStyleSheet$9);
|
|
6321
6414
|
const $root = document.createElement(_CellButton.nativeName);
|
|
6322
6415
|
$root.classList.add("cell-button");
|
|
6323
6416
|
$root.innerHTML = this.template();
|
|
@@ -6601,7 +6694,7 @@ const _Checkbox = class _Checkbox extends PxElement {
|
|
|
6601
6694
|
var _a, _b;
|
|
6602
6695
|
if (!this.checkName(attrValue, newValue)) {
|
|
6603
6696
|
log(
|
|
6604
|
-
|
|
6697
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
6605
6698
|
);
|
|
6606
6699
|
return;
|
|
6607
6700
|
}
|
|
@@ -6824,7 +6917,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6824
6917
|
if (this.$checkbox) {
|
|
6825
6918
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
6826
6919
|
log(
|
|
6827
|
-
|
|
6920
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
|
|
6828
6921
|
);
|
|
6829
6922
|
return;
|
|
6830
6923
|
} else {
|
|
@@ -6903,7 +6996,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6903
6996
|
handleCheckboxPositionChange(newValue) {
|
|
6904
6997
|
if (!this.checkName(cellCheckboxPosition, newValue)) {
|
|
6905
6998
|
log(
|
|
6906
|
-
|
|
6999
|
+
`"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellCheckboxPosition.join('", "')}".`
|
|
6907
7000
|
);
|
|
6908
7001
|
return;
|
|
6909
7002
|
}
|
|
@@ -7122,7 +7215,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7122
7215
|
return `
|
|
7123
7216
|
<div class="cell-switch">
|
|
7124
7217
|
<px-cell hoverable>
|
|
7125
|
-
<px-switch slot="action-indicator"
|
|
7218
|
+
<px-switch slot="action-indicator" aria-hidden="true" tabindex="-1"></px-switch>
|
|
7126
7219
|
<slot name="visual" slot="visual"></slot>
|
|
7127
7220
|
<slot name="label" slot="label"></slot>
|
|
7128
7221
|
<slot name="description" slot="description"></slot>
|
|
@@ -7622,7 +7715,7 @@ class Radio extends RadioBase {
|
|
|
7622
7715
|
var _a, _b;
|
|
7623
7716
|
if (!this.checkName(attrValue, newValue)) {
|
|
7624
7717
|
log(
|
|
7625
|
-
|
|
7718
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7626
7719
|
);
|
|
7627
7720
|
return;
|
|
7628
7721
|
}
|
|
@@ -7875,7 +7968,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
7875
7968
|
updateVariant(oldValue, newValue, attrValue) {
|
|
7876
7969
|
if (!this.checkName(attrValue, newValue)) {
|
|
7877
7970
|
log(
|
|
7878
|
-
|
|
7971
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7879
7972
|
);
|
|
7880
7973
|
return;
|
|
7881
7974
|
}
|
|
@@ -7892,7 +7985,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
7892
7985
|
updateGap(oldValue, newValue, attrValue) {
|
|
7893
7986
|
if (!this.checkName(attrValue, newValue)) {
|
|
7894
7987
|
log(
|
|
7895
|
-
|
|
7988
|
+
`"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7896
7989
|
);
|
|
7897
7990
|
return;
|
|
7898
7991
|
}
|
|
@@ -8016,7 +8109,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8016
8109
|
return `
|
|
8017
8110
|
<div class="cell-radio">
|
|
8018
8111
|
<px-cell hoverable>
|
|
8019
|
-
<px-radio slot="prefix"
|
|
8112
|
+
<px-radio slot="prefix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
8020
8113
|
<slot name="visual" slot="visual"></slot>
|
|
8021
8114
|
<slot name="label" slot="label"></slot>
|
|
8022
8115
|
<slot name="description" slot="description"></slot>
|
|
@@ -8134,7 +8227,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8134
8227
|
if (this.$radio) {
|
|
8135
8228
|
if (!this.checkName(stateValues, newValue)) {
|
|
8136
8229
|
log(
|
|
8137
|
-
|
|
8230
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
|
|
8138
8231
|
);
|
|
8139
8232
|
return;
|
|
8140
8233
|
} else {
|
|
@@ -8215,7 +8308,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8215
8308
|
handleRadioPositionChange(newValue) {
|
|
8216
8309
|
if (!this.checkName(cellRadioPosition, newValue)) {
|
|
8217
8310
|
log(
|
|
8218
|
-
|
|
8311
|
+
`"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellRadioPosition.join('", "')}".`
|
|
8219
8312
|
);
|
|
8220
8313
|
return;
|
|
8221
8314
|
}
|
|
@@ -8427,9 +8520,9 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8427
8520
|
if (!customElements.get("px-cell-radio")) {
|
|
8428
8521
|
customElements.define("px-cell-radio", CellRadio);
|
|
8429
8522
|
}
|
|
8430
|
-
const styles$
|
|
8431
|
-
const styleSheet$
|
|
8432
|
-
styleSheet$
|
|
8523
|
+
const styles$D = ':host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option{display:inline-block;width:32px;height:32px!important;border-radius:var(--px-radius-pill);background-color:var(--color-option-device-color);border:var(--px-size-border-m) var(--px-color-border-main-default) solid}.color-option[unavailable]{position:relative}.color-option[unavailable]:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:44px;height:var(--px-size-border-m);background-color:var(--px-color-border-neutral-default)}.color-option--size-small{width:16px;height:16px!important;border-width:var(--px-size-border-s)}.color-option--size-small[unavailable]:before{width:22px;height:var(--px-size-border-s)}';
|
|
8524
|
+
const styleSheet$y = new CSSStyleSheet();
|
|
8525
|
+
styleSheet$y.replaceSync(styles$D);
|
|
8433
8526
|
const colorOptionSizeValues = ["", "default", "small"];
|
|
8434
8527
|
const _ColorOption = class _ColorOption extends PxElement {
|
|
8435
8528
|
template() {
|
|
@@ -8438,7 +8531,7 @@ const _ColorOption = class _ColorOption extends PxElement {
|
|
|
8438
8531
|
`;
|
|
8439
8532
|
}
|
|
8440
8533
|
constructor() {
|
|
8441
|
-
super(styleSheet$
|
|
8534
|
+
super(styleSheet$y);
|
|
8442
8535
|
const $root = document.createElement("div");
|
|
8443
8536
|
$root.classList.add("color-option");
|
|
8444
8537
|
$root.innerHTML = this.template();
|
|
@@ -8468,7 +8561,7 @@ const _ColorOption = class _ColorOption extends PxElement {
|
|
|
8468
8561
|
updateSize(attrName, oldValue, newValue, attrValues) {
|
|
8469
8562
|
if (!checkName(attrValues, newValue)) {
|
|
8470
8563
|
log(
|
|
8471
|
-
|
|
8564
|
+
`"${newValue}" is not a valid ${attrName} value for a color option. Allowed values are: "${attrValues.join('", "')}".`
|
|
8472
8565
|
);
|
|
8473
8566
|
return;
|
|
8474
8567
|
}
|
|
@@ -8523,9 +8616,9 @@ let ColorOption = _ColorOption;
|
|
|
8523
8616
|
if (!customElements.get("px-color-option")) {
|
|
8524
8617
|
customElements.define("px-color-option", ColorOption);
|
|
8525
8618
|
}
|
|
8526
|
-
const styles$
|
|
8527
|
-
const styleSheet$
|
|
8528
|
-
styleSheet$
|
|
8619
|
+
const styles$C = ":host{display:inline-block;line-height:0}:host *{box-sizing:border-box}.color-option-link{display:inline-block;text-decoration:none;padding:var(--px-padding-2xs-mobile);border-radius:var(--px-radius-pill);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.color-option-link[selected]{box-shadow:inset 0 0 0 var(--px-size-border-m) var(--px-color-border-brand-default)}.color-option-link:hover{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-neutral-default)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (min-width: 48rem){.color-option-link{padding:var(--px-padding-2xs-tablet)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){.color-option-link{padding:var(--px-padding-2xs-laptop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){.color-option-link{padding:var(--px-padding-2xs-desktop)}.color-option-link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
8620
|
+
const styleSheet$x = new CSSStyleSheet();
|
|
8621
|
+
styleSheet$x.replaceSync(styles$C);
|
|
8529
8622
|
const CLICK_EVENT = "px.lavender.color-option-link.click";
|
|
8530
8623
|
const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
8531
8624
|
template() {
|
|
@@ -8534,7 +8627,7 @@ const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
|
8534
8627
|
`;
|
|
8535
8628
|
}
|
|
8536
8629
|
constructor() {
|
|
8537
|
-
super(styleSheet$
|
|
8630
|
+
super(styleSheet$x);
|
|
8538
8631
|
const $root = document.createElement(_ColorOptionLink.nativeName);
|
|
8539
8632
|
$root.classList.add("color-option-link");
|
|
8540
8633
|
$root.innerHTML = this.template();
|
|
@@ -8620,12 +8713,12 @@ if (!customElements.get("px-color-option-link")) {
|
|
|
8620
8713
|
customElements.define("px-color-option-link", ColorOptionLink);
|
|
8621
8714
|
}
|
|
8622
8715
|
const contentHeaderCss = ":host{--min-height--mobile: 15.625rem;--min-height--tablet: 17.5rem;--min-height--laptop: 17.5rem;--min-height--desktop: 17.5rem}: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 screen and (min-width: 48rem){.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 screen and (min-width: 64.0625rem){.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))}}";
|
|
8623
|
-
const styles$
|
|
8624
|
-
const styleSheet$
|
|
8625
|
-
styleSheet$
|
|
8626
|
-
class Section extends
|
|
8716
|
+
const styles$B = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}';
|
|
8717
|
+
const styleSheet$w = new CSSStyleSheet();
|
|
8718
|
+
styleSheet$w.replaceSync(styles$B);
|
|
8719
|
+
class Section extends WithExtraAttributes {
|
|
8627
8720
|
constructor() {
|
|
8628
|
-
super();
|
|
8721
|
+
super(styleSheet$w);
|
|
8629
8722
|
this.template = () => `
|
|
8630
8723
|
<px-container border-radius="none" padding-inline="none">
|
|
8631
8724
|
<div class="content-wrapper">
|
|
@@ -8641,9 +8734,7 @@ class Section extends HTMLElement {
|
|
|
8641
8734
|
<slot name="overlap"></slot>
|
|
8642
8735
|
</div>
|
|
8643
8736
|
`;
|
|
8644
|
-
this.attachShadow({ mode: "open" });
|
|
8645
8737
|
this.shadowRoot.innerHTML = this.template();
|
|
8646
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$t];
|
|
8647
8738
|
}
|
|
8648
8739
|
connectedCallback() {
|
|
8649
8740
|
var _a, _b;
|
|
@@ -8663,6 +8754,7 @@ class Section extends HTMLElement {
|
|
|
8663
8754
|
}
|
|
8664
8755
|
static get observedAttributes() {
|
|
8665
8756
|
return [
|
|
8757
|
+
...super.observedAttributes,
|
|
8666
8758
|
"background-color",
|
|
8667
8759
|
"background-gradient",
|
|
8668
8760
|
"background-image",
|
|
@@ -8768,6 +8860,9 @@ class Section extends HTMLElement {
|
|
|
8768
8860
|
case "border-side--laptop":
|
|
8769
8861
|
this.$container.borderSideLaptop = newValue;
|
|
8770
8862
|
break;
|
|
8863
|
+
default:
|
|
8864
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
8865
|
+
break;
|
|
8771
8866
|
}
|
|
8772
8867
|
}
|
|
8773
8868
|
}
|
|
@@ -9052,7 +9147,7 @@ class AbstractHeading extends PxElement {
|
|
|
9052
9147
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
9053
9148
|
if (!this.checkName(attrValue, newValue)) {
|
|
9054
9149
|
log(
|
|
9055
|
-
|
|
9150
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9056
9151
|
);
|
|
9057
9152
|
} else {
|
|
9058
9153
|
this.toggleClass(oldValue, newValue);
|
|
@@ -9061,7 +9156,7 @@ class AbstractHeading extends PxElement {
|
|
|
9061
9156
|
updateColor(oldValue, newValue, attrValue) {
|
|
9062
9157
|
if (!this.checkName(attrValue, newValue)) {
|
|
9063
9158
|
log(
|
|
9064
|
-
|
|
9159
|
+
`"${newValue}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9065
9160
|
);
|
|
9066
9161
|
return;
|
|
9067
9162
|
}
|
|
@@ -9083,7 +9178,7 @@ class AbstractHeading extends PxElement {
|
|
|
9083
9178
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
9084
9179
|
if (!this.checkName(attrValue, newValue)) {
|
|
9085
9180
|
log(
|
|
9086
|
-
|
|
9181
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9087
9182
|
);
|
|
9088
9183
|
return;
|
|
9089
9184
|
}
|
|
@@ -9537,9 +9632,9 @@ let ContentHeader = _ContentHeader;
|
|
|
9537
9632
|
if (!customElements.get("px-content-header")) {
|
|
9538
9633
|
customElements.define("px-content-header", ContentHeader);
|
|
9539
9634
|
}
|
|
9540
|
-
const styles$
|
|
9541
|
-
const styleSheet$
|
|
9542
|
-
styleSheet$
|
|
9635
|
+
const styles$A = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
|
|
9636
|
+
const styleSheet$v = new CSSStyleSheet();
|
|
9637
|
+
styleSheet$v.replaceSync(styles$A);
|
|
9543
9638
|
const separatorDirectionValues = [
|
|
9544
9639
|
"",
|
|
9545
9640
|
"default",
|
|
@@ -9563,7 +9658,7 @@ const separatorColorValues = [
|
|
|
9563
9658
|
const _Separator = class _Separator extends PxElement {
|
|
9564
9659
|
constructor() {
|
|
9565
9660
|
var _a;
|
|
9566
|
-
super(styleSheet$
|
|
9661
|
+
super(styleSheet$v);
|
|
9567
9662
|
const $root = document.createElement(_Separator.nativeName);
|
|
9568
9663
|
$root.classList.add("separator");
|
|
9569
9664
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
@@ -9620,7 +9715,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9620
9715
|
};
|
|
9621
9716
|
if (!this.checkName(attrValue, newValue)) {
|
|
9622
9717
|
log(
|
|
9623
|
-
|
|
9718
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9624
9719
|
);
|
|
9625
9720
|
} else {
|
|
9626
9721
|
updateSizeStyle(oldValue);
|
|
@@ -9642,7 +9737,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9642
9737
|
};
|
|
9643
9738
|
if (!this.checkName(attrValue, newValue)) {
|
|
9644
9739
|
log(
|
|
9645
|
-
|
|
9740
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9646
9741
|
);
|
|
9647
9742
|
} else {
|
|
9648
9743
|
updateColorStyle(oldValue);
|
|
@@ -9657,7 +9752,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9657
9752
|
};
|
|
9658
9753
|
if (!this.checkName(attrValue, newValue)) {
|
|
9659
9754
|
log(
|
|
9660
|
-
|
|
9755
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9661
9756
|
);
|
|
9662
9757
|
} else {
|
|
9663
9758
|
if (attrName === "direction") {
|
|
@@ -9739,9 +9834,9 @@ let Separator = _Separator;
|
|
|
9739
9834
|
if (!customElements.get("px-separator")) {
|
|
9740
9835
|
customElements.define("px-separator", Separator);
|
|
9741
9836
|
}
|
|
9742
|
-
const styles$
|
|
9743
|
-
const styleSheet$
|
|
9744
|
-
styleSheet$
|
|
9837
|
+
const styles$z = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog{width:75%;height:100%;margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{max-height:100%;height:100%;margin:0 auto 0 0}:host([showfrom="left"]) dialog{width:75%;height:100%;margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}';
|
|
9838
|
+
const styleSheet$u = new CSSStyleSheet();
|
|
9839
|
+
styleSheet$u.replaceSync(styles$z);
|
|
9745
9840
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
9746
9841
|
class Drawer extends HTMLElement {
|
|
9747
9842
|
constructor() {
|
|
@@ -9779,7 +9874,7 @@ class Drawer extends HTMLElement {
|
|
|
9779
9874
|
</dialog>`;
|
|
9780
9875
|
this.attachShadow({ mode: "open" });
|
|
9781
9876
|
this.shadowRoot.innerHTML = this.template;
|
|
9782
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
9877
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$u];
|
|
9783
9878
|
}
|
|
9784
9879
|
connectedCallback() {
|
|
9785
9880
|
var _a;
|
|
@@ -9969,7 +10064,7 @@ class Drawer extends HTMLElement {
|
|
|
9969
10064
|
if (!customElements.get("px-drawer")) {
|
|
9970
10065
|
customElements.define("px-drawer", Drawer);
|
|
9971
10066
|
}
|
|
9972
|
-
const styles$
|
|
10067
|
+
const styles$y = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
|
|
9973
10068
|
const anchorAlignmentValues = [
|
|
9974
10069
|
"top-left",
|
|
9975
10070
|
"top-right",
|
|
@@ -10011,7 +10106,7 @@ function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-lef
|
|
|
10011
10106
|
});
|
|
10012
10107
|
}
|
|
10013
10108
|
const stylesheet$8 = new CSSStyleSheet();
|
|
10014
|
-
stylesheet$8.replaceSync(styles$
|
|
10109
|
+
stylesheet$8.replaceSync(styles$y);
|
|
10015
10110
|
const defaultAnchorAlignment = "bottom-left";
|
|
10016
10111
|
class Dropdown extends WithExtraAttributes {
|
|
10017
10112
|
constructor() {
|
|
@@ -10530,7 +10625,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10530
10625
|
}
|
|
10531
10626
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
10532
10627
|
log(
|
|
10533
|
-
|
|
10628
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
|
|
10534
10629
|
);
|
|
10535
10630
|
}
|
|
10536
10631
|
if (newValue === "icon-link") {
|
|
@@ -10540,7 +10635,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10540
10635
|
updateShape(attrName, newValue, attrValue) {
|
|
10541
10636
|
if (!checkName(attrValue, newValue)) {
|
|
10542
10637
|
log(
|
|
10543
|
-
|
|
10638
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10544
10639
|
);
|
|
10545
10640
|
return;
|
|
10546
10641
|
}
|
|
@@ -10557,7 +10652,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10557
10652
|
}
|
|
10558
10653
|
if (!this.checkName(attrValue, newValue)) {
|
|
10559
10654
|
log(
|
|
10560
|
-
|
|
10655
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10561
10656
|
);
|
|
10562
10657
|
}
|
|
10563
10658
|
}
|
|
@@ -10804,7 +10899,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
10804
10899
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
10805
10900
|
if (!this.checkName(attrValue, newValue)) {
|
|
10806
10901
|
log(
|
|
10807
|
-
|
|
10902
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10808
10903
|
);
|
|
10809
10904
|
} else {
|
|
10810
10905
|
this.toggleClass(oldValue, newValue);
|
|
@@ -10813,7 +10908,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
10813
10908
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
10814
10909
|
if (!this.checkName(attrValue, newValue)) {
|
|
10815
10910
|
log(
|
|
10816
|
-
|
|
10911
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10817
10912
|
);
|
|
10818
10913
|
} else {
|
|
10819
10914
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -10955,12 +11050,12 @@ let FooterSitemap = _FooterSitemap;
|
|
|
10955
11050
|
if (!customElements.get("px-footer-sitemap")) {
|
|
10956
11051
|
customElements.define("px-footer-sitemap", FooterSitemap);
|
|
10957
11052
|
}
|
|
10958
|
-
const styles$
|
|
10959
|
-
const styleSheet$
|
|
10960
|
-
styleSheet$
|
|
11053
|
+
const styles$x = ":host,:host>*{display:block;box-sizing:border-box}::slotted(ul){margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}::slotted(ul.link-list-img){display:flex;flex-wrap:wrap;flex-direction:row;gap:20px}";
|
|
11054
|
+
const styleSheet$t = new CSSStyleSheet();
|
|
11055
|
+
styleSheet$t.replaceSync(styles$x);
|
|
10961
11056
|
const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
|
|
10962
11057
|
constructor() {
|
|
10963
|
-
super(styleSheet$
|
|
11058
|
+
super(styleSheet$t);
|
|
10964
11059
|
this.templateMobile = () => `<div role="listitem">
|
|
10965
11060
|
<px-accordion ${this.inverted ? "inverted" : ""}>
|
|
10966
11061
|
<span slot="title"><slot name="links-list-title"></slot></span>
|
|
@@ -11046,9 +11141,9 @@ let FooterSitemapItem = _FooterSitemapItem;
|
|
|
11046
11141
|
if (!customElements.get("px-footer-sitemap-item")) {
|
|
11047
11142
|
customElements.define("px-footer-sitemap-item", FooterSitemapItem);
|
|
11048
11143
|
}
|
|
11049
|
-
const styles$
|
|
11144
|
+
const styles$w = ":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:32px 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)}:host([current]) button,button:hover,:host([current]) a,a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default);padding-block:30px}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 screen and (min-width: 48rem){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 screen and (min-width: 64.0625rem){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 screen and (min-width: 90.0625rem){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)}}";
|
|
11050
11145
|
const stylesheet$7 = new CSSStyleSheet();
|
|
11051
|
-
stylesheet$7.replaceSync(styles$
|
|
11146
|
+
stylesheet$7.replaceSync(styles$w);
|
|
11052
11147
|
class HeaderItem extends WithExtraAttributes {
|
|
11053
11148
|
constructor() {
|
|
11054
11149
|
var _a;
|
|
@@ -11059,15 +11154,15 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11059
11154
|
this.shadowRoot.innerHTML = this.template();
|
|
11060
11155
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$7];
|
|
11061
11156
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11062
|
-
this.role = "listitem";
|
|
11063
11157
|
if (this.internals) {
|
|
11064
11158
|
this.internals.role = "listitem";
|
|
11065
11159
|
}
|
|
11066
11160
|
}
|
|
11067
11161
|
static get observedAttributes() {
|
|
11068
|
-
return ["for", "href"];
|
|
11162
|
+
return ["for", "href", "current"];
|
|
11069
11163
|
}
|
|
11070
11164
|
connectedCallback() {
|
|
11165
|
+
this.role = "listitem";
|
|
11071
11166
|
this.setAttribute("slot", "header-entries");
|
|
11072
11167
|
if (this.$button) {
|
|
11073
11168
|
this.setupButtonA11y();
|
|
@@ -11086,9 +11181,9 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11086
11181
|
}
|
|
11087
11182
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
11088
11183
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
11089
|
-
if (name === "href" &&
|
|
11184
|
+
if (name === "href" && oldValue !== newValue) {
|
|
11090
11185
|
this.shadowRoot.innerHTML = this.template();
|
|
11091
|
-
} else if (name === "for" && this.$button
|
|
11186
|
+
} else if (name === "for" && oldValue !== newValue && this.$button) {
|
|
11092
11187
|
this.shadowRoot.innerHTML = this.template();
|
|
11093
11188
|
this.setupButtonA11y();
|
|
11094
11189
|
}
|
|
@@ -11123,6 +11218,16 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11123
11218
|
this.$button.setAttribute("aria-controls", this.for);
|
|
11124
11219
|
}
|
|
11125
11220
|
}
|
|
11221
|
+
get current() {
|
|
11222
|
+
return this.hasAttribute("current");
|
|
11223
|
+
}
|
|
11224
|
+
set current(value) {
|
|
11225
|
+
if (value) {
|
|
11226
|
+
this.setAttribute("current", "");
|
|
11227
|
+
} else {
|
|
11228
|
+
this.removeAttribute("current");
|
|
11229
|
+
}
|
|
11230
|
+
}
|
|
11126
11231
|
get $button() {
|
|
11127
11232
|
return this.shadowRoot.querySelector("button");
|
|
11128
11233
|
}
|
|
@@ -11152,9 +11257,9 @@ class MDDLink extends HTMLElement {
|
|
|
11152
11257
|
if (!customElements.get("px-mdd-a")) {
|
|
11153
11258
|
customElements.define("px-mdd-a", MDDLink);
|
|
11154
11259
|
}
|
|
11155
|
-
const styles$
|
|
11260
|
+
const styles$v = "#navigation-container{border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}#dropdown-zone--desktop{display:none}#primary-navigation{display:none;margin:0;padding:0}#panel-container{position:absolute;top:0;left:0;right:0;z-index:999}#backdrop-filter{display:none;position:absolute;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (min-width: 48rem){#dropdown-zone--desktop{display:flex;justify-content:space-between;align-items:center;margin-block:var(--px-padding-s-tablet)}#primary-navigation{display:block}#panel-container{top:auto}}@media screen and (min-width: 64.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){#dropdown-zone--desktop{margin-block:var(--px-padding-s-desktop)}}";
|
|
11156
11261
|
const stylesheet$6 = new CSSStyleSheet();
|
|
11157
|
-
stylesheet$6.replaceSync(styles$
|
|
11262
|
+
stylesheet$6.replaceSync(styles$v);
|
|
11158
11263
|
const menuAriaLabel = "Menu";
|
|
11159
11264
|
class Header extends WithExtraAttributes {
|
|
11160
11265
|
constructor() {
|
|
@@ -11208,12 +11313,12 @@ class Header extends WithExtraAttributes {
|
|
|
11208
11313
|
});
|
|
11209
11314
|
this.shadowRoot.innerHTML = this.template;
|
|
11210
11315
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11211
|
-
this.role = "navigation";
|
|
11212
11316
|
if (this.internals) {
|
|
11213
11317
|
this.internals.role = "navigation";
|
|
11214
11318
|
}
|
|
11215
11319
|
}
|
|
11216
11320
|
connectedCallback() {
|
|
11321
|
+
this.role = "navigation";
|
|
11217
11322
|
this.addEventListener("click", (event) => {
|
|
11218
11323
|
const targetElement = event.target.closest(
|
|
11219
11324
|
"px-header-item"
|
|
@@ -11534,8 +11639,8 @@ if (!customElements.get("px-header-mobile-menu")) {
|
|
|
11534
11639
|
customElements.define("px-header-mobile-menu", HeaderMobileMenu);
|
|
11535
11640
|
}
|
|
11536
11641
|
const imgCss = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2) grayscale(100%)}@media screen and (max-width: 47.938rem){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media screen and (min-width: 48rem) and (max-width: 64rem){img{width:var(--img-width--tablet, auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media screen and (min-width: 64.0625rem){img{width:var(--img-width--laptop, auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media screen and (min-width: 90.0625rem){img{width:var(--img-width--desktop, auto)}}";
|
|
11537
|
-
const styleSheet$
|
|
11538
|
-
styleSheet$
|
|
11642
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
11643
|
+
styleSheet$s.replaceSync(imgCss);
|
|
11539
11644
|
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
11540
11645
|
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
11541
11646
|
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
@@ -11549,7 +11654,7 @@ const imageCssTokenBreakpoints = cssTokenBreakpoints(
|
|
|
11549
11654
|
);
|
|
11550
11655
|
const _AbstractImage = class _AbstractImage extends PxElement {
|
|
11551
11656
|
constructor() {
|
|
11552
|
-
super(styleSheet$
|
|
11657
|
+
super(styleSheet$s, imageCssTokenBreakpoints);
|
|
11553
11658
|
}
|
|
11554
11659
|
static get observedAttributes() {
|
|
11555
11660
|
return [
|
|
@@ -11613,7 +11718,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
|
|
|
11613
11718
|
updateWidth(attrName, oldValue, newValue, attrValues) {
|
|
11614
11719
|
if (!this.checkName(attrValues, newValue)) {
|
|
11615
11720
|
log(
|
|
11616
|
-
|
|
11721
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
11617
11722
|
);
|
|
11618
11723
|
return;
|
|
11619
11724
|
}
|
|
@@ -11654,7 +11759,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
|
|
|
11654
11759
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
11655
11760
|
if (!this.checkName(attrValues, newValue)) {
|
|
11656
11761
|
log(
|
|
11657
|
-
|
|
11762
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
11658
11763
|
);
|
|
11659
11764
|
} else {
|
|
11660
11765
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -11821,7 +11926,7 @@ const _Image = class _Image extends AbstractImage {
|
|
|
11821
11926
|
};
|
|
11822
11927
|
_Image.nativeName = "img";
|
|
11823
11928
|
let Image = _Image;
|
|
11824
|
-
if (!customElements.get("px-
|
|
11929
|
+
if (!customElements.get("px-img")) {
|
|
11825
11930
|
customElements.define("px-img", Image);
|
|
11826
11931
|
}
|
|
11827
11932
|
const _Picture = class _Picture extends AbstractImage {
|
|
@@ -11981,9 +12086,9 @@ let Picture = _Picture;
|
|
|
11981
12086
|
if (!customElements.get("px-picture")) {
|
|
11982
12087
|
customElements.define("px-picture", Picture);
|
|
11983
12088
|
}
|
|
11984
|
-
const styles$s = `:host{display:block;--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' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M0.243245 0.243088C0.567528 -0.0810742 1.09324 -0.0810226 1.41746 0.243203L7.71429 6.54016L14.0111 0.243203C14.3353 -0.0810226 14.861 -0.0810742 15.1853 0.243088C15.5096 0.567249 15.5097 1.09287 15.1854 1.4171L8.88839 7.71429L15.1854 14.0115C15.5097 14.3357 15.5096 14.8613 15.1853 15.1855C14.861 15.5096 14.3353 15.5096 14.0111 15.1854L7.71429 8.88841L1.41746 15.1854C1.09324 15.5096 0.567528 15.5096 0.243245 15.1855C-0.0810368 14.8613 -0.0810884 14.3357 0.24313 14.0115L6.54019 7.71429L0.24313 1.4171C-0.0810884 1.09287 -0.0810368 0.567249 0.243245 0.243088Z' 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: 1em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}label{all:unset;font-size:var(--px-font-size-base);line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,:host([auto-complete]) input,#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) calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) 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}input:not([type=file]).extended,textarea.extended,select.extended,:host([auto-complete]) input.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,:host([auto-complete]) input:hover,:host([auto-complete]) input.error:hover,:host([auto-complete]) input.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]),:host([auto-complete]) input: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,:host([auto-complete]) input: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),:host([auto-complete]) input:disabled,:host([auto-complete]) input: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,:host([auto-complete]) input.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,:host([auto-complete]) input.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=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=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=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,:host([auto-complete]) input[type=search].success,:host([auto-complete]) input[type=search].error,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,:host([auto-complete]) input#input-file-container.success,:host([auto-complete]) input#input-file-container.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 calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,:host([auto-complete]) input[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,:host([auto-complete]) input[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],:host([auto-complete]) input[type=date],:host([auto-complete]) input[type=datetime-local],:host([auto-complete]) input[type=month],:host([auto-complete]) input[type=week],:host([auto-complete]) input[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,:host([auto-complete]) input[type=date]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=datetime-local]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=month]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=week]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].error,:host([auto-complete]) input[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,input:not([type=file])[type=time].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,textarea[type=time].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,select[type=time].success,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].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,#input-file-container[type=time].success{background-image:var(--icon-success)}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,input:not([type=file])[type=time].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,textarea[type=time].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,select[type=time].error,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=time].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,#input-file-container[type=time].error{background-image:var(--icon-error)}input:not([type=file])[type=search],textarea[type=search],select[type=search],:host([auto-complete]) input[type=search],#input-file-container[type=search]{background-image:var(--icon-search);padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}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,:host([auto-complete]) input[type=search]:focus-visible::-webkit-search-cancel-button,:host([auto-complete]) input[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;margin-right:calc((var(--px-padding-s-mobile) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-mobile)}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],:host([auto-complete]) input[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::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:0;margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible,:host([auto-complete]) input[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].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,:host([auto-complete]) input[type=search].success:hover,:host([auto-complete]) input[type=search].success:focus-visible,:host([auto-complete]) input[type=search].error:hover,:host([auto-complete]) input[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,:host([auto-complete]) input[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,:host([auto-complete]) input[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),:host([auto-complete]) input: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) + var(--px-size-icon-s))}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,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,#input-file-container:is(select).success,#input-file-container:is(select).error{padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,:host([auto-complete]) input: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,:host([auto-complete]) input: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),:host([auto-complete]) input: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,:host([auto-complete]) input:is(textarea).success,:host([auto-complete]) input:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5rem right 1rem}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,:host([auto-complete]) input#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,:host([auto-complete]) input#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,textarea#input-file-container.success,select#input-file-container.success,:host([auto-complete]) input#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,:host([auto-complete]) input#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-mobile) + 2 * var(--px-padding-xs-mobile) + var(--px-size-icon-s) );background-image:var(--icon-search);padding-right:var(--autocomplete-search-icon-width);background-position:center right 1rem}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}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;font-size:var(--px-text-size-label-s-mobile)}#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 screen and (max-width: 47.938rem){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,:host([auto-complete]) input.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (min-width: 48rem) and (max-width: 64rem){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,:host([auto-complete]) input.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (min-width: 48rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-tablet) + 2 * var(--px-padding-xs-tablet) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) 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)}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])[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=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=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=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 calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}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;margin-right:calc((var(--px-padding-s-tablet) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-tablet)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-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) + var(--px-size-icon-s))}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) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}slot[name=helper]{font-size:var(--px-text-size-label-s-tablet)}#container{gap:var(--px-spacing-xs-tablet)}#label-helper{gap:var(--px-spacing-2xs-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,:host([auto-complete]) input.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (min-width: 64.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-laptop) + 2 * var(--px-padding-xs-laptop) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) 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)}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=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=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=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 calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}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;margin-right:calc((var(--px-padding-s-laptop) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-laptop)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}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-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-laptop)}slot{font-size:var(--px-text-size-label-m-laptop)}slot[name=helper]{font-size:var(--px-text-size-label-s-laptop)}#container{gap:var(--px-spacing-xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-laptop)}}@media screen and (min-width: 90.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-desktop) + 2 * var(--px-padding-xs-desktop) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}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-desktop);outline-width:var(--px-focus-outline-desktop)}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=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=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=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 calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)),center right var(--px-padding-s-desktop)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}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;margin-right:calc((var(--px-padding-s-desktop) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-desktop)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}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) + var(--px-size-icon-s))}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) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-desktop)}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%}slot{font-size:var(--px-text-size-label-m-desktop)}slot[name=helper]{font-size:var(--px-text-size-label-s-desktop)}#container{gap:var(--px-spacing-xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}`;
|
|
12089
|
+
const styles$u = `:host{display:block;--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' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M0.243245 0.243088C0.567528 -0.0810742 1.09324 -0.0810226 1.41746 0.243203L7.71429 6.54016L14.0111 0.243203C14.3353 -0.0810226 14.861 -0.0810742 15.1853 0.243088C15.5096 0.567249 15.5097 1.09287 15.1854 1.4171L8.88839 7.71429L15.1854 14.0115C15.5097 14.3357 15.5096 14.8613 15.1853 15.1855C14.861 15.5096 14.3353 15.5096 14.0111 15.1854L7.71429 8.88841L1.41746 15.1854C1.09324 15.5096 0.567528 15.5096 0.243245 15.1855C-0.0810368 14.8613 -0.0810884 14.3357 0.24313 14.0115L6.54019 7.71429L0.24313 1.4171C-0.0810884 1.09287 -0.0810368 0.567249 0.243245 0.243088Z' 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: 1em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}label{all:unset;font-size:var(--px-font-size-base);line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,:host([auto-complete]) input,#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) calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) 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}input:not([type=file]).extended,textarea.extended,select.extended,:host([auto-complete]) input.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,:host([auto-complete]) input:hover,:host([auto-complete]) input.error:hover,:host([auto-complete]) input.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]),:host([auto-complete]) input: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,:host([auto-complete]) input: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),:host([auto-complete]) input:disabled,:host([auto-complete]) input: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,:host([auto-complete]) input.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,:host([auto-complete]) input.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=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=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=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,:host([auto-complete]) input[type=search].success,:host([auto-complete]) input[type=search].error,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,:host([auto-complete]) input#input-file-container.success,:host([auto-complete]) input#input-file-container.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 calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,:host([auto-complete]) input[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,:host([auto-complete]) input[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],:host([auto-complete]) input[type=date],:host([auto-complete]) input[type=datetime-local],:host([auto-complete]) input[type=month],:host([auto-complete]) input[type=week],:host([auto-complete]) input[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,:host([auto-complete]) input[type=date]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=datetime-local]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=month]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=week]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].error,:host([auto-complete]) input[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,input:not([type=file])[type=time].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,textarea[type=time].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,select[type=time].success,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].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,#input-file-container[type=time].success{background-image:var(--icon-success)}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,input:not([type=file])[type=time].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,textarea[type=time].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,select[type=time].error,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=time].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,#input-file-container[type=time].error{background-image:var(--icon-error)}input:not([type=file])[type=search],textarea[type=search],select[type=search],:host([auto-complete]) input[type=search],#input-file-container[type=search]{background-image:var(--icon-search);padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}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,:host([auto-complete]) input[type=search]:focus-visible::-webkit-search-cancel-button,:host([auto-complete]) input[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;margin-right:calc((var(--px-padding-s-mobile) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-mobile)}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],:host([auto-complete]) input[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::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:0;margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}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,:host([auto-complete]) input[type=search][list=suggestions]:focus-visible,:host([auto-complete]) input[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].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,:host([auto-complete]) input[type=search].success:hover,:host([auto-complete]) input[type=search].success:focus-visible,:host([auto-complete]) input[type=search].error:hover,:host([auto-complete]) input[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,:host([auto-complete]) input[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,:host([auto-complete]) input[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),:host([auto-complete]) input: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) + var(--px-size-icon-s))}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,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,#input-file-container:is(select).success,#input-file-container:is(select).error{padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,:host([auto-complete]) input: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,:host([auto-complete]) input: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),:host([auto-complete]) input: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,:host([auto-complete]) input:is(textarea).success,:host([auto-complete]) input:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5rem right 1rem}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,:host([auto-complete]) input#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,:host([auto-complete]) input#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,textarea#input-file-container.success,select#input-file-container.success,:host([auto-complete]) input#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,:host([auto-complete]) input#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-mobile) + 2 * var(--px-padding-xs-mobile) + var(--px-size-icon-s) );background-image:var(--icon-search);padding-right:var(--autocomplete-search-icon-width);background-position:center right 1rem}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}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;font-size:var(--px-text-size-label-s-mobile)}#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 screen and (max-width: 47.938rem){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,:host([auto-complete]) input.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (min-width: 48rem) and (max-width: 64rem){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,:host([auto-complete]) input.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (min-width: 48rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-tablet) + 2 * var(--px-padding-xs-tablet) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) 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)}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])[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=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=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=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 calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}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;margin-right:calc((var(--px-padding-s-tablet) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-tablet)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-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) + var(--px-size-icon-s))}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) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}slot[name=helper]{font-size:var(--px-text-size-label-s-tablet)}#container{gap:var(--px-spacing-xs-tablet)}#label-helper{gap:var(--px-spacing-2xs-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,:host([auto-complete]) input.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (min-width: 64.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-laptop) + 2 * var(--px-padding-xs-laptop) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) 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)}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=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=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=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 calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}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;margin-right:calc((var(--px-padding-s-laptop) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-laptop)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}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-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-laptop)}slot{font-size:var(--px-text-size-label-m-laptop)}slot[name=helper]{font-size:var(--px-text-size-label-s-laptop)}#container{gap:var(--px-spacing-xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-laptop)}}@media screen and (min-width: 90.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width: calc( 2 * var(--px-spacing-xs-desktop) + 2 * var(--px-padding-xs-desktop) + var(--px-size-icon-s) )}:host([auto-complete]) input.success{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-success),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}:host([auto-complete]) input.error{--autocomplete-search-icon-width: calc( 2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ) );background-image:var(--icon-error),var(--icon-search)!important;background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}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-desktop);outline-width:var(--px-focus-outline-desktop)}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=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=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=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 calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)),center right var(--px-padding-s-desktop)}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],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#input-file-container[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}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{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#input-file-container[type=time].success{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}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;margin-right:calc((var(--px-padding-s-desktop) + var(--px-size-icon-s)) * -1);margin-left:var(--px-spacing-s-desktop)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:calc(var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}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) + var(--px-size-icon-s))}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) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-desktop)}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%}slot{font-size:var(--px-text-size-label-m-desktop)}slot[name=helper]{font-size:var(--px-text-size-label-s-desktop)}#container{gap:var(--px-spacing-xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}`;
|
|
11985
12090
|
const stylesheet$4 = new CSSStyleSheet();
|
|
11986
|
-
stylesheet$4.replaceSync(styles$
|
|
12091
|
+
stylesheet$4.replaceSync(styles$u);
|
|
11987
12092
|
class AbstractInputElement extends PxElement {
|
|
11988
12093
|
constructor() {
|
|
11989
12094
|
var _a;
|
|
@@ -12340,10 +12445,10 @@ let Upload = _Upload;
|
|
|
12340
12445
|
if (!customElements.get("px-fileupload")) {
|
|
12341
12446
|
customElements.define("px-fileupload", Upload);
|
|
12342
12447
|
}
|
|
12343
|
-
const styles$
|
|
12344
|
-
const styles$
|
|
12345
|
-
const styleSheet$
|
|
12346
|
-
styleSheet$
|
|
12448
|
+
const styles$t = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
|
|
12449
|
+
const styles$s = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media screen and (min-width: 48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}';
|
|
12450
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
12451
|
+
styleSheet$r.replaceSync(styles$s);
|
|
12347
12452
|
const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
|
|
12348
12453
|
const _ListItem = class _ListItem extends PxElement {
|
|
12349
12454
|
template() {
|
|
@@ -12355,7 +12460,7 @@ const _ListItem = class _ListItem extends PxElement {
|
|
|
12355
12460
|
`;
|
|
12356
12461
|
}
|
|
12357
12462
|
constructor() {
|
|
12358
|
-
super(styleSheet$
|
|
12463
|
+
super(styleSheet$r);
|
|
12359
12464
|
this.shadowRoot.innerHTML = this.template();
|
|
12360
12465
|
}
|
|
12361
12466
|
connectedCallback() {
|
|
@@ -12403,8 +12508,8 @@ let ListItem = _ListItem;
|
|
|
12403
12508
|
if (!customElements.get("px-list-item")) {
|
|
12404
12509
|
customElements.define("px-list-item", ListItem);
|
|
12405
12510
|
}
|
|
12406
|
-
const styleSheet$
|
|
12407
|
-
styleSheet$
|
|
12511
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
12512
|
+
styleSheet$q.replaceSync(styles$t);
|
|
12408
12513
|
const listVariantValues = ["", "ul", "ol"];
|
|
12409
12514
|
const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
|
|
12410
12515
|
const gapPrefix = "px-spacing";
|
|
@@ -12417,7 +12522,7 @@ const listCssTokenBreakpoints = cssTokenBreakpoints(
|
|
|
12417
12522
|
);
|
|
12418
12523
|
const _List = class _List extends PxElement {
|
|
12419
12524
|
constructor() {
|
|
12420
|
-
super(styleSheet$
|
|
12525
|
+
super(styleSheet$q, listCssTokenBreakpoints);
|
|
12421
12526
|
__privateAdd(this, _List_instances);
|
|
12422
12527
|
this.shadowRoot.innerHTML = this.template();
|
|
12423
12528
|
}
|
|
@@ -12451,7 +12556,7 @@ const _List = class _List extends PxElement {
|
|
|
12451
12556
|
case "variant":
|
|
12452
12557
|
if (!this.checkName(listVariantValues, newValue)) {
|
|
12453
12558
|
log(
|
|
12454
|
-
|
|
12559
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${listVariantValues.join('", "')}".`
|
|
12455
12560
|
);
|
|
12456
12561
|
}
|
|
12457
12562
|
if (this.isConnected) {
|
|
@@ -12592,9 +12697,9 @@ class MDDCloser extends HTMLElement {
|
|
|
12592
12697
|
if (!customElements.get("px-mdd-closer")) {
|
|
12593
12698
|
customElements.define("px-mdd-closer", MDDCloser);
|
|
12594
12699
|
}
|
|
12595
|
-
const styles$
|
|
12700
|
+
const styles$r = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
|
|
12596
12701
|
const stylesheet$3 = new CSSStyleSheet();
|
|
12597
|
-
stylesheet$3.replaceSync(styles$
|
|
12702
|
+
stylesheet$3.replaceSync(styles$r);
|
|
12598
12703
|
class MegaDropDown extends HTMLElement {
|
|
12599
12704
|
constructor() {
|
|
12600
12705
|
var _a;
|
|
@@ -12662,7 +12767,6 @@ class MegaDropDown extends HTMLElement {
|
|
|
12662
12767
|
this.shadowRoot.innerHTML = this.template;
|
|
12663
12768
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
|
|
12664
12769
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
12665
|
-
this.role = "menu";
|
|
12666
12770
|
if (this.internals) {
|
|
12667
12771
|
this.internals.role = "menu";
|
|
12668
12772
|
}
|
|
@@ -12672,6 +12776,7 @@ class MegaDropDown extends HTMLElement {
|
|
|
12672
12776
|
}
|
|
12673
12777
|
connectedCallback() {
|
|
12674
12778
|
var _a, _b;
|
|
12779
|
+
this.role = "menu";
|
|
12675
12780
|
if (this.querySelectorAll("px-mdd-section").length === 0) {
|
|
12676
12781
|
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
12677
12782
|
}
|
|
@@ -12850,9 +12955,9 @@ $closeButtons_get = function() {
|
|
|
12850
12955
|
if (!customElements.get("px-mdd")) {
|
|
12851
12956
|
customElements.define("px-mdd", MegaDropDown);
|
|
12852
12957
|
}
|
|
12853
|
-
const styles$
|
|
12958
|
+
const styles$q = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:8px;padding-inline:16px}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:8px;padding-inline:16px;line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}';
|
|
12854
12959
|
const stylesheet$2 = new CSSStyleSheet();
|
|
12855
|
-
stylesheet$2.replaceSync(styles$
|
|
12960
|
+
stylesheet$2.replaceSync(styles$q);
|
|
12856
12961
|
class MddSection extends HTMLElement {
|
|
12857
12962
|
constructor() {
|
|
12858
12963
|
super();
|
|
@@ -12922,9 +13027,9 @@ class MddSection extends HTMLElement {
|
|
|
12922
13027
|
if (!customElements.get("px-mdd-section")) {
|
|
12923
13028
|
customElements.define("px-mdd-section", MddSection);
|
|
12924
13029
|
}
|
|
12925
|
-
const styles$
|
|
13030
|
+
const styles$p = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
|
|
12926
13031
|
const stylesheet$1 = new CSSStyleSheet();
|
|
12927
|
-
stylesheet$1.replaceSync(styles$
|
|
13032
|
+
stylesheet$1.replaceSync(styles$p);
|
|
12928
13033
|
class MddSectionItem extends HTMLElement {
|
|
12929
13034
|
constructor() {
|
|
12930
13035
|
var _a;
|
|
@@ -12941,7 +13046,6 @@ class MddSectionItem extends HTMLElement {
|
|
|
12941
13046
|
this.attachShadow({ mode: "open" });
|
|
12942
13047
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
12943
13048
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
12944
|
-
this.role = "listitem";
|
|
12945
13049
|
if (this.internals) {
|
|
12946
13050
|
this.internals.role = "listitem";
|
|
12947
13051
|
}
|
|
@@ -12966,6 +13070,7 @@ class MddSectionItem extends HTMLElement {
|
|
|
12966
13070
|
}
|
|
12967
13071
|
}
|
|
12968
13072
|
connectedCallback() {
|
|
13073
|
+
this.role = "listitem";
|
|
12969
13074
|
if (this.hasAttribute("href")) {
|
|
12970
13075
|
this.updateView("href", this.href);
|
|
12971
13076
|
this.$link.href = this.href;
|
|
@@ -13019,9 +13124,9 @@ class MddSectionItem extends HTMLElement {
|
|
|
13019
13124
|
if (!customElements.get("px-mdd-section-item")) {
|
|
13020
13125
|
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
13021
13126
|
}
|
|
13022
|
-
const styles$
|
|
13023
|
-
const styleSheet$
|
|
13024
|
-
styleSheet$
|
|
13127
|
+
const styles$o = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5rem;overflow:auto}@media screen and (min-width: 48rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25rem}}@media screen and (min-width: 64.0625rem){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25rem;flex-shrink:0}}@media screen and (min-width: 69.875rem){#container{width:1080px}}@media screen and (min-width: 90.0625rem){:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}';
|
|
13128
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
13129
|
+
styleSheet$p.replaceSync(styles$o);
|
|
13025
13130
|
const CLOSE_EVENT$1 = "px.lavender.modal.close";
|
|
13026
13131
|
const statusValues = ["", "info", "success", "error", "warning"];
|
|
13027
13132
|
class Modal extends HTMLElement {
|
|
@@ -13029,6 +13134,7 @@ class Modal extends HTMLElement {
|
|
|
13029
13134
|
super();
|
|
13030
13135
|
this.onOpenClick = () => this.show();
|
|
13031
13136
|
this.onCloseClick = () => this.close();
|
|
13137
|
+
this.onDialogCancel = () => this.close();
|
|
13032
13138
|
this.commandButtonCleanups = [];
|
|
13033
13139
|
this.opener = null;
|
|
13034
13140
|
this.openerElement = null;
|
|
@@ -13071,10 +13177,11 @@ class Modal extends HTMLElement {
|
|
|
13071
13177
|
</dialog>`;
|
|
13072
13178
|
this.attachShadow({ mode: "open" });
|
|
13073
13179
|
this.shadowRoot.innerHTML = this.template;
|
|
13074
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13180
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
13075
13181
|
}
|
|
13076
13182
|
connectedCallback() {
|
|
13077
13183
|
var _a, _b;
|
|
13184
|
+
this.$dialog.addEventListener("cancel", this.onDialogCancel);
|
|
13078
13185
|
this.addEventListenersToCommandButtons();
|
|
13079
13186
|
this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
|
|
13080
13187
|
this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
|
|
@@ -13131,6 +13238,7 @@ class Modal extends HTMLElement {
|
|
|
13131
13238
|
}
|
|
13132
13239
|
disconnectedCallback() {
|
|
13133
13240
|
var _a, _b;
|
|
13241
|
+
this.$dialog.removeEventListener("cancel", this.onDialogCancel);
|
|
13134
13242
|
(_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
|
|
13135
13243
|
"slotchange",
|
|
13136
13244
|
this.toggleDescriptionVisibility
|
|
@@ -13380,8 +13488,8 @@ class Modal extends HTMLElement {
|
|
|
13380
13488
|
if (!customElements.get("px-modal")) {
|
|
13381
13489
|
customElements.define("px-modal", Modal);
|
|
13382
13490
|
}
|
|
13383
|
-
const styleSheet$
|
|
13384
|
-
styleSheet$
|
|
13491
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
13492
|
+
styleSheet$o.replaceSync(styles$L);
|
|
13385
13493
|
const patchVariantValues = [
|
|
13386
13494
|
"",
|
|
13387
13495
|
"default",
|
|
@@ -13403,7 +13511,7 @@ class Patch extends HTMLElement {
|
|
|
13403
13511
|
super();
|
|
13404
13512
|
this.attachShadow({ mode: "open" });
|
|
13405
13513
|
this.shadowRoot.innerHTML = this.template();
|
|
13406
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13514
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
|
|
13407
13515
|
}
|
|
13408
13516
|
static get observedAttributes() {
|
|
13409
13517
|
return ["variant", "shape", "inverted"];
|
|
@@ -13435,14 +13543,14 @@ class Patch extends HTMLElement {
|
|
|
13435
13543
|
this._toggleClass(oldValue, newValue);
|
|
13436
13544
|
if (!this.checkName(patchVariantValues, newValue)) {
|
|
13437
13545
|
log(
|
|
13438
|
-
|
|
13546
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${patchVariantValues.join('", "')}".`
|
|
13439
13547
|
);
|
|
13440
13548
|
}
|
|
13441
13549
|
}
|
|
13442
13550
|
updateShape(attrName, newValue, attrValue) {
|
|
13443
13551
|
if (!this.checkName(attrValue, newValue)) {
|
|
13444
13552
|
log(
|
|
13445
|
-
|
|
13553
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
13446
13554
|
);
|
|
13447
13555
|
return;
|
|
13448
13556
|
}
|
|
@@ -13559,7 +13667,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13559
13667
|
updateAlignment(attrName, oldValue, newValue) {
|
|
13560
13668
|
if (!this.checkName(pillarAlignmentValues, newValue)) {
|
|
13561
13669
|
log(
|
|
13562
|
-
|
|
13670
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarAlignmentValues.join('", "')}".`
|
|
13563
13671
|
);
|
|
13564
13672
|
return;
|
|
13565
13673
|
}
|
|
@@ -13578,7 +13686,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13578
13686
|
updateVariant(attrName, oldValue, newValue) {
|
|
13579
13687
|
if (!this.checkName(pillarVariantValues, newValue)) {
|
|
13580
13688
|
log(
|
|
13581
|
-
|
|
13689
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarVariantValues.join('", "')}".`
|
|
13582
13690
|
);
|
|
13583
13691
|
return;
|
|
13584
13692
|
}
|
|
@@ -13647,9 +13755,9 @@ class Pillar extends WithExtraAttributes {
|
|
|
13647
13755
|
if (!customElements.get("px-pillar")) {
|
|
13648
13756
|
customElements.define("px-pillar", Pillar);
|
|
13649
13757
|
}
|
|
13650
|
-
const styles$
|
|
13651
|
-
const styleSheet$
|
|
13652
|
-
styleSheet$
|
|
13758
|
+
const styles$n = ':host{--card-padding: var(--px-padding-s-mobile);display:block;border:var(--px-size-border-m) solid rgba(0,0,0,0)}:host[has-border]{border:var(--px-size-border-s) solid rgba(0,0,0,0)}:host *{box-sizing:border-box}:host([interactive-state="hover"]:hover){border:0 solid rgba(0,0,0,0)}.media-wrapper{display:none;position:relative;overflow:hidden}:host([media-position="top"]) .media-wrapper{display:block;width:100%}:host([media-position="top"]) .media-wrapper img{border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}:host([media-position="left"]) .media-wrapper{display:block;width:33.33%;aspect-ratio:1 / 1;flex-shrink:0}:host([media-position="left"]) .media-wrapper img{border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.media-image{display:block;width:100%;height:100%;object-fit:cover}.media-image:not([src]){display:none}:host([media-size="contain"]) .media-image{object-fit:contain}.content{display:block;padding:var(--card-padding);flex:1 1 auto}';
|
|
13759
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
13760
|
+
styleSheet$n.replaceSync(styles$n);
|
|
13653
13761
|
const cardContainerMediaPositionValues = [
|
|
13654
13762
|
"none",
|
|
13655
13763
|
"top",
|
|
@@ -13675,7 +13783,7 @@ class CardContainer extends HTMLElement {
|
|
|
13675
13783
|
super();
|
|
13676
13784
|
__privateAdd(this, _CardContainer_instances);
|
|
13677
13785
|
this.attachShadow({ mode: "open" });
|
|
13678
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13786
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n, paddingBreakpoints];
|
|
13679
13787
|
this.shadowRoot.innerHTML = this.template();
|
|
13680
13788
|
}
|
|
13681
13789
|
static get observedAttributes() {
|
|
@@ -13946,9 +14054,9 @@ setOrRemove_fn = function(name, value) {
|
|
|
13946
14054
|
if (!customElements.get("px-card-container")) {
|
|
13947
14055
|
customElements.define("px-card-container", CardContainer);
|
|
13948
14056
|
}
|
|
13949
|
-
const styles$
|
|
13950
|
-
const styleSheet$
|
|
13951
|
-
styleSheet$
|
|
14057
|
+
const styles$m = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}";
|
|
14058
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
14059
|
+
styleSheet$m.replaceSync(styles$m);
|
|
13952
14060
|
class CardHeading extends HTMLElement {
|
|
13953
14061
|
template() {
|
|
13954
14062
|
return `
|
|
@@ -13960,16 +14068,16 @@ class CardHeading extends HTMLElement {
|
|
|
13960
14068
|
constructor() {
|
|
13961
14069
|
super();
|
|
13962
14070
|
this.attachShadow({ mode: "open" });
|
|
13963
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14071
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$m];
|
|
13964
14072
|
this.shadowRoot.innerHTML = this.template();
|
|
13965
14073
|
}
|
|
13966
14074
|
}
|
|
13967
14075
|
if (!customElements.get("px-card-heading")) {
|
|
13968
14076
|
customElements.define("px-card-heading", CardHeading);
|
|
13969
14077
|
}
|
|
13970
|
-
const styles$
|
|
13971
|
-
const styleSheet$
|
|
13972
|
-
styleSheet$
|
|
14078
|
+
const styles$l = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}";
|
|
14079
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
14080
|
+
styleSheet$l.replaceSync(styles$l);
|
|
13973
14081
|
class CardActions extends HTMLElement {
|
|
13974
14082
|
template() {
|
|
13975
14083
|
return `
|
|
@@ -13984,7 +14092,7 @@ class CardActions extends HTMLElement {
|
|
|
13984
14092
|
constructor() {
|
|
13985
14093
|
super();
|
|
13986
14094
|
this.attachShadow({ mode: "open" });
|
|
13987
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14095
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
13988
14096
|
this.shadowRoot.innerHTML = this.template();
|
|
13989
14097
|
}
|
|
13990
14098
|
}
|
|
@@ -13992,8 +14100,8 @@ if (!customElements.get("px-card-actions")) {
|
|
|
13992
14100
|
customElements.define("px-card-actions", CardActions);
|
|
13993
14101
|
}
|
|
13994
14102
|
const css$1 = ".price{--price-s: var(--px-price-size-unit-s-mobile);--price-m: var(--px-price-size-unit-m-mobile);--price-l: var(--px-price-size-unit-l-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default);font-size:var(--price-s);line-height:var(--px-line-height-ratio-l)}@media screen and (min-width: 48rem){.price{--price-s: var(--px-price-size-unit-s-tablet);--price-m: var(--px-price-size-unit-m-tablet);--price-l: var(--px-price-size-unit-l-tablet)}}@media screen and (min-width: 64.0625rem){.price{--price-s: var(--px-price-size-unit-s-laptop);--price-m: var(--px-price-size-unit-m-laptop);--price-l: var(--px-price-size-unit-l-laptop)}}.promo,.free{color:var(--px-color-text-purpose-promo-default)}.neutral{color:var(--px-color-text-neutral-default)}.exceeding{color:var(--px-color-text-purpose-error-default)}.disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .price{color:var(--px-color-text-brand-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-text-state-disabled-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}.euro{font-size:var(--px-price-ratio-l)}.decimals{font-size:var(--px-price-ratio-s)}.m{font-size:var(--price-m)}.l{font-size:var(--price-l)}";
|
|
13995
|
-
const styles$
|
|
13996
|
-
styles$
|
|
14103
|
+
const styles$k = new CSSStyleSheet();
|
|
14104
|
+
styles$k.replaceSync(css$1);
|
|
13997
14105
|
const priceVariantValues = [
|
|
13998
14106
|
"default",
|
|
13999
14107
|
"promo",
|
|
@@ -14005,7 +14113,7 @@ const priceVariantValues = [
|
|
|
14005
14113
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
14006
14114
|
const _Price = class _Price extends PxElement {
|
|
14007
14115
|
constructor() {
|
|
14008
|
-
super(styles$
|
|
14116
|
+
super(styles$k);
|
|
14009
14117
|
this.template = () => `<span class="price"></span>`;
|
|
14010
14118
|
this.shadowRoot.innerHTML = this.template();
|
|
14011
14119
|
}
|
|
@@ -14060,7 +14168,7 @@ const _Price = class _Price extends PxElement {
|
|
|
14060
14168
|
this.toggleClass(oldValue, newValue);
|
|
14061
14169
|
if (!this.checkName(attrValues, newValue)) {
|
|
14062
14170
|
log(
|
|
14063
|
-
|
|
14171
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14064
14172
|
);
|
|
14065
14173
|
}
|
|
14066
14174
|
}
|
|
@@ -14106,11 +14214,11 @@ if (!customElements.get("px-price")) {
|
|
|
14106
14214
|
customElements.define("px-price", Price);
|
|
14107
14215
|
}
|
|
14108
14216
|
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);white-space:nowrap;text-align:left;color:var(--px-color-text-brand-inverted);background-color:var(--px-color-background-surface-dark);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}:host([inverted]) .ribbon{color:var(--px-color-text-neutral-default);background-color:var(--px-color-background-surface-light)}@media screen and (min-width: 48rem){.ribbon{font-size:var(--px-text-size-label-m-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem){.ribbon{font-size:var(--px-text-size-label-m-laptop);padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop)}}";
|
|
14109
|
-
const styles$
|
|
14110
|
-
styles$
|
|
14217
|
+
const styles$j = new CSSStyleSheet();
|
|
14218
|
+
styles$j.replaceSync(css);
|
|
14111
14219
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
14112
14220
|
constructor() {
|
|
14113
|
-
super(styles$
|
|
14221
|
+
super(styles$j);
|
|
14114
14222
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
14115
14223
|
this.shadowRoot.innerHTML = this.template();
|
|
14116
14224
|
}
|
|
@@ -14133,9 +14241,9 @@ let Ribbon = _Ribbon;
|
|
|
14133
14241
|
if (!customElements.get("px-ribbon")) {
|
|
14134
14242
|
customElements.define("px-ribbon", Ribbon);
|
|
14135
14243
|
}
|
|
14136
|
-
const styles$
|
|
14137
|
-
const styleSheet$
|
|
14138
|
-
styleSheet$
|
|
14244
|
+
const styles$i = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-s-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile)}.info .info__body .header ::slotted([slot="action"]),.info .info__body .header ::slotted([slot="icon"]),.info .info__body .header ::slotted([slot="logo"]){flex-shrink:0}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media screen and (min-width: 48rem){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-s-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media screen and (min-width: 64.0625rem){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-s-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media screen and (min-width: 90.0625rem){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-s-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}';
|
|
14245
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
14246
|
+
styleSheet$k.replaceSync(styles$i);
|
|
14139
14247
|
class SelectableBox extends WithExtraAttributes {
|
|
14140
14248
|
template() {
|
|
14141
14249
|
return `
|
|
@@ -14162,7 +14270,7 @@ class SelectableBox extends WithExtraAttributes {
|
|
|
14162
14270
|
`;
|
|
14163
14271
|
}
|
|
14164
14272
|
constructor() {
|
|
14165
|
-
super(styleSheet$
|
|
14273
|
+
super(styleSheet$k);
|
|
14166
14274
|
this.shadowRoot.innerHTML = this.template();
|
|
14167
14275
|
}
|
|
14168
14276
|
static get observedAttributes() {
|
|
@@ -14218,9 +14326,9 @@ function shouldIgnoreSelectableBoxClick(event, host, ignoredTags = DEFAULT_IGNOR
|
|
|
14218
14326
|
}
|
|
14219
14327
|
return false;
|
|
14220
14328
|
}
|
|
14221
|
-
const styles$
|
|
14222
|
-
const styleSheet$
|
|
14223
|
-
styleSheet$
|
|
14329
|
+
const styles$h = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host([parent-has-anchor-full]) .selectable-box-checkbox,:host([parent-has-anchor-full]) .selectable-box-radio{border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:transparent}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media screen and (min-width: 48rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}';
|
|
14330
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
14331
|
+
styleSheet$j.replaceSync(styles$h);
|
|
14224
14332
|
class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
14225
14333
|
template() {
|
|
14226
14334
|
return `
|
|
@@ -14242,7 +14350,7 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14242
14350
|
}
|
|
14243
14351
|
constructor() {
|
|
14244
14352
|
var _a;
|
|
14245
|
-
super(styleSheet$
|
|
14353
|
+
super(styleSheet$j);
|
|
14246
14354
|
this.shadowRoot.innerHTML = this.template();
|
|
14247
14355
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14248
14356
|
}
|
|
@@ -14382,14 +14490,14 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14382
14490
|
if (this.$checkbox) {
|
|
14383
14491
|
this.$checkbox.setAttribute("checked", "");
|
|
14384
14492
|
}
|
|
14385
|
-
this.dispatchEvent(
|
|
14386
|
-
new Event("change", {
|
|
14387
|
-
bubbles: true,
|
|
14388
|
-
composed: true
|
|
14389
|
-
// Allow the event to pass through shadow DOM boundaries
|
|
14390
|
-
})
|
|
14391
|
-
);
|
|
14392
14493
|
}
|
|
14494
|
+
this.dispatchEvent(
|
|
14495
|
+
new Event("change", {
|
|
14496
|
+
bubbles: true,
|
|
14497
|
+
composed: true
|
|
14498
|
+
// Allow the event to pass through shadow DOM boundaries
|
|
14499
|
+
})
|
|
14500
|
+
);
|
|
14393
14501
|
}
|
|
14394
14502
|
// Form-associated callbacks
|
|
14395
14503
|
static get formAssociated() {
|
|
@@ -14489,8 +14597,8 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14489
14597
|
if (!customElements.get("px-selectable-box-checkbox")) {
|
|
14490
14598
|
customElements.define("px-selectable-box-checkbox", SelectableBoxCheckbox);
|
|
14491
14599
|
}
|
|
14492
|
-
const styleSheet$
|
|
14493
|
-
styleSheet$
|
|
14600
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
14601
|
+
styleSheet$i.replaceSync(styles$h);
|
|
14494
14602
|
class SelectableBoxRadio extends WithExtraAttributes {
|
|
14495
14603
|
template() {
|
|
14496
14604
|
return `
|
|
@@ -14512,7 +14620,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
|
|
|
14512
14620
|
}
|
|
14513
14621
|
constructor() {
|
|
14514
14622
|
var _a;
|
|
14515
|
-
super(styleSheet$
|
|
14623
|
+
super(styleSheet$i);
|
|
14516
14624
|
this.shadowRoot.innerHTML = this.template();
|
|
14517
14625
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14518
14626
|
}
|
|
@@ -14824,7 +14932,7 @@ const _Skeleton = class _Skeleton extends PxElement {
|
|
|
14824
14932
|
updateVariant(variant) {
|
|
14825
14933
|
if (!this.checkName(skeletonsVariantValues, variant)) {
|
|
14826
14934
|
log(
|
|
14827
|
-
|
|
14935
|
+
`"${variant}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${skeletonsVariantValues.join('", "')}".`
|
|
14828
14936
|
);
|
|
14829
14937
|
return;
|
|
14830
14938
|
}
|
|
@@ -14854,10 +14962,10 @@ let Skeleton = _Skeleton;
|
|
|
14854
14962
|
if (!customElements.get("px-skeleton")) {
|
|
14855
14963
|
customElements.define("px-skeleton", Skeleton);
|
|
14856
14964
|
}
|
|
14857
|
-
const styles$
|
|
14858
|
-
const styleSheet$
|
|
14965
|
+
const styles$g = ".spinner{display:inline-block;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);border-top:3px solid var(--px-color-text-brand-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-text-brand-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}@media screen and (min-width: 64.0625rem){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}@media screen and (min-width: 90.0625rem){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}";
|
|
14966
|
+
const styleSheet$h = new CSSStyleSheet();
|
|
14859
14967
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
14860
|
-
styleSheet$
|
|
14968
|
+
styleSheet$h.replaceSync(styles$g);
|
|
14861
14969
|
typographyStyles$1.replaceSync(typographyCss$1);
|
|
14862
14970
|
class Spinner extends HTMLElement {
|
|
14863
14971
|
template() {
|
|
@@ -14873,7 +14981,7 @@ class Spinner extends HTMLElement {
|
|
|
14873
14981
|
this.attachShadow({ mode: "open" });
|
|
14874
14982
|
this.shadowRoot.innerHTML = this.template();
|
|
14875
14983
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14876
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14984
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$h, typographyStyles$1];
|
|
14877
14985
|
}
|
|
14878
14986
|
static get observedAttributes() {
|
|
14879
14987
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -14914,7 +15022,7 @@ class Spinner extends HTMLElement {
|
|
|
14914
15022
|
}
|
|
14915
15023
|
if (!this.checkName(attrValues, newValue)) {
|
|
14916
15024
|
log(
|
|
14917
|
-
|
|
15025
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14918
15026
|
);
|
|
14919
15027
|
}
|
|
14920
15028
|
}
|
|
@@ -15026,7 +15134,7 @@ const _Status = class _Status extends PxElement {
|
|
|
15026
15134
|
updateState(state) {
|
|
15027
15135
|
if (!this.checkName(statusStateValues, state)) {
|
|
15028
15136
|
log(
|
|
15029
|
-
|
|
15137
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusStateValues.join('", "')}".`
|
|
15030
15138
|
);
|
|
15031
15139
|
return;
|
|
15032
15140
|
}
|
|
@@ -15221,7 +15329,7 @@ const _StatusCard = class _StatusCard extends PxElement {
|
|
|
15221
15329
|
updateState(state) {
|
|
15222
15330
|
if (!this.checkName(statusCardStateValues, state)) {
|
|
15223
15331
|
log(
|
|
15224
|
-
|
|
15332
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusCardStateValues.join('", "')}".`
|
|
15225
15333
|
);
|
|
15226
15334
|
return;
|
|
15227
15335
|
}
|
|
@@ -15291,9 +15399,9 @@ let StatusCard = _StatusCard;
|
|
|
15291
15399
|
if (!customElements.get("px-status-card")) {
|
|
15292
15400
|
customElements.define("px-status-card", StatusCard);
|
|
15293
15401
|
}
|
|
15294
|
-
const styles$
|
|
15402
|
+
const styles$f = "#content{overflow:auto}#sticky-left{position:sticky;top:0;float:left;margin-top:var( --px-sticky-container-offset-left-desktop, var(--px-sticky-container-offset-left-all) )}@media screen and (max-width: 47.938rem){#sticky-left{margin-top:var( --px-sticky-container-offset-left-mobile, var(--px-sticky-container-offset-left-all) )}}@media screen and (min-width: 48rem){#sticky-left{margin-top:var( --px-sticky-container-offset-left-tablet, var(--px-sticky-container-offset-left-all) )}}@media screen and (min-width: 64.0625rem){#sticky-left{margin-top:var( --px-sticky-container-offset-left-laptop, var(--px-sticky-container-offset-left-all) )}}#sticky-right{position:sticky;top:0;float:right;margin-top:var( --px-sticky-container-offset-right-desktop, var(--px-sticky-container-offset-right-all) )}@media screen and (max-width: 47.938rem){#sticky-right{margin-top:var( --px-sticky-container-offset-right-mobile, var(--px-sticky-container-offset-right-all) )}}@media screen and (min-width: 48rem){#sticky-right{margin-top:var( --px-sticky-container-offset-right-tablet, var(--px-sticky-container-offset-right-all) )}}@media screen and (min-width: 64.0625rem){#sticky-right{margin-top:var( --px-sticky-container-offset-right-laptop, var(--px-sticky-container-offset-right-all) )}}#middle{position:relative;height:var(--px-sticky-container-middle-height, 100vh);width:100%;overflow:auto}.sticky-footer{position:sticky;bottom:0;width:100%;z-index:999}";
|
|
15295
15403
|
const stylesheet = new CSSStyleSheet();
|
|
15296
|
-
stylesheet.replaceSync(styles$
|
|
15404
|
+
stylesheet.replaceSync(styles$f);
|
|
15297
15405
|
class StickyContainer extends HTMLElement {
|
|
15298
15406
|
constructor() {
|
|
15299
15407
|
super();
|
|
@@ -15513,9 +15621,9 @@ let Switch = _Switch;
|
|
|
15513
15621
|
if (!customElements.get("px-switch")) {
|
|
15514
15622
|
customElements.define("px-switch", Switch);
|
|
15515
15623
|
}
|
|
15516
|
-
const styles$
|
|
15517
|
-
const styleSheet$
|
|
15518
|
-
styleSheet$
|
|
15624
|
+
const styles$e = ":host{display:table;width:100%}";
|
|
15625
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
15626
|
+
styleSheet$g.replaceSync(styles$e);
|
|
15519
15627
|
class Table extends HTMLElement {
|
|
15520
15628
|
constructor() {
|
|
15521
15629
|
super();
|
|
@@ -15524,7 +15632,7 @@ class Table extends HTMLElement {
|
|
|
15524
15632
|
`;
|
|
15525
15633
|
this.attachShadow({ mode: "open" });
|
|
15526
15634
|
this.shadowRoot.innerHTML = this.template();
|
|
15527
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15635
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$g];
|
|
15528
15636
|
}
|
|
15529
15637
|
connectedCallback() {
|
|
15530
15638
|
this.style.display = "table";
|
|
@@ -15534,9 +15642,9 @@ class Table extends HTMLElement {
|
|
|
15534
15642
|
if (!customElements.get("px-table")) {
|
|
15535
15643
|
customElements.define("px-table", Table);
|
|
15536
15644
|
}
|
|
15537
|
-
const styles$
|
|
15538
|
-
const styleSheet$
|
|
15539
|
-
styleSheet$
|
|
15645
|
+
const styles$d = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
15646
|
+
const styleSheet$f = new CSSStyleSheet();
|
|
15647
|
+
styleSheet$f.replaceSync(styles$d);
|
|
15540
15648
|
class Thead extends HTMLElement {
|
|
15541
15649
|
constructor() {
|
|
15542
15650
|
super();
|
|
@@ -15545,7 +15653,7 @@ class Thead extends HTMLElement {
|
|
|
15545
15653
|
`;
|
|
15546
15654
|
this.attachShadow({ mode: "open" });
|
|
15547
15655
|
this.shadowRoot.innerHTML = this.template();
|
|
15548
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15656
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$f];
|
|
15549
15657
|
}
|
|
15550
15658
|
connectedCallback() {
|
|
15551
15659
|
this.style.display = "table-header-group";
|
|
@@ -15555,9 +15663,9 @@ class Thead extends HTMLElement {
|
|
|
15555
15663
|
if (!customElements.get("px-thead")) {
|
|
15556
15664
|
customElements.define("px-thead", Thead);
|
|
15557
15665
|
}
|
|
15558
|
-
const styles$
|
|
15559
|
-
const styleSheet$
|
|
15560
|
-
styleSheet$
|
|
15666
|
+
const styles$c = ":host{display:table-row}";
|
|
15667
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
15668
|
+
styleSheet$e.replaceSync(styles$c);
|
|
15561
15669
|
class Tr extends HTMLElement {
|
|
15562
15670
|
constructor() {
|
|
15563
15671
|
super();
|
|
@@ -15566,7 +15674,7 @@ class Tr extends HTMLElement {
|
|
|
15566
15674
|
`;
|
|
15567
15675
|
this.attachShadow({ mode: "open" });
|
|
15568
15676
|
this.shadowRoot.innerHTML = this.template();
|
|
15569
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15677
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$e];
|
|
15570
15678
|
}
|
|
15571
15679
|
connectedCallback() {
|
|
15572
15680
|
this.style.display = "table-row";
|
|
@@ -15576,9 +15684,9 @@ class Tr extends HTMLElement {
|
|
|
15576
15684
|
if (!customElements.get("px-tr")) {
|
|
15577
15685
|
customElements.define("px-tr", Tr);
|
|
15578
15686
|
}
|
|
15579
|
-
const styles$
|
|
15580
|
-
const styleSheet$
|
|
15581
|
-
styleSheet$
|
|
15687
|
+
const styles$b = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-l) solid var(--th-border-color-default, var(--px-color-border-main-default))}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media screen and (min-width: 48rem){.th{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media screen and (min-width: 64.0625rem){.th{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-laptop)}}';
|
|
15688
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
15689
|
+
styleSheet$d.replaceSync(styles$b);
|
|
15582
15690
|
class Th extends HTMLElement {
|
|
15583
15691
|
constructor() {
|
|
15584
15692
|
super();
|
|
@@ -15595,7 +15703,7 @@ class Th extends HTMLElement {
|
|
|
15595
15703
|
`;
|
|
15596
15704
|
this.attachShadow({ mode: "open" });
|
|
15597
15705
|
this.shadowRoot.innerHTML = this.template();
|
|
15598
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15706
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$d];
|
|
15599
15707
|
}
|
|
15600
15708
|
connectedCallback() {
|
|
15601
15709
|
this.style.display = "table-cell";
|
|
@@ -15612,9 +15720,9 @@ class Th extends HTMLElement {
|
|
|
15612
15720
|
if (!customElements.get("px-th")) {
|
|
15613
15721
|
customElements.define("px-th", Th);
|
|
15614
15722
|
}
|
|
15615
|
-
const styles$
|
|
15616
|
-
const styleSheet$
|
|
15617
|
-
styleSheet$
|
|
15723
|
+
const styles$a = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}::slotted(px-tr:hover){background-color:var(--px-color-background-state-hover-default)}";
|
|
15724
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
15725
|
+
styleSheet$c.replaceSync(styles$a);
|
|
15618
15726
|
class Tbody extends HTMLElement {
|
|
15619
15727
|
constructor() {
|
|
15620
15728
|
super();
|
|
@@ -15623,7 +15731,7 @@ class Tbody extends HTMLElement {
|
|
|
15623
15731
|
`;
|
|
15624
15732
|
this.attachShadow({ mode: "open" });
|
|
15625
15733
|
this.shadowRoot.innerHTML = this.template();
|
|
15626
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15734
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$c];
|
|
15627
15735
|
}
|
|
15628
15736
|
connectedCallback() {
|
|
15629
15737
|
this.style.display = "table-row-group";
|
|
@@ -15633,9 +15741,9 @@ class Tbody extends HTMLElement {
|
|
|
15633
15741
|
if (!customElements.get("px-tbody")) {
|
|
15634
15742
|
customElements.define("px-tbody", Tbody);
|
|
15635
15743
|
}
|
|
15636
|
-
const styles$
|
|
15637
|
-
const styleSheet$
|
|
15638
|
-
styleSheet$
|
|
15744
|
+
const styles$9 = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-size-border-m) solid var(--td-border-color-default, var(--px-color-border-main-default))}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media screen and (min-width: 48rem){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media screen and (min-width: 64.0625rem){.td{padding:var(--px-padding-s-laptop) var(--px-padding-xs-laptop);font-size:var(--px-text-size-body-m-laptop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-laptop)}}';
|
|
15745
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
15746
|
+
styleSheet$b.replaceSync(styles$9);
|
|
15639
15747
|
class Td extends HTMLElement {
|
|
15640
15748
|
constructor() {
|
|
15641
15749
|
super();
|
|
@@ -15655,7 +15763,7 @@ class Td extends HTMLElement {
|
|
|
15655
15763
|
`;
|
|
15656
15764
|
this.attachShadow({ mode: "open" });
|
|
15657
15765
|
this.shadowRoot.innerHTML = this.template();
|
|
15658
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15766
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$b];
|
|
15659
15767
|
}
|
|
15660
15768
|
connectedCallback() {
|
|
15661
15769
|
this.style.display = "table-cell";
|
|
@@ -15677,9 +15785,9 @@ class Td extends HTMLElement {
|
|
|
15677
15785
|
if (!customElements.get("px-td")) {
|
|
15678
15786
|
customElements.define("px-td", Td);
|
|
15679
15787
|
}
|
|
15680
|
-
const styles$
|
|
15681
|
-
const styleSheet$
|
|
15682
|
-
styleSheet$
|
|
15788
|
+
const styles$8 = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child),:host(:first-child) button{border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type),:host(:last-of-type) button{border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}:host([selected]){background-color:var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-color-text-neutral-inverted)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}:host(:focus-visible){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:host(:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-default)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted]:not([selected])) button:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (min-width: 48rem){button{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}:host[selected]>button{padding-block:var(--px-padding-m-tablet)}}@media screen and (min-width: 64.0625rem){button{padding:var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop)}:host[selected]>button{padding-block:var(--px-padding-m-laptop)}}";
|
|
15789
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
15790
|
+
styleSheet$a.replaceSync(styles$8);
|
|
15683
15791
|
const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
|
|
15684
15792
|
const TAB_CONNECTED_EVENT = "px-tab-connected";
|
|
15685
15793
|
class Tab extends HTMLElement {
|
|
@@ -15693,7 +15801,7 @@ class Tab extends HTMLElement {
|
|
|
15693
15801
|
`;
|
|
15694
15802
|
this.attachShadow({ mode: "open" });
|
|
15695
15803
|
this.shadowRoot.innerHTML = this.template();
|
|
15696
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15804
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$a];
|
|
15697
15805
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15698
15806
|
}
|
|
15699
15807
|
static get observedAttributes() {
|
|
@@ -15785,9 +15893,9 @@ class Tab extends HTMLElement {
|
|
|
15785
15893
|
}
|
|
15786
15894
|
}
|
|
15787
15895
|
}
|
|
15788
|
-
const styles$
|
|
15789
|
-
const styleSheet$
|
|
15790
|
-
styleSheet$
|
|
15896
|
+
const styles$7 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:12px;left:-24px}#tab-container>#next{position:absolute;top:12px;right:-24px}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box;margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1);padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media screen and (min-width: 48rem){#container{gap:var(--px-spacing-default-tablet)}#tablist{margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1);padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 64.0625rem){#container{gap:var(--px-spacing-default-laptop)}#tablist{margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1);padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}';
|
|
15897
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
15898
|
+
styleSheet$9.replaceSync(styles$7);
|
|
15791
15899
|
class Tabs extends HTMLElement {
|
|
15792
15900
|
constructor() {
|
|
15793
15901
|
var _a;
|
|
@@ -15819,7 +15927,7 @@ class Tabs extends HTMLElement {
|
|
|
15819
15927
|
};
|
|
15820
15928
|
this.attachShadow({ mode: "open" });
|
|
15821
15929
|
this.shadowRoot.innerHTML = this.template();
|
|
15822
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15930
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
15823
15931
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15824
15932
|
}
|
|
15825
15933
|
static get observedAttributes() {
|
|
@@ -16027,7 +16135,7 @@ class TabPanel extends HTMLElement {
|
|
|
16027
16135
|
`;
|
|
16028
16136
|
this.attachShadow({ mode: "open" });
|
|
16029
16137
|
this.shadowRoot.innerHTML = this.template();
|
|
16030
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16138
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
16031
16139
|
}
|
|
16032
16140
|
static get observedAttributes() {
|
|
16033
16141
|
return ["name", "selected"];
|
|
@@ -16098,8 +16206,8 @@ class PxTabPanel extends TabPanel {
|
|
|
16098
16206
|
if (!customElements.get("px-tab-panel")) {
|
|
16099
16207
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
16100
16208
|
}
|
|
16101
|
-
const styleSheet$
|
|
16102
|
-
styleSheet$
|
|
16209
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
16210
|
+
styleSheet$8.replaceSync(styles$K);
|
|
16103
16211
|
const _Tag = class _Tag extends PxElement {
|
|
16104
16212
|
template() {
|
|
16105
16213
|
return `
|
|
@@ -16111,9 +16219,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
16111
16219
|
`;
|
|
16112
16220
|
}
|
|
16113
16221
|
constructor() {
|
|
16114
|
-
super(styleSheet$
|
|
16222
|
+
super(styleSheet$8);
|
|
16115
16223
|
this.shadowRoot.innerHTML = this.template();
|
|
16116
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16224
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
16117
16225
|
}
|
|
16118
16226
|
connectedCallback() {
|
|
16119
16227
|
if (this.$iconSlot) {
|
|
@@ -16226,10 +16334,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
16226
16334
|
}
|
|
16227
16335
|
}
|
|
16228
16336
|
}
|
|
16229
|
-
const styles$
|
|
16337
|
+
const styles$6 = '.tile{display:flex;flex-direction:column;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-color-background-container-light-default) )}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media screen and (min-width: 48rem){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}';
|
|
16230
16338
|
const common = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media screen and (min-width: 48rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}';
|
|
16231
|
-
const styleSheet$
|
|
16232
|
-
styleSheet$
|
|
16339
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
16340
|
+
styleSheet$7.replaceSync(styles$6);
|
|
16233
16341
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
16234
16342
|
commonStyleSheet$5.replaceSync(common);
|
|
16235
16343
|
const tileBackgroundColorValues = [
|
|
@@ -16252,7 +16360,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16252
16360
|
`;
|
|
16253
16361
|
}
|
|
16254
16362
|
constructor() {
|
|
16255
|
-
super(commonStyleSheet$5, styleSheet$
|
|
16363
|
+
super(commonStyleSheet$5, styleSheet$7);
|
|
16256
16364
|
const $root = document.createElement(_Tile.nativeName);
|
|
16257
16365
|
$root.classList.add("tile");
|
|
16258
16366
|
$root.innerHTML = this.template();
|
|
@@ -16317,7 +16425,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16317
16425
|
updateBackgroundColor(oldValue, newValue, attrValue) {
|
|
16318
16426
|
if (!checkName(attrValue, newValue)) {
|
|
16319
16427
|
log(
|
|
16320
|
-
|
|
16428
|
+
`"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
16321
16429
|
);
|
|
16322
16430
|
return;
|
|
16323
16431
|
}
|
|
@@ -16407,9 +16515,9 @@ let Tile = _Tile;
|
|
|
16407
16515
|
if (!customElements.get("px-tile")) {
|
|
16408
16516
|
customElements.define("px-tile", Tile);
|
|
16409
16517
|
}
|
|
16410
|
-
const styles$
|
|
16411
|
-
const styleSheet$
|
|
16412
|
-
styleSheet$
|
|
16518
|
+
const styles$5 = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media screen and (min-width: 48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}";
|
|
16519
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
16520
|
+
styleSheet$6.replaceSync(styles$5);
|
|
16413
16521
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
16414
16522
|
commonStyleSheet$4.replaceSync(common);
|
|
16415
16523
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -16424,7 +16532,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
16424
16532
|
`;
|
|
16425
16533
|
}
|
|
16426
16534
|
constructor() {
|
|
16427
|
-
super(commonStyleSheet$4, styleSheet$
|
|
16535
|
+
super(commonStyleSheet$4, styleSheet$6);
|
|
16428
16536
|
const $root = document.createElement(_TileButton.nativeName);
|
|
16429
16537
|
$root.classList.add("tile-button");
|
|
16430
16538
|
$root.innerHTML = this.template();
|
|
@@ -16547,7 +16655,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
16547
16655
|
<div class="tile-checkbox">
|
|
16548
16656
|
<px-tile hoverable>
|
|
16549
16657
|
<slot name="prefix" slot="prefix"></slot>
|
|
16550
|
-
<px-checkbox slot="suffix"
|
|
16658
|
+
<px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
|
|
16551
16659
|
<slot name="label" slot="label"></slot>
|
|
16552
16660
|
<slot name="description" slot="description"></slot>
|
|
16553
16661
|
</px-tile>
|
|
@@ -16633,7 +16741,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
16633
16741
|
if (this.$checkbox) {
|
|
16634
16742
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
16635
16743
|
log(
|
|
16636
|
-
|
|
16744
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
|
|
16637
16745
|
);
|
|
16638
16746
|
return;
|
|
16639
16747
|
} else {
|
|
@@ -16827,7 +16935,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
16827
16935
|
<div class="tile-radio">
|
|
16828
16936
|
<px-tile hoverable>
|
|
16829
16937
|
<slot name="prefix" slot="prefix"></slot>
|
|
16830
|
-
<px-radio slot="suffix"
|
|
16938
|
+
<px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
16831
16939
|
<slot name="label" slot="label"></slot>
|
|
16832
16940
|
<slot name="description" slot="description"></slot>
|
|
16833
16941
|
</px-tile>
|
|
@@ -16916,7 +17024,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
16916
17024
|
if (this.$radio) {
|
|
16917
17025
|
if (!this.checkName(stateValues, newValue)) {
|
|
16918
17026
|
log(
|
|
16919
|
-
|
|
17027
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
|
|
16920
17028
|
);
|
|
16921
17029
|
return;
|
|
16922
17030
|
} else {
|
|
@@ -17108,9 +17216,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
17108
17216
|
if (!customElements.get("px-tile-radio")) {
|
|
17109
17217
|
customElements.define("px-tile-radio", TileRadio);
|
|
17110
17218
|
}
|
|
17111
|
-
const styles$
|
|
17112
|
-
const styleSheet$
|
|
17113
|
-
styleSheet$
|
|
17219
|
+
const styles$4 = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}";
|
|
17220
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
17221
|
+
styleSheet$5.replaceSync(styles$4);
|
|
17114
17222
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
17115
17223
|
commonStyleSheet$1.replaceSync(common);
|
|
17116
17224
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -17131,7 +17239,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
17131
17239
|
`;
|
|
17132
17240
|
}
|
|
17133
17241
|
constructor() {
|
|
17134
|
-
super(commonStyleSheet$1, styleSheet$
|
|
17242
|
+
super(commonStyleSheet$1, styleSheet$5);
|
|
17135
17243
|
const $root = document.createElement(_TileLink.nativeName);
|
|
17136
17244
|
$root.classList.add("tile-link");
|
|
17137
17245
|
$root.innerHTML = this.template();
|
|
@@ -17269,7 +17377,7 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
17269
17377
|
<div class="tile-switch">
|
|
17270
17378
|
<px-tile hoverable>
|
|
17271
17379
|
<slot name="prefix" slot="prefix"></slot>
|
|
17272
|
-
<px-switch slot="suffix"
|
|
17380
|
+
<px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
|
|
17273
17381
|
<slot name="label" slot="label"></slot>
|
|
17274
17382
|
<slot name="description" slot="description"></slot>
|
|
17275
17383
|
</px-tile>
|
|
@@ -17522,10 +17630,10 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
17522
17630
|
if (!customElements.get("px-tile-switch")) {
|
|
17523
17631
|
customElements.define("px-tile-switch", TileSwitch);
|
|
17524
17632
|
}
|
|
17525
|
-
const styles$
|
|
17526
|
-
const styles = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media screen and (min-width: 48rem){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media screen and (min-width: 90.0625rem){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}';
|
|
17527
|
-
const styleSheet$
|
|
17528
|
-
styleSheet$
|
|
17633
|
+
const styles$3 = ".timeline{list-style:none;margin:0;padding:0}";
|
|
17634
|
+
const styles$2 = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-size-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{display:flex;flex-direction:column;margin-bottom:var(--px-padding-m-mobile);gap:var(--px-spacing-xs-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media screen and (min-width: 48rem){.timeline-item{gap:var(--px-spacing-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-padding-m-tablet);gap:var(--px-spacing-xs-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.timeline-item{gap:var(--px-spacing-default-laptop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-laptop)}.content-area{margin-bottom:var(--px-padding-m-laptop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-laptop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-laptop)}}@media screen and (min-width: 90.0625rem){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-padding-m-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop)}}';
|
|
17635
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
17636
|
+
styleSheet$4.replaceSync(styles$2);
|
|
17529
17637
|
const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
|
|
17530
17638
|
let item = "1";
|
|
17531
17639
|
class TimelineItem extends HTMLElement {
|
|
@@ -17546,7 +17654,7 @@ class TimelineItem extends HTMLElement {
|
|
|
17546
17654
|
super();
|
|
17547
17655
|
this.attachShadow({ mode: "open" });
|
|
17548
17656
|
this.shadowRoot.innerHTML = this.template();
|
|
17549
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
17657
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
17550
17658
|
}
|
|
17551
17659
|
connectedCallback() {
|
|
17552
17660
|
this.dispatchEvent(
|
|
@@ -17606,15 +17714,15 @@ class TimelineItem extends HTMLElement {
|
|
|
17606
17714
|
if (!customElements.get("px-timeline-item")) {
|
|
17607
17715
|
customElements.define("px-timeline-item", TimelineItem);
|
|
17608
17716
|
}
|
|
17609
|
-
const styleSheet = new CSSStyleSheet();
|
|
17610
|
-
styleSheet.replaceSync(styles$
|
|
17717
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
17718
|
+
styleSheet$3.replaceSync(styles$3);
|
|
17611
17719
|
class Timeline extends HTMLElement {
|
|
17612
17720
|
constructor() {
|
|
17613
17721
|
super();
|
|
17614
17722
|
__privateAdd(this, _Timeline_instances);
|
|
17615
17723
|
this.attachShadow({ mode: "open" });
|
|
17616
17724
|
this.shadowRoot.innerHTML = this.template();
|
|
17617
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
17725
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
17618
17726
|
}
|
|
17619
17727
|
template() {
|
|
17620
17728
|
return `
|
|
@@ -17722,14 +17830,298 @@ class Typography extends HTMLElement {
|
|
|
17722
17830
|
if (!customElements.get("px-typography")) {
|
|
17723
17831
|
customElements.define("px-typography", Typography);
|
|
17724
17832
|
}
|
|
17833
|
+
const styles$1 = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;overflow:hidden}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}";
|
|
17834
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
17835
|
+
styleSheet$2.replaceSync(styles$1);
|
|
17836
|
+
const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
|
|
17837
|
+
constructor() {
|
|
17838
|
+
var _a;
|
|
17839
|
+
super(styleSheet$2);
|
|
17840
|
+
__privateAdd(this, _Autocomplete_instances);
|
|
17841
|
+
__privateAdd(this, _controlId);
|
|
17842
|
+
__privateAdd(this, _onKeyDown);
|
|
17843
|
+
__privateAdd(this, _onInput);
|
|
17844
|
+
__privateSet(this, _controlId, Math.random().toString(36).substring(2, 15));
|
|
17845
|
+
this.template = () => `
|
|
17846
|
+
<px-dropdown anchoralignment="bottom-left" manual-toggle>
|
|
17847
|
+
<px-input slot="trigger" auto-complete>
|
|
17848
|
+
<slot name="label" slot="label"></slot>
|
|
17849
|
+
<slot name="helper" slot="helper"></slot>
|
|
17850
|
+
<slot name="status-text" slot="status-text"></slot>
|
|
17851
|
+
</px-input>
|
|
17852
|
+
<div class="dropdown-content" slot="popover" role="listbox">
|
|
17853
|
+
<slot name="dropdown-content"></slot>
|
|
17854
|
+
</div>
|
|
17855
|
+
</px-dropdown>`;
|
|
17856
|
+
__privateSet(this, _onKeyDown, (event) => {
|
|
17857
|
+
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
|
|
17858
|
+
return;
|
|
17859
|
+
}
|
|
17860
|
+
if (this.$input.$el.getAttribute("aria-expanded") !== "true") {
|
|
17861
|
+
return;
|
|
17862
|
+
}
|
|
17863
|
+
const options = __privateGet(this, _Autocomplete_instances, options_get);
|
|
17864
|
+
if (!options.length) {
|
|
17865
|
+
return;
|
|
17866
|
+
}
|
|
17867
|
+
event.preventDefault();
|
|
17868
|
+
const currentIndex = options.findIndex(
|
|
17869
|
+
(option) => option === document.activeElement
|
|
17870
|
+
);
|
|
17871
|
+
let nextIndex;
|
|
17872
|
+
if (event.key === "ArrowDown") {
|
|
17873
|
+
nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
|
|
17874
|
+
} else {
|
|
17875
|
+
nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
|
|
17876
|
+
}
|
|
17877
|
+
options[nextIndex].focus();
|
|
17878
|
+
});
|
|
17879
|
+
__privateSet(this, _onInput, () => {
|
|
17880
|
+
var _a2;
|
|
17881
|
+
if (this.$input.value) {
|
|
17882
|
+
this.$input.$el.setAttribute("aria-expanded", "true");
|
|
17883
|
+
this.$dropDownContent.style.width = `${(_a2 = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a2.offsetWidth}px`;
|
|
17884
|
+
this.$dropDown.showPopover();
|
|
17885
|
+
} else {
|
|
17886
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17887
|
+
this.$dropDown.hidePopover();
|
|
17888
|
+
this.$input.focus();
|
|
17889
|
+
}
|
|
17890
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17891
|
+
});
|
|
17892
|
+
this.shadowRoot.innerHTML = this.template();
|
|
17893
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
17894
|
+
}
|
|
17895
|
+
static get observedAttributes() {
|
|
17896
|
+
return [
|
|
17897
|
+
...super.observedAttributes,
|
|
17898
|
+
"size",
|
|
17899
|
+
"state",
|
|
17900
|
+
"extended",
|
|
17901
|
+
"extended--mobile",
|
|
17902
|
+
"extended--tablet",
|
|
17903
|
+
"extended--laptop",
|
|
17904
|
+
"extended--desktop"
|
|
17905
|
+
];
|
|
17906
|
+
}
|
|
17907
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
17908
|
+
switch (name) {
|
|
17909
|
+
case "size":
|
|
17910
|
+
case "state":
|
|
17911
|
+
case "extended":
|
|
17912
|
+
case "extended--mobile":
|
|
17913
|
+
case "extended--tablet":
|
|
17914
|
+
case "extended--laptop":
|
|
17915
|
+
case "extended--desktop":
|
|
17916
|
+
if (newValue !== null) {
|
|
17917
|
+
this.$input.setAttribute(name, newValue);
|
|
17918
|
+
} else {
|
|
17919
|
+
this.$input.removeAttribute(name);
|
|
17920
|
+
}
|
|
17921
|
+
break;
|
|
17922
|
+
default:
|
|
17923
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
17924
|
+
break;
|
|
17925
|
+
}
|
|
17926
|
+
}
|
|
17927
|
+
connectedCallback() {
|
|
17928
|
+
var _a, _b;
|
|
17929
|
+
this.$input.addEventListener("input", __privateGet(this, _onInput));
|
|
17930
|
+
this.addEventListener("keydown", __privateGet(this, _onKeyDown));
|
|
17931
|
+
this.$dropDownContent.style.width = `${(_a = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a.offsetWidth}px`;
|
|
17932
|
+
this.$input.$el.setAttribute("role", "combobox");
|
|
17933
|
+
this.$input.$el.setAttribute("autocomplete", "off");
|
|
17934
|
+
this.$input.$el.setAttribute("aria-autocomplete", "both");
|
|
17935
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17936
|
+
this.$input.$el.setAttribute("aria-controls", __privateGet(this, _controlId));
|
|
17937
|
+
this.$dropDownContent.setAttribute("id", __privateGet(this, _controlId));
|
|
17938
|
+
this.$dropDownContent.setAttribute("role", "listbox");
|
|
17939
|
+
const labelId = (_b = this.$label) == null ? void 0 : _b.getAttribute("id");
|
|
17940
|
+
if (labelId) {
|
|
17941
|
+
this.$dropDownContent.setAttribute("aria-labelledby", labelId);
|
|
17942
|
+
}
|
|
17943
|
+
}
|
|
17944
|
+
disconnectedCallback() {
|
|
17945
|
+
this.$input.removeEventListener("input", __privateGet(this, _onInput));
|
|
17946
|
+
this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
|
|
17947
|
+
}
|
|
17948
|
+
get value() {
|
|
17949
|
+
return this.$input.value;
|
|
17950
|
+
}
|
|
17951
|
+
set value(value) {
|
|
17952
|
+
this.$input.value = value;
|
|
17953
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17954
|
+
this.$dropDown.hidePopover();
|
|
17955
|
+
this.$input.$el.focus();
|
|
17956
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17957
|
+
}
|
|
17958
|
+
get name() {
|
|
17959
|
+
return this.getAttribute("name");
|
|
17960
|
+
}
|
|
17961
|
+
formResetCallback() {
|
|
17962
|
+
this.$input.value = "";
|
|
17963
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17964
|
+
}
|
|
17965
|
+
formStateRestoreCallback(state) {
|
|
17966
|
+
this.$input.value = state;
|
|
17967
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17968
|
+
}
|
|
17969
|
+
get $dropDown() {
|
|
17970
|
+
return this.shadowRoot.querySelector("px-dropdown");
|
|
17971
|
+
}
|
|
17972
|
+
get $dropDownContent() {
|
|
17973
|
+
return this.shadowRoot.querySelector(".dropdown-content");
|
|
17974
|
+
}
|
|
17975
|
+
get $input() {
|
|
17976
|
+
return this.shadowRoot.querySelector("px-input");
|
|
17977
|
+
}
|
|
17978
|
+
get $label() {
|
|
17979
|
+
return this.querySelector('[slot="label"]');
|
|
17980
|
+
}
|
|
17981
|
+
};
|
|
17982
|
+
_controlId = new WeakMap();
|
|
17983
|
+
_onKeyDown = new WeakMap();
|
|
17984
|
+
_Autocomplete_instances = new WeakSet();
|
|
17985
|
+
options_get = function() {
|
|
17986
|
+
return Array.from(
|
|
17987
|
+
this.querySelectorAll(
|
|
17988
|
+
"px-autocomplete-option:not([disabled])"
|
|
17989
|
+
)
|
|
17990
|
+
);
|
|
17991
|
+
};
|
|
17992
|
+
_onInput = new WeakMap();
|
|
17993
|
+
updateFormValue_fn = function() {
|
|
17994
|
+
var _a;
|
|
17995
|
+
if (this.name) {
|
|
17996
|
+
const formData = new FormData();
|
|
17997
|
+
formData.append(this.name, this.value);
|
|
17998
|
+
(_a = this.internals) == null ? void 0 : _a.setFormValue(formData);
|
|
17999
|
+
}
|
|
18000
|
+
};
|
|
18001
|
+
_Autocomplete.formAssociated = true;
|
|
18002
|
+
let Autocomplete = _Autocomplete;
|
|
18003
|
+
if (!customElements.get("px-autocomplete")) {
|
|
18004
|
+
customElements.define("px-autocomplete", Autocomplete);
|
|
18005
|
+
}
|
|
18006
|
+
const styles = ":host{display:block}px-container{height:var(--px-size-l)}px-container>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer}px-container>button>px-span{padding:0 var(--px-padding-s-mobile)}.autocomplete-header{overflow:hidden}.autocomplete-header px-span{min-width:0;overflow-wrap:anywhere}:host([selected]) button,button:hover{background-color:var(--px-color-background-state-hover-default)}button:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:calc(-1 * var(--px-focus-offset-mobile));position:relative}@media only screen and (min-width: 48rem){button>px-span{padding:0 var(--px-padding-s-tablet)}button:focus-visible{outline-width:var(--px-focus-outline-tablet);outline-offset:calc(-1 * var(--px-focus-offset-tablet))}}@media only screen and (min-width: 64.0625rem){button>px-span{padding:0 var(--px-padding-s-laptop)}button:focus-visible{outline-width:var(--px-focus-outline-laptop);outline-offset:calc(-1 * var(--px-focus-offset-laptop))}}@media only screen and (min-width: 90.0625rem){button>px-span{padding:0 var(--px-padding-s-desktop)}button:focus-visible{outline-width:var(--px-focus-outline-desktop);outline-offset:calc(-1 * var(--px-focus-offset-desktop))}}";
|
|
18007
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
18008
|
+
styleSheet$1.replaceSync(styles);
|
|
18009
|
+
class AutocompleteHeader extends HTMLElement {
|
|
18010
|
+
constructor() {
|
|
18011
|
+
super();
|
|
18012
|
+
__privateAdd(this, _AutocompleteHeader_instances);
|
|
18013
|
+
this.template = () => `
|
|
18014
|
+
<px-container border-radius="none" padding="s" background-color="container-default" class="autocomplete-header">
|
|
18015
|
+
<px-hstack gap="s" align-items="center">
|
|
18016
|
+
<px-icon name="search" color="brand" size="m" from="lavender"></px-icon>
|
|
18017
|
+
<px-span size="body-s"><slot></slot></px-span>
|
|
18018
|
+
</px-hstack>
|
|
18019
|
+
</px-container>
|
|
18020
|
+
`;
|
|
18021
|
+
this.attachShadow({ mode: "open" });
|
|
18022
|
+
this.shadowRoot.innerHTML = this.template();
|
|
18023
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
18024
|
+
}
|
|
18025
|
+
connectedCallback() {
|
|
18026
|
+
__privateMethod(this, _AutocompleteHeader_instances, syncSlot_fn).call(this);
|
|
18027
|
+
}
|
|
18028
|
+
get $icon() {
|
|
18029
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
18030
|
+
}
|
|
18031
|
+
get $text() {
|
|
18032
|
+
return this.shadowRoot.querySelector("px-span");
|
|
18033
|
+
}
|
|
18034
|
+
}
|
|
18035
|
+
_AutocompleteHeader_instances = new WeakSet();
|
|
18036
|
+
syncSlot_fn = function() {
|
|
18037
|
+
var _a;
|
|
18038
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-autocomplete" && !this.slot) {
|
|
18039
|
+
this.slot = "dropdown-content";
|
|
18040
|
+
}
|
|
18041
|
+
};
|
|
18042
|
+
if (!customElements.get("px-autocomplete-header")) {
|
|
18043
|
+
customElements.define("px-autocomplete-header", AutocompleteHeader);
|
|
18044
|
+
}
|
|
18045
|
+
const styleSheet = new CSSStyleSheet();
|
|
18046
|
+
styleSheet.replaceSync(styles);
|
|
18047
|
+
class AutocompleteOption extends HTMLElement {
|
|
18048
|
+
constructor() {
|
|
18049
|
+
super();
|
|
18050
|
+
__privateAdd(this, _AutocompleteOption_instances);
|
|
18051
|
+
this.template = () => `<px-container tabindex="-1" padding="none" background-color="none"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></px-container>`;
|
|
18052
|
+
this.attachShadow({ mode: "open" });
|
|
18053
|
+
this.shadowRoot.innerHTML = this.template();
|
|
18054
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
18055
|
+
}
|
|
18056
|
+
static get observedAttributes() {
|
|
18057
|
+
return ["selected", "type"];
|
|
18058
|
+
}
|
|
18059
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
18060
|
+
if (oldValue === newValue) {
|
|
18061
|
+
return;
|
|
18062
|
+
}
|
|
18063
|
+
if (name === "selected") {
|
|
18064
|
+
this.$button.setAttribute("aria-selected", String(newValue !== null));
|
|
18065
|
+
return;
|
|
18066
|
+
}
|
|
18067
|
+
if (newValue === null) {
|
|
18068
|
+
this.$button.removeAttribute(name);
|
|
18069
|
+
} else {
|
|
18070
|
+
this.$button.setAttribute(name, newValue);
|
|
18071
|
+
}
|
|
18072
|
+
}
|
|
18073
|
+
connectedCallback() {
|
|
18074
|
+
__privateMethod(this, _AutocompleteOption_instances, syncSlot_fn2).call(this);
|
|
18075
|
+
this.$button.setAttribute(
|
|
18076
|
+
"aria-selected",
|
|
18077
|
+
String(this.hasAttribute("selected"))
|
|
18078
|
+
);
|
|
18079
|
+
if (!this.hasAttribute("tabindex")) {
|
|
18080
|
+
this.setAttribute("tabindex", "-1");
|
|
18081
|
+
}
|
|
18082
|
+
}
|
|
18083
|
+
// delegate host focus to the inner option button
|
|
18084
|
+
focus(options) {
|
|
18085
|
+
this.$button.focus(options);
|
|
18086
|
+
}
|
|
18087
|
+
get selected() {
|
|
18088
|
+
return this.hasAttribute("selected");
|
|
18089
|
+
}
|
|
18090
|
+
set selected(value) {
|
|
18091
|
+
this.toggleAttribute("selected", value);
|
|
18092
|
+
}
|
|
18093
|
+
get type() {
|
|
18094
|
+
return this.getAttribute("type") ?? "button";
|
|
18095
|
+
}
|
|
18096
|
+
set type(value) {
|
|
18097
|
+
this.setAttribute("type", value);
|
|
18098
|
+
}
|
|
18099
|
+
get $button() {
|
|
18100
|
+
return this.shadowRoot.querySelector("button");
|
|
18101
|
+
}
|
|
18102
|
+
}
|
|
18103
|
+
_AutocompleteOption_instances = new WeakSet();
|
|
18104
|
+
syncSlot_fn2 = function() {
|
|
18105
|
+
var _a;
|
|
18106
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-autocomplete" && !this.slot) {
|
|
18107
|
+
this.slot = "dropdown-content";
|
|
18108
|
+
}
|
|
18109
|
+
};
|
|
18110
|
+
if (!customElements.get("px-autocomplete-option")) {
|
|
18111
|
+
customElements.define("px-autocomplete-option", AutocompleteOption);
|
|
18112
|
+
}
|
|
17725
18113
|
export {
|
|
17726
18114
|
Accordion,
|
|
18115
|
+
ActionButton,
|
|
17727
18116
|
ActionLink,
|
|
17728
18117
|
AgGridTable,
|
|
17729
18118
|
AgGridTableThButton,
|
|
17730
18119
|
AgGridTableThContent,
|
|
17731
18120
|
AppleSeed,
|
|
17732
18121
|
AttributeBreakpointHandlerDelegate,
|
|
18122
|
+
Autocomplete,
|
|
18123
|
+
AutocompleteHeader,
|
|
18124
|
+
AutocompleteOption,
|
|
17733
18125
|
BREADCRUMB_ITEM_CONNECTED_EVENT,
|
|
17734
18126
|
Banner,
|
|
17735
18127
|
Breadcrumb,
|
|
@@ -17921,7 +18313,7 @@ export {
|
|
|
17921
18313
|
statusCardStateValues,
|
|
17922
18314
|
statusStateValues,
|
|
17923
18315
|
statusValues,
|
|
17924
|
-
styleSheet$
|
|
18316
|
+
styleSheet$G as styleSheet,
|
|
17925
18317
|
subgridRowsValues,
|
|
17926
18318
|
suffixButtonIconVariantValues,
|
|
17927
18319
|
textalignValues,
|