@proximus/lavender 1.0.0-alpha.27 → 1.0.0-alpha.29
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 +767 -450
- package/dist/lavender.umd.js +1 -1
- package/package.json +1 -1
package/dist/lavender.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]){order:var(--order-value)}:host([hidden]){display:none}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]){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]){order:var(--order--mobile-value)!important}::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]){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]){order:var(--order--tablet-value)!important}::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([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]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]){order:var(--order--desktop-value)!important}:host([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}}";
|
|
1
|
+
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
2
2
|
function getSupportedAttributeNames(htmlElementName) {
|
|
3
3
|
const $element = document.createElement(htmlElementName);
|
|
4
4
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -40,6 +40,10 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
40
40
|
"hidden--laptop",
|
|
41
41
|
"hidden--desktop",
|
|
42
42
|
"shown--sr",
|
|
43
|
+
"shown--sr--mobile",
|
|
44
|
+
"shown--sr--tablet",
|
|
45
|
+
"shown--sr--laptop",
|
|
46
|
+
"shown--sr--desktop",
|
|
43
47
|
"col-span",
|
|
44
48
|
"col-span--mobile",
|
|
45
49
|
"col-span--tablet",
|
|
@@ -127,7 +131,7 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
127
131
|
updateProperties(name, oldValue, newValue, attrValue) {
|
|
128
132
|
if (attrValue) {
|
|
129
133
|
if (!this.checkName(attrValue, newValue)) {
|
|
130
|
-
console.error(
|
|
134
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
131
135
|
return;
|
|
132
136
|
}
|
|
133
137
|
}
|
|
@@ -509,6 +513,8 @@ const cssGridColSpanValues = [
|
|
|
509
513
|
];
|
|
510
514
|
const cssGridOrderValues = [
|
|
511
515
|
"",
|
|
516
|
+
"-1",
|
|
517
|
+
"0",
|
|
512
518
|
"1",
|
|
513
519
|
"2",
|
|
514
520
|
"3",
|
|
@@ -553,42 +559,29 @@ const colorValues = [
|
|
|
553
559
|
"default",
|
|
554
560
|
"inherit",
|
|
555
561
|
"brand",
|
|
556
|
-
"
|
|
557
|
-
"
|
|
558
|
-
"state-active",
|
|
559
|
-
"state-disabled",
|
|
560
|
-
"body-neutral-strong",
|
|
561
|
-
"body-neutral-weak",
|
|
562
|
-
"heading-brand",
|
|
563
|
-
"heading-neutral",
|
|
562
|
+
"neutral",
|
|
563
|
+
"dimmed",
|
|
564
564
|
"purpose-success",
|
|
565
565
|
"purpose-warning",
|
|
566
566
|
"purpose-error",
|
|
567
567
|
"purpose-unlimited",
|
|
568
|
-
"purpose-promo"
|
|
568
|
+
"purpose-promo",
|
|
569
|
+
"state-hover",
|
|
570
|
+
"state-active",
|
|
571
|
+
"state-disabled"
|
|
569
572
|
];
|
|
570
573
|
const fontweightValues = [
|
|
571
574
|
"",
|
|
572
575
|
"default",
|
|
573
576
|
"inherit",
|
|
574
|
-
"
|
|
575
|
-
"
|
|
576
|
-
"
|
|
577
|
-
"
|
|
578
|
-
];
|
|
579
|
-
const iconSizeValues = [
|
|
580
|
-
"",
|
|
581
|
-
"default",
|
|
582
|
-
"2xs",
|
|
583
|
-
"xs",
|
|
584
|
-
"s",
|
|
585
|
-
"m",
|
|
586
|
-
"l",
|
|
587
|
-
"xl",
|
|
588
|
-
"2xl"
|
|
577
|
+
"body",
|
|
578
|
+
"title",
|
|
579
|
+
"title-large",
|
|
580
|
+
"subtitle"
|
|
589
581
|
];
|
|
582
|
+
const iconSizeValues = ["", "default", "xs", "s", "m", "l", "xl"];
|
|
590
583
|
const textalignValues = ["", "default", "left", "center", "right"];
|
|
591
|
-
const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l"];
|
|
584
|
+
const paddingValues = ["", "none", "3xs", "2xs", "xs", "s", "m", "l"];
|
|
592
585
|
const borderValues = ["", "none", "s", "m", "l"];
|
|
593
586
|
const borderRadiusValues = ["", "none", "main", "pill"];
|
|
594
587
|
const borderColorValues = [
|
|
@@ -625,13 +618,13 @@ const backgroundColorValues = [
|
|
|
625
618
|
"surface-brand-light",
|
|
626
619
|
"container-primary",
|
|
627
620
|
"container-secondary",
|
|
621
|
+
"container-light",
|
|
622
|
+
"container-default",
|
|
623
|
+
"container-strong",
|
|
628
624
|
"state-hover",
|
|
629
625
|
"state-hover-bordered",
|
|
630
626
|
"state-active",
|
|
631
627
|
"state-disabled",
|
|
632
|
-
"container-default",
|
|
633
|
-
"container-light",
|
|
634
|
-
"container-strong",
|
|
635
628
|
"purpose-success",
|
|
636
629
|
"purpose-warning",
|
|
637
630
|
"purpose-error",
|
|
@@ -754,7 +747,7 @@ function getViewportFormat() {
|
|
|
754
747
|
function checkName(values, value) {
|
|
755
748
|
return values.includes(value);
|
|
756
749
|
}
|
|
757
|
-
function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
750
|
+
function transferAccessibilityAttributes(sourceElement, targetElement, applyLabelledBy = true) {
|
|
758
751
|
var _a;
|
|
759
752
|
[
|
|
760
753
|
"aria-label",
|
|
@@ -796,21 +789,25 @@ function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
|
796
789
|
sourceElement.removeAttribute(attr);
|
|
797
790
|
}
|
|
798
791
|
});
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
792
|
+
if (applyLabelledBy) {
|
|
793
|
+
const id = `px-${((_a = targetElement.localName) == null ? void 0 : _a.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
|
|
794
|
+
targetElement.setAttribute("id", id);
|
|
795
|
+
sourceElement.setAttribute("aria-labelledby", id);
|
|
796
|
+
}
|
|
802
797
|
}
|
|
803
798
|
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
804
799
|
const stylesheet2 = new CSSStyleSheet();
|
|
805
800
|
const styles2 = attributeValues.reduce(
|
|
806
801
|
(prev, attributeValue) => prev + `
|
|
807
802
|
${selector(attributeName, attributeValue)} {
|
|
808
|
-
|
|
803
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
804
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
805
|
+
}
|
|
806
|
+
@media only screen and (max-width: 767px) {
|
|
807
|
+
${selector(attributeName, attributeValue)} {
|
|
809
808
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
810
809
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
811
810
|
}
|
|
812
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
813
|
-
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
814
811
|
}
|
|
815
812
|
${selector(attributeName, attributeValue, "mobile")} {
|
|
816
813
|
@media only screen and (max-width: 767px) {
|
|
@@ -946,9 +943,9 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
946
943
|
this.setCSSProperties();
|
|
947
944
|
}
|
|
948
945
|
}
|
|
949
|
-
const styles$
|
|
946
|
+
const styles$B = ":host{display:block}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}}";
|
|
950
947
|
const styleSheet$s = new CSSStyleSheet();
|
|
951
|
-
styleSheet$s.replaceSync(styles$
|
|
948
|
+
styleSheet$s.replaceSync(styles$B);
|
|
952
949
|
const directionValues = [
|
|
953
950
|
"",
|
|
954
951
|
"default",
|
|
@@ -977,9 +974,16 @@ const justifyContentValues = [
|
|
|
977
974
|
"space-evenly"
|
|
978
975
|
];
|
|
979
976
|
const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
977
|
+
const overflowValues = ["", "visible", "hidden", "scroll", "auto"];
|
|
980
978
|
class Stack extends WithExtraAttributes {
|
|
981
979
|
constructor() {
|
|
982
980
|
super(styleSheet$s);
|
|
981
|
+
this.overflowXAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
982
|
+
this,
|
|
983
|
+
"overflow-x",
|
|
984
|
+
(newValue) => newValue,
|
|
985
|
+
"--overflow-x"
|
|
986
|
+
);
|
|
983
987
|
this.template = `<div class="flex-container">
|
|
984
988
|
<slot></slot>
|
|
985
989
|
</div>`;
|
|
@@ -1001,6 +1005,9 @@ class Stack extends WithExtraAttributes {
|
|
|
1001
1005
|
if (!this.hasAttribute("wrap")) {
|
|
1002
1006
|
this.wrap = "nowrap";
|
|
1003
1007
|
}
|
|
1008
|
+
if (!this.hasAttribute("overflow-x")) {
|
|
1009
|
+
this.overflowXAttributeDelegate.init("visible");
|
|
1010
|
+
}
|
|
1004
1011
|
}
|
|
1005
1012
|
static get observedAttributes() {
|
|
1006
1013
|
return [
|
|
@@ -1029,7 +1036,12 @@ class Stack extends WithExtraAttributes {
|
|
|
1029
1036
|
"wrap--mobile",
|
|
1030
1037
|
"wrap--tablet",
|
|
1031
1038
|
"wrap--laptop",
|
|
1032
|
-
"wrap--desktop"
|
|
1039
|
+
"wrap--desktop",
|
|
1040
|
+
"overflow-x",
|
|
1041
|
+
"overflow-x--mobile",
|
|
1042
|
+
"overflow-x--tablet",
|
|
1043
|
+
"overflow-x--laptop",
|
|
1044
|
+
"overflow-x--desktop"
|
|
1033
1045
|
];
|
|
1034
1046
|
}
|
|
1035
1047
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
@@ -1074,14 +1086,32 @@ class Stack extends WithExtraAttributes {
|
|
|
1074
1086
|
case "direction--desktop":
|
|
1075
1087
|
this.updateFlexProperties(name, oldValue, newValue, directionValues);
|
|
1076
1088
|
break;
|
|
1089
|
+
case "overflow-x":
|
|
1090
|
+
case "overflow-x--mobile":
|
|
1091
|
+
case "overflow-x--tablet":
|
|
1092
|
+
case "overflow-x--laptop":
|
|
1093
|
+
case "overflow-x--desktop":
|
|
1094
|
+
this.updateOverflowX(name, oldValue, newValue, overflowValues);
|
|
1095
|
+
break;
|
|
1077
1096
|
default:
|
|
1078
1097
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
1079
1098
|
break;
|
|
1080
1099
|
}
|
|
1081
1100
|
}
|
|
1101
|
+
updateOverflowX(name, oldValue, newValue, attrValue) {
|
|
1102
|
+
if (!checkName(attrValue, newValue)) {
|
|
1103
|
+
console.error(`${newValue} is not an allowed ${name} value`);
|
|
1104
|
+
return;
|
|
1105
|
+
}
|
|
1106
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
1107
|
+
name,
|
|
1108
|
+
oldValue,
|
|
1109
|
+
newValue
|
|
1110
|
+
);
|
|
1111
|
+
}
|
|
1082
1112
|
updateFlexProperties(name, oldValue, newValue, attrValue) {
|
|
1083
1113
|
if (!this.checkName(attrValue, newValue)) {
|
|
1084
|
-
console.error(
|
|
1114
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
1085
1115
|
}
|
|
1086
1116
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
1087
1117
|
const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
|
|
@@ -1271,6 +1301,36 @@ class Stack extends WithExtraAttributes {
|
|
|
1271
1301
|
set wrapDesktop(value) {
|
|
1272
1302
|
this.setAttribute("wrap--desktop", value);
|
|
1273
1303
|
}
|
|
1304
|
+
get overflowX() {
|
|
1305
|
+
return this.getAttribute("overflow-x");
|
|
1306
|
+
}
|
|
1307
|
+
set overflowX(value) {
|
|
1308
|
+
this.setAttribute("overflow-x", value);
|
|
1309
|
+
}
|
|
1310
|
+
get overflowXMobile() {
|
|
1311
|
+
return this.getAttribute("overflow-x--mobile");
|
|
1312
|
+
}
|
|
1313
|
+
set overflowXMobile(value) {
|
|
1314
|
+
this.setAttribute("overflow-x--mobile", value);
|
|
1315
|
+
}
|
|
1316
|
+
get overflowXTablet() {
|
|
1317
|
+
return this.getAttribute("overflow-x--tablet");
|
|
1318
|
+
}
|
|
1319
|
+
set overflowXTablet(value) {
|
|
1320
|
+
this.setAttribute("overflow-x--tablet", value);
|
|
1321
|
+
}
|
|
1322
|
+
get overflowXLaptop() {
|
|
1323
|
+
return this.getAttribute("overflow-x--laptop");
|
|
1324
|
+
}
|
|
1325
|
+
set overflowXLaptop(value) {
|
|
1326
|
+
this.setAttribute("overflow-x--laptop", value);
|
|
1327
|
+
}
|
|
1328
|
+
get overflowXDesktop() {
|
|
1329
|
+
return this.getAttribute("overflow-x--desktop");
|
|
1330
|
+
}
|
|
1331
|
+
set overflowXDesktop(value) {
|
|
1332
|
+
this.setAttribute("overflow-x--desktop", value);
|
|
1333
|
+
}
|
|
1274
1334
|
get $el() {
|
|
1275
1335
|
return this.shadowRoot.querySelector(".flex-container");
|
|
1276
1336
|
}
|
|
@@ -1333,9 +1393,9 @@ class Spacer extends HTMLElement {
|
|
|
1333
1393
|
}
|
|
1334
1394
|
}
|
|
1335
1395
|
customElements.define("px-spacer", Spacer);
|
|
1336
|
-
const styles$
|
|
1396
|
+
const styles$A = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}";
|
|
1337
1397
|
const styleSheet$r = new CSSStyleSheet();
|
|
1338
|
-
styleSheet$r.replaceSync(styles$
|
|
1398
|
+
styleSheet$r.replaceSync(styles$A);
|
|
1339
1399
|
class Page extends WithExtraAttributes {
|
|
1340
1400
|
constructor() {
|
|
1341
1401
|
super(styleSheet$r);
|
|
@@ -1708,7 +1768,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1708
1768
|
}
|
|
1709
1769
|
updateGap(oldValue, newValue, attrValue) {
|
|
1710
1770
|
if (!this.checkName(attrValue, newValue)) {
|
|
1711
|
-
console.error(
|
|
1771
|
+
console.error(`${newValue} is not a valid gap value`);
|
|
1712
1772
|
return;
|
|
1713
1773
|
}
|
|
1714
1774
|
const updateGapStyle = (value) => {
|
|
@@ -1732,9 +1792,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1732
1792
|
}
|
|
1733
1793
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1734
1794
|
if (!this.checkName(attrValues, newValue)) {
|
|
1735
|
-
console.error(
|
|
1736
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
1737
|
-
);
|
|
1795
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
1738
1796
|
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop") {
|
|
1739
1797
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
1740
1798
|
} else {
|
|
@@ -1921,18 +1979,18 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1921
1979
|
_Grid.nativeName = "div";
|
|
1922
1980
|
let Grid = _Grid;
|
|
1923
1981
|
customElements.define("px-grid", Grid);
|
|
1924
|
-
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-font-line-height-m);font-weight:700;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: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{transform:scale(.95)}.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){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) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.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:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[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).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.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.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}.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)}.btn.header-dropdown{display:block;color:var(--px-color-text-neutral-default);width:100%;font-weight:400;text-align:left;font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:focus{outline:auto}.btn.header-dropdown:after{content:"";position:absolute;top:50%;right:var(--px-size-icon-xs);transform:translateY(-50%);width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy45Mjc5IDcuMTM5OThDMTMuNjQxIDYuODU3NTQgMTMuMTc1OCA2Ljg1NzU0IDEyLjg4ODkgNy4xMzk5OEw5LjAwMDIxIDEwLjk2NzlMNS4xMTE1NSA3LjEzOTk4QzQuODI0NjQgNi44NTc1NCA0LjM1OTQ1IDYuODU3NTQgNC4wNzI1NCA3LjEzOTk4QzMuNzg1NjIgNy40MjI0MSAzLjc4NTYyIDcuODgwMzIgNC4wNzI1NCA4LjE2Mjc2TDguNDgwNyAxMi41MDJDOC43Njc2MiAxMi43ODQ1IDkuMjMyOCAxMi43ODQ1IDkuNTE5NzIgMTIuNTAyTDEzLjkyNzkgOC4xNjI3NkMxNC4yMTQ4IDcuODgwMzIgMTQuMjE0OCA3LjQyMjQxIDEzLjkyNzkgNy4xMzk5OFoiIGZpbGw9IiM1QzJEOTEiLz4KPC9zdmc+Cgo=);background-repeat:no-repeat}@media screen and (min-width: 768px){.btn.header-dropdown{width:inherit;border:none;background:none;cursor:pointer;font:inherit;margin:0;font-weight:700;color:var(--px-color-text-brand-default, #000);display:inline-block;font-size:var(--px-text-size-label-l-desktop);padding:0 var(--px-spacing-s-desktop) 0 0!important}.btn.header-dropdown:after{right:calc(-1 * var(--px-spacing-s-desktop));top:50%;transform:translateY(-50%);padding:0}}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}: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)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.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:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
|
|
1925
|
-
const linkCss = ':host{display:inline-flex}a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-font-line-height-m);font-weight:
|
|
1926
|
-
const styles$
|
|
1927
|
-
const styles$
|
|
1982
|
+
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-font-line-height-m);font-weight:var(--px-font-weight-title);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: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{transform:scale(.95)}.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){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) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.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:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[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).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.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.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}.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)}.btn.header-dropdown{display:block;color:var(--px-color-text-neutral-default);width:100%;font-weight:var(--px-font-weight-body);text-align:left;font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:focus{outline:auto}.btn.header-dropdown:after{content:"";position:absolute;top:50%;right:var(--px-size-icon-xs);transform:translateY(-50%);width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy45Mjc5IDcuMTM5OThDMTMuNjQxIDYuODU3NTQgMTMuMTc1OCA2Ljg1NzU0IDEyLjg4ODkgNy4xMzk5OEw5LjAwMDIxIDEwLjk2NzlMNS4xMTE1NSA3LjEzOTk4QzQuODI0NjQgNi44NTc1NCA0LjM1OTQ1IDYuODU3NTQgNC4wNzI1NCA3LjEzOTk4QzMuNzg1NjIgNy40MjI0MSAzLjc4NTYyIDcuODgwMzIgNC4wNzI1NCA4LjE2Mjc2TDguNDgwNyAxMi41MDJDOC43Njc2MiAxMi43ODQ1IDkuMjMyOCAxMi43ODQ1IDkuNTE5NzIgMTIuNTAyTDEzLjkyNzkgOC4xNjI3NkMxNC4yMTQ4IDcuODgwMzIgMTQuMjE0OCA3LjQyMjQxIDEzLjkyNzkgNy4xMzk5OFoiIGZpbGw9IiM1QzJEOTEiLz4KPC9zdmc+Cgo=);background-repeat:no-repeat}@media screen and (min-width: 768px){.btn.header-dropdown{width:inherit;border:none;background:none;cursor:pointer;font:inherit;margin:0;font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default, #000);display:inline-block;font-size:var(--px-text-size-label-l-desktop);padding:0 var(--px-spacing-s-desktop) 0 0!important}.btn.header-dropdown:after{right:calc(-1 * var(--px-spacing-s-desktop));top:50%;transform:translateY(-50%);padding:0}}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}: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)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.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:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
|
|
1983
|
+
const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-font-line-height-m);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,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-color-icon-brand-default)}: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,:host([inverted]) .link:focus{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]) a.icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{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)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{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)}}';
|
|
1984
|
+
const styles$z = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);text-align:center;background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
|
|
1985
|
+
const styles$y = ":host{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-font-line-height-m);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([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}";
|
|
1928
1986
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
1929
1987
|
const linkStyles$2 = new CSSStyleSheet();
|
|
1930
1988
|
const patchStyles = new CSSStyleSheet();
|
|
1931
1989
|
const tagStyles = new CSSStyleSheet();
|
|
1932
1990
|
buttonStyles$1.replaceSync(buttonCss);
|
|
1933
1991
|
linkStyles$2.replaceSync(linkCss);
|
|
1934
|
-
patchStyles.replaceSync(styles$
|
|
1935
|
-
tagStyles.replaceSync(styles$
|
|
1992
|
+
patchStyles.replaceSync(styles$z);
|
|
1993
|
+
tagStyles.replaceSync(styles$y);
|
|
1936
1994
|
const variantValues$1 = [
|
|
1937
1995
|
"",
|
|
1938
1996
|
"default",
|
|
@@ -2068,14 +2126,16 @@ const _Button = class _Button extends PxElement {
|
|
|
2068
2126
|
}
|
|
2069
2127
|
this._toggleClass(oldValue, newValue);
|
|
2070
2128
|
if (!this.checkName(attrValue, newValue)) {
|
|
2071
|
-
console.error(
|
|
2129
|
+
console.error(
|
|
2130
|
+
`${newValue} is not a valid "variant" value for ${attrValue}`
|
|
2131
|
+
);
|
|
2072
2132
|
}
|
|
2073
2133
|
}
|
|
2074
2134
|
updateState(oldValue, newValue) {
|
|
2075
2135
|
const values = ["", "default", "success", "error"];
|
|
2076
2136
|
this._toggleClass(oldValue, newValue);
|
|
2077
2137
|
if (!this.checkName(values, newValue)) {
|
|
2078
|
-
console.error(
|
|
2138
|
+
console.error(`${newValue} is not a valid "sate" value`);
|
|
2079
2139
|
}
|
|
2080
2140
|
}
|
|
2081
2141
|
updateExtended(attributeName, newValue) {
|
|
@@ -2105,7 +2165,7 @@ const _Button = class _Button extends PxElement {
|
|
|
2105
2165
|
];
|
|
2106
2166
|
this._toggleClass(oldValue, newValue);
|
|
2107
2167
|
if (!this.checkName(values, newValue)) {
|
|
2108
|
-
console.error(
|
|
2168
|
+
console.error(`${newValue} is not a valid shape value`);
|
|
2109
2169
|
}
|
|
2110
2170
|
}
|
|
2111
2171
|
get variant() {
|
|
@@ -2168,8 +2228,8 @@ let Button = _Button;
|
|
|
2168
2228
|
if (!customElements.get("px-button")) {
|
|
2169
2229
|
customElements.define("px-button", Button);
|
|
2170
2230
|
}
|
|
2171
|
-
const styles$
|
|
2172
|
-
const filteredIconSizeValues = ["
|
|
2231
|
+
const styles$x = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-brand-default);font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);font-style:unset;font-weight:var(--px-font-weight-body);-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-size-icon-s);height:var(--px-size-icon-s);color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.content-neutral-strong{color:var(--px-color-icon-neutral-default)}.content-neutral-weak{color:var(--px-color-icon-dimmed-default)}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-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)}.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)}:host([inverted]) i{color:var(--px-color-icon-brand-inverted)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-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)}: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)}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
|
|
2232
|
+
const filteredIconSizeValues = ["xs", "s", "m", "l", "xl"];
|
|
2173
2233
|
const iconColorValues = [
|
|
2174
2234
|
"",
|
|
2175
2235
|
"default",
|
|
@@ -2253,9 +2313,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2253
2313
|
}
|
|
2254
2314
|
}
|
|
2255
2315
|
if (!this.checkName(attrValues, newValue)) {
|
|
2256
|
-
console.error(
|
|
2257
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2258
|
-
);
|
|
2316
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2259
2317
|
}
|
|
2260
2318
|
}
|
|
2261
2319
|
checkName(values, value) {
|
|
@@ -2305,7 +2363,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2305
2363
|
}
|
|
2306
2364
|
}
|
|
2307
2365
|
const styleSheet$q = new CSSStyleSheet();
|
|
2308
|
-
styleSheet$q.replaceSync(styles$
|
|
2366
|
+
styleSheet$q.replaceSync(styles$x);
|
|
2309
2367
|
class SVGIcon extends Icon {
|
|
2310
2368
|
constructor() {
|
|
2311
2369
|
super(styleSheet$q);
|
|
@@ -2397,7 +2455,7 @@ class IconSet extends HTMLElement {
|
|
|
2397
2455
|
if (!customElements.get("px-icon-set")) {
|
|
2398
2456
|
customElements.define("px-icon-set", IconSet);
|
|
2399
2457
|
}
|
|
2400
|
-
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-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:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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:1}@media only screen and (max-width:
|
|
2458
|
+
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}: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:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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:1}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --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)}}.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)}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.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}}';
|
|
2401
2459
|
const containerStyles = new CSSStyleSheet();
|
|
2402
2460
|
containerStyles.replaceSync(containerCss);
|
|
2403
2461
|
const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
|
|
@@ -2598,9 +2656,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2598
2656
|
`linear-gradient(var(--px-color-background-gradient-${newValue}))`
|
|
2599
2657
|
);
|
|
2600
2658
|
} else {
|
|
2601
|
-
console.error(
|
|
2602
|
-
`${newValue} is not an allowed background-gradient value for ${this.$el}`
|
|
2603
|
-
);
|
|
2659
|
+
console.error(`${newValue} is not an allowed background-gradient value`);
|
|
2604
2660
|
}
|
|
2605
2661
|
}
|
|
2606
2662
|
updateBackgroundColor(attrName, newValue) {
|
|
@@ -2617,9 +2673,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2617
2673
|
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-inverted"})`
|
|
2618
2674
|
);
|
|
2619
2675
|
} else {
|
|
2620
|
-
console.error(
|
|
2621
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2622
|
-
);
|
|
2676
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2623
2677
|
}
|
|
2624
2678
|
}
|
|
2625
2679
|
updateBorderColor(attrName, newValue) {
|
|
@@ -2633,16 +2687,12 @@ const _Container = class _Container extends PxElement {
|
|
|
2633
2687
|
`var(--px-color-border-${newValue}-inverted)`
|
|
2634
2688
|
);
|
|
2635
2689
|
} else {
|
|
2636
|
-
console.error(
|
|
2637
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2638
|
-
);
|
|
2690
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2639
2691
|
}
|
|
2640
2692
|
}
|
|
2641
2693
|
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
2642
2694
|
if (!this.checkName(attrValues, newValue)) {
|
|
2643
|
-
console.error(
|
|
2644
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2645
|
-
);
|
|
2695
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2646
2696
|
} else {
|
|
2647
2697
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2648
2698
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -2660,9 +2710,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2660
2710
|
}
|
|
2661
2711
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2662
2712
|
if (!this.checkName(attrValues, newValue)) {
|
|
2663
|
-
console.error(
|
|
2664
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2665
|
-
);
|
|
2713
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2666
2714
|
} else {
|
|
2667
2715
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2668
2716
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -3026,8 +3074,8 @@ const _Container = class _Container extends PxElement {
|
|
|
3026
3074
|
_Container.nativeName = "div";
|
|
3027
3075
|
let Container = _Container;
|
|
3028
3076
|
customElements.define("px-container", Container);
|
|
3029
|
-
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(
|
|
3030
|
-
const typographyCss$1 = "
|
|
3077
|
+
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-font-line-height-m);font-weight:var(--px-font-weight-title)}: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-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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 only screen and (min-width: 768px){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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@media only screen and (min-width: 1025px){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-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-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)}}@media screen and (min-width: 1441px){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)}}";
|
|
3078
|
+
const typographyCss$1 = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-neutral{color:var(--px-color-text-neutral-default)}.color-dimmed{color:var(--px-color-text-dimmed-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}.color-state-hover{color:var(--px-color-text-state-hover-default)}.color-state-active{color:var(--px-color-text-state-active-default)}.color-state-disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)}.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)}@media only screen and (min-width: 48em){.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)}}@media only screen and (min-width: 64.0625em){.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-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)}";
|
|
3031
3079
|
const headingStyles$2 = new CSSStyleSheet();
|
|
3032
3080
|
headingStyles$2.replaceSync(headingCss);
|
|
3033
3081
|
const typographyStyles$5 = new CSSStyleSheet();
|
|
@@ -3090,28 +3138,25 @@ class AbstractHeading extends PxElement {
|
|
|
3090
3138
|
}
|
|
3091
3139
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
3092
3140
|
if (!this.checkName(attrValue, newValue)) {
|
|
3093
|
-
console.error(
|
|
3094
|
-
`${newValue} is not an allowed "${attrName}" value for`,
|
|
3095
|
-
this.$el
|
|
3096
|
-
);
|
|
3141
|
+
console.error(`${newValue} is not an allowed "${attrName}" value`);
|
|
3097
3142
|
} else {
|
|
3098
3143
|
this.toggleClass(oldValue, newValue);
|
|
3099
3144
|
}
|
|
3100
3145
|
}
|
|
3101
3146
|
updateColor(oldValue, newValue, attrValue) {
|
|
3102
3147
|
if (!this.checkName(attrValue, newValue)) {
|
|
3103
|
-
console.error(
|
|
3148
|
+
console.error(`${newValue} is not a valid color value`);
|
|
3104
3149
|
return;
|
|
3105
3150
|
}
|
|
3106
3151
|
const updateColorStyle = (value) => {
|
|
3107
3152
|
if (value !== null && value !== "" && value !== "default") {
|
|
3108
3153
|
this.$el.style.setProperty(
|
|
3109
3154
|
`--heading-color-default`,
|
|
3110
|
-
`var(--px-text
|
|
3155
|
+
`var(--px-color-text-${value}-default)`
|
|
3111
3156
|
);
|
|
3112
3157
|
this.$el.style.setProperty(
|
|
3113
3158
|
`--heading-color-inverted`,
|
|
3114
|
-
`var(--px-text
|
|
3159
|
+
`var(--px-color-text-${value}-inverted)`
|
|
3115
3160
|
);
|
|
3116
3161
|
}
|
|
3117
3162
|
};
|
|
@@ -3120,7 +3165,7 @@ class AbstractHeading extends PxElement {
|
|
|
3120
3165
|
}
|
|
3121
3166
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
3122
3167
|
if (!this.checkName(attrValue, newValue)) {
|
|
3123
|
-
console.error(
|
|
3168
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
3124
3169
|
return;
|
|
3125
3170
|
}
|
|
3126
3171
|
const updateStyle = (breakpoint, value) => {
|
|
@@ -3239,9 +3284,9 @@ const _H6 = class _H6 extends AbstractHeading {
|
|
|
3239
3284
|
_H6.nativeName = "h6";
|
|
3240
3285
|
let H6 = _H6;
|
|
3241
3286
|
customElements.define("px-h6", H6);
|
|
3242
|
-
const styles$
|
|
3287
|
+
const styles$w = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
|
|
3243
3288
|
const styleSheet$p = new CSSStyleSheet();
|
|
3244
|
-
styleSheet$p.replaceSync(styles$
|
|
3289
|
+
styleSheet$p.replaceSync(styles$w);
|
|
3245
3290
|
class Section extends HTMLElement {
|
|
3246
3291
|
constructor() {
|
|
3247
3292
|
super();
|
|
@@ -3541,7 +3586,7 @@ class Section extends HTMLElement {
|
|
|
3541
3586
|
}
|
|
3542
3587
|
}
|
|
3543
3588
|
customElements.define("px-section", Section);
|
|
3544
|
-
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column
|
|
3589
|
+
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{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){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-container-default-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details.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)}}`;
|
|
3545
3590
|
const accordionStyles = new CSSStyleSheet();
|
|
3546
3591
|
accordionStyles.replaceSync(accordionCss);
|
|
3547
3592
|
const variantValues = ["", "none", "single"];
|
|
@@ -3549,7 +3594,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3549
3594
|
constructor() {
|
|
3550
3595
|
super(accordionStyles);
|
|
3551
3596
|
this.template = () => `<details>
|
|
3552
|
-
<summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
|
|
3597
|
+
<summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot><span class="arrow-icon"></span></summary>
|
|
3553
3598
|
<slot name="content"></slot>
|
|
3554
3599
|
</details>`;
|
|
3555
3600
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -3589,9 +3634,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3589
3634
|
this.$el.classList.toggle(`${newValue}`);
|
|
3590
3635
|
}
|
|
3591
3636
|
if (!this.checkName(attrValues, newValue)) {
|
|
3592
|
-
console.error(
|
|
3593
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3594
|
-
);
|
|
3637
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3595
3638
|
}
|
|
3596
3639
|
}
|
|
3597
3640
|
checkName(values, value) {
|
|
@@ -3601,10 +3644,9 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3601
3644
|
_Accordion.nativeName = "details";
|
|
3602
3645
|
let Accordion = _Accordion;
|
|
3603
3646
|
customElements.define("px-accordion", Accordion);
|
|
3604
|
-
const imgCss =
|
|
3647
|
+
const imgCss = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2) grayscale(100%)}@media only screen and (max-width: 767px){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){img{width:var(--img-width--tablet, auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){img{width:var(--img-width--laptop, auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}";
|
|
3605
3648
|
const styleSheet$o = new CSSStyleSheet();
|
|
3606
3649
|
styleSheet$o.replaceSync(imgCss);
|
|
3607
|
-
const breakpointsValues = ["", "mobile", "tablet", "laptop"];
|
|
3608
3650
|
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3609
3651
|
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3610
3652
|
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
@@ -3631,8 +3673,6 @@ class AbstractImage extends PxElement {
|
|
|
3631
3673
|
static get observedAttributes() {
|
|
3632
3674
|
return [
|
|
3633
3675
|
...super.observedAttributes,
|
|
3634
|
-
"hide-for",
|
|
3635
|
-
"show-for",
|
|
3636
3676
|
"border-radius",
|
|
3637
3677
|
"no-border-radius",
|
|
3638
3678
|
"no-border-radius--mobile",
|
|
@@ -3648,16 +3688,13 @@ class AbstractImage extends PxElement {
|
|
|
3648
3688
|
"height--tablet",
|
|
3649
3689
|
"height--laptop",
|
|
3650
3690
|
"height--desktop",
|
|
3691
|
+
"cover",
|
|
3651
3692
|
"disabled"
|
|
3652
3693
|
];
|
|
3653
3694
|
}
|
|
3654
3695
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3655
3696
|
if (oldValue !== newValue) {
|
|
3656
3697
|
switch (attrName) {
|
|
3657
|
-
case "hide-for":
|
|
3658
|
-
case "show-for":
|
|
3659
|
-
this.updateAttribute(attrName, oldValue, newValue, breakpointsValues);
|
|
3660
|
-
break;
|
|
3661
3698
|
case "border-radius":
|
|
3662
3699
|
this.updateAttribute(
|
|
3663
3700
|
attrName,
|
|
@@ -3710,9 +3747,7 @@ class AbstractImage extends PxElement {
|
|
|
3710
3747
|
}
|
|
3711
3748
|
updateWidth(attrName, oldValue, newValue, attrValues) {
|
|
3712
3749
|
if (!this.checkName(attrValues, newValue)) {
|
|
3713
|
-
console.error(
|
|
3714
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3715
|
-
);
|
|
3750
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3716
3751
|
return;
|
|
3717
3752
|
}
|
|
3718
3753
|
const hasBreakpoint = attrName.indexOf("--") > -1;
|
|
@@ -3751,9 +3786,7 @@ class AbstractImage extends PxElement {
|
|
|
3751
3786
|
}
|
|
3752
3787
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
3753
3788
|
if (!this.checkName(attrValues, newValue)) {
|
|
3754
|
-
console.error(
|
|
3755
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3756
|
-
);
|
|
3789
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3757
3790
|
} else {
|
|
3758
3791
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
3759
3792
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -3784,18 +3817,6 @@ class AbstractImage extends PxElement {
|
|
|
3784
3817
|
return values.includes(value);
|
|
3785
3818
|
}
|
|
3786
3819
|
//get & set
|
|
3787
|
-
get hidefor() {
|
|
3788
|
-
return this.getAttribute("hide-for");
|
|
3789
|
-
}
|
|
3790
|
-
set hidefor(value) {
|
|
3791
|
-
this.setAttribute("hide-for", value);
|
|
3792
|
-
}
|
|
3793
|
-
get showfor() {
|
|
3794
|
-
return this.getAttribute("show-for");
|
|
3795
|
-
}
|
|
3796
|
-
set showfor(value) {
|
|
3797
|
-
this.setAttribute("show-for", value);
|
|
3798
|
-
}
|
|
3799
3820
|
get borderRadius() {
|
|
3800
3821
|
return this.getAttribute("border-radius");
|
|
3801
3822
|
}
|
|
@@ -3912,6 +3933,16 @@ class AbstractImage extends PxElement {
|
|
|
3912
3933
|
this.removeAttribute("height--desktop");
|
|
3913
3934
|
}
|
|
3914
3935
|
}
|
|
3936
|
+
get cover() {
|
|
3937
|
+
return this.hasAttribute("cover");
|
|
3938
|
+
}
|
|
3939
|
+
set cover(value) {
|
|
3940
|
+
if (value) {
|
|
3941
|
+
this.setAttribute("cover", "");
|
|
3942
|
+
} else {
|
|
3943
|
+
this.removeAttribute("cover");
|
|
3944
|
+
}
|
|
3945
|
+
}
|
|
3915
3946
|
}
|
|
3916
3947
|
const _Image = class _Image extends AbstractImage {
|
|
3917
3948
|
constructor() {
|
|
@@ -4034,12 +4065,12 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
4034
4065
|
async addSrc(value, alt, loading) {
|
|
4035
4066
|
this.removeSrc();
|
|
4036
4067
|
if (!value) {
|
|
4037
|
-
console.error('No "src" value
|
|
4068
|
+
console.error('No "src" value defined');
|
|
4038
4069
|
return;
|
|
4039
4070
|
}
|
|
4040
4071
|
const imgExtension = value.split(".").pop();
|
|
4041
4072
|
if (!this.possibleImgExtension.includes(imgExtension)) {
|
|
4042
|
-
console.error('No extensions image to "src" value
|
|
4073
|
+
console.error('No extensions image to "src" value defined');
|
|
4043
4074
|
return;
|
|
4044
4075
|
}
|
|
4045
4076
|
const imgName = value.slice(0, (imgExtension.length + 1) * -1);
|
|
@@ -4049,7 +4080,7 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
4049
4080
|
imgPathS = await this.transformImgPath(imgName, imgExtension, "-s");
|
|
4050
4081
|
}
|
|
4051
4082
|
if (imgPathS === "") {
|
|
4052
|
-
console.error('
|
|
4083
|
+
console.error('Invalid "src" value');
|
|
4053
4084
|
return;
|
|
4054
4085
|
}
|
|
4055
4086
|
const imgPathM = await this.transformImgPath(imgName, imgExtension, "-m");
|
|
@@ -4079,7 +4110,7 @@ _Picture.nativeName = "picture";
|
|
|
4079
4110
|
let Picture = _Picture;
|
|
4080
4111
|
customElements.define("px-picture", Picture);
|
|
4081
4112
|
const styleSheet$n = new CSSStyleSheet();
|
|
4082
|
-
styleSheet$n.replaceSync(styles$
|
|
4113
|
+
styleSheet$n.replaceSync(styles$z);
|
|
4083
4114
|
const patchVariantValues = [
|
|
4084
4115
|
"",
|
|
4085
4116
|
"default",
|
|
@@ -4166,12 +4197,12 @@ class Patch extends HTMLElement {
|
|
|
4166
4197
|
if (!customElements.get("px-patch")) {
|
|
4167
4198
|
customElements.define("px-patch", Patch);
|
|
4168
4199
|
}
|
|
4169
|
-
const css$1 = '.price{--price-s: var(--px-
|
|
4170
|
-
const styles$
|
|
4171
|
-
styles$
|
|
4200
|
+
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)}@media only screen and (min-width: 48em){.price{--price-s: var(--px-price-size-unit-s-tablet);--price-m: var(--px-price-size-unit-m-tablet);--price-l: var(--px-price-size-unit-l-tablet)}}@media only screen and (min-width: 64.0625em){.price{--price-s: var(--px-price-size-unit-s-laptop);--price-m: var(--px-price-size-unit-m-laptop);--price-l: var(--px-price-size-unit-l-laptop)}}.promo,.free{color:var(--px-color-text-purpose-promo-default)}.neutral{color:var(--px-color-text-neutral-default)}.exceeding{color:var(--px-color-text-purpose-error-default)}.disabled{color:var(--px-color-text-state-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body)}@media only screen and (min-width: 48em){{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){{font-size:var(--px-text-size-label-m-laptop)}}::slotted([slot="new-promoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}: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)}:host([inverted]) ::slotted([slot="oldprice"]){color:var(--px-color-text-neutral-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:75%}::slotted(.decimals){font-size:50%}.m{font-size:var(--price-m)}.l{font-size:var(--price-l)}';
|
|
4201
|
+
const styles$v = new CSSStyleSheet();
|
|
4202
|
+
styles$v.replaceSync(css$1);
|
|
4172
4203
|
const priceVariantValues = [
|
|
4173
4204
|
"default",
|
|
4174
|
-
"
|
|
4205
|
+
"promo",
|
|
4175
4206
|
"free",
|
|
4176
4207
|
"neutral",
|
|
4177
4208
|
"exceeding",
|
|
@@ -4180,8 +4211,8 @@ const priceVariantValues = [
|
|
|
4180
4211
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
4181
4212
|
const _Price = class _Price extends PxElement {
|
|
4182
4213
|
constructor() {
|
|
4183
|
-
super(styles$
|
|
4184
|
-
this.template = () => `<span class="price"><slot
|
|
4214
|
+
super(styles$v);
|
|
4215
|
+
this.template = () => `<span class="price"><slot></slot></span>`;
|
|
4185
4216
|
this.shadowRoot.innerHTML = this.template();
|
|
4186
4217
|
}
|
|
4187
4218
|
static get observedAttributes() {
|
|
@@ -4242,30 +4273,11 @@ const _Price = class _Price extends PxElement {
|
|
|
4242
4273
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
4243
4274
|
this.toggleClass(oldValue, newValue);
|
|
4244
4275
|
if (!this.checkName(attrValues, newValue)) {
|
|
4245
|
-
console.error(
|
|
4246
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
4247
|
-
);
|
|
4276
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
4248
4277
|
}
|
|
4249
4278
|
}
|
|
4250
4279
|
buildPrice() {
|
|
4251
|
-
|
|
4252
|
-
const oldPrice = this.querySelector('[slot="oldprice"]');
|
|
4253
|
-
let strikethroughPrice = "";
|
|
4254
|
-
let newPriceSrText = "";
|
|
4255
|
-
let newPriceSrSpan;
|
|
4256
|
-
if (oldPrice && oldPrice.innerHTML !== "") {
|
|
4257
|
-
oldPrice.innerHTML = "€" + oldPrice.innerHTML;
|
|
4258
|
-
newPriceSrSpan = this.querySelector('[slot="newpurpose-promoprice"]');
|
|
4259
|
-
if (newPriceSrSpan) {
|
|
4260
|
-
newPriceSrText = newPriceSrSpan.outerHTML;
|
|
4261
|
-
price = newPriceSrSpan.nextSibling.textContent;
|
|
4262
|
-
} else {
|
|
4263
|
-
price = oldPrice.nextSibling.textContent;
|
|
4264
|
-
}
|
|
4265
|
-
strikethroughPrice = oldPrice.outerHTML + " ";
|
|
4266
|
-
} else if (oldPrice && oldPrice.innerHTML === "") {
|
|
4267
|
-
price = oldPrice.nextSibling.textContent;
|
|
4268
|
-
}
|
|
4280
|
+
const price = this.innerHTML.trim();
|
|
4269
4281
|
const isNumeric = /^[\d|.|,]+/.test(price);
|
|
4270
4282
|
let euro = "";
|
|
4271
4283
|
if (isNumeric) {
|
|
@@ -4276,21 +4288,21 @@ const _Price = class _Price extends PxElement {
|
|
|
4276
4288
|
const separator = price.charAt(price.length - 3);
|
|
4277
4289
|
if (separator === "." || separator === ",") {
|
|
4278
4290
|
const [nbrPart, decPart] = price.split(separator);
|
|
4279
|
-
this.innerHTML = `${
|
|
4291
|
+
this.innerHTML = `${euro}${nbrPart}<span class="decimals">${separator}${decPart}</span>`;
|
|
4280
4292
|
} else {
|
|
4281
|
-
this.innerHTML = `${
|
|
4293
|
+
this.innerHTML = `${euro}${price}`;
|
|
4282
4294
|
}
|
|
4283
4295
|
}
|
|
4284
4296
|
};
|
|
4285
4297
|
_Price.nativeName = "span";
|
|
4286
4298
|
let Price = _Price;
|
|
4287
4299
|
customElements.define("px-price", Price);
|
|
4288
|
-
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:
|
|
4289
|
-
const styles$
|
|
4290
|
-
styles$
|
|
4300
|
+
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-font-line-height-m);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}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}";
|
|
4301
|
+
const styles$u = new CSSStyleSheet();
|
|
4302
|
+
styles$u.replaceSync(css);
|
|
4291
4303
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
4292
4304
|
constructor() {
|
|
4293
|
-
super(styles$
|
|
4305
|
+
super(styles$u);
|
|
4294
4306
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
4295
4307
|
this.shadowRoot.innerHTML = this.template();
|
|
4296
4308
|
}
|
|
@@ -4298,9 +4310,9 @@ const _Ribbon = class _Ribbon extends PxElement {
|
|
|
4298
4310
|
_Ribbon.nativeName = "div";
|
|
4299
4311
|
let Ribbon = _Ribbon;
|
|
4300
4312
|
customElements.define("px-ribbon", Ribbon);
|
|
4301
|
-
const styles$
|
|
4313
|
+
const styles$t = ".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( --px-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( --px-separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}";
|
|
4302
4314
|
const styleSheet$m = new CSSStyleSheet();
|
|
4303
|
-
styleSheet$m.replaceSync(styles$
|
|
4315
|
+
styleSheet$m.replaceSync(styles$t);
|
|
4304
4316
|
const separatorDirectionValues = [
|
|
4305
4317
|
"",
|
|
4306
4318
|
"default",
|
|
@@ -4382,7 +4394,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4382
4394
|
}
|
|
4383
4395
|
};
|
|
4384
4396
|
if (!this.checkName(attrValue, newValue)) {
|
|
4385
|
-
console.error(
|
|
4397
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4386
4398
|
} else {
|
|
4387
4399
|
updateSizeStyle(oldValue);
|
|
4388
4400
|
updateSizeStyle(newValue);
|
|
@@ -4402,7 +4414,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4402
4414
|
}
|
|
4403
4415
|
};
|
|
4404
4416
|
if (!this.checkName(attrValue, newValue)) {
|
|
4405
|
-
console.error(
|
|
4417
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4406
4418
|
} else {
|
|
4407
4419
|
updateColorStyle(oldValue);
|
|
4408
4420
|
updateColorStyle(newValue);
|
|
@@ -4415,7 +4427,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4415
4427
|
}
|
|
4416
4428
|
};
|
|
4417
4429
|
if (!this.checkName(attrValue, newValue)) {
|
|
4418
|
-
console.error(
|
|
4430
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4419
4431
|
} else {
|
|
4420
4432
|
if (attrName === "direction") {
|
|
4421
4433
|
["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
|
|
@@ -4530,7 +4542,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4530
4542
|
icon.setAttribute("size", "s");
|
|
4531
4543
|
}
|
|
4532
4544
|
if (this.size === "small") {
|
|
4533
|
-
icon.setAttribute("size", "
|
|
4545
|
+
icon.setAttribute("size", "xs");
|
|
4534
4546
|
}
|
|
4535
4547
|
if (!iconColor) {
|
|
4536
4548
|
icon.setAttribute("color", "inherit");
|
|
@@ -4572,7 +4584,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4572
4584
|
}
|
|
4573
4585
|
updateSize(oldValue, newValue, attrValue) {
|
|
4574
4586
|
if (!this.checkName(attrValue, newValue)) {
|
|
4575
|
-
console.error(
|
|
4587
|
+
console.error(`${newValue} is not a valid size value`);
|
|
4576
4588
|
} else {
|
|
4577
4589
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4578
4590
|
this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
|
|
@@ -4584,7 +4596,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4584
4596
|
}
|
|
4585
4597
|
updateVariant(oldValue, newValue, attrValue) {
|
|
4586
4598
|
if (!this.checkName(attrValue, newValue)) {
|
|
4587
|
-
console.error(
|
|
4599
|
+
console.error(`${newValue} is not a valid variant value`);
|
|
4588
4600
|
} else {
|
|
4589
4601
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4590
4602
|
this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
|
|
@@ -4625,7 +4637,7 @@ if (!customElements.get("px-button-icon")) {
|
|
|
4625
4637
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4626
4638
|
}
|
|
4627
4639
|
const styleSheet$l = new CSSStyleSheet();
|
|
4628
|
-
styleSheet$l.replaceSync(styles$
|
|
4640
|
+
styleSheet$l.replaceSync(styles$y);
|
|
4629
4641
|
const _Tag = class _Tag extends PxElement {
|
|
4630
4642
|
template() {
|
|
4631
4643
|
return `
|
|
@@ -4700,9 +4712,9 @@ let Tag = _Tag;
|
|
|
4700
4712
|
if (!customElements.get("px-tag")) {
|
|
4701
4713
|
customElements.define("px-tag", Tag);
|
|
4702
4714
|
}
|
|
4703
|
-
const styles$
|
|
4715
|
+
const styles$s = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-default-mobile)}#tab-container{position:relative;width:100%}#tab-container>#previous{position:absolute;top:.75em;left:-1.5em}#tab-container>#next{position:absolute;top:.75em;right:-1.5em}#panels{width:100%}#tablist{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:100%;box-sizing:border-box}#tablist::-webkit-scrollbar{display:none}:host([inverted]) #tablist ::slotted(px-tab){background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-color-background-state-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-color-text-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-color-text-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-color-text-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-default-desktop)}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-default-desktop)}}';
|
|
4704
4716
|
const styleSheet$k = new CSSStyleSheet();
|
|
4705
|
-
styleSheet$k.replaceSync(styles$
|
|
4717
|
+
styleSheet$k.replaceSync(styles$s);
|
|
4706
4718
|
class Tabs extends HTMLElement {
|
|
4707
4719
|
constructor() {
|
|
4708
4720
|
var _a;
|
|
@@ -4904,9 +4916,9 @@ class Tabs extends HTMLElement {
|
|
|
4904
4916
|
return this.getAttribute("aria-label-previous");
|
|
4905
4917
|
}
|
|
4906
4918
|
}
|
|
4907
|
-
const styles$
|
|
4919
|
+
const styles$r = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-color-background-container-default-default)}:host(:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}:host(:last-of-type){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)}:host([inverted]) button{color:var(--px-color-text-neutral-inverted)}:host([inverted][selected]) button{color:var(--px-color-text-brand-default)}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}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}";
|
|
4908
4920
|
const styleSheet$j = new CSSStyleSheet();
|
|
4909
|
-
styleSheet$j.replaceSync(styles$
|
|
4921
|
+
styleSheet$j.replaceSync(styles$r);
|
|
4910
4922
|
class Tab extends HTMLElement {
|
|
4911
4923
|
constructor() {
|
|
4912
4924
|
var _a;
|
|
@@ -5084,15 +5096,15 @@ class PxTabPanel extends TabPanel {
|
|
|
5084
5096
|
if (!customElements.get("px-tab-panel")) {
|
|
5085
5097
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
5086
5098
|
}
|
|
5087
|
-
const styles$
|
|
5099
|
+
const styles$q = ".timeline{list-style:none;margin:0;padding:0}";
|
|
5088
5100
|
const styleSheet$i = new CSSStyleSheet();
|
|
5089
|
-
styleSheet$i.replaceSync(styles$
|
|
5101
|
+
styleSheet$i.replaceSync(styles$q);
|
|
5090
5102
|
class Timeline extends HTMLElement {
|
|
5091
5103
|
template() {
|
|
5092
5104
|
return `
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5105
|
+
<ol class="timeline" role="list">
|
|
5106
|
+
<slot></slot>
|
|
5107
|
+
</ol>
|
|
5096
5108
|
`;
|
|
5097
5109
|
}
|
|
5098
5110
|
constructor() {
|
|
@@ -5143,22 +5155,22 @@ class Timeline extends HTMLElement {
|
|
|
5143
5155
|
if (!customElements.get("px-timeline")) {
|
|
5144
5156
|
customElements.define("px-timeline", Timeline);
|
|
5145
5157
|
}
|
|
5146
|
-
const styles$
|
|
5158
|
+
const styles$p = '.timeline-item{display:flex;gap:var(--px-spacing-default-mobile);font-family:var(--px-font-family);line-height:var(--px-font-line-height-m)}.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{margin-bottom:var(--px-spacing-default-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);margin-top:var(--px-spacing-xs-mobile)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-spacing-default-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);margin-top:var(--px-spacing-xs-desktop)}}@media only screen and (min-width: 1025px){.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-spacing-default-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);margin-top:var(--px-spacing-xs-desktop)}}';
|
|
5147
5159
|
const styleSheet$h = new CSSStyleSheet();
|
|
5148
|
-
styleSheet$h.replaceSync(styles$
|
|
5160
|
+
styleSheet$h.replaceSync(styles$p);
|
|
5149
5161
|
let item = "1";
|
|
5150
5162
|
class TimelineItem extends HTMLElement {
|
|
5151
5163
|
template() {
|
|
5152
5164
|
return `
|
|
5153
|
-
|
|
5154
|
-
|
|
5155
|
-
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
|
|
5161
|
-
|
|
5165
|
+
<li class="timeline-item" role="listitem">
|
|
5166
|
+
<div class="indicator-area">
|
|
5167
|
+
<div class="indicator"></div>
|
|
5168
|
+
</div>
|
|
5169
|
+
<div class="content-area">
|
|
5170
|
+
<slot name="title"></slot>
|
|
5171
|
+
<slot name="content"></slot>
|
|
5172
|
+
</div>
|
|
5173
|
+
</li>
|
|
5162
5174
|
`;
|
|
5163
5175
|
}
|
|
5164
5176
|
constructor() {
|
|
@@ -5217,7 +5229,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5217
5229
|
if (!customElements.get("px-timeline-item")) {
|
|
5218
5230
|
customElements.define("px-timeline-item", TimelineItem);
|
|
5219
5231
|
}
|
|
5220
|
-
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:
|
|
5232
|
+
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-font-line-height-m);margin:0}.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 only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}";
|
|
5221
5233
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
5222
5234
|
const typographyStyles$4 = new CSSStyleSheet();
|
|
5223
5235
|
const headingStyles$1 = new CSSStyleSheet();
|
|
@@ -5288,16 +5300,14 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5288
5300
|
}
|
|
5289
5301
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
5290
5302
|
if (!this.checkName(attrValue, newValue)) {
|
|
5291
|
-
console.error(
|
|
5303
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
5292
5304
|
} else {
|
|
5293
5305
|
this.toggleClass(oldValue, newValue);
|
|
5294
5306
|
}
|
|
5295
5307
|
}
|
|
5296
5308
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
5297
5309
|
if (!this.checkName(attrValue, newValue)) {
|
|
5298
|
-
console.error(
|
|
5299
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
5300
|
-
);
|
|
5310
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
5301
5311
|
} else {
|
|
5302
5312
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
5303
5313
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -5388,9 +5398,9 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5388
5398
|
_Paragraph.nativeName = "p";
|
|
5389
5399
|
let Paragraph = _Paragraph;
|
|
5390
5400
|
customElements.define("px-p", Paragraph);
|
|
5391
|
-
const styles$
|
|
5401
|
+
const styles$o = "#container{width:1080px;display:block;border:0;border-radius:var(--px-radius-main);padding:var(--px-padding-m-desktop);background-color:var(--px-color-background-surface-default)}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}px-button-icon{position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:90vh;overflow:auto;padding:var(--px-padding-m-desktop)}@media screen and (max-width: 1081px){#container{width:inherit;padding:var(--px-padding-m-mobile)}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{padding:var(--px-padding-m-mobile)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}";
|
|
5392
5402
|
const styleSheet$g = new CSSStyleSheet();
|
|
5393
|
-
styleSheet$g.replaceSync(styles$
|
|
5403
|
+
styleSheet$g.replaceSync(styles$o);
|
|
5394
5404
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
5395
5405
|
class Modal extends HTMLElement {
|
|
5396
5406
|
constructor() {
|
|
@@ -5405,7 +5415,7 @@ class Modal extends HTMLElement {
|
|
|
5405
5415
|
<px-h1 variant="title-l">
|
|
5406
5416
|
<slot name="title"></slot>
|
|
5407
5417
|
</px-h1>
|
|
5408
|
-
<px-p font-weight="
|
|
5418
|
+
<px-p font-weight="title">
|
|
5409
5419
|
<slot name="description"></slot>
|
|
5410
5420
|
</px-p>
|
|
5411
5421
|
</px-vstack>
|
|
@@ -5604,9 +5614,7 @@ const _Span = class _Span extends PxElement {
|
|
|
5604
5614
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5605
5615
|
}
|
|
5606
5616
|
if (!this.checkName(attrValue, newValue)) {
|
|
5607
|
-
console.error(
|
|
5608
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
5609
|
-
);
|
|
5617
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
5610
5618
|
}
|
|
5611
5619
|
}
|
|
5612
5620
|
get color() {
|
|
@@ -5681,7 +5689,8 @@ const _Link = class _Link extends PxElement {
|
|
|
5681
5689
|
"inverted",
|
|
5682
5690
|
"font-size",
|
|
5683
5691
|
"color",
|
|
5684
|
-
"font-weight"
|
|
5692
|
+
"font-weight",
|
|
5693
|
+
"title"
|
|
5685
5694
|
];
|
|
5686
5695
|
}
|
|
5687
5696
|
connectedCallback() {
|
|
@@ -5692,7 +5701,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5692
5701
|
if (this.$after && this.$after.localName === "px-icon") {
|
|
5693
5702
|
this.configureBeforeAfterIcon(this.$after);
|
|
5694
5703
|
}
|
|
5695
|
-
transferAccessibilityAttributes(this, this.$el);
|
|
5704
|
+
transferAccessibilityAttributes(this, this.$el, false);
|
|
5696
5705
|
}
|
|
5697
5706
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5698
5707
|
if (oldValue !== newValue) {
|
|
@@ -5721,6 +5730,12 @@ const _Link = class _Link extends PxElement {
|
|
|
5721
5730
|
case "font-weight":
|
|
5722
5731
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5723
5732
|
break;
|
|
5733
|
+
case "title":
|
|
5734
|
+
if (newValue) {
|
|
5735
|
+
this.$el.setAttribute("title", newValue);
|
|
5736
|
+
this.removeAttribute("title");
|
|
5737
|
+
}
|
|
5738
|
+
break;
|
|
5724
5739
|
default:
|
|
5725
5740
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5726
5741
|
break;
|
|
@@ -5734,7 +5749,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5734
5749
|
this.$el.focus();
|
|
5735
5750
|
});
|
|
5736
5751
|
if (!iconSize) {
|
|
5737
|
-
icon.setAttribute("size", "
|
|
5752
|
+
icon.setAttribute("size", "xs");
|
|
5738
5753
|
}
|
|
5739
5754
|
if (!iconColor) {
|
|
5740
5755
|
icon.setAttribute("color", "inherit");
|
|
@@ -5761,7 +5776,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5761
5776
|
this._toggleClassList(newValue);
|
|
5762
5777
|
}
|
|
5763
5778
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
5764
|
-
console.error(`Bad "variant" value for ${
|
|
5779
|
+
console.error(`Bad "variant" value for ${newValue}`);
|
|
5765
5780
|
}
|
|
5766
5781
|
if (newValue === "icon-link") {
|
|
5767
5782
|
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
@@ -5775,7 +5790,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5775
5790
|
this._toggleClassList(newValue);
|
|
5776
5791
|
}
|
|
5777
5792
|
if (!this.checkName(linkShapeValues, newValue)) {
|
|
5778
|
-
console.error(
|
|
5793
|
+
console.error(`${newValue} is not a valid "shape" value`);
|
|
5779
5794
|
}
|
|
5780
5795
|
}
|
|
5781
5796
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
@@ -5786,7 +5801,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5786
5801
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5787
5802
|
}
|
|
5788
5803
|
if (!this.checkName(attrValue, newValue)) {
|
|
5789
|
-
console.error(`Bad ${attrName} value
|
|
5804
|
+
console.error(`Bad ${attrName} value: ${newValue}`);
|
|
5790
5805
|
}
|
|
5791
5806
|
}
|
|
5792
5807
|
get $before() {
|
|
@@ -5848,13 +5863,23 @@ const _Link = class _Link extends PxElement {
|
|
|
5848
5863
|
set fontweight(value) {
|
|
5849
5864
|
this.setAttribute("font-weight", value);
|
|
5850
5865
|
}
|
|
5866
|
+
get title() {
|
|
5867
|
+
return this.getAttribute("title");
|
|
5868
|
+
}
|
|
5869
|
+
set title(value) {
|
|
5870
|
+
if (value) {
|
|
5871
|
+
this.setAttribute("title", value);
|
|
5872
|
+
} else {
|
|
5873
|
+
this.removeAttribute("title");
|
|
5874
|
+
}
|
|
5875
|
+
}
|
|
5851
5876
|
};
|
|
5852
5877
|
_Link.nativeName = "a";
|
|
5853
5878
|
let Link = _Link;
|
|
5854
5879
|
if (!customElements.get("px-a")) {
|
|
5855
5880
|
customElements.define("px-a", Link);
|
|
5856
5881
|
}
|
|
5857
|
-
const typographyCss = "*{font-family:var(--px-font-family);font-weight:
|
|
5882
|
+
const typographyCss = "*{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-default-desktop);padding:0}::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}:host([inverted]) slot{color:var(--px-color-text-neutral-inverted)}";
|
|
5858
5883
|
const lightStyles = ".li{padding-bottom:var(--px-padding-xs-desktop)}";
|
|
5859
5884
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
5860
5885
|
const headingStyles = new CSSStyleSheet();
|
|
@@ -5897,150 +5922,10 @@ class Typography extends HTMLElement {
|
|
|
5897
5922
|
}
|
|
5898
5923
|
}
|
|
5899
5924
|
customElements.define("px-typography", Typography);
|
|
5900
|
-
const
|
|
5901
|
-
const entrypointStyles = new CSSStyleSheet();
|
|
5902
|
-
entrypointStyles.replaceSync(entrypointCss);
|
|
5903
|
-
const backgroundValues = [
|
|
5904
|
-
"",
|
|
5905
|
-
"default",
|
|
5906
|
-
"container-light",
|
|
5907
|
-
"container-default"
|
|
5908
|
-
];
|
|
5909
|
-
const _Entrypoint = class _Entrypoint extends PxElement {
|
|
5910
|
-
constructor() {
|
|
5911
|
-
super(entrypointStyles);
|
|
5912
|
-
this.template = () => `
|
|
5913
|
-
<px-hstack gap="s" align-items="center">
|
|
5914
|
-
<px-hstack grow="2" gap="s" align-items="center">
|
|
5915
|
-
<slot name="icon"></slot>
|
|
5916
|
-
<px-vstack gap="none" align-items="flex-start">
|
|
5917
|
-
<slot></slot>
|
|
5918
|
-
<slot name="description"></slot>
|
|
5919
|
-
</px-vstack>
|
|
5920
|
-
</px-hstack>
|
|
5921
|
-
<px-icon name="${this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"}" size="m" from="lavender" color="inherit" shrink="1"></px-icon>
|
|
5922
|
-
</px-hstack>
|
|
5923
|
-
`;
|
|
5924
|
-
const $root = document.createElement(this.nativeName);
|
|
5925
|
-
$root.innerHTML = this.template();
|
|
5926
|
-
this.shadowRoot.appendChild($root);
|
|
5927
|
-
}
|
|
5928
|
-
static get observedAttributes() {
|
|
5929
|
-
return [
|
|
5930
|
-
...super.observedAttributes,
|
|
5931
|
-
"disabled",
|
|
5932
|
-
"inverted",
|
|
5933
|
-
"background-color"
|
|
5934
|
-
];
|
|
5935
|
-
}
|
|
5936
|
-
connectedCallback() {
|
|
5937
|
-
super.connectedCallback();
|
|
5938
|
-
const icons = this.querySelectorAll("px-icon");
|
|
5939
|
-
if (icons) {
|
|
5940
|
-
icons.forEach((icon) => {
|
|
5941
|
-
const iconSize = icon.getAttribute("size");
|
|
5942
|
-
const iconColor = icon.getAttribute("color");
|
|
5943
|
-
if (icon) {
|
|
5944
|
-
icon.addEventListener("click", () => {
|
|
5945
|
-
this.$el.focus();
|
|
5946
|
-
});
|
|
5947
|
-
if (!iconSize) {
|
|
5948
|
-
icon.setAttribute("size", "m");
|
|
5949
|
-
}
|
|
5950
|
-
if (!iconColor) {
|
|
5951
|
-
icon.setAttribute("color", "inherit");
|
|
5952
|
-
}
|
|
5953
|
-
}
|
|
5954
|
-
});
|
|
5955
|
-
}
|
|
5956
|
-
}
|
|
5957
|
-
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5958
|
-
if (oldValue !== newValue) {
|
|
5959
|
-
switch (attrName) {
|
|
5960
|
-
case "disabled":
|
|
5961
|
-
this.$el.toggleAttribute("aria-disabled");
|
|
5962
|
-
if (newValue !== null) {
|
|
5963
|
-
this.$el.setAttribute("aria-disabled", "true");
|
|
5964
|
-
break;
|
|
5965
|
-
}
|
|
5966
|
-
break;
|
|
5967
|
-
case "target":
|
|
5968
|
-
this.updateIconName();
|
|
5969
|
-
break;
|
|
5970
|
-
case "background-color":
|
|
5971
|
-
this.updateBackgroundColor(
|
|
5972
|
-
attrName,
|
|
5973
|
-
oldValue,
|
|
5974
|
-
newValue,
|
|
5975
|
-
backgroundValues
|
|
5976
|
-
);
|
|
5977
|
-
break;
|
|
5978
|
-
default:
|
|
5979
|
-
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5980
|
-
break;
|
|
5981
|
-
}
|
|
5982
|
-
}
|
|
5983
|
-
}
|
|
5984
|
-
checkName(values, value) {
|
|
5985
|
-
return values.includes(value);
|
|
5986
|
-
}
|
|
5987
|
-
updateIconName() {
|
|
5988
|
-
const icon = this.shadowRoot.querySelector("px-icon");
|
|
5989
|
-
if (icon) {
|
|
5990
|
-
icon.setAttribute(
|
|
5991
|
-
"name",
|
|
5992
|
-
this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"
|
|
5993
|
-
);
|
|
5994
|
-
}
|
|
5995
|
-
}
|
|
5996
|
-
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
5997
|
-
if (!this.checkName(attrValue, newValue)) {
|
|
5998
|
-
console.error(`Bad "${attrName}" value for`, this.$el);
|
|
5999
|
-
return;
|
|
6000
|
-
}
|
|
6001
|
-
const updateColorStyle = (value) => {
|
|
6002
|
-
if (value !== null && value !== "" && value !== "default") {
|
|
6003
|
-
this.$el.style.setProperty(
|
|
6004
|
-
`--entrypoint-background-color-default`,
|
|
6005
|
-
`var(--px-color-background-${value}-default)`
|
|
6006
|
-
);
|
|
6007
|
-
this.$el.style.setProperty(
|
|
6008
|
-
`--entrypoint-background-color-inverted`,
|
|
6009
|
-
`var(--px-color-background-${value}-inverted)`
|
|
6010
|
-
);
|
|
6011
|
-
}
|
|
6012
|
-
};
|
|
6013
|
-
updateColorStyle(oldValue);
|
|
6014
|
-
updateColorStyle(newValue);
|
|
6015
|
-
}
|
|
6016
|
-
get disabled() {
|
|
6017
|
-
return this.getAttribute("disabled");
|
|
6018
|
-
}
|
|
6019
|
-
set disabled(value) {
|
|
6020
|
-
this.setAttribute("disabled", value);
|
|
6021
|
-
}
|
|
6022
|
-
get backgroundColor() {
|
|
6023
|
-
return this.getAttribute("background-color");
|
|
6024
|
-
}
|
|
6025
|
-
set backgroundColor(value) {
|
|
6026
|
-
this.setAttribute("background-color", value);
|
|
6027
|
-
}
|
|
6028
|
-
get inverted() {
|
|
6029
|
-
return this.getAttribute("inverted");
|
|
6030
|
-
}
|
|
6031
|
-
set inverted(value) {
|
|
6032
|
-
this.setAttribute("inverted", value);
|
|
6033
|
-
}
|
|
6034
|
-
};
|
|
6035
|
-
_Entrypoint.nativeName = "a";
|
|
6036
|
-
let Entrypoint = _Entrypoint;
|
|
6037
|
-
if (!customElements.get("px-entrypoint")) {
|
|
6038
|
-
customElements.define("px-entrypoint", Entrypoint);
|
|
6039
|
-
}
|
|
6040
|
-
const styles$l = ".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-2xs,.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,.size-2xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-2xs,.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,.size-2xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-2xs,.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,.size-2xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}";
|
|
5925
|
+
const styles$n = ".spinner{display:inline-block;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);border-top:3px solid var(--px-color-text-brand-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-text-brand-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}";
|
|
6041
5926
|
const styleSheet$f = new CSSStyleSheet();
|
|
6042
5927
|
const typographyStyles = new CSSStyleSheet();
|
|
6043
|
-
styleSheet$f.replaceSync(styles$
|
|
5928
|
+
styleSheet$f.replaceSync(styles$n);
|
|
6044
5929
|
typographyStyles.replaceSync(typographyCss$1);
|
|
6045
5930
|
class Spinner extends HTMLElement {
|
|
6046
5931
|
template() {
|
|
@@ -6091,9 +5976,7 @@ class Spinner extends HTMLElement {
|
|
|
6091
5976
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
6092
5977
|
}
|
|
6093
5978
|
if (!this.checkName(attrValues, newValue)) {
|
|
6094
|
-
console.error(
|
|
6095
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
6096
|
-
);
|
|
5979
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
6097
5980
|
}
|
|
6098
5981
|
}
|
|
6099
5982
|
checkName(values, value) {
|
|
@@ -6175,9 +6058,7 @@ function configureCellBackgroundColor(el) {
|
|
|
6175
6058
|
}
|
|
6176
6059
|
function updateVariant(element, oldValue, newValue) {
|
|
6177
6060
|
if (!checkName(cellVariantValues, newValue)) {
|
|
6178
|
-
console.error(
|
|
6179
|
-
`${newValue} is not an allowed variant value for ${element}.`
|
|
6180
|
-
);
|
|
6061
|
+
console.error(`${newValue} is not an allowed variant value.`);
|
|
6181
6062
|
return;
|
|
6182
6063
|
}
|
|
6183
6064
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -6208,7 +6089,7 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
6208
6089
|
}
|
|
6209
6090
|
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
6210
6091
|
if (!checkName(attrValue, newValue)) {
|
|
6211
|
-
console.error(`${newValue} is not an allowed ${attrName} value
|
|
6092
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
6212
6093
|
return;
|
|
6213
6094
|
}
|
|
6214
6095
|
const updateColorStyle = (value) => {
|
|
@@ -6258,11 +6139,11 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6258
6139
|
}
|
|
6259
6140
|
}
|
|
6260
6141
|
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{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}";
|
|
6261
|
-
const styles$
|
|
6142
|
+
const styles$m = ':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{font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile)}.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}: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-surface-light) )}: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-border-state-hover-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-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]) .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)}';
|
|
6262
6143
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6263
6144
|
const styleSheet$e = new CSSStyleSheet();
|
|
6264
6145
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6265
|
-
styleSheet$e.replaceSync(styles$
|
|
6146
|
+
styleSheet$e.replaceSync(styles$m);
|
|
6266
6147
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
6267
6148
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
6268
6149
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -6331,11 +6212,15 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6331
6212
|
"variant",
|
|
6332
6213
|
"disabled",
|
|
6333
6214
|
"separator",
|
|
6215
|
+
"separator--mobile",
|
|
6334
6216
|
"separator--tablet",
|
|
6335
6217
|
"separator--laptop",
|
|
6218
|
+
"separator--desktop",
|
|
6336
6219
|
"radius",
|
|
6220
|
+
"radius--mobile",
|
|
6337
6221
|
"radius--tablet",
|
|
6338
6222
|
"radius--laptop",
|
|
6223
|
+
"radius--desktop",
|
|
6339
6224
|
"background-color"
|
|
6340
6225
|
];
|
|
6341
6226
|
}
|
|
@@ -6355,15 +6240,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6355
6240
|
}
|
|
6356
6241
|
break;
|
|
6357
6242
|
case "radius":
|
|
6243
|
+
case "radius--mobile":
|
|
6358
6244
|
case "radius--tablet":
|
|
6359
6245
|
case "radius--laptop":
|
|
6246
|
+
case "radius--desktop":
|
|
6360
6247
|
this.updateRadius(attrName, oldValue, newValue, radiusValues);
|
|
6361
6248
|
break;
|
|
6362
|
-
case "separator":
|
|
6363
|
-
case "separator--tablet":
|
|
6364
|
-
case "separator--laptop":
|
|
6365
|
-
this.configureSeparator(attrName);
|
|
6366
|
-
break;
|
|
6367
6249
|
case "background-color":
|
|
6368
6250
|
updateBackgroundColor(
|
|
6369
6251
|
this.$el,
|
|
@@ -6400,18 +6282,24 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6400
6282
|
}
|
|
6401
6283
|
updateRadius(attrName, oldValue, newValue, attrValues) {
|
|
6402
6284
|
if (!checkName(attrValues, newValue)) {
|
|
6403
|
-
console.error(
|
|
6285
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
6404
6286
|
return;
|
|
6405
6287
|
}
|
|
6406
6288
|
const hasBreakpoint = attrName.includes("--");
|
|
6407
|
-
const breakpoints = [
|
|
6289
|
+
const breakpoints = [];
|
|
6408
6290
|
if (!hasBreakpoint) {
|
|
6291
|
+
if (!this.separatorMobile) {
|
|
6292
|
+
breakpoints.push("mobile");
|
|
6293
|
+
}
|
|
6409
6294
|
if (!this.separatorTablet) {
|
|
6410
6295
|
breakpoints.push("tablet");
|
|
6411
6296
|
}
|
|
6412
6297
|
if (!this.separatorLaptop) {
|
|
6413
6298
|
breakpoints.push("laptop");
|
|
6414
6299
|
}
|
|
6300
|
+
if (!this.separatorDesktop) {
|
|
6301
|
+
breakpoints.push("desktop");
|
|
6302
|
+
}
|
|
6415
6303
|
} else {
|
|
6416
6304
|
const breakpoint = attrName.split("--")[1];
|
|
6417
6305
|
breakpoints.push(breakpoint);
|
|
@@ -6434,6 +6322,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6434
6322
|
} else if (value === "none") {
|
|
6435
6323
|
sides = ["top-right", "bottom-right", "bottom-left", "top-left"];
|
|
6436
6324
|
}
|
|
6325
|
+
console.log(sides);
|
|
6437
6326
|
sides.forEach((side) => {
|
|
6438
6327
|
this.$el.style.setProperty(
|
|
6439
6328
|
`--cell-contained-border-radius-${side}--${breakpoint}`,
|
|
@@ -6441,24 +6330,6 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6441
6330
|
);
|
|
6442
6331
|
});
|
|
6443
6332
|
}
|
|
6444
|
-
configureSeparator(attrName) {
|
|
6445
|
-
const hasBreakpoint = attrName.includes("--");
|
|
6446
|
-
const breakpoints = ["mobile"];
|
|
6447
|
-
if (!hasBreakpoint) {
|
|
6448
|
-
if (!this.separatorTablet) {
|
|
6449
|
-
breakpoints.push("tablet");
|
|
6450
|
-
}
|
|
6451
|
-
if (!this.separatorLaptop) {
|
|
6452
|
-
breakpoints.push("laptop");
|
|
6453
|
-
}
|
|
6454
|
-
} else {
|
|
6455
|
-
const breakpoint = attrName.split("--")[1];
|
|
6456
|
-
breakpoints.push(breakpoint);
|
|
6457
|
-
}
|
|
6458
|
-
breakpoints.forEach((breakpoint) => {
|
|
6459
|
-
this.style.setProperty(`--cell-separator--${breakpoint}`, "block");
|
|
6460
|
-
});
|
|
6461
|
-
}
|
|
6462
6333
|
get $children() {
|
|
6463
6334
|
return this.querySelectorAll("px-cell > *");
|
|
6464
6335
|
}
|
|
@@ -6503,6 +6374,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6503
6374
|
set separator(value) {
|
|
6504
6375
|
this.setAttribute("separator", value);
|
|
6505
6376
|
}
|
|
6377
|
+
get separatorMobile() {
|
|
6378
|
+
return this.getAttribute("separator--mobile");
|
|
6379
|
+
}
|
|
6380
|
+
set separatorMobile(value) {
|
|
6381
|
+
this.setAttribute("separator--mobile", value);
|
|
6382
|
+
}
|
|
6506
6383
|
get separatorTablet() {
|
|
6507
6384
|
return this.getAttribute("separator--tablet");
|
|
6508
6385
|
}
|
|
@@ -6515,12 +6392,24 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6515
6392
|
set separatorLaptop(value) {
|
|
6516
6393
|
this.setAttribute("separator--laptop", value);
|
|
6517
6394
|
}
|
|
6395
|
+
get separatorDesktop() {
|
|
6396
|
+
return this.getAttribute("separator--desktop");
|
|
6397
|
+
}
|
|
6398
|
+
set separatorDesktop(value) {
|
|
6399
|
+
this.setAttribute("separator--desktop", value);
|
|
6400
|
+
}
|
|
6518
6401
|
get radius() {
|
|
6519
6402
|
return this.getAttribute("radius");
|
|
6520
6403
|
}
|
|
6521
6404
|
set radius(value) {
|
|
6522
6405
|
this.setAttribute("radius", value);
|
|
6523
6406
|
}
|
|
6407
|
+
get radiusMobile() {
|
|
6408
|
+
return this.getAttribute("radius--mobile");
|
|
6409
|
+
}
|
|
6410
|
+
set radiusMobile(value) {
|
|
6411
|
+
this.setAttribute("radius--mobile", value);
|
|
6412
|
+
}
|
|
6524
6413
|
get radiusTablet() {
|
|
6525
6414
|
return this.getAttribute("radius--tablet");
|
|
6526
6415
|
}
|
|
@@ -6533,6 +6422,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6533
6422
|
set radiusLaptop(value) {
|
|
6534
6423
|
this.setAttribute("radius--laptop", value);
|
|
6535
6424
|
}
|
|
6425
|
+
get radiusDesktop() {
|
|
6426
|
+
return this.getAttribute("radius--desktop");
|
|
6427
|
+
}
|
|
6428
|
+
set radiusDesktop(value) {
|
|
6429
|
+
this.setAttribute("radius--desktop", value);
|
|
6430
|
+
}
|
|
6536
6431
|
get backgroundColor() {
|
|
6537
6432
|
return this.getAttribute("background-color");
|
|
6538
6433
|
}
|
|
@@ -6549,11 +6444,11 @@ let Cell = _Cell;
|
|
|
6549
6444
|
if (!customElements.get("px-cell")) {
|
|
6550
6445
|
customElements.define("px-cell", Cell);
|
|
6551
6446
|
}
|
|
6552
|
-
const styles$
|
|
6447
|
+
const styles$l = '.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)}: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)}';
|
|
6553
6448
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6554
6449
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6555
6450
|
const styleSheet$d = new CSSStyleSheet();
|
|
6556
|
-
styleSheet$d.replaceSync(styles$
|
|
6451
|
+
styleSheet$d.replaceSync(styles$l);
|
|
6557
6452
|
const _CellLink = class _CellLink extends PxElement {
|
|
6558
6453
|
template() {
|
|
6559
6454
|
return `
|
|
@@ -6566,7 +6461,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6566
6461
|
name="chevron_right"
|
|
6567
6462
|
slot="action-indicator"
|
|
6568
6463
|
from="lavender"
|
|
6569
|
-
size="
|
|
6464
|
+
size="m"
|
|
6570
6465
|
color="inherit"
|
|
6571
6466
|
></px-icon>
|
|
6572
6467
|
</px-cell>
|
|
@@ -6608,11 +6503,15 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6608
6503
|
"variant",
|
|
6609
6504
|
"disabled",
|
|
6610
6505
|
"separator",
|
|
6506
|
+
"separator--mobile",
|
|
6611
6507
|
"separator--tablet",
|
|
6612
6508
|
"separator--laptop",
|
|
6509
|
+
"separator--desktop",
|
|
6613
6510
|
"radius",
|
|
6511
|
+
"radius--mobile",
|
|
6614
6512
|
"radius--tablet",
|
|
6615
6513
|
"radius--laptop",
|
|
6514
|
+
"radius--desktop",
|
|
6616
6515
|
"target-blank-aria-label",
|
|
6617
6516
|
"background-color",
|
|
6618
6517
|
"noicon"
|
|
@@ -6637,11 +6536,15 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6637
6536
|
});
|
|
6638
6537
|
break;
|
|
6639
6538
|
case "radius":
|
|
6539
|
+
case "radius--mobile":
|
|
6640
6540
|
case "radius--tablet":
|
|
6641
6541
|
case "radius--laptop":
|
|
6542
|
+
case "radius--desktop":
|
|
6642
6543
|
case "separator":
|
|
6544
|
+
case "separator--mobile":
|
|
6643
6545
|
case "separator--tablet":
|
|
6644
6546
|
case "separator--laptop":
|
|
6547
|
+
case "separator--desktop":
|
|
6645
6548
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
6646
6549
|
break;
|
|
6647
6550
|
case "target-blank-aria-label":
|
|
@@ -6711,6 +6614,12 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6711
6614
|
set separator(value) {
|
|
6712
6615
|
this.setAttribute("separator", value);
|
|
6713
6616
|
}
|
|
6617
|
+
get separatorMobile() {
|
|
6618
|
+
return this.getAttribute("separator--mobile");
|
|
6619
|
+
}
|
|
6620
|
+
set separatorMobile(value) {
|
|
6621
|
+
this.setAttribute("separator--mobile", value);
|
|
6622
|
+
}
|
|
6714
6623
|
get separatorTablet() {
|
|
6715
6624
|
return this.getAttribute("separator--tablet");
|
|
6716
6625
|
}
|
|
@@ -6723,12 +6632,24 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6723
6632
|
set separatorLaptop(value) {
|
|
6724
6633
|
this.setAttribute("separator--laptop", value);
|
|
6725
6634
|
}
|
|
6635
|
+
get separatorDesktop() {
|
|
6636
|
+
return this.getAttribute("separator--desktop");
|
|
6637
|
+
}
|
|
6638
|
+
set separatorDesktop(value) {
|
|
6639
|
+
this.setAttribute("separator--desktop", value);
|
|
6640
|
+
}
|
|
6726
6641
|
get radius() {
|
|
6727
6642
|
return this.getAttribute("radius");
|
|
6728
6643
|
}
|
|
6729
6644
|
set radius(value) {
|
|
6730
6645
|
this.setAttribute("radius", value);
|
|
6731
6646
|
}
|
|
6647
|
+
get radiusMobile() {
|
|
6648
|
+
return this.getAttribute("radius--mobile");
|
|
6649
|
+
}
|
|
6650
|
+
set radiusMobile(value) {
|
|
6651
|
+
this.setAttribute("radius--mobile", value);
|
|
6652
|
+
}
|
|
6732
6653
|
get radiusTablet() {
|
|
6733
6654
|
return this.getAttribute("radius--tablet");
|
|
6734
6655
|
}
|
|
@@ -6741,6 +6662,12 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6741
6662
|
set radiusLaptop(value) {
|
|
6742
6663
|
this.setAttribute("radius--laptop", value);
|
|
6743
6664
|
}
|
|
6665
|
+
get radiusDesktop() {
|
|
6666
|
+
return this.getAttribute("radius--desktop");
|
|
6667
|
+
}
|
|
6668
|
+
set radiusDesktop(value) {
|
|
6669
|
+
this.setAttribute("radius--desktop", value);
|
|
6670
|
+
}
|
|
6744
6671
|
get targetBlankAriaLabel() {
|
|
6745
6672
|
return this.getAttribute("target-blank-aria-label");
|
|
6746
6673
|
}
|
|
@@ -6763,7 +6690,7 @@ let CellLink = _CellLink;
|
|
|
6763
6690
|
if (!customElements.get("px-cell-link")) {
|
|
6764
6691
|
customElements.define("px-cell-link", CellLink);
|
|
6765
6692
|
}
|
|
6766
|
-
const checkboxCss = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.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-font-line-height-m) * 1em);font-weight:400;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([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none);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(: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%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([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([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([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),: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([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){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([checked]) :is(:host([disabled]) :is(:host([inverted]) :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='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([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){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(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){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(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),: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{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);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)}: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);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)}: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)}: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);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)}: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: 768px){.checkbox{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: 1025px){.checkbox{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)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
6693
|
+
const checkboxCss = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.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-font-line-height-m) * 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;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([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none);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(: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%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([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([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([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-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(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),: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([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){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([checked]) :is(:host([disabled]) :is(:host([inverted]) :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='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([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){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(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){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(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),: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{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);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)}: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);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)}: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)}: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);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)}: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: 768px){.checkbox{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: 1025px){.checkbox{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)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
6767
6694
|
const checkboxStyles = new CSSStyleSheet();
|
|
6768
6695
|
checkboxStyles.replaceSync(checkboxCss);
|
|
6769
6696
|
const checkboxVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -6853,10 +6780,7 @@ const _Checkbox = class _Checkbox extends PxElement {
|
|
|
6853
6780
|
updateAttribute(oldValue, newValue, attrValue, attrName) {
|
|
6854
6781
|
var _a, _b;
|
|
6855
6782
|
if (!this.checkName(attrValue, newValue)) {
|
|
6856
|
-
console.error(
|
|
6857
|
-
`${newValue} is not a valid ${attrName} value for`,
|
|
6858
|
-
this.$el
|
|
6859
|
-
);
|
|
6783
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
6860
6784
|
return;
|
|
6861
6785
|
}
|
|
6862
6786
|
if (oldValue !== null) {
|
|
@@ -7013,11 +6937,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7013
6937
|
"variant",
|
|
7014
6938
|
"disabled",
|
|
7015
6939
|
"separator",
|
|
6940
|
+
"separator--mobile",
|
|
7016
6941
|
"separator--tablet",
|
|
7017
6942
|
"separator--laptop",
|
|
6943
|
+
"separator--desktop",
|
|
7018
6944
|
"radius",
|
|
6945
|
+
"radius--mobile",
|
|
7019
6946
|
"radius--tablet",
|
|
7020
6947
|
"radius--laptop",
|
|
6948
|
+
"radius--desktop",
|
|
7021
6949
|
"name",
|
|
7022
6950
|
"value",
|
|
7023
6951
|
"state",
|
|
@@ -7041,11 +6969,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7041
6969
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
7042
6970
|
break;
|
|
7043
6971
|
case "radius":
|
|
6972
|
+
case "radius--mobile":
|
|
7044
6973
|
case "radius--tablet":
|
|
7045
6974
|
case "radius--laptop":
|
|
6975
|
+
case "radius--desktop":
|
|
7046
6976
|
case "separator":
|
|
6977
|
+
case "separator--mobile":
|
|
7047
6978
|
case "separator--tablet":
|
|
7048
6979
|
case "separator--laptop":
|
|
6980
|
+
case "separator--desktop":
|
|
7049
6981
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
7050
6982
|
break;
|
|
7051
6983
|
case "name":
|
|
@@ -7057,7 +6989,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7057
6989
|
case "state":
|
|
7058
6990
|
if (this.$checkbox) {
|
|
7059
6991
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
7060
|
-
console.error(`${newValue} is not a valid state value
|
|
6992
|
+
console.error(`${newValue} is not a valid state value`);
|
|
7061
6993
|
return;
|
|
7062
6994
|
} else {
|
|
7063
6995
|
this.$checkbox.setAttribute("state", newValue);
|
|
@@ -7139,7 +7071,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7139
7071
|
}
|
|
7140
7072
|
handleCheckboxPositionChange(newValue) {
|
|
7141
7073
|
if (!this.checkName(cellCheckboxPosition, newValue)) {
|
|
7142
|
-
console.error(`${newValue} is not a valid position value
|
|
7074
|
+
console.error(`${newValue} is not a valid position value`);
|
|
7143
7075
|
return;
|
|
7144
7076
|
}
|
|
7145
7077
|
if (this.$checkbox) {
|
|
@@ -7222,6 +7154,12 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7222
7154
|
set separator(value) {
|
|
7223
7155
|
this.setAttribute("separator", value);
|
|
7224
7156
|
}
|
|
7157
|
+
get separatorMobile() {
|
|
7158
|
+
return this.getAttribute("separator--mobile");
|
|
7159
|
+
}
|
|
7160
|
+
set separatorMobile(value) {
|
|
7161
|
+
this.setAttribute("separator--mobile", value);
|
|
7162
|
+
}
|
|
7225
7163
|
get separatorTablet() {
|
|
7226
7164
|
return this.getAttribute("separator--tablet");
|
|
7227
7165
|
}
|
|
@@ -7234,12 +7172,24 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7234
7172
|
set separatorLaptop(value) {
|
|
7235
7173
|
this.setAttribute("separator--laptop", value);
|
|
7236
7174
|
}
|
|
7175
|
+
get separatorDesktop() {
|
|
7176
|
+
return this.getAttribute("separator--desktop");
|
|
7177
|
+
}
|
|
7178
|
+
set separatorDesktop(value) {
|
|
7179
|
+
this.setAttribute("separator--desktop", value);
|
|
7180
|
+
}
|
|
7237
7181
|
get radius() {
|
|
7238
7182
|
return this.getAttribute("radius");
|
|
7239
7183
|
}
|
|
7240
7184
|
set radius(value) {
|
|
7241
7185
|
this.setAttribute("radius", value);
|
|
7242
7186
|
}
|
|
7187
|
+
get radiusMobile() {
|
|
7188
|
+
return this.getAttribute("radius--mobile");
|
|
7189
|
+
}
|
|
7190
|
+
set radiusMobile(value) {
|
|
7191
|
+
this.setAttribute("radius--mobile", value);
|
|
7192
|
+
}
|
|
7243
7193
|
get radiusTablet() {
|
|
7244
7194
|
return this.getAttribute("radius--tablet");
|
|
7245
7195
|
}
|
|
@@ -7252,6 +7202,12 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7252
7202
|
set radiusLaptop(value) {
|
|
7253
7203
|
this.setAttribute("radius--laptop", value);
|
|
7254
7204
|
}
|
|
7205
|
+
get radiusDesktop() {
|
|
7206
|
+
return this.getAttribute("radius--desktop");
|
|
7207
|
+
}
|
|
7208
|
+
set radiusDesktop(value) {
|
|
7209
|
+
this.setAttribute("radius--desktop", value);
|
|
7210
|
+
}
|
|
7255
7211
|
get checked() {
|
|
7256
7212
|
return this.hasAttribute("checked");
|
|
7257
7213
|
}
|
|
@@ -7384,11 +7340,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7384
7340
|
"variant",
|
|
7385
7341
|
"disabled",
|
|
7386
7342
|
"separator",
|
|
7343
|
+
"separator--mobile",
|
|
7387
7344
|
"separator--tablet",
|
|
7388
7345
|
"separator--laptop",
|
|
7346
|
+
"separator--desktop",
|
|
7389
7347
|
"radius",
|
|
7348
|
+
"radius--mobile",
|
|
7390
7349
|
"radius--tablet",
|
|
7391
7350
|
"radius--laptop",
|
|
7351
|
+
"radius--desktop",
|
|
7392
7352
|
"name",
|
|
7393
7353
|
"value",
|
|
7394
7354
|
"checked",
|
|
@@ -7410,11 +7370,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7410
7370
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
7411
7371
|
break;
|
|
7412
7372
|
case "radius":
|
|
7373
|
+
case "radius--mobile":
|
|
7413
7374
|
case "radius--tablet":
|
|
7414
7375
|
case "radius--laptop":
|
|
7376
|
+
case "radius--desktop":
|
|
7415
7377
|
case "separator":
|
|
7378
|
+
case "separator--mobile":
|
|
7416
7379
|
case "separator--tablet":
|
|
7417
7380
|
case "separator--laptop":
|
|
7381
|
+
case "separator--desktop":
|
|
7418
7382
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
7419
7383
|
break;
|
|
7420
7384
|
case "name":
|
|
@@ -7565,6 +7529,12 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7565
7529
|
set separator(value) {
|
|
7566
7530
|
this.setAttribute("separator", value);
|
|
7567
7531
|
}
|
|
7532
|
+
get separatorMobile() {
|
|
7533
|
+
return this.getAttribute("separator--mobile");
|
|
7534
|
+
}
|
|
7535
|
+
set separatorMobile(value) {
|
|
7536
|
+
this.setAttribute("separator--mobile", value);
|
|
7537
|
+
}
|
|
7568
7538
|
get separatorTablet() {
|
|
7569
7539
|
return this.getAttribute("separator--tablet");
|
|
7570
7540
|
}
|
|
@@ -7577,12 +7547,24 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7577
7547
|
set separatorLaptop(value) {
|
|
7578
7548
|
this.setAttribute("separator--laptop", value);
|
|
7579
7549
|
}
|
|
7550
|
+
get separatorDesktop() {
|
|
7551
|
+
return this.getAttribute("separator--desktop");
|
|
7552
|
+
}
|
|
7553
|
+
set separatorDesktop(value) {
|
|
7554
|
+
this.setAttribute("separator--desktop", value);
|
|
7555
|
+
}
|
|
7580
7556
|
get radius() {
|
|
7581
7557
|
return this.getAttribute("radius");
|
|
7582
7558
|
}
|
|
7583
7559
|
set radius(value) {
|
|
7584
7560
|
this.setAttribute("radius", value);
|
|
7585
7561
|
}
|
|
7562
|
+
get radiusMobile() {
|
|
7563
|
+
return this.getAttribute("radius--mobile");
|
|
7564
|
+
}
|
|
7565
|
+
set radiusMobile(value) {
|
|
7566
|
+
this.setAttribute("radius--mobile", value);
|
|
7567
|
+
}
|
|
7586
7568
|
get radiusTablet() {
|
|
7587
7569
|
return this.getAttribute("radius--tablet");
|
|
7588
7570
|
}
|
|
@@ -7595,6 +7577,12 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7595
7577
|
set radiusLaptop(value) {
|
|
7596
7578
|
this.setAttribute("radius--laptop", value);
|
|
7597
7579
|
}
|
|
7580
|
+
get radiusDesktop() {
|
|
7581
|
+
return this.getAttribute("radius--desktop");
|
|
7582
|
+
}
|
|
7583
|
+
set radiusDesktop(value) {
|
|
7584
|
+
this.setAttribute("radius--desktop", value);
|
|
7585
|
+
}
|
|
7598
7586
|
get checked() {
|
|
7599
7587
|
return this.hasAttribute("checked");
|
|
7600
7588
|
}
|
|
@@ -7649,7 +7637,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7649
7637
|
if (!customElements.get("px-cell-switch")) {
|
|
7650
7638
|
customElements.define("px-cell-switch", CellSwitch);
|
|
7651
7639
|
}
|
|
7652
|
-
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)}.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-font-line-height-m) * 1em);font-weight:400;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-container-primary-default);border-color:var(--px-color-border-none);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-container-primary-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")}: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-font-line-height-m);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)}: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);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)}: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)}: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);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)}@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)}}`;
|
|
7640
|
+
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)}.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-font-line-height-m) * 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-container-primary-default);border-color:var(--px-color-border-none);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-container-primary-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")}: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-font-line-height-m);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)}: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);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)}: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)}: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);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)}@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)}}`;
|
|
7653
7641
|
const radioStyles = new CSSStyleSheet();
|
|
7654
7642
|
radioStyles.replaceSync(radioCss);
|
|
7655
7643
|
const _RadioBase = class _RadioBase extends PxElement {
|
|
@@ -7781,10 +7769,7 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
7781
7769
|
updateAttribute(oldValue, newValue, attrValue, attrName) {
|
|
7782
7770
|
var _a, _b;
|
|
7783
7771
|
if (!this.checkName(attrValue, newValue)) {
|
|
7784
|
-
console.error(
|
|
7785
|
-
`${newValue} is not a valid ${attrName} value for`,
|
|
7786
|
-
this.$el
|
|
7787
|
-
);
|
|
7772
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
7788
7773
|
return;
|
|
7789
7774
|
}
|
|
7790
7775
|
if (oldValue !== null) {
|
|
@@ -8036,7 +8021,7 @@ const _Radiogroup = class _Radiogroup extends PxElement {
|
|
|
8036
8021
|
}
|
|
8037
8022
|
updateVariant(oldValue, newValue, attrValue) {
|
|
8038
8023
|
if (!this.checkName(attrValue, newValue)) {
|
|
8039
|
-
console.error(`${newValue} is not a valid variant value
|
|
8024
|
+
console.error(`${newValue} is not a valid variant value`);
|
|
8040
8025
|
return;
|
|
8041
8026
|
}
|
|
8042
8027
|
if (oldValue !== null && oldValue !== "") {
|
|
@@ -8051,7 +8036,7 @@ const _Radiogroup = class _Radiogroup extends PxElement {
|
|
|
8051
8036
|
}
|
|
8052
8037
|
updateGap(oldValue, newValue, attrValue) {
|
|
8053
8038
|
if (!this.checkName(attrValue, newValue)) {
|
|
8054
|
-
console.error(`${newValue} is not a valid gap value
|
|
8039
|
+
console.error(`${newValue} is not a valid gap value`);
|
|
8055
8040
|
return;
|
|
8056
8041
|
}
|
|
8057
8042
|
this.updateGapStyle(oldValue);
|
|
@@ -8183,11 +8168,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8183
8168
|
"variant",
|
|
8184
8169
|
"disabled",
|
|
8185
8170
|
"separator",
|
|
8171
|
+
"separator--mobile",
|
|
8186
8172
|
"separator--tablet",
|
|
8187
8173
|
"separator--laptop",
|
|
8174
|
+
"separator--desktop",
|
|
8188
8175
|
"radius",
|
|
8176
|
+
"radius--mobile",
|
|
8189
8177
|
"radius--tablet",
|
|
8190
8178
|
"radius--laptop",
|
|
8179
|
+
"radius--desktop",
|
|
8191
8180
|
"name",
|
|
8192
8181
|
"value",
|
|
8193
8182
|
"state",
|
|
@@ -8211,11 +8200,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8211
8200
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
8212
8201
|
break;
|
|
8213
8202
|
case "radius":
|
|
8203
|
+
case "radius--mobile":
|
|
8214
8204
|
case "radius--tablet":
|
|
8215
8205
|
case "radius--laptop":
|
|
8206
|
+
case "radius--desktop":
|
|
8216
8207
|
case "separator":
|
|
8208
|
+
case "separator--mobile":
|
|
8217
8209
|
case "separator--tablet":
|
|
8218
8210
|
case "separator--laptop":
|
|
8211
|
+
case "separator--desktop":
|
|
8219
8212
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
8220
8213
|
break;
|
|
8221
8214
|
case "name":
|
|
@@ -8227,7 +8220,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8227
8220
|
case "state":
|
|
8228
8221
|
if (this.$radio) {
|
|
8229
8222
|
if (!this.checkName(stateValues, newValue)) {
|
|
8230
|
-
console.error(`${newValue} is not a valid state value
|
|
8223
|
+
console.error(`${newValue} is not a valid state value`);
|
|
8231
8224
|
return;
|
|
8232
8225
|
} else {
|
|
8233
8226
|
this.$radio.setAttribute("state", newValue);
|
|
@@ -8311,7 +8304,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8311
8304
|
}
|
|
8312
8305
|
handleRadioPositionChange(newValue) {
|
|
8313
8306
|
if (!this.checkName(cellRadioPosition, newValue)) {
|
|
8314
|
-
console.error(`${newValue} is not a valid position value
|
|
8307
|
+
console.error(`${newValue} is not a valid position value`);
|
|
8315
8308
|
return;
|
|
8316
8309
|
}
|
|
8317
8310
|
if (this.$radio) {
|
|
@@ -8394,6 +8387,12 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8394
8387
|
set separator(value) {
|
|
8395
8388
|
this.setAttribute("separator", value);
|
|
8396
8389
|
}
|
|
8390
|
+
get separatorMobile() {
|
|
8391
|
+
return this.getAttribute("separator--mobile");
|
|
8392
|
+
}
|
|
8393
|
+
set separatorMobile(value) {
|
|
8394
|
+
this.setAttribute("separator--mobile", value);
|
|
8395
|
+
}
|
|
8397
8396
|
get separatorTablet() {
|
|
8398
8397
|
return this.getAttribute("separator--tablet");
|
|
8399
8398
|
}
|
|
@@ -8406,12 +8405,24 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8406
8405
|
set separatorLaptop(value) {
|
|
8407
8406
|
this.setAttribute("separator--laptop", value);
|
|
8408
8407
|
}
|
|
8408
|
+
get separatorDesktop() {
|
|
8409
|
+
return this.getAttribute("separator--desktop");
|
|
8410
|
+
}
|
|
8411
|
+
set separatorDesktop(value) {
|
|
8412
|
+
this.setAttribute("separator--desktop", value);
|
|
8413
|
+
}
|
|
8409
8414
|
get radius() {
|
|
8410
8415
|
return this.getAttribute("radius");
|
|
8411
8416
|
}
|
|
8412
8417
|
set radius(value) {
|
|
8413
8418
|
this.setAttribute("radius", value);
|
|
8414
8419
|
}
|
|
8420
|
+
get radiusMobile() {
|
|
8421
|
+
return this.getAttribute("radius--mobile");
|
|
8422
|
+
}
|
|
8423
|
+
set radiusMobile(value) {
|
|
8424
|
+
this.setAttribute("radius--mobile", value);
|
|
8425
|
+
}
|
|
8415
8426
|
get radiusTablet() {
|
|
8416
8427
|
return this.getAttribute("radius--tablet");
|
|
8417
8428
|
}
|
|
@@ -8424,6 +8435,12 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8424
8435
|
set radiusLaptop(value) {
|
|
8425
8436
|
this.setAttribute("radius--laptop", value);
|
|
8426
8437
|
}
|
|
8438
|
+
get radiusDesktop() {
|
|
8439
|
+
return this.getAttribute("radius--desktop");
|
|
8440
|
+
}
|
|
8441
|
+
set radiusDesktop(value) {
|
|
8442
|
+
this.setAttribute("radius--desktop", value);
|
|
8443
|
+
}
|
|
8427
8444
|
get checked() {
|
|
8428
8445
|
return this.hasAttribute("checked");
|
|
8429
8446
|
}
|
|
@@ -8578,10 +8595,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
8578
8595
|
}
|
|
8579
8596
|
}
|
|
8580
8597
|
}
|
|
8581
|
-
const styles$
|
|
8598
|
+
const styles$k = '.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-font-line-height-m);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);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="prefix"]){font-weight:var(--px-font-weight-body);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-weight:var(--px-font-weight-body)}: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)}@media only screen and (min-width: 768px){.tile{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.tile{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}: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)}';
|
|
8582
8599
|
const common = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 768px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}';
|
|
8583
8600
|
const styleSheet$c = new CSSStyleSheet();
|
|
8584
|
-
styleSheet$c.replaceSync(styles$
|
|
8601
|
+
styleSheet$c.replaceSync(styles$k);
|
|
8585
8602
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
8586
8603
|
commonStyleSheet$5.replaceSync(common);
|
|
8587
8604
|
const tileBackgroundColorValues = [
|
|
@@ -8694,7 +8711,7 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8694
8711
|
}
|
|
8695
8712
|
updateBackgroundColor(oldValue, newValue, attrValue) {
|
|
8696
8713
|
if (!checkName(attrValue, newValue)) {
|
|
8697
|
-
console.error(
|
|
8714
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
8698
8715
|
return;
|
|
8699
8716
|
}
|
|
8700
8717
|
const updateBackgroundColorStyle = (value) => {
|
|
@@ -8781,9 +8798,9 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8781
8798
|
_Tile.nativeName = "div";
|
|
8782
8799
|
let Tile = _Tile;
|
|
8783
8800
|
customElements.define("px-tile", Tile);
|
|
8784
|
-
const styles$
|
|
8801
|
+
const styles$j = ".tile-button{padding:0;background:none}";
|
|
8785
8802
|
const styleSheet$b = new CSSStyleSheet();
|
|
8786
|
-
styleSheet$b.replaceSync(styles$
|
|
8803
|
+
styleSheet$b.replaceSync(styles$j);
|
|
8787
8804
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
8788
8805
|
commonStyleSheet$4.replaceSync(common);
|
|
8789
8806
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -8999,7 +9016,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
8999
9016
|
case "state":
|
|
9000
9017
|
if (this.$checkbox) {
|
|
9001
9018
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
9002
|
-
console.error(`${newValue} is not a valid state value
|
|
9019
|
+
console.error(`${newValue} is not a valid state value`);
|
|
9003
9020
|
return;
|
|
9004
9021
|
} else {
|
|
9005
9022
|
this.$checkbox.setAttribute("state", newValue);
|
|
@@ -9281,7 +9298,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9281
9298
|
case "state":
|
|
9282
9299
|
if (this.$radio) {
|
|
9283
9300
|
if (!this.checkName(stateValues, newValue)) {
|
|
9284
|
-
console.error(`${newValue} is not a valid state value
|
|
9301
|
+
console.error(`${newValue} is not a valid state value`);
|
|
9285
9302
|
return;
|
|
9286
9303
|
} else {
|
|
9287
9304
|
this.$radio.setAttribute("state", newValue);
|
|
@@ -9476,9 +9493,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9476
9493
|
}
|
|
9477
9494
|
}
|
|
9478
9495
|
customElements.define("px-tile-radio", TileRadio);
|
|
9479
|
-
const styles$
|
|
9496
|
+
const styles$i = ".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)}";
|
|
9480
9497
|
const styleSheet$a = new CSSStyleSheet();
|
|
9481
|
-
styleSheet$a.replaceSync(styles$
|
|
9498
|
+
styleSheet$a.replaceSync(styles$i);
|
|
9482
9499
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
9483
9500
|
commonStyleSheet$1.replaceSync(common);
|
|
9484
9501
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -9490,7 +9507,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
9490
9507
|
name="chevron_right"
|
|
9491
9508
|
slot="suffix"
|
|
9492
9509
|
from="lavender"
|
|
9493
|
-
size="
|
|
9510
|
+
size="m"
|
|
9494
9511
|
color="inherit"
|
|
9495
9512
|
></px-icon>
|
|
9496
9513
|
<slot></slot>
|
|
@@ -9900,9 +9917,9 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
9900
9917
|
}
|
|
9901
9918
|
}
|
|
9902
9919
|
customElements.define("px-tile-switch", TileSwitch);
|
|
9903
|
-
const styles$
|
|
9904
|
-
const stylesheet$
|
|
9905
|
-
stylesheet$
|
|
9920
|
+
const styles$h = "#content{overflow:auto}#sticky-left{position:sticky;top:0;float:left;margin-top:var(--px-sticky-container-offset-left-desktop, var(--px-sticky-container-offset-left-all))}@media only screen and (max-width: 768px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-mobile, var(--px-sticky-container-offset-left-all))}}@media only screen and (max-width: 1025px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-laptop, var(--px-sticky-container-offset-left-all))}}#sticky-right{position:sticky;top:0;float:right;margin-top:var(--px-sticky-container-offset-right-desktop, var(--px-sticky-container-offset-right-all))}@media only screen and (max-width: 768px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-mobile, var(--px-sticky-container-offset-right-all))}}@media only screen and (max-width: 1025px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-laptop, var(--px-sticky-container-offset-right-all))}}#middle{position:relative;height:var(--px-sticky-container-middle-height, 100vh);width:100%;overflow:auto}.sticky-footer{position:sticky;bottom:0;width:100%}";
|
|
9921
|
+
const stylesheet$7 = new CSSStyleSheet();
|
|
9922
|
+
stylesheet$7.replaceSync(styles$h);
|
|
9906
9923
|
class StickyContainer extends HTMLElement {
|
|
9907
9924
|
constructor() {
|
|
9908
9925
|
super();
|
|
@@ -9947,7 +9964,7 @@ class StickyContainer extends HTMLElement {
|
|
|
9947
9964
|
};
|
|
9948
9965
|
this.attachShadow({ mode: "open" });
|
|
9949
9966
|
this.shadowRoot.innerHTML = this.template;
|
|
9950
|
-
this.shadowRoot.adoptedStyleSheets = [stylesheet$
|
|
9967
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$7];
|
|
9951
9968
|
}
|
|
9952
9969
|
connectedCallback() {
|
|
9953
9970
|
this.adjustContentHeight();
|
|
@@ -9992,9 +10009,9 @@ class StickyContainer extends HTMLElement {
|
|
|
9992
10009
|
if (!customElements.get("px-sticky-container")) {
|
|
9993
10010
|
customElements.define("px-sticky-container", StickyContainer);
|
|
9994
10011
|
}
|
|
9995
|
-
const styles$
|
|
10012
|
+
const styles$g = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default)}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;width:75%}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:80vh;overflow:auto;padding:var(--px-padding-m-desktop)}@media screen and (min-width: 1080px){#container{height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625em}:host([showfrom="right"]) #container{padding-right:10.625em;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625em;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media screen and (max-width: 1081px){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;border-radius:var(--px-radius-main);animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile)}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:45px;padding:var(--px-padding-m-mobile)}}@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}}';
|
|
9996
10013
|
const styleSheet$9 = new CSSStyleSheet();
|
|
9997
|
-
styleSheet$9.replaceSync(styles$
|
|
10014
|
+
styleSheet$9.replaceSync(styles$g);
|
|
9998
10015
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
9999
10016
|
class Drawer extends HTMLElement {
|
|
10000
10017
|
constructor() {
|
|
@@ -10006,7 +10023,7 @@ class Drawer extends HTMLElement {
|
|
|
10006
10023
|
<px-h1 variant="title-4xl" variant--mobile="title-2xl" >
|
|
10007
10024
|
<slot name="title"></slot>
|
|
10008
10025
|
</px-h1>
|
|
10009
|
-
<px-h2 variant="subtitle" color="
|
|
10026
|
+
<px-h2 variant="subtitle" color="neutral">
|
|
10010
10027
|
<slot name="subtitle"></slot>
|
|
10011
10028
|
</px-h2>
|
|
10012
10029
|
</px-vstack>
|
|
@@ -10120,11 +10137,11 @@ class Drawer extends HTMLElement {
|
|
|
10120
10137
|
if (!customElements.get("px-drawer")) {
|
|
10121
10138
|
customElements.define("px-drawer", Drawer);
|
|
10122
10139
|
}
|
|
10123
|
-
const styles$
|
|
10140
|
+
const styles$f = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}";
|
|
10124
10141
|
const itemStyles = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var(--px-carousel-min-width-desktop,var(--px-carousel-min-width-all-desktop));border-radius:var(--px-radius-main);background:#fff}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile))!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var(--px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet))!important}}";
|
|
10125
|
-
const styles$
|
|
10142
|
+
const styles$e = ":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: 768px){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-minus>div{height:10px;width:10px;border:var(--px-size-border-s) solid var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)}.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-background-state-active-default)}.appleseed-6-plus>div{height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m);border:var(--px-size-border-s) solid var(--px-color-background-state-active-default);border-radius:var(--px-radius-main)}.appleseed-6-plus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-background-state-active-default)}";
|
|
10126
10143
|
const styleSheet$8 = new CSSStyleSheet();
|
|
10127
|
-
styleSheet$8.replaceSync(styles$
|
|
10144
|
+
styleSheet$8.replaceSync(styles$e);
|
|
10128
10145
|
class AppleSeed extends HTMLElement {
|
|
10129
10146
|
constructor() {
|
|
10130
10147
|
super();
|
|
@@ -10367,7 +10384,7 @@ function throttle(func, wait, options) {
|
|
|
10367
10384
|
});
|
|
10368
10385
|
}
|
|
10369
10386
|
const styleSheet$7 = new CSSStyleSheet();
|
|
10370
|
-
styleSheet$7.replaceSync(styles$
|
|
10387
|
+
styleSheet$7.replaceSync(styles$f);
|
|
10371
10388
|
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10372
10389
|
const prefix = "px-spacing";
|
|
10373
10390
|
const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100% - ${Math.max(parseInt(numberOfItems), 2)} * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
|
|
@@ -10549,7 +10566,7 @@ class CarouselItem extends HTMLElement {
|
|
|
10549
10566
|
if (!customElements.get("px-carousel-item")) {
|
|
10550
10567
|
customElements.define("px-carousel-item", CarouselItem);
|
|
10551
10568
|
}
|
|
10552
|
-
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}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}:host(:not([reduced])) ::slotted([slot="action"]){grid-area: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 only screen and (min-width:
|
|
10569
|
+
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}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}:host(:not([reduced])) ::slotted([slot="action"]){grid-area: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 only screen and (min-width: 48em){.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 only screen and (min-width: 64.0625em){.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))}}';
|
|
10553
10570
|
const bannerStyles = new CSSStyleSheet();
|
|
10554
10571
|
bannerStyles.replaceSync(bannerCss);
|
|
10555
10572
|
const _Banner = class _Banner extends PxElement {
|
|
@@ -10809,13 +10826,13 @@ const _Fieldset = class _Fieldset extends PxElement {
|
|
|
10809
10826
|
_Fieldset.nativeName = "fieldset";
|
|
10810
10827
|
let Fieldset = _Fieldset;
|
|
10811
10828
|
customElements.define("px-fieldset", Fieldset);
|
|
10812
|
-
const styles$b = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:44px;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-size:var(--px-text-size-label-l-mobile);font-weight:400;text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}@media screen and (min-width: 768px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding: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)}}@media screen and (min-width: 1024px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding: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]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):focus,input:not([type=file]):hover,input:not([type=file]).error:focus,input:not([type=file]).error:hover,input:not([type=file]).success:focus,input:not([type=file]).success:hover,textarea:focus,textarea:hover,textarea.error:focus,textarea.error:hover,textarea.success:focus,textarea.success:hover,select:focus,select:hover,select.error:focus,select.error:hover,select.success:focus,select.success:hover,#input-file-container:focus,#input-file-container:hover,#input-file-container.error:focus,#input-file-container.error:hover,#input-file-container.success:focus,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;outline:1px solid var(--px-color-border-state-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:700;text-align:left;height:24px}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-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7em,center right 1em}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:focus,input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:focus,input:not([type=file])[type=search].error:hover,textarea[type=search].success:focus,textarea[type=search].success:hover,textarea[type=search].error:focus,textarea[type=search].error:hover,select[type=search].success:focus,select[type=search].success:hover,select[type=search].error:focus,select[type=search].error:hover,#input-file-container[type=search].success:focus,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:focus,#input-file-container[type=search].error:hover{background-position:center right 1em;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto;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}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:400;line-height:var(--px-font-line-height-m);text-align:left}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:6px}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media screen and (min-width: 768px){slot{font-size:var(--px-text-size-label-m-desktop)}}`;
|
|
10813
|
-
const stylesheet$
|
|
10814
|
-
stylesheet$
|
|
10829
|
+
const styles$d = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:44px;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-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-body);text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}@media screen and (min-width: 768px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding: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)}}@media screen and (min-width: 1024px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding: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]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):focus,input:not([type=file]):hover,input:not([type=file]).error:focus,input:not([type=file]).error:hover,input:not([type=file]).success:focus,input:not([type=file]).success:hover,textarea:focus,textarea:hover,textarea.error:focus,textarea.error:hover,textarea.success:focus,textarea.success:hover,select:focus,select:hover,select.error:focus,select.error:hover,select.success:focus,select.success:hover,#input-file-container:focus,#input-file-container:hover,#input-file-container.error:focus,#input-file-container.error:hover,#input-file-container.success:focus,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;outline:1px solid var(--px-color-border-state-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{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;height:24px}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-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7em,center right 1em}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:focus,input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:focus,input:not([type=file])[type=search].error:hover,textarea[type=search].success:focus,textarea[type=search].success:hover,textarea[type=search].error:focus,textarea[type=search].error:hover,select[type=search].success:focus,select[type=search].success:hover,select[type=search].error:focus,select[type=search].error:hover,#input-file-container[type=search].success:focus,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:focus,#input-file-container[type=search].error:hover{background-position:center right 1em;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto;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}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-font-line-height-m);text-align:left}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:6px}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media screen and (min-width: 768px){slot{font-size:var(--px-text-size-label-m-desktop)}}`;
|
|
10830
|
+
const stylesheet$6 = new CSSStyleSheet();
|
|
10831
|
+
stylesheet$6.replaceSync(styles$d);
|
|
10815
10832
|
class AbstractInputElement extends PxElement {
|
|
10816
10833
|
constructor() {
|
|
10817
10834
|
var _a;
|
|
10818
|
-
super(stylesheet$
|
|
10835
|
+
super(stylesheet$6);
|
|
10819
10836
|
this.containerTemplate = () => `
|
|
10820
10837
|
<div id="container">
|
|
10821
10838
|
<div id="label-helper">
|
|
@@ -11190,9 +11207,9 @@ const _Switch = class _Switch extends PxElement {
|
|
|
11190
11207
|
_Switch.nativeName = "input";
|
|
11191
11208
|
let Switch = _Switch;
|
|
11192
11209
|
customElements.define("px-switch", Switch);
|
|
11193
|
-
const styles$
|
|
11210
|
+
const styles$c = ":host{display:table;width:100%}";
|
|
11194
11211
|
const styleSheet$6 = new CSSStyleSheet();
|
|
11195
|
-
styleSheet$6.replaceSync(styles$
|
|
11212
|
+
styleSheet$6.replaceSync(styles$c);
|
|
11196
11213
|
class Table extends HTMLElement {
|
|
11197
11214
|
constructor() {
|
|
11198
11215
|
super();
|
|
@@ -11211,9 +11228,9 @@ class Table extends HTMLElement {
|
|
|
11211
11228
|
if (!customElements.get("px-table")) {
|
|
11212
11229
|
customElements.define("px-table", Table);
|
|
11213
11230
|
}
|
|
11214
|
-
const styles$
|
|
11231
|
+
const styles$b = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
11215
11232
|
const styleSheet$5 = new CSSStyleSheet();
|
|
11216
|
-
styleSheet$5.replaceSync(styles$
|
|
11233
|
+
styleSheet$5.replaceSync(styles$b);
|
|
11217
11234
|
class Thead extends HTMLElement {
|
|
11218
11235
|
constructor() {
|
|
11219
11236
|
super();
|
|
@@ -11232,9 +11249,9 @@ class Thead extends HTMLElement {
|
|
|
11232
11249
|
if (!customElements.get("px-thead")) {
|
|
11233
11250
|
customElements.define("px-thead", Thead);
|
|
11234
11251
|
}
|
|
11235
|
-
const styles$
|
|
11252
|
+
const styles$a = ":host{display:table-row}";
|
|
11236
11253
|
const styleSheet$4 = new CSSStyleSheet();
|
|
11237
|
-
styleSheet$4.replaceSync(styles$
|
|
11254
|
+
styleSheet$4.replaceSync(styles$a);
|
|
11238
11255
|
class Tr extends HTMLElement {
|
|
11239
11256
|
constructor() {
|
|
11240
11257
|
super();
|
|
@@ -11253,9 +11270,9 @@ class Tr extends HTMLElement {
|
|
|
11253
11270
|
if (!customElements.get("px-tr")) {
|
|
11254
11271
|
customElements.define("px-tr", Tr);
|
|
11255
11272
|
}
|
|
11256
|
-
const styles$
|
|
11273
|
+
const styles$9 = ':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-font-line-height-m);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11257
11274
|
const styleSheet$3 = new CSSStyleSheet();
|
|
11258
|
-
styleSheet$3.replaceSync(styles$
|
|
11275
|
+
styleSheet$3.replaceSync(styles$9);
|
|
11259
11276
|
class Th extends HTMLElement {
|
|
11260
11277
|
constructor() {
|
|
11261
11278
|
super();
|
|
@@ -11289,9 +11306,9 @@ class Th extends HTMLElement {
|
|
|
11289
11306
|
if (!customElements.get("px-th")) {
|
|
11290
11307
|
customElements.define("px-th", Th);
|
|
11291
11308
|
}
|
|
11292
|
-
const styles$
|
|
11309
|
+
const styles$8 = ":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)}";
|
|
11293
11310
|
const styleSheet$2 = new CSSStyleSheet();
|
|
11294
|
-
styleSheet$2.replaceSync(styles$
|
|
11311
|
+
styleSheet$2.replaceSync(styles$8);
|
|
11295
11312
|
class Tbody extends HTMLElement {
|
|
11296
11313
|
constructor() {
|
|
11297
11314
|
super();
|
|
@@ -11310,9 +11327,9 @@ class Tbody extends HTMLElement {
|
|
|
11310
11327
|
if (!customElements.get("px-tbody")) {
|
|
11311
11328
|
customElements.define("px-tbody", Tbody);
|
|
11312
11329
|
}
|
|
11313
|
-
const styles$
|
|
11330
|
+
const styles$7 = ':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-font-line-height-m);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11314
11331
|
const styleSheet$1 = new CSSStyleSheet();
|
|
11315
|
-
styleSheet$1.replaceSync(styles$
|
|
11332
|
+
styleSheet$1.replaceSync(styles$7);
|
|
11316
11333
|
class Td extends HTMLElement {
|
|
11317
11334
|
constructor() {
|
|
11318
11335
|
super();
|
|
@@ -11354,6 +11371,281 @@ class Td extends HTMLElement {
|
|
|
11354
11371
|
if (!customElements.get("px-td")) {
|
|
11355
11372
|
customElements.define("px-td", Td);
|
|
11356
11373
|
}
|
|
11374
|
+
const styles$6 = ":host>*{padding:2em 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:var(--px-text-size-label-l-mobile)}button[aria-expanded=true],button:focus{outline:0;font-weight:var(--px-font-weight-title);border-bottom:2px solid var(--px-color-background-container-primary-default);color:var(--px-color-background-container-primary-default)}button:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}@media screen and (min-width: 1024px){button{font-size:var(--px-text-size-label-l-desktop)}}px-a{height:100%;display:block}px-a:hover{font-weight:var(--px-font-weight-title);color:var(--px-color-background-container-primary-default)}";
|
|
11375
|
+
const stylesheet$5 = new CSSStyleSheet();
|
|
11376
|
+
stylesheet$5.replaceSync(styles$6);
|
|
11377
|
+
class HeaderItem extends WithExtraAttributes {
|
|
11378
|
+
constructor() {
|
|
11379
|
+
super();
|
|
11380
|
+
this.template = () => `${this.getAttribute("href") ? `<px-a font-size="body-l" variant="no-style" href="${this.getAttribute("href")}">
|
|
11381
|
+
<slot></slot>
|
|
11382
|
+
</px-a>` : "<button><slot></slot></button>"}`;
|
|
11383
|
+
this.shadowRoot.innerHTML = this.template();
|
|
11384
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$5];
|
|
11385
|
+
}
|
|
11386
|
+
static get observedAttributes() {
|
|
11387
|
+
return ["for", "href"];
|
|
11388
|
+
}
|
|
11389
|
+
connectedCallback() {
|
|
11390
|
+
this.setAttribute("slot", "header-entries");
|
|
11391
|
+
if (this.$button) {
|
|
11392
|
+
this.setupButtonA11y();
|
|
11393
|
+
}
|
|
11394
|
+
}
|
|
11395
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
11396
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
11397
|
+
if (name === "href" && this.$button && !!newValue) {
|
|
11398
|
+
this.shadowRoot.innerHTML = this.template();
|
|
11399
|
+
} else if (name === "for" && this.$a && !!newValue) {
|
|
11400
|
+
this.shadowRoot.innerHTML = this.template();
|
|
11401
|
+
this.setupButtonA11y();
|
|
11402
|
+
}
|
|
11403
|
+
}
|
|
11404
|
+
setupButtonA11y() {
|
|
11405
|
+
this.$button.setAttribute("tabindex", "0");
|
|
11406
|
+
this.$button.role = "menuitem";
|
|
11407
|
+
this.$button.ariaExpanded = "false";
|
|
11408
|
+
this.$button.ariaHasPopup = "menu";
|
|
11409
|
+
}
|
|
11410
|
+
get for() {
|
|
11411
|
+
return this.getAttribute("for");
|
|
11412
|
+
}
|
|
11413
|
+
set for(value) {
|
|
11414
|
+
this.setAttribute("for", value);
|
|
11415
|
+
}
|
|
11416
|
+
get checked() {
|
|
11417
|
+
return this.$button.ariaExpanded === "true";
|
|
11418
|
+
}
|
|
11419
|
+
set checked(value) {
|
|
11420
|
+
if (typeof value !== "boolean") {
|
|
11421
|
+
throw new Error("checked must be a boolean");
|
|
11422
|
+
}
|
|
11423
|
+
this.$button.setAttribute("tabindex", value ? "0" : "-1");
|
|
11424
|
+
this.$button.ariaExpanded = `${!!value}`;
|
|
11425
|
+
this.$button.setAttribute("aria-controls", this.for);
|
|
11426
|
+
}
|
|
11427
|
+
get $button() {
|
|
11428
|
+
return this.shadowRoot.querySelector("button");
|
|
11429
|
+
}
|
|
11430
|
+
get $a() {
|
|
11431
|
+
return this.shadowRoot.querySelector("px-a");
|
|
11432
|
+
}
|
|
11433
|
+
}
|
|
11434
|
+
if (!customElements.get("px-header-item")) {
|
|
11435
|
+
customElements.define("px-header-item", HeaderItem);
|
|
11436
|
+
}
|
|
11437
|
+
class MDDLink extends HTMLElement {
|
|
11438
|
+
constructor() {
|
|
11439
|
+
super();
|
|
11440
|
+
this.template = `<px-a font-weight="title" font-size="body-l" color="brand" variant="no-style">
|
|
11441
|
+
<slot></slot>
|
|
11442
|
+
</px-a>`;
|
|
11443
|
+
this.attachShadow({ mode: "open" });
|
|
11444
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11445
|
+
const linkElement = this.shadowRoot.querySelector("px-a");
|
|
11446
|
+
if (linkElement) {
|
|
11447
|
+
Array.from(this.attributes).forEach((attr) => {
|
|
11448
|
+
linkElement.setAttribute(attr.name, attr.value);
|
|
11449
|
+
});
|
|
11450
|
+
}
|
|
11451
|
+
}
|
|
11452
|
+
}
|
|
11453
|
+
if (!customElements.get("px-mdd-a")) {
|
|
11454
|
+
customElements.define("px-mdd-a", MDDLink);
|
|
11455
|
+
}
|
|
11456
|
+
const styles$5 = "#panel-container{position:absolute;left:0;right:0;z-index:999}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#dropdown-zone-desktop{display:none}@media screen and (min-width: 768px){#dropdown-zone-desktop{display:block;margin-right:calc(var(--px-size-icon-xs) + var(--px-padding-s-desktop));margin-top:var(--px-padding-s-desktop);margin-bottom:var(--px-spacing-s-desktop)}}#backdrop-filter{position:absolute;display:none;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 (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}";
|
|
11457
|
+
const stylesheet$4 = new CSSStyleSheet();
|
|
11458
|
+
stylesheet$4.replaceSync(styles$5);
|
|
11459
|
+
class Header extends WithExtraAttributes {
|
|
11460
|
+
constructor() {
|
|
11461
|
+
var _a;
|
|
11462
|
+
super(stylesheet$4);
|
|
11463
|
+
this.template = `
|
|
11464
|
+
<div id="navigation-items-container">
|
|
11465
|
+
<slot name="skip"></slot>
|
|
11466
|
+
<px-section padding-block--mobile="s" padding-block="none" background-color="none">
|
|
11467
|
+
<px-hstack id="dropdown-zone-desktop" justify-content="space-between" align-items="center">
|
|
11468
|
+
<slot name="target-group"></slot>
|
|
11469
|
+
<slot name="user-language"></slot>
|
|
11470
|
+
</px-hstack>
|
|
11471
|
+
<px-hstack gap="default" wrap="wrap" align-items="center">
|
|
11472
|
+
<slot name="header-logo"></slot>
|
|
11473
|
+
<slot name="header-entries"></slot>
|
|
11474
|
+
<px-spacer></px-spacer>
|
|
11475
|
+
<px-hstack gap--mobile="none" gap="default">
|
|
11476
|
+
<slot name="header-actions"></slot>
|
|
11477
|
+
<px-button-icon variant="naked">
|
|
11478
|
+
<px-icon name="burger_menu" from="lavender"></px-icon>
|
|
11479
|
+
</px-button-icon>
|
|
11480
|
+
</px-hstack>
|
|
11481
|
+
</px-hstack>
|
|
11482
|
+
</px-section>
|
|
11483
|
+
<px-section id="panel-container" background-color="surface-default" padding="none" background-color="none">
|
|
11484
|
+
<slot name="header-panels">
|
|
11485
|
+
</px-section>
|
|
11486
|
+
<div id="backdrop-filter"></div>
|
|
11487
|
+
<slot name="main"></slot>
|
|
11488
|
+
</div>
|
|
11489
|
+
`;
|
|
11490
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11491
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11492
|
+
if (this.internals) {
|
|
11493
|
+
this.internals.role = "navigation";
|
|
11494
|
+
this.internals.ariaOrientation = "horizontal";
|
|
11495
|
+
}
|
|
11496
|
+
}
|
|
11497
|
+
connectedCallback() {
|
|
11498
|
+
this.addEventListener("click", (event) => {
|
|
11499
|
+
const targetElement = event.target.closest(
|
|
11500
|
+
"px-header-item"
|
|
11501
|
+
);
|
|
11502
|
+
if (targetElement && targetElement.for) {
|
|
11503
|
+
this.$backdropFilter.style.display = "block";
|
|
11504
|
+
this.$navigationItems.forEach((item2) => {
|
|
11505
|
+
item2.checked = false;
|
|
11506
|
+
});
|
|
11507
|
+
event.target.checked = true;
|
|
11508
|
+
this.i11yEnableActions(false);
|
|
11509
|
+
this.togglePanel(event.target.for);
|
|
11510
|
+
}
|
|
11511
|
+
});
|
|
11512
|
+
this.shadowRoot.addEventListener("click", (event) => {
|
|
11513
|
+
if (event.target.closest("px-button-icon")) {
|
|
11514
|
+
this.$backdropFilter.style.display = "block";
|
|
11515
|
+
this.$burgerMenu.setAttribute("tabindex", "0");
|
|
11516
|
+
this.togglePanel("__lavender_mobile_menu");
|
|
11517
|
+
}
|
|
11518
|
+
});
|
|
11519
|
+
this.addEventListener("section-item-click", (event) => {
|
|
11520
|
+
this.$backdropFilter.style.display = "block";
|
|
11521
|
+
this.$navigationItems.forEach((item2) => {
|
|
11522
|
+
item2.checked = false;
|
|
11523
|
+
});
|
|
11524
|
+
const forr = event.detail.for;
|
|
11525
|
+
if (forr !== "__lavender_mobile_menu") {
|
|
11526
|
+
this.querySelector(
|
|
11527
|
+
`px-header-item[for="${event.detail.for}"]`
|
|
11528
|
+
).checked = true;
|
|
11529
|
+
}
|
|
11530
|
+
this.i11yEnableActions(false);
|
|
11531
|
+
this.togglePanel(event.detail.for);
|
|
11532
|
+
});
|
|
11533
|
+
this.addEventListener("close-panel", () => {
|
|
11534
|
+
this.hidePanel();
|
|
11535
|
+
this.i11yEnableActions(true);
|
|
11536
|
+
});
|
|
11537
|
+
this.$backdropFilter.addEventListener("click", () => {
|
|
11538
|
+
this.hidePanel();
|
|
11539
|
+
this.i11yEnableActions(true);
|
|
11540
|
+
});
|
|
11541
|
+
this.createMobileMenuPanel();
|
|
11542
|
+
if (this.$targetGroupDropdown && this.$userLanguageDropdown) {
|
|
11543
|
+
this.createMobileMenuPanelDrownowns();
|
|
11544
|
+
} else {
|
|
11545
|
+
this.$dropDownZoneDesktop.style.display = "none";
|
|
11546
|
+
}
|
|
11547
|
+
}
|
|
11548
|
+
createMobileMenuPanel() {
|
|
11549
|
+
var _a;
|
|
11550
|
+
const $rootPanel = `
|
|
11551
|
+
<px-mdd name="__lavender_mobile_menu">
|
|
11552
|
+
<span slot="title">Menu</span>
|
|
11553
|
+
<px-mdd-section>
|
|
11554
|
+
${[...this.$navigationItems].map(
|
|
11555
|
+
(item2) => `<px-mdd-section-item for="${item2.getAttribute("for")}">${item2.innerText}</px-mdd-section-item>`
|
|
11556
|
+
).join("")}
|
|
11557
|
+
${[...this.$actionLinks].filter((item2) => !item2.hasAttribute("promoted")).map(
|
|
11558
|
+
(item2) => `<px-mdd-a href="${item2.getAttribute("href")}" slot="footer">${item2.innerText}</px-mdd-a>`
|
|
11559
|
+
).join("")}
|
|
11560
|
+
</px-mdd-section>
|
|
11561
|
+
${this.createMobileMenuPanelDrownowns()}
|
|
11562
|
+
</px-mdd>
|
|
11563
|
+
`;
|
|
11564
|
+
(_a = this.$megaDropdowns.item(0)) == null ? void 0 : _a.insertAdjacentHTML("beforebegin", $rootPanel);
|
|
11565
|
+
}
|
|
11566
|
+
createMobileMenuPanelDrownowns() {
|
|
11567
|
+
var _a, _b;
|
|
11568
|
+
const targetGroupDropdown = (_a = this.$targetGroupDropdown) == null ? void 0 : _a.cloneNode(
|
|
11569
|
+
true
|
|
11570
|
+
);
|
|
11571
|
+
targetGroupDropdown == null ? void 0 : targetGroupDropdown.removeAttribute("id");
|
|
11572
|
+
targetGroupDropdown == null ? void 0 : targetGroupDropdown.setAttribute("slot", "mdd-footer");
|
|
11573
|
+
targetGroupDropdown == null ? void 0 : targetGroupDropdown.setAttribute("grow", "3");
|
|
11574
|
+
targetGroupDropdown == null ? void 0 : targetGroupDropdown.setAttribute("anchoralignment", "top-left");
|
|
11575
|
+
const languageDropdown = (_b = this.$userLanguageDropdown) == null ? void 0 : _b.cloneNode(
|
|
11576
|
+
true
|
|
11577
|
+
);
|
|
11578
|
+
languageDropdown == null ? void 0 : languageDropdown.removeAttribute("id");
|
|
11579
|
+
languageDropdown == null ? void 0 : languageDropdown.setAttribute("slot", "mdd-footer");
|
|
11580
|
+
languageDropdown == null ? void 0 : languageDropdown.setAttribute("grow", "1");
|
|
11581
|
+
languageDropdown == null ? void 0 : languageDropdown.setAttribute("anchoralignment", "top-right");
|
|
11582
|
+
return `${(targetGroupDropdown == null ? void 0 : targetGroupDropdown.outerHTML) ?? ""}${(languageDropdown == null ? void 0 : languageDropdown.outerHTML) ?? ""}`;
|
|
11583
|
+
}
|
|
11584
|
+
i11yEnableActions(enable = true) {
|
|
11585
|
+
this.querySelectorAll('[slot="header-actions"]').forEach(
|
|
11586
|
+
(item2) => {
|
|
11587
|
+
if (enable) {
|
|
11588
|
+
item2.removeAttribute("tabindex");
|
|
11589
|
+
return;
|
|
11590
|
+
}
|
|
11591
|
+
item2.setAttribute("tabindex", "-1");
|
|
11592
|
+
}
|
|
11593
|
+
);
|
|
11594
|
+
}
|
|
11595
|
+
togglePanel(id) {
|
|
11596
|
+
this.$megaDropdowns.forEach((megaDropDown) => {
|
|
11597
|
+
if (megaDropDown.name === id && megaDropDown.hidden) {
|
|
11598
|
+
megaDropDown.hidden = !megaDropDown.hidden;
|
|
11599
|
+
if (id !== "__lavender_mobile_menu") {
|
|
11600
|
+
this.querySelector(`px-header-item[for="${id}"]`).checked = !megaDropDown.hidden;
|
|
11601
|
+
}
|
|
11602
|
+
document.body.style.overflow = megaDropDown.hidden ? "auto" : "hidden";
|
|
11603
|
+
}
|
|
11604
|
+
if (megaDropDown.name !== id && !megaDropDown.hidden) {
|
|
11605
|
+
megaDropDown.hidden = true;
|
|
11606
|
+
}
|
|
11607
|
+
});
|
|
11608
|
+
}
|
|
11609
|
+
hidePanel() {
|
|
11610
|
+
this.$backdropFilter.style.display = "none";
|
|
11611
|
+
this.$navigationItems.forEach((item2) => {
|
|
11612
|
+
item2.checked = false;
|
|
11613
|
+
item2.$button.setAttribute("tabindex", "0");
|
|
11614
|
+
});
|
|
11615
|
+
this.$megaDropdowns.forEach((panel) => {
|
|
11616
|
+
panel.hidden = true;
|
|
11617
|
+
});
|
|
11618
|
+
this.i11yEnableActions(true);
|
|
11619
|
+
document.body.style.overflow = "auto";
|
|
11620
|
+
}
|
|
11621
|
+
get $navigationItems() {
|
|
11622
|
+
return this.querySelectorAll("px-header-item");
|
|
11623
|
+
}
|
|
11624
|
+
get $megaDropdowns() {
|
|
11625
|
+
return this.querySelectorAll("px-mdd");
|
|
11626
|
+
}
|
|
11627
|
+
get $actionLinks() {
|
|
11628
|
+
return this.querySelectorAll("px-action-link");
|
|
11629
|
+
}
|
|
11630
|
+
get $backdropFilter() {
|
|
11631
|
+
return this.shadowRoot.querySelector("#backdrop-filter");
|
|
11632
|
+
}
|
|
11633
|
+
get $burgerMenu() {
|
|
11634
|
+
return this.shadowRoot.querySelector("px-button-icon");
|
|
11635
|
+
}
|
|
11636
|
+
get $targetGroupDropdown() {
|
|
11637
|
+
return this.querySelector('px-dropdown[slot="target-group"]');
|
|
11638
|
+
}
|
|
11639
|
+
get $userLanguageDropdown() {
|
|
11640
|
+
return this.querySelector('px-dropdown[slot="user-language"]');
|
|
11641
|
+
}
|
|
11642
|
+
get $dropDownZoneDesktop() {
|
|
11643
|
+
return this.shadowRoot.querySelector("#dropdown-zone-desktop");
|
|
11644
|
+
}
|
|
11645
|
+
}
|
|
11646
|
+
if (!customElements.get("px-header")) {
|
|
11647
|
+
customElements.define("px-header", Header);
|
|
11648
|
+
}
|
|
11357
11649
|
const styles$4 = ":host([hidden]){display:none;padding-block:0}px-container{position:relative;display:flex;flex-direction:column;overflow:auto}@media screen and (max-width: 767px){px-container{height:100dvh}}px-container>px-button-icon{position:absolute;top:2em;right:1em}@media screen and (max-width: 767px){px-container>px-button-icon{display:none;right:0}}@media screen and (min-width: 767px){px-container>px-stack{width:1044px}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-h1{display:none}@media screen and (max-width: 767px){px-h1{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}";
|
|
11358
11650
|
const stylesheet$3 = new CSSStyleSheet();
|
|
11359
11651
|
stylesheet$3.replaceSync(styles$4);
|
|
@@ -11500,7 +11792,7 @@ class MddSection extends HTMLElement {
|
|
|
11500
11792
|
constructor() {
|
|
11501
11793
|
super();
|
|
11502
11794
|
this.template = `<px-vstack gap="default">
|
|
11503
|
-
<px-h1 variant="title-l" color="
|
|
11795
|
+
<px-h1 variant="title-l" color="neutral" variant--mobile="title-xl">
|
|
11504
11796
|
<slot name="title"></slot>
|
|
11505
11797
|
</px-h1>
|
|
11506
11798
|
<div id="section-wrapper">
|
|
@@ -11520,7 +11812,7 @@ class MddSection extends HTMLElement {
|
|
|
11520
11812
|
if (!customElements.get("px-mdd-section")) {
|
|
11521
11813
|
customElements.define("px-mdd-section", MddSection);
|
|
11522
11814
|
}
|
|
11523
|
-
const styles$2 =
|
|
11815
|
+
const styles$2 = '.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)}a:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}@media only screen and (max-width: 47.9375em){px-hstack{display:block;padding:1em 0;background-color:#fff;border-radius:1em}}@media only screen and (min-width: 48em){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
|
|
11524
11816
|
const stylesheet$1 = new CSSStyleSheet();
|
|
11525
11817
|
stylesheet$1.replaceSync(styles$2);
|
|
11526
11818
|
class MddSectionItem extends HTMLElement {
|
|
@@ -11529,7 +11821,10 @@ class MddSectionItem extends HTMLElement {
|
|
|
11529
11821
|
super();
|
|
11530
11822
|
this.template = `
|
|
11531
11823
|
<px-hstack align-items="center">
|
|
11532
|
-
<span
|
|
11824
|
+
<span class="mdd-section-item-action-container">
|
|
11825
|
+
<slot></slot>
|
|
11826
|
+
<slot name="after"></slot>
|
|
11827
|
+
</span>
|
|
11533
11828
|
<px-spacer></px-spacer>
|
|
11534
11829
|
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
11535
11830
|
</px-hstack>`;
|
|
@@ -11560,6 +11855,12 @@ class MddSectionItem extends HTMLElement {
|
|
|
11560
11855
|
} else if (this.hasAttribute("for")) {
|
|
11561
11856
|
this.addEventListener("click", this.handleClick);
|
|
11562
11857
|
}
|
|
11858
|
+
if (this.$after && this.$after.localName === "px-icon") {
|
|
11859
|
+
this.configureAfterIcon(this.$after);
|
|
11860
|
+
}
|
|
11861
|
+
if (this.$link) {
|
|
11862
|
+
this.$arrowIcon.style.display = "none";
|
|
11863
|
+
}
|
|
11563
11864
|
}
|
|
11564
11865
|
handleClick() {
|
|
11565
11866
|
const event = new CustomEvent("section-item-click", {
|
|
@@ -11569,6 +11870,13 @@ class MddSectionItem extends HTMLElement {
|
|
|
11569
11870
|
});
|
|
11570
11871
|
this.dispatchEvent(event);
|
|
11571
11872
|
}
|
|
11873
|
+
configureAfterIcon(icon) {
|
|
11874
|
+
icon.addEventListener("click", () => {
|
|
11875
|
+
this.$link.focus();
|
|
11876
|
+
});
|
|
11877
|
+
icon.setAttribute("size", "2xs");
|
|
11878
|
+
icon.setAttribute("color", "inherit");
|
|
11879
|
+
}
|
|
11572
11880
|
get href() {
|
|
11573
11881
|
return this.getAttribute("href");
|
|
11574
11882
|
}
|
|
@@ -11581,11 +11889,19 @@ class MddSectionItem extends HTMLElement {
|
|
|
11581
11889
|
get $button() {
|
|
11582
11890
|
return this.shadowRoot.querySelector("button");
|
|
11583
11891
|
}
|
|
11892
|
+
get $after() {
|
|
11893
|
+
return this.querySelector('[slot="after"]');
|
|
11894
|
+
}
|
|
11895
|
+
get $arrowIcon() {
|
|
11896
|
+
return this.shadowRoot.querySelector(
|
|
11897
|
+
'px-icon[name="chevron_right"]'
|
|
11898
|
+
);
|
|
11899
|
+
}
|
|
11584
11900
|
}
|
|
11585
11901
|
if (!customElements.get("px-mdd-section-item")) {
|
|
11586
11902
|
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
11587
11903
|
}
|
|
11588
|
-
const statusCss = ":host,:host>*{display:block;box-sizing:border-box}.status{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:
|
|
11904
|
+
const statusCss = ":host,:host>*{display:block;box-sizing:border-box}.status{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-font-line-height-m);color:var(--px-color-text-brand-default)}.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 only screen and (min-width: 768px){.status{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.status{font-size:var(--px-text-size-label-m-desktop)}}";
|
|
11589
11905
|
const statusStyles = new CSSStyleSheet();
|
|
11590
11906
|
statusStyles.replaceSync(statusCss);
|
|
11591
11907
|
const statusStateValues = [
|
|
@@ -11603,7 +11919,7 @@ const _Status = class _Status extends PxElement {
|
|
|
11603
11919
|
this.template = () => `
|
|
11604
11920
|
<div class="status">
|
|
11605
11921
|
<px-hstack gap="2xs" align-items="flex-start">
|
|
11606
|
-
<px-icon name="information_fill" from="lavender" size="
|
|
11922
|
+
<px-icon name="information_fill" from="lavender" size="m" color="content-brand"></px-icon>
|
|
11607
11923
|
<slot name="label"></slot>
|
|
11608
11924
|
</px-hstack>
|
|
11609
11925
|
</div>`;
|
|
@@ -11676,7 +11992,7 @@ const _Status = class _Status extends PxElement {
|
|
|
11676
11992
|
}
|
|
11677
11993
|
updateState(state) {
|
|
11678
11994
|
if (!this.checkName(statusStateValues, state)) {
|
|
11679
|
-
console.error(`${state} is not a valid state value
|
|
11995
|
+
console.error(`${state} is not a valid state value`);
|
|
11680
11996
|
return;
|
|
11681
11997
|
}
|
|
11682
11998
|
const iconMap = {
|
|
@@ -11793,7 +12109,7 @@ const _Status = class _Status extends PxElement {
|
|
|
11793
12109
|
_Status.nativeName = "div";
|
|
11794
12110
|
let Status = _Status;
|
|
11795
12111
|
customElements.define("px-status", Status);
|
|
11796
|
-
const styles$1 = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;position:relative;text-decoration:none;font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:
|
|
12112
|
+
const styles$1 = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;position:relative;text-decoration:none;font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__container{height:100%}.card .card__content{position:relative;background-color:var(--card-background-color-default);flex-grow:1;z-index:2}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover .card__content{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-heading-2xl-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-label-l-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size);flex:0 0 auto}@media only screen and (max-width: 767px){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px) and (max-width: 1024px){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px){.card{font-size:var(--px-text-size-label-l-desktop);outline-width:var(--px-focus-outline-desktop)}.card:focus-visible{outline-offset:var(--px-focus-offset-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-2xl-desktop)}::slotted([slot="content"]){font-size:var(--px-text-size-label-l-desktop)}}@media only screen and (min-width: 1025px){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}.card{font-size:var(--px-text-size-label-l-desktop);outline-width:var(--px-focus-outline-desktop)}.card:focus-visible{outline-offset:var(--px-focus-offset-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-2xl-desktop)}::slotted([slot="content"]){font-size:var(--px-text-size-label-l-desktop)}.media-position-top--laptop .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--laptop) .card__container,.media-position-left--laptop .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--laptop,.media-position-left--laptop .card__container .card__media-left--laptop{background-size:cover;background-position:center center;width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,.media-position-background--laptop .card__content{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,.media-position-background--laptop:hover .card__content{background-color:transparent}}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card .card__content{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 767px){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,:host([inverted]) .media-position-background--mobile .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,:host([inverted]) .media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,:host([inverted]) .media-position-background--tablet .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,:host([inverted]) .media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 1025px){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,:host([inverted]) .media-position-background--laptop .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,:host([inverted]) .media-position-background--laptop:hover .card__content{background-color:transparent}}';
|
|
11797
12113
|
const styleSheet = new CSSStyleSheet();
|
|
11798
12114
|
styleSheet.replaceSync(styles$1);
|
|
11799
12115
|
const cardBackgroundColorValues = [
|
|
@@ -11972,7 +12288,7 @@ const _Card = class _Card extends PxElement {
|
|
|
11972
12288
|
updateMediaPosition(attrName, newValue, attrValue) {
|
|
11973
12289
|
if (!checkName(attrValue, newValue)) {
|
|
11974
12290
|
console.error(
|
|
11975
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12291
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
11976
12292
|
this.$el
|
|
11977
12293
|
);
|
|
11978
12294
|
return;
|
|
@@ -12125,7 +12441,7 @@ const _Card = class _Card extends PxElement {
|
|
|
12125
12441
|
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
12126
12442
|
if (!checkName(attrValue, newValue)) {
|
|
12127
12443
|
console.error(
|
|
12128
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12444
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
12129
12445
|
this.$el
|
|
12130
12446
|
);
|
|
12131
12447
|
return;
|
|
@@ -12148,7 +12464,7 @@ const _Card = class _Card extends PxElement {
|
|
|
12148
12464
|
updateMediaLeftSize(attrName, oldValue, newValue, attrValue) {
|
|
12149
12465
|
if (!checkName(attrValue, newValue)) {
|
|
12150
12466
|
console.error(
|
|
12151
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12467
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
12152
12468
|
this.$el
|
|
12153
12469
|
);
|
|
12154
12470
|
return;
|
|
@@ -12808,7 +13124,6 @@ export {
|
|
|
12808
13124
|
ContentHeader,
|
|
12809
13125
|
Drawer,
|
|
12810
13126
|
Dropdown,
|
|
12811
|
-
Entrypoint,
|
|
12812
13127
|
Fieldset,
|
|
12813
13128
|
Grid,
|
|
12814
13129
|
H1,
|
|
@@ -12819,6 +13134,8 @@ export {
|
|
|
12819
13134
|
H6,
|
|
12820
13135
|
HIDE_EVENT,
|
|
12821
13136
|
HStack,
|
|
13137
|
+
Header,
|
|
13138
|
+
HeaderItem,
|
|
12822
13139
|
Icon,
|
|
12823
13140
|
IconSet,
|
|
12824
13141
|
Image,
|
|
@@ -12877,7 +13194,6 @@ export {
|
|
|
12877
13194
|
assetContainerImgWidthValues,
|
|
12878
13195
|
backgroundColorValues,
|
|
12879
13196
|
backgroundSizeValues,
|
|
12880
|
-
backgroundValues,
|
|
12881
13197
|
borderColorValues,
|
|
12882
13198
|
borderRadiusValues,
|
|
12883
13199
|
borderSideValues,
|
|
@@ -12925,6 +13241,7 @@ export {
|
|
|
12925
13241
|
linkVariantValues,
|
|
12926
13242
|
noBorderRadiusValues,
|
|
12927
13243
|
observedAttributes,
|
|
13244
|
+
overflowValues,
|
|
12928
13245
|
paddingValues,
|
|
12929
13246
|
patchShapeValues,
|
|
12930
13247
|
patchVariantValues,
|