@proximus/lavender 1.4.10-alpha.2 → 1.4.10-alpha.20
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 +769 -387
- 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,
|
|
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:
|
|
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]){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"
|
|
@@ -991,7 +994,7 @@ function cssTokenBreakpoints(attributeName, selector, attributeValues, cssProper
|
|
|
991
994
|
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
992
995
|
}
|
|
993
996
|
/* Mobile only - max 767px */
|
|
994
|
-
@media only screen and (max-width: 47.
|
|
997
|
+
@media only screen and (max-width: 47.938rem) {
|
|
995
998
|
${selector(selectorAttributeName, attributeValue)} {
|
|
996
999
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
997
1000
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
@@ -999,28 +1002,28 @@ function cssTokenBreakpoints(attributeName, selector, attributeValues, cssProper
|
|
|
999
1002
|
}
|
|
1000
1003
|
${selector(selectorAttributeName, attributeValue, "mobile")} {
|
|
1001
1004
|
/* Mobile only - max 767px */
|
|
1002
|
-
@media only screen and (max-width: 47.
|
|
1005
|
+
@media only screen and (max-width: 47.938rem) {
|
|
1003
1006
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
|
|
1004
1007
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
1005
1008
|
}
|
|
1006
1009
|
}
|
|
1007
1010
|
${selector(selectorAttributeName, attributeValue, "tablet")} {
|
|
1008
1011
|
/* Tablet - min 768px max 1024px */
|
|
1009
|
-
@media only screen and (min-width:
|
|
1012
|
+
@media only screen and (min-width: 48rem) and (max-width: 64rem) {
|
|
1010
1013
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
1011
1014
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
1012
1015
|
}
|
|
1013
1016
|
}
|
|
1014
1017
|
${selector(selectorAttributeName, attributeValue, "laptop")} {
|
|
1015
1018
|
/* Laptop - 1025px*/
|
|
1016
|
-
@media only screen and (min-width: 64.
|
|
1019
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
1017
1020
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
1018
1021
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
1019
1022
|
}
|
|
1020
1023
|
}
|
|
1021
1024
|
${selector(selectorAttributeName, attributeValue, "desktop")} {
|
|
1022
1025
|
/* Desktop - 1025px*/
|
|
1023
|
-
@media only screen and (min-width: 64.
|
|
1026
|
+
@media only screen and (min-width: 64.0625rem) {
|
|
1024
1027
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
1025
1028
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
1026
1029
|
}
|
|
@@ -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>
|
|
@@ -1885,7 +1892,7 @@ class Page extends WithExtraAttributes {
|
|
|
1885
1892
|
if (customElements.get("px-page") === void 0) {
|
|
1886
1893
|
customElements.define("px-page", Page);
|
|
1887
1894
|
}
|
|
1888
|
-
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-m-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-m-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained[no-content-padding] slot[name=content]{padding:0}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media
|
|
1895
|
+
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{font-size:var(--px-text-size-label-m-mobile);align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single):not(.contained){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-m-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-m-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained{border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-none-default);background-color:var( --accordion-contained-background-color-default, var(--px-color-background-container-default-default) )}details:not(.single).contained summary{padding:var(--px-padding-m-mobile);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default)}details:not(.single).contained[no-content-padding] slot[name=content]{padding:0}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]) details:not(.single).contained{background-color:var( --accordion-contained-background-color-inverted, var(--px-color-background-container-default-inverted) );border-color:var(--px-color-border-none-inverted)}:host([inverted]) details:not(.single).contained summary{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details:not(.single).contained summary:hover{background-color:var(--px-color-background-none)}:host([inverted]) details:not(.single).contained:has(summary:hover){background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media screen and (min-width: 48rem){details summary{font-size:var(--px-text-size-label-m-tablet)}details:not(.single) slot[name=content]{padding:var(--px-padding-m-tablet)}details:not(.single) summary{padding:var(--px-padding-m-tablet);gap:var(--px-spacing-s-tablet)}details:not(.single).contained summary{padding:var(--px-padding-m-tablet);font-size:var(--px-text-size-label-l-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media screen and (min-width: 64.0625rem){details summary{font-size:var(--px-text-size-label-m-laptop)}details:not(.single) slot[name=content]{padding:var(--px-padding-m-laptop)}details:not(.single) summary{padding:var(--px-padding-m-laptop);gap:var(--px-spacing-s-laptop)}details:not(.single).contained summary{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-padding-m-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
|
|
1889
1896
|
const accordionStyles = new CSSStyleSheet();
|
|
1890
1897
|
accordionStyles.replaceSync(accordionCss);
|
|
1891
1898
|
const accordionVariantValues = [
|
|
@@ -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">
|
|
@@ -2260,8 +2267,8 @@ _template = new WeakMap();
|
|
|
2260
2267
|
if (!customElements.get("px-icon")) {
|
|
2261
2268
|
customElements.define("px-icon", Icon);
|
|
2262
2269
|
}
|
|
2263
|
-
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media
|
|
2264
|
-
const typographyCss$1 = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media
|
|
2270
|
+
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-laptop)}}";
|
|
2271
|
+
const typographyCss$1 = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}";
|
|
2265
2272
|
const spanStyles$1 = new CSSStyleSheet();
|
|
2266
2273
|
const typographyStyles$5 = new CSSStyleSheet();
|
|
2267
2274
|
spanStyles$1.replaceSync(spanCss);
|
|
@@ -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,7 +2378,91 @@ let Span = _Span;
|
|
|
2371
2378
|
if (!customElements.get("px-span")) {
|
|
2372
2379
|
customElements.define("px-span", Span);
|
|
2373
2380
|
}
|
|
2374
|
-
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 only screen and (max-width: 47.938em){.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 only screen and (min-width: 48em) and (max-width: 64em){.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 only screen and (min-width: 64.0625em) and (max-width: 90em){: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 only screen and (min-width: 64.0625em){.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.0625em){: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)}}';
|
|
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
|
+
}
|
|
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);
|
|
2377
2468
|
const anchorSpacingValues = [
|
|
@@ -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
|
|
@@ -3293,7 +3383,7 @@ let ActionLink = _ActionLink;
|
|
|
3293
3383
|
if (!customElements.get("px-action-link")) {
|
|
3294
3384
|
customElements.define("px-action-link", ActionLink);
|
|
3295
3385
|
}
|
|
3296
|
-
const agGridTableCss = ":host{--ag-font-family: var(--px-font-family);--ag-font-size:
|
|
3386
|
+
const agGridTableCss = ":host{--ag-font-family: var(--px-font-family);--ag-font-size: var(--px-font-size-base);--ag-data-font-size: var(--px-font-size-base);--ag-accent-color: var(--px-color-text-brand-default);--ag-background-color: var(--px-color-background-container-light-default);--ag-foreground-color: var(--px-color-text-neutral-default);--ag-cell-text-color: var(--px-color-text-neutral-default);--ag-border-color: var(--px-color-border-main-default);--ag-border-radius: var(--px-radius-main);--ag-wrapper-border-radius: var(--px-radius-main);--ag-spacing: var(--px-padding-xs-mobile);--ag-header-background-color: var( --px-color-background-container-default-default );--ag-header-font-weight: var(--px-font-weight-title);--ag-icon-size: 1rem;--ag-row-hover-color: rgba(0, 0, 0, .04);--ag-checkbox-border-radius: 4px;--ag-checkbox-indeterminate-background-color: var( --px-color-background-surface-brand );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-default );--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-default);--ag-invalid-color: var(--px-color-text-purpose-error-default);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-default );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-default );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-default );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-default);--ag-selected-row-background-color: rgba(0, 0, 0, .04)}@media screen and (min-width: 48rem){:host{--ag-spacing: var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){:host{--ag-spacing: var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){:host{--ag-spacing: var(--px-padding-xs-desktop)}}:host([inverted]){--ag-accent-color: var(--px-color-text-brand-inverted);--ag-background-color: var(--px-color-background-surface-dark);--ag-foreground-color: var(--px-color-text-neutral-inverted);--ag-cell-text-color: var(--px-color-text-neutral-inverted);--ag-border-color: var(--px-color-border-main-inverted);--ag-header-background-color: var( --px-color-background-container-default-inverted );--ag-row-hover-color: rgba(255, 255, 255, .08);--ag-tooltip-error-text-color: var(--px-color-text-purpose-error-inverted);--ag-invalid-color: var(--px-color-text-purpose-error-inverted);--ag-value-change-delta-up-color: var( --px-color-text-purpose-success-inverted );--ag-value-change-delta-down-color: var( --px-color-text-purpose-error-inverted );--ag-button-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-button-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-input-disabled-background-color: var( --px-color-background-state-disabled-inverted );--ag-input-disabled-text-color: var(--px-color-text-state-disabled-inverted);--ag-selected-row-background-color: rgba(255, 255, 255, .08);--ag-checkbox-checked-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-shape-color: var(--px-color-text-brand-default);--ag-checkbox-indeterminate-background-color: var( --px-color-background-container-primary-inverted );--ag-checkbox-indeterminate-border-color: var( --px-color-border-brand-inverted )}";
|
|
3297
3387
|
const agGridTableStyles = new CSSStyleSheet();
|
|
3298
3388
|
agGridTableStyles.replaceSync(agGridTableCss);
|
|
3299
3389
|
class AgGridTable extends WithExtraAttributes {
|
|
@@ -3328,7 +3418,7 @@ class AgGridTable extends WithExtraAttributes {
|
|
|
3328
3418
|
if (!customElements.get("px-ag-grid-table")) {
|
|
3329
3419
|
customElements.define("px-ag-grid-table", AgGridTable);
|
|
3330
3420
|
}
|
|
3331
|
-
const agGridTableThButtonCss = `:host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-button{max-width:100%;font-size:var(--px-font-size-base);font-family:var(--px-font-family);display:inline-flex;gap:var(--px-spacing-xs-mobile);align-items:center;text-align:left;cursor:pointer;background:none;border:none;padding:0;margin:0}.ag-grid-table-th-button .sort-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.ag-grid-table-th-button .sort-icon:after{content:"";width:var(--px-size-icon-s);height:var(--px-size-icon-s);-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 width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");background-color:currentColor;color:var(--px-color-text-neutral-default)}.ag-grid-table-th-button[sorting=ascending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}.ag-grid-table-th-button[sorting=descending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}@media
|
|
3421
|
+
const agGridTableThButtonCss = `:host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-button{max-width:100%;font-size:var(--px-font-size-base);font-family:var(--px-font-family);display:inline-flex;gap:var(--px-spacing-xs-mobile);align-items:center;text-align:left;cursor:pointer;background:none;border:none;padding:0;margin:0}.ag-grid-table-th-button .sort-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.ag-grid-table-th-button .sort-icon:after{content:"";width:var(--px-size-icon-s);height:var(--px-size-icon-s);-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 width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.71429 10.2857L12 4.28572L16.2857 10.2857H7.71429Z' fill='%235C2D91'/%3E%3Cpath d='M16.2857 13.7143L12 19.7143L7.71428 13.7143L16.2857 13.7143Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");background-color:currentColor;color:var(--px-color-text-neutral-default)}.ag-grid-table-th-button[sorting=ascending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5702 12.6927C18.1876 13.0752 17.5674 13.0752 17.1848 12.6927L12.9796 8.48739L12.9796 17.8775C12.9796 18.4186 12.541 18.8571 12 18.8571C11.459 18.8571 11.0204 18.4186 11.0204 17.8775L11.0204 8.48739L6.8151 12.6927C6.43254 13.0752 5.8123 13.0752 5.42975 12.6927C5.04719 12.3101 5.04719 11.6899 5.42975 11.3073L11.3073 5.42977C11.6899 5.04722 12.3101 5.04722 12.6926 5.42977L18.5702 11.3073C18.9528 11.6899 18.9528 12.3101 18.5702 12.6927Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}.ag-grid-table-th-button[sorting=descending] .sort-icon:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.4298 11.3073C5.81235 10.9248 6.4326 10.9248 6.81515 11.3073L11.0204 15.5126L11.0204 6.12245C11.0204 5.58144 11.459 5.14286 12 5.14286C12.541 5.14286 12.9796 5.58144 12.9796 6.12245L12.9796 15.5126L17.1849 11.3073C17.5675 10.9248 18.1877 10.9248 18.5703 11.3073C18.9528 11.6899 18.9528 12.3101 18.5703 12.6927L12.6927 18.5702C12.3101 18.9528 11.6899 18.9528 11.3074 18.5702L5.4298 12.6927C5.04724 12.3101 5.04724 11.6899 5.4298 11.3073Z' fill='%235C2D91'/%3E%3C/svg%3E%0A")}@media screen and (min-width: 48rem){.ag-grid-table-th-button{gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.ag-grid-table-th-button{gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.ag-grid-table-th-button{gap:var(--px-spacing-xs-desktop)}}:host([inverted]) .ag-grid-table-th-button .sort-icon:after{color:var(--px-color-text-neutral-inverted)}`;
|
|
3332
3422
|
const agGridTableThButtonStyles = new CSSStyleSheet();
|
|
3333
3423
|
agGridTableThButtonStyles.replaceSync(agGridTableThButtonCss);
|
|
3334
3424
|
const sortingValues = ["none", "ascending", "descending"];
|
|
@@ -3474,7 +3564,7 @@ let AgGridTableThButton = _AgGridTableThButton;
|
|
|
3474
3564
|
if (!customElements.get("px-ag-grid-table-th-button")) {
|
|
3475
3565
|
customElements.define("px-ag-grid-table-th-button", AgGridTableThButton);
|
|
3476
3566
|
}
|
|
3477
|
-
const agGridTableThContentCss = ':host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-content{font-size:var(--px-font-size-base);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);word-break:break-all;max-width:100%;display:flex;flex-direction:column}.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);max-width:100%;word-break:break-all;white-space:break-spaces}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-s-mobile);color:var(--px-color-icon-dimmed-default);max-width:100%;word-break:break-all;white-space:break-spaces}@media
|
|
3567
|
+
const agGridTableThContentCss = ':host{display:inline-flex;overflow:hidden;word-break:break-all;max-width:100%}:host *{box-sizing:border-box}.ag-grid-table-th-content{font-size:var(--px-font-size-base);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);word-break:break-all;max-width:100%;display:flex;flex-direction:column}.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);max-width:100%;word-break:break-all;white-space:break-spaces}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-s-mobile);color:var(--px-color-icon-dimmed-default);max-width:100%;word-break:break-all;white-space:break-spaces}@media screen and (min-width: 48rem){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-tablet)}}@media screen and (min-width: 64.0625rem){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-laptop)}}@media screen and (min-width: 90.0625rem){.ag-grid-table-th-content ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.ag-grid-table-th-content ::slotted([slot="subtitle"]){font-size:var(--px-text-size-label-s-desktop)}}:host([inverted]) .ag-grid-table-th-content ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .ag-grid-table-th-content ::slotted([slot="subtitle"]){color:var(--px-color-icon-dimmed-inverted)}';
|
|
3478
3568
|
const agGridTableThContentStyles = new CSSStyleSheet();
|
|
3479
3569
|
agGridTableThContentStyles.replaceSync(agGridTableThContentCss);
|
|
3480
3570
|
const _AgGridTableThContent = class _AgGridTableThContent extends PxElement {
|
|
@@ -3514,8 +3604,8 @@ let AgGridTableThContent = _AgGridTableThContent;
|
|
|
3514
3604
|
if (!customElements.get("px-ag-grid-table-th-content")) {
|
|
3515
3605
|
customElements.define("px-ag-grid-table-th-content", AgGridTableThContent);
|
|
3516
3606
|
}
|
|
3517
|
-
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:
|
|
3518
|
-
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media
|
|
3607
|
+
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8rem;height:100%}.banner[reduced]{min-height:5rem}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}::slotted([slot="action"]){grid-area:action;z-index:2}:host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[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){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media screen and (min-width: 64.0625rem){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}';
|
|
3608
|
+
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (max-width: 47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (min-width: 48rem) and (max-width: 64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (min-width: 64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
3519
3609
|
const gridStyles = new CSSStyleSheet();
|
|
3520
3610
|
gridStyles.replaceSync(gridCss);
|
|
3521
3611
|
const gridColsValues = [
|
|
@@ -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);
|
|
@@ -4196,8 +4286,8 @@ let Banner = _Banner;
|
|
|
4196
4286
|
if (!customElements.get("px-banner")) {
|
|
4197
4287
|
customElements.define("px-banner", Banner);
|
|
4198
4288
|
}
|
|
4199
|
-
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
|
|
4200
|
-
const breadcrumbItemCss =
|
|
4289
|
+
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)}`;
|
|
4290
|
+
const breadcrumbItemCss = ':host{display:block}:host *{box-sizing:border-box}.breadcrumb-item{display:flex;line-height:var(--px-font-line-height-s);font-size:var(--px-text-size-label-m-mobile)}:host ::slotted(px-a[variant="icon-link"][color="inherit"]){color:var(--px-color-icon-accent-default)}@media screen and (min-width: 48rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.breadcrumb-item{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) ::slotted(px-a[variant="icon-link"][color="inherit"]){color:var(--px-color-icon-neutral-default)}:is():hover{color:var(--px-color-text-state-hover-default)}';
|
|
4201
4291
|
const breadcrumbItemStyles = new CSSStyleSheet();
|
|
4202
4292
|
breadcrumbItemStyles.replaceSync(breadcrumbItemCss);
|
|
4203
4293
|
const BREADCRUMB_ITEM_CONNECTED_EVENT = "px-breadcrumb-item-connected";
|
|
@@ -4350,18 +4440,18 @@ applyInverted_fn = function() {
|
|
|
4350
4440
|
if (!customElements.get("px-breadcrumb")) {
|
|
4351
4441
|
customElements.define("px-breadcrumb", Breadcrumb);
|
|
4352
4442
|
}
|
|
4353
|
-
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 only screen and (max-width: 47.938em){.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 only screen and (min-width: 48em) and (max-width: 64em){.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 only screen and (min-width: 48em){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 only screen and (min-width: 64.0625em) and (max-width: 90em){.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 only screen and (min-width: 64.0625em){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 only screen and (min-width: 90.0625em){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
|
-
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
|
|
4355
|
-
const styles$
|
|
4356
|
-
const styles$
|
|
4443
|
+
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)}}`;
|
|
4444
|
+
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)}}';
|
|
4445
|
+
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)}}";
|
|
4446
|
+
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
4447
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
4358
4448
|
const linkStyles$2 = new CSSStyleSheet();
|
|
4359
4449
|
const patchStyles = new CSSStyleSheet();
|
|
4360
4450
|
const tagStyles = new CSSStyleSheet();
|
|
4361
4451
|
buttonStyles$1.replaceSync(buttonCss);
|
|
4362
4452
|
linkStyles$2.replaceSync(linkCss);
|
|
4363
|
-
patchStyles.replaceSync(styles$
|
|
4364
|
-
tagStyles.replaceSync(styles$
|
|
4453
|
+
patchStyles.replaceSync(styles$L);
|
|
4454
|
+
tagStyles.replaceSync(styles$K);
|
|
4365
4455
|
const variantValues = [
|
|
4366
4456
|
"",
|
|
4367
4457
|
"default",
|
|
@@ -4518,7 +4608,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4518
4608
|
this._toggleClass(oldValue, newValue);
|
|
4519
4609
|
if (!this.checkName(variantValues, newValue)) {
|
|
4520
4610
|
log(
|
|
4521
|
-
|
|
4611
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${variantValues.join('", "')}".`
|
|
4522
4612
|
);
|
|
4523
4613
|
}
|
|
4524
4614
|
}
|
|
@@ -4527,7 +4617,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4527
4617
|
this._toggleClass(oldValue, newValue);
|
|
4528
4618
|
if (!this.checkName(values, newValue)) {
|
|
4529
4619
|
log(
|
|
4530
|
-
|
|
4620
|
+
`"${newValue}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${values.join('", "')}".`
|
|
4531
4621
|
);
|
|
4532
4622
|
}
|
|
4533
4623
|
}
|
|
@@ -4551,7 +4641,7 @@ const _Button = class _Button extends PxElement {
|
|
|
4551
4641
|
updateShape(attrName, newValue, attrValue) {
|
|
4552
4642
|
if (!checkName(attrValue, newValue)) {
|
|
4553
4643
|
log(
|
|
4554
|
-
|
|
4644
|
+
`"${newValue}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
4555
4645
|
);
|
|
4556
4646
|
return;
|
|
4557
4647
|
}
|
|
@@ -4710,7 +4800,7 @@ canSetWrappedInteractiveState_fn = function() {
|
|
|
4710
4800
|
if (!customElements.get("px-button-wrapper")) {
|
|
4711
4801
|
customElements.define("px-button-wrapper", ButtonWrapper);
|
|
4712
4802
|
}
|
|
4713
|
-
const buttonIconCss = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon: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-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media
|
|
4803
|
+
const buttonIconCss = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon: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-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (min-width: 64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
|
|
4714
4804
|
const buttonIconStyles = new CSSStyleSheet();
|
|
4715
4805
|
buttonIconStyles.replaceSync(buttonIconCss);
|
|
4716
4806
|
const buttonIconSizeValues = ["", "default", "small"];
|
|
@@ -4797,7 +4887,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4797
4887
|
updateSize(oldValue, newValue) {
|
|
4798
4888
|
if (!this.checkName(buttonIconSizeValues, newValue)) {
|
|
4799
4889
|
log(
|
|
4800
|
-
|
|
4890
|
+
`"${newValue}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconSizeValues.join('", "')}".`
|
|
4801
4891
|
);
|
|
4802
4892
|
} else {
|
|
4803
4893
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -4811,7 +4901,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4811
4901
|
updateVariant(oldValue, newValue) {
|
|
4812
4902
|
if (!this.checkName(buttonIconVariantValues, newValue)) {
|
|
4813
4903
|
log(
|
|
4814
|
-
|
|
4904
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${buttonIconVariantValues.join('", "')}".`
|
|
4815
4905
|
);
|
|
4816
4906
|
} else {
|
|
4817
4907
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -4862,9 +4952,9 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4862
4952
|
if (!customElements.get("px-button-icon")) {
|
|
4863
4953
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4864
4954
|
}
|
|
4865
|
-
const styles$
|
|
4866
|
-
const styleSheet$
|
|
4867
|
-
styleSheet$
|
|
4955
|
+
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}}';
|
|
4956
|
+
const styleSheet$E = new CSSStyleSheet();
|
|
4957
|
+
styleSheet$E.replaceSync(styles$J);
|
|
4868
4958
|
const cardBackgroundColorValues = [
|
|
4869
4959
|
"",
|
|
4870
4960
|
"container-default",
|
|
@@ -4878,7 +4968,7 @@ const paddingPrefix = "px-padding";
|
|
|
4878
4968
|
const _Card = class _Card extends VerticallyExtendedElement {
|
|
4879
4969
|
constructor() {
|
|
4880
4970
|
super(
|
|
4881
|
-
styleSheet$
|
|
4971
|
+
styleSheet$E,
|
|
4882
4972
|
cssTokenBreakpoints(
|
|
4883
4973
|
"padding",
|
|
4884
4974
|
attributeBreakpointCSSSelector$1,
|
|
@@ -4897,9 +4987,9 @@ const _Card = class _Card extends VerticallyExtendedElement {
|
|
|
4897
4987
|
<px-container padding="none" background-color="none" border-radius="none">
|
|
4898
4988
|
<px-stack direction="column" id="stack-container" gap="none">
|
|
4899
4989
|
<picture>
|
|
4900
|
-
<source media="(max-width:
|
|
4901
|
-
<source media="(max-width:
|
|
4902
|
-
<source media="(min-width:
|
|
4990
|
+
<source media="(max-width: 48rem)" >
|
|
4991
|
+
<source media="(max-width: 64rem)" >
|
|
4992
|
+
<source media="(min-width: 64rem)" >
|
|
4903
4993
|
<img loading="lazy" alt="" />
|
|
4904
4994
|
</picture>
|
|
4905
4995
|
<div class="card__content">
|
|
@@ -5218,7 +5308,7 @@ updateMedia_fn = function(newValue, screenSize) {
|
|
|
5218
5308
|
updateBackgroundColor_fn = function(attrName, oldValue, newValue, attrValue) {
|
|
5219
5309
|
if (!checkName(attrValue, newValue)) {
|
|
5220
5310
|
log(
|
|
5221
|
-
|
|
5311
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
5222
5312
|
);
|
|
5223
5313
|
return;
|
|
5224
5314
|
}
|
|
@@ -5242,11 +5332,11 @@ let Card = _Card;
|
|
|
5242
5332
|
if (!customElements.get("px-card")) {
|
|
5243
5333
|
customElements.define("px-card", Card);
|
|
5244
5334
|
}
|
|
5245
|
-
const styles$
|
|
5246
|
-
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
|
|
5247
|
-
const styles$
|
|
5248
|
-
const styleSheet$
|
|
5249
|
-
styleSheet$
|
|
5335
|
+
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}';
|
|
5336
|
+
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}}";
|
|
5337
|
+
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)}";
|
|
5338
|
+
const styleSheet$D = new CSSStyleSheet();
|
|
5339
|
+
styleSheet$D.replaceSync(styles$H);
|
|
5250
5340
|
class AppleSeed extends HTMLElement {
|
|
5251
5341
|
constructor() {
|
|
5252
5342
|
super();
|
|
@@ -5261,7 +5351,7 @@ class AppleSeed extends HTMLElement {
|
|
|
5261
5351
|
</div>`;
|
|
5262
5352
|
};
|
|
5263
5353
|
this.attachShadow({ mode: "open" });
|
|
5264
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5354
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$D];
|
|
5265
5355
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
5266
5356
|
}
|
|
5267
5357
|
static get observedAttributes() {
|
|
@@ -5488,8 +5578,8 @@ function throttle(func, wait, options) {
|
|
|
5488
5578
|
"trailing": trailing
|
|
5489
5579
|
});
|
|
5490
5580
|
}
|
|
5491
|
-
const styleSheet$
|
|
5492
|
-
styleSheet$
|
|
5581
|
+
const styleSheet$C = new CSSStyleSheet();
|
|
5582
|
+
styleSheet$C.replaceSync(styles$I);
|
|
5493
5583
|
const CAROUSEL_ITEM_CONNECTED_EVENT = "px-carousel-item-connected";
|
|
5494
5584
|
class Carousel extends HTMLElement {
|
|
5495
5585
|
constructor() {
|
|
@@ -5546,7 +5636,7 @@ class Carousel extends HTMLElement {
|
|
|
5546
5636
|
};
|
|
5547
5637
|
this.attachShadow({ mode: "open" });
|
|
5548
5638
|
this.shadowRoot.innerHTML = this.template;
|
|
5549
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5639
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$C];
|
|
5550
5640
|
}
|
|
5551
5641
|
connectedCallback() {
|
|
5552
5642
|
this.addEventListener(CAROUSEL_ITEM_CONNECTED_EVENT, () => {
|
|
@@ -5665,7 +5755,9 @@ function configureCellBackgroundColor(el) {
|
|
|
5665
5755
|
}
|
|
5666
5756
|
function updateVariant(element, oldValue, newValue) {
|
|
5667
5757
|
if (!checkName(cellVariantValues, newValue)) {
|
|
5668
|
-
log(
|
|
5758
|
+
log(
|
|
5759
|
+
`"${newValue}" is not a valid variant value for a cell. Allowed values are: "${cellVariantValues.join('", "')}".`
|
|
5760
|
+
);
|
|
5669
5761
|
return;
|
|
5670
5762
|
}
|
|
5671
5763
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -5697,7 +5789,7 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
5697
5789
|
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
5698
5790
|
if (!checkName(attrValue, newValue)) {
|
|
5699
5791
|
log(
|
|
5700
|
-
|
|
5792
|
+
`"${newValue}" is not a valid ${attrName} value for a cell. Allowed values are: "${attrValue.join('", "')}".`
|
|
5701
5793
|
);
|
|
5702
5794
|
return;
|
|
5703
5795
|
}
|
|
@@ -5747,12 +5839,12 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
5747
5839
|
}
|
|
5748
5840
|
}
|
|
5749
5841
|
}
|
|
5750
|
-
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
|
|
5751
|
-
const styles$
|
|
5842
|
+
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)}";
|
|
5843
|
+
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
5844
|
const commonStyleSheet$b = new CSSStyleSheet();
|
|
5753
|
-
const styleSheet$
|
|
5845
|
+
const styleSheet$B = new CSSStyleSheet();
|
|
5754
5846
|
commonStyleSheet$b.replaceSync(common$1);
|
|
5755
|
-
styleSheet$
|
|
5847
|
+
styleSheet$B.replaceSync(styles$G);
|
|
5756
5848
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
5757
5849
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
5758
5850
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -5777,7 +5869,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
5777
5869
|
`;
|
|
5778
5870
|
}
|
|
5779
5871
|
constructor() {
|
|
5780
|
-
super(styleSheet$
|
|
5872
|
+
super(styleSheet$B, commonStyleSheet$b);
|
|
5781
5873
|
const $root = document.createElement("div");
|
|
5782
5874
|
$root.classList.add("cell");
|
|
5783
5875
|
$root.innerHTML = this.template();
|
|
@@ -5883,7 +5975,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
5883
5975
|
updateRadius(attrName, oldValue, newValue, attrValues) {
|
|
5884
5976
|
if (!checkName(attrValues, newValue)) {
|
|
5885
5977
|
log(
|
|
5886
|
-
|
|
5978
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
5887
5979
|
);
|
|
5888
5980
|
return;
|
|
5889
5981
|
}
|
|
@@ -6055,11 +6147,11 @@ let Cell = _Cell;
|
|
|
6055
6147
|
if (!customElements.get("px-cell")) {
|
|
6056
6148
|
customElements.define("px-cell", Cell);
|
|
6057
6149
|
}
|
|
6058
|
-
const styles$
|
|
6150
|
+
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
6151
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6060
6152
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6061
|
-
const styleSheet$
|
|
6062
|
-
styleSheet$
|
|
6153
|
+
const styleSheet$A = new CSSStyleSheet();
|
|
6154
|
+
styleSheet$A.replaceSync(styles$F);
|
|
6063
6155
|
const _CellLink = class _CellLink extends PxElement {
|
|
6064
6156
|
template() {
|
|
6065
6157
|
return `
|
|
@@ -6079,7 +6171,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6079
6171
|
`;
|
|
6080
6172
|
}
|
|
6081
6173
|
constructor() {
|
|
6082
|
-
super(styleSheet$
|
|
6174
|
+
super(styleSheet$A, commonStyleSheet$a);
|
|
6083
6175
|
const $root = document.createElement(_CellLink.nativeName);
|
|
6084
6176
|
$root.classList.add("cell-link");
|
|
6085
6177
|
$root.innerHTML = this.template();
|
|
@@ -6300,11 +6392,11 @@ let CellLink = _CellLink;
|
|
|
6300
6392
|
if (!customElements.get("px-cell-link")) {
|
|
6301
6393
|
customElements.define("px-cell-link", CellLink);
|
|
6302
6394
|
}
|
|
6303
|
-
const styles$
|
|
6395
|
+
const styles$E = ".cell-button{padding:0;background:none;border:none;text-align:left;font-size:inherit}";
|
|
6304
6396
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6305
6397
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6306
|
-
const styleSheet$
|
|
6307
|
-
styleSheet$
|
|
6398
|
+
const styleSheet$z = new CSSStyleSheet();
|
|
6399
|
+
styleSheet$z.replaceSync(styles$E);
|
|
6308
6400
|
const _CellButton = class _CellButton extends PxElement {
|
|
6309
6401
|
template() {
|
|
6310
6402
|
return `
|
|
@@ -6317,7 +6409,7 @@ const _CellButton = class _CellButton extends PxElement {
|
|
|
6317
6409
|
`;
|
|
6318
6410
|
}
|
|
6319
6411
|
constructor() {
|
|
6320
|
-
super(styleSheet$
|
|
6412
|
+
super(styleSheet$z, commonStyleSheet$9);
|
|
6321
6413
|
const $root = document.createElement(_CellButton.nativeName);
|
|
6322
6414
|
$root.classList.add("cell-button");
|
|
6323
6415
|
$root.innerHTML = this.template();
|
|
@@ -6510,7 +6602,7 @@ let CellButton = _CellButton;
|
|
|
6510
6602
|
if (!customElements.get("px-cell-button")) {
|
|
6511
6603
|
customElements.define("px-cell-button", CellButton);
|
|
6512
6604
|
}
|
|
6513
|
-
const checkboxCss = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-purpose-error-default)}.checkbox #checkbox-container{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.all-slots-empty :is(.checkbox #checkbox-container){gap:0}.checkbox label{line-height:calc(var(--px-line-height-ratio-l) * 1em);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host(:not([variant="selectable-tag"])) input:checked{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover{cursor:pointer}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked{background-color:var(--px-color-background-purpose-error-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked:hover,:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):checked{background-color:var(--px-color-background-state-active-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover:checked,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))):checked{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked{background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked:hover,:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag,.checkbox.selectable-tag #checkbox-container{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color: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);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 48em){.checkbox{gap:var(--px-spacing-xs-tablet)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}#checkbox-container{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.checkbox{gap:var(--px-spacing-xs-laptop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}#checkbox-container{gap:var(--px-spacing-s-laptop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 90.0625em){.checkbox{gap:var(--px-spacing-xs-desktop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}#checkbox-container{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .checkbox ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
6605
|
+
const checkboxCss = `:host{display:block}input{font-size:var(--px-font-size-base)}.checkbox{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-purpose-error-default)}.checkbox #checkbox-container{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.all-slots-empty :is(.checkbox #checkbox-container){gap:0}.checkbox label{line-height:calc(var(--px-line-height-ratio-l) * 1rem);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host(:not([variant="selectable-tag"])) input:checked{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):hover{cursor:pointer}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked{background-color:var(--px-color-background-purpose-error-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked:hover,:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input):checked){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):checked{background-color:var(--px-color-background-state-active-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):hover:checked,:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))):checked{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked{background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked:hover,:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)):checked){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))):hover,:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag,.checkbox.selectable-tag #checkbox-container{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color: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);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media screen and (min-width: 48rem){.checkbox{gap:var(--px-spacing-xs-tablet)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}#checkbox-container{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.checkbox{gap:var(--px-spacing-xs-laptop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}#checkbox-container{gap:var(--px-spacing-s-laptop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.checkbox{gap:var(--px-spacing-xs-desktop)}.checkbox ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}#checkbox-container{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .checkbox ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
6514
6606
|
const checkboxStyles = new CSSStyleSheet();
|
|
6515
6607
|
checkboxStyles.replaceSync(checkboxCss);
|
|
6516
6608
|
const checkboxVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -6601,7 +6693,7 @@ const _Checkbox = class _Checkbox extends PxElement {
|
|
|
6601
6693
|
var _a, _b;
|
|
6602
6694
|
if (!this.checkName(attrValue, newValue)) {
|
|
6603
6695
|
log(
|
|
6604
|
-
|
|
6696
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
6605
6697
|
);
|
|
6606
6698
|
return;
|
|
6607
6699
|
}
|
|
@@ -6824,7 +6916,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6824
6916
|
if (this.$checkbox) {
|
|
6825
6917
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
6826
6918
|
log(
|
|
6827
|
-
|
|
6919
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
|
|
6828
6920
|
);
|
|
6829
6921
|
return;
|
|
6830
6922
|
} else {
|
|
@@ -6903,7 +6995,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6903
6995
|
handleCheckboxPositionChange(newValue) {
|
|
6904
6996
|
if (!this.checkName(cellCheckboxPosition, newValue)) {
|
|
6905
6997
|
log(
|
|
6906
|
-
|
|
6998
|
+
`"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellCheckboxPosition.join('", "')}".`
|
|
6907
6999
|
);
|
|
6908
7000
|
return;
|
|
6909
7001
|
}
|
|
@@ -7486,7 +7578,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7486
7578
|
if (!customElements.get("px-cell-switch")) {
|
|
7487
7579
|
customElements.define("px-cell-switch", CellSwitch);
|
|
7488
7580
|
}
|
|
7489
|
-
const radioCss = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}input{font-size:var(--px-font-size-base)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-ratio-l) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-active-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color: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);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
7581
|
+
const radioCss = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}input{font-size:var(--px-font-size-base)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-ratio-l) * 1rem);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-active-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E");border-color:var(--px-color-border-none-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-ratio-l);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color: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);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none-default);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{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([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none-inverted);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-inverted)}@media screen and (min-width: 48rem){.radio{gap:var(--px-spacing-s-tablet)}:host(:focus-visible){outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.radio{gap:var(--px-spacing-s-laptop)}:host(:focus-visible){outline-width:var(--px-focus-outline-laptop);outline-offset:var(--px-focus-offset-laptop)}label{font-size:var(--px-text-size-label-m-laptop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
7490
7582
|
const radioStyles = new CSSStyleSheet();
|
|
7491
7583
|
radioStyles.replaceSync(radioCss);
|
|
7492
7584
|
const radioVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -7622,7 +7714,7 @@ class Radio extends RadioBase {
|
|
|
7622
7714
|
var _a, _b;
|
|
7623
7715
|
if (!this.checkName(attrValue, newValue)) {
|
|
7624
7716
|
log(
|
|
7625
|
-
|
|
7717
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7626
7718
|
);
|
|
7627
7719
|
return;
|
|
7628
7720
|
}
|
|
@@ -7737,7 +7829,7 @@ class Radio extends RadioBase {
|
|
|
7737
7829
|
if (!customElements.get("px-radio")) {
|
|
7738
7830
|
customElements.define("px-radio", Radio);
|
|
7739
7831
|
}
|
|
7740
|
-
const radiogroupCss = ":host{display:block}:host *{box-sizing:border-box}#radio-container{display:inline-flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile));font-family:var(--px-font-family)}.selectable-tag #radio-container{flex-direction:row}@media
|
|
7832
|
+
const radiogroupCss = ":host{display:block}:host *{box-sizing:border-box}#radio-container{display:inline-flex;flex-direction:column;gap:var(--px-radiogroup-gap--mobile, var(--px-spacing-s-mobile));font-family:var(--px-font-family)}.selectable-tag #radio-container{flex-direction:row}@media screen and (min-width: 48rem){#radio-container{gap:var(--px-radiogroup-gap--tablet, var(--px-spacing-s-tablet))}}@media screen and (min-width: 64.0625rem){#radio-container{gap:var(--px-radiogroup-gap--laptop, var(--px-spacing-s-laptop))}}@media screen and (min-width: 90.0625rem){#radio-container{gap:var(--px-radiogroup-gap--desktop, var(--px-spacing-s-desktop))}}";
|
|
7741
7833
|
const radiogroupStyles = new CSSStyleSheet();
|
|
7742
7834
|
radiogroupStyles.replaceSync(radiogroupCss);
|
|
7743
7835
|
const radioGroupGapValues = [
|
|
@@ -7875,7 +7967,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
7875
7967
|
updateVariant(oldValue, newValue, attrValue) {
|
|
7876
7968
|
if (!this.checkName(attrValue, newValue)) {
|
|
7877
7969
|
log(
|
|
7878
|
-
|
|
7970
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7879
7971
|
);
|
|
7880
7972
|
return;
|
|
7881
7973
|
}
|
|
@@ -7892,7 +7984,7 @@ class Radiogroup extends WithExtraAttributes {
|
|
|
7892
7984
|
updateGap(oldValue, newValue, attrValue) {
|
|
7893
7985
|
if (!this.checkName(attrValue, newValue)) {
|
|
7894
7986
|
log(
|
|
7895
|
-
|
|
7987
|
+
`"${newValue}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
7896
7988
|
);
|
|
7897
7989
|
return;
|
|
7898
7990
|
}
|
|
@@ -8134,7 +8226,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8134
8226
|
if (this.$radio) {
|
|
8135
8227
|
if (!this.checkName(stateValues, newValue)) {
|
|
8136
8228
|
log(
|
|
8137
|
-
|
|
8229
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
|
|
8138
8230
|
);
|
|
8139
8231
|
return;
|
|
8140
8232
|
} else {
|
|
@@ -8215,7 +8307,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8215
8307
|
handleRadioPositionChange(newValue) {
|
|
8216
8308
|
if (!this.checkName(cellRadioPosition, newValue)) {
|
|
8217
8309
|
log(
|
|
8218
|
-
|
|
8310
|
+
`"${newValue}" is not a valid position value for ${this.tagName.toLowerCase()}. Allowed values are: "${cellRadioPosition.join('", "')}".`
|
|
8219
8311
|
);
|
|
8220
8312
|
return;
|
|
8221
8313
|
}
|
|
@@ -8427,9 +8519,9 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8427
8519
|
if (!customElements.get("px-cell-radio")) {
|
|
8428
8520
|
customElements.define("px-cell-radio", CellRadio);
|
|
8429
8521
|
}
|
|
8430
|
-
const styles$
|
|
8431
|
-
const styleSheet$
|
|
8432
|
-
styleSheet$
|
|
8522
|
+
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)}';
|
|
8523
|
+
const styleSheet$y = new CSSStyleSheet();
|
|
8524
|
+
styleSheet$y.replaceSync(styles$D);
|
|
8433
8525
|
const colorOptionSizeValues = ["", "default", "small"];
|
|
8434
8526
|
const _ColorOption = class _ColorOption extends PxElement {
|
|
8435
8527
|
template() {
|
|
@@ -8438,7 +8530,7 @@ const _ColorOption = class _ColorOption extends PxElement {
|
|
|
8438
8530
|
`;
|
|
8439
8531
|
}
|
|
8440
8532
|
constructor() {
|
|
8441
|
-
super(styleSheet$
|
|
8533
|
+
super(styleSheet$y);
|
|
8442
8534
|
const $root = document.createElement("div");
|
|
8443
8535
|
$root.classList.add("color-option");
|
|
8444
8536
|
$root.innerHTML = this.template();
|
|
@@ -8468,7 +8560,7 @@ const _ColorOption = class _ColorOption extends PxElement {
|
|
|
8468
8560
|
updateSize(attrName, oldValue, newValue, attrValues) {
|
|
8469
8561
|
if (!checkName(attrValues, newValue)) {
|
|
8470
8562
|
log(
|
|
8471
|
-
|
|
8563
|
+
`"${newValue}" is not a valid ${attrName} value for a color option. Allowed values are: "${attrValues.join('", "')}".`
|
|
8472
8564
|
);
|
|
8473
8565
|
return;
|
|
8474
8566
|
}
|
|
@@ -8523,9 +8615,9 @@ let ColorOption = _ColorOption;
|
|
|
8523
8615
|
if (!customElements.get("px-color-option")) {
|
|
8524
8616
|
customElements.define("px-color-option", ColorOption);
|
|
8525
8617
|
}
|
|
8526
|
-
const styles$
|
|
8527
|
-
const styleSheet$
|
|
8528
|
-
styleSheet$
|
|
8618
|
+
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)}}";
|
|
8619
|
+
const styleSheet$x = new CSSStyleSheet();
|
|
8620
|
+
styleSheet$x.replaceSync(styles$C);
|
|
8529
8621
|
const CLICK_EVENT = "px.lavender.color-option-link.click";
|
|
8530
8622
|
const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
8531
8623
|
template() {
|
|
@@ -8534,7 +8626,7 @@ const _ColorOptionLink = class _ColorOptionLink extends PxElement {
|
|
|
8534
8626
|
`;
|
|
8535
8627
|
}
|
|
8536
8628
|
constructor() {
|
|
8537
|
-
super(styleSheet$
|
|
8629
|
+
super(styleSheet$x);
|
|
8538
8630
|
const $root = document.createElement(_ColorOptionLink.nativeName);
|
|
8539
8631
|
$root.classList.add("color-option-link");
|
|
8540
8632
|
$root.innerHTML = this.template();
|
|
@@ -8619,13 +8711,13 @@ let ColorOptionLink = _ColorOptionLink;
|
|
|
8619
8711
|
if (!customElements.get("px-color-option-link")) {
|
|
8620
8712
|
customElements.define("px-color-option-link", ColorOptionLink);
|
|
8621
8713
|
}
|
|
8622
|
-
const contentHeaderCss = ":host{--min-height--mobile: 15.
|
|
8623
|
-
const styles$
|
|
8624
|
-
const styleSheet$
|
|
8625
|
-
styleSheet$
|
|
8626
|
-
class Section extends
|
|
8714
|
+
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))}}";
|
|
8715
|
+
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)}}';
|
|
8716
|
+
const styleSheet$w = new CSSStyleSheet();
|
|
8717
|
+
styleSheet$w.replaceSync(styles$B);
|
|
8718
|
+
class Section extends WithExtraAttributes {
|
|
8627
8719
|
constructor() {
|
|
8628
|
-
super();
|
|
8720
|
+
super(styleSheet$w);
|
|
8629
8721
|
this.template = () => `
|
|
8630
8722
|
<px-container border-radius="none" padding-inline="none">
|
|
8631
8723
|
<div class="content-wrapper">
|
|
@@ -8641,9 +8733,7 @@ class Section extends HTMLElement {
|
|
|
8641
8733
|
<slot name="overlap"></slot>
|
|
8642
8734
|
</div>
|
|
8643
8735
|
`;
|
|
8644
|
-
this.attachShadow({ mode: "open" });
|
|
8645
8736
|
this.shadowRoot.innerHTML = this.template();
|
|
8646
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$t];
|
|
8647
8737
|
}
|
|
8648
8738
|
connectedCallback() {
|
|
8649
8739
|
var _a, _b;
|
|
@@ -8663,6 +8753,7 @@ class Section extends HTMLElement {
|
|
|
8663
8753
|
}
|
|
8664
8754
|
static get observedAttributes() {
|
|
8665
8755
|
return [
|
|
8756
|
+
...super.observedAttributes,
|
|
8666
8757
|
"background-color",
|
|
8667
8758
|
"background-gradient",
|
|
8668
8759
|
"background-image",
|
|
@@ -8768,6 +8859,9 @@ class Section extends HTMLElement {
|
|
|
8768
8859
|
case "border-side--laptop":
|
|
8769
8860
|
this.$container.borderSideLaptop = newValue;
|
|
8770
8861
|
break;
|
|
8862
|
+
default:
|
|
8863
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
8864
|
+
break;
|
|
8771
8865
|
}
|
|
8772
8866
|
}
|
|
8773
8867
|
}
|
|
@@ -8990,7 +9084,7 @@ class Section extends HTMLElement {
|
|
|
8990
9084
|
if (!customElements.get("px-section")) {
|
|
8991
9085
|
customElements.define("px-section", Section);
|
|
8992
9086
|
}
|
|
8993
|
-
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media
|
|
9087
|
+
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}";
|
|
8994
9088
|
const headingStyles$2 = new CSSStyleSheet();
|
|
8995
9089
|
headingStyles$2.replaceSync(headingCss);
|
|
8996
9090
|
const typographyStyles$4 = new CSSStyleSheet();
|
|
@@ -9052,7 +9146,7 @@ class AbstractHeading extends PxElement {
|
|
|
9052
9146
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
9053
9147
|
if (!this.checkName(attrValue, newValue)) {
|
|
9054
9148
|
log(
|
|
9055
|
-
|
|
9149
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9056
9150
|
);
|
|
9057
9151
|
} else {
|
|
9058
9152
|
this.toggleClass(oldValue, newValue);
|
|
@@ -9061,7 +9155,7 @@ class AbstractHeading extends PxElement {
|
|
|
9061
9155
|
updateColor(oldValue, newValue, attrValue) {
|
|
9062
9156
|
if (!this.checkName(attrValue, newValue)) {
|
|
9063
9157
|
log(
|
|
9064
|
-
|
|
9158
|
+
`"${newValue}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9065
9159
|
);
|
|
9066
9160
|
return;
|
|
9067
9161
|
}
|
|
@@ -9083,7 +9177,7 @@ class AbstractHeading extends PxElement {
|
|
|
9083
9177
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
9084
9178
|
if (!this.checkName(attrValue, newValue)) {
|
|
9085
9179
|
log(
|
|
9086
|
-
|
|
9180
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9087
9181
|
);
|
|
9088
9182
|
return;
|
|
9089
9183
|
}
|
|
@@ -9537,9 +9631,9 @@ let ContentHeader = _ContentHeader;
|
|
|
9537
9631
|
if (!customElements.get("px-content-header")) {
|
|
9538
9632
|
customElements.define("px-content-header", ContentHeader);
|
|
9539
9633
|
}
|
|
9540
|
-
const styles$
|
|
9541
|
-
const styleSheet$
|
|
9542
|
-
styleSheet$
|
|
9634
|
+
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}}";
|
|
9635
|
+
const styleSheet$v = new CSSStyleSheet();
|
|
9636
|
+
styleSheet$v.replaceSync(styles$A);
|
|
9543
9637
|
const separatorDirectionValues = [
|
|
9544
9638
|
"",
|
|
9545
9639
|
"default",
|
|
@@ -9563,7 +9657,7 @@ const separatorColorValues = [
|
|
|
9563
9657
|
const _Separator = class _Separator extends PxElement {
|
|
9564
9658
|
constructor() {
|
|
9565
9659
|
var _a;
|
|
9566
|
-
super(styleSheet$
|
|
9660
|
+
super(styleSheet$v);
|
|
9567
9661
|
const $root = document.createElement(_Separator.nativeName);
|
|
9568
9662
|
$root.classList.add("separator");
|
|
9569
9663
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
@@ -9620,7 +9714,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9620
9714
|
};
|
|
9621
9715
|
if (!this.checkName(attrValue, newValue)) {
|
|
9622
9716
|
log(
|
|
9623
|
-
|
|
9717
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9624
9718
|
);
|
|
9625
9719
|
} else {
|
|
9626
9720
|
updateSizeStyle(oldValue);
|
|
@@ -9642,7 +9736,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9642
9736
|
};
|
|
9643
9737
|
if (!this.checkName(attrValue, newValue)) {
|
|
9644
9738
|
log(
|
|
9645
|
-
|
|
9739
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9646
9740
|
);
|
|
9647
9741
|
} else {
|
|
9648
9742
|
updateColorStyle(oldValue);
|
|
@@ -9657,7 +9751,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
9657
9751
|
};
|
|
9658
9752
|
if (!this.checkName(attrValue, newValue)) {
|
|
9659
9753
|
log(
|
|
9660
|
-
|
|
9754
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
9661
9755
|
);
|
|
9662
9756
|
} else {
|
|
9663
9757
|
if (attrName === "direction") {
|
|
@@ -9739,9 +9833,9 @@ let Separator = _Separator;
|
|
|
9739
9833
|
if (!customElements.get("px-separator")) {
|
|
9740
9834
|
customElements.define("px-separator", Separator);
|
|
9741
9835
|
}
|
|
9742
|
-
const styles$
|
|
9743
|
-
const styleSheet$
|
|
9744
|
-
styleSheet$
|
|
9836
|
+
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}}';
|
|
9837
|
+
const styleSheet$u = new CSSStyleSheet();
|
|
9838
|
+
styleSheet$u.replaceSync(styles$z);
|
|
9745
9839
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
9746
9840
|
class Drawer extends HTMLElement {
|
|
9747
9841
|
constructor() {
|
|
@@ -9779,7 +9873,7 @@ class Drawer extends HTMLElement {
|
|
|
9779
9873
|
</dialog>`;
|
|
9780
9874
|
this.attachShadow({ mode: "open" });
|
|
9781
9875
|
this.shadowRoot.innerHTML = this.template;
|
|
9782
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
9876
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$u];
|
|
9783
9877
|
}
|
|
9784
9878
|
connectedCallback() {
|
|
9785
9879
|
var _a;
|
|
@@ -9969,7 +10063,7 @@ class Drawer extends HTMLElement {
|
|
|
9969
10063
|
if (!customElements.get("px-drawer")) {
|
|
9970
10064
|
customElements.define("px-drawer", Drawer);
|
|
9971
10065
|
}
|
|
9972
|
-
const styles$
|
|
10066
|
+
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
10067
|
const anchorAlignmentValues = [
|
|
9974
10068
|
"top-left",
|
|
9975
10069
|
"top-right",
|
|
@@ -10011,13 +10105,12 @@ function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-lef
|
|
|
10011
10105
|
});
|
|
10012
10106
|
}
|
|
10013
10107
|
const stylesheet$8 = new CSSStyleSheet();
|
|
10014
|
-
stylesheet$8.replaceSync(styles$
|
|
10108
|
+
stylesheet$8.replaceSync(styles$y);
|
|
10015
10109
|
const defaultAnchorAlignment = "bottom-left";
|
|
10016
10110
|
class Dropdown extends WithExtraAttributes {
|
|
10017
10111
|
constructor() {
|
|
10018
10112
|
super(stylesheet$8);
|
|
10019
10113
|
__privateAdd(this, _Dropdown_instances);
|
|
10020
|
-
__privateAdd(this, _onTriggerClick);
|
|
10021
10114
|
__privateAdd(this, _beforeToggle);
|
|
10022
10115
|
__privateAdd(this, _onToggle);
|
|
10023
10116
|
this.template = () => `
|
|
@@ -10025,16 +10118,28 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10025
10118
|
<slot name="trigger"></slot>
|
|
10026
10119
|
<slot name="popover"></slot>`;
|
|
10027
10120
|
this.isAboutToClose = false;
|
|
10028
|
-
|
|
10121
|
+
this.triggerPopoverDisplay = () => {
|
|
10029
10122
|
if (!this.isAboutToClose) {
|
|
10030
10123
|
this.$popoverElement.togglePopover({ source: this.$trigger });
|
|
10031
|
-
this
|
|
10124
|
+
if (!this.manualToggle) {
|
|
10125
|
+
this.$trigger.ariaExpanded = "true";
|
|
10126
|
+
}
|
|
10032
10127
|
}
|
|
10033
|
-
}
|
|
10128
|
+
};
|
|
10129
|
+
this.showPopover = () => {
|
|
10130
|
+
if (!this.isAboutToClose) {
|
|
10131
|
+
this.$popoverElement.showPopover();
|
|
10132
|
+
}
|
|
10133
|
+
};
|
|
10134
|
+
this.hidePopover = () => {
|
|
10135
|
+
this.$popoverElement.hidePopover();
|
|
10136
|
+
};
|
|
10034
10137
|
__privateSet(this, _beforeToggle, () => {
|
|
10035
10138
|
if (this.$popoverElement.matches(":popover-open")) {
|
|
10036
10139
|
this.isAboutToClose = true;
|
|
10037
|
-
this
|
|
10140
|
+
if (!this.manualToggle) {
|
|
10141
|
+
this.$trigger.ariaExpanded = "false";
|
|
10142
|
+
}
|
|
10038
10143
|
}
|
|
10039
10144
|
});
|
|
10040
10145
|
__privateSet(this, _onToggle, () => {
|
|
@@ -10089,7 +10194,8 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10089
10194
|
...super.observedAttributes,
|
|
10090
10195
|
"id",
|
|
10091
10196
|
"anchoralignment",
|
|
10092
|
-
"use-polyfill"
|
|
10197
|
+
"use-polyfill",
|
|
10198
|
+
"manual-toggle"
|
|
10093
10199
|
];
|
|
10094
10200
|
}
|
|
10095
10201
|
connectedCallback() {
|
|
@@ -10111,6 +10217,7 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10111
10217
|
);
|
|
10112
10218
|
}
|
|
10113
10219
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
10220
|
+
var _a;
|
|
10114
10221
|
if (oldValue !== newValue) {
|
|
10115
10222
|
switch (name) {
|
|
10116
10223
|
case "id":
|
|
@@ -10125,6 +10232,11 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10125
10232
|
this.usePolyfill
|
|
10126
10233
|
);
|
|
10127
10234
|
break;
|
|
10235
|
+
case "manual-toggle":
|
|
10236
|
+
if (newValue !== null && newValue !== void 0) {
|
|
10237
|
+
(_a = this.$trigger) == null ? void 0 : _a.removeAttribute("aria-expanded");
|
|
10238
|
+
}
|
|
10239
|
+
break;
|
|
10128
10240
|
default:
|
|
10129
10241
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
10130
10242
|
break;
|
|
@@ -10134,8 +10246,10 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10134
10246
|
initPopover() {
|
|
10135
10247
|
if (this.$trigger) {
|
|
10136
10248
|
this.$trigger.setAttribute("popovertarget", this.popoverId);
|
|
10137
|
-
this.$trigger.setAttribute("aria-controls", this.
|
|
10138
|
-
this
|
|
10249
|
+
this.$trigger.setAttribute("aria-controls", this.getAttribute("id"));
|
|
10250
|
+
if (!this.hasAttribute("manual-toggle")) {
|
|
10251
|
+
this.$trigger.setAttribute("aria-expanded", "false");
|
|
10252
|
+
}
|
|
10139
10253
|
this.$popoverElement.setAttribute("id", this.popoverId);
|
|
10140
10254
|
this.$popoverElement.setAttribute("popover", "");
|
|
10141
10255
|
this.$style.innerHTML = this.css;
|
|
@@ -10181,18 +10295,29 @@ class Dropdown extends WithExtraAttributes {
|
|
|
10181
10295
|
this.removeAttribute("use-polyfill");
|
|
10182
10296
|
}
|
|
10183
10297
|
}
|
|
10298
|
+
get manualToggle() {
|
|
10299
|
+
return this.hasAttribute("manual-toggle");
|
|
10300
|
+
}
|
|
10301
|
+
set manualToggle(value) {
|
|
10302
|
+
if (value) {
|
|
10303
|
+
this.setAttribute("manual-toggle", "");
|
|
10304
|
+
} else {
|
|
10305
|
+
this.removeAttribute("manual-toggle");
|
|
10306
|
+
}
|
|
10307
|
+
}
|
|
10184
10308
|
}
|
|
10185
10309
|
_Dropdown_instances = new WeakSet();
|
|
10186
10310
|
resetManualPopoverDisplay_fn = function() {
|
|
10187
10311
|
this.isAboutToClose = false;
|
|
10188
|
-
|
|
10312
|
+
if (!this.manualToggle) {
|
|
10313
|
+
this.$trigger.removeEventListener("click", this.triggerPopoverDisplay);
|
|
10314
|
+
}
|
|
10189
10315
|
this.$popoverElement.removeEventListener(
|
|
10190
10316
|
"beforetoggle",
|
|
10191
10317
|
__privateGet(this, _beforeToggle)
|
|
10192
10318
|
);
|
|
10193
10319
|
this.$popoverElement.removeEventListener("toggle", __privateGet(this, _onToggle));
|
|
10194
10320
|
};
|
|
10195
|
-
_onTriggerClick = new WeakMap();
|
|
10196
10321
|
_beforeToggle = new WeakMap();
|
|
10197
10322
|
_onToggle = new WeakMap();
|
|
10198
10323
|
/**
|
|
@@ -10203,8 +10328,10 @@ _onToggle = new WeakMap();
|
|
|
10203
10328
|
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
10204
10329
|
*/
|
|
10205
10330
|
handleManualPopoverDisplay_fn = function() {
|
|
10206
|
-
if (this.$trigger
|
|
10207
|
-
|
|
10331
|
+
if (this.$trigger) {
|
|
10332
|
+
if (!this.manualToggle) {
|
|
10333
|
+
this.$trigger.addEventListener("click", this.triggerPopoverDisplay);
|
|
10334
|
+
}
|
|
10208
10335
|
this.$popoverElement.addEventListener("beforetoggle", __privateGet(this, _beforeToggle));
|
|
10209
10336
|
this.$popoverElement.addEventListener("toggle", __privateGet(this, _onToggle));
|
|
10210
10337
|
}
|
|
@@ -10212,7 +10339,7 @@ handleManualPopoverDisplay_fn = function() {
|
|
|
10212
10339
|
if (!customElements.get("px-dropdown")) {
|
|
10213
10340
|
customElements.define("px-dropdown", Dropdown);
|
|
10214
10341
|
}
|
|
10215
|
-
const fieldsetCss = ':host{display:block}:host *{box-sizing:border-box}fieldset{display:flex;flex-direction:column;margin:0;padding:0;border:0;font-family:var(--px-font-family)}fieldset legend{padding:0}fieldset ::slotted([slot="legend"]:not([shown--sr])){display:block;margin-bottom:var(--px-spacing-xs-mobile)}fieldset ::slotted([slot="error-text"]){display:none;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-purpose-error-default);margin-bottom:var(--px-spacing-xs-mobile)}:host([state="error"]) ::slotted([slot="error-text"]){display:block}@media
|
|
10342
|
+
const fieldsetCss = ':host{display:block}:host *{box-sizing:border-box}fieldset{display:flex;flex-direction:column;margin:0;padding:0;border:0;font-family:var(--px-font-family)}fieldset legend{padding:0}fieldset ::slotted([slot="legend"]:not([shown--sr])){display:block;margin-bottom:var(--px-spacing-xs-mobile)}fieldset ::slotted([slot="error-text"]){display:none;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-purpose-error-default);margin-bottom:var(--px-spacing-xs-mobile)}:host([state="error"]) ::slotted([slot="error-text"]){display:block}@media screen and (min-width: 48rem){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-tablet)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-laptop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-laptop)}}@media screen and (min-width: 90.0625rem){fieldset ::slotted([slot="legend"]:not([shown--sr])){margin-bottom:var(--px-spacing-xs-desktop)}fieldset ::slotted([slot="error-text"]){font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]) fieldset ::slotted([slot="error-text"]){color:var(--px-color-text-purpose-error-inverted)}';
|
|
10216
10343
|
const fieldsetStyles = new CSSStyleSheet();
|
|
10217
10344
|
fieldsetStyles.replaceSync(fieldsetCss);
|
|
10218
10345
|
const _Fieldset = class _Fieldset extends PxElement {
|
|
@@ -10497,7 +10624,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10497
10624
|
}
|
|
10498
10625
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
10499
10626
|
log(
|
|
10500
|
-
|
|
10627
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${linkVariantValues.join('", "')}".`
|
|
10501
10628
|
);
|
|
10502
10629
|
}
|
|
10503
10630
|
if (newValue === "icon-link") {
|
|
@@ -10507,7 +10634,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10507
10634
|
updateShape(attrName, newValue, attrValue) {
|
|
10508
10635
|
if (!checkName(attrValue, newValue)) {
|
|
10509
10636
|
log(
|
|
10510
|
-
|
|
10637
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10511
10638
|
);
|
|
10512
10639
|
return;
|
|
10513
10640
|
}
|
|
@@ -10524,7 +10651,7 @@ const _Link = class _Link extends PxElement {
|
|
|
10524
10651
|
}
|
|
10525
10652
|
if (!this.checkName(attrValue, newValue)) {
|
|
10526
10653
|
log(
|
|
10527
|
-
|
|
10654
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10528
10655
|
);
|
|
10529
10656
|
}
|
|
10530
10657
|
}
|
|
@@ -10702,7 +10829,7 @@ canSetWrappedInteractiveState_fn2 = function() {
|
|
|
10702
10829
|
if (!customElements.get("px-a-wrapper")) {
|
|
10703
10830
|
customElements.define("px-a-wrapper", LinkWrapper);
|
|
10704
10831
|
}
|
|
10705
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media
|
|
10832
|
+
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 47.938rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-laptop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}";
|
|
10706
10833
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
10707
10834
|
const typographyStyles$2 = new CSSStyleSheet();
|
|
10708
10835
|
const headingStyles$1 = new CSSStyleSheet();
|
|
@@ -10771,7 +10898,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
10771
10898
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
10772
10899
|
if (!this.checkName(attrValue, newValue)) {
|
|
10773
10900
|
log(
|
|
10774
|
-
|
|
10901
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10775
10902
|
);
|
|
10776
10903
|
} else {
|
|
10777
10904
|
this.toggleClass(oldValue, newValue);
|
|
@@ -10780,7 +10907,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
10780
10907
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
10781
10908
|
if (!this.checkName(attrValue, newValue)) {
|
|
10782
10909
|
log(
|
|
10783
|
-
|
|
10910
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
10784
10911
|
);
|
|
10785
10912
|
} else {
|
|
10786
10913
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -10922,12 +11049,12 @@ let FooterSitemap = _FooterSitemap;
|
|
|
10922
11049
|
if (!customElements.get("px-footer-sitemap")) {
|
|
10923
11050
|
customElements.define("px-footer-sitemap", FooterSitemap);
|
|
10924
11051
|
}
|
|
10925
|
-
const styles$
|
|
10926
|
-
const styleSheet$
|
|
10927
|
-
styleSheet$
|
|
11052
|
+
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}";
|
|
11053
|
+
const styleSheet$t = new CSSStyleSheet();
|
|
11054
|
+
styleSheet$t.replaceSync(styles$x);
|
|
10928
11055
|
const _FooterSitemapItem = class _FooterSitemapItem extends PxElement {
|
|
10929
11056
|
constructor() {
|
|
10930
|
-
super(styleSheet$
|
|
11057
|
+
super(styleSheet$t);
|
|
10931
11058
|
this.templateMobile = () => `<div role="listitem">
|
|
10932
11059
|
<px-accordion ${this.inverted ? "inverted" : ""}>
|
|
10933
11060
|
<span slot="title"><slot name="links-list-title"></slot></span>
|
|
@@ -11013,9 +11140,9 @@ let FooterSitemapItem = _FooterSitemapItem;
|
|
|
11013
11140
|
if (!customElements.get("px-footer-sitemap-item")) {
|
|
11014
11141
|
customElements.define("px-footer-sitemap-item", FooterSitemapItem);
|
|
11015
11142
|
}
|
|
11016
|
-
const styles$
|
|
11143
|
+
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)}}";
|
|
11017
11144
|
const stylesheet$7 = new CSSStyleSheet();
|
|
11018
|
-
stylesheet$7.replaceSync(styles$
|
|
11145
|
+
stylesheet$7.replaceSync(styles$w);
|
|
11019
11146
|
class HeaderItem extends WithExtraAttributes {
|
|
11020
11147
|
constructor() {
|
|
11021
11148
|
var _a;
|
|
@@ -11026,15 +11153,15 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11026
11153
|
this.shadowRoot.innerHTML = this.template();
|
|
11027
11154
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$7];
|
|
11028
11155
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11029
|
-
this.role = "listitem";
|
|
11030
11156
|
if (this.internals) {
|
|
11031
11157
|
this.internals.role = "listitem";
|
|
11032
11158
|
}
|
|
11033
11159
|
}
|
|
11034
11160
|
static get observedAttributes() {
|
|
11035
|
-
return ["for", "href"];
|
|
11161
|
+
return ["for", "href", "current"];
|
|
11036
11162
|
}
|
|
11037
11163
|
connectedCallback() {
|
|
11164
|
+
this.role = "listitem";
|
|
11038
11165
|
this.setAttribute("slot", "header-entries");
|
|
11039
11166
|
if (this.$button) {
|
|
11040
11167
|
this.setupButtonA11y();
|
|
@@ -11053,9 +11180,9 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11053
11180
|
}
|
|
11054
11181
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
11055
11182
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
11056
|
-
if (name === "href" &&
|
|
11183
|
+
if (name === "href" && oldValue !== newValue) {
|
|
11057
11184
|
this.shadowRoot.innerHTML = this.template();
|
|
11058
|
-
} else if (name === "for" && this.$button
|
|
11185
|
+
} else if (name === "for" && oldValue !== newValue && this.$button) {
|
|
11059
11186
|
this.shadowRoot.innerHTML = this.template();
|
|
11060
11187
|
this.setupButtonA11y();
|
|
11061
11188
|
}
|
|
@@ -11090,6 +11217,16 @@ class HeaderItem extends WithExtraAttributes {
|
|
|
11090
11217
|
this.$button.setAttribute("aria-controls", this.for);
|
|
11091
11218
|
}
|
|
11092
11219
|
}
|
|
11220
|
+
get current() {
|
|
11221
|
+
return this.hasAttribute("current");
|
|
11222
|
+
}
|
|
11223
|
+
set current(value) {
|
|
11224
|
+
if (value) {
|
|
11225
|
+
this.setAttribute("current", "");
|
|
11226
|
+
} else {
|
|
11227
|
+
this.removeAttribute("current");
|
|
11228
|
+
}
|
|
11229
|
+
}
|
|
11093
11230
|
get $button() {
|
|
11094
11231
|
return this.shadowRoot.querySelector("button");
|
|
11095
11232
|
}
|
|
@@ -11119,9 +11256,9 @@ class MDDLink extends HTMLElement {
|
|
|
11119
11256
|
if (!customElements.get("px-mdd-a")) {
|
|
11120
11257
|
customElements.define("px-mdd-a", MDDLink);
|
|
11121
11258
|
}
|
|
11122
|
-
const styles$
|
|
11259
|
+
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)}}";
|
|
11123
11260
|
const stylesheet$6 = new CSSStyleSheet();
|
|
11124
|
-
stylesheet$6.replaceSync(styles$
|
|
11261
|
+
stylesheet$6.replaceSync(styles$v);
|
|
11125
11262
|
const menuAriaLabel = "Menu";
|
|
11126
11263
|
class Header extends WithExtraAttributes {
|
|
11127
11264
|
constructor() {
|
|
@@ -11148,7 +11285,7 @@ class Header extends WithExtraAttributes {
|
|
|
11148
11285
|
</div>
|
|
11149
11286
|
</nav>
|
|
11150
11287
|
<px-spacer></px-spacer>
|
|
11151
|
-
<px-hstack gap--mobile="
|
|
11288
|
+
<px-hstack gap--mobile="s" align-items="center" gap="default">
|
|
11152
11289
|
<slot name="header-actions"></slot>
|
|
11153
11290
|
<px-button-icon id="burger-menu" variant="naked" aria-label="${this.burgerMenuAriaLabel ?? "Open menu"}"
|
|
11154
11291
|
aria-expanded="false" hidden--tablet hidden--laptop
|
|
@@ -11175,12 +11312,12 @@ class Header extends WithExtraAttributes {
|
|
|
11175
11312
|
});
|
|
11176
11313
|
this.shadowRoot.innerHTML = this.template;
|
|
11177
11314
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11178
|
-
this.role = "navigation";
|
|
11179
11315
|
if (this.internals) {
|
|
11180
11316
|
this.internals.role = "navigation";
|
|
11181
11317
|
}
|
|
11182
11318
|
}
|
|
11183
11319
|
connectedCallback() {
|
|
11320
|
+
this.role = "navigation";
|
|
11184
11321
|
this.addEventListener("click", (event) => {
|
|
11185
11322
|
const targetElement = event.target.closest(
|
|
11186
11323
|
"px-header-item"
|
|
@@ -11413,7 +11550,7 @@ if (!customElements.get("px-header")) {
|
|
|
11413
11550
|
}
|
|
11414
11551
|
const stylesheet$5 = new CSSStyleSheet();
|
|
11415
11552
|
stylesheet$5.replaceSync(`
|
|
11416
|
-
@media screen and (min-width:
|
|
11553
|
+
@media screen and (min-width: 48rem) {
|
|
11417
11554
|
:host {
|
|
11418
11555
|
display: none;
|
|
11419
11556
|
}
|
|
@@ -11500,9 +11637,9 @@ createMobileMenuPanelDropDowns_fn = function() {
|
|
|
11500
11637
|
if (!customElements.get("px-header-mobile-menu")) {
|
|
11501
11638
|
customElements.define("px-header-mobile-menu", HeaderMobileMenu);
|
|
11502
11639
|
}
|
|
11503
|
-
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
|
|
11504
|
-
const styleSheet$
|
|
11505
|
-
styleSheet$
|
|
11640
|
+
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)}}";
|
|
11641
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
11642
|
+
styleSheet$s.replaceSync(imgCss);
|
|
11506
11643
|
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
11507
11644
|
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
11508
11645
|
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
@@ -11516,7 +11653,7 @@ const imageCssTokenBreakpoints = cssTokenBreakpoints(
|
|
|
11516
11653
|
);
|
|
11517
11654
|
const _AbstractImage = class _AbstractImage extends PxElement {
|
|
11518
11655
|
constructor() {
|
|
11519
|
-
super(styleSheet$
|
|
11656
|
+
super(styleSheet$s, imageCssTokenBreakpoints);
|
|
11520
11657
|
}
|
|
11521
11658
|
static get observedAttributes() {
|
|
11522
11659
|
return [
|
|
@@ -11580,7 +11717,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
|
|
|
11580
11717
|
updateWidth(attrName, oldValue, newValue, attrValues) {
|
|
11581
11718
|
if (!this.checkName(attrValues, newValue)) {
|
|
11582
11719
|
log(
|
|
11583
|
-
|
|
11720
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
11584
11721
|
);
|
|
11585
11722
|
return;
|
|
11586
11723
|
}
|
|
@@ -11621,7 +11758,7 @@ const _AbstractImage = class _AbstractImage extends PxElement {
|
|
|
11621
11758
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
11622
11759
|
if (!this.checkName(attrValues, newValue)) {
|
|
11623
11760
|
log(
|
|
11624
|
-
|
|
11761
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
11625
11762
|
);
|
|
11626
11763
|
} else {
|
|
11627
11764
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
@@ -11788,7 +11925,7 @@ const _Image = class _Image extends AbstractImage {
|
|
|
11788
11925
|
};
|
|
11789
11926
|
_Image.nativeName = "img";
|
|
11790
11927
|
let Image = _Image;
|
|
11791
|
-
if (!customElements.get("px-
|
|
11928
|
+
if (!customElements.get("px-img")) {
|
|
11792
11929
|
customElements.define("px-img", Image);
|
|
11793
11930
|
}
|
|
11794
11931
|
const _Picture = class _Picture extends AbstractImage {
|
|
@@ -11921,9 +12058,9 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
11921
12058
|
return;
|
|
11922
12059
|
}
|
|
11923
12060
|
const imgPathM = await this.transformImgPath(imgName, imgExtension, "-m");
|
|
11924
|
-
this.addSrcset(imgPathM, "only screen and (min-width: 40.
|
|
12061
|
+
this.addSrcset(imgPathM, "only screen and (min-width: 40.0625rem)");
|
|
11925
12062
|
const imgPathL = await this.transformImgPath(imgName, imgExtension, "-l");
|
|
11926
|
-
this.addSrcset(imgPathL, "only screen and (min-width: 64.
|
|
12063
|
+
this.addSrcset(imgPathL, "only screen and (min-width: 64.0625rem)");
|
|
11927
12064
|
this.addImg(imgPathS, alt, loading);
|
|
11928
12065
|
}
|
|
11929
12066
|
updateLoading(loading) {
|
|
@@ -11948,9 +12085,9 @@ let Picture = _Picture;
|
|
|
11948
12085
|
if (!customElements.get("px-picture")) {
|
|
11949
12086
|
customElements.define("px-picture", Picture);
|
|
11950
12087
|
}
|
|
11951
|
-
const styles$s = `label{all:unset;font-size:1em;line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) 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;--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)}input:not([type=file]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):hover,input:not([type=file]).error:hover,input:not([type=file]).success:hover,textarea:hover,textarea.error:hover,textarea.success:hover,select:hover,select.error:hover,select.success:hover,#input-file-container:hover,#input-file-container.error:hover,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-active-default) 0 0 0 var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}input:not([type=file]):disabled,input:not([type=file]):read-only:not(:is(select),#input-file-container),textarea:disabled,textarea:read-only:not(:is(select),#input-file-container),select:disabled,select:read-only:not(:is(select),#input-file-container),#input-file-container:disabled,#input-file-container:read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:var(--px-font-weight-title);text-align:left}input:not([type=file]).error,textarea.error,select.error,#input-file-container.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}input:not([type=file])[type=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-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,#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,#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],#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.5em;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,#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,#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,#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,#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],#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,#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],#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,#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,#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,#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,#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,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){width:100%;text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;padding-right:calc(var(--px-padding-s-mobile) + 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-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,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto!important;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5em right 1em}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center;max-width:100%}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f;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 only screen and (max-width: 47.938em){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media only screen and (min-width: 48em) and (max-width: 64em){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media only screen and (min-width: 48em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) 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);height:2.45em!important}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#input-file-container:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}input:not([type=file])[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.5em;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 only screen and (min-width: 64.0625em) and (max-width: 90em){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media only screen and (min-width: 64.0625em){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) 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.5em;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 only screen and (min-width: 90.0625em){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.5em;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)}}`;
|
|
12088
|
+
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)}}`;
|
|
11952
12089
|
const stylesheet$4 = new CSSStyleSheet();
|
|
11953
|
-
stylesheet$4.replaceSync(styles$
|
|
12090
|
+
stylesheet$4.replaceSync(styles$u);
|
|
11954
12091
|
class AbstractInputElement extends PxElement {
|
|
11955
12092
|
constructor() {
|
|
11956
12093
|
var _a;
|
|
@@ -12158,53 +12295,24 @@ const _Input = class _Input extends AbstractInputElement {
|
|
|
12158
12295
|
}
|
|
12159
12296
|
connectedCallback() {
|
|
12160
12297
|
super.connectedCallback();
|
|
12161
|
-
}
|
|
12162
|
-
static get observedAttributes() {
|
|
12163
|
-
return [...super.observedAttributes, "type"];
|
|
12164
|
-
}
|
|
12165
|
-
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
12166
|
-
if (oldValue !== newValue) {
|
|
12167
|
-
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
12168
|
-
switch (attrName) {
|
|
12169
|
-
case "type":
|
|
12170
|
-
this.updateSearchBehavior();
|
|
12171
|
-
this.$el.setAttribute("type", this.type ?? "text");
|
|
12172
|
-
break;
|
|
12173
|
-
}
|
|
12174
|
-
}
|
|
12175
|
-
}
|
|
12176
|
-
updateSearchBehavior() {
|
|
12177
12298
|
if (this.$el.type === "search") {
|
|
12178
|
-
this.
|
|
12179
|
-
|
|
12180
|
-
}
|
|
12181
|
-
this.disableSearchMode();
|
|
12182
|
-
}
|
|
12183
|
-
enableSearchMode() {
|
|
12184
|
-
this.$el.setAttribute("list", "suggestions");
|
|
12185
|
-
this.syncDataList();
|
|
12186
|
-
if (!this.observer) {
|
|
12299
|
+
this.$el.setAttribute("list", "suggestions");
|
|
12300
|
+
this.syncDataList();
|
|
12187
12301
|
this.observer = new MutationObserver(() => {
|
|
12188
12302
|
this.syncDataList();
|
|
12189
12303
|
});
|
|
12304
|
+
this.observer.observe(this, {
|
|
12305
|
+
childList: true,
|
|
12306
|
+
subtree: true
|
|
12307
|
+
});
|
|
12190
12308
|
}
|
|
12191
|
-
this.
|
|
12192
|
-
|
|
12193
|
-
|
|
12194
|
-
|
|
12195
|
-
|
|
12196
|
-
this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
|
|
12197
|
-
this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
|
|
12309
|
+
if (this.type === "search") {
|
|
12310
|
+
if (navigator.userAgent.includes("Chrome")) {
|
|
12311
|
+
this.$el.style.setProperty("--search-icon-focus-width", "2.5rem");
|
|
12312
|
+
this.$el.style.setProperty("--search-icon-datalist-width", "1rem");
|
|
12313
|
+
}
|
|
12198
12314
|
}
|
|
12199
12315
|
}
|
|
12200
|
-
disableSearchMode() {
|
|
12201
|
-
var _a, _b;
|
|
12202
|
-
(_a = this.observer) == null ? void 0 : _a.disconnect();
|
|
12203
|
-
this.$el.removeAttribute("list");
|
|
12204
|
-
(_b = this.$shadowSuggestions) == null ? void 0 : _b.remove();
|
|
12205
|
-
this.$el.style.removeProperty("--search-icon-focus-width");
|
|
12206
|
-
this.$el.style.removeProperty("--search-icon-datalist-width");
|
|
12207
|
-
}
|
|
12208
12316
|
syncDataList() {
|
|
12209
12317
|
var _a, _b;
|
|
12210
12318
|
const newSuggestions = (_a = this.$lightSuggestions) == null ? void 0 : _a.cloneNode(
|
|
@@ -12232,26 +12340,13 @@ const _Input = class _Input extends AbstractInputElement {
|
|
|
12232
12340
|
return this.querySelector("datalist");
|
|
12233
12341
|
}
|
|
12234
12342
|
get $shadowSuggestions() {
|
|
12235
|
-
|
|
12236
|
-
return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("datalist")) ?? null;
|
|
12343
|
+
return this.shadowRoot.querySelector("datalist");
|
|
12237
12344
|
}
|
|
12238
12345
|
get $container() {
|
|
12239
|
-
|
|
12240
|
-
return ((_a = this.shadowRoot) == null ? void 0 : _a.querySelector("div")) ?? null;
|
|
12241
|
-
}
|
|
12242
|
-
get type() {
|
|
12243
|
-
return this.getAttribute("type");
|
|
12244
|
-
}
|
|
12245
|
-
set type(value) {
|
|
12246
|
-
if (value) {
|
|
12247
|
-
this.setAttribute("type", value);
|
|
12248
|
-
} else {
|
|
12249
|
-
this.removeAttribute("type");
|
|
12250
|
-
}
|
|
12346
|
+
return this.shadowRoot.querySelector("div");
|
|
12251
12347
|
}
|
|
12252
12348
|
};
|
|
12253
12349
|
_Input.nativeName = "input";
|
|
12254
|
-
_Input.accessorExclusions = ["type"];
|
|
12255
12350
|
let Input = _Input;
|
|
12256
12351
|
if (!customElements.get("px-input")) {
|
|
12257
12352
|
customElements.define("px-input", Input);
|
|
@@ -12349,10 +12444,10 @@ let Upload = _Upload;
|
|
|
12349
12444
|
if (!customElements.get("px-fileupload")) {
|
|
12350
12445
|
customElements.define("px-fileupload", Upload);
|
|
12351
12446
|
}
|
|
12352
|
-
const styles$
|
|
12353
|
-
const styles$
|
|
12354
|
-
const styleSheet$
|
|
12355
|
-
styleSheet$
|
|
12447
|
+
const styles$t = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}";
|
|
12448
|
+
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)}}';
|
|
12449
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
12450
|
+
styleSheet$r.replaceSync(styles$s);
|
|
12356
12451
|
const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
|
|
12357
12452
|
const _ListItem = class _ListItem extends PxElement {
|
|
12358
12453
|
template() {
|
|
@@ -12364,7 +12459,7 @@ const _ListItem = class _ListItem extends PxElement {
|
|
|
12364
12459
|
`;
|
|
12365
12460
|
}
|
|
12366
12461
|
constructor() {
|
|
12367
|
-
super(styleSheet$
|
|
12462
|
+
super(styleSheet$r);
|
|
12368
12463
|
this.shadowRoot.innerHTML = this.template();
|
|
12369
12464
|
}
|
|
12370
12465
|
connectedCallback() {
|
|
@@ -12412,8 +12507,8 @@ let ListItem = _ListItem;
|
|
|
12412
12507
|
if (!customElements.get("px-list-item")) {
|
|
12413
12508
|
customElements.define("px-list-item", ListItem);
|
|
12414
12509
|
}
|
|
12415
|
-
const styleSheet$
|
|
12416
|
-
styleSheet$
|
|
12510
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
12511
|
+
styleSheet$q.replaceSync(styles$t);
|
|
12417
12512
|
const listVariantValues = ["", "ul", "ol"];
|
|
12418
12513
|
const AttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .list`;
|
|
12419
12514
|
const gapPrefix = "px-spacing";
|
|
@@ -12426,7 +12521,7 @@ const listCssTokenBreakpoints = cssTokenBreakpoints(
|
|
|
12426
12521
|
);
|
|
12427
12522
|
const _List = class _List extends PxElement {
|
|
12428
12523
|
constructor() {
|
|
12429
|
-
super(styleSheet$
|
|
12524
|
+
super(styleSheet$q, listCssTokenBreakpoints);
|
|
12430
12525
|
__privateAdd(this, _List_instances);
|
|
12431
12526
|
this.shadowRoot.innerHTML = this.template();
|
|
12432
12527
|
}
|
|
@@ -12460,7 +12555,7 @@ const _List = class _List extends PxElement {
|
|
|
12460
12555
|
case "variant":
|
|
12461
12556
|
if (!this.checkName(listVariantValues, newValue)) {
|
|
12462
12557
|
log(
|
|
12463
|
-
|
|
12558
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${listVariantValues.join('", "')}".`
|
|
12464
12559
|
);
|
|
12465
12560
|
}
|
|
12466
12561
|
if (this.isConnected) {
|
|
@@ -12601,9 +12696,9 @@ class MDDCloser extends HTMLElement {
|
|
|
12601
12696
|
if (!customElements.get("px-mdd-closer")) {
|
|
12602
12697
|
customElements.define("px-mdd-closer", MDDCloser);
|
|
12603
12698
|
}
|
|
12604
|
-
const styles$
|
|
12699
|
+
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)}}";
|
|
12605
12700
|
const stylesheet$3 = new CSSStyleSheet();
|
|
12606
|
-
stylesheet$3.replaceSync(styles$
|
|
12701
|
+
stylesheet$3.replaceSync(styles$r);
|
|
12607
12702
|
class MegaDropDown extends HTMLElement {
|
|
12608
12703
|
constructor() {
|
|
12609
12704
|
var _a;
|
|
@@ -12671,7 +12766,6 @@ class MegaDropDown extends HTMLElement {
|
|
|
12671
12766
|
this.shadowRoot.innerHTML = this.template;
|
|
12672
12767
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
|
|
12673
12768
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
12674
|
-
this.role = "menu";
|
|
12675
12769
|
if (this.internals) {
|
|
12676
12770
|
this.internals.role = "menu";
|
|
12677
12771
|
}
|
|
@@ -12681,6 +12775,7 @@ class MegaDropDown extends HTMLElement {
|
|
|
12681
12775
|
}
|
|
12682
12776
|
connectedCallback() {
|
|
12683
12777
|
var _a, _b;
|
|
12778
|
+
this.role = "menu";
|
|
12684
12779
|
if (this.querySelectorAll("px-mdd-section").length === 0) {
|
|
12685
12780
|
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
12686
12781
|
}
|
|
@@ -12859,9 +12954,9 @@ $closeButtons_get = function() {
|
|
|
12859
12954
|
if (!customElements.get("px-mdd")) {
|
|
12860
12955
|
customElements.define("px-mdd", MegaDropDown);
|
|
12861
12956
|
}
|
|
12862
|
-
const styles$
|
|
12957
|
+
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)}}';
|
|
12863
12958
|
const stylesheet$2 = new CSSStyleSheet();
|
|
12864
|
-
stylesheet$2.replaceSync(styles$
|
|
12959
|
+
stylesheet$2.replaceSync(styles$q);
|
|
12865
12960
|
class MddSection extends HTMLElement {
|
|
12866
12961
|
constructor() {
|
|
12867
12962
|
super();
|
|
@@ -12931,9 +13026,9 @@ class MddSection extends HTMLElement {
|
|
|
12931
13026
|
if (!customElements.get("px-mdd-section")) {
|
|
12932
13027
|
customElements.define("px-mdd-section", MddSection);
|
|
12933
13028
|
}
|
|
12934
|
-
const styles$
|
|
13029
|
+
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)}}';
|
|
12935
13030
|
const stylesheet$1 = new CSSStyleSheet();
|
|
12936
|
-
stylesheet$1.replaceSync(styles$
|
|
13031
|
+
stylesheet$1.replaceSync(styles$p);
|
|
12937
13032
|
class MddSectionItem extends HTMLElement {
|
|
12938
13033
|
constructor() {
|
|
12939
13034
|
var _a;
|
|
@@ -12950,7 +13045,6 @@ class MddSectionItem extends HTMLElement {
|
|
|
12950
13045
|
this.attachShadow({ mode: "open" });
|
|
12951
13046
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
12952
13047
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
12953
|
-
this.role = "listitem";
|
|
12954
13048
|
if (this.internals) {
|
|
12955
13049
|
this.internals.role = "listitem";
|
|
12956
13050
|
}
|
|
@@ -12975,6 +13069,7 @@ class MddSectionItem extends HTMLElement {
|
|
|
12975
13069
|
}
|
|
12976
13070
|
}
|
|
12977
13071
|
connectedCallback() {
|
|
13072
|
+
this.role = "listitem";
|
|
12978
13073
|
if (this.hasAttribute("href")) {
|
|
12979
13074
|
this.updateView("href", this.href);
|
|
12980
13075
|
this.$link.href = this.href;
|
|
@@ -13028,9 +13123,9 @@ class MddSectionItem extends HTMLElement {
|
|
|
13028
13123
|
if (!customElements.get("px-mdd-section-item")) {
|
|
13029
13124
|
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
13030
13125
|
}
|
|
13031
|
-
const styles$
|
|
13032
|
-
const styleSheet$
|
|
13033
|
-
styleSheet$
|
|
13126
|
+
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}}';
|
|
13127
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
13128
|
+
styleSheet$p.replaceSync(styles$o);
|
|
13034
13129
|
const CLOSE_EVENT$1 = "px.lavender.modal.close";
|
|
13035
13130
|
const statusValues = ["", "info", "success", "error", "warning"];
|
|
13036
13131
|
class Modal extends HTMLElement {
|
|
@@ -13038,6 +13133,7 @@ class Modal extends HTMLElement {
|
|
|
13038
13133
|
super();
|
|
13039
13134
|
this.onOpenClick = () => this.show();
|
|
13040
13135
|
this.onCloseClick = () => this.close();
|
|
13136
|
+
this.onDialogCancel = () => this.close();
|
|
13041
13137
|
this.commandButtonCleanups = [];
|
|
13042
13138
|
this.opener = null;
|
|
13043
13139
|
this.openerElement = null;
|
|
@@ -13080,10 +13176,11 @@ class Modal extends HTMLElement {
|
|
|
13080
13176
|
</dialog>`;
|
|
13081
13177
|
this.attachShadow({ mode: "open" });
|
|
13082
13178
|
this.shadowRoot.innerHTML = this.template;
|
|
13083
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13179
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
13084
13180
|
}
|
|
13085
13181
|
connectedCallback() {
|
|
13086
13182
|
var _a, _b;
|
|
13183
|
+
this.$dialog.addEventListener("cancel", this.onDialogCancel);
|
|
13087
13184
|
this.addEventListenersToCommandButtons();
|
|
13088
13185
|
this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
|
|
13089
13186
|
this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
|
|
@@ -13140,6 +13237,7 @@ class Modal extends HTMLElement {
|
|
|
13140
13237
|
}
|
|
13141
13238
|
disconnectedCallback() {
|
|
13142
13239
|
var _a, _b;
|
|
13240
|
+
this.$dialog.removeEventListener("cancel", this.onDialogCancel);
|
|
13143
13241
|
(_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
|
|
13144
13242
|
"slotchange",
|
|
13145
13243
|
this.toggleDescriptionVisibility
|
|
@@ -13389,8 +13487,8 @@ class Modal extends HTMLElement {
|
|
|
13389
13487
|
if (!customElements.get("px-modal")) {
|
|
13390
13488
|
customElements.define("px-modal", Modal);
|
|
13391
13489
|
}
|
|
13392
|
-
const styleSheet$
|
|
13393
|
-
styleSheet$
|
|
13490
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
13491
|
+
styleSheet$o.replaceSync(styles$L);
|
|
13394
13492
|
const patchVariantValues = [
|
|
13395
13493
|
"",
|
|
13396
13494
|
"default",
|
|
@@ -13412,7 +13510,7 @@ class Patch extends HTMLElement {
|
|
|
13412
13510
|
super();
|
|
13413
13511
|
this.attachShadow({ mode: "open" });
|
|
13414
13512
|
this.shadowRoot.innerHTML = this.template();
|
|
13415
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13513
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$o];
|
|
13416
13514
|
}
|
|
13417
13515
|
static get observedAttributes() {
|
|
13418
13516
|
return ["variant", "shape", "inverted"];
|
|
@@ -13444,14 +13542,14 @@ class Patch extends HTMLElement {
|
|
|
13444
13542
|
this._toggleClass(oldValue, newValue);
|
|
13445
13543
|
if (!this.checkName(patchVariantValues, newValue)) {
|
|
13446
13544
|
log(
|
|
13447
|
-
|
|
13545
|
+
`"${newValue}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${patchVariantValues.join('", "')}".`
|
|
13448
13546
|
);
|
|
13449
13547
|
}
|
|
13450
13548
|
}
|
|
13451
13549
|
updateShape(attrName, newValue, attrValue) {
|
|
13452
13550
|
if (!this.checkName(attrValue, newValue)) {
|
|
13453
13551
|
log(
|
|
13454
|
-
|
|
13552
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
13455
13553
|
);
|
|
13456
13554
|
return;
|
|
13457
13555
|
}
|
|
@@ -13484,7 +13582,7 @@ class Patch extends HTMLElement {
|
|
|
13484
13582
|
if (!customElements.get("px-patch")) {
|
|
13485
13583
|
customElements.define("px-patch", Patch);
|
|
13486
13584
|
}
|
|
13487
|
-
const pillarCss = ':host{display:block}:host *{box-sizing:border-box}.pillar{height:100%;text-align:var(--pillar-text-align, left)}.pillar px-container{height:100%}.pillar__layout{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-s-mobile);height:100%}.pillar__content{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-xs-mobile)}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default)}::slotted([slot="description"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-dimmed-default)}@media
|
|
13585
|
+
const pillarCss = ':host{display:block}:host *{box-sizing:border-box}.pillar{height:100%;text-align:var(--pillar-text-align, left)}.pillar px-container{height:100%}.pillar__layout{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-s-mobile);height:100%}.pillar__content{display:flex;flex-direction:column;align-items:var(--pillar-align-items, flex-start);gap:var(--px-spacing-xs-mobile)}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-m-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default)}::slotted([slot="description"]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-dimmed-default)}@media screen and (min-width: 48rem){.pillar__layout{gap:var(--px-spacing-s-tablet)}.pillar__content{gap:var(--px-spacing-xs-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-m-tablet)}::slotted([slot="description"]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){.pillar__layout{gap:var(--px-spacing-s-laptop)}.pillar__content{gap:var(--px-spacing-xs-laptop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-m-laptop)}::slotted([slot="description"]){font-size:var(--px-text-size-body-m-laptop)}}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}';
|
|
13488
13586
|
const pillarStyles = new CSSStyleSheet();
|
|
13489
13587
|
pillarStyles.replaceSync(pillarCss);
|
|
13490
13588
|
const pillarVariantValues = ["", "naked", "contained"];
|
|
@@ -13568,7 +13666,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13568
13666
|
updateAlignment(attrName, oldValue, newValue) {
|
|
13569
13667
|
if (!this.checkName(pillarAlignmentValues, newValue)) {
|
|
13570
13668
|
log(
|
|
13571
|
-
|
|
13669
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarAlignmentValues.join('", "')}".`
|
|
13572
13670
|
);
|
|
13573
13671
|
return;
|
|
13574
13672
|
}
|
|
@@ -13587,7 +13685,7 @@ class Pillar extends WithExtraAttributes {
|
|
|
13587
13685
|
updateVariant(attrName, oldValue, newValue) {
|
|
13588
13686
|
if (!this.checkName(pillarVariantValues, newValue)) {
|
|
13589
13687
|
log(
|
|
13590
|
-
|
|
13688
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${pillarVariantValues.join('", "')}".`
|
|
13591
13689
|
);
|
|
13592
13690
|
return;
|
|
13593
13691
|
}
|
|
@@ -13656,9 +13754,9 @@ class Pillar extends WithExtraAttributes {
|
|
|
13656
13754
|
if (!customElements.get("px-pillar")) {
|
|
13657
13755
|
customElements.define("px-pillar", Pillar);
|
|
13658
13756
|
}
|
|
13659
|
-
const styles$
|
|
13660
|
-
const styleSheet$
|
|
13661
|
-
styleSheet$
|
|
13757
|
+
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}';
|
|
13758
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
13759
|
+
styleSheet$n.replaceSync(styles$n);
|
|
13662
13760
|
const cardContainerMediaPositionValues = [
|
|
13663
13761
|
"none",
|
|
13664
13762
|
"top",
|
|
@@ -13684,7 +13782,7 @@ class CardContainer extends HTMLElement {
|
|
|
13684
13782
|
super();
|
|
13685
13783
|
__privateAdd(this, _CardContainer_instances);
|
|
13686
13784
|
this.attachShadow({ mode: "open" });
|
|
13687
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
13785
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n, paddingBreakpoints];
|
|
13688
13786
|
this.shadowRoot.innerHTML = this.template();
|
|
13689
13787
|
}
|
|
13690
13788
|
static get observedAttributes() {
|
|
@@ -13955,9 +14053,9 @@ setOrRemove_fn = function(name, value) {
|
|
|
13955
14053
|
if (!customElements.get("px-card-container")) {
|
|
13956
14054
|
customElements.define("px-card-container", CardContainer);
|
|
13957
14055
|
}
|
|
13958
|
-
const styles$
|
|
13959
|
-
const styleSheet$
|
|
13960
|
-
styleSheet$
|
|
14056
|
+
const styles$m = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}";
|
|
14057
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
14058
|
+
styleSheet$m.replaceSync(styles$m);
|
|
13961
14059
|
class CardHeading extends HTMLElement {
|
|
13962
14060
|
template() {
|
|
13963
14061
|
return `
|
|
@@ -13969,16 +14067,16 @@ class CardHeading extends HTMLElement {
|
|
|
13969
14067
|
constructor() {
|
|
13970
14068
|
super();
|
|
13971
14069
|
this.attachShadow({ mode: "open" });
|
|
13972
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14070
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$m];
|
|
13973
14071
|
this.shadowRoot.innerHTML = this.template();
|
|
13974
14072
|
}
|
|
13975
14073
|
}
|
|
13976
14074
|
if (!customElements.get("px-card-heading")) {
|
|
13977
14075
|
customElements.define("px-card-heading", CardHeading);
|
|
13978
14076
|
}
|
|
13979
|
-
const styles$
|
|
13980
|
-
const styleSheet$
|
|
13981
|
-
styleSheet$
|
|
14077
|
+
const styles$l = ":host{display:block}:host(:not(:has(::slotted(*)))){display:none}";
|
|
14078
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
14079
|
+
styleSheet$l.replaceSync(styles$l);
|
|
13982
14080
|
class CardActions extends HTMLElement {
|
|
13983
14081
|
template() {
|
|
13984
14082
|
return `
|
|
@@ -13993,16 +14091,16 @@ class CardActions extends HTMLElement {
|
|
|
13993
14091
|
constructor() {
|
|
13994
14092
|
super();
|
|
13995
14093
|
this.attachShadow({ mode: "open" });
|
|
13996
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14094
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
13997
14095
|
this.shadowRoot.innerHTML = this.template();
|
|
13998
14096
|
}
|
|
13999
14097
|
}
|
|
14000
14098
|
if (!customElements.get("px-card-actions")) {
|
|
14001
14099
|
customElements.define("px-card-actions", CardActions);
|
|
14002
14100
|
}
|
|
14003
|
-
const css$1 = "
|
|
14004
|
-
const styles$
|
|
14005
|
-
styles$
|
|
14101
|
+
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)}";
|
|
14102
|
+
const styles$k = new CSSStyleSheet();
|
|
14103
|
+
styles$k.replaceSync(css$1);
|
|
14006
14104
|
const priceVariantValues = [
|
|
14007
14105
|
"default",
|
|
14008
14106
|
"promo",
|
|
@@ -14014,7 +14112,7 @@ const priceVariantValues = [
|
|
|
14014
14112
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
14015
14113
|
const _Price = class _Price extends PxElement {
|
|
14016
14114
|
constructor() {
|
|
14017
|
-
super(styles$
|
|
14115
|
+
super(styles$k);
|
|
14018
14116
|
this.template = () => `<span class="price"></span>`;
|
|
14019
14117
|
this.shadowRoot.innerHTML = this.template();
|
|
14020
14118
|
}
|
|
@@ -14069,7 +14167,7 @@ const _Price = class _Price extends PxElement {
|
|
|
14069
14167
|
this.toggleClass(oldValue, newValue);
|
|
14070
14168
|
if (!this.checkName(attrValues, newValue)) {
|
|
14071
14169
|
log(
|
|
14072
|
-
|
|
14170
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14073
14171
|
);
|
|
14074
14172
|
}
|
|
14075
14173
|
}
|
|
@@ -14114,12 +14212,12 @@ let Price = _Price;
|
|
|
14114
14212
|
if (!customElements.get("px-price")) {
|
|
14115
14213
|
customElements.define("px-price", Price);
|
|
14116
14214
|
}
|
|
14117
|
-
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
|
|
14118
|
-
const styles$
|
|
14119
|
-
styles$
|
|
14215
|
+
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)}}";
|
|
14216
|
+
const styles$j = new CSSStyleSheet();
|
|
14217
|
+
styles$j.replaceSync(css);
|
|
14120
14218
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
14121
14219
|
constructor() {
|
|
14122
|
-
super(styles$
|
|
14220
|
+
super(styles$j);
|
|
14123
14221
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
14124
14222
|
this.shadowRoot.innerHTML = this.template();
|
|
14125
14223
|
}
|
|
@@ -14142,9 +14240,9 @@ let Ribbon = _Ribbon;
|
|
|
14142
14240
|
if (!customElements.get("px-ribbon")) {
|
|
14143
14241
|
customElements.define("px-ribbon", Ribbon);
|
|
14144
14242
|
}
|
|
14145
|
-
const styles$
|
|
14146
|
-
const styleSheet$
|
|
14147
|
-
styleSheet$
|
|
14243
|
+
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)}';
|
|
14244
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
14245
|
+
styleSheet$k.replaceSync(styles$i);
|
|
14148
14246
|
class SelectableBox extends WithExtraAttributes {
|
|
14149
14247
|
template() {
|
|
14150
14248
|
return `
|
|
@@ -14171,7 +14269,7 @@ class SelectableBox extends WithExtraAttributes {
|
|
|
14171
14269
|
`;
|
|
14172
14270
|
}
|
|
14173
14271
|
constructor() {
|
|
14174
|
-
super(styleSheet$
|
|
14272
|
+
super(styleSheet$k);
|
|
14175
14273
|
this.shadowRoot.innerHTML = this.template();
|
|
14176
14274
|
}
|
|
14177
14275
|
static get observedAttributes() {
|
|
@@ -14227,9 +14325,9 @@ function shouldIgnoreSelectableBoxClick(event, host, ignoredTags = DEFAULT_IGNOR
|
|
|
14227
14325
|
}
|
|
14228
14326
|
return false;
|
|
14229
14327
|
}
|
|
14230
|
-
const styles$
|
|
14231
|
-
const styleSheet$
|
|
14232
|
-
styleSheet$
|
|
14328
|
+
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)}';
|
|
14329
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
14330
|
+
styleSheet$j.replaceSync(styles$h);
|
|
14233
14331
|
class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
14234
14332
|
template() {
|
|
14235
14333
|
return `
|
|
@@ -14251,7 +14349,7 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14251
14349
|
}
|
|
14252
14350
|
constructor() {
|
|
14253
14351
|
var _a;
|
|
14254
|
-
super(styleSheet$
|
|
14352
|
+
super(styleSheet$j);
|
|
14255
14353
|
this.shadowRoot.innerHTML = this.template();
|
|
14256
14354
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14257
14355
|
}
|
|
@@ -14391,14 +14489,14 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14391
14489
|
if (this.$checkbox) {
|
|
14392
14490
|
this.$checkbox.setAttribute("checked", "");
|
|
14393
14491
|
}
|
|
14394
|
-
this.dispatchEvent(
|
|
14395
|
-
new Event("change", {
|
|
14396
|
-
bubbles: true,
|
|
14397
|
-
composed: true
|
|
14398
|
-
// Allow the event to pass through shadow DOM boundaries
|
|
14399
|
-
})
|
|
14400
|
-
);
|
|
14401
14492
|
}
|
|
14493
|
+
this.dispatchEvent(
|
|
14494
|
+
new Event("change", {
|
|
14495
|
+
bubbles: true,
|
|
14496
|
+
composed: true
|
|
14497
|
+
// Allow the event to pass through shadow DOM boundaries
|
|
14498
|
+
})
|
|
14499
|
+
);
|
|
14402
14500
|
}
|
|
14403
14501
|
// Form-associated callbacks
|
|
14404
14502
|
static get formAssociated() {
|
|
@@ -14498,8 +14596,8 @@ class SelectableBoxCheckbox extends WithExtraAttributes {
|
|
|
14498
14596
|
if (!customElements.get("px-selectable-box-checkbox")) {
|
|
14499
14597
|
customElements.define("px-selectable-box-checkbox", SelectableBoxCheckbox);
|
|
14500
14598
|
}
|
|
14501
|
-
const styleSheet$
|
|
14502
|
-
styleSheet$
|
|
14599
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
14600
|
+
styleSheet$i.replaceSync(styles$h);
|
|
14503
14601
|
class SelectableBoxRadio extends WithExtraAttributes {
|
|
14504
14602
|
template() {
|
|
14505
14603
|
return `
|
|
@@ -14521,7 +14619,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
|
|
|
14521
14619
|
}
|
|
14522
14620
|
constructor() {
|
|
14523
14621
|
var _a;
|
|
14524
|
-
super(styleSheet$
|
|
14622
|
+
super(styleSheet$i);
|
|
14525
14623
|
this.shadowRoot.innerHTML = this.template();
|
|
14526
14624
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14527
14625
|
}
|
|
@@ -14833,7 +14931,7 @@ const _Skeleton = class _Skeleton extends PxElement {
|
|
|
14833
14931
|
updateVariant(variant) {
|
|
14834
14932
|
if (!this.checkName(skeletonsVariantValues, variant)) {
|
|
14835
14933
|
log(
|
|
14836
|
-
|
|
14934
|
+
`"${variant}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${skeletonsVariantValues.join('", "')}".`
|
|
14837
14935
|
);
|
|
14838
14936
|
return;
|
|
14839
14937
|
}
|
|
@@ -14863,10 +14961,10 @@ let Skeleton = _Skeleton;
|
|
|
14863
14961
|
if (!customElements.get("px-skeleton")) {
|
|
14864
14962
|
customElements.define("px-skeleton", Skeleton);
|
|
14865
14963
|
}
|
|
14866
|
-
const styles$
|
|
14867
|
-
const styleSheet$
|
|
14964
|
+
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)}}";
|
|
14965
|
+
const styleSheet$h = new CSSStyleSheet();
|
|
14868
14966
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
14869
|
-
styleSheet$
|
|
14967
|
+
styleSheet$h.replaceSync(styles$g);
|
|
14870
14968
|
typographyStyles$1.replaceSync(typographyCss$1);
|
|
14871
14969
|
class Spinner extends HTMLElement {
|
|
14872
14970
|
template() {
|
|
@@ -14882,7 +14980,7 @@ class Spinner extends HTMLElement {
|
|
|
14882
14980
|
this.attachShadow({ mode: "open" });
|
|
14883
14981
|
this.shadowRoot.innerHTML = this.template();
|
|
14884
14982
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
14885
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
14983
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$h, typographyStyles$1];
|
|
14886
14984
|
}
|
|
14887
14985
|
static get observedAttributes() {
|
|
14888
14986
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -14923,7 +15021,7 @@ class Spinner extends HTMLElement {
|
|
|
14923
15021
|
}
|
|
14924
15022
|
if (!this.checkName(attrValues, newValue)) {
|
|
14925
15023
|
log(
|
|
14926
|
-
|
|
15024
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValues.join('", "')}".`
|
|
14927
15025
|
);
|
|
14928
15026
|
}
|
|
14929
15027
|
}
|
|
@@ -14955,7 +15053,7 @@ class Spinner extends HTMLElement {
|
|
|
14955
15053
|
if (!customElements.get("px-spinner")) {
|
|
14956
15054
|
customElements.define("px-spinner", Spinner);
|
|
14957
15055
|
}
|
|
14958
|
-
const statusCss = ':host,:host>*{display:block;box-sizing:border-box}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot="label"]){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)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media
|
|
15056
|
+
const statusCss = ':host,:host>*{display:block;box-sizing:border-box}.status{color:var(--px-color-text-brand-default)}.status ::slotted([slot="label"]){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)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.status ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}}';
|
|
14959
15057
|
const statusStyles = new CSSStyleSheet();
|
|
14960
15058
|
statusStyles.replaceSync(statusCss);
|
|
14961
15059
|
const statusStateValues = [
|
|
@@ -15035,7 +15133,7 @@ const _Status = class _Status extends PxElement {
|
|
|
15035
15133
|
updateState(state) {
|
|
15036
15134
|
if (!this.checkName(statusStateValues, state)) {
|
|
15037
15135
|
log(
|
|
15038
|
-
|
|
15136
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusStateValues.join('", "')}".`
|
|
15039
15137
|
);
|
|
15040
15138
|
return;
|
|
15041
15139
|
}
|
|
@@ -15149,7 +15247,7 @@ let Status = _Status;
|
|
|
15149
15247
|
if (!customElements.get("px-status")) {
|
|
15150
15248
|
customElements.define("px-status", Status);
|
|
15151
15249
|
}
|
|
15152
|
-
const statusCardCss = ':host,:host>*{display:block;box-sizing:border-box}px-container{height:100%}.status-card{position:relative}.status-card:before{content:"";position:absolute;display:block;border-left:5px solid var(--px-color-border-brand-default);height:100%;left:0;top:0;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.status-card.success:before{border-color:var(--px-color-border-purpose-success-default)}.status-card.warning:before,.status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-default)}.status-card.error:before{border-color:var(--px-color-border-purpose-error-default)}::slotted([slot="title"]){display:block;font-size:var(--px-text-size-heading-s-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}:host([inverted]) .status-card:before{border-color:var(--px-color-border-brand-inverted)}:host([inverted]) .status-card.success:before{border-color:var(--px-color-border-purpose-success-inverted)}:host([inverted]) .status-card.warning:before,:host([inverted]) .status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-inverted)}:host([inverted]) .status-card.error:before{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}@media
|
|
15250
|
+
const statusCardCss = ':host,:host>*{display:block;box-sizing:border-box}px-container{height:100%}.status-card{position:relative}.status-card:before{content:"";position:absolute;display:block;border-left:5px solid var(--px-color-border-brand-default);height:100%;left:0;top:0;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}.status-card.success:before{border-color:var(--px-color-border-purpose-success-default)}.status-card.warning:before,.status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-default)}.status-card.error:before{border-color:var(--px-color-border-purpose-error-default)}::slotted([slot="title"]){display:block;font-size:var(--px-text-size-heading-s-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}:host([inverted]) .status-card:before{border-color:var(--px-color-border-brand-inverted)}:host([inverted]) .status-card.success:before{border-color:var(--px-color-border-purpose-success-inverted)}:host([inverted]) .status-card.warning:before,:host([inverted]) .status-card.ongoing:before{border-color:var(--px-color-border-purpose-warning-inverted)}:host([inverted]) .status-card.error:before{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}@media screen and (min-width: 48rem){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-tablet)}}@media screen and (min-width: 64.0625rem){::slotted([slot="title"]){font-size:var(--px-text-size-heading-s-laptop)}}';
|
|
15153
15251
|
const statusCardStyles = new CSSStyleSheet();
|
|
15154
15252
|
statusCardStyles.replaceSync(statusCardCss);
|
|
15155
15253
|
const statusCardStateValues = [
|
|
@@ -15230,7 +15328,7 @@ const _StatusCard = class _StatusCard extends PxElement {
|
|
|
15230
15328
|
updateState(state) {
|
|
15231
15329
|
if (!this.checkName(statusCardStateValues, state)) {
|
|
15232
15330
|
log(
|
|
15233
|
-
|
|
15331
|
+
`"${state}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${statusCardStateValues.join('", "')}".`
|
|
15234
15332
|
);
|
|
15235
15333
|
return;
|
|
15236
15334
|
}
|
|
@@ -15300,9 +15398,9 @@ let StatusCard = _StatusCard;
|
|
|
15300
15398
|
if (!customElements.get("px-status-card")) {
|
|
15301
15399
|
customElements.define("px-status-card", StatusCard);
|
|
15302
15400
|
}
|
|
15303
|
-
const styles$
|
|
15401
|
+
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}";
|
|
15304
15402
|
const stylesheet = new CSSStyleSheet();
|
|
15305
|
-
stylesheet.replaceSync(styles$
|
|
15403
|
+
stylesheet.replaceSync(styles$f);
|
|
15306
15404
|
class StickyContainer extends HTMLElement {
|
|
15307
15405
|
constructor() {
|
|
15308
15406
|
super();
|
|
@@ -15392,7 +15490,7 @@ class StickyContainer extends HTMLElement {
|
|
|
15392
15490
|
if (!customElements.get("px-sticky-container")) {
|
|
15393
15491
|
customElements.define("px-sticky-container", StickyContainer);
|
|
15394
15492
|
}
|
|
15395
|
-
const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}:host(:focus-visible){outline:none}:host(:focus-visible) .switch{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([inverted]:focus-visible) .switch{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none-default);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default);cursor:pointer}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media
|
|
15493
|
+
const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}:host(:focus-visible){outline:none}:host(:focus-visible) .switch{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([inverted]:focus-visible) .switch{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none-default);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default);cursor:pointer}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media screen and (min-width: 48rem){label{padding:var(--px-padding-3xs-tablet)}}@media screen and (min-width: 64.0625rem){label{padding:var(--px-padding-3xs-laptop)}}';
|
|
15396
15494
|
const switchStyles = new CSSStyleSheet();
|
|
15397
15495
|
switchStyles.replaceSync(switchCss);
|
|
15398
15496
|
var InputState = /* @__PURE__ */ ((InputState2) => {
|
|
@@ -15522,9 +15620,9 @@ let Switch = _Switch;
|
|
|
15522
15620
|
if (!customElements.get("px-switch")) {
|
|
15523
15621
|
customElements.define("px-switch", Switch);
|
|
15524
15622
|
}
|
|
15525
|
-
const styles$
|
|
15526
|
-
const styleSheet$
|
|
15527
|
-
styleSheet$
|
|
15623
|
+
const styles$e = ":host{display:table;width:100%}";
|
|
15624
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
15625
|
+
styleSheet$g.replaceSync(styles$e);
|
|
15528
15626
|
class Table extends HTMLElement {
|
|
15529
15627
|
constructor() {
|
|
15530
15628
|
super();
|
|
@@ -15533,7 +15631,7 @@ class Table extends HTMLElement {
|
|
|
15533
15631
|
`;
|
|
15534
15632
|
this.attachShadow({ mode: "open" });
|
|
15535
15633
|
this.shadowRoot.innerHTML = this.template();
|
|
15536
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15634
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$g];
|
|
15537
15635
|
}
|
|
15538
15636
|
connectedCallback() {
|
|
15539
15637
|
this.style.display = "table";
|
|
@@ -15543,9 +15641,9 @@ class Table extends HTMLElement {
|
|
|
15543
15641
|
if (!customElements.get("px-table")) {
|
|
15544
15642
|
customElements.define("px-table", Table);
|
|
15545
15643
|
}
|
|
15546
|
-
const styles$
|
|
15547
|
-
const styleSheet$
|
|
15548
|
-
styleSheet$
|
|
15644
|
+
const styles$d = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
15645
|
+
const styleSheet$f = new CSSStyleSheet();
|
|
15646
|
+
styleSheet$f.replaceSync(styles$d);
|
|
15549
15647
|
class Thead extends HTMLElement {
|
|
15550
15648
|
constructor() {
|
|
15551
15649
|
super();
|
|
@@ -15554,7 +15652,7 @@ class Thead extends HTMLElement {
|
|
|
15554
15652
|
`;
|
|
15555
15653
|
this.attachShadow({ mode: "open" });
|
|
15556
15654
|
this.shadowRoot.innerHTML = this.template();
|
|
15557
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15655
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$f];
|
|
15558
15656
|
}
|
|
15559
15657
|
connectedCallback() {
|
|
15560
15658
|
this.style.display = "table-header-group";
|
|
@@ -15564,9 +15662,9 @@ class Thead extends HTMLElement {
|
|
|
15564
15662
|
if (!customElements.get("px-thead")) {
|
|
15565
15663
|
customElements.define("px-thead", Thead);
|
|
15566
15664
|
}
|
|
15567
|
-
const styles$
|
|
15568
|
-
const styleSheet$
|
|
15569
|
-
styleSheet$
|
|
15665
|
+
const styles$c = ":host{display:table-row}";
|
|
15666
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
15667
|
+
styleSheet$e.replaceSync(styles$c);
|
|
15570
15668
|
class Tr extends HTMLElement {
|
|
15571
15669
|
constructor() {
|
|
15572
15670
|
super();
|
|
@@ -15575,7 +15673,7 @@ class Tr extends HTMLElement {
|
|
|
15575
15673
|
`;
|
|
15576
15674
|
this.attachShadow({ mode: "open" });
|
|
15577
15675
|
this.shadowRoot.innerHTML = this.template();
|
|
15578
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15676
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$e];
|
|
15579
15677
|
}
|
|
15580
15678
|
connectedCallback() {
|
|
15581
15679
|
this.style.display = "table-row";
|
|
@@ -15585,9 +15683,9 @@ class Tr extends HTMLElement {
|
|
|
15585
15683
|
if (!customElements.get("px-tr")) {
|
|
15586
15684
|
customElements.define("px-tr", Tr);
|
|
15587
15685
|
}
|
|
15588
|
-
const styles$
|
|
15589
|
-
const styleSheet$
|
|
15590
|
-
styleSheet$
|
|
15686
|
+
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)}}';
|
|
15687
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
15688
|
+
styleSheet$d.replaceSync(styles$b);
|
|
15591
15689
|
class Th extends HTMLElement {
|
|
15592
15690
|
constructor() {
|
|
15593
15691
|
super();
|
|
@@ -15604,7 +15702,7 @@ class Th extends HTMLElement {
|
|
|
15604
15702
|
`;
|
|
15605
15703
|
this.attachShadow({ mode: "open" });
|
|
15606
15704
|
this.shadowRoot.innerHTML = this.template();
|
|
15607
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15705
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$d];
|
|
15608
15706
|
}
|
|
15609
15707
|
connectedCallback() {
|
|
15610
15708
|
this.style.display = "table-cell";
|
|
@@ -15621,9 +15719,9 @@ class Th extends HTMLElement {
|
|
|
15621
15719
|
if (!customElements.get("px-th")) {
|
|
15622
15720
|
customElements.define("px-th", Th);
|
|
15623
15721
|
}
|
|
15624
|
-
const styles$
|
|
15625
|
-
const styleSheet$
|
|
15626
|
-
styleSheet$
|
|
15722
|
+
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)}";
|
|
15723
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
15724
|
+
styleSheet$c.replaceSync(styles$a);
|
|
15627
15725
|
class Tbody extends HTMLElement {
|
|
15628
15726
|
constructor() {
|
|
15629
15727
|
super();
|
|
@@ -15632,7 +15730,7 @@ class Tbody extends HTMLElement {
|
|
|
15632
15730
|
`;
|
|
15633
15731
|
this.attachShadow({ mode: "open" });
|
|
15634
15732
|
this.shadowRoot.innerHTML = this.template();
|
|
15635
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15733
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$c];
|
|
15636
15734
|
}
|
|
15637
15735
|
connectedCallback() {
|
|
15638
15736
|
this.style.display = "table-row-group";
|
|
@@ -15642,9 +15740,9 @@ class Tbody extends HTMLElement {
|
|
|
15642
15740
|
if (!customElements.get("px-tbody")) {
|
|
15643
15741
|
customElements.define("px-tbody", Tbody);
|
|
15644
15742
|
}
|
|
15645
|
-
const styles$
|
|
15646
|
-
const styleSheet$
|
|
15647
|
-
styleSheet$
|
|
15743
|
+
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)}}';
|
|
15744
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
15745
|
+
styleSheet$b.replaceSync(styles$9);
|
|
15648
15746
|
class Td extends HTMLElement {
|
|
15649
15747
|
constructor() {
|
|
15650
15748
|
super();
|
|
@@ -15664,7 +15762,7 @@ class Td extends HTMLElement {
|
|
|
15664
15762
|
`;
|
|
15665
15763
|
this.attachShadow({ mode: "open" });
|
|
15666
15764
|
this.shadowRoot.innerHTML = this.template();
|
|
15667
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15765
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$b];
|
|
15668
15766
|
}
|
|
15669
15767
|
connectedCallback() {
|
|
15670
15768
|
this.style.display = "table-cell";
|
|
@@ -15686,9 +15784,9 @@ class Td extends HTMLElement {
|
|
|
15686
15784
|
if (!customElements.get("px-td")) {
|
|
15687
15785
|
customElements.define("px-td", Td);
|
|
15688
15786
|
}
|
|
15689
|
-
const styles$
|
|
15690
|
-
const styleSheet$
|
|
15691
|
-
styleSheet$
|
|
15787
|
+
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)}}";
|
|
15788
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
15789
|
+
styleSheet$a.replaceSync(styles$8);
|
|
15692
15790
|
const TAB_SELECTED_EVENT = "px.lavender.tab.selected";
|
|
15693
15791
|
const TAB_CONNECTED_EVENT = "px-tab-connected";
|
|
15694
15792
|
class Tab extends HTMLElement {
|
|
@@ -15702,7 +15800,7 @@ class Tab extends HTMLElement {
|
|
|
15702
15800
|
`;
|
|
15703
15801
|
this.attachShadow({ mode: "open" });
|
|
15704
15802
|
this.shadowRoot.innerHTML = this.template();
|
|
15705
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15803
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$a];
|
|
15706
15804
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15707
15805
|
}
|
|
15708
15806
|
static get observedAttributes() {
|
|
@@ -15794,9 +15892,9 @@ class Tab extends HTMLElement {
|
|
|
15794
15892
|
}
|
|
15795
15893
|
}
|
|
15796
15894
|
}
|
|
15797
|
-
const styles$
|
|
15798
|
-
const styleSheet$
|
|
15799
|
-
styleSheet$
|
|
15895
|
+
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))}}';
|
|
15896
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
15897
|
+
styleSheet$9.replaceSync(styles$7);
|
|
15800
15898
|
class Tabs extends HTMLElement {
|
|
15801
15899
|
constructor() {
|
|
15802
15900
|
var _a;
|
|
@@ -15828,7 +15926,7 @@ class Tabs extends HTMLElement {
|
|
|
15828
15926
|
};
|
|
15829
15927
|
this.attachShadow({ mode: "open" });
|
|
15830
15928
|
this.shadowRoot.innerHTML = this.template();
|
|
15831
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
15929
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
15832
15930
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
15833
15931
|
}
|
|
15834
15932
|
static get observedAttributes() {
|
|
@@ -16036,7 +16134,7 @@ class TabPanel extends HTMLElement {
|
|
|
16036
16134
|
`;
|
|
16037
16135
|
this.attachShadow({ mode: "open" });
|
|
16038
16136
|
this.shadowRoot.innerHTML = this.template();
|
|
16039
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16137
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
16040
16138
|
}
|
|
16041
16139
|
static get observedAttributes() {
|
|
16042
16140
|
return ["name", "selected"];
|
|
@@ -16107,8 +16205,8 @@ class PxTabPanel extends TabPanel {
|
|
|
16107
16205
|
if (!customElements.get("px-tab-panel")) {
|
|
16108
16206
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
16109
16207
|
}
|
|
16110
|
-
const styleSheet$
|
|
16111
|
-
styleSheet$
|
|
16208
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
16209
|
+
styleSheet$8.replaceSync(styles$K);
|
|
16112
16210
|
const _Tag = class _Tag extends PxElement {
|
|
16113
16211
|
template() {
|
|
16114
16212
|
return `
|
|
@@ -16120,9 +16218,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
16120
16218
|
`;
|
|
16121
16219
|
}
|
|
16122
16220
|
constructor() {
|
|
16123
|
-
super(styleSheet$
|
|
16221
|
+
super(styleSheet$8);
|
|
16124
16222
|
this.shadowRoot.innerHTML = this.template();
|
|
16125
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
16223
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
16126
16224
|
}
|
|
16127
16225
|
connectedCallback() {
|
|
16128
16226
|
if (this.$iconSlot) {
|
|
@@ -16235,10 +16333,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
16235
16333
|
}
|
|
16236
16334
|
}
|
|
16237
16335
|
}
|
|
16238
|
-
const styles$
|
|
16239
|
-
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
|
|
16240
|
-
const styleSheet$
|
|
16241
|
-
styleSheet$
|
|
16336
|
+
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)}';
|
|
16337
|
+
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)}';
|
|
16338
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
16339
|
+
styleSheet$7.replaceSync(styles$6);
|
|
16242
16340
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
16243
16341
|
commonStyleSheet$5.replaceSync(common);
|
|
16244
16342
|
const tileBackgroundColorValues = [
|
|
@@ -16261,7 +16359,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16261
16359
|
`;
|
|
16262
16360
|
}
|
|
16263
16361
|
constructor() {
|
|
16264
|
-
super(commonStyleSheet$5, styleSheet$
|
|
16362
|
+
super(commonStyleSheet$5, styleSheet$7);
|
|
16265
16363
|
const $root = document.createElement(_Tile.nativeName);
|
|
16266
16364
|
$root.classList.add("tile");
|
|
16267
16365
|
$root.innerHTML = this.template();
|
|
@@ -16326,7 +16424,7 @@ const _Tile = class _Tile extends VerticallyExtendedElement {
|
|
|
16326
16424
|
updateBackgroundColor(oldValue, newValue, attrValue) {
|
|
16327
16425
|
if (!checkName(attrValue, newValue)) {
|
|
16328
16426
|
log(
|
|
16329
|
-
|
|
16427
|
+
`"${newValue}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${attrValue.join('", "')}".`
|
|
16330
16428
|
);
|
|
16331
16429
|
return;
|
|
16332
16430
|
}
|
|
@@ -16416,9 +16514,9 @@ let Tile = _Tile;
|
|
|
16416
16514
|
if (!customElements.get("px-tile")) {
|
|
16417
16515
|
customElements.define("px-tile", Tile);
|
|
16418
16516
|
}
|
|
16419
|
-
const styles$
|
|
16420
|
-
const styleSheet$
|
|
16421
|
-
styleSheet$
|
|
16517
|
+
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)}}";
|
|
16518
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
16519
|
+
styleSheet$6.replaceSync(styles$5);
|
|
16422
16520
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
16423
16521
|
commonStyleSheet$4.replaceSync(common);
|
|
16424
16522
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -16433,7 +16531,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
16433
16531
|
`;
|
|
16434
16532
|
}
|
|
16435
16533
|
constructor() {
|
|
16436
|
-
super(commonStyleSheet$4, styleSheet$
|
|
16534
|
+
super(commonStyleSheet$4, styleSheet$6);
|
|
16437
16535
|
const $root = document.createElement(_TileButton.nativeName);
|
|
16438
16536
|
$root.classList.add("tile-button");
|
|
16439
16537
|
$root.innerHTML = this.template();
|
|
@@ -16642,7 +16740,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
16642
16740
|
if (this.$checkbox) {
|
|
16643
16741
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
16644
16742
|
log(
|
|
16645
|
-
|
|
16743
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${checkboxStateValues.join('", "')}".`
|
|
16646
16744
|
);
|
|
16647
16745
|
return;
|
|
16648
16746
|
} else {
|
|
@@ -16925,7 +17023,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
16925
17023
|
if (this.$radio) {
|
|
16926
17024
|
if (!this.checkName(stateValues, newValue)) {
|
|
16927
17025
|
log(
|
|
16928
|
-
|
|
17026
|
+
`"${newValue}" is not a valid ${attrName} value for ${this.tagName.toLowerCase()}. Allowed values are: "${stateValues.join('", "')}".`
|
|
16929
17027
|
);
|
|
16930
17028
|
return;
|
|
16931
17029
|
} else {
|
|
@@ -17117,9 +17215,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
17117
17215
|
if (!customElements.get("px-tile-radio")) {
|
|
17118
17216
|
customElements.define("px-tile-radio", TileRadio);
|
|
17119
17217
|
}
|
|
17120
|
-
const styles$
|
|
17121
|
-
const styleSheet$
|
|
17122
|
-
styleSheet$
|
|
17218
|
+
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)}";
|
|
17219
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
17220
|
+
styleSheet$5.replaceSync(styles$4);
|
|
17123
17221
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
17124
17222
|
commonStyleSheet$1.replaceSync(common);
|
|
17125
17223
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -17140,7 +17238,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
17140
17238
|
`;
|
|
17141
17239
|
}
|
|
17142
17240
|
constructor() {
|
|
17143
|
-
super(commonStyleSheet$1, styleSheet$
|
|
17241
|
+
super(commonStyleSheet$1, styleSheet$5);
|
|
17144
17242
|
const $root = document.createElement(_TileLink.nativeName);
|
|
17145
17243
|
$root.classList.add("tile-link");
|
|
17146
17244
|
$root.innerHTML = this.template();
|
|
@@ -17531,10 +17629,10 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
17531
17629
|
if (!customElements.get("px-tile-switch")) {
|
|
17532
17630
|
customElements.define("px-tile-switch", TileSwitch);
|
|
17533
17631
|
}
|
|
17534
|
-
const styles$
|
|
17535
|
-
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
|
|
17536
|
-
const styleSheet$
|
|
17537
|
-
styleSheet$
|
|
17632
|
+
const styles$3 = ".timeline{list-style:none;margin:0;padding:0}";
|
|
17633
|
+
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)}}';
|
|
17634
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
17635
|
+
styleSheet$4.replaceSync(styles$2);
|
|
17538
17636
|
const TIMELINE_ITEM_CONNECTED_EVENT = "px-timeline-item-connected";
|
|
17539
17637
|
let item = "1";
|
|
17540
17638
|
class TimelineItem extends HTMLElement {
|
|
@@ -17555,7 +17653,7 @@ class TimelineItem extends HTMLElement {
|
|
|
17555
17653
|
super();
|
|
17556
17654
|
this.attachShadow({ mode: "open" });
|
|
17557
17655
|
this.shadowRoot.innerHTML = this.template();
|
|
17558
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
17656
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
17559
17657
|
}
|
|
17560
17658
|
connectedCallback() {
|
|
17561
17659
|
this.dispatchEvent(
|
|
@@ -17615,15 +17713,15 @@ class TimelineItem extends HTMLElement {
|
|
|
17615
17713
|
if (!customElements.get("px-timeline-item")) {
|
|
17616
17714
|
customElements.define("px-timeline-item", TimelineItem);
|
|
17617
17715
|
}
|
|
17618
|
-
const styleSheet = new CSSStyleSheet();
|
|
17619
|
-
styleSheet.replaceSync(styles$
|
|
17716
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
17717
|
+
styleSheet$3.replaceSync(styles$3);
|
|
17620
17718
|
class Timeline extends HTMLElement {
|
|
17621
17719
|
constructor() {
|
|
17622
17720
|
super();
|
|
17623
17721
|
__privateAdd(this, _Timeline_instances);
|
|
17624
17722
|
this.attachShadow({ mode: "open" });
|
|
17625
17723
|
this.shadowRoot.innerHTML = this.template();
|
|
17626
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
17724
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
17627
17725
|
}
|
|
17628
17726
|
template() {
|
|
17629
17727
|
return `
|
|
@@ -17686,8 +17784,8 @@ applyInverted_fn3 = function() {
|
|
|
17686
17784
|
if (!customElements.get("px-timeline")) {
|
|
17687
17785
|
customElements.define("px-timeline", Timeline);
|
|
17688
17786
|
}
|
|
17689
|
-
const typographyCss = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){padding:0;margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media
|
|
17690
|
-
const lightStyles = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media
|
|
17787
|
+
const typographyCss = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){padding:0;margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media screen and (min-width: 48rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-tablet) var(--px-spacing-default-tablet)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-laptop) var(--px-spacing-default-laptop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-desktop) var(--px-spacing-default-desktop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-desktop)}}:host([inverted]){color:var(--px-color-text-neutral-inverted)}";
|
|
17788
|
+
const lightStyles = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media screen and (min-width: 48rem){.li{margin-bottom:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){.li{margin-bottom:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){.li{margin-bottom:var(--px-padding-xs-desktop)}}";
|
|
17691
17789
|
const typographyStyles = new CSSStyleSheet();
|
|
17692
17790
|
const headingStyles = new CSSStyleSheet();
|
|
17693
17791
|
const linkStyles = new CSSStyleSheet();
|
|
@@ -17731,14 +17829,298 @@ class Typography extends HTMLElement {
|
|
|
17731
17829
|
if (!customElements.get("px-typography")) {
|
|
17732
17830
|
customElements.define("px-typography", Typography);
|
|
17733
17831
|
}
|
|
17832
|
+
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)}";
|
|
17833
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
17834
|
+
styleSheet$2.replaceSync(styles$1);
|
|
17835
|
+
const _Autocomplete = class _Autocomplete extends WithExtraAttributes {
|
|
17836
|
+
constructor() {
|
|
17837
|
+
var _a;
|
|
17838
|
+
super(styleSheet$2);
|
|
17839
|
+
__privateAdd(this, _Autocomplete_instances);
|
|
17840
|
+
__privateAdd(this, _controlId);
|
|
17841
|
+
__privateAdd(this, _onKeyDown);
|
|
17842
|
+
__privateAdd(this, _onInput);
|
|
17843
|
+
__privateSet(this, _controlId, Math.random().toString(36).substring(2, 15));
|
|
17844
|
+
this.template = () => `
|
|
17845
|
+
<px-dropdown anchoralignment="bottom-left" manual-toggle>
|
|
17846
|
+
<px-input slot="trigger" auto-complete>
|
|
17847
|
+
<slot name="label" slot="label"></slot>
|
|
17848
|
+
<slot name="helper" slot="helper"></slot>
|
|
17849
|
+
<slot name="status-text" slot="status-text"></slot>
|
|
17850
|
+
</px-input>
|
|
17851
|
+
<div class="dropdown-content" slot="popover" role="listbox">
|
|
17852
|
+
<slot name="dropdown-content"></slot>
|
|
17853
|
+
</div>
|
|
17854
|
+
</px-dropdown>`;
|
|
17855
|
+
__privateSet(this, _onKeyDown, (event) => {
|
|
17856
|
+
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
|
|
17857
|
+
return;
|
|
17858
|
+
}
|
|
17859
|
+
if (this.$input.$el.getAttribute("aria-expanded") !== "true") {
|
|
17860
|
+
return;
|
|
17861
|
+
}
|
|
17862
|
+
const options = __privateGet(this, _Autocomplete_instances, options_get);
|
|
17863
|
+
if (!options.length) {
|
|
17864
|
+
return;
|
|
17865
|
+
}
|
|
17866
|
+
event.preventDefault();
|
|
17867
|
+
const currentIndex = options.findIndex(
|
|
17868
|
+
(option) => option === document.activeElement
|
|
17869
|
+
);
|
|
17870
|
+
let nextIndex;
|
|
17871
|
+
if (event.key === "ArrowDown") {
|
|
17872
|
+
nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
|
|
17873
|
+
} else {
|
|
17874
|
+
nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
|
|
17875
|
+
}
|
|
17876
|
+
options[nextIndex].focus();
|
|
17877
|
+
});
|
|
17878
|
+
__privateSet(this, _onInput, () => {
|
|
17879
|
+
var _a2;
|
|
17880
|
+
if (this.$input.value) {
|
|
17881
|
+
this.$input.$el.setAttribute("aria-expanded", "true");
|
|
17882
|
+
this.$dropDownContent.style.width = `${(_a2 = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a2.offsetWidth}px`;
|
|
17883
|
+
this.$dropDown.showPopover();
|
|
17884
|
+
} else {
|
|
17885
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17886
|
+
this.$dropDown.hidePopover();
|
|
17887
|
+
this.$input.focus();
|
|
17888
|
+
}
|
|
17889
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17890
|
+
});
|
|
17891
|
+
this.shadowRoot.innerHTML = this.template();
|
|
17892
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
17893
|
+
}
|
|
17894
|
+
static get observedAttributes() {
|
|
17895
|
+
return [
|
|
17896
|
+
...super.observedAttributes,
|
|
17897
|
+
"size",
|
|
17898
|
+
"state",
|
|
17899
|
+
"extended",
|
|
17900
|
+
"extended--mobile",
|
|
17901
|
+
"extended--tablet",
|
|
17902
|
+
"extended--laptop",
|
|
17903
|
+
"extended--desktop"
|
|
17904
|
+
];
|
|
17905
|
+
}
|
|
17906
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
17907
|
+
switch (name) {
|
|
17908
|
+
case "size":
|
|
17909
|
+
case "state":
|
|
17910
|
+
case "extended":
|
|
17911
|
+
case "extended--mobile":
|
|
17912
|
+
case "extended--tablet":
|
|
17913
|
+
case "extended--laptop":
|
|
17914
|
+
case "extended--desktop":
|
|
17915
|
+
if (newValue !== null) {
|
|
17916
|
+
this.$input.setAttribute(name, newValue);
|
|
17917
|
+
} else {
|
|
17918
|
+
this.$input.removeAttribute(name);
|
|
17919
|
+
}
|
|
17920
|
+
break;
|
|
17921
|
+
default:
|
|
17922
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
17923
|
+
break;
|
|
17924
|
+
}
|
|
17925
|
+
}
|
|
17926
|
+
connectedCallback() {
|
|
17927
|
+
var _a, _b;
|
|
17928
|
+
this.$input.addEventListener("input", __privateGet(this, _onInput));
|
|
17929
|
+
this.addEventListener("keydown", __privateGet(this, _onKeyDown));
|
|
17930
|
+
this.$dropDownContent.style.width = `${(_a = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : _a.offsetWidth}px`;
|
|
17931
|
+
this.$input.$el.setAttribute("role", "combobox");
|
|
17932
|
+
this.$input.$el.setAttribute("autocomplete", "off");
|
|
17933
|
+
this.$input.$el.setAttribute("aria-autocomplete", "both");
|
|
17934
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17935
|
+
this.$input.$el.setAttribute("aria-controls", __privateGet(this, _controlId));
|
|
17936
|
+
this.$dropDownContent.setAttribute("id", __privateGet(this, _controlId));
|
|
17937
|
+
this.$dropDownContent.setAttribute("role", "listbox");
|
|
17938
|
+
const labelId = (_b = this.$label) == null ? void 0 : _b.getAttribute("id");
|
|
17939
|
+
if (labelId) {
|
|
17940
|
+
this.$dropDownContent.setAttribute("aria-labelledby", labelId);
|
|
17941
|
+
}
|
|
17942
|
+
}
|
|
17943
|
+
disconnectedCallback() {
|
|
17944
|
+
this.$input.removeEventListener("input", __privateGet(this, _onInput));
|
|
17945
|
+
this.removeEventListener("keydown", __privateGet(this, _onKeyDown));
|
|
17946
|
+
}
|
|
17947
|
+
get value() {
|
|
17948
|
+
return this.$input.value;
|
|
17949
|
+
}
|
|
17950
|
+
set value(value) {
|
|
17951
|
+
this.$input.value = value;
|
|
17952
|
+
this.$input.$el.setAttribute("aria-expanded", "false");
|
|
17953
|
+
this.$dropDown.hidePopover();
|
|
17954
|
+
this.$input.$el.focus();
|
|
17955
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17956
|
+
}
|
|
17957
|
+
get name() {
|
|
17958
|
+
return this.getAttribute("name");
|
|
17959
|
+
}
|
|
17960
|
+
formResetCallback() {
|
|
17961
|
+
this.$input.value = "";
|
|
17962
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17963
|
+
}
|
|
17964
|
+
formStateRestoreCallback(state) {
|
|
17965
|
+
this.$input.value = state;
|
|
17966
|
+
__privateMethod(this, _Autocomplete_instances, updateFormValue_fn).call(this);
|
|
17967
|
+
}
|
|
17968
|
+
get $dropDown() {
|
|
17969
|
+
return this.shadowRoot.querySelector("px-dropdown");
|
|
17970
|
+
}
|
|
17971
|
+
get $dropDownContent() {
|
|
17972
|
+
return this.shadowRoot.querySelector(".dropdown-content");
|
|
17973
|
+
}
|
|
17974
|
+
get $input() {
|
|
17975
|
+
return this.shadowRoot.querySelector("px-input");
|
|
17976
|
+
}
|
|
17977
|
+
get $label() {
|
|
17978
|
+
return this.querySelector('[slot="label"]');
|
|
17979
|
+
}
|
|
17980
|
+
};
|
|
17981
|
+
_controlId = new WeakMap();
|
|
17982
|
+
_onKeyDown = new WeakMap();
|
|
17983
|
+
_Autocomplete_instances = new WeakSet();
|
|
17984
|
+
options_get = function() {
|
|
17985
|
+
return Array.from(
|
|
17986
|
+
this.querySelectorAll(
|
|
17987
|
+
"px-autocomplete-option:not([disabled])"
|
|
17988
|
+
)
|
|
17989
|
+
);
|
|
17990
|
+
};
|
|
17991
|
+
_onInput = new WeakMap();
|
|
17992
|
+
updateFormValue_fn = function() {
|
|
17993
|
+
var _a;
|
|
17994
|
+
if (this.name) {
|
|
17995
|
+
const formData = new FormData();
|
|
17996
|
+
formData.append(this.name, this.value);
|
|
17997
|
+
(_a = this.internals) == null ? void 0 : _a.setFormValue(formData);
|
|
17998
|
+
}
|
|
17999
|
+
};
|
|
18000
|
+
_Autocomplete.formAssociated = true;
|
|
18001
|
+
let Autocomplete = _Autocomplete;
|
|
18002
|
+
if (!customElements.get("px-autocomplete")) {
|
|
18003
|
+
customElements.define("px-autocomplete", Autocomplete);
|
|
18004
|
+
}
|
|
18005
|
+
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))}}";
|
|
18006
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
18007
|
+
styleSheet$1.replaceSync(styles);
|
|
18008
|
+
class AutocompleteHeader extends HTMLElement {
|
|
18009
|
+
constructor() {
|
|
18010
|
+
super();
|
|
18011
|
+
__privateAdd(this, _AutocompleteHeader_instances);
|
|
18012
|
+
this.template = () => `
|
|
18013
|
+
<px-container border-radius="none" padding="s" background-color="container-default" class="autocomplete-header">
|
|
18014
|
+
<px-hstack gap="s" align-items="center">
|
|
18015
|
+
<px-icon name="search" color="brand" size="m" from="lavender"></px-icon>
|
|
18016
|
+
<px-span size="body-s"><slot></slot></px-span>
|
|
18017
|
+
</px-hstack>
|
|
18018
|
+
</px-container>
|
|
18019
|
+
`;
|
|
18020
|
+
this.attachShadow({ mode: "open" });
|
|
18021
|
+
this.shadowRoot.innerHTML = this.template();
|
|
18022
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
18023
|
+
}
|
|
18024
|
+
connectedCallback() {
|
|
18025
|
+
__privateMethod(this, _AutocompleteHeader_instances, syncSlot_fn).call(this);
|
|
18026
|
+
}
|
|
18027
|
+
get $icon() {
|
|
18028
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
18029
|
+
}
|
|
18030
|
+
get $text() {
|
|
18031
|
+
return this.shadowRoot.querySelector("px-span");
|
|
18032
|
+
}
|
|
18033
|
+
}
|
|
18034
|
+
_AutocompleteHeader_instances = new WeakSet();
|
|
18035
|
+
syncSlot_fn = function() {
|
|
18036
|
+
var _a;
|
|
18037
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-autocomplete" && !this.slot) {
|
|
18038
|
+
this.slot = "dropdown-content";
|
|
18039
|
+
}
|
|
18040
|
+
};
|
|
18041
|
+
if (!customElements.get("px-autocomplete-header")) {
|
|
18042
|
+
customElements.define("px-autocomplete-header", AutocompleteHeader);
|
|
18043
|
+
}
|
|
18044
|
+
const styleSheet = new CSSStyleSheet();
|
|
18045
|
+
styleSheet.replaceSync(styles);
|
|
18046
|
+
class AutocompleteOption extends HTMLElement {
|
|
18047
|
+
constructor() {
|
|
18048
|
+
super();
|
|
18049
|
+
__privateAdd(this, _AutocompleteOption_instances);
|
|
18050
|
+
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>`;
|
|
18051
|
+
this.attachShadow({ mode: "open" });
|
|
18052
|
+
this.shadowRoot.innerHTML = this.template();
|
|
18053
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
18054
|
+
}
|
|
18055
|
+
static get observedAttributes() {
|
|
18056
|
+
return ["selected", "type"];
|
|
18057
|
+
}
|
|
18058
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
18059
|
+
if (oldValue === newValue) {
|
|
18060
|
+
return;
|
|
18061
|
+
}
|
|
18062
|
+
if (name === "selected") {
|
|
18063
|
+
this.$button.setAttribute("aria-selected", String(newValue !== null));
|
|
18064
|
+
return;
|
|
18065
|
+
}
|
|
18066
|
+
if (newValue === null) {
|
|
18067
|
+
this.$button.removeAttribute(name);
|
|
18068
|
+
} else {
|
|
18069
|
+
this.$button.setAttribute(name, newValue);
|
|
18070
|
+
}
|
|
18071
|
+
}
|
|
18072
|
+
connectedCallback() {
|
|
18073
|
+
__privateMethod(this, _AutocompleteOption_instances, syncSlot_fn2).call(this);
|
|
18074
|
+
this.$button.setAttribute(
|
|
18075
|
+
"aria-selected",
|
|
18076
|
+
String(this.hasAttribute("selected"))
|
|
18077
|
+
);
|
|
18078
|
+
if (!this.hasAttribute("tabindex")) {
|
|
18079
|
+
this.setAttribute("tabindex", "-1");
|
|
18080
|
+
}
|
|
18081
|
+
}
|
|
18082
|
+
// delegate host focus to the inner option button
|
|
18083
|
+
focus(options) {
|
|
18084
|
+
this.$button.focus(options);
|
|
18085
|
+
}
|
|
18086
|
+
get selected() {
|
|
18087
|
+
return this.hasAttribute("selected");
|
|
18088
|
+
}
|
|
18089
|
+
set selected(value) {
|
|
18090
|
+
this.toggleAttribute("selected", value);
|
|
18091
|
+
}
|
|
18092
|
+
get type() {
|
|
18093
|
+
return this.getAttribute("type") ?? "button";
|
|
18094
|
+
}
|
|
18095
|
+
set type(value) {
|
|
18096
|
+
this.setAttribute("type", value);
|
|
18097
|
+
}
|
|
18098
|
+
get $button() {
|
|
18099
|
+
return this.shadowRoot.querySelector("button");
|
|
18100
|
+
}
|
|
18101
|
+
}
|
|
18102
|
+
_AutocompleteOption_instances = new WeakSet();
|
|
18103
|
+
syncSlot_fn2 = function() {
|
|
18104
|
+
var _a;
|
|
18105
|
+
if (((_a = this.parentElement) == null ? void 0 : _a.localName) === "px-autocomplete" && !this.slot) {
|
|
18106
|
+
this.slot = "dropdown-content";
|
|
18107
|
+
}
|
|
18108
|
+
};
|
|
18109
|
+
if (!customElements.get("px-autocomplete-option")) {
|
|
18110
|
+
customElements.define("px-autocomplete-option", AutocompleteOption);
|
|
18111
|
+
}
|
|
17734
18112
|
export {
|
|
17735
18113
|
Accordion,
|
|
18114
|
+
ActionButton,
|
|
17736
18115
|
ActionLink,
|
|
17737
18116
|
AgGridTable,
|
|
17738
18117
|
AgGridTableThButton,
|
|
17739
18118
|
AgGridTableThContent,
|
|
17740
18119
|
AppleSeed,
|
|
17741
18120
|
AttributeBreakpointHandlerDelegate,
|
|
18121
|
+
Autocomplete,
|
|
18122
|
+
AutocompleteHeader,
|
|
18123
|
+
AutocompleteOption,
|
|
17742
18124
|
BREADCRUMB_ITEM_CONNECTED_EVENT,
|
|
17743
18125
|
Banner,
|
|
17744
18126
|
Breadcrumb,
|
|
@@ -17930,7 +18312,7 @@ export {
|
|
|
17930
18312
|
statusCardStateValues,
|
|
17931
18313
|
statusStateValues,
|
|
17932
18314
|
statusValues,
|
|
17933
|
-
styleSheet$
|
|
18315
|
+
styleSheet$G as styleSheet,
|
|
17934
18316
|
subgridRowsValues,
|
|
17935
18317
|
suffixButtonIconVariantValues,
|
|
17936
18318
|
textalignValues,
|