@proximus/lavender 1.0.0-alpha.24 → 1.0.0-alpha.25
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 +1847 -339
- package/dist/lavender.umd.js +1 -1
- package/package.json +2 -2
package/dist/lavender.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const commonStyles = "
|
|
1
|
+
const commonStyles = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]){order:var(--order--value)}:host([hidden]){display:none}::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]){order:var(--order--mobile-value)!important}::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]){order:var(--order--tablet-value)!important}::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
|
|
2
2
|
function getSupportedAttributeNames(htmlElementName) {
|
|
3
3
|
const $element = document.createElement(htmlElementName);
|
|
4
4
|
const inputPrototype = Object.getPrototypeOf($element);
|
|
@@ -82,7 +82,7 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
82
82
|
case "basis--tablet":
|
|
83
83
|
case "basis--laptop":
|
|
84
84
|
case "basis--desktop":
|
|
85
|
-
this.
|
|
85
|
+
this.style.setProperty(`--${name}-value`, newValue);
|
|
86
86
|
break;
|
|
87
87
|
case "align-self":
|
|
88
88
|
case "align-self--mobile":
|
|
@@ -133,46 +133,23 @@ class WithExtraAttributes extends HTMLElement {
|
|
|
133
133
|
}
|
|
134
134
|
const hasBreakpoint = name.indexOf("--") > -1;
|
|
135
135
|
const cssPropertyName = hasBreakpoint ? name.split("--")[0] : name;
|
|
136
|
-
const breakpoints = [];
|
|
137
136
|
if (!hasBreakpoint) {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
if (!this.getAttribute(cssPropertyName + "--desktop")) {
|
|
148
|
-
breakpoints.push("desktop");
|
|
149
|
-
}
|
|
150
|
-
breakpoints.forEach((breakpoint) => {
|
|
151
|
-
WithExtraAttributes.prototype.updateStyle.call(
|
|
152
|
-
this,
|
|
153
|
-
cssPropertyName,
|
|
154
|
-
breakpoint,
|
|
155
|
-
oldValue
|
|
156
|
-
);
|
|
157
|
-
WithExtraAttributes.prototype.updateStyle.call(
|
|
158
|
-
this,
|
|
159
|
-
cssPropertyName,
|
|
160
|
-
breakpoint,
|
|
161
|
-
newValue
|
|
162
|
-
);
|
|
163
|
-
});
|
|
137
|
+
this.style.setProperty(
|
|
138
|
+
`--${cssPropertyName}-value`,
|
|
139
|
+
oldValue
|
|
140
|
+
);
|
|
141
|
+
this.style.setProperty(
|
|
142
|
+
`--${cssPropertyName}-value`,
|
|
143
|
+
newValue
|
|
144
|
+
);
|
|
164
145
|
} else {
|
|
165
146
|
const breakpoint = name.split("--")[1];
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
cssPropertyName,
|
|
169
|
-
breakpoint,
|
|
147
|
+
this.style.setProperty(
|
|
148
|
+
`--${cssPropertyName}--${breakpoint}-value`,
|
|
170
149
|
oldValue
|
|
171
150
|
);
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
cssPropertyName,
|
|
175
|
-
breakpoint,
|
|
151
|
+
this.style.setProperty(
|
|
152
|
+
`--${cssPropertyName}--${breakpoint}-value`,
|
|
176
153
|
newValue
|
|
177
154
|
);
|
|
178
155
|
}
|
|
@@ -830,34 +807,40 @@ function transferAccessibilityAttributes(sourceElement, targetElement) {
|
|
|
830
807
|
targetElement.setAttribute("id", id);
|
|
831
808
|
sourceElement.setAttribute("aria-labelledby", id);
|
|
832
809
|
}
|
|
833
|
-
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "") {
|
|
810
|
+
function cssTokenBreakpoints(attributeName, selector, attributeValues, cssPropertyPrefix = "", generatedCssPropertyName) {
|
|
834
811
|
const stylesheet2 = new CSSStyleSheet();
|
|
835
812
|
const styles2 = attributeValues.reduce(
|
|
836
813
|
(prev, attributeValue) => prev + `
|
|
837
814
|
${selector(attributeName, attributeValue)} {
|
|
838
|
-
|
|
839
|
-
@media only screen and (max-width: 768px) {
|
|
815
|
+
@media only screen and (max-width: 767px) {
|
|
840
816
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile);
|
|
817
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
841
818
|
}
|
|
819
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop);
|
|
820
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}:var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
842
821
|
}
|
|
843
822
|
${selector(attributeName, attributeValue, "mobile")} {
|
|
844
|
-
@media only screen and (max-width:
|
|
823
|
+
@media only screen and (max-width: 767px) {
|
|
845
824
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile) !important;
|
|
825
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-mobile)` : ""}
|
|
846
826
|
}
|
|
847
827
|
}
|
|
848
828
|
${selector(attributeName, attributeValue, "tablet")} {
|
|
849
|
-
@media only screen and (min-width:
|
|
850
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-
|
|
829
|
+
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
|
830
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
831
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
851
832
|
}
|
|
852
833
|
}
|
|
853
834
|
${selector(attributeName, attributeValue, "laptop")} {
|
|
854
|
-
@media only screen and (min-width:
|
|
855
|
-
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-
|
|
835
|
+
@media only screen and (min-width: 768px) {
|
|
836
|
+
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
837
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
856
838
|
}
|
|
857
839
|
}
|
|
858
840
|
${selector(attributeName, attributeValue, "desktop")} {
|
|
859
|
-
@media only screen and (min-width:
|
|
841
|
+
@media only screen and (min-width: 768px) {
|
|
860
842
|
${attributeName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop) !important;
|
|
843
|
+
${generatedCssPropertyName ? `${generatedCssPropertyName}: var(--${cssPropertyPrefix}-${attributeValue}-desktop)` : ""}
|
|
861
844
|
}
|
|
862
845
|
}`,
|
|
863
846
|
""
|
|
@@ -970,9 +953,9 @@ class AttributeBreakpointHandlerDelegate {
|
|
|
970
953
|
this.setCSSProperties();
|
|
971
954
|
}
|
|
972
955
|
}
|
|
973
|
-
const styles$
|
|
974
|
-
const styleSheet$
|
|
975
|
-
styleSheet$
|
|
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: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}";
|
|
957
|
+
const styleSheet$s = new CSSStyleSheet();
|
|
958
|
+
styleSheet$s.replaceSync(styles$z);
|
|
976
959
|
const directionValues = [
|
|
977
960
|
"",
|
|
978
961
|
"default",
|
|
@@ -1003,7 +986,7 @@ const justifyContentValues = [
|
|
|
1003
986
|
const wrapValues = ["", "default", "nowrap", "wrap", "wrap-reverse"];
|
|
1004
987
|
class Stack extends WithExtraAttributes {
|
|
1005
988
|
constructor() {
|
|
1006
|
-
super(styleSheet$
|
|
989
|
+
super(styleSheet$s);
|
|
1007
990
|
this.template = `<div class="flex-container">
|
|
1008
991
|
<slot></slot>
|
|
1009
992
|
</div>`;
|
|
@@ -1357,12 +1340,12 @@ class Spacer extends HTMLElement {
|
|
|
1357
1340
|
}
|
|
1358
1341
|
}
|
|
1359
1342
|
customElements.define("px-spacer", Spacer);
|
|
1360
|
-
const styles$
|
|
1361
|
-
const styleSheet$
|
|
1362
|
-
styleSheet$
|
|
1343
|
+
const styles$y = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}";
|
|
1344
|
+
const styleSheet$r = new CSSStyleSheet();
|
|
1345
|
+
styleSheet$r.replaceSync(styles$y);
|
|
1363
1346
|
class Page extends WithExtraAttributes {
|
|
1364
1347
|
constructor() {
|
|
1365
|
-
super(styleSheet$
|
|
1348
|
+
super(styleSheet$r);
|
|
1366
1349
|
this.template = (stickyContainer) => `
|
|
1367
1350
|
<px-container border-radius="none" padding="none">
|
|
1368
1351
|
<px-vstack>
|
|
@@ -1576,7 +1559,7 @@ class Page extends WithExtraAttributes {
|
|
|
1576
1559
|
if (customElements.get("px-page") === void 0) {
|
|
1577
1560
|
customElements.define("px-page", Page);
|
|
1578
1561
|
}
|
|
1579
|
-
const gridCss = ":host{
|
|
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;gap:var(--grid-gap--mobile, var(--px-spacing-inside-section-default-mobile));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)}@media screen and (min-width: 768px){.grid{gap:var( --grid-gap--tablet, var(--px-spacing-inside-section-default-tablet) )}}@media screen and (min-width: 1025px){.grid{gap:var( --grid-gap--laptop, var(--px-spacing-inside-section-default-desktop) )}}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 1025px){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}";
|
|
1580
1563
|
const gridStyles = new CSSStyleSheet();
|
|
1581
1564
|
gridStyles.replaceSync(gridCss);
|
|
1582
1565
|
const gridColsValues = [
|
|
@@ -1900,18 +1883,18 @@ const _Grid = class _Grid extends PxElement {
|
|
|
1900
1883
|
_Grid.nativeName = "div";
|
|
1901
1884
|
let Grid = _Grid;
|
|
1902
1885
|
customElements.define("px-grid", Grid);
|
|
1903
|
-
const buttonCss = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.actionable-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}';
|
|
1904
|
-
const linkCss = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-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-text-color-action-hover-default)}a.no-style{
|
|
1905
|
-
const styles$
|
|
1906
|
-
const styles$
|
|
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:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-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-text-color-action-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-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-icon-color-content-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}:host([inverted]) a.icon-link{color:var(--px-icon-color-content-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@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-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}';
|
|
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-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-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-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@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)}}";
|
|
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:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}";
|
|
1907
1890
|
const buttonStyles$1 = new CSSStyleSheet();
|
|
1908
1891
|
const linkStyles$2 = new CSSStyleSheet();
|
|
1909
1892
|
const patchStyles = new CSSStyleSheet();
|
|
1910
1893
|
const tagStyles = new CSSStyleSheet();
|
|
1911
1894
|
buttonStyles$1.replaceSync(buttonCss);
|
|
1912
1895
|
linkStyles$2.replaceSync(linkCss);
|
|
1913
|
-
patchStyles.replaceSync(styles$
|
|
1914
|
-
tagStyles.replaceSync(styles$
|
|
1896
|
+
patchStyles.replaceSync(styles$x);
|
|
1897
|
+
tagStyles.replaceSync(styles$w);
|
|
1915
1898
|
const variantValues$1 = [
|
|
1916
1899
|
"",
|
|
1917
1900
|
"default",
|
|
@@ -2146,7 +2129,7 @@ let Button = _Button;
|
|
|
2146
2129
|
if (!customElements.get("px-button")) {
|
|
2147
2130
|
customElements.define("px-button", Button);
|
|
2148
2131
|
}
|
|
2149
|
-
const styles$
|
|
2132
|
+
const styles$v = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-icon-color-content-brand-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-icon-color-content-brand-default)}.inherit{color:inherit}.content-brand{color:var(--px-icon-color-content-brand-default)}.content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-default)}.content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-default)}.action-brand{color:var(--px-icon-color-action-brand-default)}.action-neutral{color:var(--px-icon-color-action-neutral-default)}.action-hover:hover{color:var(--px-icon-color-action-hover-default)}.action-active:active{color:var(--px-icon-color-action-active-default)}.action-disabled{color:var(--px-icon-color-action-disabled-default)}.purpose-success{color:var(--px-icon-color-purpose-success-default)}.purpose-warning{color:var(--px-icon-color-purpose-warning-default)}.purpose-error{color:var(--px-icon-color-purpose-error-default)}.purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-default)}.purpose-promo{color:var(--px-icon-color-purpose-promo-default)}:host([inverted]) i{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) svg{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .content-brand{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-inverted)}:host([inverted]) .content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-inverted)}:host([inverted]) .action-brand{color:var(--px-icon-color-action-brand-inverted)}:host([inverted]) .action-neutral{color:var(--px-icon-color-action-neutral-inverted)}:host([inverted]) .action-hover:hover{color:var(--px-icon-color-action-hover-inverted)}:host([inverted]) .action-active:active{color:var(--px-icon-color-action-active-inverted)}:host([inverted]) .action-disabled{color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .purpose-success{color:var(--px-icon-color-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-icon-color-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-icon-color-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-icon-color-purpose-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size: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);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size: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);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
|
|
2150
2133
|
const filteredIconSizeValues = ["2xs", "xs", "s", "m", "l", "xl", "2xl"];
|
|
2151
2134
|
const iconColorValues = [
|
|
2152
2135
|
"",
|
|
@@ -2284,11 +2267,11 @@ class Icon extends WithExtraAttributes {
|
|
|
2284
2267
|
this.setAttribute("disabled", value);
|
|
2285
2268
|
}
|
|
2286
2269
|
}
|
|
2287
|
-
const styleSheet$
|
|
2288
|
-
styleSheet$
|
|
2270
|
+
const styleSheet$q = new CSSStyleSheet();
|
|
2271
|
+
styleSheet$q.replaceSync(styles$v);
|
|
2289
2272
|
class SVGIcon extends Icon {
|
|
2290
2273
|
constructor() {
|
|
2291
|
-
super(styleSheet$
|
|
2274
|
+
super(styleSheet$q);
|
|
2292
2275
|
this.template = () => `<svg>
|
|
2293
2276
|
<use xlink:href="#icon-${this.name}"></use>
|
|
2294
2277
|
</svg>`;
|
|
@@ -2312,6 +2295,9 @@ class SVGIcon extends Icon {
|
|
|
2312
2295
|
);
|
|
2313
2296
|
}
|
|
2314
2297
|
}
|
|
2298
|
+
if (!this.ariaLabel && this.internals) {
|
|
2299
|
+
this.internals.ariaHidden = "true";
|
|
2300
|
+
}
|
|
2315
2301
|
}
|
|
2316
2302
|
updateName(oldValue, newValue) {
|
|
2317
2303
|
if (this.src) {
|
|
@@ -2374,13 +2360,62 @@ class IconSet extends HTMLElement {
|
|
|
2374
2360
|
if (!customElements.get("px-icon-set")) {
|
|
2375
2361
|
customElements.define("px-icon-set", IconSet);
|
|
2376
2362
|
}
|
|
2377
|
-
const containerCss = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);
|
|
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-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 767px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}';
|
|
2378
2364
|
const containerStyles = new CSSStyleSheet();
|
|
2379
2365
|
containerStyles.replaceSync(containerCss);
|
|
2380
2366
|
const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
|
|
2367
|
+
const attributeBreakpointCSSSelector$2 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .container`;
|
|
2368
|
+
const paddingPrefix$1 = "px-padding";
|
|
2381
2369
|
const _Container = class _Container extends PxElement {
|
|
2382
2370
|
constructor() {
|
|
2383
|
-
super(
|
|
2371
|
+
super(
|
|
2372
|
+
containerStyles,
|
|
2373
|
+
cssTokenBreakpoints(
|
|
2374
|
+
"padding",
|
|
2375
|
+
attributeBreakpointCSSSelector$2,
|
|
2376
|
+
paddingValues,
|
|
2377
|
+
paddingPrefix$1,
|
|
2378
|
+
"--container-padding"
|
|
2379
|
+
),
|
|
2380
|
+
cssTokenBreakpoints(
|
|
2381
|
+
"padding-inline",
|
|
2382
|
+
attributeBreakpointCSSSelector$2,
|
|
2383
|
+
paddingValues,
|
|
2384
|
+
paddingPrefix$1
|
|
2385
|
+
),
|
|
2386
|
+
cssTokenBreakpoints(
|
|
2387
|
+
"padding-block",
|
|
2388
|
+
attributeBreakpointCSSSelector$2,
|
|
2389
|
+
paddingValues,
|
|
2390
|
+
paddingPrefix$1
|
|
2391
|
+
),
|
|
2392
|
+
cssTokenBreakpoints(
|
|
2393
|
+
"padding-top",
|
|
2394
|
+
attributeBreakpointCSSSelector$2,
|
|
2395
|
+
paddingValues,
|
|
2396
|
+
paddingPrefix$1
|
|
2397
|
+
),
|
|
2398
|
+
cssTokenBreakpoints(
|
|
2399
|
+
"padding-right",
|
|
2400
|
+
attributeBreakpointCSSSelector$2,
|
|
2401
|
+
paddingValues,
|
|
2402
|
+
paddingPrefix$1,
|
|
2403
|
+
"--container-padding-right"
|
|
2404
|
+
),
|
|
2405
|
+
cssTokenBreakpoints(
|
|
2406
|
+
"padding-bottom",
|
|
2407
|
+
attributeBreakpointCSSSelector$2,
|
|
2408
|
+
paddingValues,
|
|
2409
|
+
paddingPrefix$1
|
|
2410
|
+
),
|
|
2411
|
+
cssTokenBreakpoints(
|
|
2412
|
+
"padding-left",
|
|
2413
|
+
attributeBreakpointCSSSelector$2,
|
|
2414
|
+
paddingValues,
|
|
2415
|
+
paddingPrefix$1,
|
|
2416
|
+
"--container-padding-left"
|
|
2417
|
+
)
|
|
2418
|
+
);
|
|
2384
2419
|
this.template = () => `<div class="container">
|
|
2385
2420
|
<slot name="anchor-left"></slot>
|
|
2386
2421
|
<slot name="anchor-right"></slot>
|
|
@@ -2392,34 +2427,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2392
2427
|
static get observedAttributes() {
|
|
2393
2428
|
return [
|
|
2394
2429
|
...super.observedAttributes,
|
|
2395
|
-
"padding",
|
|
2396
|
-
"padding-inline",
|
|
2397
|
-
"padding-block",
|
|
2398
|
-
"padding-top",
|
|
2399
|
-
"padding-right",
|
|
2400
|
-
"padding-bottom",
|
|
2401
|
-
"padding-left",
|
|
2402
|
-
"padding--mobile",
|
|
2403
|
-
"padding-inline--mobile",
|
|
2404
|
-
"padding-block--mobile",
|
|
2405
|
-
"padding-top--mobile",
|
|
2406
|
-
"padding-right--mobile",
|
|
2407
|
-
"padding-bottom--mobile",
|
|
2408
|
-
"padding-left--mobile",
|
|
2409
|
-
"padding--tablet",
|
|
2410
|
-
"padding-inline--tablet",
|
|
2411
|
-
"padding-block--tablet",
|
|
2412
|
-
"padding-top--tablet",
|
|
2413
|
-
"padding-right--tablet",
|
|
2414
|
-
"padding-bottom--tablet",
|
|
2415
|
-
"padding-left--tablet",
|
|
2416
|
-
"padding--laptop",
|
|
2417
|
-
"padding-inline--laptop",
|
|
2418
|
-
"padding-block--laptop",
|
|
2419
|
-
"padding-top--laptop",
|
|
2420
|
-
"padding-right--laptop",
|
|
2421
|
-
"padding-bottom--laptop",
|
|
2422
|
-
"padding-left--laptop",
|
|
2423
2430
|
"border",
|
|
2424
2431
|
"border-color",
|
|
2425
2432
|
"border-side",
|
|
@@ -2451,7 +2458,7 @@ const _Container = class _Container extends PxElement {
|
|
|
2451
2458
|
}
|
|
2452
2459
|
connectedCallback() {
|
|
2453
2460
|
super.connectedCallback();
|
|
2454
|
-
if (!this.padding
|
|
2461
|
+
if (!this.padding) {
|
|
2455
2462
|
this.padding = "m";
|
|
2456
2463
|
}
|
|
2457
2464
|
if (!this.backgroundColor) {
|
|
@@ -2470,67 +2477,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2470
2477
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
2471
2478
|
if (oldValue !== newValue) {
|
|
2472
2479
|
switch (attrName) {
|
|
2473
|
-
case "padding":
|
|
2474
|
-
case "padding--mobile":
|
|
2475
|
-
case "padding--tablet":
|
|
2476
|
-
case "padding--laptop":
|
|
2477
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2478
|
-
"top",
|
|
2479
|
-
"right",
|
|
2480
|
-
"bottom",
|
|
2481
|
-
"left"
|
|
2482
|
-
]);
|
|
2483
|
-
break;
|
|
2484
|
-
case "padding-inline":
|
|
2485
|
-
case "padding-inline--mobile":
|
|
2486
|
-
case "padding-inline--tablet":
|
|
2487
|
-
case "padding-inline--laptop":
|
|
2488
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2489
|
-
"left",
|
|
2490
|
-
"right"
|
|
2491
|
-
]);
|
|
2492
|
-
break;
|
|
2493
|
-
case "padding-block":
|
|
2494
|
-
case "padding-block--mobile":
|
|
2495
|
-
case "padding-block--tablet":
|
|
2496
|
-
case "padding-block--laptop":
|
|
2497
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2498
|
-
"top",
|
|
2499
|
-
"bottom"
|
|
2500
|
-
]);
|
|
2501
|
-
break;
|
|
2502
|
-
case "padding-top":
|
|
2503
|
-
case "padding-top--mobile":
|
|
2504
|
-
case "padding-top--tablet":
|
|
2505
|
-
case "padding-top--laptop":
|
|
2506
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2507
|
-
"top"
|
|
2508
|
-
]);
|
|
2509
|
-
break;
|
|
2510
|
-
case "padding-right":
|
|
2511
|
-
case "padding-right--mobile":
|
|
2512
|
-
case "padding-right--tablet":
|
|
2513
|
-
case "padding-right--laptop":
|
|
2514
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2515
|
-
"right"
|
|
2516
|
-
]);
|
|
2517
|
-
break;
|
|
2518
|
-
case "padding-bottom":
|
|
2519
|
-
case "padding-bottom--mobile":
|
|
2520
|
-
case "padding-bottom--tablet":
|
|
2521
|
-
case "padding-bottom--laptop":
|
|
2522
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2523
|
-
"bottom"
|
|
2524
|
-
]);
|
|
2525
|
-
break;
|
|
2526
|
-
case "padding-left":
|
|
2527
|
-
case "padding-left--mobile":
|
|
2528
|
-
case "padding-left--tablet":
|
|
2529
|
-
case "padding-left--laptop":
|
|
2530
|
-
this.updatePadding(attrName, oldValue, newValue, paddingValues, [
|
|
2531
|
-
"left"
|
|
2532
|
-
]);
|
|
2533
|
-
break;
|
|
2534
2480
|
case "border":
|
|
2535
2481
|
this.updateAttribute(attrName, oldValue, newValue, borderValues);
|
|
2536
2482
|
break;
|
|
@@ -2602,37 +2548,6 @@ const _Container = class _Container extends PxElement {
|
|
|
2602
2548
|
}
|
|
2603
2549
|
}
|
|
2604
2550
|
}
|
|
2605
|
-
updatePadding(attrName, oldValue, newValue, attrValues, sideValues) {
|
|
2606
|
-
if (!this.checkName(attrValues, newValue)) {
|
|
2607
|
-
console.error(`Bad ${attrName} value for`, this.$el);
|
|
2608
|
-
return;
|
|
2609
|
-
}
|
|
2610
|
-
const hasBreakpoint = attrName.includes("--");
|
|
2611
|
-
const breakpoint = hasBreakpoint ? attrName.split("--")[1] : "";
|
|
2612
|
-
const updateStyle = (breakpoint2, value, sideValues2, override) => {
|
|
2613
|
-
const breakpointValue = breakpoint2 === "laptop" ? "desktop" : breakpoint2;
|
|
2614
|
-
if (value !== null && value !== "" && value !== "default") {
|
|
2615
|
-
sideValues2.forEach((side) => {
|
|
2616
|
-
const propertyName = `--container-padding-${side}--${breakpoint2}`;
|
|
2617
|
-
if (override || !this.$el.style.getPropertyValue(propertyName)) {
|
|
2618
|
-
this.$el.style.setProperty(
|
|
2619
|
-
propertyName,
|
|
2620
|
-
`var(--px-padding-${value}-${breakpointValue})`
|
|
2621
|
-
);
|
|
2622
|
-
}
|
|
2623
|
-
});
|
|
2624
|
-
}
|
|
2625
|
-
};
|
|
2626
|
-
if (hasBreakpoint) {
|
|
2627
|
-
updateStyle(breakpoint, oldValue, sideValues, true);
|
|
2628
|
-
updateStyle(breakpoint, newValue, sideValues, true);
|
|
2629
|
-
} else {
|
|
2630
|
-
["mobile", "tablet", "laptop"].forEach((breakpoint2) => {
|
|
2631
|
-
updateStyle(breakpoint2, oldValue, sideValues, false);
|
|
2632
|
-
updateStyle(breakpoint2, newValue, sideValues, false);
|
|
2633
|
-
});
|
|
2634
|
-
}
|
|
2635
|
-
}
|
|
2636
2551
|
updateBackgroundImg(attrName, newValue) {
|
|
2637
2552
|
this.$el.style.setProperty(`--${attrName}`, `url("${newValue}")`);
|
|
2638
2553
|
}
|
|
@@ -3286,15 +3201,15 @@ const _H6 = class _H6 extends AbstractHeading {
|
|
|
3286
3201
|
_H6.nativeName = "h6";
|
|
3287
3202
|
let H6 = _H6;
|
|
3288
3203
|
customElements.define("px-h6", H6);
|
|
3289
|
-
const styles$
|
|
3290
|
-
const styleSheet$
|
|
3291
|
-
styleSheet$
|
|
3204
|
+
const styles$u = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-desktop)}}';
|
|
3205
|
+
const styleSheet$p = new CSSStyleSheet();
|
|
3206
|
+
styleSheet$p.replaceSync(styles$u);
|
|
3292
3207
|
class Section extends HTMLElement {
|
|
3293
3208
|
constructor() {
|
|
3294
3209
|
super();
|
|
3295
3210
|
this.template = () => `
|
|
3296
3211
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
3297
|
-
<div class="content-wrapper">
|
|
3212
|
+
<div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
|
|
3298
3213
|
<px-vstack gap="heading-to-content">
|
|
3299
3214
|
<slot name="heading"></slot>
|
|
3300
3215
|
<px-vstack gap="after-element-none">
|
|
@@ -3303,10 +3218,13 @@ class Section extends HTMLElement {
|
|
|
3303
3218
|
</px-vstack>
|
|
3304
3219
|
</div>
|
|
3305
3220
|
</px-container>
|
|
3221
|
+
<div class="content-wrapper">
|
|
3222
|
+
<slot name="overlap"></slot>
|
|
3223
|
+
</div>
|
|
3306
3224
|
`;
|
|
3307
3225
|
this.attachShadow({ mode: "open" });
|
|
3308
3226
|
this.shadowRoot.innerHTML = this.template();
|
|
3309
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3227
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$p];
|
|
3310
3228
|
}
|
|
3311
3229
|
connectedCallback() {
|
|
3312
3230
|
const headingSlot = this.querySelector('[slot="heading"]');
|
|
@@ -3430,6 +3348,9 @@ class Section extends HTMLElement {
|
|
|
3430
3348
|
}
|
|
3431
3349
|
}
|
|
3432
3350
|
}
|
|
3351
|
+
get $slotOverlap() {
|
|
3352
|
+
return this.querySelector('[slot="overlap"]');
|
|
3353
|
+
}
|
|
3433
3354
|
get backgroundColor() {
|
|
3434
3355
|
return this.getAttribute("background-color") || "none";
|
|
3435
3356
|
}
|
|
@@ -3643,13 +3564,13 @@ _Accordion.nativeName = "details";
|
|
|
3643
3564
|
let Accordion = _Accordion;
|
|
3644
3565
|
customElements.define("px-accordion", Accordion);
|
|
3645
3566
|
const imgCss = ':host{display:inline-block;line-height:0}picture{display:inline-block}img{display:inline-block;border-style:none;width:var(--img-width--mobile, auto);max-width:100%}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}:host([disabled]) img{filter:opacity(.2) grayscale(100%)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-top--mobile,.no-border-radius-top--mobile img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile,.no-border-radius-right--mobile img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile,.no-border-radius-bottom--mobile img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile,.no-border-radius-left--mobile img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile,.no-border-radius-all--mobile img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){img{width:var(--img-width--tablet, auto)}:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-top--tablet,.no-border-radius-top--tablet img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet,.no-border-radius-right--tablet img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet,.no-border-radius-bottom--tablet img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet,.no-border-radius-left--tablet img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet,.no-border-radius-all--tablet img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){img{width:var(--img-width--laptop, auto)}:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-top--laptop,.no-border-radius-top--laptop img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop,.no-border-radius-right--laptop img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop,.no-border-radius-bottom--laptop img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop,.no-border-radius-left--laptop img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop,.no-border-radius-all--laptop img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1441px){img{width:var(--img-width--desktop, auto)}}';
|
|
3646
|
-
const styleSheet$
|
|
3647
|
-
styleSheet$
|
|
3567
|
+
const styleSheet$o = new CSSStyleSheet();
|
|
3568
|
+
styleSheet$o.replaceSync(imgCss);
|
|
3648
3569
|
const breakpointsValues = ["", "mobile", "tablet", "laptop"];
|
|
3649
3570
|
const imageWidthValues = ["", "default", "s", "m", "l"];
|
|
3650
3571
|
class AbstractImage extends PxElement {
|
|
3651
3572
|
constructor() {
|
|
3652
|
-
super(styleSheet$
|
|
3573
|
+
super(styleSheet$o);
|
|
3653
3574
|
}
|
|
3654
3575
|
static get observedAttributes() {
|
|
3655
3576
|
return [
|
|
@@ -4028,8 +3949,8 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
4028
3949
|
_Picture.nativeName = "picture";
|
|
4029
3950
|
let Picture = _Picture;
|
|
4030
3951
|
customElements.define("px-picture", Picture);
|
|
4031
|
-
const styleSheet$
|
|
4032
|
-
styleSheet$
|
|
3952
|
+
const styleSheet$n = new CSSStyleSheet();
|
|
3953
|
+
styleSheet$n.replaceSync(styles$x);
|
|
4033
3954
|
const patchVariantValues = [
|
|
4034
3955
|
"",
|
|
4035
3956
|
"default",
|
|
@@ -4051,7 +3972,7 @@ class Patch extends HTMLElement {
|
|
|
4051
3972
|
super();
|
|
4052
3973
|
this.attachShadow({ mode: "open" });
|
|
4053
3974
|
this.shadowRoot.innerHTML = this.template();
|
|
4054
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3975
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$n];
|
|
4055
3976
|
}
|
|
4056
3977
|
static get observedAttributes() {
|
|
4057
3978
|
return ["variant", "shape", "inverted"];
|
|
@@ -4116,9 +4037,9 @@ class Patch extends HTMLElement {
|
|
|
4116
4037
|
if (!customElements.get("px-patch")) {
|
|
4117
4038
|
customElements.define("px-patch", Patch);
|
|
4118
4039
|
}
|
|
4119
|
-
const css$1 = '.price{--price-s: var(--px-text-size-heading-l-mobile);--price-m: var(--px-text-size-heading-xl-mobile);--price-l: var(--px-text-size-heading-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-text-color-heading-brand-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-heading-l-tablet);--price-m: var(--px-text-size-heading-xl-tablet);--price-l: var(--px-text-size-heading-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-heading-l-desktop);--price-m: var(--px-text-size-heading-xl-desktop);--price-l: var(--px-text-size-heading-3xl-desktop)}}.purpose-promo,.free{color:var(--px-text-color-purpose-promo-default)}.neutral{color:var(--px-text-color-heading-neutral-default)}.exceeding{color:var(--px-text-color-purpose-error-default)}.disabled{color:var(--px-text-color-action-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-text-color-heading-neutral-default);font-size:var(--px-text-size-label-m-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-label-m-desktop)}}::slotted([slot="newpurpose-promoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .purpose-promo,:host([inverted]) .free{color:var(--px-text-color-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(
|
|
4120
|
-
const styles$
|
|
4121
|
-
styles$
|
|
4040
|
+
const css$1 = '.price{--price-s: var(--px-text-size-heading-l-mobile);--price-m: var(--px-text-size-heading-xl-mobile);--price-l: var(--px-text-size-heading-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-text-color-heading-brand-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-heading-l-tablet);--price-m: var(--px-text-size-heading-xl-tablet);--price-l: var(--px-text-size-heading-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-heading-l-desktop);--price-m: var(--px-text-size-heading-xl-desktop);--price-l: var(--px-text-size-heading-3xl-desktop)}}.purpose-promo,.free{color:var(--px-text-color-purpose-promo-default)}.neutral{color:var(--px-text-color-heading-neutral-default)}.exceeding{color:var(--px-text-color-purpose-error-default)}.disabled{color:var(--px-text-color-action-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-text-color-heading-neutral-default);font-size:var(--px-text-size-label-m-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-label-m-desktop)}}::slotted([slot="newpurpose-promoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .purpose-promo,:host([inverted]) .free{color:var(--px-text-color-purpose-promo-inverted)}:host([inverted]) .neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .exceeding{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted([slot="oldprice"]){color:var(--px-text-color-heading-neutral-inverted)}.price:not(.purpose-promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
|
|
4041
|
+
const styles$t = new CSSStyleSheet();
|
|
4042
|
+
styles$t.replaceSync(css$1);
|
|
4122
4043
|
const priceVariantValues = [
|
|
4123
4044
|
"default",
|
|
4124
4045
|
"purpose-promo",
|
|
@@ -4130,7 +4051,7 @@ const priceVariantValues = [
|
|
|
4130
4051
|
const priceSizeValues = ["", "s", "m", "l"];
|
|
4131
4052
|
const _Price = class _Price extends PxElement {
|
|
4132
4053
|
constructor() {
|
|
4133
|
-
super(styles$
|
|
4054
|
+
super(styles$t);
|
|
4134
4055
|
this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpurpose-promoprice"></slot><slot></slot></span>`;
|
|
4135
4056
|
this.shadowRoot.innerHTML = this.template();
|
|
4136
4057
|
}
|
|
@@ -4236,11 +4157,11 @@ _Price.nativeName = "span";
|
|
|
4236
4157
|
let Price = _Price;
|
|
4237
4158
|
customElements.define("px-price", Price);
|
|
4238
4159
|
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);white-space:nowrap;text-align:left;color:var(--px-text-color-heading-brand-inverted);background-color:var(--px-background-color-container-neutral-rich-default);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-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}}@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)}}";
|
|
4239
|
-
const styles$
|
|
4240
|
-
styles$
|
|
4160
|
+
const styles$s = new CSSStyleSheet();
|
|
4161
|
+
styles$s.replaceSync(css);
|
|
4241
4162
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
4242
4163
|
constructor() {
|
|
4243
|
-
super(styles$
|
|
4164
|
+
super(styles$s);
|
|
4244
4165
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
4245
4166
|
this.shadowRoot.innerHTML = this.template();
|
|
4246
4167
|
}
|
|
@@ -4248,9 +4169,9 @@ const _Ribbon = class _Ribbon extends PxElement {
|
|
|
4248
4169
|
_Ribbon.nativeName = "div";
|
|
4249
4170
|
let Ribbon = _Ribbon;
|
|
4250
4171
|
customElements.define("px-ribbon", Ribbon);
|
|
4251
|
-
const styles$
|
|
4252
|
-
const styleSheet$
|
|
4253
|
-
styleSheet$
|
|
4172
|
+
const styles$r = ".separator{--separator-size: var(--px-border-size-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-border-color-container-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-border-color-container-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
|
+
const styleSheet$m = new CSSStyleSheet();
|
|
4174
|
+
styleSheet$m.replaceSync(styles$r);
|
|
4254
4175
|
const separatorDirectionValues = [
|
|
4255
4176
|
"",
|
|
4256
4177
|
"default",
|
|
@@ -4274,7 +4195,7 @@ const separatorColorValues = [
|
|
|
4274
4195
|
];
|
|
4275
4196
|
const _Separator = class _Separator extends PxElement {
|
|
4276
4197
|
constructor() {
|
|
4277
|
-
super(styleSheet$
|
|
4198
|
+
super(styleSheet$m);
|
|
4278
4199
|
const $root = document.createElement(this.nativeName);
|
|
4279
4200
|
$root.classList.add("separator");
|
|
4280
4201
|
this.shadowRoot.appendChild($root);
|
|
@@ -4444,11 +4365,11 @@ const _Separator = class _Separator extends PxElement {
|
|
|
4444
4365
|
_Separator.nativeName = "hr";
|
|
4445
4366
|
let Separator = _Separator;
|
|
4446
4367
|
customElements.define("px-separator", Separator);
|
|
4447
|
-
const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-action-size-l);height:var(--px-action-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-background-color-action-primary-default);color:var(--px-icon-color-action-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-border-size-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-background-color-action-hover-bordered-default);color:var(--px-icon-color-action-brand-default);border-color:var(--px-border-color-action-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-active-inverted);color:var(--px-icon-color-action-active-default);border-color:var(--px-border-color-action-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-border-color-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-action-size-m);height:var(--px-action-size-m)}.btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-default);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon{background:var(--px-background-color-action-primary-inverted);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-default);color:var(--px-icon-color-action-active-inverted);border-color:var(--px-border-color-action-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-icon-color-action-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-tablet)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn-icon--size-small{padding:var(--px-padding-2xs-tablet)}}@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)}}";
|
|
4368
|
+
const buttonIconCss = ".btn-icon{display:inline-flex;width:var(--px-action-size-l);height:var(--px-action-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-background-color-action-primary-default);color:var(--px-icon-color-action-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-border-size-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-background-color-action-hover-bordered-default);color:var(--px-icon-color-action-brand-default);border-color:var(--px-border-color-action-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-active-inverted);color:var(--px-icon-color-action-active-default);border-color:var(--px-border-color-action-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-border-color-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-action-size-m);height:var(--px-action-size-m)}.btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-default);color:var(--px-icon-color-action-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon{background:var(--px-background-color-action-primary-inverted);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-default);color:var(--px-icon-color-action-active-inverted);border-color:var(--px-border-color-action-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-icon-color-action-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-tablet)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn-icon--size-small{padding:var(--px-padding-2xs-tablet)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}";
|
|
4448
4369
|
const buttonIconStyles = new CSSStyleSheet();
|
|
4449
4370
|
buttonIconStyles.replaceSync(buttonIconCss);
|
|
4450
4371
|
const buttonIconSizeValues = ["", "default", "small"];
|
|
4451
|
-
const buttonIconVariantValues = ["", "default", "secondary"];
|
|
4372
|
+
const buttonIconVariantValues = ["", "default", "secondary", "naked"];
|
|
4452
4373
|
const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
4453
4374
|
constructor() {
|
|
4454
4375
|
super(buttonIconStyles);
|
|
@@ -4574,8 +4495,8 @@ let ButtonIcon = _ButtonIcon;
|
|
|
4574
4495
|
if (!customElements.get("px-button-icon")) {
|
|
4575
4496
|
customElements.define("px-button-icon", ButtonIcon);
|
|
4576
4497
|
}
|
|
4577
|
-
const styleSheet$
|
|
4578
|
-
styleSheet$
|
|
4498
|
+
const styleSheet$l = new CSSStyleSheet();
|
|
4499
|
+
styleSheet$l.replaceSync(styles$w);
|
|
4579
4500
|
const _Tag = class _Tag extends PxElement {
|
|
4580
4501
|
template() {
|
|
4581
4502
|
return `
|
|
@@ -4587,9 +4508,9 @@ const _Tag = class _Tag extends PxElement {
|
|
|
4587
4508
|
`;
|
|
4588
4509
|
}
|
|
4589
4510
|
constructor() {
|
|
4590
|
-
super(styleSheet$
|
|
4511
|
+
super(styleSheet$l);
|
|
4591
4512
|
this.shadowRoot.innerHTML = this.template();
|
|
4592
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4513
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$l];
|
|
4593
4514
|
}
|
|
4594
4515
|
connectedCallback() {
|
|
4595
4516
|
super.connectedCallback();
|
|
@@ -4650,9 +4571,9 @@ let Tag = _Tag;
|
|
|
4650
4571
|
if (!customElements.get("px-tag")) {
|
|
4651
4572
|
customElements.define("px-tag", Tag);
|
|
4652
4573
|
}
|
|
4653
|
-
const styles$
|
|
4654
|
-
const styleSheet$
|
|
4655
|
-
styleSheet$
|
|
4574
|
+
const styles$q = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-after-element-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-background-color-action-neutral-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""]){background-color:var(--px-background-color-action-active-inverted)}:host([inverted]) #tablist ::slotted(px-tab[selected=""])>button{color:var(--px-text-color-heading-brand-default)}:host([inverted]) button[role=tab]{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button[aria-selected=""]{color:var(--px-text-color-heading-brand-default)}@media only screen and (min-width: 768px){#container{gap:var(--px-spacing-after-element-default-tablet)}}@media only screen and (min-width: 1025px){#container{gap:var(--px-spacing-after-element-default-desktop)}}';
|
|
4575
|
+
const styleSheet$k = new CSSStyleSheet();
|
|
4576
|
+
styleSheet$k.replaceSync(styles$q);
|
|
4656
4577
|
class Tabs extends HTMLElement {
|
|
4657
4578
|
constructor() {
|
|
4658
4579
|
var _a;
|
|
@@ -4682,7 +4603,7 @@ class Tabs extends HTMLElement {
|
|
|
4682
4603
|
this._label = this.getAttribute("label");
|
|
4683
4604
|
}
|
|
4684
4605
|
this.shadowRoot.innerHTML = this.template();
|
|
4685
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4606
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$k];
|
|
4686
4607
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4687
4608
|
if (this.internals) {
|
|
4688
4609
|
this.internals.role = "tablist";
|
|
@@ -4854,9 +4775,9 @@ class Tabs extends HTMLElement {
|
|
|
4854
4775
|
return this.getAttribute("aria-label-previous");
|
|
4855
4776
|
}
|
|
4856
4777
|
}
|
|
4857
|
-
const styles$
|
|
4858
|
-
const styleSheet$
|
|
4859
|
-
styleSheet$
|
|
4778
|
+
const styles$p = "*{font-family:var(--px-font-family)}:host{background-color:var(--px-background-color-action-neutral-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-background-color-action-active-default);border-radius:var(--px-radius-main)!important}:host([selected])>button{cursor:auto;padding-block:var(--px-padding-m-mobile);color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) button{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted][selected]) button{color:var(--px-text-color-heading-brand-default)}button{background:none;border:none;margin:0;padding:var(--px-padding-s-mobile);cursor:pointer;height:inherit;width:inherit;font-size:var(--px-text-size-label-l-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-text-color-heading-neutral-default);outline:none}@media only screen and (min-width: 768px){button{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet)}:host[selected]>button{padding-block:var(--px-padding-m-tablet)}}@media 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
|
+
const styleSheet$j = new CSSStyleSheet();
|
|
4780
|
+
styleSheet$j.replaceSync(styles$p);
|
|
4860
4781
|
class Tab extends HTMLElement {
|
|
4861
4782
|
constructor() {
|
|
4862
4783
|
var _a;
|
|
@@ -4868,7 +4789,7 @@ class Tab extends HTMLElement {
|
|
|
4868
4789
|
`;
|
|
4869
4790
|
this.attachShadow({ mode: "open" });
|
|
4870
4791
|
this.shadowRoot.innerHTML = this.template();
|
|
4871
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4792
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$j];
|
|
4872
4793
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4873
4794
|
if (this.internals) {
|
|
4874
4795
|
this.internals.role = "tab";
|
|
@@ -4955,7 +4876,7 @@ class TabPanel extends HTMLElement {
|
|
|
4955
4876
|
`;
|
|
4956
4877
|
this.attachShadow({ mode: "open" });
|
|
4957
4878
|
this.shadowRoot.innerHTML = this.template();
|
|
4958
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4879
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$k];
|
|
4959
4880
|
}
|
|
4960
4881
|
static get observedAttributes() {
|
|
4961
4882
|
return ["name"];
|
|
@@ -5034,9 +4955,9 @@ class PxTabPanel extends TabPanel {
|
|
|
5034
4955
|
if (!customElements.get("px-tab-panel")) {
|
|
5035
4956
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
5036
4957
|
}
|
|
5037
|
-
const styles$
|
|
5038
|
-
const styleSheet$
|
|
5039
|
-
styleSheet$
|
|
4958
|
+
const styles$o = ".timeline{list-style:none;margin:0;padding:0}";
|
|
4959
|
+
const styleSheet$i = new CSSStyleSheet();
|
|
4960
|
+
styleSheet$i.replaceSync(styles$o);
|
|
5040
4961
|
class Timeline extends HTMLElement {
|
|
5041
4962
|
template() {
|
|
5042
4963
|
return `
|
|
@@ -5049,7 +4970,7 @@ class Timeline extends HTMLElement {
|
|
|
5049
4970
|
super();
|
|
5050
4971
|
this.attachShadow({ mode: "open" });
|
|
5051
4972
|
this.shadowRoot.innerHTML = this.template();
|
|
5052
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
4973
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$i];
|
|
5053
4974
|
}
|
|
5054
4975
|
static get observedAttributes() {
|
|
5055
4976
|
return ["inverted"];
|
|
@@ -5093,9 +5014,9 @@ class Timeline extends HTMLElement {
|
|
|
5093
5014
|
if (!customElements.get("px-timeline")) {
|
|
5094
5015
|
customElements.define("px-timeline", Timeline);
|
|
5095
5016
|
}
|
|
5096
|
-
const styles$
|
|
5097
|
-
const styleSheet$
|
|
5098
|
-
styleSheet$
|
|
5017
|
+
const styles$n = '.timeline-item{display:flex;gap:var(--px-spacing-after-element-default-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-size-m);height:calc(100% - 26px);background:var(--px-border-color-container-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-label-m-mobile);color:var(--px-text-color-heading-neutral-default);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-neutral-default)}.content-area{margin-bottom:var(--px-spacing-after-element-default-mobile)}.content-area ::slotted([slot="title"]){font-weight:700;font-size:var(--px-text-size-label-l-mobile);color:var(--px-text-color-heading-neutral-default)}.content-area ::slotted([slot="content"]){font-weight:400;font-size:var(--px-text-size-body-m-mobile);color:var(--px-text-color-body-neutral-weak-default);margin-top:var(--px-spacing-after-element-xs-mobile)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-border-color-container-main-inverted)}:host([inverted]) .indicator{color:var(--px-text-color-heading-neutral-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-text-color-body-neutral-weak-inverted)}@media only screen and (min-width: 768px){.timeline-item{gap:var(--px-spacing-after-element-default-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-tablet)}.content-area{margin-bottom:var(--px-spacing-after-element-default-tablet)}.content-area ::slotted([slot="title"]){font-size:var(--px-text-size-label-l-tablet)}.content-area ::slotted([slot="content"]){font-size:var(--px-text-size-body-m-tablet);margin-top:var(--px-spacing-after-element-xs-tablet)}}@media only screen and (min-width: 1025px){.timeline-item{gap:var(--px-spacing-after-element-default-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-label-m-desktop)}.content-area{margin-bottom:var(--px-spacing-after-element-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-after-element-xs-desktop)}}';
|
|
5018
|
+
const styleSheet$h = new CSSStyleSheet();
|
|
5019
|
+
styleSheet$h.replaceSync(styles$n);
|
|
5099
5020
|
let item = "1";
|
|
5100
5021
|
class TimelineItem extends HTMLElement {
|
|
5101
5022
|
template() {
|
|
@@ -5115,7 +5036,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5115
5036
|
super();
|
|
5116
5037
|
this.attachShadow({ mode: "open" });
|
|
5117
5038
|
this.shadowRoot.innerHTML = this.template();
|
|
5118
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5039
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$h];
|
|
5119
5040
|
}
|
|
5120
5041
|
static get observedAttributes() {
|
|
5121
5042
|
return ["inverted", "lastchild", "item"];
|
|
@@ -5167,7 +5088,7 @@ class TimelineItem extends HTMLElement {
|
|
|
5167
5088
|
if (!customElements.get("px-timeline-item")) {
|
|
5168
5089
|
customElements.define("px-timeline-item", TimelineItem);
|
|
5169
5090
|
}
|
|
5170
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-text-color-body-neutral-strong-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-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-text-color-body-neutral-strong-inverted)}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}}";
|
|
5091
|
+
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-text-color-body-neutral-strong-default);font-size:var(--px-text-size-body-m-mobile);font-weight:400;line-height:var(--px-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-text-color-body-neutral-strong-inverted)}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}}";
|
|
5171
5092
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
5172
5093
|
const typographyStyles$4 = new CSSStyleSheet();
|
|
5173
5094
|
const headingStyles$1 = new CSSStyleSheet();
|
|
@@ -5176,7 +5097,7 @@ typographyStyles$4.replaceSync(typographyCss$1);
|
|
|
5176
5097
|
headingStyles$1.replaceSync(headingCss);
|
|
5177
5098
|
const _Paragraph = class _Paragraph extends PxElement {
|
|
5178
5099
|
constructor() {
|
|
5179
|
-
super(
|
|
5100
|
+
super(typographyStyles$4, headingStyles$1, paragraphStyles$1);
|
|
5180
5101
|
this.template = () => `<p><slot></slot></p>`;
|
|
5181
5102
|
this.shadowRoot.innerHTML = this.template();
|
|
5182
5103
|
}
|
|
@@ -5294,9 +5215,9 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
5294
5215
|
_Paragraph.nativeName = "p";
|
|
5295
5216
|
let Paragraph = _Paragraph;
|
|
5296
5217
|
customElements.define("px-p", Paragraph);
|
|
5297
|
-
const styles$
|
|
5298
|
-
const styleSheet$
|
|
5299
|
-
styleSheet$
|
|
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-background-color-container-weak-default)}#container.success{border-left:5px var(--px-icon-color-purpose-success-default) solid}#container.warning{border-left:5px var(--px-icon-color-purpose-warning-default) solid}#container.error{border-left:5px var(--px-icon-color-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-laptop)}@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
|
+
const styleSheet$g = new CSSStyleSheet();
|
|
5220
|
+
styleSheet$g.replaceSync(styles$m);
|
|
5300
5221
|
const CLOSE_EVENT = "px.lavender.modal.close";
|
|
5301
5222
|
class Modal extends HTMLElement {
|
|
5302
5223
|
constructor() {
|
|
@@ -5337,7 +5258,7 @@ class Modal extends HTMLElement {
|
|
|
5337
5258
|
</dialog>`;
|
|
5338
5259
|
this.attachShadow({ mode: "open" });
|
|
5339
5260
|
this.shadowRoot.innerHTML = this.template;
|
|
5340
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5261
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$g];
|
|
5341
5262
|
}
|
|
5342
5263
|
connectedCallback() {
|
|
5343
5264
|
if (this.hasAttribute("open")) {
|
|
@@ -5565,7 +5486,8 @@ const linkVariantValues = [
|
|
|
5565
5486
|
"skip-link",
|
|
5566
5487
|
"btn-default",
|
|
5567
5488
|
"btn-secondary",
|
|
5568
|
-
"btn-tertiary"
|
|
5489
|
+
"btn-tertiary",
|
|
5490
|
+
"icon-link"
|
|
5569
5491
|
];
|
|
5570
5492
|
const linkShapeValues = ["", "default", "alternative"];
|
|
5571
5493
|
const _Link = class _Link extends PxElement {
|
|
@@ -5591,23 +5513,11 @@ const _Link = class _Link extends PxElement {
|
|
|
5591
5513
|
}
|
|
5592
5514
|
connectedCallback() {
|
|
5593
5515
|
super.connectedCallback();
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
if (icon) {
|
|
5600
|
-
icon.addEventListener("click", () => {
|
|
5601
|
-
this.$el.focus();
|
|
5602
|
-
});
|
|
5603
|
-
if (!iconSize) {
|
|
5604
|
-
icon.setAttribute("size", "2xs");
|
|
5605
|
-
}
|
|
5606
|
-
if (!iconColor) {
|
|
5607
|
-
icon.setAttribute("color", "inherit");
|
|
5608
|
-
}
|
|
5609
|
-
}
|
|
5610
|
-
});
|
|
5516
|
+
if (this.$before && this.$before.localName === "px-icon") {
|
|
5517
|
+
this.configureBeforeAfterIcon(this.$before);
|
|
5518
|
+
}
|
|
5519
|
+
if (this.$after && this.$after.localName === "px-icon") {
|
|
5520
|
+
this.configureBeforeAfterIcon(this.$after);
|
|
5611
5521
|
}
|
|
5612
5522
|
}
|
|
5613
5523
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -5643,6 +5553,19 @@ const _Link = class _Link extends PxElement {
|
|
|
5643
5553
|
}
|
|
5644
5554
|
}
|
|
5645
5555
|
}
|
|
5556
|
+
configureBeforeAfterIcon(icon) {
|
|
5557
|
+
const iconSize = icon.getAttribute("size");
|
|
5558
|
+
const iconColor = icon.getAttribute("color");
|
|
5559
|
+
icon.addEventListener("click", () => {
|
|
5560
|
+
this.$el.focus();
|
|
5561
|
+
});
|
|
5562
|
+
if (!iconSize) {
|
|
5563
|
+
icon.setAttribute("size", "2xs");
|
|
5564
|
+
}
|
|
5565
|
+
if (!iconColor) {
|
|
5566
|
+
icon.setAttribute("color", "inherit");
|
|
5567
|
+
}
|
|
5568
|
+
}
|
|
5646
5569
|
checkName(values, value) {
|
|
5647
5570
|
return values.includes(value);
|
|
5648
5571
|
}
|
|
@@ -5666,6 +5589,9 @@ const _Link = class _Link extends PxElement {
|
|
|
5666
5589
|
if (!this.checkName(linkVariantValues, newValue)) {
|
|
5667
5590
|
console.error(`Bad "variant" value for ${this.$el}`);
|
|
5668
5591
|
}
|
|
5592
|
+
if (newValue === "icon-link") {
|
|
5593
|
+
this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
5594
|
+
}
|
|
5669
5595
|
}
|
|
5670
5596
|
updateShape(oldValue, newValue) {
|
|
5671
5597
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -5689,6 +5615,17 @@ const _Link = class _Link extends PxElement {
|
|
|
5689
5615
|
console.error(`Bad ${attrName} value for ${this.$el}`);
|
|
5690
5616
|
}
|
|
5691
5617
|
}
|
|
5618
|
+
get $before() {
|
|
5619
|
+
return this.querySelector('[slot="before"]');
|
|
5620
|
+
}
|
|
5621
|
+
get $after() {
|
|
5622
|
+
return this.querySelector('[slot="after"]');
|
|
5623
|
+
}
|
|
5624
|
+
get $iconNotBeforeAfter() {
|
|
5625
|
+
return this.querySelector(
|
|
5626
|
+
'px-icon:not([slot="before"], [slot="after"])'
|
|
5627
|
+
);
|
|
5628
|
+
}
|
|
5692
5629
|
get disabled() {
|
|
5693
5630
|
return this.getAttribute("disabled");
|
|
5694
5631
|
}
|
|
@@ -5743,7 +5680,7 @@ let Link = _Link;
|
|
|
5743
5680
|
if (!customElements.get("px-a")) {
|
|
5744
5681
|
customElements.define("px-a", Link);
|
|
5745
5682
|
}
|
|
5746
|
-
const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-inside-section-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-text-color-body-neutral-strong-inverted)}";
|
|
5683
|
+
const typographyCss = "*{font-family:var(--px-font-family);font-weight:400}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-inside-section-default-desktop);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-text-color-body-neutral-strong-inverted)}";
|
|
5747
5684
|
const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
|
|
5748
5685
|
const typographyStyles$1 = new CSSStyleSheet();
|
|
5749
5686
|
const headingStyles = new CSSStyleSheet();
|
|
@@ -5926,10 +5863,10 @@ let Entrypoint = _Entrypoint;
|
|
|
5926
5863
|
if (!customElements.get("px-entrypoint")) {
|
|
5927
5864
|
customElements.define("px-entrypoint", Entrypoint);
|
|
5928
5865
|
}
|
|
5929
|
-
const styles$
|
|
5930
|
-
const styleSheet$
|
|
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)}}";
|
|
5867
|
+
const styleSheet$f = new CSSStyleSheet();
|
|
5931
5868
|
const typographyStyles = new CSSStyleSheet();
|
|
5932
|
-
styleSheet$
|
|
5869
|
+
styleSheet$f.replaceSync(styles$l);
|
|
5933
5870
|
typographyStyles.replaceSync(typographyCss$1);
|
|
5934
5871
|
class Spinner extends HTMLElement {
|
|
5935
5872
|
template() {
|
|
@@ -5945,7 +5882,7 @@ class Spinner extends HTMLElement {
|
|
|
5945
5882
|
this.attachShadow({ mode: "open" });
|
|
5946
5883
|
this.shadowRoot.innerHTML = this.template();
|
|
5947
5884
|
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
5948
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
5885
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$f, typographyStyles];
|
|
5949
5886
|
}
|
|
5950
5887
|
static get observedAttributes() {
|
|
5951
5888
|
return ["size", "inverted", "timeout", "aria-label"];
|
|
@@ -6012,6 +5949,11 @@ class Spinner extends HTMLElement {
|
|
|
6012
5949
|
}
|
|
6013
5950
|
customElements.define("px-spinner", Spinner);
|
|
6014
5951
|
const cellVariantValues = ["", "default", "naked", "contained"];
|
|
5952
|
+
const cellBackgroundColorValues = [
|
|
5953
|
+
"",
|
|
5954
|
+
"action-neutral-bare",
|
|
5955
|
+
"action-neutral"
|
|
5956
|
+
];
|
|
6015
5957
|
function configurePrefixIcon$1(el) {
|
|
6016
5958
|
const prefixIconHasSize = el.hasAttribute("size");
|
|
6017
5959
|
if (!prefixIconHasSize) {
|
|
@@ -6052,6 +5994,11 @@ function configurePrefixImg$1(el) {
|
|
|
6052
5994
|
}
|
|
6053
5995
|
el.setAttribute("border-radius", "pill");
|
|
6054
5996
|
}
|
|
5997
|
+
function configureCellBackgroundColor(el) {
|
|
5998
|
+
if (el.getAttribute("variant") === "contained" && !el.getAttribute("backgroundColor")) {
|
|
5999
|
+
el.setAttribute("backgroundColor", "action-neutral-bare");
|
|
6000
|
+
}
|
|
6001
|
+
}
|
|
6055
6002
|
function updateVariant(element, oldValue, newValue) {
|
|
6056
6003
|
if (!checkName(cellVariantValues, newValue)) {
|
|
6057
6004
|
console.error(
|
|
@@ -6085,6 +6032,26 @@ function handleCellInverted(cell, children, inverted, extraTargets = []) {
|
|
|
6085
6032
|
});
|
|
6086
6033
|
}
|
|
6087
6034
|
}
|
|
6035
|
+
function updateBackgroundColor(el, attrName, oldValue, newValue, attrValue) {
|
|
6036
|
+
if (!checkName(attrValue, newValue)) {
|
|
6037
|
+
console.error(`${newValue} is not an allowed ${attrName} value for`, el);
|
|
6038
|
+
return;
|
|
6039
|
+
}
|
|
6040
|
+
const updateColorStyle = (value) => {
|
|
6041
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
6042
|
+
el.style.setProperty(
|
|
6043
|
+
`--cell-contained-background-color-default`,
|
|
6044
|
+
`var(--px-background-color-${value}-default)`
|
|
6045
|
+
);
|
|
6046
|
+
el.style.setProperty(
|
|
6047
|
+
`--cell-contained-background-color-inverted`,
|
|
6048
|
+
`var(--px-background-color-${value}-inverted)`
|
|
6049
|
+
);
|
|
6050
|
+
}
|
|
6051
|
+
};
|
|
6052
|
+
updateColorStyle(oldValue);
|
|
6053
|
+
updateColorStyle(newValue);
|
|
6054
|
+
}
|
|
6088
6055
|
function handleCellDisabled(cell, children, disabled, extraTargets = [], options = {}) {
|
|
6089
6056
|
if (disabled) {
|
|
6090
6057
|
cell.setAttribute("disabled", "");
|
|
@@ -6117,11 +6084,11 @@ function handleCellDisabled(cell, children, disabled, extraTargets = [], options
|
|
|
6117
6084
|
}
|
|
6118
6085
|
}
|
|
6119
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-color-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-border-color-focus-outline-inverted)}";
|
|
6120
|
-
const styles$
|
|
6087
|
+
const styles$k = ':host([separator]):after{position:relative;content:"";display:var(--cell-separator--mobile, "none");width:100%;border-bottom:var(--px-border-size-m) solid var(--px-border-color-container-main-default)}.cell{font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:700;color:var(--px-text-color-heading-neutral-default);padding:var(--px-padding-s-mobile)}.cell ::slotted([slot="description"]){font-weight:400;font-size:var(--px-text-size-label-m-mobile)}.cell ::slotted([slot="suffix"]){text-align:right}:host([hoverable]:not([disabled])) .cell{cursor:pointer;text-decoration:none}:host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-background-color-action-hover-default)}:host([hoverable][disabled]) .cell{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}.contained{background-color:var( --cell-contained-background-color-default, var(--px-background-color-action-neutral-bare-default) );border-top-right-radius:var( --cell-contained-border-radius-top-right--mobile, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--mobile, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--mobile, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--mobile, var(--px-radius-main) )}:host([hoverable]) .contained{border:var(--px-border-size-m) solid transparent}:host([hoverable]:hover:not([disabled])) .contained{background-color:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default)}:host([hoverable][disabled]) .contained{background-color:var(--px-background-color-action-disabled-default)}@media only screen and (min-width: 768px){:host{display:block}:host:after{display:var(--cell-separator--tablet, "none")}.cell{font-size:var(--px-text-size-label-l-tablet);padding:var(--px-padding-s-tablet)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.contained{border-top-right-radius:var( --cell-contained-border-radius-top-right--tablet, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--tablet, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--tablet, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--tablet, var(--px-radius-main) )}}@media only screen and (min-width: 1025px){:host{display:block}:host:after{display:var(--cell-separator--laptop, "none")}.cell{font-size:var(--px-text-size-label-l-desktop);padding:var(--px-padding-s-desktop)}.cell ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.contained{border-top-right-radius:var( --cell-contained-border-radius-top-right--laptop, var(--px-radius-main) );border-bottom-right-radius:var( --cell-contained-border-radius-bottom-right--laptop, var(--px-radius-main) );border-bottom-left-radius:var( --cell-contained-border-radius-bottom-left--laptop, var(--px-radius-main) );border-top-left-radius:var( --cell-contained-border-radius-top-left--laptop, var(--px-radius-main) )}}:host([inverted]):after{border-bottom-color:var(--px-border-color-container-main-inverted)}:host([inverted]) .cell{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]):host([hoverable]:hover:not([disabled])) .cell{background-color:var(--px-background-color-action-hover-inverted)}:host([inverted]):host([hoverable][disabled]) .cell{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .contained{background-color:var( --cell-contained-background-color-inverted, var(--px-background-color-action-neutral-bare-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .contained{background-color:var( --px-background-color-action-hover-bordered-inverted );border-color:var(--px-border-color-action-hover-inverted)}';
|
|
6121
6088
|
const commonStyleSheet$a = new CSSStyleSheet();
|
|
6122
|
-
const styleSheet$
|
|
6089
|
+
const styleSheet$e = new CSSStyleSheet();
|
|
6123
6090
|
commonStyleSheet$a.replaceSync(common$1);
|
|
6124
|
-
styleSheet$
|
|
6091
|
+
styleSheet$e.replaceSync(styles$k);
|
|
6125
6092
|
const suffixButtonIconVariantValues = ["secondary"];
|
|
6126
6093
|
const radiusValues = ["", "default", "top", "bottom", "none"];
|
|
6127
6094
|
const _Cell = class _Cell extends PxElement {
|
|
@@ -6146,7 +6113,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6146
6113
|
`;
|
|
6147
6114
|
}
|
|
6148
6115
|
constructor() {
|
|
6149
|
-
super(styleSheet$
|
|
6116
|
+
super(styleSheet$e, commonStyleSheet$a);
|
|
6150
6117
|
const $root = document.createElement(this.nativeName);
|
|
6151
6118
|
$root.classList.add("cell");
|
|
6152
6119
|
$root.innerHTML = this.template();
|
|
@@ -6181,6 +6148,7 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6181
6148
|
this.$suffixContainer.alignItems = "center";
|
|
6182
6149
|
}
|
|
6183
6150
|
}
|
|
6151
|
+
configureCellBackgroundColor(this);
|
|
6184
6152
|
}
|
|
6185
6153
|
static get observedAttributes() {
|
|
6186
6154
|
return [
|
|
@@ -6193,7 +6161,8 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6193
6161
|
"separator--laptop",
|
|
6194
6162
|
"radius",
|
|
6195
6163
|
"radius--tablet",
|
|
6196
|
-
"radius--laptop"
|
|
6164
|
+
"radius--laptop",
|
|
6165
|
+
"background-color"
|
|
6197
6166
|
];
|
|
6198
6167
|
}
|
|
6199
6168
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6221,6 +6190,15 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6221
6190
|
case "separator--laptop":
|
|
6222
6191
|
this.configureSeparator(attrName);
|
|
6223
6192
|
break;
|
|
6193
|
+
case "background-color":
|
|
6194
|
+
updateBackgroundColor(
|
|
6195
|
+
this.$el,
|
|
6196
|
+
attrName,
|
|
6197
|
+
oldValue,
|
|
6198
|
+
newValue,
|
|
6199
|
+
cellBackgroundColorValues
|
|
6200
|
+
);
|
|
6201
|
+
break;
|
|
6224
6202
|
default:
|
|
6225
6203
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
6226
6204
|
break;
|
|
@@ -6381,17 +6359,27 @@ const _Cell = class _Cell extends PxElement {
|
|
|
6381
6359
|
set radiusLaptop(value) {
|
|
6382
6360
|
this.setAttribute("radius--laptop", value);
|
|
6383
6361
|
}
|
|
6362
|
+
get backgroundColor() {
|
|
6363
|
+
return this.getAttribute("background-color");
|
|
6364
|
+
}
|
|
6365
|
+
set backgroundColor(value) {
|
|
6366
|
+
if (value) {
|
|
6367
|
+
this.setAttribute("background-color", value);
|
|
6368
|
+
} else {
|
|
6369
|
+
this.removeAttribute("background-color");
|
|
6370
|
+
}
|
|
6371
|
+
}
|
|
6384
6372
|
};
|
|
6385
6373
|
_Cell.nativeName = "div";
|
|
6386
6374
|
let Cell = _Cell;
|
|
6387
6375
|
if (!customElements.get("px-cell")) {
|
|
6388
6376
|
customElements.define("px-cell", Cell);
|
|
6389
6377
|
}
|
|
6390
|
-
const styles$
|
|
6378
|
+
const styles$j = ".cell-link{text-decoration:none}.cell-link px-icon{color:var(--px-icon-color-content-brand-default)}.cell-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-default)}:host([inverted]) .cell-link px-icon{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .cell-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-inverted)}";
|
|
6391
6379
|
const commonStyleSheet$9 = new CSSStyleSheet();
|
|
6392
6380
|
commonStyleSheet$9.replaceSync(common$1);
|
|
6393
|
-
const styleSheet$
|
|
6394
|
-
styleSheet$
|
|
6381
|
+
const styleSheet$d = new CSSStyleSheet();
|
|
6382
|
+
styleSheet$d.replaceSync(styles$j);
|
|
6395
6383
|
const _CellLink = class _CellLink extends PxElement {
|
|
6396
6384
|
template() {
|
|
6397
6385
|
return `
|
|
@@ -6411,7 +6399,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6411
6399
|
`;
|
|
6412
6400
|
}
|
|
6413
6401
|
constructor() {
|
|
6414
|
-
super(styleSheet$
|
|
6402
|
+
super(styleSheet$d, commonStyleSheet$9);
|
|
6415
6403
|
const $root = document.createElement(this.nativeName);
|
|
6416
6404
|
$root.classList.add("cell-link");
|
|
6417
6405
|
$root.innerHTML = this.template();
|
|
@@ -6437,6 +6425,7 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6437
6425
|
this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
|
|
6438
6426
|
);
|
|
6439
6427
|
}
|
|
6428
|
+
configureCellBackgroundColor(this);
|
|
6440
6429
|
}
|
|
6441
6430
|
static get observedAttributes() {
|
|
6442
6431
|
return [
|
|
@@ -6450,7 +6439,8 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6450
6439
|
"radius",
|
|
6451
6440
|
"radius--tablet",
|
|
6452
6441
|
"radius--laptop",
|
|
6453
|
-
"target-blank-aria-label"
|
|
6442
|
+
"target-blank-aria-label",
|
|
6443
|
+
"background-color"
|
|
6454
6444
|
];
|
|
6455
6445
|
}
|
|
6456
6446
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6487,6 +6477,15 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6487
6477
|
);
|
|
6488
6478
|
}
|
|
6489
6479
|
break;
|
|
6480
|
+
case "background-color":
|
|
6481
|
+
updateBackgroundColor(
|
|
6482
|
+
this.$el,
|
|
6483
|
+
attrName,
|
|
6484
|
+
oldValue,
|
|
6485
|
+
newValue,
|
|
6486
|
+
cellBackgroundColorValues
|
|
6487
|
+
);
|
|
6488
|
+
break;
|
|
6490
6489
|
default:
|
|
6491
6490
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
6492
6491
|
break;
|
|
@@ -6573,13 +6572,23 @@ const _CellLink = class _CellLink extends PxElement {
|
|
|
6573
6572
|
set targetBlankAriaLabel(value) {
|
|
6574
6573
|
this.setAttribute("target-blank-aria-label", value);
|
|
6575
6574
|
}
|
|
6575
|
+
get backgroundColor() {
|
|
6576
|
+
return this.getAttribute("background-color");
|
|
6577
|
+
}
|
|
6578
|
+
set backgroundColor(value) {
|
|
6579
|
+
if (value) {
|
|
6580
|
+
this.setAttribute("background-color", value);
|
|
6581
|
+
} else {
|
|
6582
|
+
this.removeAttribute("background-color");
|
|
6583
|
+
}
|
|
6584
|
+
}
|
|
6576
6585
|
};
|
|
6577
6586
|
_CellLink.nativeName = "a";
|
|
6578
6587
|
let CellLink = _CellLink;
|
|
6579
6588
|
if (!customElements.get("px-cell-link")) {
|
|
6580
6589
|
customElements.define("px-cell-link", CellLink);
|
|
6581
6590
|
}
|
|
6582
|
-
const checkboxCss = `:host{display:block}.checkbox{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-s-mobile)}.checkbox.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-m) * 1rem);font-weight:400;color:var(--px-text-color-heading-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border-radius:var(--px-radius-main);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host(:not([variant="selectable-tag"])) input:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-primary-default);border-color:var(--px-border-color-none);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E");background-position:center center;background-repeat:no-repeat}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%23000' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input):focus-visible{outline-color:var(--px-border-color-focus-outline-inverted)}:host([checked]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){border-color:var(--px-border-color-action-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white' fill-opacity='0.08'/%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))+label{color:var(--px-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-border-color-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-background-color-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17.6726 10.0557L11.1723 16.1192C10.9368 16.3298 10.6319 16.4463 10.3159 16.4463C9.99992 16.4463 9.69501 16.3298 9.45948 16.1192L6.28215 12.9418C6.08774 12.7087 5.98754 12.4113 6.00124 12.1081C6.01494 11.8048 6.14155 11.5177 6.3562 11.303C6.57084 11.0884 6.85799 10.9618 7.16123 10.9481C7.46447 10.9344 7.76187 11.0346 7.995 11.229L10.333 13.567L15.994 8.29143C16.2319 8.08824 16.5389 7.98454 16.8513 8.00187C17.1636 8.0192 17.4573 8.15625 17.6712 8.38451C17.8851 8.61277 18.0029 8.9147 17.9999 9.22753C17.997 9.54036 17.8736 9.84002 17.6555 10.0642L17.6726 10.0557Z' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)))){background-color:var(--px-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host([inverted]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-text-color-heading-neutral-inverted)}:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8558_6622)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8558_6622'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_408)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='black' fill-opacity='0.12'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_408'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='%235C2D91'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([disabled]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6817)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white' fill-opacity='0.08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6817'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6256)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6256'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}:host(:hover) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))),:host([hover]) :is(:host([state="error"]) :is(:host([inverted]) :is(:host([indeterminate][checked]) :is(:host(:not([variant="selectable-tag"])) input)))){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2' viewBox='0 0 12 2' fill='none'%3E%3Cg clip-path='url(%23clip0_8685_6804)'%3E%3Cpath d='M11 0H1C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H11C11.5523 2 12 1.55228 12 1C12 0.447715 11.5523 0 11 0Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8685_6804'%3E%3Crect width='12' height='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")}.checkbox.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:focus-visible+label{outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true],.loading)+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true],.loading)+label{color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true],.loading)+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:focus-visible+label{outline-color:var(--px-border-color-focus-outline-inverted)}@media only screen and (min-width: 768px){.checkbox{gap:var(--px-spacing-after-element-s-tablet)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.checkbox{gap:var(--px-spacing-after-element-s-desktop)}:host(:not([variant="selectable-tag"])) input:focus-visible,:host([variant="selectable-tag"]) input:focus-visible+label{outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
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)}}`;
|
|
6583
6592
|
const checkboxStyles = new CSSStyleSheet();
|
|
6584
6593
|
checkboxStyles.replaceSync(checkboxCss);
|
|
6585
6594
|
const checkboxVariantValues = ["", "default", "selectable-tag"];
|
|
@@ -6821,6 +6830,7 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6821
6830
|
if (this.hasAttribute("checked")) {
|
|
6822
6831
|
this.checked = true;
|
|
6823
6832
|
}
|
|
6833
|
+
configureCellBackgroundColor(this);
|
|
6824
6834
|
}
|
|
6825
6835
|
static get observedAttributes() {
|
|
6826
6836
|
return [
|
|
@@ -6837,7 +6847,8 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6837
6847
|
"value",
|
|
6838
6848
|
"state",
|
|
6839
6849
|
"checked",
|
|
6840
|
-
"checkbox-position"
|
|
6850
|
+
"checkbox-position",
|
|
6851
|
+
"background-color"
|
|
6841
6852
|
];
|
|
6842
6853
|
}
|
|
6843
6854
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -6884,6 +6895,15 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
6884
6895
|
case "checkbox-position":
|
|
6885
6896
|
this.handleCheckboxPositionChange(newValue);
|
|
6886
6897
|
break;
|
|
6898
|
+
case "background-color":
|
|
6899
|
+
updateBackgroundColor(
|
|
6900
|
+
this.$el,
|
|
6901
|
+
attrName,
|
|
6902
|
+
oldValue,
|
|
6903
|
+
newValue,
|
|
6904
|
+
cellBackgroundColorValues
|
|
6905
|
+
);
|
|
6906
|
+
break;
|
|
6887
6907
|
}
|
|
6888
6908
|
}
|
|
6889
6909
|
}
|
|
@@ -7107,6 +7127,16 @@ class CellCheckbox extends WithExtraAttributes {
|
|
|
7107
7127
|
this.removeAttribute("checkbox-position");
|
|
7108
7128
|
}
|
|
7109
7129
|
}
|
|
7130
|
+
get backgroundColor() {
|
|
7131
|
+
return this.getAttribute("background-color");
|
|
7132
|
+
}
|
|
7133
|
+
set backgroundColor(value) {
|
|
7134
|
+
if (value) {
|
|
7135
|
+
this.setAttribute("background-color", value);
|
|
7136
|
+
} else {
|
|
7137
|
+
this.removeAttribute("background-color");
|
|
7138
|
+
}
|
|
7139
|
+
}
|
|
7110
7140
|
}
|
|
7111
7141
|
if (!customElements.get("px-cell-checkbox")) {
|
|
7112
7142
|
customElements.define("px-cell-checkbox", CellCheckbox);
|
|
@@ -7171,6 +7201,7 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7171
7201
|
if (this.hasAttribute("checked")) {
|
|
7172
7202
|
this.checked = true;
|
|
7173
7203
|
}
|
|
7204
|
+
configureCellBackgroundColor(this);
|
|
7174
7205
|
}
|
|
7175
7206
|
static get observedAttributes() {
|
|
7176
7207
|
return [
|
|
@@ -7185,7 +7216,8 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7185
7216
|
"radius--laptop",
|
|
7186
7217
|
"name",
|
|
7187
7218
|
"value",
|
|
7188
|
-
"checked"
|
|
7219
|
+
"checked",
|
|
7220
|
+
"background-color"
|
|
7189
7221
|
];
|
|
7190
7222
|
}
|
|
7191
7223
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -7219,6 +7251,15 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7219
7251
|
case "checked":
|
|
7220
7252
|
this.handleCheckedAttributeChange(newValue);
|
|
7221
7253
|
break;
|
|
7254
|
+
case "background-color":
|
|
7255
|
+
updateBackgroundColor(
|
|
7256
|
+
this.$el,
|
|
7257
|
+
attrName,
|
|
7258
|
+
oldValue,
|
|
7259
|
+
newValue,
|
|
7260
|
+
cellBackgroundColorValues
|
|
7261
|
+
);
|
|
7262
|
+
break;
|
|
7222
7263
|
}
|
|
7223
7264
|
}
|
|
7224
7265
|
}
|
|
@@ -7419,11 +7460,21 @@ class CellSwitch extends WithExtraAttributes {
|
|
|
7419
7460
|
this.removeAttribute("value");
|
|
7420
7461
|
}
|
|
7421
7462
|
}
|
|
7463
|
+
get backgroundColor() {
|
|
7464
|
+
return this.getAttribute("background-color");
|
|
7465
|
+
}
|
|
7466
|
+
set backgroundColor(value) {
|
|
7467
|
+
if (value) {
|
|
7468
|
+
this.setAttribute("background-color", value);
|
|
7469
|
+
} else {
|
|
7470
|
+
this.removeAttribute("background-color");
|
|
7471
|
+
}
|
|
7472
|
+
}
|
|
7422
7473
|
}
|
|
7423
7474
|
if (!customElements.get("px-cell-switch")) {
|
|
7424
7475
|
customElements.define("px-cell-switch", CellSwitch);
|
|
7425
7476
|
}
|
|
7426
|
-
const radioCss = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-border-color-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-m) * 1rem);font-weight:400;color:var(--px-text-color-heading-neutral-default)}:host(:not([variant="selectable-tag"])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-primary-default);border-color:var(--px-border-color-none);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input){background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-main-default)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input)+label{color:var(--px-text-color-action-disabled-default)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input){border-color:var(--px-border-color-purpose-error-default)}:host(:hover) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)),:host([hover]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){border-color:var(--px-border-color-purpose-error-default)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input)){background-color:var(--px-background-color-purpose-error-default)}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input))){background-color:var(--px-background-color-purpose-error-default);border-color:var(--px-border-color-purpose-error-default);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-default)}:host(:not([variant="selectable-tag"])) input[inverted]{border-color:var(--px-border-color-action-neutral-inverted)}:host([checked]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E")}:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])),:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){border-color:var(--px-border-color-action-hover-inverted)}:host([checked]) :is(:host(:hover) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([checked]) :is(:host([hover]) :is(:host(:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted]){background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-main-inverted)}:host([checked]) :is(:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}:host([disabled]) :is(:host(:not([variant="selectable-tag"])) input[inverted])+label{color:var(--px-text-color-action-disabled-inverted)}:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]){border-color:var(--px-border-color-purpose-error-inverted)}:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted])){background-color:var(--px-background-color-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}:host(:hover) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))),:host([hover]) :is(:host([checked]) :is(:host([state="error"]:not([disabled])) :is(:host(:not([variant="selectable-tag"])) input[inverted]))){background-color:var(--px-background-color-purpose-error-inverted);border-color:var(--px-border-color-purpose-error-inverted);box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-purpose-error-inverted)}:host(:not([variant="selectable-tag"])) input[inverted]+label{color:var(--px-text-color-heading-neutral-inverted)}.radio.selectable-tag{gap:0}:host([variant="selectable-tag"]){display:inline-flex}:host([variant="selectable-tag"]) label{line-height:var(--px-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}:host([variant="selectable-tag"]) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}:host([variant="selectable-tag"]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}:host([variant="selectable-tag"]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]) input:checked+label,:host([variant="selectable-tag"]) input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}:host([variant="selectable-tag"]) input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:hover:not([disabled],[aria-disabled=true])+label,:host([variant="selectable-tag"]):host([inverted]) input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([variant="selectable-tag"]):host([inverted]) input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([variant="selectable-tag"]):host([inverted]) input:checked+label,:host([variant="selectable-tag"]):host([inverted]) input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([variant="selectable-tag"]):host([inverted]) input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-after-element-s-tablet)}:host(:focus-visible){outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-after-element-s-desktop)}:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`;
|
|
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)}}`;
|
|
7427
7478
|
const radioStyles = new CSSStyleSheet();
|
|
7428
7479
|
radioStyles.replaceSync(radioCss);
|
|
7429
7480
|
const _RadioBase = class _RadioBase extends PxElement {
|
|
@@ -7949,6 +8000,7 @@ class CellRadio extends WithExtraAttributes {
|
|
|
7949
8000
|
if (this.hasAttribute("checked")) {
|
|
7950
8001
|
this.checked = true;
|
|
7951
8002
|
}
|
|
8003
|
+
configureCellBackgroundColor(this);
|
|
7952
8004
|
}
|
|
7953
8005
|
static get observedAttributes() {
|
|
7954
8006
|
return [
|
|
@@ -7965,7 +8017,8 @@ class CellRadio extends WithExtraAttributes {
|
|
|
7965
8017
|
"value",
|
|
7966
8018
|
"state",
|
|
7967
8019
|
"checked",
|
|
7968
|
-
"radio-position"
|
|
8020
|
+
"radio-position",
|
|
8021
|
+
"background-color"
|
|
7969
8022
|
];
|
|
7970
8023
|
}
|
|
7971
8024
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
@@ -8012,6 +8065,15 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8012
8065
|
case "radio-position":
|
|
8013
8066
|
this.handleRadioPositionChange(newValue);
|
|
8014
8067
|
break;
|
|
8068
|
+
case "background-color":
|
|
8069
|
+
updateBackgroundColor(
|
|
8070
|
+
this.$el,
|
|
8071
|
+
attrName,
|
|
8072
|
+
oldValue,
|
|
8073
|
+
newValue,
|
|
8074
|
+
cellBackgroundColorValues
|
|
8075
|
+
);
|
|
8076
|
+
break;
|
|
8015
8077
|
}
|
|
8016
8078
|
}
|
|
8017
8079
|
}
|
|
@@ -8237,6 +8299,16 @@ class CellRadio extends WithExtraAttributes {
|
|
|
8237
8299
|
this.removeAttribute("radio-position");
|
|
8238
8300
|
}
|
|
8239
8301
|
}
|
|
8302
|
+
get backgroundColor() {
|
|
8303
|
+
return this.getAttribute("background-color");
|
|
8304
|
+
}
|
|
8305
|
+
set backgroundColor(value) {
|
|
8306
|
+
if (value) {
|
|
8307
|
+
this.setAttribute("background-color", value);
|
|
8308
|
+
} else {
|
|
8309
|
+
this.removeAttribute("background-color");
|
|
8310
|
+
}
|
|
8311
|
+
}
|
|
8240
8312
|
}
|
|
8241
8313
|
if (!customElements.get("px-cell-radio")) {
|
|
8242
8314
|
customElements.define("px-cell-radio", CellRadio);
|
|
@@ -8331,10 +8403,10 @@ function handleTileDisabled(tile, children, disabled, extraTargets = [], options
|
|
|
8331
8403
|
}
|
|
8332
8404
|
}
|
|
8333
8405
|
}
|
|
8334
|
-
const styles$
|
|
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:700;color:var(--px-text-color-action-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-background-color-action-neutral-bare-default) )}.tile ::slotted([slot="prefix"]){font-weight:400;margin-bottom:var(--px-spacing-inside-section-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-inside-section-default-mobile)}.tile ::slotted([slot="description"]){font-weight:400}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-background-color-action-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-text-color-action-disabled-default)}@media only screen and (min-width: 768px){.tile{padding:var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@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-text-color-action-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-background-color-action-neutral-bare-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-background-color-action-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-text-color-action-disabled-inverted)}';
|
|
8335
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-size-m) solid transparent;outline-color:var(--px-border-color-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-border-size-m) solid var(--px-border-color-action-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-border-color-action-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-border-color-action-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-border-color-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-border-color-action-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-tablet)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media 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-border-color-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-border-color-action-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-border-color-action-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-border-color-action-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-border-color-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-border-color-action-hover-inverted)}';
|
|
8336
|
-
const styleSheet$
|
|
8337
|
-
styleSheet$
|
|
8408
|
+
const styleSheet$c = new CSSStyleSheet();
|
|
8409
|
+
styleSheet$c.replaceSync(styles$i);
|
|
8338
8410
|
const commonStyleSheet$5 = new CSSStyleSheet();
|
|
8339
8411
|
commonStyleSheet$5.replaceSync(common);
|
|
8340
8412
|
const tileBackgroundColorValues = [
|
|
@@ -8360,7 +8432,7 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8360
8432
|
`;
|
|
8361
8433
|
}
|
|
8362
8434
|
constructor() {
|
|
8363
|
-
super(commonStyleSheet$5, styleSheet$
|
|
8435
|
+
super(commonStyleSheet$5, styleSheet$c);
|
|
8364
8436
|
const $root = document.createElement(this.nativeName);
|
|
8365
8437
|
$root.classList.add("tile");
|
|
8366
8438
|
$root.innerHTML = this.template();
|
|
@@ -8534,9 +8606,9 @@ const _Tile = class _Tile extends PxElement {
|
|
|
8534
8606
|
_Tile.nativeName = "div";
|
|
8535
8607
|
let Tile = _Tile;
|
|
8536
8608
|
customElements.define("px-tile", Tile);
|
|
8537
|
-
const styles$
|
|
8538
|
-
const styleSheet$
|
|
8539
|
-
styleSheet$
|
|
8609
|
+
const styles$h = ".tile-button{padding:0;background:none}";
|
|
8610
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
8611
|
+
styleSheet$b.replaceSync(styles$h);
|
|
8540
8612
|
const commonStyleSheet$4 = new CSSStyleSheet();
|
|
8541
8613
|
commonStyleSheet$4.replaceSync(common);
|
|
8542
8614
|
const _TileButton = class _TileButton extends PxElement {
|
|
@@ -8551,7 +8623,7 @@ const _TileButton = class _TileButton extends PxElement {
|
|
|
8551
8623
|
`;
|
|
8552
8624
|
}
|
|
8553
8625
|
constructor() {
|
|
8554
|
-
super(commonStyleSheet$4, styleSheet$
|
|
8626
|
+
super(commonStyleSheet$4, styleSheet$b);
|
|
8555
8627
|
const $root = document.createElement(this.nativeName);
|
|
8556
8628
|
$root.classList.add("tile-button");
|
|
8557
8629
|
$root.innerHTML = this.template();
|
|
@@ -9229,9 +9301,9 @@ class TileRadio extends WithExtraAttributes {
|
|
|
9229
9301
|
}
|
|
9230
9302
|
}
|
|
9231
9303
|
customElements.define("px-tile-radio", TileRadio);
|
|
9232
|
-
const styles$
|
|
9233
|
-
const styleSheet$
|
|
9234
|
-
styleSheet$
|
|
9304
|
+
const styles$g = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-icon-color-content-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-icon-color-action-disabled-inverted)}";
|
|
9305
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
9306
|
+
styleSheet$a.replaceSync(styles$g);
|
|
9235
9307
|
const commonStyleSheet$1 = new CSSStyleSheet();
|
|
9236
9308
|
commonStyleSheet$1.replaceSync(common);
|
|
9237
9309
|
const _TileLink = class _TileLink extends PxElement {
|
|
@@ -9252,7 +9324,7 @@ const _TileLink = class _TileLink extends PxElement {
|
|
|
9252
9324
|
`;
|
|
9253
9325
|
}
|
|
9254
9326
|
constructor() {
|
|
9255
|
-
super(commonStyleSheet$1, styleSheet$
|
|
9327
|
+
super(commonStyleSheet$1, styleSheet$a);
|
|
9256
9328
|
const $root = document.createElement(this.nativeName);
|
|
9257
9329
|
$root.classList.add("tile-link");
|
|
9258
9330
|
$root.innerHTML = this.template();
|
|
@@ -9653,9 +9725,9 @@ class TileSwitch extends WithExtraAttributes {
|
|
|
9653
9725
|
}
|
|
9654
9726
|
}
|
|
9655
9727
|
customElements.define("px-tile-switch", TileSwitch);
|
|
9656
|
-
const styles$
|
|
9657
|
-
const stylesheet$
|
|
9658
|
-
stylesheet$
|
|
9728
|
+
const styles$f = "#content{overflow:auto}#sticky-left{position:sticky;top:0;float:left;margin-top:var(--px-sticky-container-offset-left-desktop, var(--px-sticky-container-offset-left-all))}@media only screen and (max-width: 768px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-mobile, var(--px-sticky-container-offset-left-all))}}@media only screen and (max-width: 1025px){#sticky-left{margin-top:var(--px-sticky-container-offset-left-laptop, var(--px-sticky-container-offset-left-all))}}#sticky-right{position:sticky;top:0;float:right;margin-top:var(--px-sticky-container-offset-right-desktop, var(--px-sticky-container-offset-right-all))}@media only screen and (max-width: 768px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-mobile, var(--px-sticky-container-offset-right-all))}}@media only screen and (max-width: 1025px){#sticky-right{margin-top:var(--px-sticky-container-offset-right-laptop, var(--px-sticky-container-offset-right-all))}}#middle{position:relative;height:var(--px-sticky-container-middle-height, 100vh);width:100%;overflow:auto}.sticky-footer{position:sticky;bottom:0;width:100%}";
|
|
9729
|
+
const stylesheet$5 = new CSSStyleSheet();
|
|
9730
|
+
stylesheet$5.replaceSync(styles$f);
|
|
9659
9731
|
class StickyContainer extends HTMLElement {
|
|
9660
9732
|
constructor() {
|
|
9661
9733
|
super();
|
|
@@ -9700,7 +9772,7 @@ class StickyContainer extends HTMLElement {
|
|
|
9700
9772
|
};
|
|
9701
9773
|
this.attachShadow({ mode: "open" });
|
|
9702
9774
|
this.shadowRoot.innerHTML = this.template;
|
|
9703
|
-
this.shadowRoot.adoptedStyleSheets = [stylesheet$
|
|
9775
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$5];
|
|
9704
9776
|
}
|
|
9705
9777
|
connectedCallback() {
|
|
9706
9778
|
this.adjustContentHeight();
|
|
@@ -9745,9 +9817,9 @@ class StickyContainer extends HTMLElement {
|
|
|
9745
9817
|
if (!customElements.get("px-sticky-container")) {
|
|
9746
9818
|
customElements.define("px-sticky-container", StickyContainer);
|
|
9747
9819
|
}
|
|
9748
|
-
const styles$
|
|
9749
|
-
const styleSheet$
|
|
9750
|
-
styleSheet$
|
|
9820
|
+
const styles$e = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-background-color-container-weak-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-laptop)}@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
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
9822
|
+
styleSheet$9.replaceSync(styles$e);
|
|
9751
9823
|
const HIDE_EVENT = "px.lavender.drawer.hide";
|
|
9752
9824
|
class Drawer extends HTMLElement {
|
|
9753
9825
|
constructor() {
|
|
@@ -9784,7 +9856,7 @@ class Drawer extends HTMLElement {
|
|
|
9784
9856
|
</dialog>`;
|
|
9785
9857
|
this.attachShadow({ mode: "open" });
|
|
9786
9858
|
this.shadowRoot.innerHTML = this.template;
|
|
9787
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
9859
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
9788
9860
|
if (!this.hasAttribute("showfrom")) {
|
|
9789
9861
|
this.setAttribute("showfrom", "bottom");
|
|
9790
9862
|
}
|
|
@@ -9873,11 +9945,11 @@ class Drawer extends HTMLElement {
|
|
|
9873
9945
|
if (!customElements.get("px-drawer")) {
|
|
9874
9946
|
customElements.define("px-drawer", Drawer);
|
|
9875
9947
|
}
|
|
9876
|
-
const styles$
|
|
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-after-element-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-after-element-default-mobile)}}#appleseed-container{margin-inline:16px}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}";
|
|
9877
9949
|
const itemStyles = "::slotted(*){border-radius:var(--px-radius-main)}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var(--px-carousel-min-width-desktop,var(--px-carousel-min-width-all-desktop));border-radius:var(--px-radius-main);background:#fff}@media screen and (max-width: 768px){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile))!important}}@media screen and (min-width: 768px) and (max-width: 1024px){:host{flex:1 0 var(--px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet))!important}}";
|
|
9878
|
-
const styles$
|
|
9879
|
-
const styleSheet$
|
|
9880
|
-
styleSheet$
|
|
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-size-m-desktop);height:var(--px-icon-size-m-desktop);display:flex;justify-content:center;align-items:center}@media screen and (max-width: 768px){.appleseed{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}}.appleseed-6-minus>div{height:10px;width:10px;border:1px solid var(--px-background-color-action-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-background-color-action-active-default)}.appleseed-6-plus>div{height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m);border:1px solid var(--px-background-color-action-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-background-color-action-active-default)}";
|
|
9951
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
9952
|
+
styleSheet$8.replaceSync(styles$c);
|
|
9881
9953
|
class AppleSeed extends HTMLElement {
|
|
9882
9954
|
constructor() {
|
|
9883
9955
|
super();
|
|
@@ -9892,7 +9964,7 @@ class AppleSeed extends HTMLElement {
|
|
|
9892
9964
|
</div>`;
|
|
9893
9965
|
};
|
|
9894
9966
|
this.attachShadow({ mode: "open" });
|
|
9895
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
9967
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$8];
|
|
9896
9968
|
this.shadowRoot.innerHTML = this.template(this.amount, this.active);
|
|
9897
9969
|
}
|
|
9898
9970
|
static get observedAttributes() {
|
|
@@ -10119,9 +10191,9 @@ function throttle(func, wait, options) {
|
|
|
10119
10191
|
"trailing": trailing
|
|
10120
10192
|
});
|
|
10121
10193
|
}
|
|
10122
|
-
const styleSheet$
|
|
10123
|
-
styleSheet$
|
|
10124
|
-
const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10194
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
10195
|
+
styleSheet$7.replaceSync(styles$d);
|
|
10196
|
+
const attributeBreakpointCSSSelector$1 = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .carousel`;
|
|
10125
10197
|
const prefix = "px-spacing";
|
|
10126
10198
|
const visibleItemCalcFunction = (spacingToken) => (numberOfItems, device) => `calc(((100% - ${Math.max(parseInt(numberOfItems), 2)} * ( var(--px-spacing-${spacingToken}-${device}))) / ${numberOfItems}) - ( 64px / ${Math.max(parseInt(numberOfItems), 2)}))`;
|
|
10127
10199
|
class Carousel extends HTMLElement {
|
|
@@ -10185,10 +10257,10 @@ class Carousel extends HTMLElement {
|
|
|
10185
10257
|
this.attachShadow({ mode: "open" });
|
|
10186
10258
|
this.shadowRoot.innerHTML = this.template;
|
|
10187
10259
|
this.shadowRoot.adoptedStyleSheets = [
|
|
10188
|
-
styleSheet$
|
|
10260
|
+
styleSheet$7,
|
|
10189
10261
|
cssTokenBreakpoints(
|
|
10190
10262
|
"gap",
|
|
10191
|
-
attributeBreakpointCSSSelector,
|
|
10263
|
+
attributeBreakpointCSSSelector$1,
|
|
10192
10264
|
gapValues,
|
|
10193
10265
|
prefix
|
|
10194
10266
|
)
|
|
@@ -10296,13 +10368,13 @@ class CarouselItem extends HTMLElement {
|
|
|
10296
10368
|
</div>`;
|
|
10297
10369
|
this.attachShadow({ mode: "open" });
|
|
10298
10370
|
this.shadowRoot.innerHTML = this.template;
|
|
10299
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
10371
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$7, itemStyleSheet];
|
|
10300
10372
|
}
|
|
10301
10373
|
}
|
|
10302
10374
|
if (!customElements.get("px-carousel-item")) {
|
|
10303
10375
|
customElements.define("px-carousel-item", CarouselItem);
|
|
10304
10376
|
}
|
|
10305
|
-
const bannerCss = ':host{position:relative}:host,:host>*{display:block;box-sizing:border-box}.banner{position:relative;min-height:
|
|
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-after-element-s-mobile);z-index:2;position:relative}[reduced] .banner-content{grid-template-columns:min-content minmax(0,1fr);column-gap:var(--px-spacing-after-element-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-after-element-default-mobile) - var(--px-spacing-after-element-s-mobile))}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 768px){.banner-content{row-gap:var(--px-spacing-after-element-s-tablet)}[reduced] .banner-content{column-gap:var(--px-spacing-after-element-default-tablet)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-after-element-default-tablet) - var(--px-spacing-after-element-s-tablet))}}@media only screen and (min-width: 1025px){.banner-content{row-gap:var(--px-spacing-after-element-s-desktop)}[reduced] .banner-content{column-gap:var(--px-spacing-after-element-default-desktop)}.banner-content :host(:not([reduced])) ::slotted([slot="action"]){margin-top:calc(var(--px-spacing-after-element-default-desktop) - var(--px-spacing-after-element-s-desktop))}}';
|
|
10306
10378
|
const bannerStyles = new CSSStyleSheet();
|
|
10307
10379
|
bannerStyles.replaceSync(bannerCss);
|
|
10308
10380
|
const _Banner = class _Banner extends PxElement {
|
|
@@ -10310,7 +10382,7 @@ const _Banner = class _Banner extends PxElement {
|
|
|
10310
10382
|
super(bannerStyles);
|
|
10311
10383
|
this.template = () => `<div class="banner">
|
|
10312
10384
|
<div class="contrast-helper"></div>
|
|
10313
|
-
<px-container padding="${this.reduced ? "m" : "l"}" border-radius="main" >
|
|
10385
|
+
<px-container padding="${this.reduced ? "m" : "l"}" padding--mobile="m" border-radius="main" >
|
|
10314
10386
|
<div class="banner-content">
|
|
10315
10387
|
<slot name="tag"></slot>
|
|
10316
10388
|
<slot name="media"></slot>
|
|
@@ -10562,13 +10634,13 @@ const _Fieldset = class _Fieldset extends PxElement {
|
|
|
10562
10634
|
_Fieldset.nativeName = "fieldset";
|
|
10563
10635
|
let Fieldset = _Fieldset;
|
|
10564
10636
|
customElements.define("px-fieldset", Fieldset);
|
|
10565
|
-
const styles$6 = `input:not([type=file]),textarea,select,#input-file-container{margin:0;outline:0;vertical-align:baseline;align-items:center;gap:var(--px-spacing-after-element-default-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);height:var(--px-action-size-l);background:var(--px-background-color-action-neutral-default) no-repeat;background-position:center right var(--px-padding-s-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);border-radius:var(--px-radius-main);color:var(--px-text-color-body-neutral-strong-default);font-family:var(--px-font-family);font-size:var(--px-text-size-label-l-mobile);font-weight:400;text-align:left;box-sizing:border-box;--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E");--icon-success: url("data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E");--icon-search: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -60 30 30'%3E%3Cpath d='M22.4707,-50.0977l-5.09766,5.09766l5.09766,5.09766c0.332031,0.332031 0.498047,0.732421 0.498047,1.20117c0,0.46875 -0.166016,0.86914 -0.498047,1.20117c-0.3125,0.332031 -0.708007,0.498047 -1.18652,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047l-5.09766,-5.09766l-5.09766,5.09766c-0.332031,0.332031 -0.737305,0.498047 -1.21582,0.498047c-0.478515,0 -0.874022,-0.166016 -1.18652,-0.498047c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.86914 0.498047,-1.20117l5.09766,-5.09766l-5.09766,-5.09766c-0.332031,-0.332031 -0.498047,-0.732421 -0.498047,-1.20117c0,-0.46875 0.166016,-0.859377 0.498047,-1.17188c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.883789,0.166016 1.21582,0.498047l5.09766,5.09766l5.09766,-5.09766c0.3125,-0.332031 0.708007,-0.498047 1.18652,-0.498047c0.478515,0 0.874022,0.166016 1.18652,0.498047c0.175781,0.15625 0.302734,0.336914 0.380859,0.541992c0.0781253,0.205078 0.117188,0.415039 0.117188,0.629883c0,0.234375 -0.0390627,0.454101 -0.117188,0.65918c-0.0781253,0.205078 -0.205078,0.385742 -0.380859,0.541992Zm-7.4707,-9.90234c-2.07031,0 -4.01367,0.390627 -5.83008,1.17188c-1.81641,0.80078 -3.40332,1.87988 -4.76074,3.2373c-1.35742,1.35742 -2.43652,2.94433 -3.2373,4.76074c-0.781253,1.81641 -1.17188,3.75977 -1.17188,5.83008c0,2.07031 0.390627,4.01367 1.17188,5.83008c0.80078,1.81641 1.87988,3.40332 3.2373,4.76074c1.35742,1.35742 2.94433,2.43652 4.76074,3.2373c1.81641,0.781253 3.75977,1.17188 5.83008,1.17188c2.07031,0 4.01367,-0.390627 5.83008,-1.17188c1.81641,-0.80078 3.40332,-1.87988 4.76074,-3.2373c1.35742,-1.35742 2.43652,-2.94433 3.2373,-4.76074c0.781253,-1.81641 1.17188,-3.75977 1.17188,-5.83008c0,-2.07031 -0.390627,-4.01367 -1.17188,-5.83008c-0.80078,-1.81641 -1.87988,-3.40332 -3.2373,-4.76074c-1.35742,-1.35742 -2.94433,-2.43652 -4.76074,-3.2373c-1.81641,-0.781253 -3.75977,-1.17188 -5.83008,-1.17188Z' fill='%235c2d91'/%3E%3C/svg%3E");--icon-calendar: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width: 3rem;--cancel-icon-height: 1rem;--search-icon-datalist-width: 2rem;--search-icon-focus-width: var(--search-icon-datalist-width)}@media screen and (min-width: 768px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-after-element-default-tablet);padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet)}}@media screen and (min-width: 1024px){input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-after-element-default-desktop);padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}}input:not([type=file]).extended,textarea.extended,select.extended,#input-file-container.extended{width:100%}input:not([type=file]):focus,input:not([type=file]):hover,input:not([type=file]).error:focus,input:not([type=file]).error:hover,input:not([type=file]).success:focus,input:not([type=file]).success:hover,textarea:focus,textarea:hover,textarea.error:focus,textarea.error:hover,textarea.success:focus,textarea.success:hover,select:focus,select:hover,select.error:focus,select.error:hover,select.success:focus,select.success:hover,#input-file-container:focus,#input-file-container:hover,#input-file-container.error:focus,#input-file-container.error:hover,#input-file-container.success:focus,#input-file-container.success:hover{border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default);outline:1px solid var(--px-border-color-action-hover-default)}input:not([type=file]):active,textarea:active,select:active,#input-file-container:active{border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}input:not([type=file]):disabled,textarea:disabled,select:disabled,#input-file-container:disabled{border-width:0;background:transparent;padding:0;font-weight:700;text-align:left;height:24px}input:not([type=file]).error,textarea.error,select.error,#input-file-container.error{border-color:var(--px-border-color-purpose-error-default);background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,#input-file-container.success{border-color:var(--px-border-color-purpose-success-default);background-image:var(--icon-success)}input:not([type=file])[type=date].success,input:not([type=file])[type=date].error,input:not([type=file])[type=time].success,input:not([type=file])[type=time].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].success,input:not([type=file])[type=month].error,input:not([type=file])[type=week].success,input:not([type=file])[type=week].error,input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=date].success,textarea[type=date].error,textarea[type=time].success,textarea[type=time].error,textarea[type=datetime-local].success,textarea[type=datetime-local].error,textarea[type=month].success,textarea[type=month].error,textarea[type=week].success,textarea[type=week].error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=date].success,select[type=date].error,select[type=time].success,select[type=time].error,select[type=datetime-local].success,select[type=datetime-local].error,select[type=month].success,select[type=month].error,select[type=week].success,select[type=week].error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=date].success,#input-file-container[type=date].error,#input-file-container[type=time].success,#input-file-container[type=time].error,#input-file-container[type=datetime-local].success,#input-file-container[type=datetime-local].error,#input-file-container[type=month].success,#input-file-container[type=month].error,#input-file-container[type=week].success,#input-file-container[type=week].error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right 2.7rem,center right 1rem}input:not([type=file])[type=time],textarea[type=time],select[type=time],#input-file-container[type=time]{background-image:var(--icon-clock)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success),var(--icon-clock)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error),var(--icon-clock)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],select[type=date],select[type=datetime-local],select[type=month],select[type=week],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week]{background-image:var(--icon-calendar)}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success{background-image:var(--icon-success),var(--icon-calendar)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error{background-image:var(--icon-error),var(--icon-calendar)}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;opacity:0}input:not([type=file])[type=search],textarea[type=search],select[type=search],#input-file-container[type=search]{background-image:var(--icon-search)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat}input:not([type=file])[type=search][list=suggestions],textarea[type=search][list=suggestions],select[type=search][list=suggestions],#input-file-container[type=search][list=suggestions]{background-position:center right var(--search-icon-datalist-width)}input:not([type=file])[type=search][list=suggestions]:focus,input:not([type=file])[type=search][list=suggestions]:hover,textarea[type=search][list=suggestions]:focus,textarea[type=search][list=suggestions]:hover,select[type=search][list=suggestions]:focus,select[type=search][list=suggestions]:hover,#input-file-container[type=search][list=suggestions]:focus,#input-file-container[type=search][list=suggestions]:hover{background-position:center right var(--search-icon-focus-width)}input:not([type=file])[type=search].success:focus,input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].error:focus,input:not([type=file])[type=search].error:hover,textarea[type=search].success:focus,textarea[type=search].success:hover,textarea[type=search].error:focus,textarea[type=search].error:hover,select[type=search].success:focus,select[type=search].success:hover,select[type=search].error:focus,select[type=search].error:hover,#input-file-container[type=search].success:focus,#input-file-container[type=search].success:hover,#input-file-container[type=search].error:focus,#input-file-container[type=search].error:hover{background-position:center right 1rem;background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){background-image:var(--icon-select);-webkit-appearance:none}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),#input-file-container:is(textarea){height:auto;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5rem right 1rem}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success>span,input:not([type=file])#input-file-container.error>span,textarea#input-file-container.success>span,textarea#input-file-container.error>span,select#input-file-container.success>span,select#input-file-container.error>span,#input-file-container#input-file-container.success>span,#input-file-container#input-file-container.error>span{width:85%}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,#input-file-container#input-file-container.error{background-image:var(--icon-error),var(--icon-upload)}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-s-desktop);font-weight:400;line-height:var(--px-line-height-m);text-align:left}slot.error{color:var(--px-text-color-purpose-error-default)}slot.success{color:var(--px-text-color-purpose-success-default)}slot[name=helper]{color:#0000008f}#container{display:inline-flex;flex-direction:column;gap:6px}#label-helper{display:flex;flex-direction:column;gap:8px}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}`;
|
|
10566
|
-
const stylesheet = new CSSStyleSheet();
|
|
10567
|
-
stylesheet.replaceSync(styles$
|
|
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}`;
|
|
10638
|
+
const stylesheet$4 = new CSSStyleSheet();
|
|
10639
|
+
stylesheet$4.replaceSync(styles$b);
|
|
10568
10640
|
class AbstractInputElement extends PxElement {
|
|
10569
10641
|
constructor() {
|
|
10570
10642
|
var _a;
|
|
10571
|
-
super(stylesheet);
|
|
10643
|
+
super(stylesheet$4);
|
|
10572
10644
|
this.containerTemplate = () => `
|
|
10573
10645
|
<div id="container">
|
|
10574
10646
|
<div id="label-helper">
|
|
@@ -10943,9 +11015,9 @@ const _Switch = class _Switch extends PxElement {
|
|
|
10943
11015
|
_Switch.nativeName = "input";
|
|
10944
11016
|
let Switch = _Switch;
|
|
10945
11017
|
customElements.define("px-switch", Switch);
|
|
10946
|
-
const styles$
|
|
10947
|
-
const styleSheet$
|
|
10948
|
-
styleSheet$
|
|
11018
|
+
const styles$a = ":host{display:table;width:100%}";
|
|
11019
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
11020
|
+
styleSheet$6.replaceSync(styles$a);
|
|
10949
11021
|
class Table extends HTMLElement {
|
|
10950
11022
|
constructor() {
|
|
10951
11023
|
super();
|
|
@@ -10954,7 +11026,7 @@ class Table extends HTMLElement {
|
|
|
10954
11026
|
`;
|
|
10955
11027
|
this.attachShadow({ mode: "open" });
|
|
10956
11028
|
this.shadowRoot.innerHTML = this.template();
|
|
10957
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11029
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$6];
|
|
10958
11030
|
}
|
|
10959
11031
|
connectedCallback() {
|
|
10960
11032
|
this.style.display = "table";
|
|
@@ -10964,9 +11036,9 @@ class Table extends HTMLElement {
|
|
|
10964
11036
|
if (!customElements.get("px-table")) {
|
|
10965
11037
|
customElements.define("px-table", Table);
|
|
10966
11038
|
}
|
|
10967
|
-
const styles$
|
|
10968
|
-
const styleSheet$
|
|
10969
|
-
styleSheet$
|
|
11039
|
+
const styles$9 = ":host{display:table-header-group}::slotted(px-tr){background-color:var(--px-background-color-container-weak-default)}";
|
|
11040
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
11041
|
+
styleSheet$5.replaceSync(styles$9);
|
|
10970
11042
|
class Thead extends HTMLElement {
|
|
10971
11043
|
constructor() {
|
|
10972
11044
|
super();
|
|
@@ -10975,7 +11047,7 @@ class Thead extends HTMLElement {
|
|
|
10975
11047
|
`;
|
|
10976
11048
|
this.attachShadow({ mode: "open" });
|
|
10977
11049
|
this.shadowRoot.innerHTML = this.template();
|
|
10978
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11050
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$5];
|
|
10979
11051
|
}
|
|
10980
11052
|
connectedCallback() {
|
|
10981
11053
|
this.style.display = "table-header-group";
|
|
@@ -10985,9 +11057,9 @@ class Thead extends HTMLElement {
|
|
|
10985
11057
|
if (!customElements.get("px-thead")) {
|
|
10986
11058
|
customElements.define("px-thead", Thead);
|
|
10987
11059
|
}
|
|
10988
|
-
const styles$
|
|
10989
|
-
const styleSheet$
|
|
10990
|
-
styleSheet$
|
|
11060
|
+
const styles$8 = ":host{display:table-row}";
|
|
11061
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
11062
|
+
styleSheet$4.replaceSync(styles$8);
|
|
10991
11063
|
class Tr extends HTMLElement {
|
|
10992
11064
|
constructor() {
|
|
10993
11065
|
super();
|
|
@@ -10996,7 +11068,7 @@ class Tr extends HTMLElement {
|
|
|
10996
11068
|
`;
|
|
10997
11069
|
this.attachShadow({ mode: "open" });
|
|
10998
11070
|
this.shadowRoot.innerHTML = this.template();
|
|
10999
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11071
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
11000
11072
|
}
|
|
11001
11073
|
connectedCallback() {
|
|
11002
11074
|
this.style.display = "table-row";
|
|
@@ -11006,9 +11078,9 @@ class Tr extends HTMLElement {
|
|
|
11006
11078
|
if (!customElements.get("px-tr")) {
|
|
11007
11079
|
customElements.define("px-tr", Tr);
|
|
11008
11080
|
}
|
|
11009
|
-
const styles$
|
|
11010
|
-
const styleSheet$
|
|
11011
|
-
styleSheet$
|
|
11081
|
+
const styles$7 = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-size-l) solid var( --th-border-color-default, var(--px-border-color-container-main-default) )}.th{padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:400;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);color:var(--px-text-color-body-neutral-strong-default)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-text-color-body-neutral-weak-default)}@media only screen and (min-width: 768px){.th{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.th ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media 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
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
11083
|
+
styleSheet$3.replaceSync(styles$7);
|
|
11012
11084
|
class Th extends HTMLElement {
|
|
11013
11085
|
constructor() {
|
|
11014
11086
|
super();
|
|
@@ -11025,7 +11097,7 @@ class Th extends HTMLElement {
|
|
|
11025
11097
|
`;
|
|
11026
11098
|
this.attachShadow({ mode: "open" });
|
|
11027
11099
|
this.shadowRoot.innerHTML = this.template();
|
|
11028
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11100
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
11029
11101
|
}
|
|
11030
11102
|
connectedCallback() {
|
|
11031
11103
|
this.style.display = "table-cell";
|
|
@@ -11042,9 +11114,9 @@ class Th extends HTMLElement {
|
|
|
11042
11114
|
if (!customElements.get("px-th")) {
|
|
11043
11115
|
customElements.define("px-th", Th);
|
|
11044
11116
|
}
|
|
11045
|
-
const styles$
|
|
11046
|
-
const styleSheet$
|
|
11047
|
-
styleSheet$
|
|
11117
|
+
const styles$6 = ":host{display:table-row-group}::slotted(px-tr){background-color:var(--px-background-color-container-weak-default)}::slotted(px-tr:hover){background-color:var(--px-background-color-action-neutral-hover-default)}";
|
|
11118
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
11119
|
+
styleSheet$2.replaceSync(styles$6);
|
|
11048
11120
|
class Tbody extends HTMLElement {
|
|
11049
11121
|
constructor() {
|
|
11050
11122
|
super();
|
|
@@ -11053,7 +11125,7 @@ class Tbody extends HTMLElement {
|
|
|
11053
11125
|
`;
|
|
11054
11126
|
this.attachShadow({ mode: "open" });
|
|
11055
11127
|
this.shadowRoot.innerHTML = this.template();
|
|
11056
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
11128
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$2];
|
|
11057
11129
|
}
|
|
11058
11130
|
connectedCallback() {
|
|
11059
11131
|
this.style.display = "table-row-group";
|
|
@@ -11063,9 +11135,9 @@ class Tbody extends HTMLElement {
|
|
|
11063
11135
|
if (!customElements.get("px-tbody")) {
|
|
11064
11136
|
customElements.define("px-tbody", Tbody);
|
|
11065
11137
|
}
|
|
11066
|
-
const styles = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-size-m) solid var( --td-border-color-default, var(--px-border-color-container-main-default) )}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:400;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);color:var(--px-text-color-body-neutral-strong-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-text-color-body-neutral-weak-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media 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-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11067
|
-
const styleSheet = new CSSStyleSheet();
|
|
11068
|
-
styleSheet.replaceSync(styles);
|
|
11138
|
+
const styles$5 = ':host{display:table-cell;vertical-align:middle;border-bottom:var(--px-border-size-m) solid var( --td-border-color-default, var(--px-border-color-container-main-default) )}.td{height:100%;padding:var(--px-padding-s-mobile) var(--px-padding-xs-mobile);font-family:var(--px-font-family);font-weight:400;font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-m);color:var(--px-text-color-body-neutral-strong-default)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-mobile);color:var(--px-text-color-body-neutral-weak-default)}@media only screen and (min-width: 768px){.td{padding:var(--px-padding-s-tablet) var(--px-padding-xs-tablet);font-size:var(--px-text-size-body-m-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-tablet)}}@media 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-tablet)}.td ::slotted([slot="description"]){font-size:var(--px-text-size-body-s-desktop)}}';
|
|
11139
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
11140
|
+
styleSheet$1.replaceSync(styles$5);
|
|
11069
11141
|
class Td extends HTMLElement {
|
|
11070
11142
|
constructor() {
|
|
11071
11143
|
super();
|
|
@@ -11085,7 +11157,7 @@ class Td extends HTMLElement {
|
|
|
11085
11157
|
`;
|
|
11086
11158
|
this.attachShadow({ mode: "open" });
|
|
11087
11159
|
this.shadowRoot.innerHTML = this.template();
|
|
11088
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
11160
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
11089
11161
|
}
|
|
11090
11162
|
connectedCallback() {
|
|
11091
11163
|
this.style.display = "table-cell";
|
|
@@ -11107,6 +11179,1430 @@ class Td extends HTMLElement {
|
|
|
11107
11179
|
if (!customElements.get("px-td")) {
|
|
11108
11180
|
customElements.define("px-td", Td);
|
|
11109
11181
|
}
|
|
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:100vh}}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}}px-hstack{display:none}@media screen and (max-width: 767px){px-hstack{display:block;padding-bottom:2em}}px-h1{display:none}@media screen and (max-width: 767px){px-h1{display:block;padding-bottom:2em}}";
|
|
11183
|
+
const stylesheet$3 = new CSSStyleSheet();
|
|
11184
|
+
stylesheet$3.replaceSync(styles$4);
|
|
11185
|
+
class MegaDropDown extends HTMLElement {
|
|
11186
|
+
constructor() {
|
|
11187
|
+
var _a;
|
|
11188
|
+
super();
|
|
11189
|
+
this.template = `<px-container
|
|
11190
|
+
padding-inline="none"
|
|
11191
|
+
padding-block="l"
|
|
11192
|
+
padding-block--mobile="xl"
|
|
11193
|
+
background-color="none"
|
|
11194
|
+
>
|
|
11195
|
+
<px-hstack gap="1rem" align-items="center">
|
|
11196
|
+
<!-- Back button is only visible if the name is __lavender_mobile_menu -->
|
|
11197
|
+
<px-button variant="tertiary">
|
|
11198
|
+
<px-icon name="chevron_left" from="lavender"></px-icon>
|
|
11199
|
+
Back to menu
|
|
11200
|
+
</px-button>
|
|
11201
|
+
<px-spacer></px-spacer>
|
|
11202
|
+
<px-button-icon size="small" variant="secondary">
|
|
11203
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11204
|
+
</px-button-icon>
|
|
11205
|
+
</px-hstack>
|
|
11206
|
+
<px-h1 variant="title-3xl"></px-h1>
|
|
11207
|
+
<px-button-icon size="small" variant="secondary">
|
|
11208
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
11209
|
+
</px-button-icon>
|
|
11210
|
+
<px-stack
|
|
11211
|
+
direction--mobile="column"
|
|
11212
|
+
direction="row"
|
|
11213
|
+
gap="inside-section-l"
|
|
11214
|
+
wrap="wrap"
|
|
11215
|
+
>
|
|
11216
|
+
<slot></slot>
|
|
11217
|
+
</px-stack>
|
|
11218
|
+
</px-container>`;
|
|
11219
|
+
this.attachShadow({ mode: "open" });
|
|
11220
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11221
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$3];
|
|
11222
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11223
|
+
if (this.internals) {
|
|
11224
|
+
this.internals.role = "menu";
|
|
11225
|
+
}
|
|
11226
|
+
}
|
|
11227
|
+
static get observedAttributes() {
|
|
11228
|
+
return ["hidden", "name"];
|
|
11229
|
+
}
|
|
11230
|
+
connectedCallback() {
|
|
11231
|
+
var _a, _b;
|
|
11232
|
+
if (this.querySelectorAll("px-mdd-section").length === 0) {
|
|
11233
|
+
throw new Error("HeaderPanel must contain at least one MenuSection");
|
|
11234
|
+
}
|
|
11235
|
+
this.hidden = true;
|
|
11236
|
+
if (this.internals) {
|
|
11237
|
+
this.internals.ariaHidden = "true";
|
|
11238
|
+
}
|
|
11239
|
+
this.setAttribute("slot", "header-panels");
|
|
11240
|
+
this.shadowRoot.addEventListener("click", (event) => {
|
|
11241
|
+
if (event.target.closest("px-button-icon")) {
|
|
11242
|
+
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: true }));
|
|
11243
|
+
} else if (event.target.closest("px-button")) {
|
|
11244
|
+
const event2 = new CustomEvent("section-item-click", {
|
|
11245
|
+
bubbles: true,
|
|
11246
|
+
composed: true,
|
|
11247
|
+
detail: { for: "__lavender_mobile_menu" }
|
|
11248
|
+
});
|
|
11249
|
+
this.dispatchEvent(event2);
|
|
11250
|
+
}
|
|
11251
|
+
});
|
|
11252
|
+
this.addEventListener("keyup", (event) => {
|
|
11253
|
+
if (event.key === "Escape" || event.key === "Esc") {
|
|
11254
|
+
this.dispatchEvent(new CustomEvent("close-panel", { bubbles: true }));
|
|
11255
|
+
}
|
|
11256
|
+
});
|
|
11257
|
+
if (this.getAttribute("name") === "__lavender_mobile_menu") {
|
|
11258
|
+
this.$backButton.style.display = "none";
|
|
11259
|
+
}
|
|
11260
|
+
const title = this.getAttribute("name") === "__lavender_mobile_menu" ? "Menu" : ((_b = (_a = this.closest("px-header")) == null ? void 0 : _a.querySelector(
|
|
11261
|
+
`px-header-item[for="${this.getAttribute("name")}"]`
|
|
11262
|
+
)) == null ? void 0 : _b.innerText) ?? "";
|
|
11263
|
+
this.$title.innerText = title;
|
|
11264
|
+
}
|
|
11265
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
11266
|
+
if (name === "name" && !newValue) {
|
|
11267
|
+
throw new Error("Media Drop Down must have a name attribute");
|
|
11268
|
+
}
|
|
11269
|
+
if (name === "name") {
|
|
11270
|
+
this.id = newValue;
|
|
11271
|
+
}
|
|
11272
|
+
if (name === "hidden" && this.internals) {
|
|
11273
|
+
this.internals.ariaHidden = newValue === "true" || newValue === "" ? "true" : "false";
|
|
11274
|
+
}
|
|
11275
|
+
}
|
|
11276
|
+
get hidden() {
|
|
11277
|
+
return this.hasAttribute("hidden");
|
|
11278
|
+
}
|
|
11279
|
+
set hidden(value) {
|
|
11280
|
+
if (typeof value !== "boolean") {
|
|
11281
|
+
throw new Error("hidden must be a boolean");
|
|
11282
|
+
}
|
|
11283
|
+
if (value) {
|
|
11284
|
+
if (this.internals) {
|
|
11285
|
+
this.internals.ariaHidden = "true";
|
|
11286
|
+
}
|
|
11287
|
+
this.setAttribute("hidden", "");
|
|
11288
|
+
} else {
|
|
11289
|
+
if (this.internals) {
|
|
11290
|
+
this.internals.ariaHidden = "false";
|
|
11291
|
+
}
|
|
11292
|
+
this.removeAttribute("hidden");
|
|
11293
|
+
}
|
|
11294
|
+
}
|
|
11295
|
+
get name() {
|
|
11296
|
+
return this.getAttribute("name");
|
|
11297
|
+
}
|
|
11298
|
+
set name(value) {
|
|
11299
|
+
this.setAttribute("name", value);
|
|
11300
|
+
}
|
|
11301
|
+
get $backButton() {
|
|
11302
|
+
return this.shadowRoot.querySelector("px-button");
|
|
11303
|
+
}
|
|
11304
|
+
get $title() {
|
|
11305
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
11306
|
+
}
|
|
11307
|
+
}
|
|
11308
|
+
if (!customElements.get("px-mdd")) {
|
|
11309
|
+
customElements.define("px-mdd", MegaDropDown);
|
|
11310
|
+
}
|
|
11311
|
+
const styles$3 = "@media screen and (max-width: 767px){#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}}:host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}}@media screen and (max-width: 767px){{border-bottom:2px solid var(--px-border-color-container-main-default)}}@media screen and (max-width: 767px){{border-bottom:none}}@media screen and (max-width: 767px){{background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}}";
|
|
11312
|
+
const stylesheet$2 = new CSSStyleSheet();
|
|
11313
|
+
stylesheet$2.replaceSync(styles$3);
|
|
11314
|
+
class MddSection extends HTMLElement {
|
|
11315
|
+
constructor() {
|
|
11316
|
+
super();
|
|
11317
|
+
this.template = `<px-vstack gap="after-element-default">
|
|
11318
|
+
<px-h1 variant="title-l" color="heading-neutral" variant--mobile="title-xl">
|
|
11319
|
+
<slot name="title"></slot>
|
|
11320
|
+
</px-h1>
|
|
11321
|
+
<div id="section-wrapper">
|
|
11322
|
+
<px-vstack role="menu" gap="after-element-xs" gap--mobile="0">
|
|
11323
|
+
<slot></slot>
|
|
11324
|
+
</px-vstack>
|
|
11325
|
+
</div>
|
|
11326
|
+
<px-vstack gap="after-element-default" gap--mobile="inside-section-default">
|
|
11327
|
+
<slot name="footer"></slot>
|
|
11328
|
+
</px-vstack>
|
|
11329
|
+
</px-vstack>`;
|
|
11330
|
+
this.attachShadow({ mode: "open" });
|
|
11331
|
+
this.shadowRoot.innerHTML = this.template;
|
|
11332
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$2];
|
|
11333
|
+
}
|
|
11334
|
+
}
|
|
11335
|
+
if (!customElements.get("px-mdd-section")) {
|
|
11336
|
+
customElements.define("px-mdd-section", MddSection);
|
|
11337
|
+
}
|
|
11338
|
+
const styles$2 = "@media screen and (min-width: 768px){px-icon{display:none}}a{text-decoration:none;color:inherit}@media screen and (min-width: 767px) and (max-width: 1024px){a{font-size:var(--px-text-size-label-l-tablet)}}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}@media screen and (max-width: 767px){px-hstack{display:block;padding:1em 0;background-color:#fff;border-radius:1em}}";
|
|
11339
|
+
const stylesheet$1 = new CSSStyleSheet();
|
|
11340
|
+
stylesheet$1.replaceSync(styles$2);
|
|
11341
|
+
class MddSectionItem extends HTMLElement {
|
|
11342
|
+
constructor() {
|
|
11343
|
+
var _a;
|
|
11344
|
+
super();
|
|
11345
|
+
this.template = `
|
|
11346
|
+
<px-hstack align-items="center">
|
|
11347
|
+
<span><slot></slot></span>
|
|
11348
|
+
<px-spacer></px-spacer>
|
|
11349
|
+
<px-icon name="chevron_right" from="lavender"></px-icon>
|
|
11350
|
+
</px-hstack>`;
|
|
11351
|
+
this.attachShadow({ mode: "open" });
|
|
11352
|
+
this.shadowRoot.adoptedStyleSheets = [stylesheet$1];
|
|
11353
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
11354
|
+
if (this.internals) {
|
|
11355
|
+
this.internals.role = "menuitem";
|
|
11356
|
+
}
|
|
11357
|
+
}
|
|
11358
|
+
static get observedAttributes() {
|
|
11359
|
+
return ["href", "for"];
|
|
11360
|
+
}
|
|
11361
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
11362
|
+
if (name === "href" && this.$link) {
|
|
11363
|
+
this.$link.href = newValue;
|
|
11364
|
+
} else if (name === "href" && !this.$link && !!newValue) {
|
|
11365
|
+
this.shadowRoot.innerHTML = `<a>${this.template}</a>`;
|
|
11366
|
+
this.shadowRoot.firstElementChild.setAttribute("tabindex", "0");
|
|
11367
|
+
} else if (name === "for" && !this.$button && !!newValue) {
|
|
11368
|
+
this.shadowRoot.innerHTML = `<button>${this.template}</button>`;
|
|
11369
|
+
this.shadowRoot.firstElementChild.setAttribute("tabindex", "0");
|
|
11370
|
+
}
|
|
11371
|
+
}
|
|
11372
|
+
connectedCallback() {
|
|
11373
|
+
if (this.hasAttribute("href")) {
|
|
11374
|
+
this.$link.href = this.href;
|
|
11375
|
+
} else if (this.hasAttribute("for")) {
|
|
11376
|
+
this.addEventListener("click", this.handleClick);
|
|
11377
|
+
}
|
|
11378
|
+
}
|
|
11379
|
+
handleClick() {
|
|
11380
|
+
const event = new CustomEvent("section-item-click", {
|
|
11381
|
+
bubbles: true,
|
|
11382
|
+
composed: true,
|
|
11383
|
+
detail: { for: this.getAttribute("for") }
|
|
11384
|
+
});
|
|
11385
|
+
this.dispatchEvent(event);
|
|
11386
|
+
}
|
|
11387
|
+
get href() {
|
|
11388
|
+
return this.getAttribute("href");
|
|
11389
|
+
}
|
|
11390
|
+
set href(value) {
|
|
11391
|
+
this.setAttribute("href", value);
|
|
11392
|
+
}
|
|
11393
|
+
get $link() {
|
|
11394
|
+
return this.shadowRoot.querySelector("a");
|
|
11395
|
+
}
|
|
11396
|
+
get $button() {
|
|
11397
|
+
return this.shadowRoot.querySelector("button");
|
|
11398
|
+
}
|
|
11399
|
+
}
|
|
11400
|
+
if (!customElements.get("px-mdd-section-item")) {
|
|
11401
|
+
customElements.define("px-mdd-section-item", MddSectionItem);
|
|
11402
|
+
}
|
|
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:400;line-height:var(--px-line-height-m);color:var(--px-text-color-heading-brand-default)}.status.success{color:var(--px-text-color-purpose-success-default)}.status.warning,.status.ongoing{color:var(--px-text-color-purpose-warning-default)}.status.error{color:var(--px-text-color-purpose-error-default)}.status.unlimited{color:var(--px-text-color-purpose-unlimited-default)}.status[disabled]{color:var(--px-text-color-action-disabled-default)}:host([inverted]) .status{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .status.success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .status.warning,:host([inverted]) .status.ongoing{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .status.error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .status.unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .status[disabled]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.status{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.status{font-size:var(--px-text-size-label-m-desktop)}}";
|
|
11404
|
+
const statusStyles = new CSSStyleSheet();
|
|
11405
|
+
statusStyles.replaceSync(statusCss);
|
|
11406
|
+
const statusStateValues = [
|
|
11407
|
+
"",
|
|
11408
|
+
"info",
|
|
11409
|
+
"success",
|
|
11410
|
+
"warning",
|
|
11411
|
+
"error",
|
|
11412
|
+
"ongoing",
|
|
11413
|
+
"unlimited"
|
|
11414
|
+
];
|
|
11415
|
+
const _Status = class _Status extends PxElement {
|
|
11416
|
+
constructor() {
|
|
11417
|
+
super(statusStyles);
|
|
11418
|
+
this.template = () => `
|
|
11419
|
+
<div class="status">
|
|
11420
|
+
<px-hstack gap="after-element-2xs" align-items="flex-start">
|
|
11421
|
+
<px-icon name="information_fill" from="lavender" size="s" color="content-brand"></px-icon>
|
|
11422
|
+
<slot name="label"></slot>
|
|
11423
|
+
</px-hstack>
|
|
11424
|
+
</div>`;
|
|
11425
|
+
this.shadowRoot.innerHTML = this.template();
|
|
11426
|
+
if (!this.$label || !this.iconAriaLabel) {
|
|
11427
|
+
console.warn(
|
|
11428
|
+
'Label slot and icon aria-label slot are mandatory even with icon-only case. For accessibility the label slot will only be red by screen readers if the component is set to "icon-only".'
|
|
11429
|
+
);
|
|
11430
|
+
}
|
|
11431
|
+
}
|
|
11432
|
+
static get observedAttributes() {
|
|
11433
|
+
return [
|
|
11434
|
+
"state",
|
|
11435
|
+
"icon-only",
|
|
11436
|
+
"icon-only--mobile",
|
|
11437
|
+
"icon-only--tablet",
|
|
11438
|
+
"icon-only--laptop",
|
|
11439
|
+
"disabled",
|
|
11440
|
+
"inverted",
|
|
11441
|
+
"icon-aria-label"
|
|
11442
|
+
];
|
|
11443
|
+
}
|
|
11444
|
+
connectedCallback() {
|
|
11445
|
+
super.connectedCallback();
|
|
11446
|
+
if (!this.state) {
|
|
11447
|
+
this.setRole("info");
|
|
11448
|
+
}
|
|
11449
|
+
}
|
|
11450
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
11451
|
+
if (oldValue !== newValue) {
|
|
11452
|
+
switch (attrName) {
|
|
11453
|
+
case "state":
|
|
11454
|
+
this.updateState(newValue);
|
|
11455
|
+
this.$el.classList.toggle(`${newValue}`);
|
|
11456
|
+
this.setRole(newValue);
|
|
11457
|
+
break;
|
|
11458
|
+
case "icon-aria-label":
|
|
11459
|
+
this.$statusIcon.setAttribute("aria-label", newValue);
|
|
11460
|
+
break;
|
|
11461
|
+
case "icon-only":
|
|
11462
|
+
this.updateIconOnly(null);
|
|
11463
|
+
break;
|
|
11464
|
+
case "icon-only--mobile":
|
|
11465
|
+
this.updateIconOnly("mobile");
|
|
11466
|
+
break;
|
|
11467
|
+
case "icon-only--tablet":
|
|
11468
|
+
this.updateIconOnly("tablet");
|
|
11469
|
+
break;
|
|
11470
|
+
case "icon-only--laptop":
|
|
11471
|
+
this.updateIconOnly("laptop");
|
|
11472
|
+
break;
|
|
11473
|
+
case "disabled":
|
|
11474
|
+
this.$el.toggleAttribute("disabled", newValue !== null);
|
|
11475
|
+
this.$statusIcon.color = "action-disabled";
|
|
11476
|
+
break;
|
|
11477
|
+
case "inverted":
|
|
11478
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11479
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
11480
|
+
this.$children[i].toggleAttribute("inverted");
|
|
11481
|
+
}
|
|
11482
|
+
}
|
|
11483
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
11484
|
+
this.$statusIcon.toggleAttribute("inverted", newValue !== null);
|
|
11485
|
+
break;
|
|
11486
|
+
default:
|
|
11487
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
11488
|
+
break;
|
|
11489
|
+
}
|
|
11490
|
+
}
|
|
11491
|
+
}
|
|
11492
|
+
updateState(state) {
|
|
11493
|
+
if (!this.checkName(statusStateValues, state)) {
|
|
11494
|
+
console.error(`${state} is not a valid state value for ${this.$el}`);
|
|
11495
|
+
return;
|
|
11496
|
+
}
|
|
11497
|
+
const iconMap = {
|
|
11498
|
+
info: { name: "information_fill", color: "content-brand" },
|
|
11499
|
+
success: { name: "checkmark_fill", color: "purpose-success" },
|
|
11500
|
+
warning: { name: "exclamation_mark_fill", color: "purpose-warning" },
|
|
11501
|
+
error: { name: "minus_fill", color: "purpose-error" },
|
|
11502
|
+
ongoing: { name: "clock_fill", color: "purpose-warning" },
|
|
11503
|
+
unlimited: { name: "infinity_fill", color: "purpose-unlimited" }
|
|
11504
|
+
};
|
|
11505
|
+
const { name, color } = iconMap[state] || iconMap["info"];
|
|
11506
|
+
this.$statusIcon.name = name;
|
|
11507
|
+
this.$statusIcon.color = color;
|
|
11508
|
+
}
|
|
11509
|
+
setRole(statusValue) {
|
|
11510
|
+
this.$el.setAttribute(
|
|
11511
|
+
"role",
|
|
11512
|
+
!statusValue || statusValue === "info" ? "status" : statusValue
|
|
11513
|
+
);
|
|
11514
|
+
}
|
|
11515
|
+
updateIconOnly(breakpoint) {
|
|
11516
|
+
var _a;
|
|
11517
|
+
const iconOnlyBreakpoint = breakpoint ? `--${breakpoint}` : "";
|
|
11518
|
+
this.$label.setAttribute(`shown--sr${iconOnlyBreakpoint}`, "");
|
|
11519
|
+
if (breakpoint === "laptop" || breakpoint === null) {
|
|
11520
|
+
this.$statusIcon.setAttribute(
|
|
11521
|
+
"title",
|
|
11522
|
+
((_a = this.$label.textContent) == null ? void 0 : _a.trim()) || ""
|
|
11523
|
+
);
|
|
11524
|
+
}
|
|
11525
|
+
}
|
|
11526
|
+
get $label() {
|
|
11527
|
+
return this.querySelector('[slot="label"]');
|
|
11528
|
+
}
|
|
11529
|
+
get $statusIcon() {
|
|
11530
|
+
return this.shadowRoot.querySelector("px-icon");
|
|
11531
|
+
}
|
|
11532
|
+
get $children() {
|
|
11533
|
+
return this.querySelectorAll("px-status > *");
|
|
11534
|
+
}
|
|
11535
|
+
get state() {
|
|
11536
|
+
return this.getAttribute("state");
|
|
11537
|
+
}
|
|
11538
|
+
set state(value) {
|
|
11539
|
+
this.setAttribute("state", value);
|
|
11540
|
+
}
|
|
11541
|
+
get iconAriaLabel() {
|
|
11542
|
+
return this.getAttribute("icon-aria-label");
|
|
11543
|
+
}
|
|
11544
|
+
set iconAriaLabel(value) {
|
|
11545
|
+
this.setAttribute("icon-aria-label", value);
|
|
11546
|
+
}
|
|
11547
|
+
get iconOnly() {
|
|
11548
|
+
return this.hasAttribute("icon-only");
|
|
11549
|
+
}
|
|
11550
|
+
set iconOnly(value) {
|
|
11551
|
+
if (value) {
|
|
11552
|
+
this.setAttribute("icon-only", "");
|
|
11553
|
+
} else {
|
|
11554
|
+
this.removeAttribute("icon-only");
|
|
11555
|
+
}
|
|
11556
|
+
}
|
|
11557
|
+
get iconOnlyMobile() {
|
|
11558
|
+
return this.hasAttribute("icon-only--mobile");
|
|
11559
|
+
}
|
|
11560
|
+
set iconOnlyMobile(value) {
|
|
11561
|
+
if (value) {
|
|
11562
|
+
this.setAttribute("icon-only--mobile", "");
|
|
11563
|
+
} else {
|
|
11564
|
+
this.removeAttribute("icon-only--mobile");
|
|
11565
|
+
}
|
|
11566
|
+
}
|
|
11567
|
+
get iconOnlyTablet() {
|
|
11568
|
+
return this.hasAttribute("icon-only--tablet");
|
|
11569
|
+
}
|
|
11570
|
+
set iconOnlyTablet(value) {
|
|
11571
|
+
if (value) {
|
|
11572
|
+
this.setAttribute("icon-only--tablet", "");
|
|
11573
|
+
} else {
|
|
11574
|
+
this.removeAttribute("icon-only--tablet");
|
|
11575
|
+
}
|
|
11576
|
+
}
|
|
11577
|
+
get iconOnlyLaptop() {
|
|
11578
|
+
return this.hasAttribute("icon-only--laptop");
|
|
11579
|
+
}
|
|
11580
|
+
set iconOnlyLaptop(value) {
|
|
11581
|
+
if (value) {
|
|
11582
|
+
this.setAttribute("icon-only--laptop", "");
|
|
11583
|
+
} else {
|
|
11584
|
+
this.removeAttribute("icon-only--laptop");
|
|
11585
|
+
}
|
|
11586
|
+
}
|
|
11587
|
+
get disabled() {
|
|
11588
|
+
return this.hasAttribute("disabled");
|
|
11589
|
+
}
|
|
11590
|
+
set disabled(value) {
|
|
11591
|
+
if (value) {
|
|
11592
|
+
this.setAttribute("disabled", "");
|
|
11593
|
+
} else {
|
|
11594
|
+
this.removeAttribute("disabled");
|
|
11595
|
+
}
|
|
11596
|
+
}
|
|
11597
|
+
get inverted() {
|
|
11598
|
+
return this.hasAttribute("inverted");
|
|
11599
|
+
}
|
|
11600
|
+
set inverted(value) {
|
|
11601
|
+
if (value) {
|
|
11602
|
+
this.setAttribute("inverted", "");
|
|
11603
|
+
} else {
|
|
11604
|
+
this.removeAttribute("inverted");
|
|
11605
|
+
}
|
|
11606
|
+
}
|
|
11607
|
+
};
|
|
11608
|
+
_Status.nativeName = "div";
|
|
11609
|
+
let Status = _Status;
|
|
11610
|
+
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:400;color:var(--px-text-color-body-neutral-strong-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-border-color-focus-outline-default);outline-width:var(--px-focus-outline-mobile);overflow:hidden;border:var(--px-border-size-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-border-color-action-hover-default)}.card:hover .card__content{background-color:var( --px-background-color-action-hover-bordered-default )}px-container{height:100%}::slotted([slot="title"]){font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-heading-2xl-mobile);font-weight:700;color:var(--px-text-color-heading-brand-default)}::slotted([slot="content"]){font-family:var(--px-font-family);line-height:var(--px-line-height-m);font-size:var(--px-text-size-label-l-mobile);font-weight:400;color:var(--px-text-color-body-neutral-strong-default)}.media-position-top .card__container{display:flex;flex-direction:column}.media-position-left .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{background-size:cover;background-position:center center;width:var(--card-media-left-size)}@media only screen and (max-width: 767px){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}.media-position-top--mobile .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--mobile) .card__container,.media-position-left--mobile .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--mobile,.media-position-left--mobile .card__container .card__media-left--mobile{background-size:cover;background-position:center center;width:var(--card-media-left-size--mobile, var(--card-media-left-size))}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile) .card__content,.media-position-background--mobile .card__content{background-color:transparent}.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile):hover .card__content,.media-position-background--mobile:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px) and (max-width: 1024px){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}.media-position-top--tablet .card__container{display:flex;flex-direction:column}.media-position-left:not(.media-position-top--tablet) .card__container,.media-position-left--tablet .card__container{display:flex;flex-direction:row}.media-position-left .card__container .card__media-left{width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-left .card__container .card__media-left--tablet,.media-position-left--tablet .card__container .card__media-left--tablet{background-size:cover;background-position:center center;width:var(--card-media-left-size--tablet, var(--card-media-left-size))}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet) .card__content,.media-position-background--tablet .card__content{background-color:transparent}.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet):hover .card__content,.media-position-background--tablet:hover .card__content{background-color:transparent}}@media only screen and (min-width: 768px){.card{font-size:var(--px-text-size-label-l-tablet);outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot="title"]){font-size:var(--px-text-size-heading-2xl-tablet)}::slotted([slot="content"]){font-size:var(--px-text-size-label-l-tablet)}}@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-text-color-body-neutral-strong-inverted);outline-color:var(--px-border-color-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-border-color-action-hover-inverted)}:host([inverted]) .card:hover .card__content{background-color:var( --px-background-color-action-hover-bordered-inverted )}:host([inverted]) ::slotted([slot="title"]){color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) ::slotted([slot="content"]){color:var(--px-text-color-body-neutral-strong-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
|
+
const styleSheet = new CSSStyleSheet();
|
|
11613
|
+
styleSheet.replaceSync(styles$1);
|
|
11614
|
+
const cardBackgroundColorValues = [
|
|
11615
|
+
"",
|
|
11616
|
+
"action-neutral",
|
|
11617
|
+
"action-neutral-bare"
|
|
11618
|
+
];
|
|
11619
|
+
const cardPaddingValues = ["", "s", "m", "l"];
|
|
11620
|
+
const cardMediaLeftSizeValues = ["", "s", "m"];
|
|
11621
|
+
const cardMediaPositionValues = [
|
|
11622
|
+
"",
|
|
11623
|
+
"none",
|
|
11624
|
+
"top",
|
|
11625
|
+
"left",
|
|
11626
|
+
"background"
|
|
11627
|
+
];
|
|
11628
|
+
const attributeBreakpointCSSSelector = (attributeName, attributeValue, device) => `:host([${attributeName}${device ? `--${device}` : ""}='${attributeValue}']) .card__content`;
|
|
11629
|
+
const paddingPrefix = "px-padding";
|
|
11630
|
+
const _Card = class _Card extends PxElement {
|
|
11631
|
+
template() {
|
|
11632
|
+
return `
|
|
11633
|
+
<div class="contrast-helper"></div>
|
|
11634
|
+
<px-container padding="none" background-color="none" border-radius="none">
|
|
11635
|
+
<div class="card__container">
|
|
11636
|
+
<div class="card__content">
|
|
11637
|
+
<px-vstack gap="after-element-default">
|
|
11638
|
+
<px-vstack gap="after-element-s">
|
|
11639
|
+
<slot name="title"></slot>
|
|
11640
|
+
<slot name="content"></slot>
|
|
11641
|
+
</px-vstack>
|
|
11642
|
+
<slot></slot>
|
|
11643
|
+
</px-vstack>
|
|
11644
|
+
</div>
|
|
11645
|
+
</card>
|
|
11646
|
+
</px-container>
|
|
11647
|
+
`;
|
|
11648
|
+
}
|
|
11649
|
+
constructor() {
|
|
11650
|
+
super(
|
|
11651
|
+
styleSheet,
|
|
11652
|
+
cssTokenBreakpoints(
|
|
11653
|
+
"padding",
|
|
11654
|
+
attributeBreakpointCSSSelector,
|
|
11655
|
+
cardPaddingValues,
|
|
11656
|
+
paddingPrefix,
|
|
11657
|
+
"--card__content-padding"
|
|
11658
|
+
)
|
|
11659
|
+
);
|
|
11660
|
+
const $root = document.createElement(this.nativeName);
|
|
11661
|
+
$root.classList.add("card");
|
|
11662
|
+
$root.innerHTML = this.template();
|
|
11663
|
+
this.shadowRoot.appendChild($root);
|
|
11664
|
+
}
|
|
11665
|
+
connectedCallback() {
|
|
11666
|
+
super.connectedCallback();
|
|
11667
|
+
this.configureCard();
|
|
11668
|
+
}
|
|
11669
|
+
static get observedAttributes() {
|
|
11670
|
+
return [
|
|
11671
|
+
...super.observedAttributes,
|
|
11672
|
+
"inverted",
|
|
11673
|
+
"background-color",
|
|
11674
|
+
"background-size",
|
|
11675
|
+
"background-position",
|
|
11676
|
+
"contrast-helper-gradient",
|
|
11677
|
+
"contrast-helper-overlay",
|
|
11678
|
+
"media-left-size",
|
|
11679
|
+
"media-left-size--mobile",
|
|
11680
|
+
"media-left-size--tablet",
|
|
11681
|
+
"media-left-size--laptop",
|
|
11682
|
+
"media-position",
|
|
11683
|
+
"media-position--mobile",
|
|
11684
|
+
"media-position--tablet",
|
|
11685
|
+
"media-position--laptop",
|
|
11686
|
+
"media-src",
|
|
11687
|
+
"media-src--mobile",
|
|
11688
|
+
"media-src--tablet",
|
|
11689
|
+
"media-src--laptop"
|
|
11690
|
+
];
|
|
11691
|
+
}
|
|
11692
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
11693
|
+
if (oldValue !== newValue) {
|
|
11694
|
+
switch (attrName) {
|
|
11695
|
+
case "inverted":
|
|
11696
|
+
if (newValue === null || newValue === "") {
|
|
11697
|
+
this.$container.setAttribute("inverted", "");
|
|
11698
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11699
|
+
this.$children[i].setAttribute("inverted", "");
|
|
11700
|
+
}
|
|
11701
|
+
} else {
|
|
11702
|
+
this.$container.removeAttribute("inverted");
|
|
11703
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
11704
|
+
this.$children[i].removeAttribute("inverted");
|
|
11705
|
+
}
|
|
11706
|
+
}
|
|
11707
|
+
break;
|
|
11708
|
+
case "background-color":
|
|
11709
|
+
this.updateBackgroundColor(
|
|
11710
|
+
attrName,
|
|
11711
|
+
oldValue,
|
|
11712
|
+
newValue,
|
|
11713
|
+
cardBackgroundColorValues
|
|
11714
|
+
);
|
|
11715
|
+
break;
|
|
11716
|
+
case "background-size":
|
|
11717
|
+
this.$container.backgroundSize = newValue;
|
|
11718
|
+
break;
|
|
11719
|
+
case "background-position":
|
|
11720
|
+
this.$container.backgroundPosition = newValue;
|
|
11721
|
+
break;
|
|
11722
|
+
case "media-position":
|
|
11723
|
+
case "media-position--mobile":
|
|
11724
|
+
case "media-position--tablet":
|
|
11725
|
+
case "media-position--laptop":
|
|
11726
|
+
this.updateMediaPosition(attrName, newValue, cardMediaPositionValues);
|
|
11727
|
+
break;
|
|
11728
|
+
case "media-left-size":
|
|
11729
|
+
case "media-left-size--mobile":
|
|
11730
|
+
case "media-left-size--tablet":
|
|
11731
|
+
case "media-left-size--laptop":
|
|
11732
|
+
this.updateMediaLeftSize(
|
|
11733
|
+
attrName,
|
|
11734
|
+
oldValue,
|
|
11735
|
+
newValue,
|
|
11736
|
+
cardMediaLeftSizeValues
|
|
11737
|
+
);
|
|
11738
|
+
break;
|
|
11739
|
+
case "media-src":
|
|
11740
|
+
case "media-src--mobile":
|
|
11741
|
+
case "media-src--tablet":
|
|
11742
|
+
case "media-src--laptop": {
|
|
11743
|
+
let breakpoint = "";
|
|
11744
|
+
if (attrName.includes("--")) {
|
|
11745
|
+
breakpoint = attrName.split("--")[1];
|
|
11746
|
+
}
|
|
11747
|
+
let positionAttr = "media-position";
|
|
11748
|
+
if (breakpoint) {
|
|
11749
|
+
positionAttr += `--${breakpoint}`;
|
|
11750
|
+
}
|
|
11751
|
+
const positionValue = this.getAttribute(positionAttr) || this.mediaPosition;
|
|
11752
|
+
this.updateMediaPosition(
|
|
11753
|
+
positionAttr,
|
|
11754
|
+
positionValue,
|
|
11755
|
+
cardMediaPositionValues
|
|
11756
|
+
);
|
|
11757
|
+
break;
|
|
11758
|
+
}
|
|
11759
|
+
default:
|
|
11760
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
11761
|
+
break;
|
|
11762
|
+
}
|
|
11763
|
+
}
|
|
11764
|
+
}
|
|
11765
|
+
configureCard() {
|
|
11766
|
+
if (!this.backgroundColor) {
|
|
11767
|
+
this.backgroundColor = "action-neutral-bare";
|
|
11768
|
+
}
|
|
11769
|
+
if (!this.padding) {
|
|
11770
|
+
this.padding = "m";
|
|
11771
|
+
}
|
|
11772
|
+
if (!this.mediaLeftSize) {
|
|
11773
|
+
this.mediaLeftSize = "s";
|
|
11774
|
+
}
|
|
11775
|
+
if (!this.mediaPosition) {
|
|
11776
|
+
this.mediaPosition = "top";
|
|
11777
|
+
}
|
|
11778
|
+
if (this.mediaPosition === "background") {
|
|
11779
|
+
if (!this.backgroundPosition) {
|
|
11780
|
+
this.backgroundPosition = "center";
|
|
11781
|
+
}
|
|
11782
|
+
if (!this.backgroundSize) {
|
|
11783
|
+
this.backgroundSize = "cover";
|
|
11784
|
+
}
|
|
11785
|
+
}
|
|
11786
|
+
}
|
|
11787
|
+
updateMediaPosition(attrName, newValue, attrValue) {
|
|
11788
|
+
if (!checkName(attrValue, newValue)) {
|
|
11789
|
+
console.error(
|
|
11790
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
11791
|
+
this.$el
|
|
11792
|
+
);
|
|
11793
|
+
return;
|
|
11794
|
+
}
|
|
11795
|
+
const hasBreakpoint = attrName.includes("--");
|
|
11796
|
+
const cssPropertyName = hasBreakpoint ? attrName.split("--")[0] : attrName;
|
|
11797
|
+
if (!hasBreakpoint) {
|
|
11798
|
+
if (!this.$el.classList.contains(`media-position-${newValue}`)) {
|
|
11799
|
+
this.$el.classList.add(`media-position-${newValue}`);
|
|
11800
|
+
}
|
|
11801
|
+
if (newValue === "top") {
|
|
11802
|
+
this.updateMediaPositionTop(cssPropertyName);
|
|
11803
|
+
} else if (newValue === "left") {
|
|
11804
|
+
this.updateMediaPositionLeft(cssPropertyName);
|
|
11805
|
+
} else if (newValue === "background") {
|
|
11806
|
+
this.updateMediaPositionBackground(cssPropertyName);
|
|
11807
|
+
}
|
|
11808
|
+
} else {
|
|
11809
|
+
const breakpointName = attrName.split("--")[1];
|
|
11810
|
+
if (!this.$el.classList.contains(
|
|
11811
|
+
`media-position-${newValue}--${breakpointName}`
|
|
11812
|
+
)) {
|
|
11813
|
+
this.$el.classList.add(`media-position-${newValue}--${breakpointName}`);
|
|
11814
|
+
}
|
|
11815
|
+
if (newValue === "top") {
|
|
11816
|
+
this.createImgTop(
|
|
11817
|
+
breakpointName,
|
|
11818
|
+
this.getAttribute(`media-src--${breakpointName}`)
|
|
11819
|
+
);
|
|
11820
|
+
}
|
|
11821
|
+
if (newValue === "left") {
|
|
11822
|
+
this.createDivLeft(
|
|
11823
|
+
breakpointName,
|
|
11824
|
+
this.getAttribute(`media-src--${breakpointName}`)
|
|
11825
|
+
);
|
|
11826
|
+
}
|
|
11827
|
+
if (newValue === "background") {
|
|
11828
|
+
this.$container.setAttribute(
|
|
11829
|
+
`background-image--${breakpointName}`,
|
|
11830
|
+
this.getAttribute(`media-src--${breakpointName}`) || ""
|
|
11831
|
+
);
|
|
11832
|
+
}
|
|
11833
|
+
}
|
|
11834
|
+
}
|
|
11835
|
+
updateMediaPositionTop(cssPropertyName) {
|
|
11836
|
+
if (this.mediaSrc) {
|
|
11837
|
+
const img = document.createElement("img");
|
|
11838
|
+
img.className = "card__media-top";
|
|
11839
|
+
img.src = this.mediaSrc || "";
|
|
11840
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
11841
|
+
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
11842
|
+
img.classList.add(`hidden--${device}`);
|
|
11843
|
+
}
|
|
11844
|
+
});
|
|
11845
|
+
if (this.$cardContainer.querySelector(".card__media-top")) {
|
|
11846
|
+
this.$cardContainer.querySelector(".card__media-top").replaceWith(img);
|
|
11847
|
+
} else {
|
|
11848
|
+
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
11849
|
+
}
|
|
11850
|
+
}
|
|
11851
|
+
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
11852
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
11853
|
+
this.createImgTop(device, this.getAttribute(`media-src--${device}`));
|
|
11854
|
+
}
|
|
11855
|
+
});
|
|
11856
|
+
}
|
|
11857
|
+
updateMediaPositionLeft(cssPropertyName) {
|
|
11858
|
+
if (this.mediaSrc) {
|
|
11859
|
+
const div = document.createElement("div");
|
|
11860
|
+
div.className = "card__media-left";
|
|
11861
|
+
div.style.backgroundImage = `url(${this.mediaSrc || ""})`;
|
|
11862
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
11863
|
+
if (this.getAttribute(`${cssPropertyName}--${device}`) || !this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
11864
|
+
div.classList.add(`hidden--${device}`);
|
|
11865
|
+
}
|
|
11866
|
+
});
|
|
11867
|
+
if (this.$cardContainer.querySelector(".card__media-left")) {
|
|
11868
|
+
this.$cardContainer.querySelector(".card__media-left").replaceWith(div);
|
|
11869
|
+
} else {
|
|
11870
|
+
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
11871
|
+
}
|
|
11872
|
+
}
|
|
11873
|
+
["laptop", "tablet", "mobile"].forEach((device) => {
|
|
11874
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
11875
|
+
this.createDivLeft(device, this.getAttribute(`media-src--${device}`));
|
|
11876
|
+
}
|
|
11877
|
+
});
|
|
11878
|
+
}
|
|
11879
|
+
updateMediaPositionBackground(cssPropertyName) {
|
|
11880
|
+
if (this.mediaSrc) {
|
|
11881
|
+
this.$container.setAttribute(
|
|
11882
|
+
"background-image--mobile",
|
|
11883
|
+
this.mediaSrc || ""
|
|
11884
|
+
);
|
|
11885
|
+
this.$container.setAttribute(
|
|
11886
|
+
"background-image--tablet",
|
|
11887
|
+
this.mediaSrc || ""
|
|
11888
|
+
);
|
|
11889
|
+
this.$container.setAttribute(
|
|
11890
|
+
"background-image--laptop",
|
|
11891
|
+
this.mediaSrc || ""
|
|
11892
|
+
);
|
|
11893
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
11894
|
+
const mediaSrcDevice = this.getAttribute(`media-src--${device}`);
|
|
11895
|
+
const hasBreakpoint = this.getAttribute(
|
|
11896
|
+
`${cssPropertyName}--${device}`
|
|
11897
|
+
);
|
|
11898
|
+
if (mediaSrcDevice && !hasBreakpoint) {
|
|
11899
|
+
this.$container.setAttribute(
|
|
11900
|
+
`background-image--${device}`,
|
|
11901
|
+
mediaSrcDevice
|
|
11902
|
+
);
|
|
11903
|
+
} else if (hasBreakpoint) {
|
|
11904
|
+
this.$container.removeAttribute(`background-image--${device}`);
|
|
11905
|
+
}
|
|
11906
|
+
});
|
|
11907
|
+
} else {
|
|
11908
|
+
["mobile", "tablet", "laptop"].forEach((device) => {
|
|
11909
|
+
if (!this.getAttribute(`${cssPropertyName}--${device}`) && this.getAttribute(`media-src--${device}`)) {
|
|
11910
|
+
this.$container.setAttribute(
|
|
11911
|
+
`background-image--${device}`,
|
|
11912
|
+
this.getAttribute(`media-src--${device}`)
|
|
11913
|
+
);
|
|
11914
|
+
}
|
|
11915
|
+
});
|
|
11916
|
+
}
|
|
11917
|
+
}
|
|
11918
|
+
createImgTop(device, src) {
|
|
11919
|
+
const img = document.createElement("img");
|
|
11920
|
+
img.className = `card__media-top--${device}`;
|
|
11921
|
+
img.src = src || "";
|
|
11922
|
+
img.classList.add(`shown--${device}`);
|
|
11923
|
+
if (this.$cardContainer.querySelector(`.card__media-top--${device}`)) {
|
|
11924
|
+
this.$cardContainer.querySelector(`.card__media-top--${device}`).replaceWith(img);
|
|
11925
|
+
} else {
|
|
11926
|
+
this.$cardContainer.insertBefore(img, this.$cardContainer.firstChild);
|
|
11927
|
+
}
|
|
11928
|
+
}
|
|
11929
|
+
createDivLeft(device, src) {
|
|
11930
|
+
const div = document.createElement("div");
|
|
11931
|
+
div.className = `card__media-left--${device}`;
|
|
11932
|
+
div.style.backgroundImage = `url(${src || ""})`;
|
|
11933
|
+
div.classList.add(`shown--${device}`);
|
|
11934
|
+
if (this.$cardContainer.querySelector(`.card__media-left--${device}`)) {
|
|
11935
|
+
this.$cardContainer.querySelector(`.card__media-left--${device}`).replaceWith(div);
|
|
11936
|
+
} else {
|
|
11937
|
+
this.$cardContainer.insertBefore(div, this.$cardContainer.firstChild);
|
|
11938
|
+
}
|
|
11939
|
+
}
|
|
11940
|
+
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
11941
|
+
if (!checkName(attrValue, newValue)) {
|
|
11942
|
+
console.error(
|
|
11943
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
11944
|
+
this.$el
|
|
11945
|
+
);
|
|
11946
|
+
return;
|
|
11947
|
+
}
|
|
11948
|
+
const updateBackgroundColorStyle = (value) => {
|
|
11949
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
11950
|
+
this.$el.style.setProperty(
|
|
11951
|
+
`--card-background-color-default`,
|
|
11952
|
+
`var(--px-background-color-${value}-default)`
|
|
11953
|
+
);
|
|
11954
|
+
this.$el.style.setProperty(
|
|
11955
|
+
`--card-background-color-inverted`,
|
|
11956
|
+
`var(--px-background-color-${value}-inverted)`
|
|
11957
|
+
);
|
|
11958
|
+
}
|
|
11959
|
+
};
|
|
11960
|
+
updateBackgroundColorStyle(oldValue);
|
|
11961
|
+
updateBackgroundColorStyle(newValue);
|
|
11962
|
+
}
|
|
11963
|
+
updateMediaLeftSize(attrName, oldValue, newValue, attrValue) {
|
|
11964
|
+
if (!checkName(attrValue, newValue)) {
|
|
11965
|
+
console.error(
|
|
11966
|
+
`${newValue} is not an allowed ${attrName} value for`,
|
|
11967
|
+
this.$el
|
|
11968
|
+
);
|
|
11969
|
+
return;
|
|
11970
|
+
}
|
|
11971
|
+
const updateMediaLeftSizeStyle = (breakpoint, value) => {
|
|
11972
|
+
if (value !== null && value !== "") {
|
|
11973
|
+
let sizeValue = "";
|
|
11974
|
+
if (value === "s") {
|
|
11975
|
+
sizeValue = "120px";
|
|
11976
|
+
}
|
|
11977
|
+
if (value === "m") {
|
|
11978
|
+
sizeValue = "240px";
|
|
11979
|
+
}
|
|
11980
|
+
this.$el.style.setProperty(
|
|
11981
|
+
`--card-media-left-size${breakpoint ? `--${breakpoint}` : ""}`,
|
|
11982
|
+
sizeValue
|
|
11983
|
+
);
|
|
11984
|
+
}
|
|
11985
|
+
};
|
|
11986
|
+
const hasBreakpoint = attrName.includes("--");
|
|
11987
|
+
if (hasBreakpoint) {
|
|
11988
|
+
const breakpoint = attrName.split("--")[1];
|
|
11989
|
+
updateMediaLeftSizeStyle(breakpoint, oldValue);
|
|
11990
|
+
updateMediaLeftSizeStyle(breakpoint, newValue);
|
|
11991
|
+
} else {
|
|
11992
|
+
updateMediaLeftSizeStyle("", oldValue);
|
|
11993
|
+
updateMediaLeftSizeStyle("", newValue);
|
|
11994
|
+
}
|
|
11995
|
+
}
|
|
11996
|
+
get $children() {
|
|
11997
|
+
return this.querySelectorAll("px-card > *");
|
|
11998
|
+
}
|
|
11999
|
+
get $container() {
|
|
12000
|
+
return this.shadowRoot.querySelector("px-container");
|
|
12001
|
+
}
|
|
12002
|
+
get $cardContainer() {
|
|
12003
|
+
return this.shadowRoot.querySelector(".card__container");
|
|
12004
|
+
}
|
|
12005
|
+
get inverted() {
|
|
12006
|
+
return this.hasAttribute("inverted");
|
|
12007
|
+
}
|
|
12008
|
+
set inverted(value) {
|
|
12009
|
+
if (value) {
|
|
12010
|
+
this.setAttribute("inverted", "");
|
|
12011
|
+
} else {
|
|
12012
|
+
this.removeAttribute("inverted");
|
|
12013
|
+
}
|
|
12014
|
+
}
|
|
12015
|
+
get backgroundColor() {
|
|
12016
|
+
return this.getAttribute("background-color");
|
|
12017
|
+
}
|
|
12018
|
+
set backgroundColor(value) {
|
|
12019
|
+
if (value) {
|
|
12020
|
+
this.setAttribute("background-color", value);
|
|
12021
|
+
} else {
|
|
12022
|
+
this.removeAttribute("background-color");
|
|
12023
|
+
}
|
|
12024
|
+
}
|
|
12025
|
+
get backgroundSize() {
|
|
12026
|
+
return this.getAttribute("background-size");
|
|
12027
|
+
}
|
|
12028
|
+
set backgroundSize(value) {
|
|
12029
|
+
if (value) {
|
|
12030
|
+
this.setAttribute("background-size", value);
|
|
12031
|
+
} else {
|
|
12032
|
+
this.removeAttribute("background-size");
|
|
12033
|
+
}
|
|
12034
|
+
}
|
|
12035
|
+
get backgroundPosition() {
|
|
12036
|
+
return this.getAttribute("background-position");
|
|
12037
|
+
}
|
|
12038
|
+
set backgroundPosition(value) {
|
|
12039
|
+
if (value) {
|
|
12040
|
+
this.setAttribute("background-position", value);
|
|
12041
|
+
} else {
|
|
12042
|
+
this.removeAttribute("background-position");
|
|
12043
|
+
}
|
|
12044
|
+
}
|
|
12045
|
+
get padding() {
|
|
12046
|
+
return this.getAttribute("padding");
|
|
12047
|
+
}
|
|
12048
|
+
set padding(value) {
|
|
12049
|
+
if (value) {
|
|
12050
|
+
this.setAttribute("padding", value);
|
|
12051
|
+
} else {
|
|
12052
|
+
this.removeAttribute("padding");
|
|
12053
|
+
}
|
|
12054
|
+
}
|
|
12055
|
+
get gradientContrastHelper() {
|
|
12056
|
+
return this.hasAttribute("contrast-helper-gradient");
|
|
12057
|
+
}
|
|
12058
|
+
set gradientContrastHelper(value) {
|
|
12059
|
+
if (value) {
|
|
12060
|
+
this.setAttribute("contrast-helper-gradient", "");
|
|
12061
|
+
} else {
|
|
12062
|
+
this.removeAttribute("contrast-helper-gradient");
|
|
12063
|
+
}
|
|
12064
|
+
}
|
|
12065
|
+
get overlayContrastHelper() {
|
|
12066
|
+
return this.hasAttribute("contrast-helper-overlay");
|
|
12067
|
+
}
|
|
12068
|
+
set overlayContrastHelper(value) {
|
|
12069
|
+
if (value) {
|
|
12070
|
+
this.setAttribute("contrast-helper-overlay", "");
|
|
12071
|
+
} else {
|
|
12072
|
+
this.removeAttribute("contrast-helper-overlay");
|
|
12073
|
+
}
|
|
12074
|
+
}
|
|
12075
|
+
get mediaLeftSize() {
|
|
12076
|
+
return this.getAttribute("media-left-size");
|
|
12077
|
+
}
|
|
12078
|
+
set mediaLeftSize(value) {
|
|
12079
|
+
if (value) {
|
|
12080
|
+
this.setAttribute("media-left-size", value);
|
|
12081
|
+
} else {
|
|
12082
|
+
this.removeAttribute("media-left-size");
|
|
12083
|
+
}
|
|
12084
|
+
}
|
|
12085
|
+
get mediaLeftSizeMobile() {
|
|
12086
|
+
return this.getAttribute("media-left-size--mobile");
|
|
12087
|
+
}
|
|
12088
|
+
set mediaLeftSizeMobile(value) {
|
|
12089
|
+
if (value) {
|
|
12090
|
+
this.setAttribute("media-left-size--mobile", value);
|
|
12091
|
+
} else {
|
|
12092
|
+
this.removeAttribute("media-left-size--mobile");
|
|
12093
|
+
}
|
|
12094
|
+
}
|
|
12095
|
+
get mediaLeftSizeTablet() {
|
|
12096
|
+
return this.getAttribute("media-left-size--tablet");
|
|
12097
|
+
}
|
|
12098
|
+
set mediaLeftSizeTablet(value) {
|
|
12099
|
+
if (value) {
|
|
12100
|
+
this.setAttribute("media-left-size--tablet", value);
|
|
12101
|
+
} else {
|
|
12102
|
+
this.removeAttribute("media-left-size--tablet");
|
|
12103
|
+
}
|
|
12104
|
+
}
|
|
12105
|
+
get mediaLeftSizeLaptop() {
|
|
12106
|
+
return this.getAttribute("media-left-size--laptop");
|
|
12107
|
+
}
|
|
12108
|
+
set mediaLeftSizeLaptop(value) {
|
|
12109
|
+
if (value) {
|
|
12110
|
+
this.setAttribute("media-left-size--laptop", value);
|
|
12111
|
+
} else {
|
|
12112
|
+
this.removeAttribute("media-left-size--laptop");
|
|
12113
|
+
}
|
|
12114
|
+
}
|
|
12115
|
+
get mediaPosition() {
|
|
12116
|
+
return this.getAttribute("media-position");
|
|
12117
|
+
}
|
|
12118
|
+
set mediaPosition(value) {
|
|
12119
|
+
if (value) {
|
|
12120
|
+
this.setAttribute("media-position", value);
|
|
12121
|
+
} else {
|
|
12122
|
+
this.removeAttribute("media-position");
|
|
12123
|
+
}
|
|
12124
|
+
}
|
|
12125
|
+
get mediaPositionMobile() {
|
|
12126
|
+
return this.getAttribute("media-position--mobile");
|
|
12127
|
+
}
|
|
12128
|
+
set mediaPositionMobile(value) {
|
|
12129
|
+
if (value) {
|
|
12130
|
+
this.setAttribute("media-position--mobile", value);
|
|
12131
|
+
} else {
|
|
12132
|
+
this.removeAttribute("media-position--mobile");
|
|
12133
|
+
}
|
|
12134
|
+
}
|
|
12135
|
+
get mediaPositionTablet() {
|
|
12136
|
+
return this.getAttribute("media-position--tablet");
|
|
12137
|
+
}
|
|
12138
|
+
set mediaPositionTablet(value) {
|
|
12139
|
+
if (value) {
|
|
12140
|
+
this.setAttribute("media-position--tablet", value);
|
|
12141
|
+
} else {
|
|
12142
|
+
this.removeAttribute("media-position--tablet");
|
|
12143
|
+
}
|
|
12144
|
+
}
|
|
12145
|
+
get mediaPositionLaptop() {
|
|
12146
|
+
return this.getAttribute("media-position--laptop");
|
|
12147
|
+
}
|
|
12148
|
+
set mediaPositionLaptop(value) {
|
|
12149
|
+
if (value) {
|
|
12150
|
+
this.setAttribute("media-position--laptop", value);
|
|
12151
|
+
} else {
|
|
12152
|
+
this.removeAttribute("media-position--laptop");
|
|
12153
|
+
}
|
|
12154
|
+
}
|
|
12155
|
+
get mediaSrc() {
|
|
12156
|
+
return this.getAttribute("media-src");
|
|
12157
|
+
}
|
|
12158
|
+
set mediaSrc(value) {
|
|
12159
|
+
if (value) {
|
|
12160
|
+
this.setAttribute("media-src", value);
|
|
12161
|
+
} else {
|
|
12162
|
+
this.removeAttribute("media-src");
|
|
12163
|
+
}
|
|
12164
|
+
}
|
|
12165
|
+
get mediaSrcMobile() {
|
|
12166
|
+
return this.getAttribute("media-src--mobile");
|
|
12167
|
+
}
|
|
12168
|
+
set mediaSrcMobile(value) {
|
|
12169
|
+
if (value) {
|
|
12170
|
+
this.setAttribute("media-src--mobile", value);
|
|
12171
|
+
} else {
|
|
12172
|
+
this.removeAttribute("media-src--mobile");
|
|
12173
|
+
}
|
|
12174
|
+
}
|
|
12175
|
+
get mediaSrcTablet() {
|
|
12176
|
+
return this.getAttribute("media-src--tablet");
|
|
12177
|
+
}
|
|
12178
|
+
set mediaSrcTablet(value) {
|
|
12179
|
+
if (value) {
|
|
12180
|
+
this.setAttribute("media-src--tablet", value);
|
|
12181
|
+
} else {
|
|
12182
|
+
this.removeAttribute("media-src--tablet");
|
|
12183
|
+
}
|
|
12184
|
+
}
|
|
12185
|
+
get mediaSrcLaptop() {
|
|
12186
|
+
return this.getAttribute("media-src--laptop");
|
|
12187
|
+
}
|
|
12188
|
+
set mediaSrcLaptop(value) {
|
|
12189
|
+
if (value) {
|
|
12190
|
+
this.setAttribute("media-src--laptop", value);
|
|
12191
|
+
} else {
|
|
12192
|
+
this.removeAttribute("media-src--laptop");
|
|
12193
|
+
}
|
|
12194
|
+
}
|
|
12195
|
+
};
|
|
12196
|
+
_Card.nativeName = "a";
|
|
12197
|
+
let Card = _Card;
|
|
12198
|
+
if (!customElements.get("px-card")) {
|
|
12199
|
+
customElements.define("px-card", Card);
|
|
12200
|
+
}
|
|
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-after-element-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-after-element-l-tablet)}}@media only screen and (min-width: 1025px){.content-header-content{gap:var(--px-spacing-after-element-l-desktop)}}";
|
|
12202
|
+
const contentHeaderStyles = new CSSStyleSheet();
|
|
12203
|
+
contentHeaderStyles.replaceSync(contentHeaderCss);
|
|
12204
|
+
const _ContentHeader = class _ContentHeader extends PxElement {
|
|
12205
|
+
constructor() {
|
|
12206
|
+
super(contentHeaderStyles);
|
|
12207
|
+
this.template = () => `<div class="content-header">
|
|
12208
|
+
<div class="contrast-helper"></div>
|
|
12209
|
+
<px-section padding-block="l">
|
|
12210
|
+
<div class="content-header-content">
|
|
12211
|
+
<px-vstack gap="heading-to-subtitle">
|
|
12212
|
+
<px-h1><slot></slot></px-h1>
|
|
12213
|
+
<slot name="subtitle"></slot>
|
|
12214
|
+
</px-vstack>
|
|
12215
|
+
${this.$patchDescriptionSlot ? `<px-stack gap="after-element-s" direction="row" direction--mobile="column">
|
|
12216
|
+
<slot name="patch" shrink></slot>
|
|
12217
|
+
<slot name="patch-description"></slot>
|
|
12218
|
+
</px-stack>` : ""}
|
|
12219
|
+
</div>
|
|
12220
|
+
${this.$overlapSlot ? `<slot name="overlap" slot="overlap"></slot>` : ""}
|
|
12221
|
+
</px-section>
|
|
12222
|
+
</div>`;
|
|
12223
|
+
this.shadowRoot.innerHTML = this.template();
|
|
12224
|
+
}
|
|
12225
|
+
static get observedAttributes() {
|
|
12226
|
+
return [
|
|
12227
|
+
"background-color",
|
|
12228
|
+
"background-gradient",
|
|
12229
|
+
"background-image",
|
|
12230
|
+
"background-image--mobile",
|
|
12231
|
+
"background-image--tablet",
|
|
12232
|
+
"background-image--laptop",
|
|
12233
|
+
"background-size",
|
|
12234
|
+
"background-position",
|
|
12235
|
+
"contrast-helper-gradient",
|
|
12236
|
+
"contrast-helper-overlay",
|
|
12237
|
+
"min-height",
|
|
12238
|
+
"inverted"
|
|
12239
|
+
];
|
|
12240
|
+
}
|
|
12241
|
+
connectedCallback() {
|
|
12242
|
+
var _a;
|
|
12243
|
+
(_a = super.connectedCallback) == null ? void 0 : _a.call(this);
|
|
12244
|
+
if (this.$subtitleSlot) {
|
|
12245
|
+
this.$subtitleSlot.setAttribute("variant", "subtitle");
|
|
12246
|
+
}
|
|
12247
|
+
if (this.$patchDescriptionSlot) {
|
|
12248
|
+
if (this.$patchDescriptionSlot.localName === "px-p") {
|
|
12249
|
+
this.$patchDescriptionSlot.setAttribute("variant", "default");
|
|
12250
|
+
}
|
|
12251
|
+
if (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") {
|
|
12252
|
+
this.$patchDescriptionSlot.setAttribute("font-size", "body-l");
|
|
12253
|
+
this.$patchDescriptionSlot.removeAttribute("font-weight");
|
|
12254
|
+
this.$patchDescriptionSlot.removeAttribute("color");
|
|
12255
|
+
}
|
|
12256
|
+
if (this.$patchDescriptionSlot.localName === "px-price") {
|
|
12257
|
+
this.$patchDescriptionSlot.setAttribute("size", "m");
|
|
12258
|
+
}
|
|
12259
|
+
}
|
|
12260
|
+
}
|
|
12261
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
12262
|
+
if (oldValue !== newValue) {
|
|
12263
|
+
switch (attrName) {
|
|
12264
|
+
case "background-color":
|
|
12265
|
+
this.$section.backgroundColor = backgroundColorValues.indexOf(newValue) > 0 ? newValue : "none";
|
|
12266
|
+
break;
|
|
12267
|
+
case "background-gradient":
|
|
12268
|
+
this.$section.gradient = gradientValues.indexOf(newValue) > 0 ? newValue : "none";
|
|
12269
|
+
break;
|
|
12270
|
+
case "background-image":
|
|
12271
|
+
this.$section.backgroundImage = newValue;
|
|
12272
|
+
break;
|
|
12273
|
+
case "background-image--mobile":
|
|
12274
|
+
this.$section.backgroundImageMobile = newValue;
|
|
12275
|
+
break;
|
|
12276
|
+
case "background-image--tablet":
|
|
12277
|
+
this.$section.backgroundImageTablet = newValue;
|
|
12278
|
+
break;
|
|
12279
|
+
case "background-image--laptop":
|
|
12280
|
+
this.$section.backgroundImageLaptop = newValue;
|
|
12281
|
+
break;
|
|
12282
|
+
case "background-size":
|
|
12283
|
+
this.$section.backgroundSize = backgroundSizeValues.indexOf(newValue) > 0 ? newValue : "";
|
|
12284
|
+
break;
|
|
12285
|
+
case "background-position":
|
|
12286
|
+
this.$section.backgroundPosition = newValue;
|
|
12287
|
+
break;
|
|
12288
|
+
case "inverted":
|
|
12289
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
12290
|
+
if (!this.$children[i].hasAttribute("inverted")) {
|
|
12291
|
+
this.$children[i].toggleAttribute("inverted");
|
|
12292
|
+
}
|
|
12293
|
+
}
|
|
12294
|
+
this.$h1.toggleAttribute("inverted", newValue !== null);
|
|
12295
|
+
this.$el.toggleAttribute("inverted", newValue !== null);
|
|
12296
|
+
break;
|
|
12297
|
+
default:
|
|
12298
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
12299
|
+
break;
|
|
12300
|
+
}
|
|
12301
|
+
}
|
|
12302
|
+
}
|
|
12303
|
+
get $section() {
|
|
12304
|
+
return this.shadowRoot.querySelector("px-section");
|
|
12305
|
+
}
|
|
12306
|
+
get $h1() {
|
|
12307
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
12308
|
+
}
|
|
12309
|
+
get $subtitleSlot() {
|
|
12310
|
+
return this.querySelector('[slot="subtitle"]');
|
|
12311
|
+
}
|
|
12312
|
+
get $patchDescriptionSlot() {
|
|
12313
|
+
return this.querySelector('[slot="patch-description"]');
|
|
12314
|
+
}
|
|
12315
|
+
get $overlapSlot() {
|
|
12316
|
+
return this.querySelector('[slot="overlap"]');
|
|
12317
|
+
}
|
|
12318
|
+
get $children() {
|
|
12319
|
+
return this.querySelectorAll("px-content-header > *");
|
|
12320
|
+
}
|
|
12321
|
+
get backgroundColor() {
|
|
12322
|
+
return this.getAttribute("background-color");
|
|
12323
|
+
}
|
|
12324
|
+
set backgroundColor(value) {
|
|
12325
|
+
this.setAttribute("background-color", value);
|
|
12326
|
+
}
|
|
12327
|
+
get gradient() {
|
|
12328
|
+
return this.getAttribute("background-gradient");
|
|
12329
|
+
}
|
|
12330
|
+
set gradient(value) {
|
|
12331
|
+
this.setAttribute("background-gradient", value);
|
|
12332
|
+
}
|
|
12333
|
+
get backgroundImage() {
|
|
12334
|
+
return this.getAttribute("background-image");
|
|
12335
|
+
}
|
|
12336
|
+
set backgroundImage(value) {
|
|
12337
|
+
this.setAttribute("background-image", value);
|
|
12338
|
+
}
|
|
12339
|
+
get backgroundImageMobile() {
|
|
12340
|
+
return this.getAttribute("background-image--mobile");
|
|
12341
|
+
}
|
|
12342
|
+
set backgroundImageMobile(value) {
|
|
12343
|
+
this.setAttribute("background-image--mobile", value);
|
|
12344
|
+
}
|
|
12345
|
+
get backgroundImageTablet() {
|
|
12346
|
+
return this.getAttribute("background-image--tablet");
|
|
12347
|
+
}
|
|
12348
|
+
set backgroundImageTablet(value) {
|
|
12349
|
+
this.setAttribute("background-image--tablet", value);
|
|
12350
|
+
}
|
|
12351
|
+
get backgroundImageLaptop() {
|
|
12352
|
+
return this.getAttribute("background-image--laptop");
|
|
12353
|
+
}
|
|
12354
|
+
set backgroundImageLaptop(value) {
|
|
12355
|
+
this.setAttribute("background-image--laptop", value);
|
|
12356
|
+
}
|
|
12357
|
+
get backgroundSize() {
|
|
12358
|
+
return this.getAttribute("background-size");
|
|
12359
|
+
}
|
|
12360
|
+
set backgroundSize(value) {
|
|
12361
|
+
this.setAttribute("background-size", value);
|
|
12362
|
+
}
|
|
12363
|
+
get backgroundPosition() {
|
|
12364
|
+
return this.getAttribute("background-position");
|
|
12365
|
+
}
|
|
12366
|
+
set backgroundPosition(value) {
|
|
12367
|
+
this.setAttribute("background-position", value);
|
|
12368
|
+
}
|
|
12369
|
+
get gradientContrastHelper() {
|
|
12370
|
+
return this.hasAttribute("contrast-helper-gradient");
|
|
12371
|
+
}
|
|
12372
|
+
set gradientContrastHelper(value) {
|
|
12373
|
+
if (value) {
|
|
12374
|
+
this.setAttribute("contrast-helper-gradient", "");
|
|
12375
|
+
} else {
|
|
12376
|
+
this.removeAttribute("contrast-helper-gradient");
|
|
12377
|
+
}
|
|
12378
|
+
}
|
|
12379
|
+
get overlayContrastHelper() {
|
|
12380
|
+
return this.hasAttribute("contrast-helper-overlay");
|
|
12381
|
+
}
|
|
12382
|
+
set overlayContrastHelper(value) {
|
|
12383
|
+
if (value) {
|
|
12384
|
+
this.setAttribute("contrast-helper-overlay", "");
|
|
12385
|
+
} else {
|
|
12386
|
+
this.removeAttribute("contrast-helper-overlay");
|
|
12387
|
+
}
|
|
12388
|
+
}
|
|
12389
|
+
get inverted() {
|
|
12390
|
+
return this.hasAttribute("inverted");
|
|
12391
|
+
}
|
|
12392
|
+
set inverted(value) {
|
|
12393
|
+
if (value) {
|
|
12394
|
+
this.setAttribute("inverted", "");
|
|
12395
|
+
} else {
|
|
12396
|
+
this.removeAttribute("inverted");
|
|
12397
|
+
}
|
|
12398
|
+
}
|
|
12399
|
+
get minHeight() {
|
|
12400
|
+
return this.hasAttribute("min-height");
|
|
12401
|
+
}
|
|
12402
|
+
set minHeight(value) {
|
|
12403
|
+
if (value) {
|
|
12404
|
+
this.setAttribute("min-height", "");
|
|
12405
|
+
} else {
|
|
12406
|
+
this.removeAttribute("min-height");
|
|
12407
|
+
}
|
|
12408
|
+
}
|
|
12409
|
+
};
|
|
12410
|
+
_ContentHeader.nativeName = "div";
|
|
12411
|
+
let ContentHeader = _ContentHeader;
|
|
12412
|
+
customElements.define("px-content-header", ContentHeader);
|
|
12413
|
+
const styles = ':host{position:relative}@media screen and (max-width: 767px){{display:block;width:100%}}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}::slotted([slot="popover"]){position:absolute;border-radius:var(--px-radius-main, 8px);background:var(--px-background-color-action-neutral-bare-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}@media screen and (min-width: 768px){{padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}@media screen and (max-width: 768px){{left:var(--px-padding-s-mobile)}}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}';
|
|
12414
|
+
const anchorAlignmentValues = [
|
|
12415
|
+
"top-left",
|
|
12416
|
+
"top-right",
|
|
12417
|
+
"bottom-left",
|
|
12418
|
+
"bottom-right"
|
|
12419
|
+
];
|
|
12420
|
+
function anchorPolyfill($trigger, $popoverElement, anchorAlignment = "bottom-left", computedStyle) {
|
|
12421
|
+
if ("anchorName" in document.documentElement.style) {
|
|
12422
|
+
return;
|
|
12423
|
+
}
|
|
12424
|
+
$popoverElement.addEventListener("toggle", () => {
|
|
12425
|
+
var _a, _b;
|
|
12426
|
+
if (!$trigger || !$popoverElement) {
|
|
12427
|
+
return;
|
|
12428
|
+
}
|
|
12429
|
+
const rect = $trigger.getBoundingClientRect();
|
|
12430
|
+
const viewportHeight = ((_a = window.visualViewport) == null ? void 0 : _a.height) ?? window.innerHeight;
|
|
12431
|
+
const viewportWidth = ((_b = window.visualViewport) == null ? void 0 : _b.width) ?? window.innerWidth;
|
|
12432
|
+
const paddingSMobile = computedStyle.getPropertyValue("--px-padding-s-mobile") || "16px";
|
|
12433
|
+
const iconSize = parseInt(
|
|
12434
|
+
(computedStyle.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
|
|
12435
|
+
);
|
|
12436
|
+
if (["top-left", "top-right"].includes(anchorAlignment)) {
|
|
12437
|
+
$popoverElement.style.bottom = `calc( ${paddingSMobile} + ${viewportHeight - rect.top - window.scrollY}px)`;
|
|
12438
|
+
$popoverElement.style.top = "auto";
|
|
12439
|
+
if (anchorAlignment === "top-left") {
|
|
12440
|
+
$popoverElement.style.left = viewportWidth < 768 ? `${paddingSMobile}px` : `${rect.left}px`;
|
|
12441
|
+
} else {
|
|
12442
|
+
$popoverElement.style.right = viewportWidth < 768 ? `${paddingSMobile}px` : `${viewportWidth - rect.right}px`;
|
|
12443
|
+
}
|
|
12444
|
+
} else {
|
|
12445
|
+
$popoverElement.style.top = `${rect.bottom + window.scrollY}px`;
|
|
12446
|
+
if (anchorAlignment === "bottom-left") {
|
|
12447
|
+
$popoverElement.style.left = viewportWidth < 768 ? `${paddingSMobile}px` : `${rect.left}px`;
|
|
12448
|
+
} else {
|
|
12449
|
+
$popoverElement.style.right = viewportWidth < 768 ? `${paddingSMobile}px` : `${viewportWidth - rect.right - iconSize}px`;
|
|
12450
|
+
}
|
|
12451
|
+
}
|
|
12452
|
+
});
|
|
12453
|
+
}
|
|
12454
|
+
const stylesheet = new CSSStyleSheet();
|
|
12455
|
+
stylesheet.replaceSync(styles);
|
|
12456
|
+
const defaultAnchorAlignment = "bottom-left";
|
|
12457
|
+
class Dropdown extends WithExtraAttributes {
|
|
12458
|
+
constructor() {
|
|
12459
|
+
super(stylesheet);
|
|
12460
|
+
this.template = () => `
|
|
12461
|
+
<style>${this.css}</style>
|
|
12462
|
+
<slot name="trigger"></slot>
|
|
12463
|
+
<slot name="popover"></slot>`;
|
|
12464
|
+
this.isAboutToClose = false;
|
|
12465
|
+
this.shadowRoot.innerHTML = this.template();
|
|
12466
|
+
}
|
|
12467
|
+
/**
|
|
12468
|
+
* Instance level styling for the dropdown component.
|
|
12469
|
+
* This is used to set the anchor name and position of the popover.
|
|
12470
|
+
* @private
|
|
12471
|
+
*/
|
|
12472
|
+
get css() {
|
|
12473
|
+
return `::slotted([slot='trigger']) {
|
|
12474
|
+
anchor-name: ${this.anchorName};
|
|
12475
|
+
}
|
|
12476
|
+
:host([anchoralignment="bottom-left"]) {
|
|
12477
|
+
::slotted([slot="popover"]) {
|
|
12478
|
+
position-anchor: ${this.anchorName};
|
|
12479
|
+
top: anchor(${this.anchorName} bottom);
|
|
12480
|
+
left: anchor(${this.anchorName} left);
|
|
12481
|
+
}
|
|
12482
|
+
}
|
|
12483
|
+
:host([anchoralignment="bottom-right"]) {
|
|
12484
|
+
::slotted([slot="popover"]) {
|
|
12485
|
+
position-anchor: ${this.anchorName};
|
|
12486
|
+
top: anchor(${this.anchorName} bottom);
|
|
12487
|
+
right: calc(anchor(${this.anchorName} right) - var(--px-icon-size-xs-desktop));
|
|
12488
|
+
}
|
|
12489
|
+
}
|
|
12490
|
+
:host([anchoralignment="top-left"]) {
|
|
12491
|
+
::slotted([slot="popover"]) {
|
|
12492
|
+
position-anchor: ${this.anchorName};
|
|
12493
|
+
bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
|
|
12494
|
+
left: anchor(${this.anchorName} left);
|
|
12495
|
+
}
|
|
12496
|
+
}
|
|
12497
|
+
:host([anchoralignment="top-right"]) {
|
|
12498
|
+
::slotted([slot="popover"]) {
|
|
12499
|
+
position-anchor: ${this.anchorName};
|
|
12500
|
+
bottom: calc( var(--px-padding-s-mobile) + anchor(${this.anchorName} top));
|
|
12501
|
+
right: anchor(${this.anchorName} right);
|
|
12502
|
+
}
|
|
12503
|
+
}`;
|
|
12504
|
+
}
|
|
12505
|
+
static get observedAttributes() {
|
|
12506
|
+
return [...super.observedAttributes, "id", "anchoralignment"];
|
|
12507
|
+
}
|
|
12508
|
+
connectedCallback() {
|
|
12509
|
+
if (!this.getAttribute("id")) {
|
|
12510
|
+
this.setAttribute(
|
|
12511
|
+
"id",
|
|
12512
|
+
`px-dropdown-${Math.random().toString(36).substring(2, 15)}`
|
|
12513
|
+
);
|
|
12514
|
+
}
|
|
12515
|
+
if (!this.getAttribute("anchoralignment")) {
|
|
12516
|
+
this.setAttribute("anchoralignment", defaultAnchorAlignment);
|
|
12517
|
+
}
|
|
12518
|
+
anchorPolyfill(
|
|
12519
|
+
this.$trigger,
|
|
12520
|
+
this.$popoverElement,
|
|
12521
|
+
this.anchorAlignment,
|
|
12522
|
+
getComputedStyle(this)
|
|
12523
|
+
);
|
|
12524
|
+
}
|
|
12525
|
+
/**
|
|
12526
|
+
* Handles the manual display of the popover when the trigger is clicked.
|
|
12527
|
+
* This is necessary for cases where the trigger is not a button or input element.
|
|
12528
|
+
* This method adds event listeners to the trigger element to toggle the popover.
|
|
12529
|
+
* It also manages the state of whether the popover is about to close or not to avoid
|
|
12530
|
+
* race conditions when the popover is toggled and the trigger click event is fired.
|
|
12531
|
+
*/
|
|
12532
|
+
handleManualPopoverDisplay() {
|
|
12533
|
+
if (this.$trigger && !["button", "input"].includes(this.$trigger.localName)) {
|
|
12534
|
+
this.$trigger.addEventListener("click", () => {
|
|
12535
|
+
if (!this.isAboutToClose) {
|
|
12536
|
+
this.$popoverElement.togglePopover({ source: this.$trigger });
|
|
12537
|
+
}
|
|
12538
|
+
});
|
|
12539
|
+
this.$popoverElement.addEventListener("beforetoggle", () => {
|
|
12540
|
+
if (this.$popoverElement.matches(":popover-open")) {
|
|
12541
|
+
this.isAboutToClose = true;
|
|
12542
|
+
}
|
|
12543
|
+
});
|
|
12544
|
+
this.$popoverElement.addEventListener("toggle", () => {
|
|
12545
|
+
if (!this.$popoverElement.matches(":popover-open")) {
|
|
12546
|
+
setTimeout(() => {
|
|
12547
|
+
this.isAboutToClose = false;
|
|
12548
|
+
});
|
|
12549
|
+
}
|
|
12550
|
+
});
|
|
12551
|
+
}
|
|
12552
|
+
}
|
|
12553
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
12554
|
+
switch (name) {
|
|
12555
|
+
case "id":
|
|
12556
|
+
if (oldValue !== newValue) {
|
|
12557
|
+
this.initPopover();
|
|
12558
|
+
}
|
|
12559
|
+
break;
|
|
12560
|
+
default:
|
|
12561
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
12562
|
+
break;
|
|
12563
|
+
}
|
|
12564
|
+
}
|
|
12565
|
+
initPopover() {
|
|
12566
|
+
if (this.$trigger) {
|
|
12567
|
+
this.$trigger.setAttribute("popovertarget", this.popoverId);
|
|
12568
|
+
this.$popoverElement.setAttribute("id", this.popoverId);
|
|
12569
|
+
this.$popoverElement.setAttribute("popover", "");
|
|
12570
|
+
this.$style.innerHTML = this.css;
|
|
12571
|
+
this.handleManualPopoverDisplay();
|
|
12572
|
+
}
|
|
12573
|
+
}
|
|
12574
|
+
get popoverId() {
|
|
12575
|
+
return `${this.getAttribute("id")}-popover`;
|
|
12576
|
+
}
|
|
12577
|
+
get anchorName() {
|
|
12578
|
+
return `--${this.getAttribute("id")}-anchor`;
|
|
12579
|
+
}
|
|
12580
|
+
get $style() {
|
|
12581
|
+
return this.shadowRoot.querySelector("style");
|
|
12582
|
+
}
|
|
12583
|
+
get $trigger() {
|
|
12584
|
+
return this.querySelector('[slot="trigger"]');
|
|
12585
|
+
}
|
|
12586
|
+
get $popoverElement() {
|
|
12587
|
+
return this.querySelector('[slot="popover"]');
|
|
12588
|
+
}
|
|
12589
|
+
get anchorAlignment() {
|
|
12590
|
+
return this.getAttribute("anchoralignment") || defaultAnchorAlignment;
|
|
12591
|
+
}
|
|
12592
|
+
set anchorAlignment(value) {
|
|
12593
|
+
if (anchorAlignmentValues.includes(value)) {
|
|
12594
|
+
this.setAttribute("anchoralignment", value);
|
|
12595
|
+
} else {
|
|
12596
|
+
console.warn(
|
|
12597
|
+
`Invalid anchor alignment value: ${value}. Using default ${defaultAnchorAlignment}.`
|
|
12598
|
+
);
|
|
12599
|
+
this.setAttribute("anchoralignment", defaultAnchorAlignment);
|
|
12600
|
+
}
|
|
12601
|
+
}
|
|
12602
|
+
}
|
|
12603
|
+
if (!customElements.get("px-dropdown")) {
|
|
12604
|
+
customElements.define("px-dropdown", Dropdown);
|
|
12605
|
+
}
|
|
11110
12606
|
export {
|
|
11111
12607
|
Accordion,
|
|
11112
12608
|
AppleSeed,
|
|
@@ -11114,6 +12610,7 @@ export {
|
|
|
11114
12610
|
Banner,
|
|
11115
12611
|
Button,
|
|
11116
12612
|
ButtonIcon,
|
|
12613
|
+
Card,
|
|
11117
12614
|
Carousel,
|
|
11118
12615
|
CarouselItem,
|
|
11119
12616
|
Cell,
|
|
@@ -11123,7 +12620,9 @@ export {
|
|
|
11123
12620
|
CellSwitch,
|
|
11124
12621
|
Checkbox,
|
|
11125
12622
|
Container,
|
|
12623
|
+
ContentHeader,
|
|
11126
12624
|
Drawer,
|
|
12625
|
+
Dropdown,
|
|
11127
12626
|
Entrypoint,
|
|
11128
12627
|
Fieldset,
|
|
11129
12628
|
Grid,
|
|
@@ -11141,6 +12640,9 @@ export {
|
|
|
11141
12640
|
Input,
|
|
11142
12641
|
InputState,
|
|
11143
12642
|
Link,
|
|
12643
|
+
MddSection,
|
|
12644
|
+
MddSectionItem,
|
|
12645
|
+
MegaDropDown,
|
|
11144
12646
|
Modal,
|
|
11145
12647
|
Page,
|
|
11146
12648
|
Paragraph,
|
|
@@ -11162,6 +12664,7 @@ export {
|
|
|
11162
12664
|
Span,
|
|
11163
12665
|
Spinner,
|
|
11164
12666
|
Stack,
|
|
12667
|
+
Status,
|
|
11165
12668
|
Switch,
|
|
11166
12669
|
Table,
|
|
11167
12670
|
Tag,
|
|
@@ -11197,6 +12700,10 @@ export {
|
|
|
11197
12700
|
boxShadowValues,
|
|
11198
12701
|
buttonIconSizeValues,
|
|
11199
12702
|
buttonIconVariantValues,
|
|
12703
|
+
cardBackgroundColorValues,
|
|
12704
|
+
cardMediaLeftSizeValues,
|
|
12705
|
+
cardMediaPositionValues,
|
|
12706
|
+
cardPaddingValues,
|
|
11200
12707
|
cellCheckboxPosition,
|
|
11201
12708
|
cellRadioPosition,
|
|
11202
12709
|
checkName,
|
|
@@ -11245,7 +12752,8 @@ export {
|
|
|
11245
12752
|
separatorDirectionValues,
|
|
11246
12753
|
separatorSizeValues,
|
|
11247
12754
|
stateValues,
|
|
11248
|
-
|
|
12755
|
+
statusStateValues,
|
|
12756
|
+
styleSheet$q as styleSheet,
|
|
11249
12757
|
suffixButtonIconVariantValues,
|
|
11250
12758
|
textalignValues,
|
|
11251
12759
|
tileBackgroundColorValues,
|