@proximus/lavender 1.4.10-alpha.9 → 1.4.10-beta.2
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 +680 -291
- 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$
|
|
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__ = {};
|
|
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
|
+
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]),:host([sticky-bottom]){z-index:5}: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__ = { "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)}:is():hover{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-accent-inverted)}:is():hover{color:var(--px-color-icon-accent-inverted)}';
|
|
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 {
|
|
@@ -13072,7 +13177,7 @@ class Modal extends HTMLElement {
|
|
|
13072
13177
|
</dialog>`;
|
|
13073
13178
|
this.attachShadow({ mode: "open" });
|
|
13074
13179
|
this.shadowRoot.innerHTML = this.template;
|
|
13075
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13180
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
13076
13181
|
}
|
|
13077
13182
|
connectedCallback() {
|
|
13078
13183
|
var _a, _b;
|
|
@@ -13383,8 +13488,8 @@ class Modal extends HTMLElement {
|
|
|
13383
13488
|
if (!customElements.get("px-modal")) {
|
|
13384
13489
|
customElements.define("px-modal", Modal);
|
|
13385
13490
|
}
|
|
13386
|
-
const styleSheet$
|
|
13387
|
-
styleSheet$
|
|
13491
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
13492
|
+
styleSheet$o.replaceSync(styles$L);
|
|
13388
13493
|
const patchVariantValues = [
|
|
13389
13494
|
"",
|
|
13390
13495
|
"default",
|
|
@@ -13406,7 +13511,7 @@ class Patch extends HTMLElement {
|
|
|
13406
13511
|
super();
|
|
13407
13512
|
this.attachShadow({ mode: "open" });
|
|
13408
13513
|
this.shadowRoot.innerHTML = this.template();
|
|
13409
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13514
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
|
|
13410
13515
|
}
|
|
13411
13516
|
static get observedAttributes() {
|
|
13412
13517
|
return ["variant", "shape", "inverted"];
|
|
@@ -13438,14 +13543,14 @@ class Patch extends HTMLElement {
|
|
|
13438
13543
|
this._toggleClass(oldValue, newValue);
|
|
13439
13544
|
if (!this.checkName(patchVariantValues, newValue)) {
|
|
13440
13545
|
log(
|
|
13441
|
-
|
|
13546
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${patchVariantValues.join('", "')}".`
|
|
13442
13547
|
);
|
|
13443
13548
|
}
|
|
13444
13549
|
}
|
|
13445
13550
|
updateShape(attrName, newValue, attrValue) {
|
|
13446
13551
|
if (!this.checkName(attrValue, newValue)) {
|
|
13447
13552
|
log(
|
|
13448
|
-
|
|
13553
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
13449
13554
|
);
|
|
13450
13555
|
return;
|
|
13451
13556
|
}
|
|
@@ -13562,7 +13667,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13562
13667
|
updateAlignment(attrName, oldValue, newValue) {
|
|
13563
13668
|
if (!this.checkName(pillarAlignmentValues, newValue)) {
|
|
13564
13669
|
log(
|
|
13565
|
-
|
|
13670
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarAlignmentValues.join('", "')}".`
|
|
13566
13671
|
);
|
|
13567
13672
|
return;
|
|
13568
13673
|
}
|
|
@@ -13581,7 +13686,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13581
13686
|
updateVariant(attrName, oldValue, newValue) {
|
|
13582
13687
|
if (!this.checkName(pillarVariantValues, newValue)) {
|
|
13583
13688
|
log(
|
|
13584
|
-
|
|
13689
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarVariantValues.join('", "')}".`
|
|
13585
13690
|
);
|
|
13586
13691
|
return;
|
|
13587
13692
|
}
|
|
@@ -13650,9 +13755,9 @@ class Pillar extends WithExtraAttributes {
|
|
|
13650
13755
|
if (!customElements.get("px-pillar")) {
|
|
13651
13756
|
customElements.define("px-pillar", Pillar);
|
|
13652
13757
|
}
|
|
13653
|
-
const styles$
|
|
13654
|
-
const styleSheet$
|
|
13655
|
-
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);
|
|
13656
13761
|
const cardContainerMediaPositionValues = [
|
|
13657
13762
|
"none",
|
|
13658
13763
|
"top",
|
|
@@ -13678,7 +13783,7 @@ class CardContainer extends HTMLElement {
|
|
|
13678
13783
|
super();
|
|
13679
13784
|
__privateAdd(this, _CardContainer_instances);
|
|
13680
13785
|
this.attachShadow({ mode: "open" });
|
|
13681
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13786
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n, paddingBreakpoints];
|
|
13682
13787
|
this.shadowRoot.innerHTML = this.template();
|
|
13683
13788
|
}
|
|
13684
13789
|
static get observedAttributes() {
|
|
@@ -13949,9 +14054,9 @@ setOrRemove_fn = function(name, value) {
|
|
|
13949
14054
|
if (!customElements.get("px-card-container")) {
|
|
13950
14055
|
customElements.define("px-card-container", CardContainer);
|
|
13951
14056
|
}
|
|
13952
|
-
const styles$
|
|
13953
|
-
const styleSheet$
|
|
13954
|
-
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);
|
|
13955
14060
|
class CardHeading extends HTMLElement {
|
|
13956
14061
|
template() {
|
|
13957
14062
|
return `
|
|
@@ -13963,16 +14068,16 @@ class CardHeading extends HTMLElement {
|
|
|
13963
14068
|
constructor() {
|
|
13964
14069
|
super();
|
|
13965
14070
|
this.attachShadow({ mode: "open" });
|
|
13966
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14071
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$m];
|
|
13967
14072
|
this.shadowRoot.innerHTML = this.template();
|
|
13968
14073
|
}
|
|
13969
14074
|
}
|
|
13970
14075
|
if (!customElements.get("px-card-heading")) {
|
|
13971
14076
|
customElements.define("px-card-heading", CardHeading);
|
|
13972
14077
|
}
|
|
13973
|
-
const styles$
|
|
13974
|
-
const styleSheet$
|
|
13975
|
-
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);
|
|
13976
14081
|
class CardActions extends HTMLElement {
|
|
13977
14082
|
template() {
|
|
13978
14083
|
return `
|
|
@@ -13987,7 +14092,7 @@ class CardActions extends HTMLElement {
|
|
|
13987
14092
|
constructor() {
|
|
13988
14093
|
super();
|
|
13989
14094
|
this.attachShadow({ mode: "open" });
|
|
13990
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14095
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
13991
14096
|
this.shadowRoot.innerHTML = this.template();
|
|
13992
14097
|
}
|
|
13993
14098
|
}
|
|
@@ -13995,8 +14100,8 @@ if (!customElements.get("px-card-actions")) {
|
|
|
13995
14100
|
customElements.define("px-card-actions", CardActions);
|
|
13996
14101
|
}
|
|
13997
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)}";
|
|
13998
|
-
const styles$
|
|
13999
|
-
styles$
|
|
14103
|
+
const styles$k = new CSSStyleSheet();
|
|
14104
|
+
styles$k.replaceSync(css$1);
|
|
14000
14105
|
const priceVariantValues = [
|
|
14001
14106
|
"default",
|
|
14002
14107
|
"promo",
|
|
@@ -14008,7 +14113,7 @@ const priceVariantValues = [
|
|
|
14008
14113
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
14009
14114
|
const _Price = class _Price extends PxElement {
|
|
14010
14115
|
constructor() {
|
|
14011
|
-
super(styles$
|
|
14116
|
+
super(styles$k);
|
|
14012
14117
|
this.template = () => `<span class="price"></span>`;
|
|
14013
14118
|
this.shadowRoot.innerHTML = this.template();
|
|
14014
14119
|
}
|
|
@@ -14063,7 +14168,7 @@ const _Price = class _Price extends PxElement {
|
|
|
14063
14168
|
this.toggleClass(oldValue, newValue);
|
|
14064
14169
|
if (!this.checkName(attrValues, newValue)) {
|
|
14065
14170
|
log(
|
|
14066
|
-
|
|
14171
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14067
14172
|
);
|
|
14068
14173
|
}
|
|
14069
14174
|
}
|
|
@@ -14109,11 +14214,11 @@ if (!customElements.get("px-price")) {
|
|
|
14109
14214
|
customElements.define("px-price", Price);
|
|
14110
14215
|
}
|
|
14111
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)}}";
|
|
14112
|
-
const styles$
|
|
14113
|
-
styles$
|
|
14217
|
+
const styles$j = new CSSStyleSheet();
|
|
14218
|
+
styles$j.replaceSync(css);
|
|
14114
14219
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
14115
14220
|
constructor() {
|
|
14116
|
-
super(styles$
|
|
14221
|
+
super(styles$j);
|
|
14117
14222
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
14118
14223
|
this.shadowRoot.innerHTML = this.template();
|
|
14119
14224
|
}
|
|
@@ -14136,9 +14241,9 @@ let Ribbon = _Ribbon;
|
|
|
14136
14241
|
if (!customElements.get("px-ribbon")) {
|
|
14137
14242
|
customElements.define("px-ribbon", Ribbon);
|
|
14138
14243
|
}
|
|
14139
|
-
const styles$
|
|
14140
|
-
const styleSheet$
|
|
14141
|
-
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);
|
|
14142
14247
|
class SelectableBox extends WithExtraAttributes {
|
|
14143
14248
|
template() {
|
|
14144
14249
|
return `
|
|
@@ -14165,7 +14270,7 @@ class SelectableBox extends WithExtraAttributes {
|
|
|
14165
14270
|
`;
|
|
14166
14271
|
}
|
|
14167
14272
|
constructor() {
|
|
14168
|
-
super(styleSheet$
|
|
14273
|
+
super(styleSheet$k);
|
|
14169
14274
|
this.shadowRoot.innerHTML = this.template();
|
|
14170
14275
|
}
|
|
14171
14276
|
static get observedAttributes() {
|
|
@@ -14221,9 +14326,9 @@ function shouldIgnoreSelectableBoxClick(event, host, ignoredTags = DEFAULT_IGNOR
|
|
|
14221
14326
|
}
|
|
14222
14327
|
return false;
|
|
14223
14328
|
}
|
|
14224
|
-
const styles$
|
|
14225
|
-
const styleSheet$
|
|
14226
|
-
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);
|
|
14227
14332
|
class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
14228
14333
|
template() {
|
|
14229
14334
|
return `
|
|
@@ -14245,7 +14350,7 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14245
14350
|
}
|
|
14246
14351
|
constructor() {
|
|
14247
14352
|
var _a;
|
|
14248
|
-
super(styleSheet$
|
|
14353
|
+
super(styleSheet$j);
|
|
14249
14354
|
this.shadowRoot.innerHTML = this.template();
|
|
14250
14355
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14251
14356
|
}
|
|
@@ -14385,14 +14490,14 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14385
14490
|
if (this.$checkbox) {
|
|
14386
14491
|
this.$checkbox.setAttribute("checked", "");
|
|
14387
14492
|
}
|
|
14388
|
-
this.dispatchEvent(
|
|
14389
|
-
new Event("change", {
|
|
14390
|
-
bubbles: true,
|
|
14391
|
-
composed: true
|
|
14392
|
-
// Allow the event to pass through shadow DOM boundaries
|
|
14393
|
-
})
|
|
14394
|
-
);
|
|
14395
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
|
+
);
|
|
14396
14501
|
}
|
|
14397
14502
|
// Form-associated callbacks
|
|
14398
14503
|
static get formAssociated() {
|
|
@@ -14492,8 +14597,8 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14492
14597
|
if (!customElements.get("px-selectable-box-checkbox")) {
|
|
14493
14598
|
customElements.define("px-selectable-box-checkbox", SelectableBoxCheckbox);
|
|
14494
14599
|
}
|
|
14495
|
-
const styleSheet$
|
|
14496
|
-
styleSheet$
|
|
14600
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
14601
|
+
styleSheet$i.replaceSync(styles$h);
|
|
14497
14602
|
class SelectableBoxRadio extends WithExtraAttributes {
|
|
14498
14603
|
template() {
|
|
14499
14604
|
return `
|
|
@@ -14515,7 +14620,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
|
|
|
14515
14620
|
}
|
|
14516
14621
|
constructor() {
|
|
14517
14622
|
var _a;
|
|
14518
|
-
super(styleSheet$
|
|
14623
|
+
super(styleSheet$i);
|
|
14519
14624
|
this.shadowRoot.innerHTML = this.template();
|
|
14520
14625
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14521
14626
|
}
|
|
@@ -14827,7 +14932,7 @@ const _Skeleton = class _Skeleton extends PxElement {
|
|
|
14827
14932
|
updateVariant(variant) {
|
|
14828
14933
|
if (!this.checkName(skeletonsVariantValues, variant)) {
|
|
14829
14934
|
log(
|
|
14830
|
-
|
|
14935
|
+
`"${variant}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${skeletonsVariantValues.join('", "')}".`
|
|
14831
14936
|
);
|
|
14832
14937
|
return;
|
|
14833
14938
|
}
|
|
@@ -14857,10 +14962,10 @@ let Skeleton = _Skeleton;
|
|
|
14857
14962
|
if (!customElements.get("px-skeleton")) {
|
|
14858
14963
|
customElements.define("px-skeleton", Skeleton);
|
|
14859
14964
|
}
|
|
14860
|
-
const styles$
|
|
14861
|
-
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();
|
|
14862
14967
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
14863
|
-
styleSheet$
|
|
14968
|
+
styleSheet$h.replaceSync(styles$g);
|
|
14864
14969
|
typographyStyles$1.replaceSync(typographyCss$1);
|
|
14865
14970
|
class Spinner extends HTMLElement {
|
|
14866
14971
|
template() {
|
|
@@ -14876,7 +14981,7 @@ class Spinner extends HTMLElement {
|
|
|
14876
14981
|
this.attachShadow({ mode: "open" });
|
|
14877
14982
|
this.shadowRoot.innerHTML = this.template();
|
|
14878
14983
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14879
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14984
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$h, typographyStyles$1];
|
|
14880
14985
|
}
|
|
14881
14986
|
static get observedAttributes() {
|
|
14882
14987
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -14917,7 +15022,7 @@ class Spinner extends HTMLElement {
|
|
|
14917
15022
|
}
|
|
14918
15023
|
if (!this.checkName(attrValues, newValue)) {
|
|
14919
15024
|
log(
|
|
14920
|
-
|
|
15025
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14921
15026
|
);
|
|
14922
15027
|
}
|
|
14923
15028
|
}
|
|
@@ -15029,7 +15134,7 @@ const _Status = class _Status extends PxElement {
|
|
|
15029
15134
|
updateState(state) {
|
|
15030
15135
|
if (!this.checkName(statusStateValues, state)) {
|
|
15031
15136
|
log(
|
|
15032
|
-
|
|
15137
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusStateValues.join('", "')}".`
|
|
15033
15138
|
);
|
|
15034
15139
|
return;
|
|
15035
15140
|
}
|
|
@@ -15224,7 +15329,7 @@ const _StatusCard = class _StatusCard extends PxElement {
|
|
|
15224
15329
|
updateState(state) {
|
|
15225
15330
|
if (!this.checkName(statusCardStateValues, state)) {
|
|
15226
15331
|
log(
|
|
15227
|
-
|
|
15332
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusCardStateValues.join('", "')}".`
|
|
15228
15333
|
);
|
|
15229
15334
|
return;
|
|
15230
15335
|
}
|
|
@@ -15294,9 +15399,9 @@ let StatusCard = _StatusCard;
|
|
|
15294
15399
|
if (!customElements.get("px-status-card")) {
|
|
15295
15400
|
customElements.define("px-status-card", StatusCard);
|
|
15296
15401
|
}
|
|
15297
|
-
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}";
|
|
15298
15403
|
const stylesheet = new CSSStyleSheet();
|
|
15299
|
-
stylesheet.replaceSync(styles$
|
|
15404
|
+
stylesheet.replaceSync(styles$f);
|
|
15300
15405
|
class StickyContainer extends HTMLElement {
|
|
15301
15406
|
constructor() {
|
|
15302
15407
|
super();
|
|
@@ -15516,9 +15621,9 @@ let Switch = _Switch;
|
|
|
15516
15621
|
if (!customElements.get("px-switch")) {
|
|
15517
15622
|
customElements.define("px-switch", Switch);
|
|
15518
15623
|
}
|
|
15519
|
-
const styles$
|
|
15520
|
-
const styleSheet$
|
|
15521
|
-
styleSheet$
|
|
15624
|
+
const styles$e = ":host{display:table;width:100%}";
|
|
15625
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
15626
|
+
styleSheet$g.replaceSync(styles$e);
|
|
15522
15627
|
class Table extends HTMLElement {
|
|
15523
15628
|
constructor() {
|
|
15524
15629
|
super();
|
|
@@ -15527,7 +15632,7 @@ class Table extends HTMLElement {
|
|
|
15527
15632
|
`;
|
|
15528
15633
|
this.attachShadow({ mode: "open" });
|
|
15529
15634
|
this.shadowRoot.innerHTML = this.template();
|
|
15530
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15635
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$g];
|
|
15531
15636
|
}
|
|
15532
15637
|
connectedCallback() {
|
|
15533
15638
|
this.style.display = "table";
|
|
@@ -15537,9 +15642,9 @@ class Table extends HTMLElement {
|
|
|
15537
15642
|
if (!customElements.get("px-table")) {
|
|
15538
15643
|
customElements.define("px-table", Table);
|
|
15539
15644
|
}
|
|
15540
|
-
const styles$
|
|
15541
|
-
const styleSheet$
|
|
15542
|
-
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);
|
|
15543
15648
|
class Thead extends HTMLElement {
|
|
15544
15649
|
constructor() {
|
|
15545
15650
|
super();
|
|
@@ -15548,7 +15653,7 @@ class Thead extends HTMLElement {
|
|
|
15548
15653
|
`;
|
|
15549
15654
|
this.attachShadow({ mode: "open" });
|
|
15550
15655
|
this.shadowRoot.innerHTML = this.template();
|
|
15551
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15656
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$f];
|
|
15552
15657
|
}
|
|
15553
15658
|
connectedCallback() {
|
|
15554
15659
|
this.style.display = "table-header-group";
|
|
@@ -15558,9 +15663,9 @@ class Thead extends HTMLElement {
|
|
|
15558
15663
|
if (!customElements.get("px-thead")) {
|
|
15559
15664
|
customElements.define("px-thead", Thead);
|
|
15560
15665
|
}
|
|
15561
|
-
const styles$
|
|
15562
|
-
const styleSheet$
|
|
15563
|
-
styleSheet$
|
|
15666
|
+
const styles$c = ":host{display:table-row}";
|
|
15667
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
15668
|
+
styleSheet$e.replaceSync(styles$c);
|
|
15564
15669
|
class Tr extends HTMLElement {
|
|
15565
15670
|
constructor() {
|
|
15566
15671
|
super();
|
|
@@ -15569,7 +15674,7 @@ class Tr extends HTMLElement {
|
|
|
15569
15674
|
`;
|
|
15570
15675
|
this.attachShadow({ mode: "open" });
|
|
15571
15676
|
this.shadowRoot.innerHTML = this.template();
|
|
15572
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15677
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$e];
|
|
15573
15678
|
}
|
|
15574
15679
|
connectedCallback() {
|
|
15575
15680
|
this.style.display = "table-row";
|
|
@@ -15579,9 +15684,9 @@ class Tr extends HTMLElement {
|
|
|
15579
15684
|
if (!customElements.get("px-tr")) {
|
|
15580
15685
|
customElements.define("px-tr", Tr);
|
|
15581
15686
|
}
|
|
15582
|
-
const styles$
|
|
15583
|
-
const styleSheet$
|
|
15584
|
-
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);
|
|
15585
15690
|
class Th extends HTMLElement {
|
|
15586
15691
|
constructor() {
|
|
15587
15692
|
super();
|
|
@@ -15598,7 +15703,7 @@ class Th extends HTMLElement {
|
|
|
15598
15703
|
`;
|
|
15599
15704
|
this.attachShadow({ mode: "open" });
|
|
15600
15705
|
this.shadowRoot.innerHTML = this.template();
|
|
15601
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15706
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$d];
|
|
15602
15707
|
}
|
|
15603
15708
|
connectedCallback() {
|
|
15604
15709
|
this.style.display = "table-cell";
|
|
@@ -15615,9 +15720,9 @@ class Th extends HTMLElement {
|
|
|
15615
15720
|
if (!customElements.get("px-th")) {
|
|
15616
15721
|
customElements.define("px-th", Th);
|
|
15617
15722
|
}
|
|
15618
|
-
const styles$
|
|
15619
|
-
const styleSheet$
|
|
15620
|
-
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);
|
|
15621
15726
|
class Tbody extends HTMLElement {
|
|
15622
15727
|
constructor() {
|
|
15623
15728
|
super();
|
|
@@ -15626,7 +15731,7 @@ class Tbody extends HTMLElement {
|
|
|
15626
15731
|
`;
|
|
15627
15732
|
this.attachShadow({ mode: "open" });
|
|
15628
15733
|
this.shadowRoot.innerHTML = this.template();
|
|
15629
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15734
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$c];
|
|
15630
15735
|
}
|
|
15631
15736
|
connectedCallback() {
|
|
15632
15737
|
this.style.display = "table-row-group";
|
|
@@ -15636,9 +15741,9 @@ class Tbody extends HTMLElement {
|
|
|
15636
15741
|
if (!customElements.get("px-tbody")) {
|
|
15637
15742
|
customElements.define("px-tbody", Tbody);
|
|
15638
15743
|
}
|
|
15639
|
-
const styles$
|
|
15640
|
-
const styleSheet$
|
|
15641
|
-
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);
|
|
15642
15747
|
class Td extends HTMLElement {
|
|
15643
15748
|
constructor() {
|
|
15644
15749
|
super();
|
|
@@ -15658,7 +15763,7 @@ class Td extends HTMLElement {
|
|
|
15658
15763
|
`;
|
|
15659
15764
|
this.attachShadow({ mode: "open" });
|
|
15660
15765
|
this.shadowRoot.innerHTML = this.template();
|
|
15661
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15766
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$b];
|
|
15662
15767
|
}
|
|
15663
15768
|
connectedCallback() {
|
|
15664
15769
|
this.style.display = "table-cell";
|
|
@@ -15680,9 +15785,9 @@ class Td extends HTMLElement {
|
|
|
15680
15785
|
if (!customElements.get("px-td")) {
|
|
15681
15786
|
customElements.define("px-td", Td);
|
|
15682
15787
|
}
|
|
15683
|
-
const styles$
|
|
15684
|
-
const styleSheet$
|
|
15685
|
-
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);
|
|
15686
15791
|
const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
|
|
15687
15792
|
const TAB_CONNECTED_EVENT = "px-tab-connected";
|
|
15688
15793
|
class Tab extends HTMLElement {
|
|
@@ -15696,7 +15801,7 @@ class Tab extends HTMLElement {
|
|
|
15696
15801
|
`;
|
|
15697
15802
|
this.attachShadow({ mode: "open" });
|
|
15698
15803
|
this.shadowRoot.innerHTML = this.template();
|
|
15699
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15804
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$a];
|
|
15700
15805
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15701
15806
|
}
|
|
15702
15807
|
static get observedAttributes() {
|
|
@@ -15788,9 +15893,9 @@ class Tab extends HTMLElement {
|
|
|
15788
15893
|
}
|
|
15789
15894
|
}
|
|
15790
15895
|
}
|
|
15791
|
-
const styles$
|
|
15792
|
-
const styleSheet$
|
|
15793
|
-
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);
|
|
15794
15899
|
class Tabs extends HTMLElement {
|
|
15795
15900
|
constructor() {
|
|
15796
15901
|
var _a;
|
|
@@ -15822,7 +15927,7 @@ class Tabs extends HTMLElement {
|
|
|
15822
15927
|
};
|
|
15823
15928
|
this.attachShadow({ mode: "open" });
|
|
15824
15929
|
this.shadowRoot.innerHTML = this.template();
|
|
15825
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15930
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
15826
15931
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15827
15932
|
}
|
|
15828
15933
|
static get observedAttributes() {
|
|
@@ -16030,7 +16135,7 @@ class TabPanel extends HTMLElement {
|
|
|
16030
16135
|
`;
|
|
16031
16136
|
this.attachShadow({ mode: "open" });
|
|
16032
16137
|
this.shadowRoot.innerHTML = this.template();
|
|
16033
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16138
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
16034
16139
|
}
|
|
16035
16140
|
static get observedAttributes() {
|
|
16036
16141
|
return ["name", "selected"];
|
|
@@ -16101,8 +16206,8 @@ class PxTabPanel extends TabPanel {
|
|
|
16101
16206
|
if (!customElements.get("px-tab-panel")) {
|
|
16102
16207
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
16103
16208
|
}
|
|
16104
|
-
const styleSheet$
|
|
16105
|
-
styleSheet$
|
|
16209
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
16210
|
+
styleSheet$8.replaceSync(styles$K);
|
|
16106
16211
|
const _Tag = class _Tag extends PxElement {
|
|
16107
16212
|
template() {
|
|
16108
16213
|
return `
|
|
@@ -16114,9 +16219,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
16114
16219
|
`;
|
|
16115
16220
|
}
|
|
16116
16221
|
constructor() {
|
|
16117
|
-
super(styleSheet$
|
|
16222
|
+
super(styleSheet$8);
|
|
16118
16223
|
this.shadowRoot.innerHTML = this.template();
|
|
16119
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16224
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
16120
16225
|
}
|
|
16121
16226
|
connectedCallback() {
|
|
16122
16227
|
if (this.$iconSlot) {
|
|
@@ -16229,10 +16334,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
16229
16334
|
}
|
|
16230
16335
|
}
|
|
16231
16336
|
}
|
|
16232
|
-
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)}';
|
|
16233
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)}';
|
|
16234
|
-
const styleSheet$
|
|
16235
|
-
styleSheet$
|
|
16339
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
16340
|
+
styleSheet$7.replaceSync(styles$6);
|
|
16236
16341
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
16237
16342
|
commonStyleSheet$5.replaceSync(common);
|
|
16238
16343
|
const tileBackgroundColorValues = [
|
|
@@ -16255,7 +16360,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16255
16360
|
`;
|
|
16256
16361
|
}
|
|
16257
16362
|
constructor() {
|
|
16258
|
-
super(commonStyleSheet$5, styleSheet$
|
|
16363
|
+
super(commonStyleSheet$5, styleSheet$7);
|
|
16259
16364
|
const $root = document.createElement(_Tile.nativeName);
|
|
16260
16365
|
$root.classList.add("tile");
|
|
16261
16366
|
$root.innerHTML = this.template();
|
|
@@ -16320,7 +16425,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16320
16425
|
updateBackgroundColor(oldValue, newValue, attrValue) {
|
|
16321
16426
|
if (!checkName(attrValue, newValue)) {
|
|
16322
16427
|
log(
|
|
16323
|
-
|
|
16428
|
+
`"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
16324
16429
|
);
|
|
16325
16430
|
return;
|
|
16326
16431
|
}
|
|
@@ -16410,9 +16515,9 @@ let Tile = _Tile;
|
|
|
16410
16515
|
if (!customElements.get("px-tile")) {
|
|
16411
16516
|
customElements.define("px-tile", Tile);
|
|
16412
16517
|
}
|
|
16413
|
-
const styles$
|
|
16414
|
-
const styleSheet$
|
|
16415
|
-
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);
|
|
16416
16521
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
16417
16522
|
commonStyleSheet$4.replaceSync(common);
|
|
16418
16523
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -16427,7 +16532,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
16427
16532
|
`;
|
|
16428
16533
|
}
|
|
16429
16534
|
constructor() {
|
|
16430
|
-
super(commonStyleSheet$4, styleSheet$
|
|
16535
|
+
super(commonStyleSheet$4, styleSheet$6);
|
|
16431
16536
|
const $root = document.createElement(_TileButton.nativeName);
|
|
16432
16537
|
$root.classList.add("tile-button");
|
|
16433
16538
|
$root.innerHTML = this.template();
|
|
@@ -16550,7 +16655,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
16550
16655
|
<div class="tile-checkbox">
|
|
16551
16656
|
<px-tile hoverable>
|
|
16552
16657
|
<slot name="prefix" slot="prefix"></slot>
|
|
16553
|
-
<px-checkbox slot="suffix"
|
|
16658
|
+
<px-checkbox slot="suffix" aria-hidden="true" tabindex="-1"></px-checkbox>
|
|
16554
16659
|
<slot name="label" slot="label"></slot>
|
|
16555
16660
|
<slot name="description" slot="description"></slot>
|
|
16556
16661
|
</px-tile>
|
|
@@ -16636,7 +16741,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
16636
16741
|
if (this.$checkbox) {
|
|
16637
16742
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
16638
16743
|
log(
|
|
16639
|
-
|
|
16744
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
|
|
16640
16745
|
);
|
|
16641
16746
|
return;
|
|
16642
16747
|
} else {
|
|
@@ -16830,7 +16935,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
16830
16935
|
<div class="tile-radio">
|
|
16831
16936
|
<px-tile hoverable>
|
|
16832
16937
|
<slot name="prefix" slot="prefix"></slot>
|
|
16833
|
-
<px-radio slot="suffix"
|
|
16938
|
+
<px-radio slot="suffix" aria-hidden="true" tabindex="-1"></px-radio>
|
|
16834
16939
|
<slot name="label" slot="label"></slot>
|
|
16835
16940
|
<slot name="description" slot="description"></slot>
|
|
16836
16941
|
</px-tile>
|
|
@@ -16919,7 +17024,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
16919
17024
|
if (this.$radio) {
|
|
16920
17025
|
if (!this.checkName(stateValues, newValue)) {
|
|
16921
17026
|
log(
|
|
16922
|
-
|
|
17027
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
|
|
16923
17028
|
);
|
|
16924
17029
|
return;
|
|
16925
17030
|
} else {
|
|
@@ -17111,9 +17216,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
17111
17216
|
if (!customElements.get("px-tile-radio")) {
|
|
17112
17217
|
customElements.define("px-tile-radio", TileRadio);
|
|
17113
17218
|
}
|
|
17114
|
-
const styles$
|
|
17115
|
-
const styleSheet$
|
|
17116
|
-
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);
|
|
17117
17222
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
17118
17223
|
commonStyleSheet$1.replaceSync(common);
|
|
17119
17224
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -17134,7 +17239,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
17134
17239
|
`;
|
|
17135
17240
|
}
|
|
17136
17241
|
constructor() {
|
|
17137
|
-
super(commonStyleSheet$1, styleSheet$
|
|
17242
|
+
super(commonStyleSheet$1, styleSheet$5);
|
|
17138
17243
|
const $root = document.createElement(_TileLink.nativeName);
|
|
17139
17244
|
$root.classList.add("tile-link");
|
|
17140
17245
|
$root.innerHTML = this.template();
|
|
@@ -17272,7 +17377,7 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
17272
17377
|
<div class="tile-switch">
|
|
17273
17378
|
<px-tile hoverable>
|
|
17274
17379
|
<slot name="prefix" slot="prefix"></slot>
|
|
17275
|
-
<px-switch slot="suffix"
|
|
17380
|
+
<px-switch slot="suffix" aria-hidden="true" tabindex="-1"></px-switch>
|
|
17276
17381
|
<slot name="label" slot="label"></slot>
|
|
17277
17382
|
<slot name="description" slot="description"></slot>
|
|
17278
17383
|
</px-tile>
|
|
@@ -17525,10 +17630,10 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
17525
17630
|
if (!customElements.get("px-tile-switch")) {
|
|
17526
17631
|
customElements.define("px-tile-switch", TileSwitch);
|
|
17527
17632
|
}
|
|
17528
|
-
const styles$
|
|
17529
|
-
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)}}';
|
|
17530
|
-
const styleSheet$
|
|
17531
|
-
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);
|
|
17532
17637
|
const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
|
|
17533
17638
|
let item = "1";
|
|
17534
17639
|
class TimelineItem extends HTMLElement {
|
|
@@ -17549,7 +17654,7 @@ class TimelineItem extends HTMLElement {
|
|
|
17549
17654
|
super();
|
|
17550
17655
|
this.attachShadow({ mode: "open" });
|
|
17551
17656
|
this.shadowRoot.innerHTML = this.template();
|
|
17552
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
17657
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
17553
17658
|
}
|
|
17554
17659
|
connectedCallback() {
|
|
17555
17660
|
this.dispatchEvent(
|
|
@@ -17609,15 +17714,15 @@ class TimelineItem extends HTMLElement {
|
|
|
17609
17714
|
if (!customElements.get("px-timeline-item")) {
|
|
17610
17715
|
customElements.define("px-timeline-item", TimelineItem);
|
|
17611
17716
|
}
|
|
17612
|
-
const styleSheet = new CSSStyleSheet();
|
|
17613
|
-
styleSheet.replaceSync(styles$
|
|
17717
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
17718
|
+
styleSheet$3.replaceSync(styles$3);
|
|
17614
17719
|
class Timeline extends HTMLElement {
|
|
17615
17720
|
constructor() {
|
|
17616
17721
|
super();
|
|
17617
17722
|
__privateAdd(this, _Timeline_instances);
|
|
17618
17723
|
this.attachShadow({ mode: "open" });
|
|
17619
17724
|
this.shadowRoot.innerHTML = this.template();
|
|
17620
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
17725
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
17621
17726
|
}
|
|
17622
17727
|
template() {
|
|
17623
17728
|
return `
|
|
@@ -17725,14 +17830,298 @@ class Typography extends HTMLElement {
|
|
|
17725
17830
|
if (!customElements.get("px-typography")) {
|
|
17726
17831
|
customElements.define("px-typography", Typography);
|
|
17727
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
|
+
}
|
|
17728
18113
|
export {
|
|
17729
18114
|
Accordion,
|
|
18115
|
+
ActionButton,
|
|
17730
18116
|
ActionLink,
|
|
17731
18117
|
AgGridTable,
|
|
17732
18118
|
AgGridTableThButton,
|
|
17733
18119
|
AgGridTableThContent,
|
|
17734
18120
|
AppleSeed,
|
|
17735
18121
|
AttributeBreakpointHandlerDelegate,
|
|
18122
|
+
Autocomplete,
|
|
18123
|
+
AutocompleteHeader,
|
|
18124
|
+
AutocompleteOption,
|
|
17736
18125
|
BREADCRUMB_ITEM_CONNECTED_EVENT,
|
|
17737
18126
|
Banner,
|
|
17738
18127
|
Breadcrumb,
|
|
@@ -17924,7 +18313,7 @@ export {
|
|
|
17924
18313
|
statusCardStateValues,
|
|
17925
18314
|
statusStateValues,
|
|
17926
18315
|
statusValues,
|
|
17927
|
-
styleSheet$
|
|
18316
|
+
styleSheet$G as styleSheet,
|
|
17928
18317
|
subgridRowsValues,
|
|
17929
18318
|
suffixButtonIconVariantValues,
|
|
17930
18319
|
textalignValues,
|