@proximus/lavender 1.0.0-alpha.25 → 1.0.0-alpha.28
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 +817 -592
- 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 = ":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
|
|
1
|
+
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
2
2
|
function getSupportedAttributeNames(htmlElementName) {
|
|
3
3
|
const $element = document.createElement(htmlElementName);
|
|
4
4
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -40,6 +40,10 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
40
40
|
"hidden--laptop",
|
|
41
41
|
"hidden--desktop",
|
|
42
42
|
"shown--sr",
|
|
43
|
+
"shown--sr--mobile",
|
|
44
|
+
"shown--sr--tablet",
|
|
45
|
+
"shown--sr--laptop",
|
|
46
|
+
"shown--sr--desktop",
|
|
43
47
|
"col-span",
|
|
44
48
|
"col-span--mobile",
|
|
45
49
|
"col-span--tablet",
|
|
@@ -127,7 +131,7 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
127
131
|
updateProperties(name, oldValue, newValue, attrValue) {
|
|
128
132
|
if (attrValue) {
|
|
129
133
|
if (!this.checkName(attrValue, newValue)) {
|
|
130
|
-
console.error(
|
|
134
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
131
135
|
return;
|
|
132
136
|
}
|
|
133
137
|
}
|
|
@@ -438,16 +442,20 @@ class PxElement extends WithExtraAttributes {
|
|
|
438
442
|
if (name === "constructor") {
|
|
439
443
|
continue;
|
|
440
444
|
}
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
this.$el[name]
|
|
445
|
+
try {
|
|
446
|
+
Object.defineProperty(this, name, {
|
|
447
|
+
get() {
|
|
448
|
+
return this.$el[name];
|
|
449
|
+
},
|
|
450
|
+
set(value) {
|
|
451
|
+
if (this.$el[name] !== value) {
|
|
452
|
+
this.$el[name] = value;
|
|
453
|
+
}
|
|
448
454
|
}
|
|
449
|
-
}
|
|
450
|
-
})
|
|
455
|
+
});
|
|
456
|
+
} catch (e) {
|
|
457
|
+
console.warn(`Could not create property ${name} for`, this.$el, e);
|
|
458
|
+
}
|
|
451
459
|
}
|
|
452
460
|
if (this.isGrid || this.isStack) {
|
|
453
461
|
const parentDirection = (_a = this.parentElement) == null ? void 0 : _a.getAttribute("direction");
|
|
@@ -461,13 +469,7 @@ class PxElement extends WithExtraAttributes {
|
|
|
461
469
|
return this.shadowRoot.querySelector(this.nativeName);
|
|
462
470
|
}
|
|
463
471
|
}
|
|
464
|
-
const gridGapValues = [
|
|
465
|
-
"",
|
|
466
|
-
"default",
|
|
467
|
-
"inside-section-none",
|
|
468
|
-
"inside-section-default",
|
|
469
|
-
"inside-section-l"
|
|
470
|
-
];
|
|
472
|
+
const gridGapValues = ["", "default", "none", "l"];
|
|
471
473
|
const flexboxAlignSelfValues = [
|
|
472
474
|
"",
|
|
473
475
|
"default",
|
|
@@ -511,6 +513,8 @@ const cssGridColSpanValues = [
|
|
|
511
513
|
];
|
|
512
514
|
const cssGridOrderValues = [
|
|
513
515
|
"",
|
|
516
|
+
"-1",
|
|
517
|
+
"0",
|
|
514
518
|
"1",
|
|
515
519
|
"2",
|
|
516
520
|
"3",
|
|
@@ -554,52 +558,39 @@ const colorValues = [
|
|
|
554
558
|
"",
|
|
555
559
|
"default",
|
|
556
560
|
"inherit",
|
|
557
|
-
"
|
|
558
|
-
"
|
|
559
|
-
"
|
|
560
|
-
"action-active",
|
|
561
|
-
"action-disabled",
|
|
562
|
-
"body-neutral-strong",
|
|
563
|
-
"body-neutral-weak",
|
|
564
|
-
"heading-brand",
|
|
565
|
-
"heading-neutral",
|
|
561
|
+
"brand",
|
|
562
|
+
"neutral",
|
|
563
|
+
"dimmed",
|
|
566
564
|
"purpose-success",
|
|
567
565
|
"purpose-warning",
|
|
568
566
|
"purpose-error",
|
|
569
567
|
"purpose-unlimited",
|
|
570
|
-
"purpose-promo"
|
|
568
|
+
"purpose-promo",
|
|
569
|
+
"state-hover",
|
|
570
|
+
"state-active",
|
|
571
|
+
"state-disabled"
|
|
571
572
|
];
|
|
572
573
|
const fontweightValues = [
|
|
573
574
|
"",
|
|
574
575
|
"default",
|
|
575
576
|
"inherit",
|
|
576
|
-
"
|
|
577
|
-
"
|
|
578
|
-
"
|
|
579
|
-
"
|
|
580
|
-
];
|
|
581
|
-
const iconSizeValues = [
|
|
582
|
-
"",
|
|
583
|
-
"default",
|
|
584
|
-
"2xs",
|
|
585
|
-
"xs",
|
|
586
|
-
"s",
|
|
587
|
-
"m",
|
|
588
|
-
"l",
|
|
589
|
-
"xl",
|
|
590
|
-
"2xl"
|
|
577
|
+
"body",
|
|
578
|
+
"title",
|
|
579
|
+
"title-large",
|
|
580
|
+
"subtitle"
|
|
591
581
|
];
|
|
582
|
+
const iconSizeValues = ["", "default", "xs", "s", "m", "l", "xl"];
|
|
592
583
|
const textalignValues = ["", "default", "left", "center", "right"];
|
|
593
|
-
const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l"];
|
|
584
|
+
const paddingValues = ["", "none", "3xs", "2xs", "xs", "s", "m", "l"];
|
|
594
585
|
const borderValues = ["", "none", "s", "m", "l"];
|
|
595
586
|
const borderRadiusValues = ["", "none", "main", "pill"];
|
|
596
587
|
const borderColorValues = [
|
|
597
588
|
"none",
|
|
598
|
-
"
|
|
599
|
-
"
|
|
600
|
-
"
|
|
601
|
-
"
|
|
602
|
-
"
|
|
589
|
+
"main",
|
|
590
|
+
"brand",
|
|
591
|
+
"state-hover",
|
|
592
|
+
"state-active",
|
|
593
|
+
"neutral",
|
|
603
594
|
"purpose-success",
|
|
604
595
|
"purpose-warning",
|
|
605
596
|
"purpose-error",
|
|
@@ -618,22 +609,22 @@ const borderSideValues = [
|
|
|
618
609
|
const backgroundColorValues = [
|
|
619
610
|
"",
|
|
620
611
|
"none",
|
|
621
|
-
"
|
|
622
|
-
"
|
|
612
|
+
"surface-light",
|
|
613
|
+
"surface-default",
|
|
614
|
+
"surface-strong",
|
|
615
|
+
"surface-stronger",
|
|
616
|
+
"surface-dark",
|
|
617
|
+
"surface-brand",
|
|
618
|
+
"surface-brand-light",
|
|
619
|
+
"container-primary",
|
|
620
|
+
"container-secondary",
|
|
623
621
|
"container-light",
|
|
624
|
-
"container-
|
|
625
|
-
"container-
|
|
626
|
-
"
|
|
627
|
-
"
|
|
628
|
-
"
|
|
629
|
-
"
|
|
630
|
-
"action-hover",
|
|
631
|
-
"action-hover-bordered",
|
|
632
|
-
"action-active",
|
|
633
|
-
"action-disabled",
|
|
634
|
-
"action-neutral",
|
|
635
|
-
"action-neutral-hover",
|
|
636
|
-
"action-neutral-bare",
|
|
622
|
+
"container-default",
|
|
623
|
+
"container-strong",
|
|
624
|
+
"state-hover",
|
|
625
|
+
"state-hover-bordered",
|
|
626
|
+
"state-active",
|
|
627
|
+
"state-disabled",
|
|
637
628
|
"purpose-success",
|
|
638
629
|
"purpose-warning",
|
|
639
630
|
"purpose-error",
|
|
@@ -709,20 +700,15 @@ const gradientValues = [
|
|
|
709
700
|
"color-bottom-right-green"
|
|
710
701
|
];
|
|
711
702
|
const gapValues = [
|
|
712
|
-
"
|
|
713
|
-
"
|
|
714
|
-
"
|
|
715
|
-
"
|
|
716
|
-
"
|
|
717
|
-
"
|
|
703
|
+
"none",
|
|
704
|
+
"2xs",
|
|
705
|
+
"xs",
|
|
706
|
+
"s",
|
|
707
|
+
"default",
|
|
708
|
+
"l",
|
|
718
709
|
"heading-to-subtitle",
|
|
719
710
|
"heading-to-content",
|
|
720
|
-
"
|
|
721
|
-
"inside-section-xs",
|
|
722
|
-
"inside-section-s",
|
|
723
|
-
"inside-section-default",
|
|
724
|
-
"inside-section-l",
|
|
725
|
-
"between-sections"
|
|
711
|
+
"page-layout-between-sections"
|
|
726
712
|
];
|
|
727
713
|
const noBorderRadiusValues = [
|
|
728
714
|
"",
|
|
@@ -761,7 +747,7 @@ function getViewportFormat() {
|
|
|
761
747
|
function checkName(values, value) {
|
|
762
748
|
return values.includes(value);
|
|
763
749
|
}
|
|
764
|
-
function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
750
|
+
function transferAccessibilityAttributes(sourceElement, targetElement, applyLabelledBy = true) {
|
|
765
751
|
var _a;
|
|
766
752
|
[
|
|
767
753
|
"aria-label",
|
|
@@ -803,21 +789,25 @@ function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
|
803
789
|
sourceElement.removeAttribute(attr);
|
|
804
790
|
}
|
|
805
791
|
});
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
792
|
+
if (applyLabelledBy) {
|
|
793
|
+
const id = `px-${((_a = targetElement.localName) == null ? void 0 : _a.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
|
|
794
|
+
targetElement.setAttribute("id", id);
|
|
795
|
+
sourceElement.setAttribute("aria-labelledby", id);
|
|
796
|
+
}
|
|
809
797
|
}
|
|
810
798
|
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
811
799
|
const stylesheet2 = new CSSStyleSheet();
|
|
812
800
|
const styles2 = attributeValues.reduce(
|
|
813
801
|
(prev, attributeValue) => prev + `
|
|
814
802
|
${selector(attributeName, attributeValue)} {
|
|
815
|
-
|
|
803
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
804
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
805
|
+
}
|
|
806
|
+
@media only screen and (max-width: 767px) {
|
|
807
|
+
${selector(attributeName, attributeValue)} {
|
|
816
808
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
817
809
|
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
818
810
|
}
|
|
819
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
820
|
-
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
821
811
|
}
|
|
822
812
|
${selector(attributeName, attributeValue, "mobile")} {
|
|
823
813
|
@media only screen and (max-width: 767px) {
|
|
@@ -953,7 +943,7 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
953
943
|
this.setCSSProperties();
|
|
954
944
|
}
|
|
955
945
|
}
|
|
956
|
-
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:
|
|
946
|
+
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);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}}";
|
|
957
947
|
const styleSheet$s = new CSSStyleSheet();
|
|
958
948
|
styleSheet$s.replaceSync(styles$z);
|
|
959
949
|
const directionValues = [
|
|
@@ -984,9 +974,16 @@ const justifyContentValues = [
|
|
|
984
974
|
"space-evenly"
|
|
985
975
|
];
|
|
986
976
|
const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
977
|
+
const overflowValues = ["", "visible", "hidden", "scroll", "auto"];
|
|
987
978
|
class Stack extends WithExtraAttributes {
|
|
988
979
|
constructor() {
|
|
989
980
|
super(styleSheet$s);
|
|
981
|
+
this.overflowXAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
982
|
+
this,
|
|
983
|
+
"overflow-x",
|
|
984
|
+
(newValue) => newValue,
|
|
985
|
+
"--overflow-x"
|
|
986
|
+
);
|
|
990
987
|
this.template = `<div class="flex-container">
|
|
991
988
|
<slot></slot>
|
|
992
989
|
</div>`;
|
|
@@ -997,7 +994,7 @@ class Stack extends WithExtraAttributes {
|
|
|
997
994
|
this.direction = "row";
|
|
998
995
|
}
|
|
999
996
|
if (!this.hasAttribute("gap")) {
|
|
1000
|
-
this.gap = "
|
|
997
|
+
this.gap = "none";
|
|
1001
998
|
}
|
|
1002
999
|
if (!this.hasAttribute("align-items")) {
|
|
1003
1000
|
this.alignItems = "stretch";
|
|
@@ -1008,6 +1005,9 @@ class Stack extends WithExtraAttributes {
|
|
|
1008
1005
|
if (!this.hasAttribute("wrap")) {
|
|
1009
1006
|
this.wrap = "nowrap";
|
|
1010
1007
|
}
|
|
1008
|
+
if (!this.hasAttribute("overflow-x")) {
|
|
1009
|
+
this.overflowXAttributeDelegate.init("visible");
|
|
1010
|
+
}
|
|
1011
1011
|
}
|
|
1012
1012
|
static get observedAttributes() {
|
|
1013
1013
|
return [
|
|
@@ -1036,7 +1036,12 @@ class Stack extends WithExtraAttributes {
|
|
|
1036
1036
|
"wrap--mobile",
|
|
1037
1037
|
"wrap--tablet",
|
|
1038
1038
|
"wrap--laptop",
|
|
1039
|
-
"wrap--desktop"
|
|
1039
|
+
"wrap--desktop",
|
|
1040
|
+
"overflow-x",
|
|
1041
|
+
"overflow-x--mobile",
|
|
1042
|
+
"overflow-x--tablet",
|
|
1043
|
+
"overflow-x--laptop",
|
|
1044
|
+
"overflow-x--desktop"
|
|
1040
1045
|
];
|
|
1041
1046
|
}
|
|
1042
1047
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
@@ -1081,14 +1086,32 @@ class Stack extends WithExtraAttributes {
|
|
|
1081
1086
|
case "direction--desktop":
|
|
1082
1087
|
this.updateFlexProperties(name, oldValue, newValue, directionValues);
|
|
1083
1088
|
break;
|
|
1089
|
+
case "overflow-x":
|
|
1090
|
+
case "overflow-x--mobile":
|
|
1091
|
+
case "overflow-x--tablet":
|
|
1092
|
+
case "overflow-x--laptop":
|
|
1093
|
+
case "overflow-x--desktop":
|
|
1094
|
+
this.updateOverflowX(name, oldValue, newValue, overflowValues);
|
|
1095
|
+
break;
|
|
1084
1096
|
default:
|
|
1085
1097
|
super.attributeChangedCallback(name, oldValue, newValue);
|
|
1086
1098
|
break;
|
|
1087
1099
|
}
|
|
1088
1100
|
}
|
|
1101
|
+
updateOverflowX(name, oldValue, newValue, attrValue) {
|
|
1102
|
+
if (!checkName(attrValue, newValue)) {
|
|
1103
|
+
console.error(`${newValue} is not an allowed ${name} value`);
|
|
1104
|
+
return;
|
|
1105
|
+
}
|
|
1106
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
1107
|
+
name,
|
|
1108
|
+
oldValue,
|
|
1109
|
+
newValue
|
|
1110
|
+
);
|
|
1111
|
+
}
|
|
1089
1112
|
updateFlexProperties(name, oldValue, newValue, attrValue) {
|
|
1090
1113
|
if (!this.checkName(attrValue, newValue)) {
|
|
1091
|
-
console.error(
|
|
1114
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
1092
1115
|
}
|
|
1093
1116
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
1094
1117
|
const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
|
|
@@ -1117,7 +1140,7 @@ class Stack extends WithExtraAttributes {
|
|
|
1117
1140
|
}
|
|
1118
1141
|
}
|
|
1119
1142
|
updateStyle(cssName, breakpoint, value, attrValue) {
|
|
1120
|
-
if (value
|
|
1143
|
+
if (value) {
|
|
1121
1144
|
if (cssName === "gap" && attrValue && attrValue.includes(value)) {
|
|
1122
1145
|
this.$el.style.setProperty(
|
|
1123
1146
|
`--flex-${cssName}--${breakpoint}-value`,
|
|
@@ -1278,6 +1301,36 @@ class Stack extends WithExtraAttributes {
|
|
|
1278
1301
|
set wrapDesktop(value) {
|
|
1279
1302
|
this.setAttribute("wrap--desktop", value);
|
|
1280
1303
|
}
|
|
1304
|
+
get overflowX() {
|
|
1305
|
+
return this.getAttribute("overflow-x");
|
|
1306
|
+
}
|
|
1307
|
+
set overflowX(value) {
|
|
1308
|
+
this.setAttribute("overflow-x", value);
|
|
1309
|
+
}
|
|
1310
|
+
get overflowXMobile() {
|
|
1311
|
+
return this.getAttribute("overflow-x--mobile");
|
|
1312
|
+
}
|
|
1313
|
+
set overflowXMobile(value) {
|
|
1314
|
+
this.setAttribute("overflow-x--mobile", value);
|
|
1315
|
+
}
|
|
1316
|
+
get overflowXTablet() {
|
|
1317
|
+
return this.getAttribute("overflow-x--tablet");
|
|
1318
|
+
}
|
|
1319
|
+
set overflowXTablet(value) {
|
|
1320
|
+
this.setAttribute("overflow-x--tablet", value);
|
|
1321
|
+
}
|
|
1322
|
+
get overflowXLaptop() {
|
|
1323
|
+
return this.getAttribute("overflow-x--laptop");
|
|
1324
|
+
}
|
|
1325
|
+
set overflowXLaptop(value) {
|
|
1326
|
+
this.setAttribute("overflow-x--laptop", value);
|
|
1327
|
+
}
|
|
1328
|
+
get overflowXDesktop() {
|
|
1329
|
+
return this.getAttribute("overflow-x--desktop");
|
|
1330
|
+
}
|
|
1331
|
+
set overflowXDesktop(value) {
|
|
1332
|
+
this.setAttribute("overflow-x--desktop", value);
|
|
1333
|
+
}
|
|
1281
1334
|
get $el() {
|
|
1282
1335
|
return this.shadowRoot.querySelector(".flex-container");
|
|
1283
1336
|
}
|
|
@@ -1417,7 +1470,7 @@ class Page extends WithExtraAttributes {
|
|
|
1417
1470
|
id="contact-container"
|
|
1418
1471
|
border-radius="none"
|
|
1419
1472
|
id="main"
|
|
1420
|
-
background-color="
|
|
1473
|
+
background-color="surface-default"
|
|
1421
1474
|
padding="none"
|
|
1422
1475
|
padding-top="xl"
|
|
1423
1476
|
padding-bottom="xl"
|
|
@@ -1559,7 +1612,7 @@ class Page extends WithExtraAttributes {
|
|
|
1559
1612
|
if (customElements.get("px-page") === void 0) {
|
|
1560
1613
|
customElements.define("px-page", Page);
|
|
1561
1614
|
}
|
|
1562
|
-
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;
|
|
1615
|
+
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}}";
|
|
1563
1616
|
const gridStyles = new CSSStyleSheet();
|
|
1564
1617
|
gridStyles.replaceSync(gridCss);
|
|
1565
1618
|
const gridColsValues = [
|
|
@@ -1587,18 +1640,38 @@ const contentAlignmentValues = [
|
|
|
1587
1640
|
"stretch"
|
|
1588
1641
|
];
|
|
1589
1642
|
const itemsAlignmentValues = ["", "start", "end", "center", "stretch"];
|
|
1643
|
+
const attributeBreakpointCSSSelector$3 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .grid`;
|
|
1644
|
+
const gapPrefix = "px-spacing";
|
|
1590
1645
|
const _Grid = class _Grid extends PxElement {
|
|
1591
1646
|
constructor() {
|
|
1592
|
-
super(
|
|
1647
|
+
super(
|
|
1648
|
+
gridStyles,
|
|
1649
|
+
cssTokenBreakpoints(
|
|
1650
|
+
"gap",
|
|
1651
|
+
attributeBreakpointCSSSelector$3,
|
|
1652
|
+
gapValues,
|
|
1653
|
+
gapPrefix,
|
|
1654
|
+
"--grid-gap"
|
|
1655
|
+
)
|
|
1656
|
+
);
|
|
1593
1657
|
this.template = () => `<div class="grid">
|
|
1594
1658
|
<slot></slot>
|
|
1595
1659
|
</div>`;
|
|
1660
|
+
this.gapAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
1661
|
+
this,
|
|
1662
|
+
"gap",
|
|
1663
|
+
(newValue) => newValue,
|
|
1664
|
+
"--gap"
|
|
1665
|
+
);
|
|
1596
1666
|
this.shadowRoot.innerHTML = this.template();
|
|
1597
1667
|
}
|
|
1598
1668
|
static get observedAttributes() {
|
|
1599
1669
|
return [
|
|
1600
1670
|
...super.observedAttributes,
|
|
1601
1671
|
"gap",
|
|
1672
|
+
"gap--mobile",
|
|
1673
|
+
"gap--tablet",
|
|
1674
|
+
"gap--laptop",
|
|
1602
1675
|
"grid-cols",
|
|
1603
1676
|
"grid-cols--mobile",
|
|
1604
1677
|
"grid-cols--tablet",
|
|
@@ -1628,7 +1701,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1628
1701
|
connectedCallback() {
|
|
1629
1702
|
super.connectedCallback();
|
|
1630
1703
|
if (!this.gap) {
|
|
1631
|
-
this.gap = "
|
|
1704
|
+
this.gap = "default";
|
|
1632
1705
|
}
|
|
1633
1706
|
if (!this.alignItems) {
|
|
1634
1707
|
this.alignItems = "stretch";
|
|
@@ -1638,7 +1711,14 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1638
1711
|
if (oldValue !== newValue) {
|
|
1639
1712
|
switch (attrName) {
|
|
1640
1713
|
case "gap":
|
|
1641
|
-
|
|
1714
|
+
case "gap--mobile":
|
|
1715
|
+
case "gap--tablet":
|
|
1716
|
+
case "gap--laptop":
|
|
1717
|
+
this.gapAttributeDelegate.attributeChangedCallback(
|
|
1718
|
+
attrName,
|
|
1719
|
+
oldValue,
|
|
1720
|
+
newValue
|
|
1721
|
+
);
|
|
1642
1722
|
break;
|
|
1643
1723
|
case "grid-cols":
|
|
1644
1724
|
case "grid-cols--mobile":
|
|
@@ -1688,7 +1768,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1688
1768
|
}
|
|
1689
1769
|
updateGap(oldValue, newValue, attrValue) {
|
|
1690
1770
|
if (!this.checkName(attrValue, newValue)) {
|
|
1691
|
-
console.error(
|
|
1771
|
+
console.error(`${newValue} is not a valid gap value`);
|
|
1692
1772
|
return;
|
|
1693
1773
|
}
|
|
1694
1774
|
const updateGapStyle = (value) => {
|
|
@@ -1712,9 +1792,7 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1712
1792
|
}
|
|
1713
1793
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1714
1794
|
if (!this.checkName(attrValues, newValue)) {
|
|
1715
|
-
console.error(
|
|
1716
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
1717
|
-
);
|
|
1795
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
1718
1796
|
} else if (attrName === "grid-cols" || attrName === "grid-cols--mobile" || attrName === "grid-cols--tablet" || attrName === "grid-cols--laptop") {
|
|
1719
1797
|
this.$el.style.setProperty(`--${attrName}`, newValue);
|
|
1720
1798
|
} else {
|
|
@@ -1735,6 +1813,24 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1735
1813
|
set gap(value) {
|
|
1736
1814
|
this.setAttribute("gap", value);
|
|
1737
1815
|
}
|
|
1816
|
+
get gapMobile() {
|
|
1817
|
+
return this.getAttribute("gap--mobile");
|
|
1818
|
+
}
|
|
1819
|
+
set gapMobile(value) {
|
|
1820
|
+
this.setAttribute("gap--mobile", value);
|
|
1821
|
+
}
|
|
1822
|
+
get gapTablet() {
|
|
1823
|
+
return this.getAttribute("gap--tablet");
|
|
1824
|
+
}
|
|
1825
|
+
set gapTablet(value) {
|
|
1826
|
+
this.setAttribute("gap--tablet", value);
|
|
1827
|
+
}
|
|
1828
|
+
get gapLaptop() {
|
|
1829
|
+
return this.getAttribute("gap--laptop");
|
|
1830
|
+
}
|
|
1831
|
+
set gapLaptop(value) {
|
|
1832
|
+
this.setAttribute("gap--laptop", value);
|
|
1833
|
+
}
|
|
1738
1834
|
get gridCols() {
|
|
1739
1835
|
return this.getAttribute("grid-cols");
|
|
1740
1836
|
}
|
|
@@ -1883,10 +1979,10 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1883
1979
|
_Grid.nativeName = "div";
|
|
1884
1980
|
let Grid = _Grid;
|
|
1885
1981
|
customElements.define("px-grid", Grid);
|
|
1886
|
-
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-neutral-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-neutral-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-neutral-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)}}';
|
|
1887
|
-
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:
|
|
1888
|
-
const styles$x = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-border-
|
|
1889
|
-
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-line-height-m);font-weight:
|
|
1982
|
+
const buttonCss = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title);gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none)}.btn.header-dropdown{display:block;color:var(--px-color-text-neutral-default);width:100%;font-weight:var(--px-font-weight-body);text-align:left;font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:focus{outline:auto}.btn.header-dropdown:after{content:"";position:absolute;top:50%;right:var(--px-size-icon-xs);transform:translateY(-50%);width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy45Mjc5IDcuMTM5OThDMTMuNjQxIDYuODU3NTQgMTMuMTc1OCA2Ljg1NzU0IDEyLjg4ODkgNy4xMzk5OEw5LjAwMDIxIDEwLjk2NzlMNS4xMTE1NSA3LjEzOTk4QzQuODI0NjQgNi44NTc1NCA0LjM1OTQ1IDYuODU3NTQgNC4wNzI1NCA3LjEzOTk4QzMuNzg1NjIgNy40MjI0MSAzLjc4NTYyIDcuODgwMzIgNC4wNzI1NCA4LjE2Mjc2TDguNDgwNyAxMi41MDJDOC43Njc2MiAxMi43ODQ1IDkuMjMyOCAxMi43ODQ1IDkuNTE5NzIgMTIuNTAyTDEzLjkyNzkgOC4xNjI3NkMxNC4yMTQ4IDcuODgwMzIgMTQuMjE0OCA3LjQyMjQxIDEzLjkyNzkgNy4xMzk5OFoiIGZpbGw9IiM1QzJEOTEiLz4KPC9zdmc+Cgo=);background-repeat:no-repeat}@media screen and (min-width: 768px){.btn.header-dropdown{width:inherit;border:none;background:none;cursor:pointer;font:inherit;margin:0;font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default, #000);display:inline-block;font-size:var(--px-text-size-label-l-desktop);padding:0 var(--px-spacing-s-desktop) 0 0!important}.btn.header-dropdown:after{right:calc(-1 * var(--px-spacing-s-desktop));top:50%;transform:translateY(-50%);padding:0}}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
|
|
1983
|
+
const linkCss = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-color-icon-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) a.icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
|
|
1984
|
+
const styles$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:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);text-align:center;background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}";
|
|
1985
|
+
const styles$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:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}";
|
|
1890
1986
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
1891
1987
|
const linkStyles$2 = new CSSStyleSheet();
|
|
1892
1988
|
const patchStyles = new CSSStyleSheet();
|
|
@@ -1905,7 +2001,8 @@ const variantValues$1 = [
|
|
|
1905
2001
|
"patch-info",
|
|
1906
2002
|
"patch-black-friday",
|
|
1907
2003
|
"patch-eco",
|
|
1908
|
-
"actionable-tag"
|
|
2004
|
+
"actionable-tag",
|
|
2005
|
+
"header-dropdown"
|
|
1909
2006
|
];
|
|
1910
2007
|
const extendedAttributes = [
|
|
1911
2008
|
"extended",
|
|
@@ -2029,14 +2126,16 @@ const _Button = class _Button extends PxElement {
|
|
|
2029
2126
|
}
|
|
2030
2127
|
this._toggleClass(oldValue, newValue);
|
|
2031
2128
|
if (!this.checkName(attrValue, newValue)) {
|
|
2032
|
-
console.error(
|
|
2129
|
+
console.error(
|
|
2130
|
+
`${newValue} is not a valid "variant" value for ${attrValue}`
|
|
2131
|
+
);
|
|
2033
2132
|
}
|
|
2034
2133
|
}
|
|
2035
2134
|
updateState(oldValue, newValue) {
|
|
2036
2135
|
const values = ["", "default", "success", "error"];
|
|
2037
2136
|
this._toggleClass(oldValue, newValue);
|
|
2038
2137
|
if (!this.checkName(values, newValue)) {
|
|
2039
|
-
console.error(
|
|
2138
|
+
console.error(`${newValue} is not a valid "sate" value`);
|
|
2040
2139
|
}
|
|
2041
2140
|
}
|
|
2042
2141
|
updateExtended(attributeName, newValue) {
|
|
@@ -2066,7 +2165,7 @@ const _Button = class _Button extends PxElement {
|
|
|
2066
2165
|
];
|
|
2067
2166
|
this._toggleClass(oldValue, newValue);
|
|
2068
2167
|
if (!this.checkName(values, newValue)) {
|
|
2069
|
-
console.error(
|
|
2168
|
+
console.error(`${newValue} is not a valid shape value`);
|
|
2070
2169
|
}
|
|
2071
2170
|
}
|
|
2072
2171
|
get variant() {
|
|
@@ -2129,20 +2228,18 @@ let Button = _Button;
|
|
|
2129
2228
|
if (!customElements.get("px-button")) {
|
|
2130
2229
|
customElements.define("px-button", Button);
|
|
2131
2230
|
}
|
|
2132
|
-
const styles$v = ":host{line-height:
|
|
2133
|
-
const filteredIconSizeValues = ["
|
|
2231
|
+
const styles$v = ":host{line-height:var(--px-font-line-height-xs);display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-brand-default);font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);font-style:unset;font-weight:var(--px-font-weight-body);-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-size-icon-s);height:var(--px-size-icon-s);color:var(--px-color-icon-brand-default)}.inherit{color:inherit}.content-neutral-strong{color:var(--px-color-icon-neutral-default)}.content-neutral-weak{color:var(--px-color-icon-dimmed-default)}.brand{color:var(--px-color-icon-brand-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}:host([inverted]) i{color:var(--px-color-icon-brand-inverted)}:host([inverted]) svg{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s);font-size:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);font-size:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m);font-size:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l);font-size:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl);font-size:var(--px-size-icon-xl)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
|
|
2232
|
+
const filteredIconSizeValues = ["xs", "s", "m", "l", "xl"];
|
|
2134
2233
|
const iconColorValues = [
|
|
2135
2234
|
"",
|
|
2136
2235
|
"default",
|
|
2137
2236
|
"inherit",
|
|
2138
|
-
"
|
|
2139
|
-
"
|
|
2140
|
-
"
|
|
2141
|
-
"
|
|
2142
|
-
"
|
|
2143
|
-
"
|
|
2144
|
-
"action-active",
|
|
2145
|
-
"action-disabled",
|
|
2237
|
+
"neutral",
|
|
2238
|
+
"brand",
|
|
2239
|
+
"dimmed",
|
|
2240
|
+
"state-hover",
|
|
2241
|
+
"state-active",
|
|
2242
|
+
"state-disabled",
|
|
2146
2243
|
"purpose-success",
|
|
2147
2244
|
"purpose-warning",
|
|
2148
2245
|
"purpose-error",
|
|
@@ -2185,7 +2282,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2185
2282
|
this.updateAttribute(attrName, oldValue, newValue, iconColorValues);
|
|
2186
2283
|
break;
|
|
2187
2284
|
case "disabled":
|
|
2188
|
-
this.color = "
|
|
2285
|
+
this.color = "state-disabled";
|
|
2189
2286
|
break;
|
|
2190
2287
|
case "aria-label":
|
|
2191
2288
|
if (!this.internals) {
|
|
@@ -2216,9 +2313,7 @@ class Icon extends WithExtraAttributes {
|
|
|
2216
2313
|
}
|
|
2217
2314
|
}
|
|
2218
2315
|
if (!this.checkName(attrValues, newValue)) {
|
|
2219
|
-
console.error(
|
|
2220
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2221
|
-
);
|
|
2316
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2222
2317
|
}
|
|
2223
2318
|
}
|
|
2224
2319
|
checkName(values, value) {
|
|
@@ -2360,7 +2455,7 @@ class IconSet extends HTMLElement {
|
|
|
2360
2455
|
if (!customElements.get("px-icon-set")) {
|
|
2361
2456
|
customElements.define("px-icon-set", IconSet);
|
|
2362
2457
|
}
|
|
2363
|
-
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-border-
|
|
2458
|
+
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
|
|
2364
2459
|
const containerStyles = new CSSStyleSheet();
|
|
2365
2460
|
containerStyles.replaceSync(containerCss);
|
|
2366
2461
|
const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
|
|
@@ -2462,10 +2557,10 @@ const _Container = class _Container extends PxElement {
|
|
|
2462
2557
|
this.padding = "m";
|
|
2463
2558
|
}
|
|
2464
2559
|
if (!this.backgroundColor) {
|
|
2465
|
-
this.backgroundColor = "
|
|
2560
|
+
this.backgroundColor = "surface-light";
|
|
2466
2561
|
}
|
|
2467
2562
|
if (!this.borderColor) {
|
|
2468
|
-
this.borderColor = "
|
|
2563
|
+
this.borderColor = "main";
|
|
2469
2564
|
}
|
|
2470
2565
|
const anchorSlot = this.querySelector("[slot]");
|
|
2471
2566
|
if (anchorSlot) {
|
|
@@ -2558,53 +2653,46 @@ const _Container = class _Container extends PxElement {
|
|
|
2558
2653
|
const breakpoint = splitResult.breakpoint;
|
|
2559
2654
|
this.$el.style.setProperty(
|
|
2560
2655
|
`--${attrName}${breakpoint}`,
|
|
2561
|
-
`linear-gradient(var(--px-
|
|
2656
|
+
`linear-gradient(var(--px-color-background-gradient-${newValue}))`
|
|
2562
2657
|
);
|
|
2563
2658
|
} else {
|
|
2564
|
-
console.error(
|
|
2565
|
-
`${newValue} is not an allowed background-gradient value for ${this.$el}`
|
|
2566
|
-
);
|
|
2659
|
+
console.error(`${newValue} is not an allowed background-gradient value`);
|
|
2567
2660
|
}
|
|
2568
2661
|
}
|
|
2569
2662
|
updateBackgroundColor(attrName, newValue) {
|
|
2663
|
+
const isSurfaceColor = newValue.startsWith("surface-");
|
|
2570
2664
|
if (this.checkName(backgroundColorValues, newValue)) {
|
|
2571
2665
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2572
2666
|
const breakpoint = splitResult.breakpoint;
|
|
2573
2667
|
this.$el.style.setProperty(
|
|
2574
2668
|
`--${splitResult.attrName}${breakpoint}`,
|
|
2575
|
-
`var(--px-background
|
|
2669
|
+
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-default"})`
|
|
2576
2670
|
);
|
|
2577
2671
|
this.$el.style.setProperty(
|
|
2578
2672
|
`--${splitResult.attrName}-inverted${breakpoint}`,
|
|
2579
|
-
`var(--px-background
|
|
2673
|
+
`var(--px-color-background-${newValue}${isSurfaceColor ? "" : "-inverted"})`
|
|
2580
2674
|
);
|
|
2581
2675
|
} else {
|
|
2582
|
-
console.error(
|
|
2583
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2584
|
-
);
|
|
2676
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2585
2677
|
}
|
|
2586
2678
|
}
|
|
2587
2679
|
updateBorderColor(attrName, newValue) {
|
|
2588
2680
|
if (this.checkName(borderColorValues, newValue)) {
|
|
2589
2681
|
this.$el.style.setProperty(
|
|
2590
2682
|
`--${attrName}`,
|
|
2591
|
-
`var(--px-border
|
|
2683
|
+
`var(--px-color-border-${newValue}-default)`
|
|
2592
2684
|
);
|
|
2593
2685
|
this.$el.style.setProperty(
|
|
2594
2686
|
`--${attrName}-inverted`,
|
|
2595
|
-
`var(--px-border
|
|
2687
|
+
`var(--px-color-border-${newValue}-inverted)`
|
|
2596
2688
|
);
|
|
2597
2689
|
} else {
|
|
2598
|
-
console.error(
|
|
2599
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2600
|
-
);
|
|
2690
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2601
2691
|
}
|
|
2602
2692
|
}
|
|
2603
2693
|
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
2604
2694
|
if (!this.checkName(attrValues, newValue)) {
|
|
2605
|
-
console.error(
|
|
2606
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2607
|
-
);
|
|
2695
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2608
2696
|
} else {
|
|
2609
2697
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2610
2698
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -2622,9 +2710,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2622
2710
|
}
|
|
2623
2711
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2624
2712
|
if (!this.checkName(attrValues, newValue)) {
|
|
2625
|
-
console.error(
|
|
2626
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2627
|
-
);
|
|
2713
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
2628
2714
|
} else {
|
|
2629
2715
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
2630
2716
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -2988,8 +3074,8 @@ const _Container = class _Container extends PxElement {
|
|
|
2988
3074
|
_Container.nativeName = "div";
|
|
2989
3075
|
let Container = _Container;
|
|
2990
3076
|
customElements.define("px-container", Container);
|
|
2991
|
-
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(
|
|
2992
|
-
const typographyCss$1 = "
|
|
3077
|
+
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
|
|
3078
|
+
const typographyCss$1 = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-neutral{color:var(--px-color-text-neutral-default)}.color-dimmed{color:var(--px-color-text-dimmed-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}.color-state-hover{color:var(--px-color-text-state-hover-default)}.color-state-active{color:var(--px-color-text-state-active-default)}.color-state-disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}";
|
|
2993
3079
|
const headingStyles$2 = new CSSStyleSheet();
|
|
2994
3080
|
headingStyles$2.replaceSync(headingCss);
|
|
2995
3081
|
const typographyStyles$5 = new CSSStyleSheet();
|
|
@@ -3052,28 +3138,25 @@ class AbstractHeading extends PxElement {
|
|
|
3052
3138
|
}
|
|
3053
3139
|
updateAttribute(attrName, oldValue, newValue, attrValue) {
|
|
3054
3140
|
if (!this.checkName(attrValue, newValue)) {
|
|
3055
|
-
console.error(
|
|
3056
|
-
`${newValue} is not an allowed "${attrName}" value for`,
|
|
3057
|
-
this.$el
|
|
3058
|
-
);
|
|
3141
|
+
console.error(`${newValue} is not an allowed "${attrName}" value`);
|
|
3059
3142
|
} else {
|
|
3060
3143
|
this.toggleClass(oldValue, newValue);
|
|
3061
3144
|
}
|
|
3062
3145
|
}
|
|
3063
3146
|
updateColor(oldValue, newValue, attrValue) {
|
|
3064
3147
|
if (!this.checkName(attrValue, newValue)) {
|
|
3065
|
-
console.error(
|
|
3148
|
+
console.error(`${newValue} is not a valid color value`);
|
|
3066
3149
|
return;
|
|
3067
3150
|
}
|
|
3068
3151
|
const updateColorStyle = (value) => {
|
|
3069
3152
|
if (value !== null && value !== "" && value !== "default") {
|
|
3070
3153
|
this.$el.style.setProperty(
|
|
3071
3154
|
`--heading-color-default`,
|
|
3072
|
-
`var(--px-text
|
|
3155
|
+
`var(--px-color-text-${value}-default)`
|
|
3073
3156
|
);
|
|
3074
3157
|
this.$el.style.setProperty(
|
|
3075
3158
|
`--heading-color-inverted`,
|
|
3076
|
-
`var(--px-text
|
|
3159
|
+
`var(--px-color-text-${value}-inverted)`
|
|
3077
3160
|
);
|
|
3078
3161
|
}
|
|
3079
3162
|
};
|
|
@@ -3082,7 +3165,7 @@ class AbstractHeading extends PxElement {
|
|
|
3082
3165
|
}
|
|
3083
3166
|
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
3084
3167
|
if (!this.checkName(attrValue, newValue)) {
|
|
3085
|
-
console.error(
|
|
3168
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
3086
3169
|
return;
|
|
3087
3170
|
}
|
|
3088
3171
|
const updateStyle = (breakpoint, value) => {
|
|
@@ -3201,7 +3284,7 @@ const _H6 = class _H6 extends AbstractHeading {
|
|
|
3201
3284
|
_H6.nativeName = "h6";
|
|
3202
3285
|
let H6 = _H6;
|
|
3203
3286
|
customElements.define("px-h6", H6);
|
|
3204
|
-
const styles$u = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:
|
|
3287
|
+
const styles$u = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}';
|
|
3205
3288
|
const styleSheet$p = new CSSStyleSheet();
|
|
3206
3289
|
styleSheet$p.replaceSync(styles$u);
|
|
3207
3290
|
class Section extends HTMLElement {
|
|
@@ -3212,7 +3295,7 @@ class Section extends HTMLElement {
|
|
|
3212
3295
|
<div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
|
|
3213
3296
|
<px-vstack gap="heading-to-content">
|
|
3214
3297
|
<slot name="heading"></slot>
|
|
3215
|
-
<px-vstack gap="
|
|
3298
|
+
<px-vstack gap="none">
|
|
3216
3299
|
<slot></slot>
|
|
3217
3300
|
</px-vstack>
|
|
3218
3301
|
</px-vstack>
|
|
@@ -3232,7 +3315,7 @@ class Section extends HTMLElement {
|
|
|
3232
3315
|
this.$container.paddingBlock = "none";
|
|
3233
3316
|
}
|
|
3234
3317
|
if (!headingSlot) {
|
|
3235
|
-
this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "
|
|
3318
|
+
this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
|
|
3236
3319
|
}
|
|
3237
3320
|
}
|
|
3238
3321
|
static get observedAttributes() {
|
|
@@ -3503,7 +3586,7 @@ class Section extends HTMLElement {
|
|
|
3503
3586
|
}
|
|
3504
3587
|
}
|
|
3505
3588
|
customElements.define("px-section", Section);
|
|
3506
|
-
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column
|
|
3589
|
+
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column}details summary{align-items:center;align-self:flex-start;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--px-size-icon-m);height:var(--px-size-icon-m);background-color:var(--px-color-background-container-secondary-default);border-radius:var(--px-radius-pill);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary .arrow-icon:after{content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details summary:hover{cursor:pointer}details summary:hover .arrow-icon{background-color:var( --px-color-background-state-hover-bordered-default );border-color:var(--px-color-border-state-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details:not(.single){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding:var(--px-padding-s-mobile)}details:not(.single) summary{display:flex;padding:var(--px-padding-s-mobile);gap:var(--px-spacing-s-mobile);align-self:stretch}details:not(.single) summary .arrow-icon{border:var(--px-size-border-m) solid transparent}details:not(.single) summary:hover{background-color:var(--px-color-background-container-default-default)}details:not(.single) summary:hover .arrow-icon{border-color:var(--px-color-border-state-hover-default)}details.single summary{display:inline-flex;padding-block:var(--px-padding-2xs-mobile);gap:var(--px-spacing-xs-mobile);justify-content:center;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:var(--px-spacing-2xs-mobile);padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile);border-color:var(--px-color-border-state-hover-default)}details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent;margin-right:calc(var(--px-padding-xs-mobile) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-s-mobile)}details[open] summary slot[name=title]{color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title)}details[open] summary .arrow-icon:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-text-neutral-inverted)}:host([inverted]) details summary .arrow-icon{background-color:var( --px-color-background-container-secondary-inverted )}:host([inverted]) details summary .arrow-icon:after{color:var(--px-color-icon-brand-inverted)}:host([inverted]) details summary:hover .arrow-icon{background-color:var(--px-color-background-state-hover-default);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details:not(.single){border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) details:not(.single) summary:hover{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) details.single summary{color:var(--px-color-text-brand-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) details.single summary:hover .arrow-icon{border-color:transparent;background-color:transparent}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-text-brand-inverted)}@media only screen and (min-width: 48em){details:not(.single) slot[name=content]{padding:var(--px-padding-s-tablet)}details:not(.single) summary{padding:var(--px-padding-s-tablet);gap:var(--px-spacing-s-tablet)}details.single summary{padding-block:var(--px-padding-2xs-tablet);gap:var(--px-spacing-xs-tablet)}details.single summary:hover{gap:var(--px-spacing-2xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-tablet) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-tablet)}}@media only screen and (min-width: 64.0625em){details:not(.single) slot[name=content]{padding:var(--px-padding-s-laptop)}details:not(.single) summary{padding:var(--px-padding-s-laptop);gap:var(--px-spacing-s-laptop)}details.single summary{padding-block:var(--px-padding-2xs-laptop);gap:var(--px-spacing-xs-laptop)}details.single summary:hover{gap:var(--px-spacing-2xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}details.single summary:hover .arrow-icon{margin-right:calc(var(--px-padding-xs-laptop) * -1)}details.single slot[name=content]{padding-top:var(--px-spacing-s-laptop)}}`;
|
|
3507
3590
|
const accordionStyles = new CSSStyleSheet();
|
|
3508
3591
|
accordionStyles.replaceSync(accordionCss);
|
|
3509
3592
|
const variantValues = ["", "none", "single"];
|
|
@@ -3511,7 +3594,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3511
3594
|
constructor() {
|
|
3512
3595
|
super(accordionStyles);
|
|
3513
3596
|
this.template = () => `<details>
|
|
3514
|
-
<summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
|
|
3597
|
+
<summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot><span class="arrow-icon"></span></summary>
|
|
3515
3598
|
<slot name="content"></slot>
|
|
3516
3599
|
</details>`;
|
|
3517
3600
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -3551,9 +3634,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3551
3634
|
this.$el.classList.toggle(`${newValue}`);
|
|
3552
3635
|
}
|
|
3553
3636
|
if (!this.checkName(attrValues, newValue)) {
|
|
3554
|
-
console.error(
|
|
3555
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3556
|
-
);
|
|
3637
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3557
3638
|
}
|
|
3558
3639
|
}
|
|
3559
3640
|
checkName(values, value) {
|
|
@@ -3563,20 +3644,35 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
3563
3644
|
_Accordion.nativeName = "details";
|
|
3564
3645
|
let Accordion = _Accordion;
|
|
3565
3646
|
customElements.define("px-accordion", Accordion);
|
|
3566
|
-
const imgCss =
|
|
3647
|
+
const imgCss = ":host{display:inline-block;line-height:0}:host([cover]) img{width:100%;height:100%;object-fit:cover}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2) grayscale(100%)}@media only screen and (max-width: 767px){.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){img{width:var(--img-width--tablet, auto)}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){img{width:var(--img-width--laptop, auto)}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}";
|
|
3567
3648
|
const styleSheet$o = new CSSStyleSheet();
|
|
3568
3649
|
styleSheet$o.replaceSync(imgCss);
|
|
3569
|
-
const
|
|
3570
|
-
const
|
|
3650
|
+
const imageWidthValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3651
|
+
const imageHeightValues = ["", "xs", "s", "m", "l", "xl"];
|
|
3652
|
+
const heightAttributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) img`;
|
|
3653
|
+
const heightPrefix = "px-image";
|
|
3571
3654
|
class AbstractImage extends PxElement {
|
|
3572
3655
|
constructor() {
|
|
3573
|
-
super(
|
|
3656
|
+
super(
|
|
3657
|
+
styleSheet$o,
|
|
3658
|
+
cssTokenBreakpoints(
|
|
3659
|
+
"height",
|
|
3660
|
+
heightAttributeBreakpointCSSSelector,
|
|
3661
|
+
imageHeightValues,
|
|
3662
|
+
heightPrefix,
|
|
3663
|
+
"--img-height"
|
|
3664
|
+
)
|
|
3665
|
+
);
|
|
3666
|
+
this.heightAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
3667
|
+
this,
|
|
3668
|
+
"height",
|
|
3669
|
+
(newValue) => newValue,
|
|
3670
|
+
"--img-height"
|
|
3671
|
+
);
|
|
3574
3672
|
}
|
|
3575
3673
|
static get observedAttributes() {
|
|
3576
3674
|
return [
|
|
3577
3675
|
...super.observedAttributes,
|
|
3578
|
-
"hide-for",
|
|
3579
|
-
"show-for",
|
|
3580
3676
|
"border-radius",
|
|
3581
3677
|
"no-border-radius",
|
|
3582
3678
|
"no-border-radius--mobile",
|
|
@@ -3587,16 +3683,18 @@ class AbstractImage extends PxElement {
|
|
|
3587
3683
|
"width--tablet",
|
|
3588
3684
|
"width--laptop",
|
|
3589
3685
|
"width--desktop",
|
|
3686
|
+
"height",
|
|
3687
|
+
"height--mobile",
|
|
3688
|
+
"height--tablet",
|
|
3689
|
+
"height--laptop",
|
|
3690
|
+
"height--desktop",
|
|
3691
|
+
"cover",
|
|
3590
3692
|
"disabled"
|
|
3591
3693
|
];
|
|
3592
3694
|
}
|
|
3593
3695
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3594
3696
|
if (oldValue !== newValue) {
|
|
3595
3697
|
switch (attrName) {
|
|
3596
|
-
case "hide-for":
|
|
3597
|
-
case "show-for":
|
|
3598
|
-
this.updateAttribute(attrName, oldValue, newValue, breakpointsValues);
|
|
3599
|
-
break;
|
|
3600
3698
|
case "border-radius":
|
|
3601
3699
|
this.updateAttribute(
|
|
3602
3700
|
attrName,
|
|
@@ -3623,6 +3721,24 @@ class AbstractImage extends PxElement {
|
|
|
3623
3721
|
case "width--desktop":
|
|
3624
3722
|
this.updateWidth(attrName, oldValue, newValue, imageWidthValues);
|
|
3625
3723
|
break;
|
|
3724
|
+
case "height":
|
|
3725
|
+
case "height--mobile":
|
|
3726
|
+
case "height--tablet":
|
|
3727
|
+
case "height--laptop":
|
|
3728
|
+
case "height--desktop":
|
|
3729
|
+
this.heightAttributeDelegate.attributeChangedCallback(
|
|
3730
|
+
attrName,
|
|
3731
|
+
oldValue,
|
|
3732
|
+
newValue
|
|
3733
|
+
);
|
|
3734
|
+
break;
|
|
3735
|
+
case "disabled":
|
|
3736
|
+
if (newValue !== null) {
|
|
3737
|
+
this.$el.setAttribute("aria-disabled", "true");
|
|
3738
|
+
} else {
|
|
3739
|
+
this.$el.removeAttribute("aria-disabled");
|
|
3740
|
+
}
|
|
3741
|
+
break;
|
|
3626
3742
|
default:
|
|
3627
3743
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
3628
3744
|
break;
|
|
@@ -3631,9 +3747,7 @@ class AbstractImage extends PxElement {
|
|
|
3631
3747
|
}
|
|
3632
3748
|
updateWidth(attrName, oldValue, newValue, attrValues) {
|
|
3633
3749
|
if (!this.checkName(attrValues, newValue)) {
|
|
3634
|
-
console.error(
|
|
3635
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3636
|
-
);
|
|
3750
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3637
3751
|
return;
|
|
3638
3752
|
}
|
|
3639
3753
|
const hasBreakpoint = attrName.indexOf("--") > -1;
|
|
@@ -3672,9 +3786,7 @@ class AbstractImage extends PxElement {
|
|
|
3672
3786
|
}
|
|
3673
3787
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
3674
3788
|
if (!this.checkName(attrValues, newValue)) {
|
|
3675
|
-
console.error(
|
|
3676
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
3677
|
-
);
|
|
3789
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
3678
3790
|
} else {
|
|
3679
3791
|
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
3680
3792
|
const breakpoint = splitResult.breakpoint;
|
|
@@ -3705,18 +3817,6 @@ class AbstractImage extends PxElement {
|
|
|
3705
3817
|
return values.includes(value);
|
|
3706
3818
|
}
|
|
3707
3819
|
//get & set
|
|
3708
|
-
get hidefor() {
|
|
3709
|
-
return this.getAttribute("hide-for");
|
|
3710
|
-
}
|
|
3711
|
-
set hidefor(value) {
|
|
3712
|
-
this.setAttribute("hide-for", value);
|
|
3713
|
-
}
|
|
3714
|
-
get showfor() {
|
|
3715
|
-
return this.getAttribute("show-for");
|
|
3716
|
-
}
|
|
3717
|
-
set showfor(value) {
|
|
3718
|
-
this.setAttribute("show-for", value);
|
|
3719
|
-
}
|
|
3720
3820
|
get borderRadius() {
|
|
3721
3821
|
return this.getAttribute("border-radius");
|
|
3722
3822
|
}
|
|
@@ -3783,6 +3883,66 @@ class AbstractImage extends PxElement {
|
|
|
3783
3883
|
set disabled(value) {
|
|
3784
3884
|
this.setAttribute("disabled", value);
|
|
3785
3885
|
}
|
|
3886
|
+
get height() {
|
|
3887
|
+
return this.getAttribute("height");
|
|
3888
|
+
}
|
|
3889
|
+
set height(value) {
|
|
3890
|
+
if (value) {
|
|
3891
|
+
this.setAttribute("height", value);
|
|
3892
|
+
} else {
|
|
3893
|
+
this.removeAttribute("height");
|
|
3894
|
+
}
|
|
3895
|
+
}
|
|
3896
|
+
get heightMobile() {
|
|
3897
|
+
return this.getAttribute("height--mobile");
|
|
3898
|
+
}
|
|
3899
|
+
set heightMobile(value) {
|
|
3900
|
+
if (value) {
|
|
3901
|
+
this.setAttribute("height--mobile", value);
|
|
3902
|
+
} else {
|
|
3903
|
+
this.removeAttribute("height--mobile");
|
|
3904
|
+
}
|
|
3905
|
+
}
|
|
3906
|
+
get heightTablet() {
|
|
3907
|
+
return this.getAttribute("height--tablet");
|
|
3908
|
+
}
|
|
3909
|
+
set heightTablet(value) {
|
|
3910
|
+
if (value) {
|
|
3911
|
+
this.setAttribute("height--tablet", value);
|
|
3912
|
+
} else {
|
|
3913
|
+
this.removeAttribute("height--tablet");
|
|
3914
|
+
}
|
|
3915
|
+
}
|
|
3916
|
+
get heightLaptop() {
|
|
3917
|
+
return this.getAttribute("height--laptop");
|
|
3918
|
+
}
|
|
3919
|
+
set heightLaptop(value) {
|
|
3920
|
+
if (value) {
|
|
3921
|
+
this.setAttribute("height--laptop", value);
|
|
3922
|
+
} else {
|
|
3923
|
+
this.removeAttribute("height--laptop");
|
|
3924
|
+
}
|
|
3925
|
+
}
|
|
3926
|
+
get heightDesktop() {
|
|
3927
|
+
return this.getAttribute("height--desktop");
|
|
3928
|
+
}
|
|
3929
|
+
set heightDesktop(value) {
|
|
3930
|
+
if (value) {
|
|
3931
|
+
this.setAttribute("height--desktop", value);
|
|
3932
|
+
} else {
|
|
3933
|
+
this.removeAttribute("height--desktop");
|
|
3934
|
+
}
|
|
3935
|
+
}
|
|
3936
|
+
get cover() {
|
|
3937
|
+
return this.hasAttribute("cover");
|
|
3938
|
+
}
|
|
3939
|
+
set cover(value) {
|
|
3940
|
+
if (value) {
|
|
3941
|
+
this.setAttribute("cover", "");
|
|
3942
|
+
} else {
|
|
3943
|
+
this.removeAttribute("cover");
|
|
3944
|
+
}
|
|
3945
|
+
}
|
|
3786
3946
|
}
|
|
3787
3947
|
const _Image = class _Image extends AbstractImage {
|
|
3788
3948
|
constructor() {
|
|
@@ -3905,12 +4065,12 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
3905
4065
|
async addSrc(value, alt, loading) {
|
|
3906
4066
|
this.removeSrc();
|
|
3907
4067
|
if (!value) {
|
|
3908
|
-
console.error('No "src" value
|
|
4068
|
+
console.error('No "src" value defined');
|
|
3909
4069
|
return;
|
|
3910
4070
|
}
|
|
3911
4071
|
const imgExtension = value.split(".").pop();
|
|
3912
4072
|
if (!this.possibleImgExtension.includes(imgExtension)) {
|
|
3913
|
-
console.error('No extensions image to "src" value
|
|
4073
|
+
console.error('No extensions image to "src" value defined');
|
|
3914
4074
|
return;
|
|
3915
4075
|
}
|
|
3916
4076
|
const imgName = value.slice(0, (imgExtension.length + 1) * -1);
|
|
@@ -3920,7 +4080,7 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
3920
4080
|
imgPathS = await this.transformImgPath(imgName, imgExtension, "-s");
|
|
3921
4081
|
}
|
|
3922
4082
|
if (imgPathS === "") {
|
|
3923
|
-
console.error('
|
|
4083
|
+
console.error('Invalid "src" value');
|
|
3924
4084
|
return;
|
|
3925
4085
|
}
|
|
3926
4086
|
const imgPathM = await this.transformImgPath(imgName, imgExtension, "-m");
|
|
@@ -4037,12 +4197,12 @@ class Patch extends HTMLElement {
|
|
|
4037
4197
|
if (!customElements.get("px-patch")) {
|
|
4038
4198
|
customElements.define("px-patch", Patch);
|
|
4039
4199
|
}
|
|
4040
|
-
const css$1 = '.price{--price-s: var(--px-
|
|
4200
|
+
const css$1 = '.price{--price-s: var(--px-price-size-unit-s-mobile);--price-m: var(--px-price-size-unit-m-mobile);--price-l: var(--px-price-size-unit-l-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default);font-size:var(--price-s)}@media only screen and (min-width: 48em){.price{--price-s: var(--px-price-size-unit-s-tablet);--price-m: var(--px-price-size-unit-m-tablet);--price-l: var(--px-price-size-unit-l-tablet)}}@media only screen and (min-width: 64.0625em){.price{--price-s: var(--px-price-size-unit-s-laptop);--price-m: var(--px-price-size-unit-m-laptop);--price-l: var(--px-price-size-unit-l-laptop)}}.promo,.free{color:var(--px-color-text-purpose-promo-default)}.neutral{color:var(--px-color-text-neutral-default)}.exceeding{color:var(--px-color-text-purpose-error-default)}.disabled{color:var(--px-color-text-state-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body)}@media only screen and (min-width: 48em){{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){{font-size:var(--px-text-size-label-m-laptop)}}::slotted([slot="new-promoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-color-text-brand-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted([slot="oldprice"]){color:var(--px-color-text-neutral-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:75%}::slotted(.decimals){font-size:50%}.m{font-size:var(--price-m)}.l{font-size:var(--price-l)}';
|
|
4041
4201
|
const styles$t = new CSSStyleSheet();
|
|
4042
4202
|
styles$t.replaceSync(css$1);
|
|
4043
4203
|
const priceVariantValues = [
|
|
4044
4204
|
"default",
|
|
4045
|
-
"
|
|
4205
|
+
"promo",
|
|
4046
4206
|
"free",
|
|
4047
4207
|
"neutral",
|
|
4048
4208
|
"exceeding",
|
|
@@ -4052,7 +4212,7 @@ const priceSizeValues = ["", "s", "m", "l"];
|
|
|
4052
4212
|
const _Price = class _Price extends PxElement {
|
|
4053
4213
|
constructor() {
|
|
4054
4214
|
super(styles$t);
|
|
4055
|
-
this.template = () => `<span class="price"><slot
|
|
4215
|
+
this.template = () => `<span class="price"><slot></slot></span>`;
|
|
4056
4216
|
this.shadowRoot.innerHTML = this.template();
|
|
4057
4217
|
}
|
|
4058
4218
|
static get observedAttributes() {
|
|
@@ -4113,30 +4273,11 @@ const _Price = class _Price extends PxElement {
|
|
|
4113
4273
|
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
4114
4274
|
this.toggleClass(oldValue, newValue);
|
|
4115
4275
|
if (!this.checkName(attrValues, newValue)) {
|
|
4116
|
-
console.error(
|
|
4117
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
4118
|
-
);
|
|
4276
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
4119
4277
|
}
|
|
4120
4278
|
}
|
|
4121
4279
|
buildPrice() {
|
|
4122
|
-
|
|
4123
|
-
const oldPrice = this.querySelector('[slot="oldprice"]');
|
|
4124
|
-
let strikethroughPrice = "";
|
|
4125
|
-
let newPriceSrText = "";
|
|
4126
|
-
let newPriceSrSpan;
|
|
4127
|
-
if (oldPrice && oldPrice.innerHTML !== "") {
|
|
4128
|
-
oldPrice.innerHTML = "€" + oldPrice.innerHTML;
|
|
4129
|
-
newPriceSrSpan = this.querySelector('[slot="newpurpose-promoprice"]');
|
|
4130
|
-
if (newPriceSrSpan) {
|
|
4131
|
-
newPriceSrText = newPriceSrSpan.outerHTML;
|
|
4132
|
-
price = newPriceSrSpan.nextSibling.textContent;
|
|
4133
|
-
} else {
|
|
4134
|
-
price = oldPrice.nextSibling.textContent;
|
|
4135
|
-
}
|
|
4136
|
-
strikethroughPrice = oldPrice.outerHTML + " ";
|
|
4137
|
-
} else if (oldPrice && oldPrice.innerHTML === "") {
|
|
4138
|
-
price = oldPrice.nextSibling.textContent;
|
|
4139
|
-
}
|
|
4280
|
+
const price = this.innerHTML.trim();
|
|
4140
4281
|
const isNumeric = /^[\d|.|,]+/.test(price);
|
|
4141
4282
|
let euro = "";
|
|
4142
4283
|
if (isNumeric) {
|
|
@@ -4147,16 +4288,16 @@ const _Price = class _Price extends PxElement {
|
|
|
4147
4288
|
const separator = price.charAt(price.length - 3);
|
|
4148
4289
|
if (separator === "." || separator === ",") {
|
|
4149
4290
|
const [nbrPart, decPart] = price.split(separator);
|
|
4150
|
-
this.innerHTML = `${
|
|
4291
|
+
this.innerHTML = `${euro}${nbrPart}<span class="decimals">${separator}${decPart}</span>`;
|
|
4151
4292
|
} else {
|
|
4152
|
-
this.innerHTML = `${
|
|
4293
|
+
this.innerHTML = `${euro}${price}`;
|
|
4153
4294
|
}
|
|
4154
4295
|
}
|
|
4155
4296
|
};
|
|
4156
4297
|
_Price.nativeName = "span";
|
|
4157
4298
|
let Price = _Price;
|
|
4158
4299
|
customElements.define("px-price", Price);
|
|
4159
|
-
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:
|
|
4300
|
+
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-font-line-height-m);white-space:nowrap;text-align:left;color:var(--px-color-text-brand-inverted);background-color:var(--px-color-background-surface-dark);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-label-m-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}}";
|
|
4160
4301
|
const styles$s = new CSSStyleSheet();
|
|
4161
4302
|
styles$s.replaceSync(css);
|
|
4162
4303
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
@@ -4169,7 +4310,7 @@ const _Ribbon = class _Ribbon extends PxElement {
|
|
|
4169
4310
|
_Ribbon.nativeName = "div";
|
|
4170
4311
|
let Ribbon = _Ribbon;
|
|
4171
4312
|
customElements.define("px-ribbon", Ribbon);
|
|
4172
|
-
const styles$r = ".separator{--separator-size: var(--px-border-
|
|
4313
|
+
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}}";
|
|
4173
4314
|
const styleSheet$m = new CSSStyleSheet();
|
|
4174
4315
|
styleSheet$m.replaceSync(styles$r);
|
|
4175
4316
|
const separatorDirectionValues = [
|
|
@@ -4183,9 +4324,9 @@ const separatorColorValues = [
|
|
|
4183
4324
|
"",
|
|
4184
4325
|
"default",
|
|
4185
4326
|
"none",
|
|
4186
|
-
"
|
|
4187
|
-
"
|
|
4188
|
-
"
|
|
4327
|
+
"state-hover",
|
|
4328
|
+
"state-active",
|
|
4329
|
+
"container-default",
|
|
4189
4330
|
"container-main",
|
|
4190
4331
|
"container-brand",
|
|
4191
4332
|
"purpose-success",
|
|
@@ -4253,7 +4394,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4253
4394
|
}
|
|
4254
4395
|
};
|
|
4255
4396
|
if (!this.checkName(attrValue, newValue)) {
|
|
4256
|
-
console.error(
|
|
4397
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4257
4398
|
} else {
|
|
4258
4399
|
updateSizeStyle(oldValue);
|
|
4259
4400
|
updateSizeStyle(newValue);
|
|
@@ -4273,7 +4414,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4273
4414
|
}
|
|
4274
4415
|
};
|
|
4275
4416
|
if (!this.checkName(attrValue, newValue)) {
|
|
4276
|
-
console.error(
|
|
4417
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4277
4418
|
} else {
|
|
4278
4419
|
updateColorStyle(oldValue);
|
|
4279
4420
|
updateColorStyle(newValue);
|
|
@@ -4286,7 +4427,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4286
4427
|
}
|
|
4287
4428
|
};
|
|
4288
4429
|
if (!this.checkName(attrValue, newValue)) {
|
|
4289
|
-
console.error(
|
|
4430
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
4290
4431
|
} else {
|
|
4291
4432
|
if (attrName === "direction") {
|
|
4292
4433
|
["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
|
|
@@ -4365,7 +4506,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4365
4506
|
_Separator.nativeName = "hr";
|
|
4366
4507
|
let Separator = _Separator;
|
|
4367
4508
|
customElements.define("px-separator", Separator);
|
|
4368
|
-
const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-
|
|
4509
|
+
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)}}";
|
|
4369
4510
|
const buttonIconStyles = new CSSStyleSheet();
|
|
4370
4511
|
buttonIconStyles.replaceSync(buttonIconCss);
|
|
4371
4512
|
const buttonIconSizeValues = ["", "default", "small"];
|
|
@@ -4401,7 +4542,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4401
4542
|
icon.setAttribute("size", "s");
|
|
4402
4543
|
}
|
|
4403
4544
|
if (this.size === "small") {
|
|
4404
|
-
icon.setAttribute("size", "
|
|
4545
|
+
icon.setAttribute("size", "xs");
|
|
4405
4546
|
}
|
|
4406
4547
|
if (!iconColor) {
|
|
4407
4548
|
icon.setAttribute("color", "inherit");
|
|
@@ -4443,7 +4584,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4443
4584
|
}
|
|
4444
4585
|
updateSize(oldValue, newValue, attrValue) {
|
|
4445
4586
|
if (!this.checkName(attrValue, newValue)) {
|
|
4446
|
-
console.error(
|
|
4587
|
+
console.error(`${newValue} is not a valid size value`);
|
|
4447
4588
|
} else {
|
|
4448
4589
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4449
4590
|
this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
|
|
@@ -4455,7 +4596,7 @@ const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
|
4455
4596
|
}
|
|
4456
4597
|
updateVariant(oldValue, newValue, attrValue) {
|
|
4457
4598
|
if (!this.checkName(attrValue, newValue)) {
|
|
4458
|
-
console.error(
|
|
4599
|
+
console.error(`${newValue} is not a valid variant value`);
|
|
4459
4600
|
} else {
|
|
4460
4601
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4461
4602
|
this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
|
|
@@ -4571,7 +4712,7 @@ let Tag = _Tag;
|
|
|
4571
4712
|
if (!customElements.get("px-tag")) {
|
|
4572
4713
|
customElements.define("px-tag", Tag);
|
|
4573
4714
|
}
|
|
4574
|
-
const styles$q = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-
|
|
4715
|
+
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)}}';
|
|
4575
4716
|
const styleSheet$k = new CSSStyleSheet();
|
|
4576
4717
|
styleSheet$k.replaceSync(styles$q);
|
|
4577
4718
|
class Tabs extends HTMLElement {
|
|
@@ -4775,7 +4916,7 @@ class Tabs extends HTMLElement {
|
|
|
4775
4916
|
return this.getAttribute("aria-label-previous");
|
|
4776
4917
|
}
|
|
4777
4918
|
}
|
|
4778
|
-
const styles$p = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-
|
|
4919
|
+
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:var(--px-font-weight-title);text-wrap:nowrap;color:var(--px-color-text-neutral-default);outline:none}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}@media only screen and (min-width: 1025px){button{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop)}:host[selected]>button{padding-block:var(--px-padding-m-desktop)}}";
|
|
4779
4920
|
const styleSheet$j = new CSSStyleSheet();
|
|
4780
4921
|
styleSheet$j.replaceSync(styles$p);
|
|
4781
4922
|
class Tab extends HTMLElement {
|
|
@@ -4961,9 +5102,9 @@ styleSheet$i.replaceSync(styles$o);
|
|
|
4961
5102
|
class Timeline extends HTMLElement {
|
|
4962
5103
|
template() {
|
|
4963
5104
|
return `
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
5105
|
+
<ol class="timeline" role="list">
|
|
5106
|
+
<slot></slot>
|
|
5107
|
+
</ol>
|
|
4967
5108
|
`;
|
|
4968
5109
|
}
|
|
4969
5110
|
constructor() {
|
|
@@ -5014,22 +5155,22 @@ class Timeline extends HTMLElement {
|
|
|
5014
5155
|
if (!customElements.get("px-timeline")) {
|
|
5015
5156
|
customElements.define("px-timeline", Timeline);
|
|
5016
5157
|
}
|
|
5017
|
-
const styles$n = '.timeline-item{display:flex;gap:var(--px-spacing-
|
|
5158
|
+
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:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-default-default)}.content-area{margin-bottom:var(--px-spacing-default-mobile)}.content-area ::slotted([slot="title"]){font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-l-mobile);color:var(--px-color-text-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);color:var(--px-color-text-dimmed-default);margin-top:var(--px-spacing-xs-mobile)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator{color:var(--px-color-text-neutral-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-text-dimmed-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-spacing-default-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop);margin-top:var(--px-spacing-xs-desktop)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-spacing-default-desktop)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-desktop)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-desktop);margin-top:var(--px-spacing-xs-desktop)}}';
|
|
5018
5159
|
const styleSheet$h = new CSSStyleSheet();
|
|
5019
5160
|
styleSheet$h.replaceSync(styles$n);
|
|
5020
5161
|
let item = "1";
|
|
5021
5162
|
class TimelineItem extends HTMLElement {
|
|
5022
5163
|
template() {
|
|
5023
5164
|
return `
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
|
|
5030
|
-
|
|
5031
|
-
|
|
5032
|
-
|
|
5165
|
+
<li class="timeline-item" role="listitem">
|
|
5166
|
+
<div class="indicator-area">
|
|
5167
|
+
<div class="indicator"></div>
|
|
5168
|
+
</div>
|
|
5169
|
+
<div class="content-area">
|
|
5170
|
+
<slot name="title"></slot>
|
|
5171
|
+
<slot name="content"></slot>
|
|
5172
|
+
</div>
|
|
5173
|
+
</li>
|
|
5033
5174
|
`;
|
|
5034
5175
|
}
|
|
5035
5176
|
constructor() {
|
|
@@ -5088,7 +5229,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5088
5229
|
if (!customElements.get("px-timeline-item")) {
|
|
5089
5230
|
customElements.define("px-timeline-item", TimelineItem);
|
|
5090
5231
|
}
|
|
5091
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-
|
|
5232
|
+
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-font-line-height-m);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}";
|
|
5092
5233
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
5093
5234
|
const typographyStyles$4 = new CSSStyleSheet();
|
|
5094
5235
|
const headingStyles$1 = new CSSStyleSheet();
|
|
@@ -5109,6 +5250,9 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5109
5250
|
"font-size",
|
|
5110
5251
|
"font-weight",
|
|
5111
5252
|
"text-align",
|
|
5253
|
+
"text-align--mobile",
|
|
5254
|
+
"text-align--tablet",
|
|
5255
|
+
"text-align--laptop",
|
|
5112
5256
|
"inverted",
|
|
5113
5257
|
"disabled"
|
|
5114
5258
|
];
|
|
@@ -5129,10 +5273,13 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5129
5273
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5130
5274
|
break;
|
|
5131
5275
|
case "text-align":
|
|
5276
|
+
case "text-align--mobile":
|
|
5277
|
+
case "text-align--tablet":
|
|
5278
|
+
case "text-align--laptop":
|
|
5132
5279
|
this.updateTypography(attrName, oldValue, newValue, textalignValues);
|
|
5133
5280
|
break;
|
|
5134
5281
|
case "disabled":
|
|
5135
|
-
this.color = "
|
|
5282
|
+
this.color = "state-disabled";
|
|
5136
5283
|
break;
|
|
5137
5284
|
default:
|
|
5138
5285
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -5153,22 +5300,40 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5153
5300
|
}
|
|
5154
5301
|
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
5155
5302
|
if (!this.checkName(attrValue, newValue)) {
|
|
5156
|
-
console.error(
|
|
5303
|
+
console.error(`${newValue} is not a valid value for ${attrName}`);
|
|
5157
5304
|
} else {
|
|
5158
5305
|
this.toggleClass(oldValue, newValue);
|
|
5159
5306
|
}
|
|
5160
5307
|
}
|
|
5161
5308
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
5162
|
-
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
5163
|
-
this.$el.classList.toggle(`${attrName}-${oldValue}`);
|
|
5164
|
-
}
|
|
5165
|
-
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
5166
|
-
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5167
|
-
}
|
|
5168
5309
|
if (!this.checkName(attrValue, newValue)) {
|
|
5169
|
-
console.error(
|
|
5310
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
5311
|
+
} else {
|
|
5312
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
5313
|
+
const breakpoint = splitResult.breakpoint;
|
|
5314
|
+
if (oldValue !== null && oldValue !== "") {
|
|
5315
|
+
this.$el.classList.toggle(
|
|
5316
|
+
`${splitResult.attrName}-${oldValue}${breakpoint}`
|
|
5317
|
+
);
|
|
5318
|
+
}
|
|
5319
|
+
if (newValue !== null && newValue !== "") {
|
|
5320
|
+
this.$el.classList.toggle(
|
|
5321
|
+
`${splitResult.attrName}-${newValue}${breakpoint}`
|
|
5322
|
+
);
|
|
5323
|
+
}
|
|
5170
5324
|
}
|
|
5171
5325
|
}
|
|
5326
|
+
splitAttrNameFromBreakpoint(attrName) {
|
|
5327
|
+
let breakpoint = "";
|
|
5328
|
+
if (["--mobile", "--tablet", "--laptop"].some(
|
|
5329
|
+
(suffix) => attrName.includes(suffix)
|
|
5330
|
+
)) {
|
|
5331
|
+
const attrNameSplit = attrName.split("--");
|
|
5332
|
+
attrName = attrNameSplit[0];
|
|
5333
|
+
breakpoint = `--${attrNameSplit[1]}`;
|
|
5334
|
+
}
|
|
5335
|
+
return { attrName, breakpoint };
|
|
5336
|
+
}
|
|
5172
5337
|
get variant() {
|
|
5173
5338
|
return this.getAttribute("variant");
|
|
5174
5339
|
}
|
|
@@ -5181,24 +5346,42 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5181
5346
|
set color(value) {
|
|
5182
5347
|
this.setAttribute("color", value);
|
|
5183
5348
|
}
|
|
5184
|
-
get
|
|
5349
|
+
get fontSize() {
|
|
5185
5350
|
return this.getAttribute("font-size");
|
|
5186
5351
|
}
|
|
5187
|
-
set
|
|
5352
|
+
set fontSize(value) {
|
|
5188
5353
|
this.setAttribute("font-size", value);
|
|
5189
5354
|
}
|
|
5190
|
-
get
|
|
5355
|
+
get fontWeight() {
|
|
5191
5356
|
return this.getAttribute("font-weight");
|
|
5192
5357
|
}
|
|
5193
|
-
set
|
|
5358
|
+
set fontWeight(value) {
|
|
5194
5359
|
this.setAttribute("font-weight", value);
|
|
5195
5360
|
}
|
|
5196
|
-
get
|
|
5361
|
+
get textAlign() {
|
|
5197
5362
|
return this.getAttribute("text-align");
|
|
5198
5363
|
}
|
|
5199
|
-
set
|
|
5364
|
+
set textAlign(value) {
|
|
5200
5365
|
this.setAttribute("text-align", value);
|
|
5201
5366
|
}
|
|
5367
|
+
get textAlignMobile() {
|
|
5368
|
+
return this.getAttribute("text-align--mobile");
|
|
5369
|
+
}
|
|
5370
|
+
set textAlignMobile(value) {
|
|
5371
|
+
this.setAttribute("text-align--mobile", value);
|
|
5372
|
+
}
|
|
5373
|
+
get textAlignTablet() {
|
|
5374
|
+
return this.getAttribute("text-align--tablet");
|
|
5375
|
+
}
|
|
5376
|
+
set textAlignTablet(value) {
|
|
5377
|
+
this.setAttribute("text-align--tablet", value);
|
|
5378
|
+
}
|
|
5379
|
+
get textAlignLaptop() {
|
|
5380
|
+
return this.getAttribute("text-align--laptop");
|
|
5381
|
+
}
|
|
5382
|
+
set textAlignLaptop(value) {
|
|
5383
|
+
this.setAttribute("text-align--laptop", value);
|
|
5384
|
+
}
|
|
5202
5385
|
get inverted() {
|
|
5203
5386
|
return this.getAttribute("inverted");
|
|
5204
5387
|
}
|
|
@@ -5215,7 +5398,7 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5215
5398
|
_Paragraph.nativeName = "p";
|
|
5216
5399
|
let Paragraph = _Paragraph;
|
|
5217
5400
|
customElements.define("px-p", Paragraph);
|
|
5218
|
-
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-
|
|
5401
|
+
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}}";
|
|
5219
5402
|
const styleSheet$g = new CSSStyleSheet();
|
|
5220
5403
|
styleSheet$g.replaceSync(styles$m);
|
|
5221
5404
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
@@ -5224,15 +5407,15 @@ class Modal extends HTMLElement {
|
|
|
5224
5407
|
super();
|
|
5225
5408
|
this.template = ` <dialog>
|
|
5226
5409
|
<div id="container">
|
|
5227
|
-
<px-vstack gap="
|
|
5228
|
-
<px-hstack id="icon-container" gap="
|
|
5410
|
+
<px-vstack gap="default" >
|
|
5411
|
+
<px-hstack id="icon-container" gap="s" align-items="flex-start">
|
|
5229
5412
|
${this.getAttribute("status") ? `<px-icon size="l" name="checkmark_fill" from="lavender" color="purpose-${this.getAttribute("status")}"></px-icon>` : ""}
|
|
5230
5413
|
|
|
5231
|
-
<px-vstack gap="
|
|
5414
|
+
<px-vstack gap="s">
|
|
5232
5415
|
<px-h1 variant="title-l">
|
|
5233
5416
|
<slot name="title"></slot>
|
|
5234
5417
|
</px-h1>
|
|
5235
|
-
<px-p font-weight="
|
|
5418
|
+
<px-p font-weight="title">
|
|
5236
5419
|
<slot name="description"></slot>
|
|
5237
5420
|
</px-p>
|
|
5238
5421
|
</px-vstack>
|
|
@@ -5243,7 +5426,7 @@ class Modal extends HTMLElement {
|
|
|
5243
5426
|
<px-separator size="m"></px-separator>
|
|
5244
5427
|
<px-stack
|
|
5245
5428
|
gap--mobile="heading-to-content"
|
|
5246
|
-
gap="
|
|
5429
|
+
gap="default"
|
|
5247
5430
|
justify-content="flex-end"
|
|
5248
5431
|
direction="row"
|
|
5249
5432
|
direction--mobile="column-reverse"
|
|
@@ -5374,7 +5557,7 @@ class Modal extends HTMLElement {
|
|
|
5374
5557
|
if (!customElements.get("px-modal")) {
|
|
5375
5558
|
customElements.define("px-modal", Modal);
|
|
5376
5559
|
}
|
|
5377
|
-
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-
|
|
5560
|
+
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)}}";
|
|
5378
5561
|
const spanStyles$1 = new CSSStyleSheet();
|
|
5379
5562
|
const typographyStyles$3 = new CSSStyleSheet();
|
|
5380
5563
|
spanStyles$1.replaceSync(spanCss);
|
|
@@ -5412,7 +5595,7 @@ const _Span = class _Span extends PxElement {
|
|
|
5412
5595
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5413
5596
|
break;
|
|
5414
5597
|
case "disabled":
|
|
5415
|
-
this.color = "
|
|
5598
|
+
this.color = "state-disabled";
|
|
5416
5599
|
break;
|
|
5417
5600
|
default:
|
|
5418
5601
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -5431,9 +5614,7 @@ const _Span = class _Span extends PxElement {
|
|
|
5431
5614
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5432
5615
|
}
|
|
5433
5616
|
if (!this.checkName(attrValue, newValue)) {
|
|
5434
|
-
console.error(
|
|
5435
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
5436
|
-
);
|
|
5617
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
5437
5618
|
}
|
|
5438
5619
|
}
|
|
5439
5620
|
get color() {
|
|
@@ -5508,7 +5689,8 @@ const _Link = class _Link extends PxElement {
|
|
|
5508
5689
|
"inverted",
|
|
5509
5690
|
"font-size",
|
|
5510
5691
|
"color",
|
|
5511
|
-
"font-weight"
|
|
5692
|
+
"font-weight",
|
|
5693
|
+
"title"
|
|
5512
5694
|
];
|
|
5513
5695
|
}
|
|
5514
5696
|
connectedCallback() {
|
|
@@ -5519,6 +5701,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5519
5701
|
if (this.$after && this.$after.localName === "px-icon") {
|
|
5520
5702
|
this.configureBeforeAfterIcon(this.$after);
|
|
5521
5703
|
}
|
|
5704
|
+
transferAccessibilityAttributes(this, this.$el, false);
|
|
5522
5705
|
}
|
|
5523
5706
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5524
5707
|
if (oldValue !== newValue) {
|
|
@@ -5547,6 +5730,12 @@ const _Link = class _Link extends PxElement {
|
|
|
5547
5730
|
case "font-weight":
|
|
5548
5731
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
5549
5732
|
break;
|
|
5733
|
+
case "title":
|
|
5734
|
+
if (newValue) {
|
|
5735
|
+
this.$el.setAttribute("title", newValue);
|
|
5736
|
+
this.removeAttribute("title");
|
|
5737
|
+
}
|
|
5738
|
+
break;
|
|
5550
5739
|
default:
|
|
5551
5740
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5552
5741
|
break;
|
|
@@ -5560,7 +5749,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5560
5749
|
this.$el.focus();
|
|
5561
5750
|
});
|
|
5562
5751
|
if (!iconSize) {
|
|
5563
|
-
icon.setAttribute("size", "
|
|
5752
|
+
icon.setAttribute("size", "xs");
|
|
5564
5753
|
}
|
|
5565
5754
|
if (!iconColor) {
|
|
5566
5755
|
icon.setAttribute("color", "inherit");
|
|
@@ -5587,7 +5776,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5587
5776
|
this._toggleClassList(newValue);
|
|
5588
5777
|
}
|
|
5589
5778
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
5590
|
-
console.error(`Bad "variant" value for ${
|
|
5779
|
+
console.error(`Bad "variant" value for ${newValue}`);
|
|
5591
5780
|
}
|
|
5592
5781
|
if (newValue === "icon-link") {
|
|
5593
5782
|
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
@@ -5601,7 +5790,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5601
5790
|
this._toggleClassList(newValue);
|
|
5602
5791
|
}
|
|
5603
5792
|
if (!this.checkName(linkShapeValues, newValue)) {
|
|
5604
|
-
console.error(
|
|
5793
|
+
console.error(`${newValue} is not a valid "shape" value`);
|
|
5605
5794
|
}
|
|
5606
5795
|
}
|
|
5607
5796
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
@@ -5612,7 +5801,7 @@ const _Link = class _Link extends PxElement {
|
|
|
5612
5801
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5613
5802
|
}
|
|
5614
5803
|
if (!this.checkName(attrValue, newValue)) {
|
|
5615
|
-
console.error(`Bad ${attrName} value
|
|
5804
|
+
console.error(`Bad ${attrName} value: ${newValue}`);
|
|
5616
5805
|
}
|
|
5617
5806
|
}
|
|
5618
5807
|
get $before() {
|
|
@@ -5674,14 +5863,24 @@ const _Link = class _Link extends PxElement {
|
|
|
5674
5863
|
set fontweight(value) {
|
|
5675
5864
|
this.setAttribute("font-weight", value);
|
|
5676
5865
|
}
|
|
5866
|
+
get title() {
|
|
5867
|
+
return this.getAttribute("title");
|
|
5868
|
+
}
|
|
5869
|
+
set title(value) {
|
|
5870
|
+
if (value) {
|
|
5871
|
+
this.setAttribute("title", value);
|
|
5872
|
+
} else {
|
|
5873
|
+
this.removeAttribute("title");
|
|
5874
|
+
}
|
|
5875
|
+
}
|
|
5677
5876
|
};
|
|
5678
5877
|
_Link.nativeName = "a";
|
|
5679
5878
|
let Link = _Link;
|
|
5680
5879
|
if (!customElements.get("px-a")) {
|
|
5681
5880
|
customElements.define("px-a", Link);
|
|
5682
5881
|
}
|
|
5683
|
-
const typographyCss = "*{font-family:var(--px-font-family);font-weight:
|
|
5684
|
-
const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
|
|
5882
|
+
const typographyCss = "*{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}:host([inverted]) slot{color:var(--px-color-text-neutral-inverted)}";
|
|
5883
|
+
const lightStyles = ".li{padding-bottom:var(--px-padding-xs-desktop)}";
|
|
5685
5884
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
5686
5885
|
const headingStyles = new CSSStyleSheet();
|
|
5687
5886
|
const linkStyles = new CSSStyleSheet();
|
|
@@ -5723,147 +5922,7 @@ class Typography extends HTMLElement {
|
|
|
5723
5922
|
}
|
|
5724
5923
|
}
|
|
5725
5924
|
customElements.define("px-typography", Typography);
|
|
5726
|
-
const
|
|
5727
|
-
const entrypointStyles = new CSSStyleSheet();
|
|
5728
|
-
entrypointStyles.replaceSync(entrypointCss);
|
|
5729
|
-
const backgroundValues = [
|
|
5730
|
-
"",
|
|
5731
|
-
"default",
|
|
5732
|
-
"action-neutral-bare",
|
|
5733
|
-
"action-neutral"
|
|
5734
|
-
];
|
|
5735
|
-
const _Entrypoint = class _Entrypoint extends PxElement {
|
|
5736
|
-
constructor() {
|
|
5737
|
-
super(entrypointStyles);
|
|
5738
|
-
this.template = () => `
|
|
5739
|
-
<px-hstack gap="after-element-s" align-items="center">
|
|
5740
|
-
<px-hstack grow="2" gap="after-element-s" align-items="center">
|
|
5741
|
-
<slot name="icon"></slot>
|
|
5742
|
-
<px-vstack gap="after-element-none" align-items="flex-start">
|
|
5743
|
-
<slot></slot>
|
|
5744
|
-
<slot name="description"></slot>
|
|
5745
|
-
</px-vstack>
|
|
5746
|
-
</px-hstack>
|
|
5747
|
-
<px-icon name="${this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"}" size="m" from="lavender" color="inherit" shrink="1"></px-icon>
|
|
5748
|
-
</px-hstack>
|
|
5749
|
-
`;
|
|
5750
|
-
const $root = document.createElement(this.nativeName);
|
|
5751
|
-
$root.innerHTML = this.template();
|
|
5752
|
-
this.shadowRoot.appendChild($root);
|
|
5753
|
-
}
|
|
5754
|
-
static get observedAttributes() {
|
|
5755
|
-
return [
|
|
5756
|
-
...super.observedAttributes,
|
|
5757
|
-
"disabled",
|
|
5758
|
-
"inverted",
|
|
5759
|
-
"background-color"
|
|
5760
|
-
];
|
|
5761
|
-
}
|
|
5762
|
-
connectedCallback() {
|
|
5763
|
-
super.connectedCallback();
|
|
5764
|
-
const icons = this.querySelectorAll("px-icon");
|
|
5765
|
-
if (icons) {
|
|
5766
|
-
icons.forEach((icon) => {
|
|
5767
|
-
const iconSize = icon.getAttribute("size");
|
|
5768
|
-
const iconColor = icon.getAttribute("color");
|
|
5769
|
-
if (icon) {
|
|
5770
|
-
icon.addEventListener("click", () => {
|
|
5771
|
-
this.$el.focus();
|
|
5772
|
-
});
|
|
5773
|
-
if (!iconSize) {
|
|
5774
|
-
icon.setAttribute("size", "m");
|
|
5775
|
-
}
|
|
5776
|
-
if (!iconColor) {
|
|
5777
|
-
icon.setAttribute("color", "inherit");
|
|
5778
|
-
}
|
|
5779
|
-
}
|
|
5780
|
-
});
|
|
5781
|
-
}
|
|
5782
|
-
}
|
|
5783
|
-
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
5784
|
-
if (oldValue !== newValue) {
|
|
5785
|
-
switch (attrName) {
|
|
5786
|
-
case "disabled":
|
|
5787
|
-
this.$el.toggleAttribute("aria-disabled");
|
|
5788
|
-
if (newValue !== null) {
|
|
5789
|
-
this.$el.setAttribute("aria-disabled", "true");
|
|
5790
|
-
break;
|
|
5791
|
-
}
|
|
5792
|
-
break;
|
|
5793
|
-
case "target":
|
|
5794
|
-
this.updateIconName();
|
|
5795
|
-
break;
|
|
5796
|
-
case "background-color":
|
|
5797
|
-
this.updateBackgroundColor(
|
|
5798
|
-
attrName,
|
|
5799
|
-
oldValue,
|
|
5800
|
-
newValue,
|
|
5801
|
-
backgroundValues
|
|
5802
|
-
);
|
|
5803
|
-
break;
|
|
5804
|
-
default:
|
|
5805
|
-
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
5806
|
-
break;
|
|
5807
|
-
}
|
|
5808
|
-
}
|
|
5809
|
-
}
|
|
5810
|
-
checkName(values, value) {
|
|
5811
|
-
return values.includes(value);
|
|
5812
|
-
}
|
|
5813
|
-
updateIconName() {
|
|
5814
|
-
const icon = this.shadowRoot.querySelector("px-icon");
|
|
5815
|
-
if (icon) {
|
|
5816
|
-
icon.setAttribute(
|
|
5817
|
-
"name",
|
|
5818
|
-
this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"
|
|
5819
|
-
);
|
|
5820
|
-
}
|
|
5821
|
-
}
|
|
5822
|
-
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
5823
|
-
if (!this.checkName(attrValue, newValue)) {
|
|
5824
|
-
console.error(`Bad "${attrName}" value for`, this.$el);
|
|
5825
|
-
return;
|
|
5826
|
-
}
|
|
5827
|
-
const updateColorStyle = (value) => {
|
|
5828
|
-
if (value !== null && value !== "" && value !== "default") {
|
|
5829
|
-
this.$el.style.setProperty(
|
|
5830
|
-
`--entrypoint-background-color-default`,
|
|
5831
|
-
`var(--px-background-color-${value}-default)`
|
|
5832
|
-
);
|
|
5833
|
-
this.$el.style.setProperty(
|
|
5834
|
-
`--entrypoint-background-color-inverted`,
|
|
5835
|
-
`var(--px-background-color-${value}-inverted)`
|
|
5836
|
-
);
|
|
5837
|
-
}
|
|
5838
|
-
};
|
|
5839
|
-
updateColorStyle(oldValue);
|
|
5840
|
-
updateColorStyle(newValue);
|
|
5841
|
-
}
|
|
5842
|
-
get disabled() {
|
|
5843
|
-
return this.getAttribute("disabled");
|
|
5844
|
-
}
|
|
5845
|
-
set disabled(value) {
|
|
5846
|
-
this.setAttribute("disabled", value);
|
|
5847
|
-
}
|
|
5848
|
-
get backgroundColor() {
|
|
5849
|
-
return this.getAttribute("background-color");
|
|
5850
|
-
}
|
|
5851
|
-
set backgroundColor(value) {
|
|
5852
|
-
this.setAttribute("background-color", value);
|
|
5853
|
-
}
|
|
5854
|
-
get inverted() {
|
|
5855
|
-
return this.getAttribute("inverted");
|
|
5856
|
-
}
|
|
5857
|
-
set inverted(value) {
|
|
5858
|
-
this.setAttribute("inverted", value);
|
|
5859
|
-
}
|
|
5860
|
-
};
|
|
5861
|
-
_Entrypoint.nativeName = "a";
|
|
5862
|
-
let Entrypoint = _Entrypoint;
|
|
5863
|
-
if (!customElements.get("px-entrypoint")) {
|
|
5864
|
-
customElements.define("px-entrypoint", Entrypoint);
|
|
5865
|
-
}
|
|
5866
|
-
const styles$l = ".spinner{display:inline-block;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);border-top:3px solid var(--px-text-color-heading-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-text-color-heading-brand-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64em){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90em){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop)}}";
|
|
5925
|
+
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-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}@media only screen and (min-width: 64em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}@media only screen and (min-width: 90em){.size-xs{width:var(--px-size-icon-xs);height:var(--px-size-icon-xs)}.size-s,.size-m{width:var(--px-size-icon-m);height:var(--px-size-icon-m)}.size-l{width:var(--px-size-icon-l);height:var(--px-size-icon-l)}.size-xl{width:var(--px-size-icon-xl);height:var(--px-size-icon-xl)}}";
|
|
5867
5926
|
const styleSheet$f = new CSSStyleSheet();
|
|
5868
5927
|
const typographyStyles = new CSSStyleSheet();
|
|
5869
5928
|
styleSheet$f.replaceSync(styles$l);
|
|
@@ -5917,9 +5976,7 @@ class Spinner extends HTMLElement {
|
|
|
5917
5976
|
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
5918
5977
|
}
|
|
5919
5978
|
if (!this.checkName(attrValues, newValue)) {
|
|
5920
|
-
console.error(
|
|
5921
|
-
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
5922
|
-
);
|
|
5979
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
5923
5980
|
}
|
|
5924
5981
|
}
|
|
5925
5982
|
checkName(values, value) {
|
|
@@ -5951,8 +6008,8 @@ customElements.define("px-spinner", Spinner);
|
|
|
5951
6008
|
const cellVariantValues = ["", "default", "naked", "contained"];
|
|
5952
6009
|
const cellBackgroundColorValues = [
|
|
5953
6010
|
"",
|
|
5954
|
-
"
|
|
5955
|
-
"
|
|
6011
|
+
"container-light",
|
|
6012
|
+
"container-default"
|
|
5956
6013
|
];
|
|
5957
6014
|
function configurePrefixIcon$1(el) {
|
|
5958
6015
|
const prefixIconHasSize = el.hasAttribute("size");
|
|
@@ -5996,14 +6053,12 @@ function configurePrefixImg$1(el) {
|
|
|
5996
6053
|
}
|
|
5997
6054
|
function configureCellBackgroundColor(el) {
|
|
5998
6055
|
if (el.getAttribute("variant") === "contained" && !el.getAttribute("backgroundColor")) {
|
|
5999
|
-
el.setAttribute("backgroundColor", "
|
|
6056
|
+
el.setAttribute("backgroundColor", "container-light");
|
|
6000
6057
|
}
|
|
6001
6058
|
}
|
|
6002
6059
|
function updateVariant(element, oldValue, newValue) {
|
|
6003
6060
|
if (!checkName(cellVariantValues, newValue)) {
|
|
6004
|
-
console.error(
|
|
6005
|
-
`${newValue} is not an allowed variant value for ${element}.`
|
|
6006
|
-
);
|
|
6061
|
+
console.error(`${newValue} is not an allowed variant value.`);
|
|
6007
6062
|
return;
|
|
6008
6063
|
}
|
|
6009
6064
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -6034,18 +6089,18 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
6034
6089
|
}
|
|
6035
6090
|
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
6036
6091
|
if (!checkName(attrValue, newValue)) {
|
|
6037
|
-
console.error(`${newValue} is not an allowed ${attrName} value
|
|
6092
|
+
console.error(`${newValue} is not an allowed ${attrName} value`);
|
|
6038
6093
|
return;
|
|
6039
6094
|
}
|
|
6040
6095
|
const updateColorStyle = (value) => {
|
|
6041
6096
|
if (value !== null && value !== "" && value !== "default") {
|
|
6042
6097
|
el.style.setProperty(
|
|
6043
6098
|
`--cell-contained-background-color-default`,
|
|
6044
|
-
`var(--px-background
|
|
6099
|
+
`var(--px-color-background-${value}-default)`
|
|
6045
6100
|
);
|
|
6046
6101
|
el.style.setProperty(
|
|
6047
6102
|
`--cell-contained-background-color-inverted`,
|
|
6048
|
-
`var(--px-background
|
|
6103
|
+
`var(--px-color-background-${value}-inverted)`
|
|
6049
6104
|
);
|
|
6050
6105
|
}
|
|
6051
6106
|
};
|
|
@@ -6083,8 +6138,8 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6083
6138
|
}
|
|
6084
6139
|
}
|
|
6085
6140
|
}
|
|
6086
|
-
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-
|
|
6087
|
-
const styles$k = ':host([separator]):after{position:relative;content:"";display:
|
|
6141
|
+
const common$1 = ":host{display:block;outline:none}:host .cell,:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{display:block;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .cell,:host .cell *,:host .cell-link,:host .cell-link *,:host .cell-button,:host .cell-button *,:host .cell-checkbox,:host .cell-checkbox *,:host .cell-radio,:host .cell-radio *,:host .cell-switch,:host .cell-switch *{box-sizing:border-box}:host .cell-link,:host .cell-button,:host .cell-checkbox,:host .cell-radio,:host .cell-switch{outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .cell-link,:host .cell-button{cursor:pointer}:host .cell-checkbox,:host .cell-radio,:host .cell-switch{cursor:default}:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host(:not([disabled])) .cell-link:focus-visible,:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid;position:relative}:host:host([disabled]) .cell-link,:host:host([disabled]) .cell-button,:host:host([disabled]) .cell-checkbox,:host:host([disabled]) .cell-radio,:host:host([disabled]) .cell-switch{cursor:default;pointer-events:none}@media only screen and (min-width: 768px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 1025px){:scope:host .cell-link,:scope:host .cell-button,:scope:host .cell-checkbox,:scope:host .cell-radio,:scope:host .cell-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .cell-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .cell-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .cell-link:focus-visible,:scope:host:host(:not([disabled])) .cell-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .cell-link,:host([inverted]) .cell-button,:host([inverted]) .cell-checkbox,:host([inverted]) .cell-radio,:host([inverted]) .cell-switch{outline-color:var(--px-color-border-focus-outline-inverted)}";
|
|
6142
|
+
const styles$k = ':host([separator]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);padding:var(--px-spacing-s-mobile)}.cell ::slotted([slot="description"]){font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-color-background-surface-light) )}:host([hoverable]) .contained{border:var(--px-size-border-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-color-border-state-hover-default)}@media only screen and (max-width: 47.9375em){:host([separator--mobile]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) )}}@media only screen and (min-width: 48em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 48em) and (max-width: 64em){:host([separator--tablet]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 64.0625em){:host{display:block}.cell{font-size:var(--px-text-size-label-l-laptop);padding:var(--px-spacing-s-laptop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([separator--laptop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.contained{border-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) )}}@media only screen and (min-width: 90.0625em){:host{display:block}:host([separator--desktop]):after{position:relative;content:"";display:block;width:100%;border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}.cell{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-spacing-s-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.contained{border-radius:var( --cell-contained-border-radius-top-left--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-top-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-right--desktop, var(--px-radius-main) ) var( --cell-contained-border-radius-bottom-left--desktop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-color-border-main-inverted)}:host([inverted]) .cell{color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-color-background-state-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-color-background-state-hover-bordered-inverted );border-color:var(--px-color-border-state-hover-inverted)}';
|
|
6088
6143
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6089
6144
|
const styleSheet$e = new CSSStyleSheet();
|
|
6090
6145
|
commonStyleSheet$a.replaceSync(common$1);
|
|
@@ -6094,17 +6149,17 @@ const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
|
6094
6149
|
const _Cell = class _Cell extends PxElement {
|
|
6095
6150
|
template() {
|
|
6096
6151
|
return `
|
|
6097
|
-
<px-hstack gap="
|
|
6098
|
-
<px-hstack gap="
|
|
6152
|
+
<px-hstack gap="s" justify-content="space-between" align-items="center">
|
|
6153
|
+
<px-hstack gap="s" align-items="center">
|
|
6099
6154
|
<slot name="prefix"></slot>
|
|
6100
6155
|
<slot name="visual"></slot>
|
|
6101
|
-
<px-vstack gap="
|
|
6156
|
+
<px-vstack gap="2xs">
|
|
6102
6157
|
<slot></slot>
|
|
6103
6158
|
<slot name="description"></slot>
|
|
6104
6159
|
</px-vstack>
|
|
6105
6160
|
</px-hstack>
|
|
6106
|
-
<px-hstack gap="
|
|
6107
|
-
<px-stack direction="column" gap="
|
|
6161
|
+
<px-hstack gap="s" align-items="center" class="cell-layout__suffix-action-container">
|
|
6162
|
+
<px-stack direction="column" gap="2xs" align-items="flex-end" class="cell__suffix-container">
|
|
6108
6163
|
<slot name="suffix"></slot>
|
|
6109
6164
|
</px-stack>
|
|
6110
6165
|
<slot name="action-indicator"></slot>
|
|
@@ -6143,7 +6198,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6143
6198
|
});
|
|
6144
6199
|
}
|
|
6145
6200
|
if (slotSuffixHasMultipleButtonIcon) {
|
|
6146
|
-
this.$suffixContainer.gap = "
|
|
6201
|
+
this.$suffixContainer.gap = "s";
|
|
6147
6202
|
this.$suffixContainer.direction = "row";
|
|
6148
6203
|
this.$suffixContainer.alignItems = "center";
|
|
6149
6204
|
}
|
|
@@ -6157,11 +6212,15 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6157
6212
|
"variant",
|
|
6158
6213
|
"disabled",
|
|
6159
6214
|
"separator",
|
|
6215
|
+
"separator--mobile",
|
|
6160
6216
|
"separator--tablet",
|
|
6161
6217
|
"separator--laptop",
|
|
6218
|
+
"separator--desktop",
|
|
6162
6219
|
"radius",
|
|
6220
|
+
"radius--mobile",
|
|
6163
6221
|
"radius--tablet",
|
|
6164
6222
|
"radius--laptop",
|
|
6223
|
+
"radius--desktop",
|
|
6165
6224
|
"background-color"
|
|
6166
6225
|
];
|
|
6167
6226
|
}
|
|
@@ -6181,15 +6240,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6181
6240
|
}
|
|
6182
6241
|
break;
|
|
6183
6242
|
case "radius":
|
|
6243
|
+
case "radius--mobile":
|
|
6184
6244
|
case "radius--tablet":
|
|
6185
6245
|
case "radius--laptop":
|
|
6246
|
+
case "radius--desktop":
|
|
6186
6247
|
this.updateRadius(attrName, oldValue, newValue, radiusValues);
|
|
6187
6248
|
break;
|
|
6188
|
-
case "separator":
|
|
6189
|
-
case "separator--tablet":
|
|
6190
|
-
case "separator--laptop":
|
|
6191
|
-
this.configureSeparator(attrName);
|
|
6192
|
-
break;
|
|
6193
6249
|
case "background-color":
|
|
6194
6250
|
updateBackgroundColor(
|
|
6195
6251
|
this.$el,
|
|
@@ -6226,18 +6282,24 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6226
6282
|
}
|
|
6227
6283
|
updateRadius(attrName, oldValue, newValue, attrValues) {
|
|
6228
6284
|
if (!checkName(attrValues, newValue)) {
|
|
6229
|
-
console.error(
|
|
6285
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
6230
6286
|
return;
|
|
6231
6287
|
}
|
|
6232
6288
|
const hasBreakpoint = attrName.includes("--");
|
|
6233
|
-
const breakpoints = [
|
|
6289
|
+
const breakpoints = [];
|
|
6234
6290
|
if (!hasBreakpoint) {
|
|
6291
|
+
if (!this.separatorMobile) {
|
|
6292
|
+
breakpoints.push("mobile");
|
|
6293
|
+
}
|
|
6235
6294
|
if (!this.separatorTablet) {
|
|
6236
6295
|
breakpoints.push("tablet");
|
|
6237
6296
|
}
|
|
6238
6297
|
if (!this.separatorLaptop) {
|
|
6239
6298
|
breakpoints.push("laptop");
|
|
6240
6299
|
}
|
|
6300
|
+
if (!this.separatorDesktop) {
|
|
6301
|
+
breakpoints.push("desktop");
|
|
6302
|
+
}
|
|
6241
6303
|
} else {
|
|
6242
6304
|
const breakpoint = attrName.split("--")[1];
|
|
6243
6305
|
breakpoints.push(breakpoint);
|
|
@@ -6260,6 +6322,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6260
6322
|
} else if (value === "none") {
|
|
6261
6323
|
sides = ["top-right", "bottom-right", "bottom-left", "top-left"];
|
|
6262
6324
|
}
|
|
6325
|
+
console.log(sides);
|
|
6263
6326
|
sides.forEach((side) => {
|
|
6264
6327
|
this.$el.style.setProperty(
|
|
6265
6328
|
`--cell-contained-border-radius-${side}--${breakpoint}`,
|
|
@@ -6267,24 +6330,6 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6267
6330
|
);
|
|
6268
6331
|
});
|
|
6269
6332
|
}
|
|
6270
|
-
configureSeparator(attrName) {
|
|
6271
|
-
const hasBreakpoint = attrName.includes("--");
|
|
6272
|
-
const breakpoints = ["mobile"];
|
|
6273
|
-
if (!hasBreakpoint) {
|
|
6274
|
-
if (!this.separatorTablet) {
|
|
6275
|
-
breakpoints.push("tablet");
|
|
6276
|
-
}
|
|
6277
|
-
if (!this.separatorLaptop) {
|
|
6278
|
-
breakpoints.push("laptop");
|
|
6279
|
-
}
|
|
6280
|
-
} else {
|
|
6281
|
-
const breakpoint = attrName.split("--")[1];
|
|
6282
|
-
breakpoints.push(breakpoint);
|
|
6283
|
-
}
|
|
6284
|
-
breakpoints.forEach((breakpoint) => {
|
|
6285
|
-
this.style.setProperty(`--cell-separator--${breakpoint}`, "block");
|
|
6286
|
-
});
|
|
6287
|
-
}
|
|
6288
6333
|
get $children() {
|
|
6289
6334
|
return this.querySelectorAll("px-cell > *");
|
|
6290
6335
|
}
|
|
@@ -6329,6 +6374,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6329
6374
|
set separator(value) {
|
|
6330
6375
|
this.setAttribute("separator", value);
|
|
6331
6376
|
}
|
|
6377
|
+
get separatorMobile() {
|
|
6378
|
+
return this.getAttribute("separator--mobile");
|
|
6379
|
+
}
|
|
6380
|
+
set separatorMobile(value) {
|
|
6381
|
+
this.setAttribute("separator--mobile", value);
|
|
6382
|
+
}
|
|
6332
6383
|
get separatorTablet() {
|
|
6333
6384
|
return this.getAttribute("separator--tablet");
|
|
6334
6385
|
}
|
|
@@ -6341,12 +6392,24 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6341
6392
|
set separatorLaptop(value) {
|
|
6342
6393
|
this.setAttribute("separator--laptop", value);
|
|
6343
6394
|
}
|
|
6395
|
+
get separatorDesktop() {
|
|
6396
|
+
return this.getAttribute("separator--desktop");
|
|
6397
|
+
}
|
|
6398
|
+
set separatorDesktop(value) {
|
|
6399
|
+
this.setAttribute("separator--desktop", value);
|
|
6400
|
+
}
|
|
6344
6401
|
get radius() {
|
|
6345
6402
|
return this.getAttribute("radius");
|
|
6346
6403
|
}
|
|
6347
6404
|
set radius(value) {
|
|
6348
6405
|
this.setAttribute("radius", value);
|
|
6349
6406
|
}
|
|
6407
|
+
get radiusMobile() {
|
|
6408
|
+
return this.getAttribute("radius--mobile");
|
|
6409
|
+
}
|
|
6410
|
+
set radiusMobile(value) {
|
|
6411
|
+
this.setAttribute("radius--mobile", value);
|
|
6412
|
+
}
|
|
6350
6413
|
get radiusTablet() {
|
|
6351
6414
|
return this.getAttribute("radius--tablet");
|
|
6352
6415
|
}
|
|
@@ -6359,6 +6422,12 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6359
6422
|
set radiusLaptop(value) {
|
|
6360
6423
|
this.setAttribute("radius--laptop", value);
|
|
6361
6424
|
}
|
|
6425
|
+
get radiusDesktop() {
|
|
6426
|
+
return this.getAttribute("radius--desktop");
|
|
6427
|
+
}
|
|
6428
|
+
set radiusDesktop(value) {
|
|
6429
|
+
this.setAttribute("radius--desktop", value);
|
|
6430
|
+
}
|
|
6362
6431
|
get backgroundColor() {
|
|
6363
6432
|
return this.getAttribute("background-color");
|
|
6364
6433
|
}
|
|
@@ -6375,7 +6444,7 @@ let Cell = _Cell;
|
|
|
6375
6444
|
if (!customElements.get("px-cell")) {
|
|
6376
6445
|
customElements.define("px-cell", Cell);
|
|
6377
6446
|
}
|
|
6378
|
-
const styles$j =
|
|
6447
|
+
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)}';
|
|
6379
6448
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6380
6449
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6381
6450
|
const styleSheet$d = new CSSStyleSheet();
|
|
@@ -6392,7 +6461,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6392
6461
|
name="chevron_right"
|
|
6393
6462
|
slot="action-indicator"
|
|
6394
6463
|
from="lavender"
|
|
6395
|
-
size="
|
|
6464
|
+
size="m"
|
|
6396
6465
|
color="inherit"
|
|
6397
6466
|
></px-icon>
|
|
6398
6467
|
</px-cell>
|
|
@@ -6434,13 +6503,18 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6434
6503
|
"variant",
|
|
6435
6504
|
"disabled",
|
|
6436
6505
|
"separator",
|
|
6506
|
+
"separator--mobile",
|
|
6437
6507
|
"separator--tablet",
|
|
6438
6508
|
"separator--laptop",
|
|
6509
|
+
"separator--desktop",
|
|
6439
6510
|
"radius",
|
|
6511
|
+
"radius--mobile",
|
|
6440
6512
|
"radius--tablet",
|
|
6441
6513
|
"radius--laptop",
|
|
6514
|
+
"radius--desktop",
|
|
6442
6515
|
"target-blank-aria-label",
|
|
6443
|
-
"background-color"
|
|
6516
|
+
"background-color",
|
|
6517
|
+
"noicon"
|
|
6444
6518
|
];
|
|
6445
6519
|
}
|
|
6446
6520
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6462,11 +6536,15 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6462
6536
|
});
|
|
6463
6537
|
break;
|
|
6464
6538
|
case "radius":
|
|
6539
|
+
case "radius--mobile":
|
|
6465
6540
|
case "radius--tablet":
|
|
6466
6541
|
case "radius--laptop":
|
|
6542
|
+
case "radius--desktop":
|
|
6467
6543
|
case "separator":
|
|
6544
|
+
case "separator--mobile":
|
|
6468
6545
|
case "separator--tablet":
|
|
6469
6546
|
case "separator--laptop":
|
|
6547
|
+
case "separator--desktop":
|
|
6470
6548
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
6471
6549
|
break;
|
|
6472
6550
|
case "target-blank-aria-label":
|
|
@@ -6536,6 +6614,12 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6536
6614
|
set separator(value) {
|
|
6537
6615
|
this.setAttribute("separator", value);
|
|
6538
6616
|
}
|
|
6617
|
+
get separatorMobile() {
|
|
6618
|
+
return this.getAttribute("separator--mobile");
|
|
6619
|
+
}
|
|
6620
|
+
set separatorMobile(value) {
|
|
6621
|
+
this.setAttribute("separator--mobile", value);
|
|
6622
|
+
}
|
|
6539
6623
|
get separatorTablet() {
|
|
6540
6624
|
return this.getAttribute("separator--tablet");
|
|
6541
6625
|
}
|
|
@@ -6548,12 +6632,24 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6548
6632
|
set separatorLaptop(value) {
|
|
6549
6633
|
this.setAttribute("separator--laptop", value);
|
|
6550
6634
|
}
|
|
6635
|
+
get separatorDesktop() {
|
|
6636
|
+
return this.getAttribute("separator--desktop");
|
|
6637
|
+
}
|
|
6638
|
+
set separatorDesktop(value) {
|
|
6639
|
+
this.setAttribute("separator--desktop", value);
|
|
6640
|
+
}
|
|
6551
6641
|
get radius() {
|
|
6552
6642
|
return this.getAttribute("radius");
|
|
6553
6643
|
}
|
|
6554
6644
|
set radius(value) {
|
|
6555
6645
|
this.setAttribute("radius", value);
|
|
6556
6646
|
}
|
|
6647
|
+
get radiusMobile() {
|
|
6648
|
+
return this.getAttribute("radius--mobile");
|
|
6649
|
+
}
|
|
6650
|
+
set radiusMobile(value) {
|
|
6651
|
+
this.setAttribute("radius--mobile", value);
|
|
6652
|
+
}
|
|
6557
6653
|
get radiusTablet() {
|
|
6558
6654
|
return this.getAttribute("radius--tablet");
|
|
6559
6655
|
}
|
|
@@ -6566,6 +6662,12 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6566
6662
|
set radiusLaptop(value) {
|
|
6567
6663
|
this.setAttribute("radius--laptop", value);
|
|
6568
6664
|
}
|
|
6665
|
+
get radiusDesktop() {
|
|
6666
|
+
return this.getAttribute("radius--desktop");
|
|
6667
|
+
}
|
|
6668
|
+
set radiusDesktop(value) {
|
|
6669
|
+
this.setAttribute("radius--desktop", value);
|
|
6670
|
+
}
|
|
6569
6671
|
get targetBlankAriaLabel() {
|
|
6570
6672
|
return this.getAttribute("target-blank-aria-label");
|
|
6571
6673
|
}
|
|
@@ -6588,7 +6690,7 @@ let CellLink = _CellLink;
|
|
|
6588
6690
|
if (!customElements.get("px-cell-link")) {
|
|
6589
6691
|
customElements.define("px-cell-link", CellLink);
|
|
6590
6692
|
}
|
|
6591
|
-
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) * 1em);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)}}`;
|
|
6693
|
+
const checkboxCss = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.checkbox.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-font-line-height-m) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (min-width: 768px){.checkbox{gap:var(--px-spacing-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.checkbox{gap:var(--px-spacing-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
6592
6694
|
const checkboxStyles = new CSSStyleSheet();
|
|
6593
6695
|
checkboxStyles.replaceSync(checkboxCss);
|
|
6594
6696
|
const checkboxVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -6678,10 +6780,7 @@ const _Checkbox = class _Checkbox extends PxElement {
|
|
|
6678
6780
|
updateAttribute(oldValue, newValue, attrValue, attrName) {
|
|
6679
6781
|
var _a, _b;
|
|
6680
6782
|
if (!this.checkName(attrValue, newValue)) {
|
|
6681
|
-
console.error(
|
|
6682
|
-
`${newValue} is not a valid ${attrName} value for`,
|
|
6683
|
-
this.$el
|
|
6684
|
-
);
|
|
6783
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
6685
6784
|
return;
|
|
6686
6785
|
}
|
|
6687
6786
|
if (oldValue !== null) {
|
|
@@ -6838,11 +6937,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6838
6937
|
"variant",
|
|
6839
6938
|
"disabled",
|
|
6840
6939
|
"separator",
|
|
6940
|
+
"separator--mobile",
|
|
6841
6941
|
"separator--tablet",
|
|
6842
6942
|
"separator--laptop",
|
|
6943
|
+
"separator--desktop",
|
|
6843
6944
|
"radius",
|
|
6945
|
+
"radius--mobile",
|
|
6844
6946
|
"radius--tablet",
|
|
6845
6947
|
"radius--laptop",
|
|
6948
|
+
"radius--desktop",
|
|
6846
6949
|
"name",
|
|
6847
6950
|
"value",
|
|
6848
6951
|
"state",
|
|
@@ -6866,11 +6969,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6866
6969
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
6867
6970
|
break;
|
|
6868
6971
|
case "radius":
|
|
6972
|
+
case "radius--mobile":
|
|
6869
6973
|
case "radius--tablet":
|
|
6870
6974
|
case "radius--laptop":
|
|
6975
|
+
case "radius--desktop":
|
|
6871
6976
|
case "separator":
|
|
6977
|
+
case "separator--mobile":
|
|
6872
6978
|
case "separator--tablet":
|
|
6873
6979
|
case "separator--laptop":
|
|
6980
|
+
case "separator--desktop":
|
|
6874
6981
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
6875
6982
|
break;
|
|
6876
6983
|
case "name":
|
|
@@ -6882,7 +6989,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6882
6989
|
case "state":
|
|
6883
6990
|
if (this.$checkbox) {
|
|
6884
6991
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
6885
|
-
console.error(`${newValue} is not a valid state value
|
|
6992
|
+
console.error(`${newValue} is not a valid state value`);
|
|
6886
6993
|
return;
|
|
6887
6994
|
} else {
|
|
6888
6995
|
this.$checkbox.setAttribute("state", newValue);
|
|
@@ -6964,7 +7071,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6964
7071
|
}
|
|
6965
7072
|
handleCheckboxPositionChange(newValue) {
|
|
6966
7073
|
if (!this.checkName(cellCheckboxPosition, newValue)) {
|
|
6967
|
-
console.error(`${newValue} is not a valid position value
|
|
7074
|
+
console.error(`${newValue} is not a valid position value`);
|
|
6968
7075
|
return;
|
|
6969
7076
|
}
|
|
6970
7077
|
if (this.$checkbox) {
|
|
@@ -7047,6 +7154,12 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7047
7154
|
set separator(value) {
|
|
7048
7155
|
this.setAttribute("separator", value);
|
|
7049
7156
|
}
|
|
7157
|
+
get separatorMobile() {
|
|
7158
|
+
return this.getAttribute("separator--mobile");
|
|
7159
|
+
}
|
|
7160
|
+
set separatorMobile(value) {
|
|
7161
|
+
this.setAttribute("separator--mobile", value);
|
|
7162
|
+
}
|
|
7050
7163
|
get separatorTablet() {
|
|
7051
7164
|
return this.getAttribute("separator--tablet");
|
|
7052
7165
|
}
|
|
@@ -7059,12 +7172,24 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7059
7172
|
set separatorLaptop(value) {
|
|
7060
7173
|
this.setAttribute("separator--laptop", value);
|
|
7061
7174
|
}
|
|
7175
|
+
get separatorDesktop() {
|
|
7176
|
+
return this.getAttribute("separator--desktop");
|
|
7177
|
+
}
|
|
7178
|
+
set separatorDesktop(value) {
|
|
7179
|
+
this.setAttribute("separator--desktop", value);
|
|
7180
|
+
}
|
|
7062
7181
|
get radius() {
|
|
7063
7182
|
return this.getAttribute("radius");
|
|
7064
7183
|
}
|
|
7065
7184
|
set radius(value) {
|
|
7066
7185
|
this.setAttribute("radius", value);
|
|
7067
7186
|
}
|
|
7187
|
+
get radiusMobile() {
|
|
7188
|
+
return this.getAttribute("radius--mobile");
|
|
7189
|
+
}
|
|
7190
|
+
set radiusMobile(value) {
|
|
7191
|
+
this.setAttribute("radius--mobile", value);
|
|
7192
|
+
}
|
|
7068
7193
|
get radiusTablet() {
|
|
7069
7194
|
return this.getAttribute("radius--tablet");
|
|
7070
7195
|
}
|
|
@@ -7077,6 +7202,12 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7077
7202
|
set radiusLaptop(value) {
|
|
7078
7203
|
this.setAttribute("radius--laptop", value);
|
|
7079
7204
|
}
|
|
7205
|
+
get radiusDesktop() {
|
|
7206
|
+
return this.getAttribute("radius--desktop");
|
|
7207
|
+
}
|
|
7208
|
+
set radiusDesktop(value) {
|
|
7209
|
+
this.setAttribute("radius--desktop", value);
|
|
7210
|
+
}
|
|
7080
7211
|
get checked() {
|
|
7081
7212
|
return this.hasAttribute("checked");
|
|
7082
7213
|
}
|
|
@@ -7209,11 +7340,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7209
7340
|
"variant",
|
|
7210
7341
|
"disabled",
|
|
7211
7342
|
"separator",
|
|
7343
|
+
"separator--mobile",
|
|
7212
7344
|
"separator--tablet",
|
|
7213
7345
|
"separator--laptop",
|
|
7346
|
+
"separator--desktop",
|
|
7214
7347
|
"radius",
|
|
7348
|
+
"radius--mobile",
|
|
7215
7349
|
"radius--tablet",
|
|
7216
7350
|
"radius--laptop",
|
|
7351
|
+
"radius--desktop",
|
|
7217
7352
|
"name",
|
|
7218
7353
|
"value",
|
|
7219
7354
|
"checked",
|
|
@@ -7235,11 +7370,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7235
7370
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
7236
7371
|
break;
|
|
7237
7372
|
case "radius":
|
|
7373
|
+
case "radius--mobile":
|
|
7238
7374
|
case "radius--tablet":
|
|
7239
7375
|
case "radius--laptop":
|
|
7376
|
+
case "radius--desktop":
|
|
7240
7377
|
case "separator":
|
|
7378
|
+
case "separator--mobile":
|
|
7241
7379
|
case "separator--tablet":
|
|
7242
7380
|
case "separator--laptop":
|
|
7381
|
+
case "separator--desktop":
|
|
7243
7382
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
7244
7383
|
break;
|
|
7245
7384
|
case "name":
|
|
@@ -7390,6 +7529,12 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7390
7529
|
set separator(value) {
|
|
7391
7530
|
this.setAttribute("separator", value);
|
|
7392
7531
|
}
|
|
7532
|
+
get separatorMobile() {
|
|
7533
|
+
return this.getAttribute("separator--mobile");
|
|
7534
|
+
}
|
|
7535
|
+
set separatorMobile(value) {
|
|
7536
|
+
this.setAttribute("separator--mobile", value);
|
|
7537
|
+
}
|
|
7393
7538
|
get separatorTablet() {
|
|
7394
7539
|
return this.getAttribute("separator--tablet");
|
|
7395
7540
|
}
|
|
@@ -7402,12 +7547,24 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7402
7547
|
set separatorLaptop(value) {
|
|
7403
7548
|
this.setAttribute("separator--laptop", value);
|
|
7404
7549
|
}
|
|
7550
|
+
get separatorDesktop() {
|
|
7551
|
+
return this.getAttribute("separator--desktop");
|
|
7552
|
+
}
|
|
7553
|
+
set separatorDesktop(value) {
|
|
7554
|
+
this.setAttribute("separator--desktop", value);
|
|
7555
|
+
}
|
|
7405
7556
|
get radius() {
|
|
7406
7557
|
return this.getAttribute("radius");
|
|
7407
7558
|
}
|
|
7408
7559
|
set radius(value) {
|
|
7409
7560
|
this.setAttribute("radius", value);
|
|
7410
7561
|
}
|
|
7562
|
+
get radiusMobile() {
|
|
7563
|
+
return this.getAttribute("radius--mobile");
|
|
7564
|
+
}
|
|
7565
|
+
set radiusMobile(value) {
|
|
7566
|
+
this.setAttribute("radius--mobile", value);
|
|
7567
|
+
}
|
|
7411
7568
|
get radiusTablet() {
|
|
7412
7569
|
return this.getAttribute("radius--tablet");
|
|
7413
7570
|
}
|
|
@@ -7420,6 +7577,12 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7420
7577
|
set radiusLaptop(value) {
|
|
7421
7578
|
this.setAttribute("radius--laptop", value);
|
|
7422
7579
|
}
|
|
7580
|
+
get radiusDesktop() {
|
|
7581
|
+
return this.getAttribute("radius--desktop");
|
|
7582
|
+
}
|
|
7583
|
+
set radiusDesktop(value) {
|
|
7584
|
+
this.setAttribute("radius--desktop", value);
|
|
7585
|
+
}
|
|
7423
7586
|
get checked() {
|
|
7424
7587
|
return this.hasAttribute("checked");
|
|
7425
7588
|
}
|
|
@@ -7474,7 +7637,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7474
7637
|
if (!customElements.get("px-cell-switch")) {
|
|
7475
7638
|
customElements.define("px-cell-switch", CellSwitch);
|
|
7476
7639
|
}
|
|
7477
|
-
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) * 1em);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)}}`;
|
|
7640
|
+
const radioCss = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-color-border-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-font-line-height-m) * 1em);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);width:var(--px-size-icon-m);height:var(--px-size-icon-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-container-primary-default);border-color:var(--px-color-border-none);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-size-border-l) solid var(--px-color-border-state-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-color-background-state-disabled-default);border-color:var(--px-color-border-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-color-text-state-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-color-border-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-color-border-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-color-background-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-color-background-purpose-error-default);border-color:var(--px-color-border-purpose-error-default);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-color-border-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-container-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-color-border-state-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-state-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-color-background-state-disabled-inverted);border-color:var(--px-color-border-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-color-text-state-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-color-border-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-color-background-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-color-background-purpose-error-inverted);border-color:var(--px-color-border-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted),0 0 0 var(--px-size-border-s) var(--px-color-border-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-color-text-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-font-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default);border-color:var(--px-color-border-state-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-color-background-state-active-default);border-color:var(--px-color-border-none);color:var(--px-color-text-state-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-color-background-state-active-inverted);border-color:var(--px-color-border-none);color:var(--px-color-text-state-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
7478
7641
|
const radioStyles = new CSSStyleSheet();
|
|
7479
7642
|
radioStyles.replaceSync(radioCss);
|
|
7480
7643
|
const _RadioBase = class _RadioBase extends PxElement {
|
|
@@ -7606,10 +7769,7 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
7606
7769
|
updateAttribute(oldValue, newValue, attrValue, attrName) {
|
|
7607
7770
|
var _a, _b;
|
|
7608
7771
|
if (!this.checkName(attrValue, newValue)) {
|
|
7609
|
-
console.error(
|
|
7610
|
-
`${newValue} is not a valid ${attrName} value for`,
|
|
7611
|
-
this.$el
|
|
7612
|
-
);
|
|
7772
|
+
console.error(`${newValue} is not a valid ${attrName} value`);
|
|
7613
7773
|
return;
|
|
7614
7774
|
}
|
|
7615
7775
|
if (oldValue !== null) {
|
|
@@ -7726,17 +7886,17 @@ const _Radio = class _Radio extends RadioBase {
|
|
|
7726
7886
|
_Radio.nativeName = "input";
|
|
7727
7887
|
let Radio = _Radio;
|
|
7728
7888
|
customElements.define("px-radio", Radio);
|
|
7729
|
-
const radiogroupCss = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-
|
|
7889
|
+
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) )}}";
|
|
7730
7890
|
const radiogroupStyles = new CSSStyleSheet();
|
|
7731
7891
|
radiogroupStyles.replaceSync(radiogroupCss);
|
|
7732
7892
|
const radioGroupGapValues = [
|
|
7733
7893
|
"",
|
|
7734
|
-
"
|
|
7735
|
-
"
|
|
7736
|
-
"
|
|
7737
|
-
"
|
|
7738
|
-
"
|
|
7739
|
-
"
|
|
7894
|
+
"none",
|
|
7895
|
+
"2xs",
|
|
7896
|
+
"xs",
|
|
7897
|
+
"s",
|
|
7898
|
+
"default",
|
|
7899
|
+
"l"
|
|
7740
7900
|
];
|
|
7741
7901
|
const _Radiogroup = class _Radiogroup extends PxElement {
|
|
7742
7902
|
constructor() {
|
|
@@ -7861,7 +8021,7 @@ const _Radiogroup = class _Radiogroup extends PxElement {
|
|
|
7861
8021
|
}
|
|
7862
8022
|
updateVariant(oldValue, newValue, attrValue) {
|
|
7863
8023
|
if (!this.checkName(attrValue, newValue)) {
|
|
7864
|
-
console.error(`${newValue} is not a valid variant value
|
|
8024
|
+
console.error(`${newValue} is not a valid variant value`);
|
|
7865
8025
|
return;
|
|
7866
8026
|
}
|
|
7867
8027
|
if (oldValue !== null && oldValue !== "") {
|
|
@@ -7876,7 +8036,7 @@ const _Radiogroup = class _Radiogroup extends PxElement {
|
|
|
7876
8036
|
}
|
|
7877
8037
|
updateGap(oldValue, newValue, attrValue) {
|
|
7878
8038
|
if (!this.checkName(attrValue, newValue)) {
|
|
7879
|
-
console.error(`${newValue} is not a valid gap value
|
|
8039
|
+
console.error(`${newValue} is not a valid gap value`);
|
|
7880
8040
|
return;
|
|
7881
8041
|
}
|
|
7882
8042
|
this.updateGapStyle(oldValue);
|
|
@@ -8008,11 +8168,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8008
8168
|
"variant",
|
|
8009
8169
|
"disabled",
|
|
8010
8170
|
"separator",
|
|
8171
|
+
"separator--mobile",
|
|
8011
8172
|
"separator--tablet",
|
|
8012
8173
|
"separator--laptop",
|
|
8174
|
+
"separator--desktop",
|
|
8013
8175
|
"radius",
|
|
8176
|
+
"radius--mobile",
|
|
8014
8177
|
"radius--tablet",
|
|
8015
8178
|
"radius--laptop",
|
|
8179
|
+
"radius--desktop",
|
|
8016
8180
|
"name",
|
|
8017
8181
|
"value",
|
|
8018
8182
|
"state",
|
|
@@ -8036,11 +8200,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8036
8200
|
this.handleDisabledAttributeChange(newValue !== null);
|
|
8037
8201
|
break;
|
|
8038
8202
|
case "radius":
|
|
8203
|
+
case "radius--mobile":
|
|
8039
8204
|
case "radius--tablet":
|
|
8040
8205
|
case "radius--laptop":
|
|
8206
|
+
case "radius--desktop":
|
|
8041
8207
|
case "separator":
|
|
8208
|
+
case "separator--mobile":
|
|
8042
8209
|
case "separator--tablet":
|
|
8043
8210
|
case "separator--laptop":
|
|
8211
|
+
case "separator--desktop":
|
|
8044
8212
|
this.$cell.setAttribute(attrName, this.getAttribute(attrName) || "");
|
|
8045
8213
|
break;
|
|
8046
8214
|
case "name":
|
|
@@ -8052,7 +8220,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8052
8220
|
case "state":
|
|
8053
8221
|
if (this.$radio) {
|
|
8054
8222
|
if (!this.checkName(stateValues, newValue)) {
|
|
8055
|
-
console.error(`${newValue} is not a valid state value
|
|
8223
|
+
console.error(`${newValue} is not a valid state value`);
|
|
8056
8224
|
return;
|
|
8057
8225
|
} else {
|
|
8058
8226
|
this.$radio.setAttribute("state", newValue);
|
|
@@ -8136,7 +8304,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8136
8304
|
}
|
|
8137
8305
|
handleRadioPositionChange(newValue) {
|
|
8138
8306
|
if (!this.checkName(cellRadioPosition, newValue)) {
|
|
8139
|
-
console.error(`${newValue} is not a valid position value
|
|
8307
|
+
console.error(`${newValue} is not a valid position value`);
|
|
8140
8308
|
return;
|
|
8141
8309
|
}
|
|
8142
8310
|
if (this.$radio) {
|
|
@@ -8219,6 +8387,12 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8219
8387
|
set separator(value) {
|
|
8220
8388
|
this.setAttribute("separator", value);
|
|
8221
8389
|
}
|
|
8390
|
+
get separatorMobile() {
|
|
8391
|
+
return this.getAttribute("separator--mobile");
|
|
8392
|
+
}
|
|
8393
|
+
set separatorMobile(value) {
|
|
8394
|
+
this.setAttribute("separator--mobile", value);
|
|
8395
|
+
}
|
|
8222
8396
|
get separatorTablet() {
|
|
8223
8397
|
return this.getAttribute("separator--tablet");
|
|
8224
8398
|
}
|
|
@@ -8231,12 +8405,24 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8231
8405
|
set separatorLaptop(value) {
|
|
8232
8406
|
this.setAttribute("separator--laptop", value);
|
|
8233
8407
|
}
|
|
8408
|
+
get separatorDesktop() {
|
|
8409
|
+
return this.getAttribute("separator--desktop");
|
|
8410
|
+
}
|
|
8411
|
+
set separatorDesktop(value) {
|
|
8412
|
+
this.setAttribute("separator--desktop", value);
|
|
8413
|
+
}
|
|
8234
8414
|
get radius() {
|
|
8235
8415
|
return this.getAttribute("radius");
|
|
8236
8416
|
}
|
|
8237
8417
|
set radius(value) {
|
|
8238
8418
|
this.setAttribute("radius", value);
|
|
8239
8419
|
}
|
|
8420
|
+
get radiusMobile() {
|
|
8421
|
+
return this.getAttribute("radius--mobile");
|
|
8422
|
+
}
|
|
8423
|
+
set radiusMobile(value) {
|
|
8424
|
+
this.setAttribute("radius--mobile", value);
|
|
8425
|
+
}
|
|
8240
8426
|
get radiusTablet() {
|
|
8241
8427
|
return this.getAttribute("radius--tablet");
|
|
8242
8428
|
}
|
|
@@ -8249,6 +8435,12 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8249
8435
|
set radiusLaptop(value) {
|
|
8250
8436
|
this.setAttribute("radius--laptop", value);
|
|
8251
8437
|
}
|
|
8438
|
+
get radiusDesktop() {
|
|
8439
|
+
return this.getAttribute("radius--desktop");
|
|
8440
|
+
}
|
|
8441
|
+
set radiusDesktop(value) {
|
|
8442
|
+
this.setAttribute("radius--desktop", value);
|
|
8443
|
+
}
|
|
8252
8444
|
get checked() {
|
|
8253
8445
|
return this.hasAttribute("checked");
|
|
8254
8446
|
}
|
|
@@ -8403,8 +8595,8 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
8403
8595
|
}
|
|
8404
8596
|
}
|
|
8405
8597
|
}
|
|
8406
|
-
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-line-height-m);font-size:var(--px-text-size-label-m-mobile);font-weight:
|
|
8407
|
-
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-
|
|
8598
|
+
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:var(--px-font-weight-title);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-color-background-container-light-default) )}.tile ::slotted([slot="prefix"]){font-weight:var(--px-font-weight-body);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="description"]){font-weight:var(--px-font-weight-body)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}@media only screen and (min-width: 768px){.tile{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.tile{padding:var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}';
|
|
8599
|
+
const common = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 768px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}';
|
|
8408
8600
|
const styleSheet$c = new CSSStyleSheet();
|
|
8409
8601
|
styleSheet$c.replaceSync(styles$i);
|
|
8410
8602
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
@@ -8412,20 +8604,20 @@ commonStyleSheet$5.replaceSync(common);
|
|
|
8412
8604
|
const tileBackgroundColorValues = [
|
|
8413
8605
|
"",
|
|
8414
8606
|
"default",
|
|
8415
|
-
"
|
|
8416
|
-
"
|
|
8417
|
-
"
|
|
8607
|
+
"container-light",
|
|
8608
|
+
"container-default",
|
|
8609
|
+
"state-disabled"
|
|
8418
8610
|
];
|
|
8419
8611
|
const headerAlignmentValues = ["", "default", "left", "center"];
|
|
8420
8612
|
const tileContentAlignmentValues = ["", "default", "left", "center"];
|
|
8421
8613
|
const _Tile = class _Tile extends PxElement {
|
|
8422
8614
|
template() {
|
|
8423
8615
|
return `
|
|
8424
|
-
<px-hstack gap="
|
|
8616
|
+
<px-hstack gap="s" align-items="center" class="tile__header">
|
|
8425
8617
|
<slot name="prefix"></slot>
|
|
8426
8618
|
<slot name="suffix"></slot>
|
|
8427
8619
|
</px-hstack>
|
|
8428
|
-
<px-vstack gap="
|
|
8620
|
+
<px-vstack gap="2xs" class="tile__content">
|
|
8429
8621
|
<slot></slot>
|
|
8430
8622
|
<slot name="description"></slot>
|
|
8431
8623
|
</px-vstack>
|
|
@@ -8483,7 +8675,7 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8483
8675
|
);
|
|
8484
8676
|
break;
|
|
8485
8677
|
case "disabled":
|
|
8486
|
-
this.backgroundColor = "
|
|
8678
|
+
this.backgroundColor = "state-disabled";
|
|
8487
8679
|
break;
|
|
8488
8680
|
default:
|
|
8489
8681
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -8519,18 +8711,18 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8519
8711
|
}
|
|
8520
8712
|
updateBackgroundColor(oldValue, newValue, attrValue) {
|
|
8521
8713
|
if (!checkName(attrValue, newValue)) {
|
|
8522
|
-
console.error(
|
|
8714
|
+
console.error(`${newValue} is not a valid value for ${attrValue}`);
|
|
8523
8715
|
return;
|
|
8524
8716
|
}
|
|
8525
8717
|
const updateBackgroundColorStyle = (value) => {
|
|
8526
8718
|
if (value !== null && value !== "" && value !== "default") {
|
|
8527
8719
|
this.$el.style.setProperty(
|
|
8528
8720
|
`--tile-background-color-default`,
|
|
8529
|
-
`var(--px-background
|
|
8721
|
+
`var(--px-color-background-${value}-default)`
|
|
8530
8722
|
);
|
|
8531
8723
|
this.$el.style.setProperty(
|
|
8532
8724
|
`--tile-background-color-inverted`,
|
|
8533
|
-
`var(--px-background
|
|
8725
|
+
`var(--px-color-background-${value}-inverted)`
|
|
8534
8726
|
);
|
|
8535
8727
|
}
|
|
8536
8728
|
};
|
|
@@ -8824,7 +9016,7 @@ class TileCheckbox extends WithExtraAttributes {
|
|
|
8824
9016
|
case "state":
|
|
8825
9017
|
if (this.$checkbox) {
|
|
8826
9018
|
if (!this.checkName(checkboxStateValues, newValue)) {
|
|
8827
|
-
console.error(`${newValue} is not a valid state value
|
|
9019
|
+
console.error(`${newValue} is not a valid state value`);
|
|
8828
9020
|
return;
|
|
8829
9021
|
} else {
|
|
8830
9022
|
this.$checkbox.setAttribute("state", newValue);
|
|
@@ -9106,7 +9298,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9106
9298
|
case "state":
|
|
9107
9299
|
if (this.$radio) {
|
|
9108
9300
|
if (!this.checkName(stateValues, newValue)) {
|
|
9109
|
-
console.error(`${newValue} is not a valid state value
|
|
9301
|
+
console.error(`${newValue} is not a valid state value`);
|
|
9110
9302
|
return;
|
|
9111
9303
|
} else {
|
|
9112
9304
|
this.$radio.setAttribute("state", newValue);
|
|
@@ -9301,7 +9493,7 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9301
9493
|
}
|
|
9302
9494
|
}
|
|
9303
9495
|
customElements.define("px-tile-radio", TileRadio);
|
|
9304
|
-
const styles$g = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-
|
|
9496
|
+
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)}";
|
|
9305
9497
|
const styleSheet$a = new CSSStyleSheet();
|
|
9306
9498
|
styleSheet$a.replaceSync(styles$g);
|
|
9307
9499
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
@@ -9315,7 +9507,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
9315
9507
|
name="chevron_right"
|
|
9316
9508
|
slot="suffix"
|
|
9317
9509
|
from="lavender"
|
|
9318
|
-
size="
|
|
9510
|
+
size="m"
|
|
9319
9511
|
color="inherit"
|
|
9320
9512
|
></px-icon>
|
|
9321
9513
|
<slot></slot>
|
|
@@ -9817,7 +10009,7 @@ class StickyContainer extends HTMLElement {
|
|
|
9817
10009
|
if (!customElements.get("px-sticky-container")) {
|
|
9818
10010
|
customElements.define("px-sticky-container", StickyContainer);
|
|
9819
10011
|
}
|
|
9820
|
-
const styles$e = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-
|
|
10012
|
+
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}}';
|
|
9821
10013
|
const styleSheet$9 = new CSSStyleSheet();
|
|
9822
10014
|
styleSheet$9.replaceSync(styles$e);
|
|
9823
10015
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
@@ -9826,12 +10018,12 @@ class Drawer extends HTMLElement {
|
|
|
9826
10018
|
super();
|
|
9827
10019
|
this.template = `<dialog popover role="dialog" aria-modal="true" >
|
|
9828
10020
|
<div id="container">
|
|
9829
|
-
<px-vstack gap="
|
|
9830
|
-
<px-vstack gap="
|
|
10021
|
+
<px-vstack gap="default" >
|
|
10022
|
+
<px-vstack gap="s">
|
|
9831
10023
|
<px-h1 variant="title-4xl" variant--mobile="title-2xl" >
|
|
9832
10024
|
<slot name="title"></slot>
|
|
9833
10025
|
</px-h1>
|
|
9834
|
-
<px-h2 variant="subtitle" color="
|
|
10026
|
+
<px-h2 variant="subtitle" color="neutral">
|
|
9835
10027
|
<slot name="subtitle"></slot>
|
|
9836
10028
|
</px-h2>
|
|
9837
10029
|
</px-vstack>
|
|
@@ -9841,7 +10033,7 @@ class Drawer extends HTMLElement {
|
|
|
9841
10033
|
<px-separator size="m"></px-separator>
|
|
9842
10034
|
<px-stack
|
|
9843
10035
|
gap--mobile="heading-to-content"
|
|
9844
|
-
gap="
|
|
10036
|
+
gap="default"
|
|
9845
10037
|
justify-content="flex-end"
|
|
9846
10038
|
direction="row"
|
|
9847
10039
|
direction--mobile="column"
|
|
@@ -9945,9 +10137,9 @@ class Drawer extends HTMLElement {
|
|
|
9945
10137
|
if (!customElements.get("px-drawer")) {
|
|
9946
10138
|
customElements.define("px-drawer", Drawer);
|
|
9947
10139
|
}
|
|
9948
|
-
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-
|
|
10140
|
+
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}";
|
|
9949
10141
|
const itemStyles = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var(--px-carousel-min-width-desktop,var(--px-carousel-min-width-all-desktop));border-radius:var(--px-radius-main);background:#fff}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile))!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var(--px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet))!important}}";
|
|
9950
|
-
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-icon-
|
|
10142
|
+
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)}";
|
|
9951
10143
|
const styleSheet$8 = new CSSStyleSheet();
|
|
9952
10144
|
styleSheet$8.replaceSync(styles$c);
|
|
9953
10145
|
class AppleSeed extends HTMLElement {
|
|
@@ -10202,10 +10394,10 @@ class Carousel extends HTMLElement {
|
|
|
10202
10394
|
this.visibleItemsAttributeDelegate = new AttributeBreakpointHandlerDelegate(
|
|
10203
10395
|
this,
|
|
10204
10396
|
"visible-items",
|
|
10205
|
-
visibleItemCalcFunction("
|
|
10397
|
+
visibleItemCalcFunction("s"),
|
|
10206
10398
|
"--px-carousel-min-width"
|
|
10207
10399
|
);
|
|
10208
|
-
this.template = `<px-vstack gap="
|
|
10400
|
+
this.template = `<px-vstack gap="default">
|
|
10209
10401
|
<div class="carousel">
|
|
10210
10402
|
<slot></slot>
|
|
10211
10403
|
</div>
|
|
@@ -10215,7 +10407,7 @@ class Carousel extends HTMLElement {
|
|
|
10215
10407
|
justify-content--mobile="center"
|
|
10216
10408
|
>
|
|
10217
10409
|
<px-appleseed active="0"></px-appleseed>
|
|
10218
|
-
<px-hstack id="button-icons" gap="
|
|
10410
|
+
<px-hstack id="button-icons" gap="default">
|
|
10219
10411
|
<px-button-icon disabled id="previous" aria-hidden="true">
|
|
10220
10412
|
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
10221
10413
|
</px-button-icon>
|
|
@@ -10290,7 +10482,7 @@ class Carousel extends HTMLElement {
|
|
|
10290
10482
|
connectedCallback() {
|
|
10291
10483
|
this.visibleItemsAttributeDelegate.init("1");
|
|
10292
10484
|
this.visibleItemsAttributeDelegate.attributeValue = visibleItemCalcFunction(
|
|
10293
|
-
this.getAttribute("gap") || "
|
|
10485
|
+
this.getAttribute("gap") || "s"
|
|
10294
10486
|
);
|
|
10295
10487
|
requestAnimationFrame(() => {
|
|
10296
10488
|
this.handleAppleSeedDisplay();
|
|
@@ -10374,7 +10566,7 @@ class CarouselItem extends HTMLElement {
|
|
|
10374
10566
|
if (!customElements.get("px-carousel-item")) {
|
|
10375
10567
|
customElements.define("px-carousel-item", CarouselItem);
|
|
10376
10568
|
}
|
|
10377
|
-
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-
|
|
10569
|
+
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:8em}.banner[reduced]{min-height:5em}px-container{height:100%}.banner-content{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,auto);row-gap:var(--px-spacing-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-default-mobile)}::slotted([slot="tag"]){grid-area:tag}::slotted([slot="media"]){grid-area:media;align-self:start}::slotted([slot="title"]){grid-area:title}::slotted([slot="description"]){grid-area:description}::slotted([slot="content"]){grid-area:content}:host(:not([reduced])) ::slotted([slot="action"]){grid-area:action;margin-top:calc(var(--px-spacing-default-mobile) - var(--px-spacing-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}@media only screen and (min-width: 64.0625em){.banner-content{row-gap:var(--px-spacing-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-default-desktop) - var(--px-spacing-s-desktop))}}';
|
|
10378
10570
|
const bannerStyles = new CSSStyleSheet();
|
|
10379
10571
|
bannerStyles.replaceSync(bannerCss);
|
|
10380
10572
|
const _Banner = class _Banner extends PxElement {
|
|
@@ -10414,7 +10606,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10414
10606
|
connectedCallback() {
|
|
10415
10607
|
var _a;
|
|
10416
10608
|
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
10417
|
-
this.
|
|
10609
|
+
this.createGridTemplateAreas();
|
|
10418
10610
|
}
|
|
10419
10611
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
10420
10612
|
if (oldValue !== newValue) {
|
|
@@ -10445,7 +10637,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10445
10637
|
break;
|
|
10446
10638
|
case "reduced":
|
|
10447
10639
|
this.$el.toggleAttribute("reduced", newValue !== null);
|
|
10448
|
-
this.
|
|
10640
|
+
this.createGridTemplateAreas();
|
|
10449
10641
|
break;
|
|
10450
10642
|
case "inverted":
|
|
10451
10643
|
for (let i = 0; i < this.$children.length; i++) {
|
|
@@ -10461,7 +10653,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10461
10653
|
}
|
|
10462
10654
|
}
|
|
10463
10655
|
}
|
|
10464
|
-
|
|
10656
|
+
createGridTemplateAreas() {
|
|
10465
10657
|
const grid = this.shadowRoot.querySelector(
|
|
10466
10658
|
".banner-content"
|
|
10467
10659
|
);
|
|
@@ -10634,7 +10826,7 @@ const _Fieldset = class _Fieldset extends PxElement {
|
|
|
10634
10826
|
_Fieldset.nativeName = "fieldset";
|
|
10635
10827
|
let Fieldset = _Fieldset;
|
|
10636
10828
|
customElements.define("px-fieldset", Fieldset);
|
|
10637
|
-
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-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);box-shadow:var(--px-border-color-action-neutral-default) 0 0 0 var(--px-border-size-m) inset;border:none;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: 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-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{box-shadow:var(--px-border-color-action-hover-default) 0 0 0 var(--px-border-size-l) inset;outline:1px solid var(--px-border-color-action-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-border-color-action-hover-default) 0 0 0 var(--px-border-size-l) inset}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{box-shadow:var(--px-border-color-action-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-border-color-purpose-error-default) 0 0 0 var(--px-border-size-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-border-color-purpose-success-default) 0 0 0 var(--px-border-size-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-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}`;
|
|
10829
|
+
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:var(--px-font-weight-body);text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3em;--cancel-icon-height: 1em;--search-icon-datalist-width: 2em;--search-icon-focus-width: var(--search-icon-datalist-width)}@media screen and (min-width: 768px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}}@media screen and (min-width: 1024px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}}input:not([type=file]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):focus,input:not([type=file]):hover,input:not([type=file]).error:focus,input:not([type=file]).error:hover,input:not([type=file]).success:focus,input:not([type=file]).success:hover,textarea:focus,textarea:hover,textarea.error:focus,textarea.error:hover,textarea.success:focus,textarea.success:hover,select:focus,select:hover,select.error:focus,select.error:hover,select.success:focus,select.success:hover,#input-file-container:focus,#input-file-container:hover,#input-file-container.error:focus,#input-file-container.error:hover,#input-file-container.success:focus,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;outline:1px solid var(--px-color-border-state-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:var(--px-font-weight-title);text-align:left;height:24px}input:not([type=file]).error,textarea.error,select.error,#input-file-container.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0 var(--px-size-border-m) inset;background-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7em,center right 1em}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:focus,input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:focus,input:not([type=file])[type=search].error:hover,textarea[type=search].success:focus,textarea[type=search].success:hover,textarea[type=search].error:focus,textarea[type=search].error:hover,select[type=search].success:focus,select[type=search].success:hover,select[type=search].error:focus,select[type=search].error:hover,#input-file-container[type=search].success:focus,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:focus,#input-file-container[type=search].error:hover{background-position:center right 1em;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5em right 1em}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-font-line-height-m);text-align:left}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:6px}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media screen and (min-width: 768px){slot{font-size:var(--px-text-size-label-m-desktop)}}`;
|
|
10638
10830
|
const stylesheet$4 = new CSSStyleSheet();
|
|
10639
10831
|
stylesheet$4.replaceSync(styles$b);
|
|
10640
10832
|
class AbstractInputElement extends PxElement {
|
|
@@ -10885,7 +11077,7 @@ let Upload = _Upload;
|
|
|
10885
11077
|
if (!customElements.get("px-fileupload")) {
|
|
10886
11078
|
customElements.define("px-fileupload", Upload);
|
|
10887
11079
|
}
|
|
10888
|
-
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-
|
|
11080
|
+
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)}}';
|
|
10889
11081
|
const switchStyles = new CSSStyleSheet();
|
|
10890
11082
|
switchStyles.replaceSync(switchCss);
|
|
10891
11083
|
var InputState = /* @__PURE__ */ ((InputState2) => {
|
|
@@ -11036,7 +11228,7 @@ class Table extends HTMLElement {
|
|
|
11036
11228
|
if (!customElements.get("px-table")) {
|
|
11037
11229
|
customElements.define("px-table", Table);
|
|
11038
11230
|
}
|
|
11039
|
-
const styles$9 = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-background-
|
|
11231
|
+
const styles$9 = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-color-background-container-default-default)}";
|
|
11040
11232
|
const styleSheet$5 = new CSSStyleSheet();
|
|
11041
11233
|
styleSheet$5.replaceSync(styles$9);
|
|
11042
11234
|
class Thead extends HTMLElement {
|
|
@@ -11078,7 +11270,7 @@ class Tr extends HTMLElement {
|
|
|
11078
11270
|
if (!customElements.get("px-tr")) {
|
|
11079
11271
|
customElements.define("px-tr", Tr);
|
|
11080
11272
|
}
|
|
11081
|
-
const styles$7 = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-
|
|
11273
|
+
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:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.th{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11082
11274
|
const styleSheet$3 = new CSSStyleSheet();
|
|
11083
11275
|
styleSheet$3.replaceSync(styles$7);
|
|
11084
11276
|
class Th extends HTMLElement {
|
|
@@ -11086,8 +11278,8 @@ class Th extends HTMLElement {
|
|
|
11086
11278
|
super();
|
|
11087
11279
|
this.template = () => `
|
|
11088
11280
|
<div class="th">
|
|
11089
|
-
<px-vstack gap="
|
|
11090
|
-
<px-hstack gap="
|
|
11281
|
+
<px-vstack gap="none">
|
|
11282
|
+
<px-hstack gap="2xs" align-items="center">
|
|
11091
11283
|
<slot></slot>
|
|
11092
11284
|
<slot name="info"></slot>
|
|
11093
11285
|
</px-hstack>
|
|
@@ -11114,7 +11306,7 @@ class Th extends HTMLElement {
|
|
|
11114
11306
|
if (!customElements.get("px-th")) {
|
|
11115
11307
|
customElements.define("px-th", Th);
|
|
11116
11308
|
}
|
|
11117
|
-
const styles$6 = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-background-
|
|
11309
|
+
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)}";
|
|
11118
11310
|
const styleSheet$2 = new CSSStyleSheet();
|
|
11119
11311
|
styleSheet$2.replaceSync(styles$6);
|
|
11120
11312
|
class Tbody extends HTMLElement {
|
|
@@ -11135,7 +11327,7 @@ class Tbody extends HTMLElement {
|
|
|
11135
11327
|
if (!customElements.get("px-tbody")) {
|
|
11136
11328
|
customElements.define("px-tbody", Tbody);
|
|
11137
11329
|
}
|
|
11138
|
-
const styles$5 = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-
|
|
11330
|
+
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:var(--px-font-weight-body);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-font-line-height-m);color:var(--px-color-text-neutral-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-color-text-dimmed-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}@media only screen and (min-width: 1025px){.td{padding:var(--px-padding-s-desktop) var(--px-padding-xs-desktop);font-size:var(--px-text-size-body-m-desktop)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11139
11331
|
const styleSheet$1 = new CSSStyleSheet();
|
|
11140
11332
|
styleSheet$1.replaceSync(styles$5);
|
|
11141
11333
|
class Td extends HTMLElement {
|
|
@@ -11143,10 +11335,10 @@ class Td extends HTMLElement {
|
|
|
11143
11335
|
super();
|
|
11144
11336
|
this.template = () => `
|
|
11145
11337
|
<div class="td">
|
|
11146
|
-
<px-hstack gap="
|
|
11338
|
+
<px-hstack gap="xs" align-items="center">
|
|
11147
11339
|
<slot name="icon"></slot>
|
|
11148
|
-
<px-vstack gap="
|
|
11149
|
-
<px-hstack gap="
|
|
11340
|
+
<px-vstack gap="none" align-items="start">
|
|
11341
|
+
<px-hstack gap="2xs" align-items="center">
|
|
11150
11342
|
<slot></slot>
|
|
11151
11343
|
<slot name="info"></slot>
|
|
11152
11344
|
</px-hstack>
|
|
@@ -11179,43 +11371,47 @@ class Td extends HTMLElement {
|
|
|
11179
11371
|
if (!customElements.get("px-td")) {
|
|
11180
11372
|
customElements.define("px-td", Td);
|
|
11181
11373
|
}
|
|
11182
|
-
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:
|
|
11374
|
+
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)}}";
|
|
11183
11375
|
const stylesheet$3 = new CSSStyleSheet();
|
|
11184
11376
|
stylesheet$3.replaceSync(styles$4);
|
|
11185
11377
|
class MegaDropDown extends HTMLElement {
|
|
11186
11378
|
constructor() {
|
|
11187
11379
|
var _a;
|
|
11188
11380
|
super();
|
|
11189
|
-
this.template =
|
|
11190
|
-
|
|
11191
|
-
|
|
11192
|
-
|
|
11193
|
-
|
|
11194
|
-
|
|
11195
|
-
|
|
11196
|
-
|
|
11197
|
-
|
|
11198
|
-
|
|
11199
|
-
|
|
11200
|
-
|
|
11201
|
-
|
|
11202
|
-
|
|
11203
|
-
|
|
11204
|
-
|
|
11205
|
-
|
|
11206
|
-
|
|
11207
|
-
|
|
11208
|
-
|
|
11209
|
-
|
|
11210
|
-
|
|
11211
|
-
|
|
11212
|
-
|
|
11213
|
-
|
|
11214
|
-
|
|
11215
|
-
|
|
11216
|
-
|
|
11217
|
-
|
|
11218
|
-
|
|
11381
|
+
this.template = `
|
|
11382
|
+
<px-container
|
|
11383
|
+
padding-inline="none"
|
|
11384
|
+
padding-block="l"
|
|
11385
|
+
padding-block--mobile="m"
|
|
11386
|
+
background-color="none"
|
|
11387
|
+
>
|
|
11388
|
+
<px-hstack id="mobile-header" gap="1rem" align-items="center">
|
|
11389
|
+
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
11390
|
+
<px-button id="back-button" variant="tertiary">
|
|
11391
|
+
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
11392
|
+
Back to menu
|
|
11393
|
+
</px-button>
|
|
11394
|
+
<px-spacer></px-spacer>
|
|
11395
|
+
<px-button-icon size="small" variant="secondary">
|
|
11396
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11397
|
+
</px-button-icon>
|
|
11398
|
+
</px-hstack>
|
|
11399
|
+
<px-h1 variant="title-3xl"></px-h1>
|
|
11400
|
+
<px-button-icon size="small" variant="secondary">
|
|
11401
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11402
|
+
</px-button-icon>
|
|
11403
|
+
<px-stack
|
|
11404
|
+
direction--mobile="column"
|
|
11405
|
+
direction="row"
|
|
11406
|
+
gap="l"
|
|
11407
|
+
wrap="wrap"
|
|
11408
|
+
>
|
|
11409
|
+
<slot></slot>
|
|
11410
|
+
</px-stack>
|
|
11411
|
+
</px-container>
|
|
11412
|
+
<px-hstack id="footer" justify-content="space-between" align-items="center" gap="l">
|
|
11413
|
+
<slot name="mdd-footer"></slot>
|
|
11414
|
+
</px-hstack>`;
|
|
11219
11415
|
this.attachShadow({ mode: "open" });
|
|
11220
11416
|
this.shadowRoot.innerHTML = this.template;
|
|
11221
11417
|
this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
|
|
@@ -11240,7 +11436,7 @@ class MegaDropDown extends HTMLElement {
|
|
|
11240
11436
|
this.shadowRoot.addEventListener("click", (event) => {
|
|
11241
11437
|
if (event.target.closest("px-button-icon")) {
|
|
11242
11438
|
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: true }));
|
|
11243
|
-
} else if (event.target.closest("
|
|
11439
|
+
} else if (event.target.closest("#back-button")) {
|
|
11244
11440
|
const event2 = new CustomEvent("section-item-click", {
|
|
11245
11441
|
bubbles: true,
|
|
11246
11442
|
composed: true,
|
|
@@ -11261,6 +11457,9 @@ class MegaDropDown extends HTMLElement {
|
|
|
11261
11457
|
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
11262
11458
|
)) == null ? void 0 : _b.innerText) ?? "";
|
|
11263
11459
|
this.$title.innerText = title;
|
|
11460
|
+
if (!this.querySelector('[slot="mdd-footer"]')) {
|
|
11461
|
+
this.$footer.style.display = "none";
|
|
11462
|
+
}
|
|
11264
11463
|
}
|
|
11265
11464
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
11266
11465
|
if (name === "name" && !newValue) {
|
|
@@ -11304,26 +11503,29 @@ class MegaDropDown extends HTMLElement {
|
|
|
11304
11503
|
get $title() {
|
|
11305
11504
|
return this.shadowRoot.querySelector("px-h1");
|
|
11306
11505
|
}
|
|
11506
|
+
get $footer() {
|
|
11507
|
+
return this.shadowRoot.querySelector("#footer");
|
|
11508
|
+
}
|
|
11307
11509
|
}
|
|
11308
11510
|
if (!customElements.get("px-mdd")) {
|
|
11309
11511
|
customElements.define("px-mdd", MegaDropDown);
|
|
11310
11512
|
}
|
|
11311
|
-
const styles$3 =
|
|
11513
|
+
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}}';
|
|
11312
11514
|
const stylesheet$2 = new CSSStyleSheet();
|
|
11313
11515
|
stylesheet$2.replaceSync(styles$3);
|
|
11314
11516
|
class MddSection extends HTMLElement {
|
|
11315
11517
|
constructor() {
|
|
11316
11518
|
super();
|
|
11317
|
-
this.template = `<px-vstack gap="
|
|
11318
|
-
<px-h1 variant="title-l" color="
|
|
11519
|
+
this.template = `<px-vstack gap="default">
|
|
11520
|
+
<px-h1 variant="title-l" color="neutral" variant--mobile="title-xl">
|
|
11319
11521
|
<slot name="title"></slot>
|
|
11320
11522
|
</px-h1>
|
|
11321
11523
|
<div id="section-wrapper">
|
|
11322
|
-
<px-vstack role="menu" gap="
|
|
11524
|
+
<px-vstack role="menu" gap="xs" gap--mobile="0">
|
|
11323
11525
|
<slot></slot>
|
|
11324
11526
|
</px-vstack>
|
|
11325
11527
|
</div>
|
|
11326
|
-
<px-vstack gap="
|
|
11528
|
+
<px-vstack gap="default" gap--mobile="default">
|
|
11327
11529
|
<slot name="footer"></slot>
|
|
11328
11530
|
</px-vstack>
|
|
11329
11531
|
</px-vstack>`;
|
|
@@ -11335,7 +11537,7 @@ class MddSection extends HTMLElement {
|
|
|
11335
11537
|
if (!customElements.get("px-mdd-section")) {
|
|
11336
11538
|
customElements.define("px-mdd-section", MddSection);
|
|
11337
11539
|
}
|
|
11338
|
-
const styles$2 =
|
|
11540
|
+
const styles$2 = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}a:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}@media only screen and (max-width: 47.9375em){px-hstack{display:block;padding:1em 0;background-color:#fff;border-radius:1em}}@media only screen and (min-width: 48em){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}';
|
|
11339
11541
|
const stylesheet$1 = new CSSStyleSheet();
|
|
11340
11542
|
stylesheet$1.replaceSync(styles$2);
|
|
11341
11543
|
class MddSectionItem extends HTMLElement {
|
|
@@ -11344,7 +11546,10 @@ class MddSectionItem extends HTMLElement {
|
|
|
11344
11546
|
super();
|
|
11345
11547
|
this.template = `
|
|
11346
11548
|
<px-hstack align-items="center">
|
|
11347
|
-
<span
|
|
11549
|
+
<span class="mdd-section-item-action-container">
|
|
11550
|
+
<slot></slot>
|
|
11551
|
+
<slot name="after"></slot>
|
|
11552
|
+
</span>
|
|
11348
11553
|
<px-spacer></px-spacer>
|
|
11349
11554
|
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
11350
11555
|
</px-hstack>`;
|
|
@@ -11375,6 +11580,12 @@ class MddSectionItem extends HTMLElement {
|
|
|
11375
11580
|
} else if (this.hasAttribute("for")) {
|
|
11376
11581
|
this.addEventListener("click", this.handleClick);
|
|
11377
11582
|
}
|
|
11583
|
+
if (this.$after && this.$after.localName === "px-icon") {
|
|
11584
|
+
this.configureAfterIcon(this.$after);
|
|
11585
|
+
}
|
|
11586
|
+
if (this.$link) {
|
|
11587
|
+
this.$arrowIcon.style.display = "none";
|
|
11588
|
+
}
|
|
11378
11589
|
}
|
|
11379
11590
|
handleClick() {
|
|
11380
11591
|
const event = new CustomEvent("section-item-click", {
|
|
@@ -11384,6 +11595,13 @@ class MddSectionItem extends HTMLElement {
|
|
|
11384
11595
|
});
|
|
11385
11596
|
this.dispatchEvent(event);
|
|
11386
11597
|
}
|
|
11598
|
+
configureAfterIcon(icon) {
|
|
11599
|
+
icon.addEventListener("click", () => {
|
|
11600
|
+
this.$link.focus();
|
|
11601
|
+
});
|
|
11602
|
+
icon.setAttribute("size", "2xs");
|
|
11603
|
+
icon.setAttribute("color", "inherit");
|
|
11604
|
+
}
|
|
11387
11605
|
get href() {
|
|
11388
11606
|
return this.getAttribute("href");
|
|
11389
11607
|
}
|
|
@@ -11396,11 +11614,19 @@ class MddSectionItem extends HTMLElement {
|
|
|
11396
11614
|
get $button() {
|
|
11397
11615
|
return this.shadowRoot.querySelector("button");
|
|
11398
11616
|
}
|
|
11617
|
+
get $after() {
|
|
11618
|
+
return this.querySelector('[slot="after"]');
|
|
11619
|
+
}
|
|
11620
|
+
get $arrowIcon() {
|
|
11621
|
+
return this.shadowRoot.querySelector(
|
|
11622
|
+
'px-icon[name="chevron_right"]'
|
|
11623
|
+
);
|
|
11624
|
+
}
|
|
11399
11625
|
}
|
|
11400
11626
|
if (!customElements.get("px-mdd-section-item")) {
|
|
11401
11627
|
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
11402
11628
|
}
|
|
11403
|
-
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:
|
|
11629
|
+
const statusCss = ":host,:host>*{display:block;box-sizing:border-box}.status{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-font-line-height-m);color:var(--px-color-text-brand-default)}.status.success{color:var(--px-color-text-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-color-text-purpose-warning-default)}.status.error{color:var(--px-color-text-purpose-error-default)}.status.unlimited{color:var(--px-color-text-purpose-unlimited-default)}.status[disabled]{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .status{color:var(--px-color-text-brand-inverted)}:host([inverted]) .status.success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.status{font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.status{font-size:var(--px-text-size-label-m-desktop)}}";
|
|
11404
11630
|
const statusStyles = new CSSStyleSheet();
|
|
11405
11631
|
statusStyles.replaceSync(statusCss);
|
|
11406
11632
|
const statusStateValues = [
|
|
@@ -11417,8 +11643,8 @@ const _Status = class _Status extends PxElement {
|
|
|
11417
11643
|
super(statusStyles);
|
|
11418
11644
|
this.template = () => `
|
|
11419
11645
|
<div class="status">
|
|
11420
|
-
<px-hstack gap="
|
|
11421
|
-
<px-icon name="information_fill" from="lavender" size="
|
|
11646
|
+
<px-hstack gap="2xs" align-items="flex-start">
|
|
11647
|
+
<px-icon name="information_fill" from="lavender" size="m" color="content-brand"></px-icon>
|
|
11422
11648
|
<slot name="label"></slot>
|
|
11423
11649
|
</px-hstack>
|
|
11424
11650
|
</div>`;
|
|
@@ -11472,7 +11698,7 @@ const _Status = class _Status extends PxElement {
|
|
|
11472
11698
|
break;
|
|
11473
11699
|
case "disabled":
|
|
11474
11700
|
this.$el.toggleAttribute("disabled", newValue !== null);
|
|
11475
|
-
this.$statusIcon.color = "
|
|
11701
|
+
this.$statusIcon.color = "state-disabled";
|
|
11476
11702
|
break;
|
|
11477
11703
|
case "inverted":
|
|
11478
11704
|
for (let i = 0; i < this.$children.length; i++) {
|
|
@@ -11491,7 +11717,7 @@ const _Status = class _Status extends PxElement {
|
|
|
11491
11717
|
}
|
|
11492
11718
|
updateState(state) {
|
|
11493
11719
|
if (!this.checkName(statusStateValues, state)) {
|
|
11494
|
-
console.error(`${state} is not a valid state value
|
|
11720
|
+
console.error(`${state} is not a valid state value`);
|
|
11495
11721
|
return;
|
|
11496
11722
|
}
|
|
11497
11723
|
const iconMap = {
|
|
@@ -11608,13 +11834,13 @@ const _Status = class _Status extends PxElement {
|
|
|
11608
11834
|
_Status.nativeName = "div";
|
|
11609
11835
|
let Status = _Status;
|
|
11610
11836
|
customElements.define("px-status", Status);
|
|
11611
|
-
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-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:
|
|
11837
|
+
const styles$1 = ':host{display:block}:host *{box-sizing:border-box}.card{display:block;position:relative;text-decoration:none;font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-size-border-m) solid transparent}.card .contrast-helper{display:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}:host([contrast-helper-gradient]) :is(.card .contrast-helper){display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}:host([contrast-helper-overlay]) :is(.card .contrast-helper){display:block;background-color:#ffffffb3}.card .card__container{height:100%}.card .card__content{position:relative;background-color:var(--card-background-color-default);flex-grow:1;z-index:2}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover .card__content{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-heading-2xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-font-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size);flex:0 0 auto}@media only screen and (max-width: 767px){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px) and (max-width: 1024px){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px){.card{font-size:var(--px-text-size-label-l-desktop);outline-width:var(--px-focus-outline-desktop)}.card:focus-visible{outline-offset:var(--px-focus-offset-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-2xl-desktop)}::slotted([slot="content"]){font-size:var(--px-text-size-label-l-desktop)}}@media only screen and (min-width: 1025px){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}.card{font-size:var(--px-text-size-label-l-desktop);outline-width:var(--px-focus-outline-desktop)}.card:focus-visible{outline-offset:var(--px-focus-offset-desktop)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-2xl-desktop)}::slotted([slot="content"]){font-size:var(--px-text-size-label-l-desktop)}.media-position-top--laptop .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--laptop) .card__container,.media-position-left--laptop .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--laptop,.media-position-left--laptop .card__container .card__media-left--laptop{background-size:cover;background-position:center center;width:var(--card-media-left-size--laptop, var(--card-media-left-size))}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,.media-position-background--laptop .card__content{background-color:transparent}.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,.media-position-background--laptop:hover .card__content{background-color:transparent}}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card .card__content{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 767px){:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,:host([inverted]) .media-position-background--mobile .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,:host([inverted]) .media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,:host([inverted]) .media-position-background--tablet .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,:host([inverted]) .media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 1025px){:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop) .card__content,:host([inverted]) .media-position-background--laptop .card__content{background-color:transparent}:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop):hover .card__content,:host([inverted]) .media-position-background--laptop:hover .card__content{background-color:transparent}}';
|
|
11612
11838
|
const styleSheet = new CSSStyleSheet();
|
|
11613
11839
|
styleSheet.replaceSync(styles$1);
|
|
11614
11840
|
const cardBackgroundColorValues = [
|
|
11615
11841
|
"",
|
|
11616
|
-
"
|
|
11617
|
-
"
|
|
11842
|
+
"container-default",
|
|
11843
|
+
"container-light"
|
|
11618
11844
|
];
|
|
11619
11845
|
const cardPaddingValues = ["", "s", "m", "l"];
|
|
11620
11846
|
const cardMediaLeftSizeValues = ["", "s", "m"];
|
|
@@ -11634,8 +11860,8 @@ const _Card = class _Card extends PxElement {
|
|
|
11634
11860
|
<px-container padding="none" background-color="none" border-radius="none">
|
|
11635
11861
|
<div class="card__container">
|
|
11636
11862
|
<div class="card__content">
|
|
11637
|
-
<px-vstack gap="
|
|
11638
|
-
<px-vstack gap="
|
|
11863
|
+
<px-vstack gap="default">
|
|
11864
|
+
<px-vstack gap="s">
|
|
11639
11865
|
<slot name="title"></slot>
|
|
11640
11866
|
<slot name="content"></slot>
|
|
11641
11867
|
</px-vstack>
|
|
@@ -11764,7 +11990,7 @@ const _Card = class _Card extends PxElement {
|
|
|
11764
11990
|
}
|
|
11765
11991
|
configureCard() {
|
|
11766
11992
|
if (!this.backgroundColor) {
|
|
11767
|
-
this.backgroundColor = "
|
|
11993
|
+
this.backgroundColor = "container-light";
|
|
11768
11994
|
}
|
|
11769
11995
|
if (!this.padding) {
|
|
11770
11996
|
this.padding = "m";
|
|
@@ -11787,7 +12013,7 @@ const _Card = class _Card extends PxElement {
|
|
|
11787
12013
|
updateMediaPosition(attrName, newValue, attrValue) {
|
|
11788
12014
|
if (!checkName(attrValue, newValue)) {
|
|
11789
12015
|
console.error(
|
|
11790
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12016
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
11791
12017
|
this.$el
|
|
11792
12018
|
);
|
|
11793
12019
|
return;
|
|
@@ -11940,7 +12166,7 @@ const _Card = class _Card extends PxElement {
|
|
|
11940
12166
|
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
11941
12167
|
if (!checkName(attrValue, newValue)) {
|
|
11942
12168
|
console.error(
|
|
11943
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12169
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
11944
12170
|
this.$el
|
|
11945
12171
|
);
|
|
11946
12172
|
return;
|
|
@@ -11949,11 +12175,11 @@ const _Card = class _Card extends PxElement {
|
|
|
11949
12175
|
if (value !== null && value !== "" && value !== "default") {
|
|
11950
12176
|
this.$el.style.setProperty(
|
|
11951
12177
|
`--card-background-color-default`,
|
|
11952
|
-
`var(--px-background
|
|
12178
|
+
`var(--px-color-background-${value}-default)`
|
|
11953
12179
|
);
|
|
11954
12180
|
this.$el.style.setProperty(
|
|
11955
12181
|
`--card-background-color-inverted`,
|
|
11956
|
-
`var(--px-background
|
|
12182
|
+
`var(--px-color-background-${value}-inverted)`
|
|
11957
12183
|
);
|
|
11958
12184
|
}
|
|
11959
12185
|
};
|
|
@@ -11963,7 +12189,7 @@ const _Card = class _Card extends PxElement {
|
|
|
11963
12189
|
updateMediaLeftSize(attrName, oldValue, newValue, attrValue) {
|
|
11964
12190
|
if (!checkName(attrValue, newValue)) {
|
|
11965
12191
|
console.error(
|
|
11966
|
-
`${newValue} is not an allowed ${attrName} value
|
|
12192
|
+
`${newValue} is not an allowed ${attrName} value`,
|
|
11967
12193
|
this.$el
|
|
11968
12194
|
);
|
|
11969
12195
|
return;
|
|
@@ -12198,7 +12424,7 @@ let Card = _Card;
|
|
|
12198
12424
|
if (!customElements.get("px-card")) {
|
|
12199
12425
|
customElements.define("px-card", Card);
|
|
12200
12426
|
}
|
|
12201
|
-
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-
|
|
12427
|
+
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)}}";
|
|
12202
12428
|
const contentHeaderStyles = new CSSStyleSheet();
|
|
12203
12429
|
contentHeaderStyles.replaceSync(contentHeaderCss);
|
|
12204
12430
|
const _ContentHeader = class _ContentHeader extends PxElement {
|
|
@@ -12212,7 +12438,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
12212
12438
|
<px-h1><slot></slot></px-h1>
|
|
12213
12439
|
<slot name="subtitle"></slot>
|
|
12214
12440
|
</px-vstack>
|
|
12215
|
-
${this.$patchDescriptionSlot ? `<px-stack gap="
|
|
12441
|
+
${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
|
|
12216
12442
|
<slot name="patch" shrink></slot>
|
|
12217
12443
|
<slot name="patch-description"></slot>
|
|
12218
12444
|
</px-stack>` : ""}
|
|
@@ -12410,7 +12636,7 @@ const _ContentHeader = class _ContentHeader extends PxElement {
|
|
|
12410
12636
|
_ContentHeader.nativeName = "div";
|
|
12411
12637
|
let ContentHeader = _ContentHeader;
|
|
12412
12638
|
customElements.define("px-content-header", ContentHeader);
|
|
12413
|
-
const styles = ':host{position:relative}
|
|
12639
|
+
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}}';
|
|
12414
12640
|
const anchorAlignmentValues = [
|
|
12415
12641
|
"top-left",
|
|
12416
12642
|
"top-right",
|
|
@@ -12484,7 +12710,7 @@ class Dropdown extends WithExtraAttributes {
|
|
|
12484
12710
|
::slotted([slot="popover"]) {
|
|
12485
12711
|
position-anchor: ${this.anchorName};
|
|
12486
12712
|
top: anchor(${this.anchorName} bottom);
|
|
12487
|
-
right: calc(anchor(${this.anchorName} right) - var(--px-icon-
|
|
12713
|
+
right: calc(anchor(${this.anchorName} right) - var(--px-size-icon-xs));
|
|
12488
12714
|
}
|
|
12489
12715
|
}
|
|
12490
12716
|
:host([anchoralignment="top-left"]) {
|
|
@@ -12623,7 +12849,6 @@ export {
|
|
|
12623
12849
|
ContentHeader,
|
|
12624
12850
|
Drawer,
|
|
12625
12851
|
Dropdown,
|
|
12626
|
-
Entrypoint,
|
|
12627
12852
|
Fieldset,
|
|
12628
12853
|
Grid,
|
|
12629
12854
|
H1,
|
|
@@ -12692,7 +12917,6 @@ export {
|
|
|
12692
12917
|
assetContainerImgWidthValues,
|
|
12693
12918
|
backgroundColorValues,
|
|
12694
12919
|
backgroundSizeValues,
|
|
12695
|
-
backgroundValues,
|
|
12696
12920
|
borderColorValues,
|
|
12697
12921
|
borderRadiusValues,
|
|
12698
12922
|
borderSideValues,
|
|
@@ -12740,6 +12964,7 @@ export {
|
|
|
12740
12964
|
linkVariantValues,
|
|
12741
12965
|
noBorderRadiusValues,
|
|
12742
12966
|
observedAttributes,
|
|
12967
|
+
overflowValues,
|
|
12743
12968
|
paddingValues,
|
|
12744
12969
|
patchShapeValues,
|
|
12745
12970
|
patchVariantValues,
|