@proximus/lavender 1.0.0-alpha.24 → 1.0.0-alpha.27
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 +2194 -501
- package/dist/lavender.umd.js +1 -1
- package/package.json +4 -21
package/dist/lavender.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const commonStyles = "
|
|
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}}";
|
|
2
2
|
function getSupportedAttributeNames(htmlElementName) {
|
|
3
3
|
const $element = document.createElement(htmlElementName);
|
|
4
4
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -82,7 +82,7 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
82
82
|
case "basis--tablet":
|
|
83
83
|
case "basis--laptop":
|
|
84
84
|
case "basis--desktop":
|
|
85
|
-
this.
|
|
85
|
+
this.style.setProperty(`--${name}-value`, newValue);
|
|
86
86
|
break;
|
|
87
87
|
case "align-self":
|
|
88
88
|
case "align-self--mobile":
|
|
@@ -133,46 +133,23 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
133
133
|
}
|
|
134
134
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
135
135
|
const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
|
|
136
|
-
const breakpoints = [];
|
|
137
136
|
if (!hasBreakpoint) {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
if (!this.getAttribute(cssPropertyName + "--desktop")) {
|
|
148
|
-
breakpoints.push("desktop");
|
|
149
|
-
}
|
|
150
|
-
breakpoints.forEach((breakpoint) => {
|
|
151
|
-
WithExtraAttributes.prototype.updateStyle.call(
|
|
152
|
-
this,
|
|
153
|
-
cssPropertyName,
|
|
154
|
-
breakpoint,
|
|
155
|
-
oldValue
|
|
156
|
-
);
|
|
157
|
-
WithExtraAttributes.prototype.updateStyle.call(
|
|
158
|
-
this,
|
|
159
|
-
cssPropertyName,
|
|
160
|
-
breakpoint,
|
|
161
|
-
newValue
|
|
162
|
-
);
|
|
163
|
-
});
|
|
137
|
+
this.style.setProperty(
|
|
138
|
+
`--${cssPropertyName}-value`,
|
|
139
|
+
oldValue
|
|
140
|
+
);
|
|
141
|
+
this.style.setProperty(
|
|
142
|
+
`--${cssPropertyName}-value`,
|
|
143
|
+
newValue
|
|
144
|
+
);
|
|
164
145
|
} else {
|
|
165
146
|
const breakpoint = name.split("--")[1];
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
cssPropertyName,
|
|
169
|
-
breakpoint,
|
|
147
|
+
this.style.setProperty(
|
|
148
|
+
`--${cssPropertyName}--${breakpoint}-value`,
|
|
170
149
|
oldValue
|
|
171
150
|
);
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
cssPropertyName,
|
|
175
|
-
breakpoint,
|
|
151
|
+
this.style.setProperty(
|
|
152
|
+
`--${cssPropertyName}--${breakpoint}-value`,
|
|
176
153
|
newValue
|
|
177
154
|
);
|
|
178
155
|
}
|
|
@@ -461,16 +438,20 @@ class PxElement extends WithExtraAttributes {
|
|
|
461
438
|
if (name === "constructor") {
|
|
462
439
|
continue;
|
|
463
440
|
}
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
this.$el[name]
|
|
441
|
+
try {
|
|
442
|
+
Object.defineProperty(this, name, {
|
|
443
|
+
get() {
|
|
444
|
+
return this.$el[name];
|
|
445
|
+
},
|
|
446
|
+
set(value) {
|
|
447
|
+
if (this.$el[name] !== value) {
|
|
448
|
+
this.$el[name] = value;
|
|
449
|
+
}
|
|
471
450
|
}
|
|
472
|
-
}
|
|
473
|
-
})
|
|
451
|
+
});
|
|
452
|
+
} catch (e) {
|
|
453
|
+
console.warn(`Could not create property ${name} for`, this.$el, e);
|
|
454
|
+
}
|
|
474
455
|
}
|
|
475
456
|
if (this.isGrid || this.isStack) {
|
|
476
457
|
const parentDirection = (_a = this.parentElement) == null ? void 0 : _a.getAttribute("direction");
|
|
@@ -484,13 +465,7 @@ class PxElement extends WithExtraAttributes {
|
|
|
484
465
|
return this.shadowRoot.querySelector(this.nativeName);
|
|
485
466
|
}
|
|
486
467
|
}
|
|
487
|
-
const gridGapValues = [
|
|
488
|
-
"",
|
|
489
|
-
"default",
|
|
490
|
-
"inside-section-none",
|
|
491
|
-
"inside-section-default",
|
|
492
|
-
"inside-section-l"
|
|
493
|
-
];
|
|
468
|
+
const gridGapValues = ["", "default", "none", "l"];
|
|
494
469
|
const flexboxAlignSelfValues = [
|
|
495
470
|
"",
|
|
496
471
|
"default",
|
|
@@ -577,11 +552,11 @@ const colorValues = [
|
|
|
577
552
|
"",
|
|
578
553
|
"default",
|
|
579
554
|
"inherit",
|
|
580
|
-
"
|
|
581
|
-
"
|
|
582
|
-
"
|
|
583
|
-
"
|
|
584
|
-
"
|
|
555
|
+
"brand",
|
|
556
|
+
"container-default",
|
|
557
|
+
"state-hover",
|
|
558
|
+
"state-active",
|
|
559
|
+
"state-disabled",
|
|
585
560
|
"body-neutral-strong",
|
|
586
561
|
"body-neutral-weak",
|
|
587
562
|
"heading-brand",
|
|
@@ -618,11 +593,11 @@ const borderValues = ["", "none", "s", "m", "l"];
|
|
|
618
593
|
const borderRadiusValues = ["", "none", "main", "pill"];
|
|
619
594
|
const borderColorValues = [
|
|
620
595
|
"none",
|
|
621
|
-
"
|
|
622
|
-
"
|
|
623
|
-
"
|
|
624
|
-
"
|
|
625
|
-
"
|
|
596
|
+
"main",
|
|
597
|
+
"brand",
|
|
598
|
+
"state-hover",
|
|
599
|
+
"state-active",
|
|
600
|
+
"neutral",
|
|
626
601
|
"purpose-success",
|
|
627
602
|
"purpose-warning",
|
|
628
603
|
"purpose-error",
|
|
@@ -641,22 +616,22 @@ const borderSideValues = [
|
|
|
641
616
|
const backgroundColorValues = [
|
|
642
617
|
"",
|
|
643
618
|
"none",
|
|
644
|
-
"
|
|
645
|
-
"
|
|
619
|
+
"surface-light",
|
|
620
|
+
"surface-default",
|
|
621
|
+
"surface-strong",
|
|
622
|
+
"surface-stronger",
|
|
623
|
+
"surface-dark",
|
|
624
|
+
"surface-brand",
|
|
625
|
+
"surface-brand-light",
|
|
626
|
+
"container-primary",
|
|
627
|
+
"container-secondary",
|
|
628
|
+
"state-hover",
|
|
629
|
+
"state-hover-bordered",
|
|
630
|
+
"state-active",
|
|
631
|
+
"state-disabled",
|
|
632
|
+
"container-default",
|
|
646
633
|
"container-light",
|
|
647
|
-
"container-
|
|
648
|
-
"container-neutral-rich",
|
|
649
|
-
"container-brand-primary",
|
|
650
|
-
"container-brand-secondary",
|
|
651
|
-
"action-primary",
|
|
652
|
-
"action-secondary",
|
|
653
|
-
"action-hover",
|
|
654
|
-
"action-hover-bordered",
|
|
655
|
-
"action-active",
|
|
656
|
-
"action-disabled",
|
|
657
|
-
"action-neutral",
|
|
658
|
-
"action-neutral-hover",
|
|
659
|
-
"action-neutral-bare",
|
|
634
|
+
"container-strong",
|
|
660
635
|
"purpose-success",
|
|
661
636
|
"purpose-warning",
|
|
662
637
|
"purpose-error",
|
|
@@ -732,20 +707,15 @@ const gradientValues = [
|
|
|
732
707
|
"color-bottom-right-green"
|
|
733
708
|
];
|
|
734
709
|
const gapValues = [
|
|
735
|
-
"
|
|
736
|
-
"
|
|
737
|
-
"
|
|
738
|
-
"
|
|
739
|
-
"
|
|
740
|
-
"
|
|
710
|
+
"none",
|
|
711
|
+
"2xs",
|
|
712
|
+
"xs",
|
|
713
|
+
"s",
|
|
714
|
+
"default",
|
|
715
|
+
"l",
|
|
741
716
|
"heading-to-subtitle",
|
|
742
717
|
"heading-to-content",
|
|
743
|
-
"
|
|
744
|
-
"inside-section-xs",
|
|
745
|
-
"inside-section-s",
|
|
746
|
-
"inside-section-default",
|
|
747
|
-
"inside-section-l",
|
|
748
|
-
"between-sections"
|
|
718
|
+
"page-layout-between-sections"
|
|
749
719
|
];
|
|
750
720
|
const noBorderRadiusValues = [
|
|
751
721
|
"",
|
|
@@ -830,34 +800,40 @@ function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
|
830
800
|
targetElement.setAttribute("id", id);
|
|
831
801
|
sourceElement.setAttribute("aria-labelledby", id);
|
|
832
802
|
}
|
|
833
|
-
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "") {
|
|
803
|
+
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
834
804
|
const stylesheet2 = new CSSStyleSheet();
|
|
835
805
|
const styles2 = attributeValues.reduce(
|
|
836
806
|
(prev, attributeValue) => prev + `
|
|
837
807
|
${selector(attributeName, attributeValue)} {
|
|
838
|
-
|
|
839
|
-
@media only screen and (max-width: 768px) {
|
|
808
|
+
@media only screen and (max-width: 767px) {
|
|
840
809
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
810
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
841
811
|
}
|
|
812
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
813
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
842
814
|
}
|
|
843
815
|
${selector(attributeName, attributeValue, "mobile")} {
|
|
844
|
-
@media only screen and (max-width:
|
|
816
|
+
@media only screen and (max-width: 767px) {
|
|
845
817
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
|
|
818
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
846
819
|
}
|
|
847
820
|
}
|
|
848
821
|
${selector(attributeName, attributeValue, "tablet")} {
|
|
849
|
-
@media only screen and (min-width:
|
|
850
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-
|
|
822
|
+
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
|
823
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
824
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
851
825
|
}
|
|
852
826
|
}
|
|
853
827
|
${selector(attributeName, attributeValue, "laptop")} {
|
|
854
|
-
@media only screen and (min-width:
|
|
855
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-
|
|
828
|
+
@media only screen and (min-width: 768px) {
|
|
829
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
830
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
856
831
|
}
|
|
857
832
|
}
|
|
858
833
|
${selector(attributeName, attributeValue, "desktop")} {
|
|
859
|
-
@media only screen and (min-width:
|
|
834
|
+
@media only screen and (min-width: 768px) {
|
|
860
835
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
836
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
861
837
|
}
|
|
862
838
|
}`,
|
|
863
839
|
""
|
|
@@ -970,9 +946,9 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
970
946
|
this.setCSSProperties();
|
|
971
947
|
}
|
|
972
948
|
}
|
|
973
|
-
const styles$
|
|
974
|
-
const styleSheet$
|
|
975
|
-
styleSheet$
|
|
949
|
+
const styles$z = ":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)}@media screen and (min-width: 768px){.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 screen and (min-width: 1025px){.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 screen and (min-width: 1441px){.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)}}";
|
|
950
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
951
|
+
styleSheet$s.replaceSync(styles$z);
|
|
976
952
|
const directionValues = [
|
|
977
953
|
"",
|
|
978
954
|
"default",
|
|
@@ -1003,7 +979,7 @@ const justifyContentValues = [
|
|
|
1003
979
|
const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
1004
980
|
class Stack extends WithExtraAttributes {
|
|
1005
981
|
constructor() {
|
|
1006
|
-
super(styleSheet$
|
|
982
|
+
super(styleSheet$s);
|
|
1007
983
|
this.template = `<div class="flex-container">
|
|
1008
984
|
<slot></slot>
|
|
1009
985
|
</div>`;
|
|
@@ -1014,7 +990,7 @@ class Stack extends WithExtraAttributes {
|
|
|
1014
990
|
this.direction = "row";
|
|
1015
991
|
}
|
|
1016
992
|
if (!this.hasAttribute("gap")) {
|
|
1017
|
-
this.gap = "
|
|
993
|
+
this.gap = "none";
|
|
1018
994
|
}
|
|
1019
995
|
if (!this.hasAttribute("align-items")) {
|
|
1020
996
|
this.alignItems = "stretch";
|
|
@@ -1134,7 +1110,7 @@ class Stack extends WithExtraAttributes {
|
|
|
1134
1110
|
}
|
|
1135
1111
|
}
|
|
1136
1112
|
updateStyle(cssName, breakpoint, value, attrValue) {
|
|
1137
|
-
if (value
|
|
1113
|
+
if (value) {
|
|
1138
1114
|
if (cssName === "gap" && attrValue && attrValue.includes(value)) {
|
|
1139
1115
|
this.$el.style.setProperty(
|
|
1140
1116
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
@@ -1357,12 +1333,12 @@ class Spacer extends HTMLElement {
|
|
|
1357
1333
|
}
|
|
1358
1334
|
}
|
|
1359
1335
|
customElements.define("px-spacer", Spacer);
|
|
1360
|
-
const styles$
|
|
1361
|
-
const styleSheet$
|
|
1362
|
-
styleSheet$
|
|
1336
|
+
const styles$y = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}";
|
|
1337
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
1338
|
+
styleSheet$r.replaceSync(styles$y);
|
|
1363
1339
|
class Page extends WithExtraAttributes {
|
|
1364
1340
|
constructor() {
|
|
1365
|
-
super(styleSheet$
|
|
1341
|
+
super(styleSheet$r);
|
|
1366
1342
|
this.template = (stickyContainer) => `
|
|
1367
1343
|
<px-container border-radius="none" padding="none">
|
|
1368
1344
|
<px-vstack>
|
|
@@ -1434,7 +1410,7 @@ class Page extends WithExtraAttributes {
|
|
|
1434
1410
|
id="contact-container"
|
|
1435
1411
|
border-radius="none"
|
|
1436
1412
|
id="main"
|
|
1437
|
-
background-color="
|
|
1413
|
+
background-color="surface-default"
|
|
1438
1414
|
padding="none"
|
|
1439
1415
|
padding-top="xl"
|
|
1440
1416
|
padding-bottom="xl"
|
|
@@ -1576,7 +1552,7 @@ class Page extends WithExtraAttributes {
|
|
|
1576
1552
|
if (customElements.get("px-page") === void 0) {
|
|
1577
1553
|
customElements.define("px-page", Page);
|
|
1578
1554
|
}
|
|
1579
|
-
const gridCss = ":host{
|
|
1555
|
+
const gridCss = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 1025px){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
1580
1556
|
const gridStyles = new CSSStyleSheet();
|
|
1581
1557
|
gridStyles.replaceSync(gridCss);
|
|
1582
1558
|
const gridColsValues = [
|
|
@@ -1604,18 +1580,38 @@ const contentAlignmentValues = [
|
|
|
1604
1580
|
"stretch"
|
|
1605
1581
|
];
|
|
1606
1582
|
const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
|
|
1583
|
+
const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
|
|
1584
|
+
const gapPrefix = "px-spacing";
|
|
1607
1585
|
const _Grid = class _Grid extends PxElement {
|
|
1608
1586
|
constructor() {
|
|
1609
|
-
super(
|
|
1587
|
+
super(
|
|
1588
|
+
gridStyles,
|
|
1589
|
+
cssTokenBreakpoints(
|
|
1590
|
+
"gap",
|
|
1591
|
+
attributeBreakpointCSSSelector$3,
|
|
1592
|
+
gapValues,
|
|
1593
|
+
gapPrefix,
|
|
1594
|
+
"--grid-gap"
|
|
1595
|
+
)
|
|
1596
|
+
);
|
|
1610
1597
|
this.template = () => `<div class="grid">
|
|
1611
1598
|
<slot></slot>
|
|
1612
1599
|
</div>`;
|
|
1600
|
+
this.gapAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
1601
|
+
this,
|
|
1602
|
+
"gap",
|
|
1603
|
+
(newValue) => newValue,
|
|
1604
|
+
"--gap"
|
|
1605
|
+
);
|
|
1613
1606
|
this.shadowRoot.innerHTML = this.template();
|
|
1614
1607
|
}
|
|
1615
1608
|
static get observedAttributes() {
|
|
1616
1609
|
return [
|
|
1617
1610
|
...super.observedAttributes,
|
|
1618
1611
|
"gap",
|
|
1612
|
+
"gap--mobile",
|
|
1613
|
+
"gap--tablet",
|
|
1614
|
+
"gap--laptop",
|
|
1619
1615
|
"grid-cols",
|
|
1620
1616
|
"grid-cols--mobile",
|
|
1621
1617
|
"grid-cols--tablet",
|
|
@@ -1645,7 +1641,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1645
1641
|
connectedCallback() {
|
|
1646
1642
|
super.connectedCallback();
|
|
1647
1643
|
if (!this.gap) {
|
|
1648
|
-
this.gap = "
|
|
1644
|
+
this.gap = "default";
|
|
1649
1645
|
}
|
|
1650
1646
|
if (!this.alignItems) {
|
|
1651
1647
|
this.alignItems = "stretch";
|
|
@@ -1655,7 +1651,14 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1655
1651
|
if (oldValue !== newValue) {
|
|
1656
1652
|
switch (attrName) {
|
|
1657
1653
|
case "gap":
|
|
1658
|
-
|
|
1654
|
+
case "gap--mobile":
|
|
1655
|
+
case "gap--tablet":
|
|
1656
|
+
case "gap--laptop":
|
|
1657
|
+
this.gapAttributeDelegate.attributeChangedCallback(
|
|
1658
|
+
attrName,
|
|
1659
|
+
oldValue,
|
|
1660
|
+
newValue
|
|
1661
|
+
);
|
|
1659
1662
|
break;
|
|
1660
1663
|
case "grid-cols":
|
|
1661
1664
|
case "grid-cols--mobile":
|
|
@@ -1752,6 +1755,24 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1752
1755
|
set gap(value) {
|
|
1753
1756
|
this.setAttribute("gap", value);
|
|
1754
1757
|
}
|
|
1758
|
+
get gapMobile() {
|
|
1759
|
+
return this.getAttribute("gap--mobile");
|
|
1760
|
+
}
|
|
1761
|
+
set gapMobile(value) {
|
|
1762
|
+
this.setAttribute("gap--mobile", value);
|
|
1763
|
+
}
|
|
1764
|
+
get gapTablet() {
|
|
1765
|
+
return this.getAttribute("gap--tablet");
|
|
1766
|
+
}
|
|
1767
|
+
set gapTablet(value) {
|
|
1768
|
+
this.setAttribute("gap--tablet", value);
|
|
1769
|
+
}
|
|
1770
|
+
get gapLaptop() {
|
|
1771
|
+
return this.getAttribute("gap--laptop");
|
|
1772
|
+
}
|
|
1773
|
+
set gapLaptop(value) {
|
|
1774
|
+
this.setAttribute("gap--laptop", value);
|
|
1775
|
+
}
|
|
1755
1776
|
get gridCols() {
|
|
1756
1777
|
return this.getAttribute("grid-cols");
|
|
1757
1778
|
}
|
|
@@ -1900,18 +1921,18 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1900
1921
|
_Grid.nativeName = "div";
|
|
1901
1922
|
let Grid = _Grid;
|
|
1902
1923
|
customElements.define("px-grid", Grid);
|
|
1903
|
-
const buttonCss = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-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-border-color-action-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-border-color-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-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);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-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-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-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);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-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-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-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.actionable-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-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-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}}@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-after-element-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-after-element-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-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.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-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
|
|
1904
|
-
const linkCss = '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-line-height-m);font-weight:400;color:var(--px-
|
|
1905
|
-
const styles$
|
|
1906
|
-
const styles$
|
|
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:400;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)}}';
|
|
1926
|
+
const styles$x = ".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:700;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)}}";
|
|
1927
|
+
const styles$w = ":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:400;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)}}";
|
|
1907
1928
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
1908
1929
|
const linkStyles$2 = new CSSStyleSheet();
|
|
1909
1930
|
const patchStyles = new CSSStyleSheet();
|
|
1910
1931
|
const tagStyles = new CSSStyleSheet();
|
|
1911
1932
|
buttonStyles$1.replaceSync(buttonCss);
|
|
1912
1933
|
linkStyles$2.replaceSync(linkCss);
|
|
1913
|
-
patchStyles.replaceSync(styles$
|
|
1914
|
-
tagStyles.replaceSync(styles$
|
|
1934
|
+
patchStyles.replaceSync(styles$x);
|
|
1935
|
+
tagStyles.replaceSync(styles$w);
|
|
1915
1936
|
const variantValues$1 = [
|
|
1916
1937
|
"",
|
|
1917
1938
|
"default",
|
|
@@ -1922,7 +1943,8 @@ const variantValues$1 = [
|
|
|
1922
1943
|
"patch-info",
|
|
1923
1944
|
"patch-black-friday",
|
|
1924
1945
|
"patch-eco",
|
|
1925
|
-
"actionable-tag"
|
|
1946
|
+
"actionable-tag",
|
|
1947
|
+
"header-dropdown"
|
|
1926
1948
|
];
|
|
1927
1949
|
const extendedAttributes = [
|
|
1928
1950
|
"extended",
|
|
@@ -2146,20 +2168,18 @@ let Button = _Button;
|
|
|
2146
2168
|
if (!customElements.get("px-button")) {
|
|
2147
2169
|
customElements.define("px-button", Button);
|
|
2148
2170
|
}
|
|
2149
|
-
const styles$
|
|
2171
|
+
const styles$v = ":host{line-height:1;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:1;font-style:unset;font-weight:400;-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-2xs,.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,.size-2xl{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-2xs,.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,.size-2xl{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-2xs,.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,.size-2xl{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}";
|
|
2150
2172
|
const filteredIconSizeValues = ["2xs", "xs", "s", "m", "l", "xl", "2xl"];
|
|
2151
2173
|
const iconColorValues = [
|
|
2152
2174
|
"",
|
|
2153
2175
|
"default",
|
|
2154
2176
|
"inherit",
|
|
2155
|
-
"
|
|
2156
|
-
"
|
|
2157
|
-
"
|
|
2158
|
-
"
|
|
2159
|
-
"
|
|
2160
|
-
"
|
|
2161
|
-
"action-active",
|
|
2162
|
-
"action-disabled",
|
|
2177
|
+
"neutral",
|
|
2178
|
+
"brand",
|
|
2179
|
+
"dimmed",
|
|
2180
|
+
"state-hover",
|
|
2181
|
+
"state-active",
|
|
2182
|
+
"state-disabled",
|
|
2163
2183
|
"purpose-success",
|
|
2164
2184
|
"purpose-warning",
|
|
2165
2185
|
"purpose-error",
|
|
@@ -2202,7 +2222,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2202
2222
|
this.updateAttribute(attrName, oldValue, newValue, iconColorValues);
|
|
2203
2223
|
break;
|
|
2204
2224
|
case "disabled":
|
|
2205
|
-
this.color = "
|
|
2225
|
+
this.color = "state-disabled";
|
|
2206
2226
|
break;
|
|
2207
2227
|
case "aria-label":
|
|
2208
2228
|
if (!this.internals) {
|
|
@@ -2284,11 +2304,11 @@ class Icon extends WithExtraAttributes {
|
|
|
2284
2304
|
this.setAttribute("disabled", value);
|
|
2285
2305
|
}
|
|
2286
2306
|
}
|
|
2287
|
-
const styleSheet$
|
|
2288
|
-
styleSheet$
|
|
2307
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
2308
|
+
styleSheet$q.replaceSync(styles$v);
|
|
2289
2309
|
class SVGIcon extends Icon {
|
|
2290
2310
|
constructor() {
|
|
2291
|
-
super(styleSheet$
|
|
2311
|
+
super(styleSheet$q);
|
|
2292
2312
|
this.template = () => `<svg>
|
|
2293
2313
|
<use xlink:href="#icon-${this.name}"></use>
|
|
2294
2314
|
</svg>`;
|
|
@@ -2312,6 +2332,9 @@ class SVGIcon extends Icon {
|
|
|
2312
2332
|
);
|
|
2313
2333
|
}
|
|
2314
2334
|
}
|
|
2335
|
+
if (!this.ariaLabel && this.internals) {
|
|
2336
|
+
this.internals.ariaHidden = "true";
|
|
2337
|
+
}
|
|
2315
2338
|
}
|
|
2316
2339
|
updateName(oldValue, newValue) {
|
|
2317
2340
|
if (this.src) {
|
|
@@ -2374,13 +2397,62 @@ class IconSet extends HTMLElement {
|
|
|
2374
2397
|
if (!customElements.get("px-icon-set")) {
|
|
2375
2398
|
customElements.define("px-icon-set", IconSet);
|
|
2376
2399
|
}
|
|
2377
|
-
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);
|
|
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: 767px){.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: 768px) and (max-width: 1024px){.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: 1025px){.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}}';
|
|
2378
2401
|
const containerStyles = new CSSStyleSheet();
|
|
2379
2402
|
containerStyles.replaceSync(containerCss);
|
|
2380
2403
|
const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
|
|
2404
|
+
const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
|
|
2405
|
+
const paddingPrefix$1 = "px-padding";
|
|
2381
2406
|
const _Container = class _Container extends PxElement {
|
|
2382
2407
|
constructor() {
|
|
2383
|
-
super(
|
|
2408
|
+
super(
|
|
2409
|
+
containerStyles,
|
|
2410
|
+
cssTokenBreakpoints(
|
|
2411
|
+
"padding",
|
|
2412
|
+
attributeBreakpointCSSSelector$2,
|
|
2413
|
+
paddingValues,
|
|
2414
|
+
paddingPrefix$1,
|
|
2415
|
+
"--container-padding"
|
|
2416
|
+
),
|
|
2417
|
+
cssTokenBreakpoints(
|
|
2418
|
+
"padding-inline",
|
|
2419
|
+
attributeBreakpointCSSSelector$2,
|
|
2420
|
+
paddingValues,
|
|
2421
|
+
paddingPrefix$1
|
|
2422
|
+
),
|
|
2423
|
+
cssTokenBreakpoints(
|
|
2424
|
+
"padding-block",
|
|
2425
|
+
attributeBreakpointCSSSelector$2,
|
|
2426
|
+
paddingValues,
|
|
2427
|
+
paddingPrefix$1
|
|
2428
|
+
),
|
|
2429
|
+
cssTokenBreakpoints(
|
|
2430
|
+
"padding-top",
|
|
2431
|
+
attributeBreakpointCSSSelector$2,
|
|
2432
|
+
paddingValues,
|
|
2433
|
+
paddingPrefix$1
|
|
2434
|
+
),
|
|
2435
|
+
cssTokenBreakpoints(
|
|
2436
|
+
"padding-right",
|
|
2437
|
+
attributeBreakpointCSSSelector$2,
|
|
2438
|
+
paddingValues,
|
|
2439
|
+
paddingPrefix$1,
|
|
2440
|
+
"--container-padding-right"
|
|
2441
|
+
),
|
|
2442
|
+
cssTokenBreakpoints(
|
|
2443
|
+
"padding-bottom",
|
|
2444
|
+
attributeBreakpointCSSSelector$2,
|
|
2445
|
+
paddingValues,
|
|
2446
|
+
paddingPrefix$1
|
|
2447
|
+
),
|
|
2448
|
+
cssTokenBreakpoints(
|
|
2449
|
+
"padding-left",
|
|
2450
|
+
attributeBreakpointCSSSelector$2,
|
|
2451
|
+
paddingValues,
|
|
2452
|
+
paddingPrefix$1,
|
|
2453
|
+
"--container-padding-left"
|
|
2454
|
+
)
|
|
2455
|
+
);
|
|
2384
2456
|
this.template = () => `<div class="container">
|
|
2385
2457
|
<slot name="anchor-left"></slot>
|
|
2386
2458
|
<slot name="anchor-right"></slot>
|
|
@@ -2392,34 +2464,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2392
2464
|
static get observedAttributes() {
|
|
2393
2465
|
return [
|
|
2394
2466
|
...super.observedAttributes,
|
|
2395
|
-
"padding",
|
|
2396
|
-
"padding-inline",
|
|
2397
|
-
"padding-block",
|
|
2398
|
-
"padding-top",
|
|
2399
|
-
"padding-right",
|
|
2400
|
-
"padding-bottom",
|
|
2401
|
-
"padding-left",
|
|
2402
|
-
"padding--mobile",
|
|
2403
|
-
"padding-inline--mobile",
|
|
2404
|
-
"padding-block--mobile",
|
|
2405
|
-
"padding-top--mobile",
|
|
2406
|
-
"padding-right--mobile",
|
|
2407
|
-
"padding-bottom--mobile",
|
|
2408
|
-
"padding-left--mobile",
|
|
2409
|
-
"padding--tablet",
|
|
2410
|
-
"padding-inline--tablet",
|
|
2411
|
-
"padding-block--tablet",
|
|
2412
|
-
"padding-top--tablet",
|
|
2413
|
-
"padding-right--tablet",
|
|
2414
|
-
"padding-bottom--tablet",
|
|
2415
|
-
"padding-left--tablet",
|
|
2416
|
-
"padding--laptop",
|
|
2417
|
-
"padding-inline--laptop",
|
|
2418
|
-
"padding-block--laptop",
|
|
2419
|
-
"padding-top--laptop",
|
|
2420
|
-
"padding-right--laptop",
|
|
2421
|
-
"padding-bottom--laptop",
|
|
2422
|
-
"padding-left--laptop",
|
|
2423
2467
|
"border",
|
|
2424
2468
|
"border-color",
|
|
2425
2469
|
"border-side",
|
|
@@ -2451,14 +2495,14 @@ const _Container = class _Container extends PxElement {
|
|
|
2451
2495
|
}
|
|
2452
2496
|
connectedCallback() {
|
|
2453
2497
|
super.connectedCallback();
|
|
2454
|
-
if (!this.padding
|
|
2498
|
+
if (!this.padding) {
|
|
2455
2499
|
this.padding = "m";
|
|
2456
2500
|
}
|
|
2457
2501
|
if (!this.backgroundColor) {
|
|
2458
|
-
this.backgroundColor = "
|
|
2502
|
+
this.backgroundColor = "surface-light";
|
|
2459
2503
|
}
|
|
2460
2504
|
if (!this.borderColor) {
|
|
2461
|
-
this.borderColor = "
|
|
2505
|
+
this.borderColor = "main";
|
|
2462
2506
|
}
|
|
2463
2507
|
const anchorSlot = this.querySelector("[slot]");
|
|
2464
2508
|
if (anchorSlot) {
|
|
@@ -2470,67 +2514,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2470
2514
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
2471
2515
|
if (oldValue !== newValue) {
|
|
2472
2516
|
switch (attrName) {
|
|
2473
|
-
case "padding":
|
|
2474
|
-
case "padding--mobile":
|
|
2475
|
-
case "padding--tablet":
|
|
2476
|
-
case "padding--laptop":
|
|
2477
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2478
|
-
"top",
|
|
2479
|
-
"right",
|
|
2480
|
-
"bottom",
|
|
2481
|
-
"left"
|
|
2482
|
-
]);
|
|
2483
|
-
break;
|
|
2484
|
-
case "padding-inline":
|
|
2485
|
-
case "padding-inline--mobile":
|
|
2486
|
-
case "padding-inline--tablet":
|
|
2487
|
-
case "padding-inline--laptop":
|
|
2488
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2489
|
-
"left",
|
|
2490
|
-
"right"
|
|
2491
|
-
]);
|
|
2492
|
-
break;
|
|
2493
|
-
case "padding-block":
|
|
2494
|
-
case "padding-block--mobile":
|
|
2495
|
-
case "padding-block--tablet":
|
|
2496
|
-
case "padding-block--laptop":
|
|
2497
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2498
|
-
"top",
|
|
2499
|
-
"bottom"
|
|
2500
|
-
]);
|
|
2501
|
-
break;
|
|
2502
|
-
case "padding-top":
|
|
2503
|
-
case "padding-top--mobile":
|
|
2504
|
-
case "padding-top--tablet":
|
|
2505
|
-
case "padding-top--laptop":
|
|
2506
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2507
|
-
"top"
|
|
2508
|
-
]);
|
|
2509
|
-
break;
|
|
2510
|
-
case "padding-right":
|
|
2511
|
-
case "padding-right--mobile":
|
|
2512
|
-
case "padding-right--tablet":
|
|
2513
|
-
case "padding-right--laptop":
|
|
2514
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2515
|
-
"right"
|
|
2516
|
-
]);
|
|
2517
|
-
break;
|
|
2518
|
-
case "padding-bottom":
|
|
2519
|
-
case "padding-bottom--mobile":
|
|
2520
|
-
case "padding-bottom--tablet":
|
|
2521
|
-
case "padding-bottom--laptop":
|
|
2522
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2523
|
-
"bottom"
|
|
2524
|
-
]);
|
|
2525
|
-
break;
|
|
2526
|
-
case "padding-left":
|
|
2527
|
-
case "padding-left--mobile":
|
|
2528
|
-
case "padding-left--tablet":
|
|
2529
|
-
case "padding-left--laptop":
|
|
2530
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2531
|
-
"left"
|
|
2532
|
-
]);
|
|
2533
|
-
break;
|
|
2534
2517
|
case "border":
|
|
2535
2518
|
this.updateAttribute(attrName, oldValue, newValue, borderValues);
|
|
2536
2519
|
break;
|
|
@@ -2602,37 +2585,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2602
2585
|
}
|
|
2603
2586
|
}
|
|
2604
2587
|
}
|
|
2605
|
-
updatePadding(attrName, oldValue, newValue, attrValues, sideValues) {
|
|
2606
|
-
if (!this.checkName(attrValues, newValue)) {
|
|
2607
|
-
console.error(`Bad ${attrName} value for`, this.$el);
|
|
2608
|
-
return;
|
|
2609
|
-
}
|
|
2610
|
-
const hasBreakpoint = attrName.includes("--");
|
|
2611
|
-
const breakpoint = hasBreakpoint ? attrName.split("--")[1] : "";
|
|
2612
|
-
const updateStyle = (breakpoint2, value, sideValues2, override) => {
|
|
2613
|
-
const breakpointValue = breakpoint2 === "laptop" ? "desktop" : breakpoint2;
|
|
2614
|
-
if (value !== null && value !== "" && value !== "default") {
|
|
2615
|
-
sideValues2.forEach((side) => {
|
|
2616
|
-
const propertyName = `--container-padding-${side}--${breakpoint2}`;
|
|
2617
|
-
if (override || !this.$el.style.getPropertyValue(propertyName)) {
|
|
2618
|
-
this.$el.style.setProperty(
|
|
2619
|
-
propertyName,
|
|
2620
|
-
`var(--px-padding-${value}-${breakpointValue})`
|
|
2621
|
-
);
|
|
2622
|
-
}
|
|
2623
|
-
});
|
|
2624
|
-
}
|
|
2625
|
-
};
|
|
2626
|
-
if (hasBreakpoint) {
|
|
2627
|
-
updateStyle(breakpoint, oldValue, sideValues, true);
|
|
2628
|
-
updateStyle(breakpoint, newValue, sideValues, true);
|
|
2629
|
-
} else {
|
|
2630
|
-
["mobile", "tablet", "laptop"].forEach((breakpoint2) => {
|
|
2631
|
-
updateStyle(breakpoint2, oldValue, sideValues, false);
|
|
2632
|
-
updateStyle(breakpoint2, newValue, sideValues, false);
|
|
2633
|
-
});
|
|
2634
|
-
}
|
|
2635
|
-
}
|
|
2636
2588
|
updateBackgroundImg(attrName, newValue) {
|
|
2637
2589
|
this.$el.style.setProperty(`--${attrName}`, `url("${newValue}")`);
|
|
2638
2590
|
}
|
|
@@ -2643,7 +2595,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2643
2595
|
const breakpoint = splitResult.breakpoint;
|
|
2644
2596
|
this.$el.style.setProperty(
|
|
2645
2597
|
`--${attrName}${breakpoint}`,
|
|
2646
|
-
`linear-gradient(var(--px-
|
|
2598
|
+
`linear-gradient(var(--px-color-background-gradient-${newValue}))`
|
|
2647
2599
|
);
|
|
2648
2600
|
} else {
|
|
2649
2601
|
console.error(
|
|
@@ -2652,16 +2604,17 @@ const _Container = class _Container extends PxElement {
|
|
|
2652
2604
|
}
|
|
2653
2605
|
}
|
|
2654
2606
|
updateBackgroundColor(attrName, newValue) {
|
|
2607
|
+
const isSurfaceColor = newValue.startsWith("surface-");
|
|
2655
2608
|
if (this.checkName(backgroundColorValues, newValue)) {
|
|
2656
2609
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2657
2610
|
const breakpoint = splitResult.breakpoint;
|
|
2658
2611
|
this.$el.style.setProperty(
|
|
2659
2612
|
`--${splitResult.attrName}${breakpoint}`,
|
|
2660
|
-
`var(--px-background
|
|
2613
|
+
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-default"})`
|
|
2661
2614
|
);
|
|
2662
2615
|
this.$el.style.setProperty(
|
|
2663
2616
|
`--${splitResult.attrName}-inverted${breakpoint}`,
|
|
2664
|
-
`var(--px-background
|
|
2617
|
+
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-inverted"})`
|
|
2665
2618
|
);
|
|
2666
2619
|
} else {
|
|
2667
2620
|
console.error(
|
|
@@ -2673,11 +2626,11 @@ const _Container = class _Container extends PxElement {
|
|
|
2673
2626
|
if (this.checkName(borderColorValues, newValue)) {
|
|
2674
2627
|
this.$el.style.setProperty(
|
|
2675
2628
|
`--${attrName}`,
|
|
2676
|
-
`var(--px-border
|
|
2629
|
+
`var(--px-color-border-${newValue}-default)`
|
|
2677
2630
|
);
|
|
2678
2631
|
this.$el.style.setProperty(
|
|
2679
2632
|
`--${attrName}-inverted`,
|
|
2680
|
-
`var(--px-border
|
|
2633
|
+
`var(--px-color-border-${newValue}-inverted)`
|
|
2681
2634
|
);
|
|
2682
2635
|
} else {
|
|
2683
2636
|
console.error(
|
|
@@ -3073,8 +3026,8 @@ const _Container = class _Container extends PxElement {
|
|
|
3073
3026
|
_Container.nativeName = "div";
|
|
3074
3027
|
let Container = _Container;
|
|
3075
3028
|
customElements.define("px-container", Container);
|
|
3076
|
-
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-
|
|
3077
|
-
const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-
|
|
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( --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:700}: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:900}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:900}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:300}.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)}}";
|
|
3030
|
+
const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-action-neutral{color:var(--px-color-text-neutral-default)}.color-action-hover{color:var(--px-color-text-state-hover-default)}.color-action-active{color:var(--px-color-text-state-active-default)}.color-action-disabled{color:var(--px-color-text-state-disabled-default)}.color-body-neutral-strong{color:var(--px-color-text-neutral-default)}.color-body-neutral-weak{color:var(--px-color-text-dimmed-default)}.color-heading-brand{color:var(--px-color-text-brand-default)}.color-heading-neutral{color:var(--px-color-text-neutral-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)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-color-text-neutral-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)}.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: 768px){.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: 1025px){.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-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}";
|
|
3078
3031
|
const headingStyles$2 = new CSSStyleSheet();
|
|
3079
3032
|
headingStyles$2.replaceSync(headingCss);
|
|
3080
3033
|
const typographyStyles$5 = new CSSStyleSheet();
|
|
@@ -3286,27 +3239,30 @@ const _H6 = class _H6 extends AbstractHeading {
|
|
|
3286
3239
|
_H6.nativeName = "h6";
|
|
3287
3240
|
let H6 = _H6;
|
|
3288
3241
|
customElements.define("px-h6", H6);
|
|
3289
|
-
const styles$
|
|
3290
|
-
const styleSheet$
|
|
3291
|
-
styleSheet$
|
|
3242
|
+
const styles$u = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.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: 768px){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
|
|
3243
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
3244
|
+
styleSheet$p.replaceSync(styles$u);
|
|
3292
3245
|
class Section extends HTMLElement {
|
|
3293
3246
|
constructor() {
|
|
3294
3247
|
super();
|
|
3295
3248
|
this.template = () => `
|
|
3296
3249
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
3297
|
-
<div class="content-wrapper">
|
|
3250
|
+
<div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
|
|
3298
3251
|
<px-vstack gap="heading-to-content">
|
|
3299
3252
|
<slot name="heading"></slot>
|
|
3300
|
-
<px-vstack gap="
|
|
3253
|
+
<px-vstack gap="none">
|
|
3301
3254
|
<slot></slot>
|
|
3302
3255
|
</px-vstack>
|
|
3303
3256
|
</px-vstack>
|
|
3304
3257
|
</div>
|
|
3305
3258
|
</px-container>
|
|
3259
|
+
<div class="content-wrapper">
|
|
3260
|
+
<slot name="overlap"></slot>
|
|
3261
|
+
</div>
|
|
3306
3262
|
`;
|
|
3307
3263
|
this.attachShadow({ mode: "open" });
|
|
3308
3264
|
this.shadowRoot.innerHTML = this.template();
|
|
3309
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3265
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
3310
3266
|
}
|
|
3311
3267
|
connectedCallback() {
|
|
3312
3268
|
const headingSlot = this.querySelector('[slot="heading"]');
|
|
@@ -3314,7 +3270,7 @@ class Section extends HTMLElement {
|
|
|
3314
3270
|
this.$container.paddingBlock = "none";
|
|
3315
3271
|
}
|
|
3316
3272
|
if (!headingSlot) {
|
|
3317
|
-
this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "
|
|
3273
|
+
this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
|
|
3318
3274
|
}
|
|
3319
3275
|
}
|
|
3320
3276
|
static get observedAttributes() {
|
|
@@ -3430,6 +3386,9 @@ class Section extends HTMLElement {
|
|
|
3430
3386
|
}
|
|
3431
3387
|
}
|
|
3432
3388
|
}
|
|
3389
|
+
get $slotOverlap() {
|
|
3390
|
+
return this.querySelector('[slot="overlap"]');
|
|
3391
|
+
}
|
|
3433
3392
|
get backgroundColor() {
|
|
3434
3393
|
return this.getAttribute("background-color") || "none";
|
|
3435
3394
|
}
|
|
@@ -3582,7 +3541,7 @@ class Section extends HTMLElement {
|
|
|
3582
3541
|
}
|
|
3583
3542
|
}
|
|
3584
3543
|
customElements.define("px-section", Section);
|
|
3585
|
-
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:after{content:"";width:var(--px-
|
|
3544
|
+
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:after{content:"";width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;background-color:var(--px-color-background-container-secondary-default);background-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-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover:after{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-block: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:hover{background-color:var(--px-color-background-container-default-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:700;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:after{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:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary:after{background-color:var(--px-color-background-container-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) details summary:hover:after{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:after{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: 768px){details:not(.single) slot[name=content]{padding-block:var(--px-padding-s-desktop)}details:not(.single) summary{padding:var(--px-padding-s-desktop);gap:var(--px-spacing-s-desktop)}details.single summary{padding-block:var(--px-padding-2xs-desktop);gap:var(--px-spacing-xs-desktop)}details.single summary:hover{gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}details.single summary:hover:after{margin-right:calc(var(--px-padding-xs-desktop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-desktop)}}@media only screen and (min-width: 1025px){details:not(.single) slot[name=content]{padding-block:var(--px-padding-s-desktop)}details:not(.single) summary{padding:var(--px-padding-s-desktop);gap:var(--px-spacing-s-desktop)}details.single summary{padding-block:var(--px-padding-2xs-desktop);gap:var(--px-spacing-xs-desktop)}details.single summary:hover{gap:var(--px-spacing-2xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}details.single summary:hover:after{margin-right:calc(var(--px-padding-xs-desktop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-desktop)}}`;
|
|
3586
3545
|
const accordionStyles = new CSSStyleSheet();
|
|
3587
3546
|
accordionStyles.replaceSync(accordionCss);
|
|
3588
3547
|
const variantValues = ["", "none", "single"];
|
|
@@ -3643,13 +3602,31 @@ _Accordion.nativeName = "details";
|
|
|
3643
3602
|
let Accordion = _Accordion;
|
|
3644
3603
|
customElements.define("px-accordion", Accordion);
|
|
3645
3604
|
const imgCss = ':host{display:inline-block;line-height:0}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){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.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)}:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.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)}:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.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)}}';
|
|
3646
|
-
const styleSheet$
|
|
3647
|
-
styleSheet$
|
|
3605
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
3606
|
+
styleSheet$o.replaceSync(imgCss);
|
|
3648
3607
|
const breakpointsValues = ["", "mobile", "tablet", "laptop"];
|
|
3649
|
-
const imageWidthValues = ["", "
|
|
3608
|
+
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3609
|
+
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3610
|
+
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
3611
|
+
const heightPrefix = "px-image";
|
|
3650
3612
|
class AbstractImage extends PxElement {
|
|
3651
3613
|
constructor() {
|
|
3652
|
-
super(
|
|
3614
|
+
super(
|
|
3615
|
+
styleSheet$o,
|
|
3616
|
+
cssTokenBreakpoints(
|
|
3617
|
+
"height",
|
|
3618
|
+
heightAttributeBreakpointCSSSelector,
|
|
3619
|
+
imageHeightValues,
|
|
3620
|
+
heightPrefix,
|
|
3621
|
+
"--img-height"
|
|
3622
|
+
)
|
|
3623
|
+
);
|
|
3624
|
+
this.heightAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
3625
|
+
this,
|
|
3626
|
+
"height",
|
|
3627
|
+
(newValue) => newValue,
|
|
3628
|
+
"--img-height"
|
|
3629
|
+
);
|
|
3653
3630
|
}
|
|
3654
3631
|
static get observedAttributes() {
|
|
3655
3632
|
return [
|
|
@@ -3666,6 +3643,11 @@ class AbstractImage extends PxElement {
|
|
|
3666
3643
|
"width--tablet",
|
|
3667
3644
|
"width--laptop",
|
|
3668
3645
|
"width--desktop",
|
|
3646
|
+
"height",
|
|
3647
|
+
"height--mobile",
|
|
3648
|
+
"height--tablet",
|
|
3649
|
+
"height--laptop",
|
|
3650
|
+
"height--desktop",
|
|
3669
3651
|
"disabled"
|
|
3670
3652
|
];
|
|
3671
3653
|
}
|
|
@@ -3702,6 +3684,24 @@ class AbstractImage extends PxElement {
|
|
|
3702
3684
|
case "width--desktop":
|
|
3703
3685
|
this.updateWidth(attrName, oldValue, newValue, imageWidthValues);
|
|
3704
3686
|
break;
|
|
3687
|
+
case "height":
|
|
3688
|
+
case "height--mobile":
|
|
3689
|
+
case "height--tablet":
|
|
3690
|
+
case "height--laptop":
|
|
3691
|
+
case "height--desktop":
|
|
3692
|
+
this.heightAttributeDelegate.attributeChangedCallback(
|
|
3693
|
+
attrName,
|
|
3694
|
+
oldValue,
|
|
3695
|
+
newValue
|
|
3696
|
+
);
|
|
3697
|
+
break;
|
|
3698
|
+
case "disabled":
|
|
3699
|
+
if (newValue !== null) {
|
|
3700
|
+
this.$el.setAttribute("aria-disabled", "true");
|
|
3701
|
+
} else {
|
|
3702
|
+
this.$el.removeAttribute("aria-disabled");
|
|
3703
|
+
}
|
|
3704
|
+
break;
|
|
3705
3705
|
default:
|
|
3706
3706
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
3707
3707
|
break;
|
|
@@ -3862,6 +3862,56 @@ class AbstractImage extends PxElement {
|
|
|
3862
3862
|
set disabled(value) {
|
|
3863
3863
|
this.setAttribute("disabled", value);
|
|
3864
3864
|
}
|
|
3865
|
+
get height() {
|
|
3866
|
+
return this.getAttribute("height");
|
|
3867
|
+
}
|
|
3868
|
+
set height(value) {
|
|
3869
|
+
if (value) {
|
|
3870
|
+
this.setAttribute("height", value);
|
|
3871
|
+
} else {
|
|
3872
|
+
this.removeAttribute("height");
|
|
3873
|
+
}
|
|
3874
|
+
}
|
|
3875
|
+
get heightMobile() {
|
|
3876
|
+
return this.getAttribute("height--mobile");
|
|
3877
|
+
}
|
|
3878
|
+
set heightMobile(value) {
|
|
3879
|
+
if (value) {
|
|
3880
|
+
this.setAttribute("height--mobile", value);
|
|
3881
|
+
} else {
|
|
3882
|
+
this.removeAttribute("height--mobile");
|
|
3883
|
+
}
|
|
3884
|
+
}
|
|
3885
|
+
get heightTablet() {
|
|
3886
|
+
return this.getAttribute("height--tablet");
|
|
3887
|
+
}
|
|
3888
|
+
set heightTablet(value) {
|
|
3889
|
+
if (value) {
|
|
3890
|
+
this.setAttribute("height--tablet", value);
|
|
3891
|
+
} else {
|
|
3892
|
+
this.removeAttribute("height--tablet");
|
|
3893
|
+
}
|
|
3894
|
+
}
|
|
3895
|
+
get heightLaptop() {
|
|
3896
|
+
return this.getAttribute("height--laptop");
|
|
3897
|
+
}
|
|
3898
|
+
set heightLaptop(value) {
|
|
3899
|
+
if (value) {
|
|
3900
|
+
this.setAttribute("height--laptop", value);
|
|
3901
|
+
} else {
|
|
3902
|
+
this.removeAttribute("height--laptop");
|
|
3903
|
+
}
|
|
3904
|
+
}
|
|
3905
|
+
get heightDesktop() {
|
|
3906
|
+
return this.getAttribute("height--desktop");
|
|
3907
|
+
}
|
|
3908
|
+
set heightDesktop(value) {
|
|
3909
|
+
if (value) {
|
|
3910
|
+
this.setAttribute("height--desktop", value);
|
|
3911
|
+
} else {
|
|
3912
|
+
this.removeAttribute("height--desktop");
|
|
3913
|
+
}
|
|
3914
|
+
}
|
|
3865
3915
|
}
|
|
3866
3916
|
const _Image = class _Image extends AbstractImage {
|
|
3867
3917
|
constructor() {
|
|
@@ -4028,8 +4078,8 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
4028
4078
|
_Picture.nativeName = "picture";
|
|
4029
4079
|
let Picture = _Picture;
|
|
4030
4080
|
customElements.define("px-picture", Picture);
|
|
4031
|
-
const styleSheet$
|
|
4032
|
-
styleSheet$
|
|
4081
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
4082
|
+
styleSheet$n.replaceSync(styles$x);
|
|
4033
4083
|
const patchVariantValues = [
|
|
4034
4084
|
"",
|
|
4035
4085
|
"default",
|
|
@@ -4051,7 +4101,7 @@ class Patch extends HTMLElement {
|
|
|
4051
4101
|
super();
|
|
4052
4102
|
this.attachShadow({ mode: "open" });
|
|
4053
4103
|
this.shadowRoot.innerHTML = this.template();
|
|
4054
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4104
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n];
|
|
4055
4105
|
}
|
|
4056
4106
|
static get observedAttributes() {
|
|
4057
4107
|
return ["variant", "shape", "inverted"];
|
|
@@ -4116,9 +4166,9 @@ class Patch extends HTMLElement {
|
|
|
4116
4166
|
if (!customElements.get("px-patch")) {
|
|
4117
4167
|
customElements.define("px-patch", Patch);
|
|
4118
4168
|
}
|
|
4119
|
-
const css$1 = '.price{--price-s: var(--px-text-size-heading-l-mobile);--price-m: var(--px-text-size-heading-xl-mobile);--price-l: var(--px-text-size-heading-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-
|
|
4120
|
-
const styles$
|
|
4121
|
-
styles$
|
|
4169
|
+
const css$1 = '.price{--price-s: var(--px-text-size-heading-l-mobile);--price-m: var(--px-text-size-heading-xl-mobile);--price-l: var(--px-text-size-heading-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-color-text-brand-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-heading-l-desktop);--price-m: var(--px-text-size-heading-xl-desktop);--price-l: var(--px-text-size-heading-3xl-desktop)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-heading-l-desktop);--price-m: var(--px-text-size-heading-xl-desktop);--price-l: var(--px-text-size-heading-3xl-desktop)}}.purpose-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:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-label-m-desktop)}}::slotted([slot="newpurpose-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]) .purpose-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(.purpose-promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
|
|
4170
|
+
const styles$t = new CSSStyleSheet();
|
|
4171
|
+
styles$t.replaceSync(css$1);
|
|
4122
4172
|
const priceVariantValues = [
|
|
4123
4173
|
"default",
|
|
4124
4174
|
"purpose-promo",
|
|
@@ -4130,7 +4180,7 @@ const priceVariantValues = [
|
|
|
4130
4180
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
4131
4181
|
const _Price = class _Price extends PxElement {
|
|
4132
4182
|
constructor() {
|
|
4133
|
-
super(styles$
|
|
4183
|
+
super(styles$t);
|
|
4134
4184
|
this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpurpose-promoprice"></slot><slot></slot></span>`;
|
|
4135
4185
|
this.shadowRoot.innerHTML = this.template();
|
|
4136
4186
|
}
|
|
@@ -4235,12 +4285,12 @@ const _Price = class _Price extends PxElement {
|
|
|
4235
4285
|
_Price.nativeName = "span";
|
|
4236
4286
|
let Price = _Price;
|
|
4237
4287
|
customElements.define("px-price", Price);
|
|
4238
|
-
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);white-space:nowrap;text-align:left;color:var(--px-
|
|
4239
|
-
const styles$
|
|
4240
|
-
styles$
|
|
4288
|
+
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;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)}}";
|
|
4289
|
+
const styles$s = new CSSStyleSheet();
|
|
4290
|
+
styles$s.replaceSync(css);
|
|
4241
4291
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
4242
4292
|
constructor() {
|
|
4243
|
-
super(styles$
|
|
4293
|
+
super(styles$s);
|
|
4244
4294
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
4245
4295
|
this.shadowRoot.innerHTML = this.template();
|
|
4246
4296
|
}
|
|
@@ -4248,9 +4298,9 @@ const _Ribbon = class _Ribbon extends PxElement {
|
|
|
4248
4298
|
_Ribbon.nativeName = "div";
|
|
4249
4299
|
let Ribbon = _Ribbon;
|
|
4250
4300
|
customElements.define("px-ribbon", Ribbon);
|
|
4251
|
-
const styles$
|
|
4252
|
-
const styleSheet$
|
|
4253
|
-
styleSheet$
|
|
4301
|
+
const styles$r = ".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
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
4303
|
+
styleSheet$m.replaceSync(styles$r);
|
|
4254
4304
|
const separatorDirectionValues = [
|
|
4255
4305
|
"",
|
|
4256
4306
|
"default",
|
|
@@ -4262,9 +4312,9 @@ const separatorColorValues = [
|
|
|
4262
4312
|
"",
|
|
4263
4313
|
"default",
|
|
4264
4314
|
"none",
|
|
4265
|
-
"
|
|
4266
|
-
"
|
|
4267
|
-
"
|
|
4315
|
+
"state-hover",
|
|
4316
|
+
"state-active",
|
|
4317
|
+
"container-default",
|
|
4268
4318
|
"container-main",
|
|
4269
4319
|
"container-brand",
|
|
4270
4320
|
"purpose-success",
|
|
@@ -4274,7 +4324,7 @@ const separatorColorValues = [
|
|
|
4274
4324
|
];
|
|
4275
4325
|
const _Separator = class _Separator extends PxElement {
|
|
4276
4326
|
constructor() {
|
|
4277
|
-
super(styleSheet$
|
|
4327
|
+
super(styleSheet$m);
|
|
4278
4328
|
const $root = document.createElement(this.nativeName);
|
|
4279
4329
|
$root.classList.add("separator");
|
|
4280
4330
|
this.shadowRoot.appendChild($root);
|
|
@@ -4444,11 +4494,11 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4444
4494
|
_Separator.nativeName = "hr";
|
|
4445
4495
|
let Separator = _Separator;
|
|
4446
4496
|
customElements.define("px-separator", Separator);
|
|
4447
|
-
const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-
|
|
4497
|
+
const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
|
|
4448
4498
|
const buttonIconStyles = new CSSStyleSheet();
|
|
4449
4499
|
buttonIconStyles.replaceSync(buttonIconCss);
|
|
4450
4500
|
const buttonIconSizeValues = ["", "default", "small"];
|
|
4451
|
-
const buttonIconVariantValues = ["", "default", "secondary"];
|
|
4501
|
+
const buttonIconVariantValues = ["", "default", "secondary", "naked"];
|
|
4452
4502
|
const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
4453
4503
|
constructor() {
|
|
4454
4504
|
super(buttonIconStyles);
|
|
@@ -4574,8 +4624,8 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4574
4624
|
if (!customElements.get("px-button-icon")) {
|
|
4575
4625
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4576
4626
|
}
|
|
4577
|
-
const styleSheet$
|
|
4578
|
-
styleSheet$
|
|
4627
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
4628
|
+
styleSheet$l.replaceSync(styles$w);
|
|
4579
4629
|
const _Tag = class _Tag extends PxElement {
|
|
4580
4630
|
template() {
|
|
4581
4631
|
return `
|
|
@@ -4587,9 +4637,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
4587
4637
|
`;
|
|
4588
4638
|
}
|
|
4589
4639
|
constructor() {
|
|
4590
|
-
super(styleSheet$
|
|
4640
|
+
super(styleSheet$l);
|
|
4591
4641
|
this.shadowRoot.innerHTML = this.template();
|
|
4592
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4642
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
4593
4643
|
}
|
|
4594
4644
|
connectedCallback() {
|
|
4595
4645
|
super.connectedCallback();
|
|
@@ -4650,9 +4700,9 @@ let Tag = _Tag;
|
|
|
4650
4700
|
if (!customElements.get("px-tag")) {
|
|
4651
4701
|
customElements.define("px-tag", Tag);
|
|
4652
4702
|
}
|
|
4653
|
-
const styles$
|
|
4654
|
-
const styleSheet$
|
|
4655
|
-
styleSheet$
|
|
4703
|
+
const styles$q = '*{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
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
4705
|
+
styleSheet$k.replaceSync(styles$q);
|
|
4656
4706
|
class Tabs extends HTMLElement {
|
|
4657
4707
|
constructor() {
|
|
4658
4708
|
var _a;
|
|
@@ -4682,7 +4732,7 @@ class Tabs extends HTMLElement {
|
|
|
4682
4732
|
this._label = this.getAttribute("label");
|
|
4683
4733
|
}
|
|
4684
4734
|
this.shadowRoot.innerHTML = this.template();
|
|
4685
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4735
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$k];
|
|
4686
4736
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4687
4737
|
if (this.internals) {
|
|
4688
4738
|
this.internals.role = "tablist";
|
|
@@ -4854,9 +4904,9 @@ class Tabs extends HTMLElement {
|
|
|
4854
4904
|
return this.getAttribute("aria-label-previous");
|
|
4855
4905
|
}
|
|
4856
4906
|
}
|
|
4857
|
-
const styles$
|
|
4858
|
-
const styleSheet$
|
|
4859
|
-
styleSheet$
|
|
4907
|
+
const styles$p = "*{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:700;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
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
4909
|
+
styleSheet$j.replaceSync(styles$p);
|
|
4860
4910
|
class Tab extends HTMLElement {
|
|
4861
4911
|
constructor() {
|
|
4862
4912
|
var _a;
|
|
@@ -4868,7 +4918,7 @@ class Tab extends HTMLElement {
|
|
|
4868
4918
|
`;
|
|
4869
4919
|
this.attachShadow({ mode: "open" });
|
|
4870
4920
|
this.shadowRoot.innerHTML = this.template();
|
|
4871
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4921
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$j];
|
|
4872
4922
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4873
4923
|
if (this.internals) {
|
|
4874
4924
|
this.internals.role = "tab";
|
|
@@ -4955,7 +5005,7 @@ class TabPanel extends HTMLElement {
|
|
|
4955
5005
|
`;
|
|
4956
5006
|
this.attachShadow({ mode: "open" });
|
|
4957
5007
|
this.shadowRoot.innerHTML = this.template();
|
|
4958
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5008
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$k];
|
|
4959
5009
|
}
|
|
4960
5010
|
static get observedAttributes() {
|
|
4961
5011
|
return ["name"];
|
|
@@ -5034,9 +5084,9 @@ class PxTabPanel extends TabPanel {
|
|
|
5034
5084
|
if (!customElements.get("px-tab-panel")) {
|
|
5035
5085
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
5036
5086
|
}
|
|
5037
|
-
const styles$
|
|
5038
|
-
const styleSheet$
|
|
5039
|
-
styleSheet$
|
|
5087
|
+
const styles$o = ".timeline{list-style:none;margin:0;padding:0}";
|
|
5088
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
5089
|
+
styleSheet$i.replaceSync(styles$o);
|
|
5040
5090
|
class Timeline extends HTMLElement {
|
|
5041
5091
|
template() {
|
|
5042
5092
|
return `
|
|
@@ -5049,7 +5099,7 @@ class Timeline extends HTMLElement {
|
|
|
5049
5099
|
super();
|
|
5050
5100
|
this.attachShadow({ mode: "open" });
|
|
5051
5101
|
this.shadowRoot.innerHTML = this.template();
|
|
5052
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5102
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$i];
|
|
5053
5103
|
}
|
|
5054
5104
|
static get observedAttributes() {
|
|
5055
5105
|
return ["inverted"];
|
|
@@ -5093,9 +5143,9 @@ class Timeline extends HTMLElement {
|
|
|
5093
5143
|
if (!customElements.get("px-timeline")) {
|
|
5094
5144
|
customElements.define("px-timeline", Timeline);
|
|
5095
5145
|
}
|
|
5096
|
-
const styles$
|
|
5097
|
-
const styleSheet$
|
|
5098
|
-
styleSheet$
|
|
5146
|
+
const styles$n = '.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:700;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:700;font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:400;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
|
+
const styleSheet$h = new CSSStyleSheet();
|
|
5148
|
+
styleSheet$h.replaceSync(styles$n);
|
|
5099
5149
|
let item = "1";
|
|
5100
5150
|
class TimelineItem extends HTMLElement {
|
|
5101
5151
|
template() {
|
|
@@ -5115,7 +5165,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5115
5165
|
super();
|
|
5116
5166
|
this.attachShadow({ mode: "open" });
|
|
5117
5167
|
this.shadowRoot.innerHTML = this.template();
|
|
5118
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5168
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$h];
|
|
5119
5169
|
}
|
|
5120
5170
|
static get observedAttributes() {
|
|
5121
5171
|
return ["inverted", "lastchild", "item"];
|
|
@@ -5167,7 +5217,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5167
5217
|
if (!customElements.get("px-timeline-item")) {
|
|
5168
5218
|
customElements.define("px-timeline-item", TimelineItem);
|
|
5169
5219
|
}
|
|
5170
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-
|
|
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:400;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}}";
|
|
5171
5221
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
5172
5222
|
const typographyStyles$4 = new CSSStyleSheet();
|
|
5173
5223
|
const headingStyles$1 = new CSSStyleSheet();
|
|
@@ -5176,7 +5226,7 @@ typographyStyles$4.replaceSync(typographyCss$1);
|
|
|
5176
5226
|
headingStyles$1.replaceSync(headingCss);
|
|
5177
5227
|
const _Paragraph = class _Paragraph extends PxElement {
|
|
5178
5228
|
constructor() {
|
|
5179
|
-
super(
|
|
5229
|
+
super(typographyStyles$4, headingStyles$1, paragraphStyles$1);
|
|
5180
5230
|
this.template = () => `<p><slot></slot></p>`;
|
|
5181
5231
|
this.shadowRoot.innerHTML = this.template();
|
|
5182
5232
|
}
|
|
@@ -5188,6 +5238,9 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5188
5238
|
"font-size",
|
|
5189
5239
|
"font-weight",
|
|
5190
5240
|
"text-align",
|
|
5241
|
+
"text-align--mobile",
|
|
5242
|
+
"text-align--tablet",
|
|
5243
|
+
"text-align--laptop",
|
|
5191
5244
|
"inverted",
|
|
5192
5245
|
"disabled"
|
|
5193
5246
|
];
|
|
@@ -5208,10 +5261,13 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5208
5261
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5209
5262
|
break;
|
|
5210
5263
|
case "text-align":
|
|
5264
|
+
case "text-align--mobile":
|
|
5265
|
+
case "text-align--tablet":
|
|
5266
|
+
case "text-align--laptop":
|
|
5211
5267
|
this.updateTypography(attrName, oldValue, newValue, textalignValues);
|
|
5212
5268
|
break;
|
|
5213
5269
|
case "disabled":
|
|
5214
|
-
this.color = "
|
|
5270
|
+
this.color = "state-disabled";
|
|
5215
5271
|
break;
|
|
5216
5272
|
default:
|
|
5217
5273
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -5238,46 +5294,84 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5238
5294
|
}
|
|
5239
5295
|
}
|
|
5240
5296
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
5241
|
-
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
5242
|
-
this.$el.classList.toggle(`${attrName}-${oldValue}`);
|
|
5243
|
-
}
|
|
5244
|
-
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
5245
|
-
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5246
|
-
}
|
|
5247
5297
|
if (!this.checkName(attrValue, newValue)) {
|
|
5248
|
-
console.error(
|
|
5249
|
-
|
|
5250
|
-
|
|
5251
|
-
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5298
|
+
console.error(
|
|
5299
|
+
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
5300
|
+
);
|
|
5301
|
+
} else {
|
|
5302
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
5303
|
+
const breakpoint = splitResult.breakpoint;
|
|
5304
|
+
if (oldValue !== null && oldValue !== "") {
|
|
5305
|
+
this.$el.classList.toggle(
|
|
5306
|
+
`${splitResult.attrName}-${oldValue}${breakpoint}`
|
|
5307
|
+
);
|
|
5308
|
+
}
|
|
5309
|
+
if (newValue !== null && newValue !== "") {
|
|
5310
|
+
this.$el.classList.toggle(
|
|
5311
|
+
`${splitResult.attrName}-${newValue}${breakpoint}`
|
|
5312
|
+
);
|
|
5313
|
+
}
|
|
5314
|
+
}
|
|
5315
|
+
}
|
|
5316
|
+
splitAttrNameFromBreakpoint(attrName) {
|
|
5317
|
+
let breakpoint = "";
|
|
5318
|
+
if (["--mobile", "--tablet", "--laptop"].some(
|
|
5319
|
+
(suffix) => attrName.includes(suffix)
|
|
5320
|
+
)) {
|
|
5321
|
+
const attrNameSplit = attrName.split("--");
|
|
5322
|
+
attrName = attrNameSplit[0];
|
|
5323
|
+
breakpoint = `--${attrNameSplit[1]}`;
|
|
5324
|
+
}
|
|
5325
|
+
return { attrName, breakpoint };
|
|
5326
|
+
}
|
|
5327
|
+
get variant() {
|
|
5328
|
+
return this.getAttribute("variant");
|
|
5329
|
+
}
|
|
5330
|
+
set variant(value) {
|
|
5331
|
+
this.setAttribute("variant", value);
|
|
5332
|
+
}
|
|
5257
5333
|
get color() {
|
|
5258
5334
|
return this.getAttribute("color");
|
|
5259
5335
|
}
|
|
5260
5336
|
set color(value) {
|
|
5261
5337
|
this.setAttribute("color", value);
|
|
5262
5338
|
}
|
|
5263
|
-
get
|
|
5339
|
+
get fontSize() {
|
|
5264
5340
|
return this.getAttribute("font-size");
|
|
5265
5341
|
}
|
|
5266
|
-
set
|
|
5342
|
+
set fontSize(value) {
|
|
5267
5343
|
this.setAttribute("font-size", value);
|
|
5268
5344
|
}
|
|
5269
|
-
get
|
|
5345
|
+
get fontWeight() {
|
|
5270
5346
|
return this.getAttribute("font-weight");
|
|
5271
5347
|
}
|
|
5272
|
-
set
|
|
5348
|
+
set fontWeight(value) {
|
|
5273
5349
|
this.setAttribute("font-weight", value);
|
|
5274
5350
|
}
|
|
5275
|
-
get
|
|
5351
|
+
get textAlign() {
|
|
5276
5352
|
return this.getAttribute("text-align");
|
|
5277
5353
|
}
|
|
5278
|
-
set
|
|
5354
|
+
set textAlign(value) {
|
|
5279
5355
|
this.setAttribute("text-align", value);
|
|
5280
5356
|
}
|
|
5357
|
+
get textAlignMobile() {
|
|
5358
|
+
return this.getAttribute("text-align--mobile");
|
|
5359
|
+
}
|
|
5360
|
+
set textAlignMobile(value) {
|
|
5361
|
+
this.setAttribute("text-align--mobile", value);
|
|
5362
|
+
}
|
|
5363
|
+
get textAlignTablet() {
|
|
5364
|
+
return this.getAttribute("text-align--tablet");
|
|
5365
|
+
}
|
|
5366
|
+
set textAlignTablet(value) {
|
|
5367
|
+
this.setAttribute("text-align--tablet", value);
|
|
5368
|
+
}
|
|
5369
|
+
get textAlignLaptop() {
|
|
5370
|
+
return this.getAttribute("text-align--laptop");
|
|
5371
|
+
}
|
|
5372
|
+
set textAlignLaptop(value) {
|
|
5373
|
+
this.setAttribute("text-align--laptop", value);
|
|
5374
|
+
}
|
|
5281
5375
|
get inverted() {
|
|
5282
5376
|
return this.getAttribute("inverted");
|
|
5283
5377
|
}
|
|
@@ -5294,20 +5388,20 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5294
5388
|
_Paragraph.nativeName = "p";
|
|
5295
5389
|
let Paragraph = _Paragraph;
|
|
5296
5390
|
customElements.define("px-p", Paragraph);
|
|
5297
|
-
const styles$
|
|
5298
|
-
const styleSheet$
|
|
5299
|
-
styleSheet$
|
|
5391
|
+
const styles$m = "#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
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
5393
|
+
styleSheet$g.replaceSync(styles$m);
|
|
5300
5394
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
5301
5395
|
class Modal extends HTMLElement {
|
|
5302
5396
|
constructor() {
|
|
5303
5397
|
super();
|
|
5304
5398
|
this.template = ` <dialog>
|
|
5305
5399
|
<div id="container">
|
|
5306
|
-
<px-vstack gap="
|
|
5307
|
-
<px-hstack id="icon-container" gap="
|
|
5400
|
+
<px-vstack gap="default" >
|
|
5401
|
+
<px-hstack id="icon-container" gap="s" align-items="flex-start">
|
|
5308
5402
|
${this.getAttribute("status") ? `<px-icon size="l" name="checkmark_fill" from="lavender" color="purpose-${this.getAttribute("status")}"></px-icon>` : ""}
|
|
5309
5403
|
|
|
5310
|
-
<px-vstack gap="
|
|
5404
|
+
<px-vstack gap="s">
|
|
5311
5405
|
<px-h1 variant="title-l">
|
|
5312
5406
|
<slot name="title"></slot>
|
|
5313
5407
|
</px-h1>
|
|
@@ -5322,7 +5416,7 @@ class Modal extends HTMLElement {
|
|
|
5322
5416
|
<px-separator size="m"></px-separator>
|
|
5323
5417
|
<px-stack
|
|
5324
5418
|
gap--mobile="heading-to-content"
|
|
5325
|
-
gap="
|
|
5419
|
+
gap="default"
|
|
5326
5420
|
justify-content="flex-end"
|
|
5327
5421
|
direction="row"
|
|
5328
5422
|
direction--mobile="column-reverse"
|
|
@@ -5337,7 +5431,7 @@ class Modal extends HTMLElement {
|
|
|
5337
5431
|
</dialog>`;
|
|
5338
5432
|
this.attachShadow({ mode: "open" });
|
|
5339
5433
|
this.shadowRoot.innerHTML = this.template;
|
|
5340
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5434
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$g];
|
|
5341
5435
|
}
|
|
5342
5436
|
connectedCallback() {
|
|
5343
5437
|
if (this.hasAttribute("open")) {
|
|
@@ -5453,7 +5547,7 @@ class Modal extends HTMLElement {
|
|
|
5453
5547
|
if (!customElements.get("px-modal")) {
|
|
5454
5548
|
customElements.define("px-modal", Modal);
|
|
5455
5549
|
}
|
|
5456
|
-
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-
|
|
5550
|
+
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 768px){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media only screen and (min-width: 1025px){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}";
|
|
5457
5551
|
const spanStyles$1 = new CSSStyleSheet();
|
|
5458
5552
|
const typographyStyles$3 = new CSSStyleSheet();
|
|
5459
5553
|
spanStyles$1.replaceSync(spanCss);
|
|
@@ -5491,7 +5585,7 @@ const _Span = class _Span extends PxElement {
|
|
|
5491
5585
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5492
5586
|
break;
|
|
5493
5587
|
case "disabled":
|
|
5494
|
-
this.color = "
|
|
5588
|
+
this.color = "state-disabled";
|
|
5495
5589
|
break;
|
|
5496
5590
|
default:
|
|
5497
5591
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -5565,7 +5659,8 @@ const linkVariantValues = [
|
|
|
5565
5659
|
"skip-link",
|
|
5566
5660
|
"btn-default",
|
|
5567
5661
|
"btn-secondary",
|
|
5568
|
-
"btn-tertiary"
|
|
5662
|
+
"btn-tertiary",
|
|
5663
|
+
"icon-link"
|
|
5569
5664
|
];
|
|
5570
5665
|
const linkShapeValues = ["", "default", "alternative"];
|
|
5571
5666
|
const _Link = class _Link extends PxElement {
|
|
@@ -5591,24 +5686,13 @@ const _Link = class _Link extends PxElement {
|
|
|
5591
5686
|
}
|
|
5592
5687
|
connectedCallback() {
|
|
5593
5688
|
super.connectedCallback();
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
icons.forEach((icon) => {
|
|
5597
|
-
const iconSize = icon.getAttribute("size");
|
|
5598
|
-
const iconColor = icon.getAttribute("color");
|
|
5599
|
-
if (icon) {
|
|
5600
|
-
icon.addEventListener("click", () => {
|
|
5601
|
-
this.$el.focus();
|
|
5602
|
-
});
|
|
5603
|
-
if (!iconSize) {
|
|
5604
|
-
icon.setAttribute("size", "2xs");
|
|
5605
|
-
}
|
|
5606
|
-
if (!iconColor) {
|
|
5607
|
-
icon.setAttribute("color", "inherit");
|
|
5608
|
-
}
|
|
5609
|
-
}
|
|
5610
|
-
});
|
|
5689
|
+
if (this.$before && this.$before.localName === "px-icon") {
|
|
5690
|
+
this.configureBeforeAfterIcon(this.$before);
|
|
5611
5691
|
}
|
|
5692
|
+
if (this.$after && this.$after.localName === "px-icon") {
|
|
5693
|
+
this.configureBeforeAfterIcon(this.$after);
|
|
5694
|
+
}
|
|
5695
|
+
transferAccessibilityAttributes(this, this.$el);
|
|
5612
5696
|
}
|
|
5613
5697
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5614
5698
|
if (oldValue !== newValue) {
|
|
@@ -5643,6 +5727,19 @@ const _Link = class _Link extends PxElement {
|
|
|
5643
5727
|
}
|
|
5644
5728
|
}
|
|
5645
5729
|
}
|
|
5730
|
+
configureBeforeAfterIcon(icon) {
|
|
5731
|
+
const iconSize = icon.getAttribute("size");
|
|
5732
|
+
const iconColor = icon.getAttribute("color");
|
|
5733
|
+
icon.addEventListener("click", () => {
|
|
5734
|
+
this.$el.focus();
|
|
5735
|
+
});
|
|
5736
|
+
if (!iconSize) {
|
|
5737
|
+
icon.setAttribute("size", "2xs");
|
|
5738
|
+
}
|
|
5739
|
+
if (!iconColor) {
|
|
5740
|
+
icon.setAttribute("color", "inherit");
|
|
5741
|
+
}
|
|
5742
|
+
}
|
|
5646
5743
|
checkName(values, value) {
|
|
5647
5744
|
return values.includes(value);
|
|
5648
5745
|
}
|
|
@@ -5666,6 +5763,9 @@ const _Link = class _Link extends PxElement {
|
|
|
5666
5763
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
5667
5764
|
console.error(`Bad "variant" value for ${this.$el}`);
|
|
5668
5765
|
}
|
|
5766
|
+
if (newValue === "icon-link") {
|
|
5767
|
+
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
5768
|
+
}
|
|
5669
5769
|
}
|
|
5670
5770
|
updateShape(oldValue, newValue) {
|
|
5671
5771
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -5689,6 +5789,17 @@ const _Link = class _Link extends PxElement {
|
|
|
5689
5789
|
console.error(`Bad ${attrName} value for ${this.$el}`);
|
|
5690
5790
|
}
|
|
5691
5791
|
}
|
|
5792
|
+
get $before() {
|
|
5793
|
+
return this.querySelector('[slot="before"]');
|
|
5794
|
+
}
|
|
5795
|
+
get $after() {
|
|
5796
|
+
return this.querySelector('[slot="after"]');
|
|
5797
|
+
}
|
|
5798
|
+
get $iconNotBeforeAfter() {
|
|
5799
|
+
return this.querySelector(
|
|
5800
|
+
'px-icon:not([slot="before"], [slot="after"])'
|
|
5801
|
+
);
|
|
5802
|
+
}
|
|
5692
5803
|
get disabled() {
|
|
5693
5804
|
return this.getAttribute("disabled");
|
|
5694
5805
|
}
|
|
@@ -5743,8 +5854,8 @@ let Link = _Link;
|
|
|
5743
5854
|
if (!customElements.get("px-a")) {
|
|
5744
5855
|
customElements.define("px-a", Link);
|
|
5745
5856
|
}
|
|
5746
|
-
const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-
|
|
5747
|
-
const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
|
|
5857
|
+
const typographyCss = "*{font-family:var(--px-font-family);font-weight:400}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}::slotted(address){font-style:normal;font-weight:400}:host([inverted]) slot{color:var(--px-color-text-neutral-inverted)}";
|
|
5858
|
+
const lightStyles = ".li{padding-bottom:var(--px-padding-xs-desktop)}";
|
|
5748
5859
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
5749
5860
|
const headingStyles = new CSSStyleSheet();
|
|
5750
5861
|
const linkStyles = new CSSStyleSheet();
|
|
@@ -5786,23 +5897,23 @@ class Typography extends HTMLElement {
|
|
|
5786
5897
|
}
|
|
5787
5898
|
}
|
|
5788
5899
|
customElements.define("px-typography", Typography);
|
|
5789
|
-
const entrypointCss = ":host{display:block}a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;color:var(--px-
|
|
5900
|
+
const entrypointCss = ":host{display:block}a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);font-weight:700;color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background-color:var( --entrypoint-background-color-default, var(--px-color-background-container-light-default) );padding:var(--px-padding-s-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}a,a *{box-sizing:border-box}a px-icon,a ::slotted(px-icon){line-height:0;color:var(--px-color-icon-brand-default)}a slot[name=description]{font-weight:400;color:var(--px-color-text-dimmed-default)}a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default);color:var(--px-color-text-brand-default);background-color:var(--px-color-background-state-hover-bordered-default)}a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-color-text-brand-default)}a: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)}a:active{transform:scale(.95)}a[disabled],a[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default);background-color:var(--px-color-background-state-disabled-default)}a[disabled] px-icon,a[disabled] ::slotted(px-icon),a[aria-disabled=true] px-icon,a[aria-disabled=true] ::slotted(px-icon){color:var(--px-color-icon-state-disabled-default)}a[disabled] slot[name=description],a[aria-disabled=true] slot[name=description]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) a{color:var(--px-color-text-neutral-inverted);background-color:var( --entrypoint-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]) a px-icon,:host([inverted]) a ::slotted(px-icon){color:var(--px-color-icon-brand-inverted)}:host([inverted]) a slot[name=description]{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted);color:var(--px-color-text-brand-inverted);background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-color-text-brand-inverted)}:host([inverted]) a:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[disabled],:host([inverted]) a[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted);background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]) a[disabled] px-icon,:host([inverted]) a[disabled] ::slotted(px-icon),:host([inverted]) a[aria-disabled=true] px-icon,:host([inverted]) a[aria-disabled=true] ::slotted(px-icon){color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) a[disabled] slot[name=description],:host([inverted]) a[aria-disabled=true] slot[name=description]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-s-desktop)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){a{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-s-desktop)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}";
|
|
5790
5901
|
const entrypointStyles = new CSSStyleSheet();
|
|
5791
5902
|
entrypointStyles.replaceSync(entrypointCss);
|
|
5792
5903
|
const backgroundValues = [
|
|
5793
5904
|
"",
|
|
5794
5905
|
"default",
|
|
5795
|
-
"
|
|
5796
|
-
"
|
|
5906
|
+
"container-light",
|
|
5907
|
+
"container-default"
|
|
5797
5908
|
];
|
|
5798
5909
|
const _Entrypoint = class _Entrypoint extends PxElement {
|
|
5799
5910
|
constructor() {
|
|
5800
5911
|
super(entrypointStyles);
|
|
5801
5912
|
this.template = () => `
|
|
5802
|
-
<px-hstack gap="
|
|
5803
|
-
<px-hstack grow="2" gap="
|
|
5913
|
+
<px-hstack gap="s" align-items="center">
|
|
5914
|
+
<px-hstack grow="2" gap="s" align-items="center">
|
|
5804
5915
|
<slot name="icon"></slot>
|
|
5805
|
-
<px-vstack gap="
|
|
5916
|
+
<px-vstack gap="none" align-items="flex-start">
|
|
5806
5917
|
<slot></slot>
|
|
5807
5918
|
<slot name="description"></slot>
|
|
5808
5919
|
</px-vstack>
|
|
@@ -5891,11 +6002,11 @@ const _Entrypoint = class _Entrypoint extends PxElement {
|
|
|
5891
6002
|
if (value !== null && value !== "" && value !== "default") {
|
|
5892
6003
|
this.$el.style.setProperty(
|
|
5893
6004
|
`--entrypoint-background-color-default`,
|
|
5894
|
-
`var(--px-background
|
|
6005
|
+
`var(--px-color-background-${value}-default)`
|
|
5895
6006
|
);
|
|
5896
6007
|
this.$el.style.setProperty(
|
|
5897
6008
|
`--entrypoint-background-color-inverted`,
|
|
5898
|
-
`var(--px-background
|
|
6009
|
+
`var(--px-color-background-${value}-inverted)`
|
|
5899
6010
|
);
|
|
5900
6011
|
}
|
|
5901
6012
|
};
|
|
@@ -5926,10 +6037,10 @@ let Entrypoint = _Entrypoint;
|
|
|
5926
6037
|
if (!customElements.get("px-entrypoint")) {
|
|
5927
6038
|
customElements.define("px-entrypoint", Entrypoint);
|
|
5928
6039
|
}
|
|
5929
|
-
const styles$
|
|
5930
|
-
const styleSheet$
|
|
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)}}";
|
|
6041
|
+
const styleSheet$f = new CSSStyleSheet();
|
|
5931
6042
|
const typographyStyles = new CSSStyleSheet();
|
|
5932
|
-
styleSheet$
|
|
6043
|
+
styleSheet$f.replaceSync(styles$l);
|
|
5933
6044
|
typographyStyles.replaceSync(typographyCss$1);
|
|
5934
6045
|
class Spinner extends HTMLElement {
|
|
5935
6046
|
template() {
|
|
@@ -5945,7 +6056,7 @@ class Spinner extends HTMLElement {
|
|
|
5945
6056
|
this.attachShadow({ mode: "open" });
|
|
5946
6057
|
this.shadowRoot.innerHTML = this.template();
|
|
5947
6058
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
5948
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
6059
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$f, typographyStyles];
|
|
5949
6060
|
}
|
|
5950
6061
|
static get observedAttributes() {
|
|
5951
6062
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -6012,6 +6123,11 @@ class Spinner extends HTMLElement {
|
|
|
6012
6123
|
}
|
|
6013
6124
|
customElements.define("px-spinner", Spinner);
|
|
6014
6125
|
const cellVariantValues = ["", "default", "naked", "contained"];
|
|
6126
|
+
const cellBackgroundColorValues = [
|
|
6127
|
+
"",
|
|
6128
|
+
"container-light",
|
|
6129
|
+
"container-default"
|
|
6130
|
+
];
|
|
6015
6131
|
function configurePrefixIcon$1(el) {
|
|
6016
6132
|
const prefixIconHasSize = el.hasAttribute("size");
|
|
6017
6133
|
if (!prefixIconHasSize) {
|
|
@@ -6052,6 +6168,11 @@ function configurePrefixImg$1(el) {
|
|
|
6052
6168
|
}
|
|
6053
6169
|
el.setAttribute("border-radius", "pill");
|
|
6054
6170
|
}
|
|
6171
|
+
function configureCellBackgroundColor(el) {
|
|
6172
|
+
if (el.getAttribute("variant") === "contained" && !el.getAttribute("backgroundColor")) {
|
|
6173
|
+
el.setAttribute("backgroundColor", "container-light");
|
|
6174
|
+
}
|
|
6175
|
+
}
|
|
6055
6176
|
function updateVariant(element, oldValue, newValue) {
|
|
6056
6177
|
if (!checkName(cellVariantValues, newValue)) {
|
|
6057
6178
|
console.error(
|
|
@@ -6085,6 +6206,26 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
6085
6206
|
});
|
|
6086
6207
|
}
|
|
6087
6208
|
}
|
|
6209
|
+
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
6210
|
+
if (!checkName(attrValue, newValue)) {
|
|
6211
|
+
console.error(`${newValue} is not an allowed ${attrName} value for`, el);
|
|
6212
|
+
return;
|
|
6213
|
+
}
|
|
6214
|
+
const updateColorStyle = (value) => {
|
|
6215
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
6216
|
+
el.style.setProperty(
|
|
6217
|
+
`--cell-contained-background-color-default`,
|
|
6218
|
+
`var(--px-color-background-${value}-default)`
|
|
6219
|
+
);
|
|
6220
|
+
el.style.setProperty(
|
|
6221
|
+
`--cell-contained-background-color-inverted`,
|
|
6222
|
+
`var(--px-color-background-${value}-inverted)`
|
|
6223
|
+
);
|
|
6224
|
+
}
|
|
6225
|
+
};
|
|
6226
|
+
updateColorStyle(oldValue);
|
|
6227
|
+
updateColorStyle(newValue);
|
|
6228
|
+
}
|
|
6088
6229
|
function handleCellDisabled(cell, children, disabled, extraTargets = [], options = {}) {
|
|
6089
6230
|
if (disabled) {
|
|
6090
6231
|
cell.setAttribute("disabled", "");
|
|
@@ -6116,28 +6257,28 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6116
6257
|
}
|
|
6117
6258
|
}
|
|
6118
6259
|
}
|
|
6119
|
-
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-border-
|
|
6120
|
-
const styles$
|
|
6260
|
+
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$k = ':host([separator]):after{position:relative;content:"";display:var(--cell-separator--mobile, "none");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:700;color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile)}.cell ::slotted([slot="description"]){font-weight:400;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) );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) )}: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 (min-width: 768px){:host{display:block}:host:after{display:var(--cell-separator--tablet, "none")}.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)}.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: 1025px){:host{display:block}:host:after{display:var(--cell-separator--laptop, "none")}.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--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) )}}: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)}';
|
|
6121
6262
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6122
|
-
const styleSheet$
|
|
6263
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
6123
6264
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6124
|
-
styleSheet$
|
|
6265
|
+
styleSheet$e.replaceSync(styles$k);
|
|
6125
6266
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
6126
6267
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
6127
6268
|
const _Cell = class _Cell extends PxElement {
|
|
6128
6269
|
template() {
|
|
6129
6270
|
return `
|
|
6130
|
-
<px-hstack gap="
|
|
6131
|
-
<px-hstack gap="
|
|
6271
|
+
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
6272
|
+
<px-hstack gap="s" align-items="center">
|
|
6132
6273
|
<slot name="prefix"></slot>
|
|
6133
6274
|
<slot name="visual"></slot>
|
|
6134
|
-
<px-vstack gap="
|
|
6275
|
+
<px-vstack gap="2xs">
|
|
6135
6276
|
<slot></slot>
|
|
6136
6277
|
<slot name="description"></slot>
|
|
6137
6278
|
</px-vstack>
|
|
6138
6279
|
</px-hstack>
|
|
6139
|
-
<px-hstack gap="
|
|
6140
|
-
<px-stack direction="column" gap="
|
|
6280
|
+
<px-hstack gap="s" align-items="center" class="cell-layout__suffix-action-container">
|
|
6281
|
+
<px-stack direction="column" gap="2xs" align-items="flex-end" class="cell__suffix-container">
|
|
6141
6282
|
<slot name="suffix"></slot>
|
|
6142
6283
|
</px-stack>
|
|
6143
6284
|
<slot name="action-indicator"></slot>
|
|
@@ -6146,7 +6287,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6146
6287
|
`;
|
|
6147
6288
|
}
|
|
6148
6289
|
constructor() {
|
|
6149
|
-
super(styleSheet$
|
|
6290
|
+
super(styleSheet$e, commonStyleSheet$a);
|
|
6150
6291
|
const $root = document.createElement(this.nativeName);
|
|
6151
6292
|
$root.classList.add("cell");
|
|
6152
6293
|
$root.innerHTML = this.template();
|
|
@@ -6176,11 +6317,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6176
6317
|
});
|
|
6177
6318
|
}
|
|
6178
6319
|
if (slotSuffixHasMultipleButtonIcon) {
|
|
6179
|
-
this.$suffixContainer.gap = "
|
|
6320
|
+
this.$suffixContainer.gap = "s";
|
|
6180
6321
|
this.$suffixContainer.direction = "row";
|
|
6181
6322
|
this.$suffixContainer.alignItems = "center";
|
|
6182
6323
|
}
|
|
6183
6324
|
}
|
|
6325
|
+
configureCellBackgroundColor(this);
|
|
6184
6326
|
}
|
|
6185
6327
|
static get observedAttributes() {
|
|
6186
6328
|
return [
|
|
@@ -6193,7 +6335,8 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6193
6335
|
"separator--laptop",
|
|
6194
6336
|
"radius",
|
|
6195
6337
|
"radius--tablet",
|
|
6196
|
-
"radius--laptop"
|
|
6338
|
+
"radius--laptop",
|
|
6339
|
+
"background-color"
|
|
6197
6340
|
];
|
|
6198
6341
|
}
|
|
6199
6342
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6221,6 +6364,15 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6221
6364
|
case "separator--laptop":
|
|
6222
6365
|
this.configureSeparator(attrName);
|
|
6223
6366
|
break;
|
|
6367
|
+
case "background-color":
|
|
6368
|
+
updateBackgroundColor(
|
|
6369
|
+
this.$el,
|
|
6370
|
+
attrName,
|
|
6371
|
+
oldValue,
|
|
6372
|
+
newValue,
|
|
6373
|
+
cellBackgroundColorValues
|
|
6374
|
+
);
|
|
6375
|
+
break;
|
|
6224
6376
|
default:
|
|
6225
6377
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
6226
6378
|
break;
|
|
@@ -6381,17 +6533,27 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6381
6533
|
set radiusLaptop(value) {
|
|
6382
6534
|
this.setAttribute("radius--laptop", value);
|
|
6383
6535
|
}
|
|
6536
|
+
get backgroundColor() {
|
|
6537
|
+
return this.getAttribute("background-color");
|
|
6538
|
+
}
|
|
6539
|
+
set backgroundColor(value) {
|
|
6540
|
+
if (value) {
|
|
6541
|
+
this.setAttribute("background-color", value);
|
|
6542
|
+
} else {
|
|
6543
|
+
this.removeAttribute("background-color");
|
|
6544
|
+
}
|
|
6545
|
+
}
|
|
6384
6546
|
};
|
|
6385
6547
|
_Cell.nativeName = "div";
|
|
6386
6548
|
let Cell = _Cell;
|
|
6387
6549
|
if (!customElements.get("px-cell")) {
|
|
6388
6550
|
customElements.define("px-cell", Cell);
|
|
6389
6551
|
}
|
|
6390
|
-
const styles$
|
|
6552
|
+
const styles$j = '.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)}';
|
|
6391
6553
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6392
6554
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6393
|
-
const styleSheet$
|
|
6394
|
-
styleSheet$
|
|
6555
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
6556
|
+
styleSheet$d.replaceSync(styles$j);
|
|
6395
6557
|
const _CellLink = class _CellLink extends PxElement {
|
|
6396
6558
|
template() {
|
|
6397
6559
|
return `
|
|
@@ -6411,7 +6573,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6411
6573
|
`;
|
|
6412
6574
|
}
|
|
6413
6575
|
constructor() {
|
|
6414
|
-
super(styleSheet$
|
|
6576
|
+
super(styleSheet$d, commonStyleSheet$9);
|
|
6415
6577
|
const $root = document.createElement(this.nativeName);
|
|
6416
6578
|
$root.classList.add("cell-link");
|
|
6417
6579
|
$root.innerHTML = this.template();
|
|
@@ -6437,6 +6599,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6437
6599
|
this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
|
|
6438
6600
|
);
|
|
6439
6601
|
}
|
|
6602
|
+
configureCellBackgroundColor(this);
|
|
6440
6603
|
}
|
|
6441
6604
|
static get observedAttributes() {
|
|
6442
6605
|
return [
|
|
@@ -6450,7 +6613,9 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6450
6613
|
"radius",
|
|
6451
6614
|
"radius--tablet",
|
|
6452
6615
|
"radius--laptop",
|
|
6453
|
-
"target-blank-aria-label"
|
|
6616
|
+
"target-blank-aria-label",
|
|
6617
|
+
"background-color",
|
|
6618
|
+
"noicon"
|
|
6454
6619
|
];
|
|
6455
6620
|
}
|
|
6456
6621
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6487,6 +6652,15 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6487
6652
|
);
|
|
6488
6653
|
}
|
|
6489
6654
|
break;
|
|
6655
|
+
case "background-color":
|
|
6656
|
+
updateBackgroundColor(
|
|
6657
|
+
this.$el,
|
|
6658
|
+
attrName,
|
|
6659
|
+
oldValue,
|
|
6660
|
+
newValue,
|
|
6661
|
+
cellBackgroundColorValues
|
|
6662
|
+
);
|
|
6663
|
+
break;
|
|
6490
6664
|
default:
|
|
6491
6665
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
6492
6666
|
break;
|
|
@@ -6573,13 +6747,23 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6573
6747
|
set targetBlankAriaLabel(value) {
|
|
6574
6748
|
this.setAttribute("target-blank-aria-label", value);
|
|
6575
6749
|
}
|
|
6750
|
+
get backgroundColor() {
|
|
6751
|
+
return this.getAttribute("background-color");
|
|
6752
|
+
}
|
|
6753
|
+
set backgroundColor(value) {
|
|
6754
|
+
if (value) {
|
|
6755
|
+
this.setAttribute("background-color", value);
|
|
6756
|
+
} else {
|
|
6757
|
+
this.removeAttribute("background-color");
|
|
6758
|
+
}
|
|
6759
|
+
}
|
|
6576
6760
|
};
|
|
6577
6761
|
_CellLink.nativeName = "a";
|
|
6578
6762
|
let CellLink = _CellLink;
|
|
6579
6763
|
if (!customElements.get("px-cell-link")) {
|
|
6580
6764
|
customElements.define("px-cell-link", CellLink);
|
|
6581
6765
|
}
|
|
6582
|
-
const checkboxCss = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-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-line-height-m) * 1rem);font-weight:400;color:var(--px-text-color-heading-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-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-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-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-primary-default);border-color:var(--px-border-color-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-border-size-l) solid var(--px-border-color-action-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-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-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-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-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-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-border-color-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-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-border-color-action-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-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-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-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-border-color-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-background-color-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-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-text-color-heading-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-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-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-border-color-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-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-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-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-border-color-focus-outline-inverted)}@media only screen and (min-width: 768px){.checkbox{gap:var(--px-spacing-after-element-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-after-element-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)}}`;
|
|
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)}}`;
|
|
6583
6767
|
const checkboxStyles = new CSSStyleSheet();
|
|
6584
6768
|
checkboxStyles.replaceSync(checkboxCss);
|
|
6585
6769
|
const checkboxVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -6821,6 +7005,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6821
7005
|
if (this.hasAttribute("checked")) {
|
|
6822
7006
|
this.checked = true;
|
|
6823
7007
|
}
|
|
7008
|
+
configureCellBackgroundColor(this);
|
|
6824
7009
|
}
|
|
6825
7010
|
static get observedAttributes() {
|
|
6826
7011
|
return [
|
|
@@ -6837,7 +7022,8 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6837
7022
|
"value",
|
|
6838
7023
|
"state",
|
|
6839
7024
|
"checked",
|
|
6840
|
-
"checkbox-position"
|
|
7025
|
+
"checkbox-position",
|
|
7026
|
+
"background-color"
|
|
6841
7027
|
];
|
|
6842
7028
|
}
|
|
6843
7029
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6884,6 +7070,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6884
7070
|
case "checkbox-position":
|
|
6885
7071
|
this.handleCheckboxPositionChange(newValue);
|
|
6886
7072
|
break;
|
|
7073
|
+
case "background-color":
|
|
7074
|
+
updateBackgroundColor(
|
|
7075
|
+
this.$el,
|
|
7076
|
+
attrName,
|
|
7077
|
+
oldValue,
|
|
7078
|
+
newValue,
|
|
7079
|
+
cellBackgroundColorValues
|
|
7080
|
+
);
|
|
7081
|
+
break;
|
|
6887
7082
|
}
|
|
6888
7083
|
}
|
|
6889
7084
|
}
|
|
@@ -7107,6 +7302,16 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7107
7302
|
this.removeAttribute("checkbox-position");
|
|
7108
7303
|
}
|
|
7109
7304
|
}
|
|
7305
|
+
get backgroundColor() {
|
|
7306
|
+
return this.getAttribute("background-color");
|
|
7307
|
+
}
|
|
7308
|
+
set backgroundColor(value) {
|
|
7309
|
+
if (value) {
|
|
7310
|
+
this.setAttribute("background-color", value);
|
|
7311
|
+
} else {
|
|
7312
|
+
this.removeAttribute("background-color");
|
|
7313
|
+
}
|
|
7314
|
+
}
|
|
7110
7315
|
}
|
|
7111
7316
|
if (!customElements.get("px-cell-checkbox")) {
|
|
7112
7317
|
customElements.define("px-cell-checkbox", CellCheckbox);
|
|
@@ -7171,6 +7376,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7171
7376
|
if (this.hasAttribute("checked")) {
|
|
7172
7377
|
this.checked = true;
|
|
7173
7378
|
}
|
|
7379
|
+
configureCellBackgroundColor(this);
|
|
7174
7380
|
}
|
|
7175
7381
|
static get observedAttributes() {
|
|
7176
7382
|
return [
|
|
@@ -7185,7 +7391,8 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7185
7391
|
"radius--laptop",
|
|
7186
7392
|
"name",
|
|
7187
7393
|
"value",
|
|
7188
|
-
"checked"
|
|
7394
|
+
"checked",
|
|
7395
|
+
"background-color"
|
|
7189
7396
|
];
|
|
7190
7397
|
}
|
|
7191
7398
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -7219,6 +7426,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7219
7426
|
case "checked":
|
|
7220
7427
|
this.handleCheckedAttributeChange(newValue);
|
|
7221
7428
|
break;
|
|
7429
|
+
case "background-color":
|
|
7430
|
+
updateBackgroundColor(
|
|
7431
|
+
this.$el,
|
|
7432
|
+
attrName,
|
|
7433
|
+
oldValue,
|
|
7434
|
+
newValue,
|
|
7435
|
+
cellBackgroundColorValues
|
|
7436
|
+
);
|
|
7437
|
+
break;
|
|
7222
7438
|
}
|
|
7223
7439
|
}
|
|
7224
7440
|
}
|
|
@@ -7419,11 +7635,21 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7419
7635
|
this.removeAttribute("value");
|
|
7420
7636
|
}
|
|
7421
7637
|
}
|
|
7638
|
+
get backgroundColor() {
|
|
7639
|
+
return this.getAttribute("background-color");
|
|
7640
|
+
}
|
|
7641
|
+
set backgroundColor(value) {
|
|
7642
|
+
if (value) {
|
|
7643
|
+
this.setAttribute("background-color", value);
|
|
7644
|
+
} else {
|
|
7645
|
+
this.removeAttribute("background-color");
|
|
7646
|
+
}
|
|
7647
|
+
}
|
|
7422
7648
|
}
|
|
7423
7649
|
if (!customElements.get("px-cell-switch")) {
|
|
7424
7650
|
customElements.define("px-cell-switch", CellSwitch);
|
|
7425
7651
|
}
|
|
7426
|
-
const radioCss = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-border-color-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-border-color-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-m) * 1rem);font-weight:400;color:var(--px-text-color-heading-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-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-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-background-color-action-primary-default);border-color:var(--px-border-color-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-border-size-l) solid var(--px-border-color-action-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-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-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-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-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-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-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-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-border-color-action-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-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-border-color-action-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-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-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-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-border-color-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-background-color-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-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-text-color-heading-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-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-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-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-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-after-element-s-tablet)}:host(:focus-visible){outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-after-element-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)}}`;
|
|
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)}}`;
|
|
7427
7653
|
const radioStyles = new CSSStyleSheet();
|
|
7428
7654
|
radioStyles.replaceSync(radioCss);
|
|
7429
7655
|
const _RadioBase = class _RadioBase extends PxElement {
|
|
@@ -7675,17 +7901,17 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
7675
7901
|
_Radio.nativeName = "input";
|
|
7676
7902
|
let Radio = _Radio;
|
|
7677
7903
|
customElements.define("px-radio", Radio);
|
|
7678
|
-
const radiogroupCss = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-
|
|
7904
|
+
const radiogroupCss = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-xs-mobile) )}div[role=radiogroup].selectable-tag{display:inline-flex;flex-direction:row}@media screen and (min-width: 768px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--tablet, var(--px-spacing-xs-desktop) )}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--laptop, var(--px-spacing-xs-desktop) )}}";
|
|
7679
7905
|
const radiogroupStyles = new CSSStyleSheet();
|
|
7680
7906
|
radiogroupStyles.replaceSync(radiogroupCss);
|
|
7681
7907
|
const radioGroupGapValues = [
|
|
7682
7908
|
"",
|
|
7683
|
-
"
|
|
7684
|
-
"
|
|
7685
|
-
"
|
|
7686
|
-
"
|
|
7687
|
-
"
|
|
7688
|
-
"
|
|
7909
|
+
"none",
|
|
7910
|
+
"2xs",
|
|
7911
|
+
"xs",
|
|
7912
|
+
"s",
|
|
7913
|
+
"default",
|
|
7914
|
+
"l"
|
|
7689
7915
|
];
|
|
7690
7916
|
const _Radiogroup = class _Radiogroup extends PxElement {
|
|
7691
7917
|
constructor() {
|
|
@@ -7949,6 +8175,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
7949
8175
|
if (this.hasAttribute("checked")) {
|
|
7950
8176
|
this.checked = true;
|
|
7951
8177
|
}
|
|
8178
|
+
configureCellBackgroundColor(this);
|
|
7952
8179
|
}
|
|
7953
8180
|
static get observedAttributes() {
|
|
7954
8181
|
return [
|
|
@@ -7965,7 +8192,8 @@ class CellRadio extends WithExtraAttributes {
|
|
|
7965
8192
|
"value",
|
|
7966
8193
|
"state",
|
|
7967
8194
|
"checked",
|
|
7968
|
-
"radio-position"
|
|
8195
|
+
"radio-position",
|
|
8196
|
+
"background-color"
|
|
7969
8197
|
];
|
|
7970
8198
|
}
|
|
7971
8199
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -8012,6 +8240,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8012
8240
|
case "radio-position":
|
|
8013
8241
|
this.handleRadioPositionChange(newValue);
|
|
8014
8242
|
break;
|
|
8243
|
+
case "background-color":
|
|
8244
|
+
updateBackgroundColor(
|
|
8245
|
+
this.$el,
|
|
8246
|
+
attrName,
|
|
8247
|
+
oldValue,
|
|
8248
|
+
newValue,
|
|
8249
|
+
cellBackgroundColorValues
|
|
8250
|
+
);
|
|
8251
|
+
break;
|
|
8015
8252
|
}
|
|
8016
8253
|
}
|
|
8017
8254
|
}
|
|
@@ -8237,6 +8474,16 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8237
8474
|
this.removeAttribute("radio-position");
|
|
8238
8475
|
}
|
|
8239
8476
|
}
|
|
8477
|
+
get backgroundColor() {
|
|
8478
|
+
return this.getAttribute("background-color");
|
|
8479
|
+
}
|
|
8480
|
+
set backgroundColor(value) {
|
|
8481
|
+
if (value) {
|
|
8482
|
+
this.setAttribute("background-color", value);
|
|
8483
|
+
} else {
|
|
8484
|
+
this.removeAttribute("background-color");
|
|
8485
|
+
}
|
|
8486
|
+
}
|
|
8240
8487
|
}
|
|
8241
8488
|
if (!customElements.get("px-cell-radio")) {
|
|
8242
8489
|
customElements.define("px-cell-radio", CellRadio);
|
|
@@ -8331,36 +8578,36 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
8331
8578
|
}
|
|
8332
8579
|
}
|
|
8333
8580
|
}
|
|
8334
|
-
const styles$
|
|
8335
|
-
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-border-
|
|
8336
|
-
const styleSheet$
|
|
8337
|
-
styleSheet$
|
|
8581
|
+
const styles$i = '.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:700;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:400;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:400}: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
|
+
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
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
8584
|
+
styleSheet$c.replaceSync(styles$i);
|
|
8338
8585
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
8339
8586
|
commonStyleSheet$5.replaceSync(common);
|
|
8340
8587
|
const tileBackgroundColorValues = [
|
|
8341
8588
|
"",
|
|
8342
8589
|
"default",
|
|
8343
|
-
"
|
|
8344
|
-
"
|
|
8345
|
-
"
|
|
8590
|
+
"container-light",
|
|
8591
|
+
"container-default",
|
|
8592
|
+
"state-disabled"
|
|
8346
8593
|
];
|
|
8347
8594
|
const headerAlignmentValues = ["", "default", "left", "center"];
|
|
8348
8595
|
const tileContentAlignmentValues = ["", "default", "left", "center"];
|
|
8349
8596
|
const _Tile = class _Tile extends PxElement {
|
|
8350
8597
|
template() {
|
|
8351
8598
|
return `
|
|
8352
|
-
<px-hstack gap="
|
|
8599
|
+
<px-hstack gap="s" align-items="center" class="tile__header">
|
|
8353
8600
|
<slot name="prefix"></slot>
|
|
8354
8601
|
<slot name="suffix"></slot>
|
|
8355
8602
|
</px-hstack>
|
|
8356
|
-
<px-vstack gap="
|
|
8603
|
+
<px-vstack gap="2xs" class="tile__content">
|
|
8357
8604
|
<slot></slot>
|
|
8358
8605
|
<slot name="description"></slot>
|
|
8359
8606
|
</px-vstack>
|
|
8360
8607
|
`;
|
|
8361
8608
|
}
|
|
8362
8609
|
constructor() {
|
|
8363
|
-
super(commonStyleSheet$5, styleSheet$
|
|
8610
|
+
super(commonStyleSheet$5, styleSheet$c);
|
|
8364
8611
|
const $root = document.createElement(this.nativeName);
|
|
8365
8612
|
$root.classList.add("tile");
|
|
8366
8613
|
$root.innerHTML = this.template();
|
|
@@ -8411,7 +8658,7 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8411
8658
|
);
|
|
8412
8659
|
break;
|
|
8413
8660
|
case "disabled":
|
|
8414
|
-
this.backgroundColor = "
|
|
8661
|
+
this.backgroundColor = "state-disabled";
|
|
8415
8662
|
break;
|
|
8416
8663
|
default:
|
|
8417
8664
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -8454,11 +8701,11 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8454
8701
|
if (value !== null && value !== "" && value !== "default") {
|
|
8455
8702
|
this.$el.style.setProperty(
|
|
8456
8703
|
`--tile-background-color-default`,
|
|
8457
|
-
`var(--px-background
|
|
8704
|
+
`var(--px-color-background-${value}-default)`
|
|
8458
8705
|
);
|
|
8459
8706
|
this.$el.style.setProperty(
|
|
8460
8707
|
`--tile-background-color-inverted`,
|
|
8461
|
-
`var(--px-background
|
|
8708
|
+
`var(--px-color-background-${value}-inverted)`
|
|
8462
8709
|
);
|
|
8463
8710
|
}
|
|
8464
8711
|
};
|
|
@@ -8534,9 +8781,9 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8534
8781
|
_Tile.nativeName = "div";
|
|
8535
8782
|
let Tile = _Tile;
|
|
8536
8783
|
customElements.define("px-tile", Tile);
|
|
8537
|
-
const styles$
|
|
8538
|
-
const styleSheet$
|
|
8539
|
-
styleSheet$
|
|
8784
|
+
const styles$h = ".tile-button{padding:0;background:none}";
|
|
8785
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
8786
|
+
styleSheet$b.replaceSync(styles$h);
|
|
8540
8787
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
8541
8788
|
commonStyleSheet$4.replaceSync(common);
|
|
8542
8789
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -8551,7 +8798,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
8551
8798
|
`;
|
|
8552
8799
|
}
|
|
8553
8800
|
constructor() {
|
|
8554
|
-
super(commonStyleSheet$4, styleSheet$
|
|
8801
|
+
super(commonStyleSheet$4, styleSheet$b);
|
|
8555
8802
|
const $root = document.createElement(this.nativeName);
|
|
8556
8803
|
$root.classList.add("tile-button");
|
|
8557
8804
|
$root.innerHTML = this.template();
|
|
@@ -9229,9 +9476,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9229
9476
|
}
|
|
9230
9477
|
}
|
|
9231
9478
|
customElements.define("px-tile-radio", TileRadio);
|
|
9232
|
-
const styles$
|
|
9233
|
-
const styleSheet$
|
|
9234
|
-
styleSheet$
|
|
9479
|
+
const styles$g = ".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
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
9481
|
+
styleSheet$a.replaceSync(styles$g);
|
|
9235
9482
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
9236
9483
|
commonStyleSheet$1.replaceSync(common);
|
|
9237
9484
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -9252,7 +9499,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
9252
9499
|
`;
|
|
9253
9500
|
}
|
|
9254
9501
|
constructor() {
|
|
9255
|
-
super(commonStyleSheet$1, styleSheet$
|
|
9502
|
+
super(commonStyleSheet$1, styleSheet$a);
|
|
9256
9503
|
const $root = document.createElement(this.nativeName);
|
|
9257
9504
|
$root.classList.add("tile-link");
|
|
9258
9505
|
$root.innerHTML = this.template();
|
|
@@ -9653,9 +9900,9 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
9653
9900
|
}
|
|
9654
9901
|
}
|
|
9655
9902
|
customElements.define("px-tile-switch", TileSwitch);
|
|
9656
|
-
const styles$
|
|
9657
|
-
const stylesheet$
|
|
9658
|
-
stylesheet$
|
|
9903
|
+
const styles$f = "#content{overflow:auto}#sticky-left{position:sticky;top:0;float:left;margin-top:var(--px-sticky-container-offset-left-desktop, var(--px-sticky-container-offset-left-all))}@media 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%}";
|
|
9904
|
+
const stylesheet$5 = new CSSStyleSheet();
|
|
9905
|
+
stylesheet$5.replaceSync(styles$f);
|
|
9659
9906
|
class StickyContainer extends HTMLElement {
|
|
9660
9907
|
constructor() {
|
|
9661
9908
|
super();
|
|
@@ -9700,7 +9947,7 @@ class StickyContainer extends HTMLElement {
|
|
|
9700
9947
|
};
|
|
9701
9948
|
this.attachShadow({ mode: "open" });
|
|
9702
9949
|
this.shadowRoot.innerHTML = this.template;
|
|
9703
|
-
this.shadowRoot.adoptedStyleSheets = [stylesheet$
|
|
9950
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$5];
|
|
9704
9951
|
}
|
|
9705
9952
|
connectedCallback() {
|
|
9706
9953
|
this.adjustContentHeight();
|
|
@@ -9745,17 +9992,17 @@ class StickyContainer extends HTMLElement {
|
|
|
9745
9992
|
if (!customElements.get("px-sticky-container")) {
|
|
9746
9993
|
customElements.define("px-sticky-container", StickyContainer);
|
|
9747
9994
|
}
|
|
9748
|
-
const styles$
|
|
9749
|
-
const styleSheet$
|
|
9750
|
-
styleSheet$
|
|
9995
|
+
const styles$e = '#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
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
9997
|
+
styleSheet$9.replaceSync(styles$e);
|
|
9751
9998
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
9752
9999
|
class Drawer extends HTMLElement {
|
|
9753
10000
|
constructor() {
|
|
9754
10001
|
super();
|
|
9755
10002
|
this.template = `<dialog popover role="dialog" aria-modal="true" >
|
|
9756
10003
|
<div id="container">
|
|
9757
|
-
<px-vstack gap="
|
|
9758
|
-
<px-vstack gap="
|
|
10004
|
+
<px-vstack gap="default" >
|
|
10005
|
+
<px-vstack gap="s">
|
|
9759
10006
|
<px-h1 variant="title-4xl" variant--mobile="title-2xl" >
|
|
9760
10007
|
<slot name="title"></slot>
|
|
9761
10008
|
</px-h1>
|
|
@@ -9769,7 +10016,7 @@ class Drawer extends HTMLElement {
|
|
|
9769
10016
|
<px-separator size="m"></px-separator>
|
|
9770
10017
|
<px-stack
|
|
9771
10018
|
gap--mobile="heading-to-content"
|
|
9772
|
-
gap="
|
|
10019
|
+
gap="default"
|
|
9773
10020
|
justify-content="flex-end"
|
|
9774
10021
|
direction="row"
|
|
9775
10022
|
direction--mobile="column"
|
|
@@ -9784,7 +10031,7 @@ class Drawer extends HTMLElement {
|
|
|
9784
10031
|
</dialog>`;
|
|
9785
10032
|
this.attachShadow({ mode: "open" });
|
|
9786
10033
|
this.shadowRoot.innerHTML = this.template;
|
|
9787
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10034
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
9788
10035
|
if (!this.hasAttribute("showfrom")) {
|
|
9789
10036
|
this.setAttribute("showfrom", "bottom");
|
|
9790
10037
|
}
|
|
@@ -9873,11 +10120,11 @@ class Drawer extends HTMLElement {
|
|
|
9873
10120
|
if (!customElements.get("px-drawer")) {
|
|
9874
10121
|
customElements.define("px-drawer", Drawer);
|
|
9875
10122
|
}
|
|
9876
|
-
const styles$
|
|
10123
|
+
const styles$d = ":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}";
|
|
9877
10124
|
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}}";
|
|
9878
|
-
const styles$
|
|
9879
|
-
const styleSheet$
|
|
9880
|
-
styleSheet$
|
|
10125
|
+
const styles$c = ":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
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
10127
|
+
styleSheet$8.replaceSync(styles$c);
|
|
9881
10128
|
class AppleSeed extends HTMLElement {
|
|
9882
10129
|
constructor() {
|
|
9883
10130
|
super();
|
|
@@ -9892,7 +10139,7 @@ class AppleSeed extends HTMLElement {
|
|
|
9892
10139
|
</div>`;
|
|
9893
10140
|
};
|
|
9894
10141
|
this.attachShadow({ mode: "open" });
|
|
9895
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10142
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
9896
10143
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
9897
10144
|
}
|
|
9898
10145
|
static get observedAttributes() {
|
|
@@ -10119,9 +10366,9 @@ function throttle(func, wait, options) {
|
|
|
10119
10366
|
"trailing": trailing
|
|
10120
10367
|
});
|
|
10121
10368
|
}
|
|
10122
|
-
const styleSheet$
|
|
10123
|
-
styleSheet$
|
|
10124
|
-
const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10369
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
10370
|
+
styleSheet$7.replaceSync(styles$d);
|
|
10371
|
+
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10125
10372
|
const prefix = "px-spacing";
|
|
10126
10373
|
const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100% - ${Math.max(parseInt(numberOfItems), 2)} * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
|
|
10127
10374
|
class Carousel extends HTMLElement {
|
|
@@ -10130,10 +10377,10 @@ class Carousel extends HTMLElement {
|
|
|
10130
10377
|
this.visibleItemsAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
10131
10378
|
this,
|
|
10132
10379
|
"visible-items",
|
|
10133
|
-
visibleItemCalcFunction("
|
|
10380
|
+
visibleItemCalcFunction("s"),
|
|
10134
10381
|
"--px-carousel-min-width"
|
|
10135
10382
|
);
|
|
10136
|
-
this.template = `<px-vstack gap="
|
|
10383
|
+
this.template = `<px-vstack gap="default">
|
|
10137
10384
|
<div class="carousel">
|
|
10138
10385
|
<slot></slot>
|
|
10139
10386
|
</div>
|
|
@@ -10143,7 +10390,7 @@ class Carousel extends HTMLElement {
|
|
|
10143
10390
|
justify-content--mobile="center"
|
|
10144
10391
|
>
|
|
10145
10392
|
<px-appleseed active="0"></px-appleseed>
|
|
10146
|
-
<px-hstack id="button-icons" gap="
|
|
10393
|
+
<px-hstack id="button-icons" gap="default">
|
|
10147
10394
|
<px-button-icon disabled id="previous" aria-hidden="true">
|
|
10148
10395
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
10149
10396
|
</px-button-icon>
|
|
@@ -10185,10 +10432,10 @@ class Carousel extends HTMLElement {
|
|
|
10185
10432
|
this.attachShadow({ mode: "open" });
|
|
10186
10433
|
this.shadowRoot.innerHTML = this.template;
|
|
10187
10434
|
this.shadowRoot.adoptedStyleSheets = [
|
|
10188
|
-
styleSheet$
|
|
10435
|
+
styleSheet$7,
|
|
10189
10436
|
cssTokenBreakpoints(
|
|
10190
10437
|
"gap",
|
|
10191
|
-
attributeBreakpointCSSSelector,
|
|
10438
|
+
attributeBreakpointCSSSelector$1,
|
|
10192
10439
|
gapValues,
|
|
10193
10440
|
prefix
|
|
10194
10441
|
)
|
|
@@ -10218,7 +10465,7 @@ class Carousel extends HTMLElement {
|
|
|
10218
10465
|
connectedCallback() {
|
|
10219
10466
|
this.visibleItemsAttributeDelegate.init("1");
|
|
10220
10467
|
this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(
|
|
10221
|
-
this.getAttribute("gap") || "
|
|
10468
|
+
this.getAttribute("gap") || "s"
|
|
10222
10469
|
);
|
|
10223
10470
|
requestAnimationFrame(() => {
|
|
10224
10471
|
this.handleAppleSeedDisplay();
|
|
@@ -10296,13 +10543,13 @@ class CarouselItem extends HTMLElement {
|
|
|
10296
10543
|
</div>`;
|
|
10297
10544
|
this.attachShadow({ mode: "open" });
|
|
10298
10545
|
this.shadowRoot.innerHTML = this.template;
|
|
10299
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10546
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$7, itemStyleSheet];
|
|
10300
10547
|
}
|
|
10301
10548
|
}
|
|
10302
10549
|
if (!customElements.get("px-carousel-item")) {
|
|
10303
10550
|
customElements.define("px-carousel-item", CarouselItem);
|
|
10304
10551
|
}
|
|
10305
|
-
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:
|
|
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: 768px){.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: 1025px){.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))}}';
|
|
10306
10553
|
const bannerStyles = new CSSStyleSheet();
|
|
10307
10554
|
bannerStyles.replaceSync(bannerCss);
|
|
10308
10555
|
const _Banner = class _Banner extends PxElement {
|
|
@@ -10310,7 +10557,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10310
10557
|
super(bannerStyles);
|
|
10311
10558
|
this.template = () => `<div class="banner">
|
|
10312
10559
|
<div class="contrast-helper"></div>
|
|
10313
|
-
<px-container padding="${this.reduced ? "m" : "l"}" border-radius="main" >
|
|
10560
|
+
<px-container padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
|
|
10314
10561
|
<div class="banner-content">
|
|
10315
10562
|
<slot name="tag"></slot>
|
|
10316
10563
|
<slot name="media"></slot>
|
|
@@ -10342,7 +10589,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10342
10589
|
connectedCallback() {
|
|
10343
10590
|
var _a;
|
|
10344
10591
|
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
10345
|
-
this.
|
|
10592
|
+
this.createGridTemplateAreas();
|
|
10346
10593
|
}
|
|
10347
10594
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
10348
10595
|
if (oldValue !== newValue) {
|
|
@@ -10373,7 +10620,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10373
10620
|
break;
|
|
10374
10621
|
case "reduced":
|
|
10375
10622
|
this.$el.toggleAttribute("reduced", newValue !== null);
|
|
10376
|
-
this.
|
|
10623
|
+
this.createGridTemplateAreas();
|
|
10377
10624
|
break;
|
|
10378
10625
|
case "inverted":
|
|
10379
10626
|
for (let i = 0; i < this.$children.length; i++) {
|
|
@@ -10389,7 +10636,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10389
10636
|
}
|
|
10390
10637
|
}
|
|
10391
10638
|
}
|
|
10392
|
-
|
|
10639
|
+
createGridTemplateAreas() {
|
|
10393
10640
|
const grid = this.shadowRoot.querySelector(
|
|
10394
10641
|
".banner-content"
|
|
10395
10642
|
);
|
|
@@ -10562,13 +10809,13 @@ const _Fieldset = class _Fieldset extends PxElement {
|
|
|
10562
10809
|
_Fieldset.nativeName = "fieldset";
|
|
10563
10810
|
let Fieldset = _Fieldset;
|
|
10564
10811
|
customElements.define("px-fieldset", Fieldset);
|
|
10565
|
-
const styles$6 = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-after-element-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:var(--px-action-size-l);background:var(--px-background-color-action-neutral-default) no-repeat;background-position:center right var(--px-padding-s-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);border-radius:var(--px-radius-main);color:var(--px-text-color-body-neutral-strong-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: 3rem;--cancel-icon-height: 1rem;--search-icon-datalist-width: 2rem;--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-after-element-default-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet)}}@media screen and (min-width: 1024px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-after-element-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{border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default);outline:1px solid var(--px-border-color-action-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{border-width:0;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{border-color:var(--px-border-color-purpose-error-default);background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{border-color:var(--px-border-color-purpose-success-default);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.7rem,center right 1rem}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 1rem;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 .5rem right 1rem}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-s-desktop);font-weight:400;line-height:var(--px-line-height-m);text-align:left}slot.error{color:var(--px-text-color-purpose-error-default)}slot.success{color:var(--px-text-color-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}`;
|
|
10566
|
-
const stylesheet = new CSSStyleSheet();
|
|
10567
|
-
stylesheet.replaceSync(styles$
|
|
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$4 = new CSSStyleSheet();
|
|
10814
|
+
stylesheet$4.replaceSync(styles$b);
|
|
10568
10815
|
class AbstractInputElement extends PxElement {
|
|
10569
10816
|
constructor() {
|
|
10570
10817
|
var _a;
|
|
10571
|
-
super(stylesheet);
|
|
10818
|
+
super(stylesheet$4);
|
|
10572
10819
|
this.containerTemplate = () => `
|
|
10573
10820
|
<div id="container">
|
|
10574
10821
|
<div id="label-helper">
|
|
@@ -10813,7 +11060,7 @@ let Upload = _Upload;
|
|
|
10813
11060
|
if (!customElements.get("px-fileupload")) {
|
|
10814
11061
|
customElements.define("px-fileupload", Upload);
|
|
10815
11062
|
}
|
|
10816
|
-
const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}.switch:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-border-
|
|
11063
|
+
const switchCss = ':host{display:inline-flex}.switch *{box-sizing:border-box}.switch{display:inline-flex;align-items:center;border-radius:var(--px-radius-pill)}.switch:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}.switch:has(input[inverted]):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}label{display:flex;flex-shrink:0;padding:var(--px-padding-3xs-mobile);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-strong-default);outline:var(--px-size-border-m) solid var(--px-color-border-none);width:var(--px-size-action-input-switch-width);height:calc(var(--px-size-icon-m) + (var(--px-padding-3xs-mobile) * 2));position:relative}label:after{content:"";position:absolute;top:50%;left:var(--px-padding-3xs-mobile);width:var(--px-size-icon-m);max-width:var(--px-size-icon-m);height:var(--px-size-icon-m);border-radius:var(--px-radius-pill);background-color:var(--px-color-background-container-light-default);transform:translateY(-50%);transition:transform .2s ease-in-out}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host(:not([disabled])):host(:hover) label,:host(:not([disabled])):host([hover]) label{outline-color:var(--px-color-border-neutral-default)}:host([checked]) label{background-color:var(--px-color-background-purpose-success-default);transition:background-color .2s ease-in-out}:host([checked]) label:after{transform:translateY(-50%) translate(calc(var(--px-size-icon-m) - var(--px-padding-3xs-mobile)));transition:transform .2s ease-in-out}:host(:hover) :is(:host(:not([disabled])) :is(:host([checked]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([checked]) label)){outline-color:var(--px-color-border-purpose-success-default)}:host([disabled]) label{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) label:after{background-color:var(--px-color-background-state-disabled-default)}:host([inverted]) label{background-color:var(--px-color-background-container-strong-inverted)}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-neutral-inverted)}:host([checked]:not([disabled])) :is(:host([inverted]) label){background-color:var(--px-color-background-purpose-success-inverted)}:host(:hover) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)),:host([hover]) :is(:host([checked]:not([disabled])) :is(:host([inverted]) label)){outline-color:var(--px-color-border-purpose-success-inverted)}:host([disabled]) :is(:host([inverted]) label){background-color:var(--px-color-background-state-disabled-inverted)}:host([disabled]) :is(:host([inverted]) label):after{background-color:var(--px-color-background-state-disabled-inverted)}@media only screen and (min-width: 768px){label{padding:var(--px-padding-3xs-desktop)}}@media only screen and (min-width: 1025px){label{padding:var(--px-padding-3xs-desktop)}}';
|
|
10817
11064
|
const switchStyles = new CSSStyleSheet();
|
|
10818
11065
|
switchStyles.replaceSync(switchCss);
|
|
10819
11066
|
var InputState = /* @__PURE__ */ ((InputState2) => {
|
|
@@ -10943,9 +11190,9 @@ const _Switch = class _Switch extends PxElement {
|
|
|
10943
11190
|
_Switch.nativeName = "input";
|
|
10944
11191
|
let Switch = _Switch;
|
|
10945
11192
|
customElements.define("px-switch", Switch);
|
|
10946
|
-
const styles$
|
|
10947
|
-
const styleSheet$
|
|
10948
|
-
styleSheet$
|
|
11193
|
+
const styles$a = ":host{display:table;width:100%}";
|
|
11194
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
11195
|
+
styleSheet$6.replaceSync(styles$a);
|
|
10949
11196
|
class Table extends HTMLElement {
|
|
10950
11197
|
constructor() {
|
|
10951
11198
|
super();
|
|
@@ -10954,7 +11201,7 @@ class Table extends HTMLElement {
|
|
|
10954
11201
|
`;
|
|
10955
11202
|
this.attachShadow({ mode: "open" });
|
|
10956
11203
|
this.shadowRoot.innerHTML = this.template();
|
|
10957
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11204
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
|
|
10958
11205
|
}
|
|
10959
11206
|
connectedCallback() {
|
|
10960
11207
|
this.style.display = "table";
|
|
@@ -10964,9 +11211,9 @@ class Table extends HTMLElement {
|
|
|
10964
11211
|
if (!customElements.get("px-table")) {
|
|
10965
11212
|
customElements.define("px-table", Table);
|
|
10966
11213
|
}
|
|
10967
|
-
const styles$
|
|
10968
|
-
const styleSheet$
|
|
10969
|
-
styleSheet$
|
|
11214
|
+
const styles$9 = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
11215
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
11216
|
+
styleSheet$5.replaceSync(styles$9);
|
|
10970
11217
|
class Thead extends HTMLElement {
|
|
10971
11218
|
constructor() {
|
|
10972
11219
|
super();
|
|
@@ -10975,7 +11222,7 @@ class Thead extends HTMLElement {
|
|
|
10975
11222
|
`;
|
|
10976
11223
|
this.attachShadow({ mode: "open" });
|
|
10977
11224
|
this.shadowRoot.innerHTML = this.template();
|
|
10978
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11225
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$5];
|
|
10979
11226
|
}
|
|
10980
11227
|
connectedCallback() {
|
|
10981
11228
|
this.style.display = "table-header-group";
|
|
@@ -10985,9 +11232,9 @@ class Thead extends HTMLElement {
|
|
|
10985
11232
|
if (!customElements.get("px-thead")) {
|
|
10986
11233
|
customElements.define("px-thead", Thead);
|
|
10987
11234
|
}
|
|
10988
|
-
const styles$
|
|
10989
|
-
const styleSheet$
|
|
10990
|
-
styleSheet$
|
|
11235
|
+
const styles$8 = ":host{display:table-row}";
|
|
11236
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
11237
|
+
styleSheet$4.replaceSync(styles$8);
|
|
10991
11238
|
class Tr extends HTMLElement {
|
|
10992
11239
|
constructor() {
|
|
10993
11240
|
super();
|
|
@@ -10996,7 +11243,7 @@ class Tr extends HTMLElement {
|
|
|
10996
11243
|
`;
|
|
10997
11244
|
this.attachShadow({ mode: "open" });
|
|
10998
11245
|
this.shadowRoot.innerHTML = this.template();
|
|
10999
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11246
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
11000
11247
|
}
|
|
11001
11248
|
connectedCallback() {
|
|
11002
11249
|
this.style.display = "table-row";
|
|
@@ -11006,16 +11253,16 @@ class Tr extends HTMLElement {
|
|
|
11006
11253
|
if (!customElements.get("px-tr")) {
|
|
11007
11254
|
customElements.define("px-tr", Tr);
|
|
11008
11255
|
}
|
|
11009
|
-
const styles$
|
|
11010
|
-
const styleSheet$
|
|
11011
|
-
styleSheet$
|
|
11256
|
+
const styles$7 = ':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:400;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
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
11258
|
+
styleSheet$3.replaceSync(styles$7);
|
|
11012
11259
|
class Th extends HTMLElement {
|
|
11013
11260
|
constructor() {
|
|
11014
11261
|
super();
|
|
11015
11262
|
this.template = () => `
|
|
11016
11263
|
<div class="th">
|
|
11017
|
-
<px-vstack gap="
|
|
11018
|
-
<px-hstack gap="
|
|
11264
|
+
<px-vstack gap="none">
|
|
11265
|
+
<px-hstack gap="2xs" align-items="center">
|
|
11019
11266
|
<slot></slot>
|
|
11020
11267
|
<slot name="info"></slot>
|
|
11021
11268
|
</px-hstack>
|
|
@@ -11025,7 +11272,7 @@ class Th extends HTMLElement {
|
|
|
11025
11272
|
`;
|
|
11026
11273
|
this.attachShadow({ mode: "open" });
|
|
11027
11274
|
this.shadowRoot.innerHTML = this.template();
|
|
11028
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11275
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
11029
11276
|
}
|
|
11030
11277
|
connectedCallback() {
|
|
11031
11278
|
this.style.display = "table-cell";
|
|
@@ -11042,9 +11289,9 @@ class Th extends HTMLElement {
|
|
|
11042
11289
|
if (!customElements.get("px-th")) {
|
|
11043
11290
|
customElements.define("px-th", Th);
|
|
11044
11291
|
}
|
|
11045
|
-
const styles$
|
|
11046
|
-
const styleSheet$
|
|
11047
|
-
styleSheet$
|
|
11292
|
+
const styles$6 = ":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
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
11294
|
+
styleSheet$2.replaceSync(styles$6);
|
|
11048
11295
|
class Tbody extends HTMLElement {
|
|
11049
11296
|
constructor() {
|
|
11050
11297
|
super();
|
|
@@ -11053,7 +11300,7 @@ class Tbody extends HTMLElement {
|
|
|
11053
11300
|
`;
|
|
11054
11301
|
this.attachShadow({ mode: "open" });
|
|
11055
11302
|
this.shadowRoot.innerHTML = this.template();
|
|
11056
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11303
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$2];
|
|
11057
11304
|
}
|
|
11058
11305
|
connectedCallback() {
|
|
11059
11306
|
this.style.display = "table-row-group";
|
|
@@ -11063,18 +11310,18 @@ class Tbody extends HTMLElement {
|
|
|
11063
11310
|
if (!customElements.get("px-tbody")) {
|
|
11064
11311
|
customElements.define("px-tbody", Tbody);
|
|
11065
11312
|
}
|
|
11066
|
-
const styles = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-
|
|
11067
|
-
const styleSheet = new CSSStyleSheet();
|
|
11068
|
-
styleSheet.replaceSync(styles);
|
|
11313
|
+
const styles$5 = ':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:400;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
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
11315
|
+
styleSheet$1.replaceSync(styles$5);
|
|
11069
11316
|
class Td extends HTMLElement {
|
|
11070
11317
|
constructor() {
|
|
11071
11318
|
super();
|
|
11072
11319
|
this.template = () => `
|
|
11073
11320
|
<div class="td">
|
|
11074
|
-
<px-hstack gap="
|
|
11321
|
+
<px-hstack gap="xs" align-items="center">
|
|
11075
11322
|
<slot name="icon"></slot>
|
|
11076
|
-
<px-vstack gap="
|
|
11077
|
-
<px-hstack gap="
|
|
11323
|
+
<px-vstack gap="none" align-items="start">
|
|
11324
|
+
<px-hstack gap="2xs" align-items="center">
|
|
11078
11325
|
<slot></slot>
|
|
11079
11326
|
<slot name="info"></slot>
|
|
11080
11327
|
</px-hstack>
|
|
@@ -11085,7 +11332,7 @@ class Td extends HTMLElement {
|
|
|
11085
11332
|
`;
|
|
11086
11333
|
this.attachShadow({ mode: "open" });
|
|
11087
11334
|
this.shadowRoot.innerHTML = this.template();
|
|
11088
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
11335
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
11089
11336
|
}
|
|
11090
11337
|
connectedCallback() {
|
|
11091
11338
|
this.style.display = "table-cell";
|
|
@@ -11107,6 +11354,1440 @@ class Td extends HTMLElement {
|
|
|
11107
11354
|
if (!customElements.get("px-td")) {
|
|
11108
11355
|
customElements.define("px-td", Td);
|
|
11109
11356
|
}
|
|
11357
|
+
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
|
+
const stylesheet$3 = new CSSStyleSheet();
|
|
11359
|
+
stylesheet$3.replaceSync(styles$4);
|
|
11360
|
+
class MegaDropDown extends HTMLElement {
|
|
11361
|
+
constructor() {
|
|
11362
|
+
var _a;
|
|
11363
|
+
super();
|
|
11364
|
+
this.template = `
|
|
11365
|
+
<px-container
|
|
11366
|
+
padding-inline="none"
|
|
11367
|
+
padding-block="l"
|
|
11368
|
+
padding-block--mobile="m"
|
|
11369
|
+
background-color="none"
|
|
11370
|
+
>
|
|
11371
|
+
<px-hstack id="mobile-header" gap="1rem" align-items="center">
|
|
11372
|
+
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
11373
|
+
<px-button id="back-button" variant="tertiary">
|
|
11374
|
+
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
11375
|
+
Back to menu
|
|
11376
|
+
</px-button>
|
|
11377
|
+
<px-spacer></px-spacer>
|
|
11378
|
+
<px-button-icon size="small" variant="secondary">
|
|
11379
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11380
|
+
</px-button-icon>
|
|
11381
|
+
</px-hstack>
|
|
11382
|
+
<px-h1 variant="title-3xl"></px-h1>
|
|
11383
|
+
<px-button-icon size="small" variant="secondary">
|
|
11384
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11385
|
+
</px-button-icon>
|
|
11386
|
+
<px-stack
|
|
11387
|
+
direction--mobile="column"
|
|
11388
|
+
direction="row"
|
|
11389
|
+
gap="l"
|
|
11390
|
+
wrap="wrap"
|
|
11391
|
+
>
|
|
11392
|
+
<slot></slot>
|
|
11393
|
+
</px-stack>
|
|
11394
|
+
</px-container>
|
|
11395
|
+
<px-hstack id="footer" justify-content="space-between" align-items="center" gap="l">
|
|
11396
|
+
<slot name="mdd-footer"></slot>
|
|
11397
|
+
</px-hstack>`;
|
|
11398
|
+
this.attachShadow({ mode: "open" });
|
|
11399
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11400
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
|
|
11401
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11402
|
+
if (this.internals) {
|
|
11403
|
+
this.internals.role = "menu";
|
|
11404
|
+
}
|
|
11405
|
+
}
|
|
11406
|
+
static get observedAttributes() {
|
|
11407
|
+
return ["hidden", "name"];
|
|
11408
|
+
}
|
|
11409
|
+
connectedCallback() {
|
|
11410
|
+
var _a, _b;
|
|
11411
|
+
if (this.querySelectorAll("px-mdd-section").length === 0) {
|
|
11412
|
+
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
11413
|
+
}
|
|
11414
|
+
this.hidden = true;
|
|
11415
|
+
if (this.internals) {
|
|
11416
|
+
this.internals.ariaHidden = "true";
|
|
11417
|
+
}
|
|
11418
|
+
this.setAttribute("slot", "header-panels");
|
|
11419
|
+
this.shadowRoot.addEventListener("click", (event) => {
|
|
11420
|
+
if (event.target.closest("px-button-icon")) {
|
|
11421
|
+
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: true }));
|
|
11422
|
+
} else if (event.target.closest("#back-button")) {
|
|
11423
|
+
const event2 = new CustomEvent("section-item-click", {
|
|
11424
|
+
bubbles: true,
|
|
11425
|
+
composed: true,
|
|
11426
|
+
detail: { for: "__lavender_mobile_menu" }
|
|
11427
|
+
});
|
|
11428
|
+
this.dispatchEvent(event2);
|
|
11429
|
+
}
|
|
11430
|
+
});
|
|
11431
|
+
this.addEventListener("keyup", (event) => {
|
|
11432
|
+
if (event.key === "Escape" || event.key === "Esc") {
|
|
11433
|
+
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: true }));
|
|
11434
|
+
}
|
|
11435
|
+
});
|
|
11436
|
+
if (this.getAttribute("name") === "__lavender_mobile_menu") {
|
|
11437
|
+
this.$backButton.style.display = "none";
|
|
11438
|
+
}
|
|
11439
|
+
const title = this.getAttribute("name") === "__lavender_mobile_menu" ? "Menu" : ((_b = (_a = this.closest("px-header")) == null ? void 0 : _a.querySelector(
|
|
11440
|
+
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
11441
|
+
)) == null ? void 0 : _b.innerText) ?? "";
|
|
11442
|
+
this.$title.innerText = title;
|
|
11443
|
+
if (!this.querySelector('[slot="mdd-footer"]')) {
|
|
11444
|
+
this.$footer.style.display = "none";
|
|
11445
|
+
}
|
|
11446
|
+
}
|
|
11447
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
11448
|
+
if (name === "name" && !newValue) {
|
|
11449
|
+
throw new Error("Media Drop Down must have a name attribute");
|
|
11450
|
+
}
|
|
11451
|
+
if (name === "name") {
|
|
11452
|
+
this.id = newValue;
|
|
11453
|
+
}
|
|
11454
|
+
if (name === "hidden" && this.internals) {
|
|
11455
|
+
this.internals.ariaHidden = newValue === "true" || newValue === "" ? "true" : "false";
|
|
11456
|
+
}
|
|
11457
|
+
}
|
|
11458
|
+
get hidden() {
|
|
11459
|
+
return this.hasAttribute("hidden");
|
|
11460
|
+
}
|
|
11461
|
+
set hidden(value) {
|
|
11462
|
+
if (typeof value !== "boolean") {
|
|
11463
|
+
throw new Error("hidden must be a boolean");
|
|
11464
|
+
}
|
|
11465
|
+
if (value) {
|
|
11466
|
+
if (this.internals) {
|
|
11467
|
+
this.internals.ariaHidden = "true";
|
|
11468
|
+
}
|
|
11469
|
+
this.setAttribute("hidden", "");
|
|
11470
|
+
} else {
|
|
11471
|
+
if (this.internals) {
|
|
11472
|
+
this.internals.ariaHidden = "false";
|
|
11473
|
+
}
|
|
11474
|
+
this.removeAttribute("hidden");
|
|
11475
|
+
}
|
|
11476
|
+
}
|
|
11477
|
+
get name() {
|
|
11478
|
+
return this.getAttribute("name");
|
|
11479
|
+
}
|
|
11480
|
+
set name(value) {
|
|
11481
|
+
this.setAttribute("name", value);
|
|
11482
|
+
}
|
|
11483
|
+
get $backButton() {
|
|
11484
|
+
return this.shadowRoot.querySelector("px-button");
|
|
11485
|
+
}
|
|
11486
|
+
get $title() {
|
|
11487
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
11488
|
+
}
|
|
11489
|
+
get $footer() {
|
|
11490
|
+
return this.shadowRoot.querySelector("#footer");
|
|
11491
|
+
}
|
|
11492
|
+
}
|
|
11493
|
+
if (!customElements.get("px-mdd")) {
|
|
11494
|
+
customElements.define("px-mdd", MegaDropDown);
|
|
11495
|
+
}
|
|
11496
|
+
const styles$3 = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:2px solid var(--px-border-color-container-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}}';
|
|
11497
|
+
const stylesheet$2 = new CSSStyleSheet();
|
|
11498
|
+
stylesheet$2.replaceSync(styles$3);
|
|
11499
|
+
class MddSection extends HTMLElement {
|
|
11500
|
+
constructor() {
|
|
11501
|
+
super();
|
|
11502
|
+
this.template = `<px-vstack gap="default">
|
|
11503
|
+
<px-h1 variant="title-l" color="heading-neutral" variant--mobile="title-xl">
|
|
11504
|
+
<slot name="title"></slot>
|
|
11505
|
+
</px-h1>
|
|
11506
|
+
<div id="section-wrapper">
|
|
11507
|
+
<px-vstack role="menu" gap="xs" gap--mobile="0">
|
|
11508
|
+
<slot></slot>
|
|
11509
|
+
</px-vstack>
|
|
11510
|
+
</div>
|
|
11511
|
+
<px-vstack gap="default" gap--mobile="default">
|
|
11512
|
+
<slot name="footer"></slot>
|
|
11513
|
+
</px-vstack>
|
|
11514
|
+
</px-vstack>`;
|
|
11515
|
+
this.attachShadow({ mode: "open" });
|
|
11516
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11517
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$2];
|
|
11518
|
+
}
|
|
11519
|
+
}
|
|
11520
|
+
if (!customElements.get("px-mdd-section")) {
|
|
11521
|
+
customElements.define("px-mdd-section", MddSection);
|
|
11522
|
+
}
|
|
11523
|
+
const styles$2 = "@media screen and (min-width: 768px){px-icon{display:none}}a{text-decoration:none;color:inherit}@media screen and (min-width: 767px) and (max-width: 1024px){a{font-size:var(--px-text-size-label-l-tablet)}}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}@media screen and (max-width: 767px){px-hstack{display:block;padding:1em 0;background-color:#fff;border-radius:1em}}";
|
|
11524
|
+
const stylesheet$1 = new CSSStyleSheet();
|
|
11525
|
+
stylesheet$1.replaceSync(styles$2);
|
|
11526
|
+
class MddSectionItem extends HTMLElement {
|
|
11527
|
+
constructor() {
|
|
11528
|
+
var _a;
|
|
11529
|
+
super();
|
|
11530
|
+
this.template = `
|
|
11531
|
+
<px-hstack align-items="center">
|
|
11532
|
+
<span><slot></slot></span>
|
|
11533
|
+
<px-spacer></px-spacer>
|
|
11534
|
+
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
11535
|
+
</px-hstack>`;
|
|
11536
|
+
this.attachShadow({ mode: "open" });
|
|
11537
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
11538
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11539
|
+
if (this.internals) {
|
|
11540
|
+
this.internals.role = "menuitem";
|
|
11541
|
+
}
|
|
11542
|
+
}
|
|
11543
|
+
static get observedAttributes() {
|
|
11544
|
+
return ["href", "for"];
|
|
11545
|
+
}
|
|
11546
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
11547
|
+
if (name === "href" && this.$link) {
|
|
11548
|
+
this.$link.href = newValue;
|
|
11549
|
+
} else if (name === "href" && !this.$link && !!newValue) {
|
|
11550
|
+
this.shadowRoot.innerHTML = `<a>${this.template}</a>`;
|
|
11551
|
+
this.shadowRoot.firstElementChild.setAttribute("tabindex", "0");
|
|
11552
|
+
} else if (name === "for" && !this.$button && !!newValue) {
|
|
11553
|
+
this.shadowRoot.innerHTML = `<button>${this.template}</button>`;
|
|
11554
|
+
this.shadowRoot.firstElementChild.setAttribute("tabindex", "0");
|
|
11555
|
+
}
|
|
11556
|
+
}
|
|
11557
|
+
connectedCallback() {
|
|
11558
|
+
if (this.hasAttribute("href")) {
|
|
11559
|
+
this.$link.href = this.href;
|
|
11560
|
+
} else if (this.hasAttribute("for")) {
|
|
11561
|
+
this.addEventListener("click", this.handleClick);
|
|
11562
|
+
}
|
|
11563
|
+
}
|
|
11564
|
+
handleClick() {
|
|
11565
|
+
const event = new CustomEvent("section-item-click", {
|
|
11566
|
+
bubbles: true,
|
|
11567
|
+
composed: true,
|
|
11568
|
+
detail: { for: this.getAttribute("for") }
|
|
11569
|
+
});
|
|
11570
|
+
this.dispatchEvent(event);
|
|
11571
|
+
}
|
|
11572
|
+
get href() {
|
|
11573
|
+
return this.getAttribute("href");
|
|
11574
|
+
}
|
|
11575
|
+
set href(value) {
|
|
11576
|
+
this.setAttribute("href", value);
|
|
11577
|
+
}
|
|
11578
|
+
get $link() {
|
|
11579
|
+
return this.shadowRoot.querySelector("a");
|
|
11580
|
+
}
|
|
11581
|
+
get $button() {
|
|
11582
|
+
return this.shadowRoot.querySelector("button");
|
|
11583
|
+
}
|
|
11584
|
+
}
|
|
11585
|
+
if (!customElements.get("px-mdd-section-item")) {
|
|
11586
|
+
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
11587
|
+
}
|
|
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:400;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
|
+
const statusStyles = new CSSStyleSheet();
|
|
11590
|
+
statusStyles.replaceSync(statusCss);
|
|
11591
|
+
const statusStateValues = [
|
|
11592
|
+
"",
|
|
11593
|
+
"info",
|
|
11594
|
+
"success",
|
|
11595
|
+
"warning",
|
|
11596
|
+
"error",
|
|
11597
|
+
"ongoing",
|
|
11598
|
+
"unlimited"
|
|
11599
|
+
];
|
|
11600
|
+
const _Status = class _Status extends PxElement {
|
|
11601
|
+
constructor() {
|
|
11602
|
+
super(statusStyles);
|
|
11603
|
+
this.template = () => `
|
|
11604
|
+
<div class="status">
|
|
11605
|
+
<px-hstack gap="2xs" align-items="flex-start">
|
|
11606
|
+
<px-icon name="information_fill" from="lavender" size="s" color="content-brand"></px-icon>
|
|
11607
|
+
<slot name="label"></slot>
|
|
11608
|
+
</px-hstack>
|
|
11609
|
+
</div>`;
|
|
11610
|
+
this.shadowRoot.innerHTML = this.template();
|
|
11611
|
+
if (!this.$label || !this.iconAriaLabel) {
|
|
11612
|
+
console.warn(
|
|
11613
|
+
'Label slot and icon aria-label slot are mandatory even with icon-only case. For accessibility the label slot will only be red by screen readers if the component is set to "icon-only".'
|
|
11614
|
+
);
|
|
11615
|
+
}
|
|
11616
|
+
}
|
|
11617
|
+
static get observedAttributes() {
|
|
11618
|
+
return [
|
|
11619
|
+
"state",
|
|
11620
|
+
"icon-only",
|
|
11621
|
+
"icon-only--mobile",
|
|
11622
|
+
"icon-only--tablet",
|
|
11623
|
+
"icon-only--laptop",
|
|
11624
|
+
"disabled",
|
|
11625
|
+
"inverted",
|
|
11626
|
+
"icon-aria-label"
|
|
11627
|
+
];
|
|
11628
|
+
}
|
|
11629
|
+
connectedCallback() {
|
|
11630
|
+
super.connectedCallback();
|
|
11631
|
+
if (!this.state) {
|
|
11632
|
+
this.setRole("info");
|
|
11633
|
+
}
|
|
11634
|
+
}
|
|
11635
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
11636
|
+
if (oldValue !== newValue) {
|
|
11637
|
+
switch (attrName) {
|
|
11638
|
+
case "state":
|
|
11639
|
+
this.updateState(newValue);
|
|
11640
|
+
this.$el.classList.toggle(`${newValue}`);
|
|
11641
|
+
this.setRole(newValue);
|
|
11642
|
+
break;
|
|
11643
|
+
case "icon-aria-label":
|
|
11644
|
+
this.$statusIcon.setAttribute("aria-label", newValue);
|
|
11645
|
+
break;
|
|
11646
|
+
case "icon-only":
|
|
11647
|
+
this.updateIconOnly(null);
|
|
11648
|
+
break;
|
|
11649
|
+
case "icon-only--mobile":
|
|
11650
|
+
this.updateIconOnly("mobile");
|
|
11651
|
+
break;
|
|
11652
|
+
case "icon-only--tablet":
|
|
11653
|
+
this.updateIconOnly("tablet");
|
|
11654
|
+
break;
|
|
11655
|
+
case "icon-only--laptop":
|
|
11656
|
+
this.updateIconOnly("laptop");
|
|
11657
|
+
break;
|
|
11658
|
+
case "disabled":
|
|
11659
|
+
this.$el.toggleAttribute("disabled", newValue !== null);
|
|
11660
|
+
this.$statusIcon.color = "state-disabled";
|
|
11661
|
+
break;
|
|
11662
|
+
case "inverted":
|
|
11663
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11664
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
11665
|
+
this.$children[i].toggleAttribute("inverted");
|
|
11666
|
+
}
|
|
11667
|
+
}
|
|
11668
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
11669
|
+
this.$statusIcon.toggleAttribute("inverted", newValue !== null);
|
|
11670
|
+
break;
|
|
11671
|
+
default:
|
|
11672
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
11673
|
+
break;
|
|
11674
|
+
}
|
|
11675
|
+
}
|
|
11676
|
+
}
|
|
11677
|
+
updateState(state) {
|
|
11678
|
+
if (!this.checkName(statusStateValues, state)) {
|
|
11679
|
+
console.error(`${state} is not a valid state value for ${this.$el}`);
|
|
11680
|
+
return;
|
|
11681
|
+
}
|
|
11682
|
+
const iconMap = {
|
|
11683
|
+
info: { name: "information_fill", color: "content-brand" },
|
|
11684
|
+
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
11685
|
+
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
11686
|
+
error: { name: "minus_fill", color: "purpose-error" },
|
|
11687
|
+
ongoing: { name: "clock_fill", color: "purpose-warning" },
|
|
11688
|
+
unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
|
|
11689
|
+
};
|
|
11690
|
+
const { name, color } = iconMap[state] || iconMap["info"];
|
|
11691
|
+
this.$statusIcon.name = name;
|
|
11692
|
+
this.$statusIcon.color = color;
|
|
11693
|
+
}
|
|
11694
|
+
setRole(statusValue) {
|
|
11695
|
+
this.$el.setAttribute(
|
|
11696
|
+
"role",
|
|
11697
|
+
!statusValue || statusValue === "info" ? "status" : statusValue
|
|
11698
|
+
);
|
|
11699
|
+
}
|
|
11700
|
+
updateIconOnly(breakpoint) {
|
|
11701
|
+
var _a;
|
|
11702
|
+
const iconOnlyBreakpoint = breakpoint ? `--${breakpoint}` : "";
|
|
11703
|
+
this.$label.setAttribute(`shown--sr${iconOnlyBreakpoint}`, "");
|
|
11704
|
+
if (breakpoint === "laptop" || breakpoint === null) {
|
|
11705
|
+
this.$statusIcon.setAttribute(
|
|
11706
|
+
"title",
|
|
11707
|
+
((_a = this.$label.textContent) == null ? void 0 : _a.trim()) || ""
|
|
11708
|
+
);
|
|
11709
|
+
}
|
|
11710
|
+
}
|
|
11711
|
+
get $label() {
|
|
11712
|
+
return this.querySelector('[slot="label"]');
|
|
11713
|
+
}
|
|
11714
|
+
get $statusIcon() {
|
|
11715
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
11716
|
+
}
|
|
11717
|
+
get $children() {
|
|
11718
|
+
return this.querySelectorAll("px-status > *");
|
|
11719
|
+
}
|
|
11720
|
+
get state() {
|
|
11721
|
+
return this.getAttribute("state");
|
|
11722
|
+
}
|
|
11723
|
+
set state(value) {
|
|
11724
|
+
this.setAttribute("state", value);
|
|
11725
|
+
}
|
|
11726
|
+
get iconAriaLabel() {
|
|
11727
|
+
return this.getAttribute("icon-aria-label");
|
|
11728
|
+
}
|
|
11729
|
+
set iconAriaLabel(value) {
|
|
11730
|
+
this.setAttribute("icon-aria-label", value);
|
|
11731
|
+
}
|
|
11732
|
+
get iconOnly() {
|
|
11733
|
+
return this.hasAttribute("icon-only");
|
|
11734
|
+
}
|
|
11735
|
+
set iconOnly(value) {
|
|
11736
|
+
if (value) {
|
|
11737
|
+
this.setAttribute("icon-only", "");
|
|
11738
|
+
} else {
|
|
11739
|
+
this.removeAttribute("icon-only");
|
|
11740
|
+
}
|
|
11741
|
+
}
|
|
11742
|
+
get iconOnlyMobile() {
|
|
11743
|
+
return this.hasAttribute("icon-only--mobile");
|
|
11744
|
+
}
|
|
11745
|
+
set iconOnlyMobile(value) {
|
|
11746
|
+
if (value) {
|
|
11747
|
+
this.setAttribute("icon-only--mobile", "");
|
|
11748
|
+
} else {
|
|
11749
|
+
this.removeAttribute("icon-only--mobile");
|
|
11750
|
+
}
|
|
11751
|
+
}
|
|
11752
|
+
get iconOnlyTablet() {
|
|
11753
|
+
return this.hasAttribute("icon-only--tablet");
|
|
11754
|
+
}
|
|
11755
|
+
set iconOnlyTablet(value) {
|
|
11756
|
+
if (value) {
|
|
11757
|
+
this.setAttribute("icon-only--tablet", "");
|
|
11758
|
+
} else {
|
|
11759
|
+
this.removeAttribute("icon-only--tablet");
|
|
11760
|
+
}
|
|
11761
|
+
}
|
|
11762
|
+
get iconOnlyLaptop() {
|
|
11763
|
+
return this.hasAttribute("icon-only--laptop");
|
|
11764
|
+
}
|
|
11765
|
+
set iconOnlyLaptop(value) {
|
|
11766
|
+
if (value) {
|
|
11767
|
+
this.setAttribute("icon-only--laptop", "");
|
|
11768
|
+
} else {
|
|
11769
|
+
this.removeAttribute("icon-only--laptop");
|
|
11770
|
+
}
|
|
11771
|
+
}
|
|
11772
|
+
get disabled() {
|
|
11773
|
+
return this.hasAttribute("disabled");
|
|
11774
|
+
}
|
|
11775
|
+
set disabled(value) {
|
|
11776
|
+
if (value) {
|
|
11777
|
+
this.setAttribute("disabled", "");
|
|
11778
|
+
} else {
|
|
11779
|
+
this.removeAttribute("disabled");
|
|
11780
|
+
}
|
|
11781
|
+
}
|
|
11782
|
+
get inverted() {
|
|
11783
|
+
return this.hasAttribute("inverted");
|
|
11784
|
+
}
|
|
11785
|
+
set inverted(value) {
|
|
11786
|
+
if (value) {
|
|
11787
|
+
this.setAttribute("inverted", "");
|
|
11788
|
+
} else {
|
|
11789
|
+
this.removeAttribute("inverted");
|
|
11790
|
+
}
|
|
11791
|
+
}
|
|
11792
|
+
};
|
|
11793
|
+
_Status.nativeName = "div";
|
|
11794
|
+
let Status = _Status;
|
|
11795
|
+
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:400;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:700;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:400;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)}@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
|
+
const styleSheet = new CSSStyleSheet();
|
|
11798
|
+
styleSheet.replaceSync(styles$1);
|
|
11799
|
+
const cardBackgroundColorValues = [
|
|
11800
|
+
"",
|
|
11801
|
+
"container-default",
|
|
11802
|
+
"container-light"
|
|
11803
|
+
];
|
|
11804
|
+
const cardPaddingValues = ["", "s", "m", "l"];
|
|
11805
|
+
const cardMediaLeftSizeValues = ["", "s", "m"];
|
|
11806
|
+
const cardMediaPositionValues = [
|
|
11807
|
+
"",
|
|
11808
|
+
"none",
|
|
11809
|
+
"top",
|
|
11810
|
+
"left",
|
|
11811
|
+
"background"
|
|
11812
|
+
];
|
|
11813
|
+
const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
|
|
11814
|
+
const paddingPrefix = "px-padding";
|
|
11815
|
+
const _Card = class _Card extends PxElement {
|
|
11816
|
+
template() {
|
|
11817
|
+
return `
|
|
11818
|
+
<div class="contrast-helper"></div>
|
|
11819
|
+
<px-container padding="none" background-color="none" border-radius="none">
|
|
11820
|
+
<div class="card__container">
|
|
11821
|
+
<div class="card__content">
|
|
11822
|
+
<px-vstack gap="default">
|
|
11823
|
+
<px-vstack gap="s">
|
|
11824
|
+
<slot name="title"></slot>
|
|
11825
|
+
<slot name="content"></slot>
|
|
11826
|
+
</px-vstack>
|
|
11827
|
+
<slot></slot>
|
|
11828
|
+
</px-vstack>
|
|
11829
|
+
</div>
|
|
11830
|
+
</card>
|
|
11831
|
+
</px-container>
|
|
11832
|
+
`;
|
|
11833
|
+
}
|
|
11834
|
+
constructor() {
|
|
11835
|
+
super(
|
|
11836
|
+
styleSheet,
|
|
11837
|
+
cssTokenBreakpoints(
|
|
11838
|
+
"padding",
|
|
11839
|
+
attributeBreakpointCSSSelector,
|
|
11840
|
+
cardPaddingValues,
|
|
11841
|
+
paddingPrefix,
|
|
11842
|
+
"--card__content-padding"
|
|
11843
|
+
)
|
|
11844
|
+
);
|
|
11845
|
+
const $root = document.createElement(this.nativeName);
|
|
11846
|
+
$root.classList.add("card");
|
|
11847
|
+
$root.innerHTML = this.template();
|
|
11848
|
+
this.shadowRoot.appendChild($root);
|
|
11849
|
+
}
|
|
11850
|
+
connectedCallback() {
|
|
11851
|
+
super.connectedCallback();
|
|
11852
|
+
this.configureCard();
|
|
11853
|
+
}
|
|
11854
|
+
static get observedAttributes() {
|
|
11855
|
+
return [
|
|
11856
|
+
...super.observedAttributes,
|
|
11857
|
+
"inverted",
|
|
11858
|
+
"background-color",
|
|
11859
|
+
"background-size",
|
|
11860
|
+
"background-position",
|
|
11861
|
+
"contrast-helper-gradient",
|
|
11862
|
+
"contrast-helper-overlay",
|
|
11863
|
+
"media-left-size",
|
|
11864
|
+
"media-left-size--mobile",
|
|
11865
|
+
"media-left-size--tablet",
|
|
11866
|
+
"media-left-size--laptop",
|
|
11867
|
+
"media-position",
|
|
11868
|
+
"media-position--mobile",
|
|
11869
|
+
"media-position--tablet",
|
|
11870
|
+
"media-position--laptop",
|
|
11871
|
+
"media-src",
|
|
11872
|
+
"media-src--mobile",
|
|
11873
|
+
"media-src--tablet",
|
|
11874
|
+
"media-src--laptop"
|
|
11875
|
+
];
|
|
11876
|
+
}
|
|
11877
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
11878
|
+
if (oldValue !== newValue) {
|
|
11879
|
+
switch (attrName) {
|
|
11880
|
+
case "inverted":
|
|
11881
|
+
if (newValue === null || newValue === "") {
|
|
11882
|
+
this.$container.setAttribute("inverted", "");
|
|
11883
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11884
|
+
this.$children[i].setAttribute("inverted", "");
|
|
11885
|
+
}
|
|
11886
|
+
} else {
|
|
11887
|
+
this.$container.removeAttribute("inverted");
|
|
11888
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11889
|
+
this.$children[i].removeAttribute("inverted");
|
|
11890
|
+
}
|
|
11891
|
+
}
|
|
11892
|
+
break;
|
|
11893
|
+
case "background-color":
|
|
11894
|
+
this.updateBackgroundColor(
|
|
11895
|
+
attrName,
|
|
11896
|
+
oldValue,
|
|
11897
|
+
newValue,
|
|
11898
|
+
cardBackgroundColorValues
|
|
11899
|
+
);
|
|
11900
|
+
break;
|
|
11901
|
+
case "background-size":
|
|
11902
|
+
this.$container.backgroundSize = newValue;
|
|
11903
|
+
break;
|
|
11904
|
+
case "background-position":
|
|
11905
|
+
this.$container.backgroundPosition = newValue;
|
|
11906
|
+
break;
|
|
11907
|
+
case "media-position":
|
|
11908
|
+
case "media-position--mobile":
|
|
11909
|
+
case "media-position--tablet":
|
|
11910
|
+
case "media-position--laptop":
|
|
11911
|
+
this.updateMediaPosition(attrName, newValue, cardMediaPositionValues);
|
|
11912
|
+
break;
|
|
11913
|
+
case "media-left-size":
|
|
11914
|
+
case "media-left-size--mobile":
|
|
11915
|
+
case "media-left-size--tablet":
|
|
11916
|
+
case "media-left-size--laptop":
|
|
11917
|
+
this.updateMediaLeftSize(
|
|
11918
|
+
attrName,
|
|
11919
|
+
oldValue,
|
|
11920
|
+
newValue,
|
|
11921
|
+
cardMediaLeftSizeValues
|
|
11922
|
+
);
|
|
11923
|
+
break;
|
|
11924
|
+
case "media-src":
|
|
11925
|
+
case "media-src--mobile":
|
|
11926
|
+
case "media-src--tablet":
|
|
11927
|
+
case "media-src--laptop": {
|
|
11928
|
+
let breakpoint = "";
|
|
11929
|
+
if (attrName.includes("--")) {
|
|
11930
|
+
breakpoint = attrName.split("--")[1];
|
|
11931
|
+
}
|
|
11932
|
+
let positionAttr = "media-position";
|
|
11933
|
+
if (breakpoint) {
|
|
11934
|
+
positionAttr += `--${breakpoint}`;
|
|
11935
|
+
}
|
|
11936
|
+
const positionValue = this.getAttribute(positionAttr) || this.mediaPosition;
|
|
11937
|
+
this.updateMediaPosition(
|
|
11938
|
+
positionAttr,
|
|
11939
|
+
positionValue,
|
|
11940
|
+
cardMediaPositionValues
|
|
11941
|
+
);
|
|
11942
|
+
break;
|
|
11943
|
+
}
|
|
11944
|
+
default:
|
|
11945
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
11946
|
+
break;
|
|
11947
|
+
}
|
|
11948
|
+
}
|
|
11949
|
+
}
|
|
11950
|
+
configureCard() {
|
|
11951
|
+
if (!this.backgroundColor) {
|
|
11952
|
+
this.backgroundColor = "container-light";
|
|
11953
|
+
}
|
|
11954
|
+
if (!this.padding) {
|
|
11955
|
+
this.padding = "m";
|
|
11956
|
+
}
|
|
11957
|
+
if (!this.mediaLeftSize) {
|
|
11958
|
+
this.mediaLeftSize = "s";
|
|
11959
|
+
}
|
|
11960
|
+
if (!this.mediaPosition) {
|
|
11961
|
+
this.mediaPosition = "top";
|
|
11962
|
+
}
|
|
11963
|
+
if (this.mediaPosition === "background") {
|
|
11964
|
+
if (!this.backgroundPosition) {
|
|
11965
|
+
this.backgroundPosition = "center";
|
|
11966
|
+
}
|
|
11967
|
+
if (!this.backgroundSize) {
|
|
11968
|
+
this.backgroundSize = "cover";
|
|
11969
|
+
}
|
|
11970
|
+
}
|
|
11971
|
+
}
|
|
11972
|
+
updateMediaPosition(attrName, newValue, attrValue) {
|
|
11973
|
+
if (!checkName(attrValue, newValue)) {
|
|
11974
|
+
console.error(
|
|
11975
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
11976
|
+
this.$el
|
|
11977
|
+
);
|
|
11978
|
+
return;
|
|
11979
|
+
}
|
|
11980
|
+
const hasBreakpoint = attrName.includes("--");
|
|
11981
|
+
const cssPropertyName = hasBreakpoint ? attrName.split("--")[0] : attrName;
|
|
11982
|
+
if (!hasBreakpoint) {
|
|
11983
|
+
if (!this.$el.classList.contains(`media-position-${newValue}`)) {
|
|
11984
|
+
this.$el.classList.add(`media-position-${newValue}`);
|
|
11985
|
+
}
|
|
11986
|
+
if (newValue === "top") {
|
|
11987
|
+
this.updateMediaPositionTop(cssPropertyName);
|
|
11988
|
+
} else if (newValue === "left") {
|
|
11989
|
+
this.updateMediaPositionLeft(cssPropertyName);
|
|
11990
|
+
} else if (newValue === "background") {
|
|
11991
|
+
this.updateMediaPositionBackground(cssPropertyName);
|
|
11992
|
+
}
|
|
11993
|
+
} else {
|
|
11994
|
+
const breakpointName = attrName.split("--")[1];
|
|
11995
|
+
if (!this.$el.classList.contains(
|
|
11996
|
+
`media-position-${newValue}--${breakpointName}`
|
|
11997
|
+
)) {
|
|
11998
|
+
this.$el.classList.add(`media-position-${newValue}--${breakpointName}`);
|
|
11999
|
+
}
|
|
12000
|
+
if (newValue === "top") {
|
|
12001
|
+
this.createImgTop(
|
|
12002
|
+
breakpointName,
|
|
12003
|
+
this.getAttribute(`media-src--${breakpointName}`)
|
|
12004
|
+
);
|
|
12005
|
+
}
|
|
12006
|
+
if (newValue === "left") {
|
|
12007
|
+
this.createDivLeft(
|
|
12008
|
+
breakpointName,
|
|
12009
|
+
this.getAttribute(`media-src--${breakpointName}`)
|
|
12010
|
+
);
|
|
12011
|
+
}
|
|
12012
|
+
if (newValue === "background") {
|
|
12013
|
+
this.$container.setAttribute(
|
|
12014
|
+
`background-image--${breakpointName}`,
|
|
12015
|
+
this.getAttribute(`media-src--${breakpointName}`) || ""
|
|
12016
|
+
);
|
|
12017
|
+
}
|
|
12018
|
+
}
|
|
12019
|
+
}
|
|
12020
|
+
updateMediaPositionTop(cssPropertyName) {
|
|
12021
|
+
if (this.mediaSrc) {
|
|
12022
|
+
const img = document.createElement("img");
|
|
12023
|
+
img.className = "card__media-top";
|
|
12024
|
+
img.src = this.mediaSrc || "";
|
|
12025
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
12026
|
+
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
12027
|
+
img.classList.add(`hidden--${device}`);
|
|
12028
|
+
}
|
|
12029
|
+
});
|
|
12030
|
+
if (this.$cardContainer.querySelector(".card__media-top")) {
|
|
12031
|
+
this.$cardContainer.querySelector(".card__media-top").replaceWith(img);
|
|
12032
|
+
} else {
|
|
12033
|
+
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
12034
|
+
}
|
|
12035
|
+
}
|
|
12036
|
+
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
12037
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
12038
|
+
this.createImgTop(device, this.getAttribute(`media-src--${device}`));
|
|
12039
|
+
}
|
|
12040
|
+
});
|
|
12041
|
+
}
|
|
12042
|
+
updateMediaPositionLeft(cssPropertyName) {
|
|
12043
|
+
if (this.mediaSrc) {
|
|
12044
|
+
const div = document.createElement("div");
|
|
12045
|
+
div.className = "card__media-left";
|
|
12046
|
+
div.style.backgroundImage = `url(${this.mediaSrc || ""})`;
|
|
12047
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
12048
|
+
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
12049
|
+
div.classList.add(`hidden--${device}`);
|
|
12050
|
+
}
|
|
12051
|
+
});
|
|
12052
|
+
if (this.$cardContainer.querySelector(".card__media-left")) {
|
|
12053
|
+
this.$cardContainer.querySelector(".card__media-left").replaceWith(div);
|
|
12054
|
+
} else {
|
|
12055
|
+
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
12056
|
+
}
|
|
12057
|
+
}
|
|
12058
|
+
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
12059
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
12060
|
+
this.createDivLeft(device, this.getAttribute(`media-src--${device}`));
|
|
12061
|
+
}
|
|
12062
|
+
});
|
|
12063
|
+
}
|
|
12064
|
+
updateMediaPositionBackground(cssPropertyName) {
|
|
12065
|
+
if (this.mediaSrc) {
|
|
12066
|
+
this.$container.setAttribute(
|
|
12067
|
+
"background-image--mobile",
|
|
12068
|
+
this.mediaSrc || ""
|
|
12069
|
+
);
|
|
12070
|
+
this.$container.setAttribute(
|
|
12071
|
+
"background-image--tablet",
|
|
12072
|
+
this.mediaSrc || ""
|
|
12073
|
+
);
|
|
12074
|
+
this.$container.setAttribute(
|
|
12075
|
+
"background-image--laptop",
|
|
12076
|
+
this.mediaSrc || ""
|
|
12077
|
+
);
|
|
12078
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
12079
|
+
const mediaSrcDevice = this.getAttribute(`media-src--${device}`);
|
|
12080
|
+
const hasBreakpoint = this.getAttribute(
|
|
12081
|
+
`${cssPropertyName}--${device}`
|
|
12082
|
+
);
|
|
12083
|
+
if (mediaSrcDevice && !hasBreakpoint) {
|
|
12084
|
+
this.$container.setAttribute(
|
|
12085
|
+
`background-image--${device}`,
|
|
12086
|
+
mediaSrcDevice
|
|
12087
|
+
);
|
|
12088
|
+
} else if (hasBreakpoint) {
|
|
12089
|
+
this.$container.removeAttribute(`background-image--${device}`);
|
|
12090
|
+
}
|
|
12091
|
+
});
|
|
12092
|
+
} else {
|
|
12093
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
12094
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
12095
|
+
this.$container.setAttribute(
|
|
12096
|
+
`background-image--${device}`,
|
|
12097
|
+
this.getAttribute(`media-src--${device}`)
|
|
12098
|
+
);
|
|
12099
|
+
}
|
|
12100
|
+
});
|
|
12101
|
+
}
|
|
12102
|
+
}
|
|
12103
|
+
createImgTop(device, src) {
|
|
12104
|
+
const img = document.createElement("img");
|
|
12105
|
+
img.className = `card__media-top--${device}`;
|
|
12106
|
+
img.src = src || "";
|
|
12107
|
+
img.classList.add(`shown--${device}`);
|
|
12108
|
+
if (this.$cardContainer.querySelector(`.card__media-top--${device}`)) {
|
|
12109
|
+
this.$cardContainer.querySelector(`.card__media-top--${device}`).replaceWith(img);
|
|
12110
|
+
} else {
|
|
12111
|
+
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
12112
|
+
}
|
|
12113
|
+
}
|
|
12114
|
+
createDivLeft(device, src) {
|
|
12115
|
+
const div = document.createElement("div");
|
|
12116
|
+
div.className = `card__media-left--${device}`;
|
|
12117
|
+
div.style.backgroundImage = `url(${src || ""})`;
|
|
12118
|
+
div.classList.add(`shown--${device}`);
|
|
12119
|
+
if (this.$cardContainer.querySelector(`.card__media-left--${device}`)) {
|
|
12120
|
+
this.$cardContainer.querySelector(`.card__media-left--${device}`).replaceWith(div);
|
|
12121
|
+
} else {
|
|
12122
|
+
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
12123
|
+
}
|
|
12124
|
+
}
|
|
12125
|
+
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
12126
|
+
if (!checkName(attrValue, newValue)) {
|
|
12127
|
+
console.error(
|
|
12128
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
12129
|
+
this.$el
|
|
12130
|
+
);
|
|
12131
|
+
return;
|
|
12132
|
+
}
|
|
12133
|
+
const updateBackgroundColorStyle = (value) => {
|
|
12134
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
12135
|
+
this.$el.style.setProperty(
|
|
12136
|
+
`--card-background-color-default`,
|
|
12137
|
+
`var(--px-color-background-${value}-default)`
|
|
12138
|
+
);
|
|
12139
|
+
this.$el.style.setProperty(
|
|
12140
|
+
`--card-background-color-inverted`,
|
|
12141
|
+
`var(--px-color-background-${value}-inverted)`
|
|
12142
|
+
);
|
|
12143
|
+
}
|
|
12144
|
+
};
|
|
12145
|
+
updateBackgroundColorStyle(oldValue);
|
|
12146
|
+
updateBackgroundColorStyle(newValue);
|
|
12147
|
+
}
|
|
12148
|
+
updateMediaLeftSize(attrName, oldValue, newValue, attrValue) {
|
|
12149
|
+
if (!checkName(attrValue, newValue)) {
|
|
12150
|
+
console.error(
|
|
12151
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
12152
|
+
this.$el
|
|
12153
|
+
);
|
|
12154
|
+
return;
|
|
12155
|
+
}
|
|
12156
|
+
const updateMediaLeftSizeStyle = (breakpoint, value) => {
|
|
12157
|
+
if (value !== null && value !== "") {
|
|
12158
|
+
let sizeValue = "";
|
|
12159
|
+
if (value === "s") {
|
|
12160
|
+
sizeValue = "120px";
|
|
12161
|
+
}
|
|
12162
|
+
if (value === "m") {
|
|
12163
|
+
sizeValue = "240px";
|
|
12164
|
+
}
|
|
12165
|
+
this.$el.style.setProperty(
|
|
12166
|
+
`--card-media-left-size${breakpoint ? `--${breakpoint}` : ""}`,
|
|
12167
|
+
sizeValue
|
|
12168
|
+
);
|
|
12169
|
+
}
|
|
12170
|
+
};
|
|
12171
|
+
const hasBreakpoint = attrName.includes("--");
|
|
12172
|
+
if (hasBreakpoint) {
|
|
12173
|
+
const breakpoint = attrName.split("--")[1];
|
|
12174
|
+
updateMediaLeftSizeStyle(breakpoint, oldValue);
|
|
12175
|
+
updateMediaLeftSizeStyle(breakpoint, newValue);
|
|
12176
|
+
} else {
|
|
12177
|
+
updateMediaLeftSizeStyle("", oldValue);
|
|
12178
|
+
updateMediaLeftSizeStyle("", newValue);
|
|
12179
|
+
}
|
|
12180
|
+
}
|
|
12181
|
+
get $children() {
|
|
12182
|
+
return this.querySelectorAll("px-card > *");
|
|
12183
|
+
}
|
|
12184
|
+
get $container() {
|
|
12185
|
+
return this.shadowRoot.querySelector("px-container");
|
|
12186
|
+
}
|
|
12187
|
+
get $cardContainer() {
|
|
12188
|
+
return this.shadowRoot.querySelector(".card__container");
|
|
12189
|
+
}
|
|
12190
|
+
get inverted() {
|
|
12191
|
+
return this.hasAttribute("inverted");
|
|
12192
|
+
}
|
|
12193
|
+
set inverted(value) {
|
|
12194
|
+
if (value) {
|
|
12195
|
+
this.setAttribute("inverted", "");
|
|
12196
|
+
} else {
|
|
12197
|
+
this.removeAttribute("inverted");
|
|
12198
|
+
}
|
|
12199
|
+
}
|
|
12200
|
+
get backgroundColor() {
|
|
12201
|
+
return this.getAttribute("background-color");
|
|
12202
|
+
}
|
|
12203
|
+
set backgroundColor(value) {
|
|
12204
|
+
if (value) {
|
|
12205
|
+
this.setAttribute("background-color", value);
|
|
12206
|
+
} else {
|
|
12207
|
+
this.removeAttribute("background-color");
|
|
12208
|
+
}
|
|
12209
|
+
}
|
|
12210
|
+
get backgroundSize() {
|
|
12211
|
+
return this.getAttribute("background-size");
|
|
12212
|
+
}
|
|
12213
|
+
set backgroundSize(value) {
|
|
12214
|
+
if (value) {
|
|
12215
|
+
this.setAttribute("background-size", value);
|
|
12216
|
+
} else {
|
|
12217
|
+
this.removeAttribute("background-size");
|
|
12218
|
+
}
|
|
12219
|
+
}
|
|
12220
|
+
get backgroundPosition() {
|
|
12221
|
+
return this.getAttribute("background-position");
|
|
12222
|
+
}
|
|
12223
|
+
set backgroundPosition(value) {
|
|
12224
|
+
if (value) {
|
|
12225
|
+
this.setAttribute("background-position", value);
|
|
12226
|
+
} else {
|
|
12227
|
+
this.removeAttribute("background-position");
|
|
12228
|
+
}
|
|
12229
|
+
}
|
|
12230
|
+
get padding() {
|
|
12231
|
+
return this.getAttribute("padding");
|
|
12232
|
+
}
|
|
12233
|
+
set padding(value) {
|
|
12234
|
+
if (value) {
|
|
12235
|
+
this.setAttribute("padding", value);
|
|
12236
|
+
} else {
|
|
12237
|
+
this.removeAttribute("padding");
|
|
12238
|
+
}
|
|
12239
|
+
}
|
|
12240
|
+
get gradientContrastHelper() {
|
|
12241
|
+
return this.hasAttribute("contrast-helper-gradient");
|
|
12242
|
+
}
|
|
12243
|
+
set gradientContrastHelper(value) {
|
|
12244
|
+
if (value) {
|
|
12245
|
+
this.setAttribute("contrast-helper-gradient", "");
|
|
12246
|
+
} else {
|
|
12247
|
+
this.removeAttribute("contrast-helper-gradient");
|
|
12248
|
+
}
|
|
12249
|
+
}
|
|
12250
|
+
get overlayContrastHelper() {
|
|
12251
|
+
return this.hasAttribute("contrast-helper-overlay");
|
|
12252
|
+
}
|
|
12253
|
+
set overlayContrastHelper(value) {
|
|
12254
|
+
if (value) {
|
|
12255
|
+
this.setAttribute("contrast-helper-overlay", "");
|
|
12256
|
+
} else {
|
|
12257
|
+
this.removeAttribute("contrast-helper-overlay");
|
|
12258
|
+
}
|
|
12259
|
+
}
|
|
12260
|
+
get mediaLeftSize() {
|
|
12261
|
+
return this.getAttribute("media-left-size");
|
|
12262
|
+
}
|
|
12263
|
+
set mediaLeftSize(value) {
|
|
12264
|
+
if (value) {
|
|
12265
|
+
this.setAttribute("media-left-size", value);
|
|
12266
|
+
} else {
|
|
12267
|
+
this.removeAttribute("media-left-size");
|
|
12268
|
+
}
|
|
12269
|
+
}
|
|
12270
|
+
get mediaLeftSizeMobile() {
|
|
12271
|
+
return this.getAttribute("media-left-size--mobile");
|
|
12272
|
+
}
|
|
12273
|
+
set mediaLeftSizeMobile(value) {
|
|
12274
|
+
if (value) {
|
|
12275
|
+
this.setAttribute("media-left-size--mobile", value);
|
|
12276
|
+
} else {
|
|
12277
|
+
this.removeAttribute("media-left-size--mobile");
|
|
12278
|
+
}
|
|
12279
|
+
}
|
|
12280
|
+
get mediaLeftSizeTablet() {
|
|
12281
|
+
return this.getAttribute("media-left-size--tablet");
|
|
12282
|
+
}
|
|
12283
|
+
set mediaLeftSizeTablet(value) {
|
|
12284
|
+
if (value) {
|
|
12285
|
+
this.setAttribute("media-left-size--tablet", value);
|
|
12286
|
+
} else {
|
|
12287
|
+
this.removeAttribute("media-left-size--tablet");
|
|
12288
|
+
}
|
|
12289
|
+
}
|
|
12290
|
+
get mediaLeftSizeLaptop() {
|
|
12291
|
+
return this.getAttribute("media-left-size--laptop");
|
|
12292
|
+
}
|
|
12293
|
+
set mediaLeftSizeLaptop(value) {
|
|
12294
|
+
if (value) {
|
|
12295
|
+
this.setAttribute("media-left-size--laptop", value);
|
|
12296
|
+
} else {
|
|
12297
|
+
this.removeAttribute("media-left-size--laptop");
|
|
12298
|
+
}
|
|
12299
|
+
}
|
|
12300
|
+
get mediaPosition() {
|
|
12301
|
+
return this.getAttribute("media-position");
|
|
12302
|
+
}
|
|
12303
|
+
set mediaPosition(value) {
|
|
12304
|
+
if (value) {
|
|
12305
|
+
this.setAttribute("media-position", value);
|
|
12306
|
+
} else {
|
|
12307
|
+
this.removeAttribute("media-position");
|
|
12308
|
+
}
|
|
12309
|
+
}
|
|
12310
|
+
get mediaPositionMobile() {
|
|
12311
|
+
return this.getAttribute("media-position--mobile");
|
|
12312
|
+
}
|
|
12313
|
+
set mediaPositionMobile(value) {
|
|
12314
|
+
if (value) {
|
|
12315
|
+
this.setAttribute("media-position--mobile", value);
|
|
12316
|
+
} else {
|
|
12317
|
+
this.removeAttribute("media-position--mobile");
|
|
12318
|
+
}
|
|
12319
|
+
}
|
|
12320
|
+
get mediaPositionTablet() {
|
|
12321
|
+
return this.getAttribute("media-position--tablet");
|
|
12322
|
+
}
|
|
12323
|
+
set mediaPositionTablet(value) {
|
|
12324
|
+
if (value) {
|
|
12325
|
+
this.setAttribute("media-position--tablet", value);
|
|
12326
|
+
} else {
|
|
12327
|
+
this.removeAttribute("media-position--tablet");
|
|
12328
|
+
}
|
|
12329
|
+
}
|
|
12330
|
+
get mediaPositionLaptop() {
|
|
12331
|
+
return this.getAttribute("media-position--laptop");
|
|
12332
|
+
}
|
|
12333
|
+
set mediaPositionLaptop(value) {
|
|
12334
|
+
if (value) {
|
|
12335
|
+
this.setAttribute("media-position--laptop", value);
|
|
12336
|
+
} else {
|
|
12337
|
+
this.removeAttribute("media-position--laptop");
|
|
12338
|
+
}
|
|
12339
|
+
}
|
|
12340
|
+
get mediaSrc() {
|
|
12341
|
+
return this.getAttribute("media-src");
|
|
12342
|
+
}
|
|
12343
|
+
set mediaSrc(value) {
|
|
12344
|
+
if (value) {
|
|
12345
|
+
this.setAttribute("media-src", value);
|
|
12346
|
+
} else {
|
|
12347
|
+
this.removeAttribute("media-src");
|
|
12348
|
+
}
|
|
12349
|
+
}
|
|
12350
|
+
get mediaSrcMobile() {
|
|
12351
|
+
return this.getAttribute("media-src--mobile");
|
|
12352
|
+
}
|
|
12353
|
+
set mediaSrcMobile(value) {
|
|
12354
|
+
if (value) {
|
|
12355
|
+
this.setAttribute("media-src--mobile", value);
|
|
12356
|
+
} else {
|
|
12357
|
+
this.removeAttribute("media-src--mobile");
|
|
12358
|
+
}
|
|
12359
|
+
}
|
|
12360
|
+
get mediaSrcTablet() {
|
|
12361
|
+
return this.getAttribute("media-src--tablet");
|
|
12362
|
+
}
|
|
12363
|
+
set mediaSrcTablet(value) {
|
|
12364
|
+
if (value) {
|
|
12365
|
+
this.setAttribute("media-src--tablet", value);
|
|
12366
|
+
} else {
|
|
12367
|
+
this.removeAttribute("media-src--tablet");
|
|
12368
|
+
}
|
|
12369
|
+
}
|
|
12370
|
+
get mediaSrcLaptop() {
|
|
12371
|
+
return this.getAttribute("media-src--laptop");
|
|
12372
|
+
}
|
|
12373
|
+
set mediaSrcLaptop(value) {
|
|
12374
|
+
if (value) {
|
|
12375
|
+
this.setAttribute("media-src--laptop", value);
|
|
12376
|
+
} else {
|
|
12377
|
+
this.removeAttribute("media-src--laptop");
|
|
12378
|
+
}
|
|
12379
|
+
}
|
|
12380
|
+
};
|
|
12381
|
+
_Card.nativeName = "a";
|
|
12382
|
+
let Card = _Card;
|
|
12383
|
+
if (!customElements.get("px-card")) {
|
|
12384
|
+
customElements.define("px-card", Card);
|
|
12385
|
+
}
|
|
12386
|
+
const contentHeaderCss = ":host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:15.625em}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;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: 768px){.content-header-content{gap:var(--px-spacing-l-desktop)}}@media only screen and (min-width: 1025px){.content-header-content{gap:var(--px-spacing-l-desktop)}}";
|
|
12387
|
+
const contentHeaderStyles = new CSSStyleSheet();
|
|
12388
|
+
contentHeaderStyles.replaceSync(contentHeaderCss);
|
|
12389
|
+
const _ContentHeader = class _ContentHeader extends PxElement {
|
|
12390
|
+
constructor() {
|
|
12391
|
+
super(contentHeaderStyles);
|
|
12392
|
+
this.template = () => `<div class="content-header">
|
|
12393
|
+
<div class="contrast-helper"></div>
|
|
12394
|
+
<px-section padding-block="l">
|
|
12395
|
+
<div class="content-header-content">
|
|
12396
|
+
<px-vstack gap="heading-to-subtitle">
|
|
12397
|
+
<px-h1><slot></slot></px-h1>
|
|
12398
|
+
<slot name="subtitle"></slot>
|
|
12399
|
+
</px-vstack>
|
|
12400
|
+
${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
|
|
12401
|
+
<slot name="patch" shrink></slot>
|
|
12402
|
+
<slot name="patch-description"></slot>
|
|
12403
|
+
</px-stack>` : ""}
|
|
12404
|
+
</div>
|
|
12405
|
+
${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
|
|
12406
|
+
</px-section>
|
|
12407
|
+
</div>`;
|
|
12408
|
+
this.shadowRoot.innerHTML = this.template();
|
|
12409
|
+
}
|
|
12410
|
+
static get observedAttributes() {
|
|
12411
|
+
return [
|
|
12412
|
+
"background-color",
|
|
12413
|
+
"background-gradient",
|
|
12414
|
+
"background-image",
|
|
12415
|
+
"background-image--mobile",
|
|
12416
|
+
"background-image--tablet",
|
|
12417
|
+
"background-image--laptop",
|
|
12418
|
+
"background-size",
|
|
12419
|
+
"background-position",
|
|
12420
|
+
"contrast-helper-gradient",
|
|
12421
|
+
"contrast-helper-overlay",
|
|
12422
|
+
"min-height",
|
|
12423
|
+
"inverted"
|
|
12424
|
+
];
|
|
12425
|
+
}
|
|
12426
|
+
connectedCallback() {
|
|
12427
|
+
var _a;
|
|
12428
|
+
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
12429
|
+
if (this.$subtitleSlot) {
|
|
12430
|
+
this.$subtitleSlot.setAttribute("variant", "subtitle");
|
|
12431
|
+
}
|
|
12432
|
+
if (this.$patchDescriptionSlot) {
|
|
12433
|
+
if (this.$patchDescriptionSlot.localName === "px-p") {
|
|
12434
|
+
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
12435
|
+
}
|
|
12436
|
+
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
12437
|
+
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
12438
|
+
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
12439
|
+
this.$patchDescriptionSlot.removeAttribute("color");
|
|
12440
|
+
}
|
|
12441
|
+
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
12442
|
+
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
12443
|
+
}
|
|
12444
|
+
}
|
|
12445
|
+
}
|
|
12446
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
12447
|
+
if (oldValue !== newValue) {
|
|
12448
|
+
switch (attrName) {
|
|
12449
|
+
case "background-color":
|
|
12450
|
+
this.$section.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
|
|
12451
|
+
break;
|
|
12452
|
+
case "background-gradient":
|
|
12453
|
+
this.$section.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
|
|
12454
|
+
break;
|
|
12455
|
+
case "background-image":
|
|
12456
|
+
this.$section.backgroundImage = newValue;
|
|
12457
|
+
break;
|
|
12458
|
+
case "background-image--mobile":
|
|
12459
|
+
this.$section.backgroundImageMobile = newValue;
|
|
12460
|
+
break;
|
|
12461
|
+
case "background-image--tablet":
|
|
12462
|
+
this.$section.backgroundImageTablet = newValue;
|
|
12463
|
+
break;
|
|
12464
|
+
case "background-image--laptop":
|
|
12465
|
+
this.$section.backgroundImageLaptop = newValue;
|
|
12466
|
+
break;
|
|
12467
|
+
case "background-size":
|
|
12468
|
+
this.$section.backgroundSize = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
|
|
12469
|
+
break;
|
|
12470
|
+
case "background-position":
|
|
12471
|
+
this.$section.backgroundPosition = newValue;
|
|
12472
|
+
break;
|
|
12473
|
+
case "inverted":
|
|
12474
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
12475
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
12476
|
+
this.$children[i].toggleAttribute("inverted");
|
|
12477
|
+
}
|
|
12478
|
+
}
|
|
12479
|
+
this.$h1.toggleAttribute("inverted", newValue !== null);
|
|
12480
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
12481
|
+
break;
|
|
12482
|
+
default:
|
|
12483
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
12484
|
+
break;
|
|
12485
|
+
}
|
|
12486
|
+
}
|
|
12487
|
+
}
|
|
12488
|
+
get $section() {
|
|
12489
|
+
return this.shadowRoot.querySelector("px-section");
|
|
12490
|
+
}
|
|
12491
|
+
get $h1() {
|
|
12492
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
12493
|
+
}
|
|
12494
|
+
get $subtitleSlot() {
|
|
12495
|
+
return this.querySelector('[slot="subtitle"]');
|
|
12496
|
+
}
|
|
12497
|
+
get $patchDescriptionSlot() {
|
|
12498
|
+
return this.querySelector('[slot="patch-description"]');
|
|
12499
|
+
}
|
|
12500
|
+
get $overlapSlot() {
|
|
12501
|
+
return this.querySelector('[slot="overlap"]');
|
|
12502
|
+
}
|
|
12503
|
+
get $children() {
|
|
12504
|
+
return this.querySelectorAll("px-content-header > *");
|
|
12505
|
+
}
|
|
12506
|
+
get backgroundColor() {
|
|
12507
|
+
return this.getAttribute("background-color");
|
|
12508
|
+
}
|
|
12509
|
+
set backgroundColor(value) {
|
|
12510
|
+
this.setAttribute("background-color", value);
|
|
12511
|
+
}
|
|
12512
|
+
get gradient() {
|
|
12513
|
+
return this.getAttribute("background-gradient");
|
|
12514
|
+
}
|
|
12515
|
+
set gradient(value) {
|
|
12516
|
+
this.setAttribute("background-gradient", value);
|
|
12517
|
+
}
|
|
12518
|
+
get backgroundImage() {
|
|
12519
|
+
return this.getAttribute("background-image");
|
|
12520
|
+
}
|
|
12521
|
+
set backgroundImage(value) {
|
|
12522
|
+
this.setAttribute("background-image", value);
|
|
12523
|
+
}
|
|
12524
|
+
get backgroundImageMobile() {
|
|
12525
|
+
return this.getAttribute("background-image--mobile");
|
|
12526
|
+
}
|
|
12527
|
+
set backgroundImageMobile(value) {
|
|
12528
|
+
this.setAttribute("background-image--mobile", value);
|
|
12529
|
+
}
|
|
12530
|
+
get backgroundImageTablet() {
|
|
12531
|
+
return this.getAttribute("background-image--tablet");
|
|
12532
|
+
}
|
|
12533
|
+
set backgroundImageTablet(value) {
|
|
12534
|
+
this.setAttribute("background-image--tablet", value);
|
|
12535
|
+
}
|
|
12536
|
+
get backgroundImageLaptop() {
|
|
12537
|
+
return this.getAttribute("background-image--laptop");
|
|
12538
|
+
}
|
|
12539
|
+
set backgroundImageLaptop(value) {
|
|
12540
|
+
this.setAttribute("background-image--laptop", value);
|
|
12541
|
+
}
|
|
12542
|
+
get backgroundSize() {
|
|
12543
|
+
return this.getAttribute("background-size");
|
|
12544
|
+
}
|
|
12545
|
+
set backgroundSize(value) {
|
|
12546
|
+
this.setAttribute("background-size", value);
|
|
12547
|
+
}
|
|
12548
|
+
get backgroundPosition() {
|
|
12549
|
+
return this.getAttribute("background-position");
|
|
12550
|
+
}
|
|
12551
|
+
set backgroundPosition(value) {
|
|
12552
|
+
this.setAttribute("background-position", value);
|
|
12553
|
+
}
|
|
12554
|
+
get gradientContrastHelper() {
|
|
12555
|
+
return this.hasAttribute("contrast-helper-gradient");
|
|
12556
|
+
}
|
|
12557
|
+
set gradientContrastHelper(value) {
|
|
12558
|
+
if (value) {
|
|
12559
|
+
this.setAttribute("contrast-helper-gradient", "");
|
|
12560
|
+
} else {
|
|
12561
|
+
this.removeAttribute("contrast-helper-gradient");
|
|
12562
|
+
}
|
|
12563
|
+
}
|
|
12564
|
+
get overlayContrastHelper() {
|
|
12565
|
+
return this.hasAttribute("contrast-helper-overlay");
|
|
12566
|
+
}
|
|
12567
|
+
set overlayContrastHelper(value) {
|
|
12568
|
+
if (value) {
|
|
12569
|
+
this.setAttribute("contrast-helper-overlay", "");
|
|
12570
|
+
} else {
|
|
12571
|
+
this.removeAttribute("contrast-helper-overlay");
|
|
12572
|
+
}
|
|
12573
|
+
}
|
|
12574
|
+
get inverted() {
|
|
12575
|
+
return this.hasAttribute("inverted");
|
|
12576
|
+
}
|
|
12577
|
+
set inverted(value) {
|
|
12578
|
+
if (value) {
|
|
12579
|
+
this.setAttribute("inverted", "");
|
|
12580
|
+
} else {
|
|
12581
|
+
this.removeAttribute("inverted");
|
|
12582
|
+
}
|
|
12583
|
+
}
|
|
12584
|
+
get minHeight() {
|
|
12585
|
+
return this.hasAttribute("min-height");
|
|
12586
|
+
}
|
|
12587
|
+
set minHeight(value) {
|
|
12588
|
+
if (value) {
|
|
12589
|
+
this.setAttribute("min-height", "");
|
|
12590
|
+
} else {
|
|
12591
|
+
this.removeAttribute("min-height");
|
|
12592
|
+
}
|
|
12593
|
+
}
|
|
12594
|
+
};
|
|
12595
|
+
_ContentHeader.nativeName = "div";
|
|
12596
|
+
let ContentHeader = _ContentHeader;
|
|
12597
|
+
customElements.define("px-content-header", ContentHeader);
|
|
12598
|
+
const styles = ':host{position:relative}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #FFF);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:0;border:0;padding-block:var(--px-padding-s-mobile);right:var(--px-padding-s-mobile);width:auto}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 767px){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 768px){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}';
|
|
12599
|
+
const anchorAlignmentValues = [
|
|
12600
|
+
"top-left",
|
|
12601
|
+
"top-right",
|
|
12602
|
+
"bottom-left",
|
|
12603
|
+
"bottom-right"
|
|
12604
|
+
];
|
|
12605
|
+
function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle) {
|
|
12606
|
+
if ("anchorName" in document.documentElement.style) {
|
|
12607
|
+
return;
|
|
12608
|
+
}
|
|
12609
|
+
$popoverElement.addEventListener("toggle", () => {
|
|
12610
|
+
var _a, _b;
|
|
12611
|
+
if (!$trigger || !$popoverElement) {
|
|
12612
|
+
return;
|
|
12613
|
+
}
|
|
12614
|
+
const rect = $trigger.getBoundingClientRect();
|
|
12615
|
+
const viewportHeight = ((_a = window.visualViewport) == null ? void 0 : _a.height) ?? window.innerHeight;
|
|
12616
|
+
const viewportWidth = ((_b = window.visualViewport) == null ? void 0 : _b.width) ?? window.innerWidth;
|
|
12617
|
+
const paddingSMobile = computedStyle.getPropertyValue("--px-padding-s-mobile") || "16px";
|
|
12618
|
+
const iconSize = parseInt(
|
|
12619
|
+
(computedStyle.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
|
|
12620
|
+
);
|
|
12621
|
+
if (["top-left", "top-right"].includes(anchorAlignment)) {
|
|
12622
|
+
$popoverElement.style.bottom = `calc( ${paddingSMobile} + ${viewportHeight - rect.top - window.scrollY}px)`;
|
|
12623
|
+
$popoverElement.style.top = "auto";
|
|
12624
|
+
if (anchorAlignment === "top-left") {
|
|
12625
|
+
$popoverElement.style.left = viewportWidth < 768 ? `${paddingSMobile}px` : `${rect.left}px`;
|
|
12626
|
+
} else {
|
|
12627
|
+
$popoverElement.style.right = viewportWidth < 768 ? `${paddingSMobile}px` : `${viewportWidth - rect.right}px`;
|
|
12628
|
+
}
|
|
12629
|
+
} else {
|
|
12630
|
+
$popoverElement.style.top = `${rect.bottom + window.scrollY}px`;
|
|
12631
|
+
if (anchorAlignment === "bottom-left") {
|
|
12632
|
+
$popoverElement.style.left = viewportWidth < 768 ? `${paddingSMobile}px` : `${rect.left}px`;
|
|
12633
|
+
} else {
|
|
12634
|
+
$popoverElement.style.right = viewportWidth < 768 ? `${paddingSMobile}px` : `${viewportWidth - rect.right - iconSize}px`;
|
|
12635
|
+
}
|
|
12636
|
+
}
|
|
12637
|
+
});
|
|
12638
|
+
}
|
|
12639
|
+
const stylesheet = new CSSStyleSheet();
|
|
12640
|
+
stylesheet.replaceSync(styles);
|
|
12641
|
+
const defaultAnchorAlignment = "bottom-left";
|
|
12642
|
+
class Dropdown extends WithExtraAttributes {
|
|
12643
|
+
constructor() {
|
|
12644
|
+
super(stylesheet);
|
|
12645
|
+
this.template = () => `
|
|
12646
|
+
<style>${this.css}</style>
|
|
12647
|
+
<slot name="trigger"></slot>
|
|
12648
|
+
<slot name="popover"></slot>`;
|
|
12649
|
+
this.isAboutToClose = false;
|
|
12650
|
+
this.shadowRoot.innerHTML = this.template();
|
|
12651
|
+
}
|
|
12652
|
+
/**
|
|
12653
|
+
* Instance level styling for the dropdown component.
|
|
12654
|
+
* This is used to set the anchor name and position of the popover.
|
|
12655
|
+
* @private
|
|
12656
|
+
*/
|
|
12657
|
+
get css() {
|
|
12658
|
+
return `::slotted([slot='trigger']) {
|
|
12659
|
+
anchor-name: ${this.anchorName};
|
|
12660
|
+
}
|
|
12661
|
+
:host([anchoralignment="bottom-left"]) {
|
|
12662
|
+
::slotted([slot="popover"]) {
|
|
12663
|
+
position-anchor: ${this.anchorName};
|
|
12664
|
+
top: anchor(${this.anchorName} bottom);
|
|
12665
|
+
left: anchor(${this.anchorName} left);
|
|
12666
|
+
}
|
|
12667
|
+
}
|
|
12668
|
+
:host([anchoralignment="bottom-right"]) {
|
|
12669
|
+
::slotted([slot="popover"]) {
|
|
12670
|
+
position-anchor: ${this.anchorName};
|
|
12671
|
+
top: anchor(${this.anchorName} bottom);
|
|
12672
|
+
right: calc(anchor(${this.anchorName} right) - var(--px-size-icon-xs));
|
|
12673
|
+
}
|
|
12674
|
+
}
|
|
12675
|
+
:host([anchoralignment="top-left"]) {
|
|
12676
|
+
::slotted([slot="popover"]) {
|
|
12677
|
+
position-anchor: ${this.anchorName};
|
|
12678
|
+
bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
|
|
12679
|
+
left: anchor(${this.anchorName} left);
|
|
12680
|
+
}
|
|
12681
|
+
}
|
|
12682
|
+
:host([anchoralignment="top-right"]) {
|
|
12683
|
+
::slotted([slot="popover"]) {
|
|
12684
|
+
position-anchor: ${this.anchorName};
|
|
12685
|
+
bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
|
|
12686
|
+
right: anchor(${this.anchorName} right);
|
|
12687
|
+
}
|
|
12688
|
+
}`;
|
|
12689
|
+
}
|
|
12690
|
+
static get observedAttributes() {
|
|
12691
|
+
return [...super.observedAttributes, "id", "anchoralignment"];
|
|
12692
|
+
}
|
|
12693
|
+
connectedCallback() {
|
|
12694
|
+
if (!this.getAttribute("id")) {
|
|
12695
|
+
this.setAttribute(
|
|
12696
|
+
"id",
|
|
12697
|
+
`px-dropdown-${Math.random().toString(36).substring(2, 15)}`
|
|
12698
|
+
);
|
|
12699
|
+
}
|
|
12700
|
+
if (!this.getAttribute("anchoralignment")) {
|
|
12701
|
+
this.setAttribute("anchoralignment", defaultAnchorAlignment);
|
|
12702
|
+
}
|
|
12703
|
+
anchorPolyfill(
|
|
12704
|
+
this.$trigger,
|
|
12705
|
+
this.$popoverElement,
|
|
12706
|
+
this.anchorAlignment,
|
|
12707
|
+
getComputedStyle(this)
|
|
12708
|
+
);
|
|
12709
|
+
}
|
|
12710
|
+
/**
|
|
12711
|
+
* Handles the manual display of the popover when the trigger is clicked.
|
|
12712
|
+
* This is necessary for cases where the trigger is not a button or input element.
|
|
12713
|
+
* This method adds event listeners to the trigger element to toggle the popover.
|
|
12714
|
+
* It also manages the state of whether the popover is about to close or not to avoid
|
|
12715
|
+
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
12716
|
+
*/
|
|
12717
|
+
handleManualPopoverDisplay() {
|
|
12718
|
+
if (this.$trigger && !["button", "input"].includes(this.$trigger.localName)) {
|
|
12719
|
+
this.$trigger.addEventListener("click", () => {
|
|
12720
|
+
if (!this.isAboutToClose) {
|
|
12721
|
+
this.$popoverElement.togglePopover({ source: this.$trigger });
|
|
12722
|
+
}
|
|
12723
|
+
});
|
|
12724
|
+
this.$popoverElement.addEventListener("beforetoggle", () => {
|
|
12725
|
+
if (this.$popoverElement.matches(":popover-open")) {
|
|
12726
|
+
this.isAboutToClose = true;
|
|
12727
|
+
}
|
|
12728
|
+
});
|
|
12729
|
+
this.$popoverElement.addEventListener("toggle", () => {
|
|
12730
|
+
if (!this.$popoverElement.matches(":popover-open")) {
|
|
12731
|
+
setTimeout(() => {
|
|
12732
|
+
this.isAboutToClose = false;
|
|
12733
|
+
});
|
|
12734
|
+
}
|
|
12735
|
+
});
|
|
12736
|
+
}
|
|
12737
|
+
}
|
|
12738
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
12739
|
+
switch (name) {
|
|
12740
|
+
case "id":
|
|
12741
|
+
if (oldValue !== newValue) {
|
|
12742
|
+
this.initPopover();
|
|
12743
|
+
}
|
|
12744
|
+
break;
|
|
12745
|
+
default:
|
|
12746
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
12747
|
+
break;
|
|
12748
|
+
}
|
|
12749
|
+
}
|
|
12750
|
+
initPopover() {
|
|
12751
|
+
if (this.$trigger) {
|
|
12752
|
+
this.$trigger.setAttribute("popovertarget", this.popoverId);
|
|
12753
|
+
this.$popoverElement.setAttribute("id", this.popoverId);
|
|
12754
|
+
this.$popoverElement.setAttribute("popover", "");
|
|
12755
|
+
this.$style.innerHTML = this.css;
|
|
12756
|
+
this.handleManualPopoverDisplay();
|
|
12757
|
+
}
|
|
12758
|
+
}
|
|
12759
|
+
get popoverId() {
|
|
12760
|
+
return `${this.getAttribute("id")}-popover`;
|
|
12761
|
+
}
|
|
12762
|
+
get anchorName() {
|
|
12763
|
+
return `--${this.getAttribute("id")}-anchor`;
|
|
12764
|
+
}
|
|
12765
|
+
get $style() {
|
|
12766
|
+
return this.shadowRoot.querySelector("style");
|
|
12767
|
+
}
|
|
12768
|
+
get $trigger() {
|
|
12769
|
+
return this.querySelector('[slot="trigger"]');
|
|
12770
|
+
}
|
|
12771
|
+
get $popoverElement() {
|
|
12772
|
+
return this.querySelector('[slot="popover"]');
|
|
12773
|
+
}
|
|
12774
|
+
get anchorAlignment() {
|
|
12775
|
+
return this.getAttribute("anchoralignment") || defaultAnchorAlignment;
|
|
12776
|
+
}
|
|
12777
|
+
set anchorAlignment(value) {
|
|
12778
|
+
if (anchorAlignmentValues.includes(value)) {
|
|
12779
|
+
this.setAttribute("anchoralignment", value);
|
|
12780
|
+
} else {
|
|
12781
|
+
console.warn(
|
|
12782
|
+
`Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
|
|
12783
|
+
);
|
|
12784
|
+
this.setAttribute("anchoralignment", defaultAnchorAlignment);
|
|
12785
|
+
}
|
|
12786
|
+
}
|
|
12787
|
+
}
|
|
12788
|
+
if (!customElements.get("px-dropdown")) {
|
|
12789
|
+
customElements.define("px-dropdown", Dropdown);
|
|
12790
|
+
}
|
|
11110
12791
|
export {
|
|
11111
12792
|
Accordion,
|
|
11112
12793
|
AppleSeed,
|
|
@@ -11114,6 +12795,7 @@ export {
|
|
|
11114
12795
|
Banner,
|
|
11115
12796
|
Button,
|
|
11116
12797
|
ButtonIcon,
|
|
12798
|
+
Card,
|
|
11117
12799
|
Carousel,
|
|
11118
12800
|
CarouselItem,
|
|
11119
12801
|
Cell,
|
|
@@ -11123,7 +12805,9 @@ export {
|
|
|
11123
12805
|
CellSwitch,
|
|
11124
12806
|
Checkbox,
|
|
11125
12807
|
Container,
|
|
12808
|
+
ContentHeader,
|
|
11126
12809
|
Drawer,
|
|
12810
|
+
Dropdown,
|
|
11127
12811
|
Entrypoint,
|
|
11128
12812
|
Fieldset,
|
|
11129
12813
|
Grid,
|
|
@@ -11141,6 +12825,9 @@ export {
|
|
|
11141
12825
|
Input,
|
|
11142
12826
|
InputState,
|
|
11143
12827
|
Link,
|
|
12828
|
+
MddSection,
|
|
12829
|
+
MddSectionItem,
|
|
12830
|
+
MegaDropDown,
|
|
11144
12831
|
Modal,
|
|
11145
12832
|
Page,
|
|
11146
12833
|
Paragraph,
|
|
@@ -11162,6 +12849,7 @@ export {
|
|
|
11162
12849
|
Span,
|
|
11163
12850
|
Spinner,
|
|
11164
12851
|
Stack,
|
|
12852
|
+
Status,
|
|
11165
12853
|
Switch,
|
|
11166
12854
|
Table,
|
|
11167
12855
|
Tag,
|
|
@@ -11197,6 +12885,10 @@ export {
|
|
|
11197
12885
|
boxShadowValues,
|
|
11198
12886
|
buttonIconSizeValues,
|
|
11199
12887
|
buttonIconVariantValues,
|
|
12888
|
+
cardBackgroundColorValues,
|
|
12889
|
+
cardMediaLeftSizeValues,
|
|
12890
|
+
cardMediaPositionValues,
|
|
12891
|
+
cardPaddingValues,
|
|
11200
12892
|
cellCheckboxPosition,
|
|
11201
12893
|
cellRadioPosition,
|
|
11202
12894
|
checkName,
|
|
@@ -11245,7 +12937,8 @@ export {
|
|
|
11245
12937
|
separatorDirectionValues,
|
|
11246
12938
|
separatorSizeValues,
|
|
11247
12939
|
stateValues,
|
|
11248
|
-
|
|
12940
|
+
statusStateValues,
|
|
12941
|
+
styleSheet$q as styleSheet,
|
|
11249
12942
|
suffixButtonIconVariantValues,
|
|
11250
12943
|
textalignValues,
|
|
11251
12944
|
tileBackgroundColorValues,
|