@proximus/lavender-autocomplete 2.0.0-alpha.202 → 2.0.0-alpha.204
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/Autocomplete.d.ts +16 -16
- package/dist/AutocompleteHeader.d.ts +5 -5
- package/dist/AutocompleteOption.d.ts +7 -7
- package/dist/custom-elements.json +30 -98
- package/dist/index.es.js +303 -266
- package/dist/vscode.html-custom-data.json +11 -44
- package/dist/web-types.json +14 -78
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as ee, boxShadowValues as te, checkName as l, colorValues as ne, createTemplate as u, cssTokenBreakpoints as d, fontsizeValues as re, fontweightValues as ie, gapValues as f, gradientValues as p, iconSizeValuesKC as ae, log as m, noBorderRadiusValues as oe, paddingValues as h, propertyToAttributeSetter as g, renderTemplate as _, transferAccessibilityAttributes as se } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/autocomplete.css?inline
|
|
3
|
-
var
|
|
3
|
+
var v = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);margin-top:calc(var(--px-focus-offset-mobile) + var(--px-focus-outline-mobile));padding:0;overflow:auto;box-shadow:0 4px 6px -1px #25252514}@media screen and (width>=48rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-tablet) + var(--px-focus-outline-tablet))}}@media screen and (width>=64.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-laptop) + var(--px-focus-outline-laptop))}}@media screen and (width>=90.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-desktop) + var(--px-focus-outline-desktop))}}:host([inverted]) .dropdown-content{background-color:var(--px-color-background-surface-dark)}", y = ":host{position:relative}::slotted([slot=popover]){border-radius:var(--px-radius-main,8px);background:var(--px-color-background-container-light-default,#fff);padding:var(--px-padding-xs-mobile) 0;width:auto;max-height:var(--px-popover-max-height);border:0;margin:0;position:fixed;right:0;box-shadow:0 20px 25px -5px #25252514}:host([grow]) ::slotted([slot=trigger]):after{padding-right:var(--px-padding-xs-mobile);right:0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){top:auto}:host([anchoralignment=top-right]) ::slotted([slot=popover]){top:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){left:auto}@media screen and (width<=47.938rem){::slotted([slot=trigger]){width:100%;display:block}:host([anchoralignment=top-left]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}:host([anchoralignment=top-right]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}}@media screen and (width>=48rem){::slotted([slot=popover]){padding-block:var(--px-padding-s-desktop);width:auto;right:auto}}", b = [
|
|
4
4
|
"top-left",
|
|
5
5
|
"top-right",
|
|
6
6
|
"bottom-left",
|
|
@@ -8,7 +8,7 @@ var y = ":host .dropdown-content{background-color:var(--px-color-background-surf
|
|
|
8
8
|
];
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region ../../components/Dropdown/src/anchorPolyfill.ts
|
|
11
|
-
function
|
|
11
|
+
function x(e, t, n = "bottom-left", r, i = !1) {
|
|
12
12
|
"anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
|
|
13
13
|
if (!e || !t) return;
|
|
14
14
|
let i = e.getBoundingClientRect(), a = window.visualViewport?.height ?? window.innerHeight, o = window.visualViewport?.width ?? window.innerWidth, s = r.getPropertyValue("--px-padding-s-mobile") || "16px", c = parseInt((r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", ""));
|
|
@@ -18,9 +18,9 @@ function b(e, t, n = "bottom-left", r, i = !1) {
|
|
|
18
18
|
/* v8 ignore end */
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region ../../components/Dropdown/src/Dropdown.ts
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
var
|
|
21
|
+
var S = new CSSStyleSheet();
|
|
22
|
+
S.replaceSync(y);
|
|
23
|
+
var C = "bottom-left", ce = class extends n {
|
|
24
24
|
get css() {
|
|
25
25
|
return `::slotted([slot='trigger']) {
|
|
26
26
|
anchor-name: ${this.anchorName};
|
|
@@ -65,7 +65,7 @@ var S = "bottom-left", C = class extends n {
|
|
|
65
65
|
];
|
|
66
66
|
}
|
|
67
67
|
constructor() {
|
|
68
|
-
super(
|
|
68
|
+
super(S), this.template = () => `
|
|
69
69
|
<style>${this.css}</style>
|
|
70
70
|
<slot name="trigger"></slot>
|
|
71
71
|
<slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
|
|
@@ -80,10 +80,10 @@ var S = "bottom-left", C = class extends n {
|
|
|
80
80
|
this.$popoverElement.matches(":popover-open") || setTimeout(() => {
|
|
81
81
|
this.isAboutToClose = !1;
|
|
82
82
|
});
|
|
83
|
-
}, this.shadowRoot
|
|
83
|
+
}, _(this.shadowRoot, this.template());
|
|
84
84
|
}
|
|
85
85
|
connectedCallback() {
|
|
86
|
-
this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment",
|
|
86
|
+
this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", C), x(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
|
|
87
87
|
}
|
|
88
88
|
#e() {
|
|
89
89
|
this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener("beforetoggle", this.#t), this.$popoverElement.removeEventListener("toggle", this.#n);
|
|
@@ -99,7 +99,7 @@ var S = "bottom-left", C = class extends n {
|
|
|
99
99
|
this.initPopover();
|
|
100
100
|
break;
|
|
101
101
|
case "use-polyfill":
|
|
102
|
-
|
|
102
|
+
x(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
|
|
103
103
|
break;
|
|
104
104
|
case "manual-toggle":
|
|
105
105
|
n != null && this.$trigger?.removeAttribute("aria-expanded");
|
|
@@ -136,10 +136,10 @@ var S = "bottom-left", C = class extends n {
|
|
|
136
136
|
return this.querySelector("[slot=\"popover\"]");
|
|
137
137
|
}
|
|
138
138
|
get anchorAlignment() {
|
|
139
|
-
return this.getAttribute("anchoralignment") ||
|
|
139
|
+
return this.getAttribute("anchoralignment") || C;
|
|
140
140
|
}
|
|
141
141
|
set anchorAlignment(e) {
|
|
142
|
-
|
|
142
|
+
b.includes(e) ? this.setAttribute("anchoralignment", e) : (m(`Invalid anchor alignment value: ${e}. Using default ${C}.`), this.setAttribute("anchoralignment", C));
|
|
143
143
|
}
|
|
144
144
|
get usePolyfill() {
|
|
145
145
|
return this.hasAttribute("use-polyfill");
|
|
@@ -157,19 +157,19 @@ var S = "bottom-left", C = class extends n {
|
|
|
157
157
|
return this.getAttribute("popover-height");
|
|
158
158
|
}
|
|
159
159
|
set popoverHeight(e) {
|
|
160
|
-
|
|
160
|
+
g(this, "popover-height", e);
|
|
161
161
|
}
|
|
162
162
|
};
|
|
163
|
-
customElements.get("px-dropdown") || customElements.define("px-dropdown",
|
|
163
|
+
customElements.get("px-dropdown") || customElements.define("px-dropdown", ce);
|
|
164
164
|
//#endregion
|
|
165
165
|
//#region ../../components/Input/src/input.css?inline
|
|
166
|
-
var w = ":host{--icon-error:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E\");--icon-success:url(\"data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E\");--icon-search:url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0ZM12.3071 4.35954C12.0502 4.10263 11.6339 4.10262 11.377 4.35954L8.33333 7.40316L5.28971 4.35954C5.03279 4.10261 4.61646 4.10261 4.35954 4.35954C4.10261 4.61646 4.10261 5.03279 4.35954 5.28971L7.40316 8.33333L4.35954 11.377C4.10262 11.6339 4.10263 12.0502 4.35954 12.3071C4.61648 12.5639 5.03284 12.564 5.28971 12.3071L8.33333 9.26351L11.377 12.3071C11.6339 12.564 12.0502 12.564 12.3071 12.3071C12.564 12.0502 12.564 11.6339 12.3071 11.377L9.26351 8.33333L12.3071 5.28971C12.564 5.03284 12.5639 4.61648 12.3071 4.35954Z' fill='%235C2D91'/%3E%3C/svg%3E\");--icon-calendar:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width:1em;--cancel-icon-height:1em;--search-icon-datalist-width:2em;--search-icon-focus-width:var(--search-icon-datalist-width);display:block}:host *{box-sizing:border-box}label{all:unset;font-size:var(--px-font-size-base);line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container{vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) var(--px-padding-xs-mobile) var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0px var(--px-size-border-m) inset;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);line-height:var(--px-line-height-ratio-l);text-align:left;box-sizing:border-box;border:none;outline:0;margin:0;height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended{width:100%}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0px var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):active{box-shadow:var(--px-color-border-state-active-default) 0 0 0px var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):disabled,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0px 0 inset;font-weight:var(--px-font-weight-title);text-align:left;background:0 0;padding:0}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].success{background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-image:var(--icon-success)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]{background-image:var(--icon-search);padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);margin-right:calc(( var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) ) * -1);margin-left:var(--px-spacing-s-mobile);background-position:50%;background-repeat:no-repeat}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success{background-image:var(--icon-success), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error{background-image:var(--icon-error), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select){text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;width:100%;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success{background-image:var(--icon-success), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{background-image:var(--icon-error), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea){flex-grow:0;height:auto!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).error{background-position:right 1rem top .5rem}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);align-items:center;max-width:100%;display:flex}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container span{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success{background-image:var(--icon-success), var(--icon-upload)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-image:var(--icon-error), var(--icon-upload)}:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-mobile) + 2 * var(--px-padding-xs-mobile) + var(--px-size-icon-s));background-image:var(--icon-search);padding-right:var(--autocomplete-search-icon-width);background-position:right 1rem center}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-error), var(--icon-search)!important}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f;font-size:var(--px-text-size-label-s-mobile)}#container{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:inline-flex}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:flex}input[type=file]{-webkit-appearance:none;opacity:0;width:0;height:0}@media screen and (width<=47.938rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (width>=48rem) and (width<=64rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (width>=48rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-tablet) + 2 * var(--px-padding-xs-tablet) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet);height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) ) * -1);margin-left:var(--px-spacing-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}slot[name=helper]{font-size:var(--px-text-size-label-s-tablet)}#container,#label-helper{gap:var(--px-spacing-2xs-tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (width>=64.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-laptop) + 2 * var(--px-padding-xs-laptop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) var(--px-padding-xs-laptop) var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) ) * -1);margin-left:var(--px-spacing-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-laptop)}slot{font-size:var(--px-text-size-label-m-laptop)}slot[name=helper]{font-size:var(--px-text-size-label-s-laptop)}#container,#label-helper{gap:var(--px-spacing-2xs-laptop)}}@media screen and (width>=90.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-desktop) + 2 * var(--px-padding-xs-desktop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)), center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) ) * -1);margin-left:var(--px-spacing-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container).extended--desktop{width:100%}:host([extended--desktop]) #container{width:100%}slot{font-size:var(--px-text-size-label-m-desktop)}slot[name=helper]{font-size:var(--px-text-size-label-s-desktop)}#container{gap:var(--px-spacing-2xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}:host([hidden-label]) #label-helper{position:absolute}:host([hidden-label]) #container,:host([hidden-label]) #label-helper{gap:0}", T = new CSSStyleSheet();
|
|
167
|
-
|
|
168
|
-
var
|
|
166
|
+
var le = ":host{--icon-error:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E\");--icon-success:url(\"data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E\");--icon-search:url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0ZM12.3071 4.35954C12.0502 4.10263 11.6339 4.10262 11.377 4.35954L8.33333 7.40316L5.28971 4.35954C5.03279 4.10261 4.61646 4.10261 4.35954 4.35954C4.10261 4.61646 4.10261 5.03279 4.35954 5.28971L7.40316 8.33333L4.35954 11.377C4.10262 11.6339 4.10263 12.0502 4.35954 12.3071C4.61648 12.5639 5.03284 12.564 5.28971 12.3071L8.33333 9.26351L11.377 12.3071C11.6339 12.564 12.0502 12.564 12.3071 12.3071C12.564 12.0502 12.564 11.6339 12.3071 11.377L9.26351 8.33333L12.3071 5.28971C12.564 5.03284 12.5639 4.61648 12.3071 4.35954Z' fill='%235C2D91'/%3E%3C/svg%3E\");--icon-calendar:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width:1em;--cancel-icon-height:1em;--search-icon-datalist-width:2em;--search-icon-focus-width:var(--search-icon-datalist-width);display:block}:host *{box-sizing:border-box}label{all:unset;font-size:var(--px-font-size-base);line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container{vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) var(--px-padding-xs-mobile) var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0px var(--px-size-border-m) inset;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);line-height:var(--px-line-height-ratio-l);text-align:left;box-sizing:border-box;border:none;outline:0;margin:0;height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended{width:100%}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0px var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):active{box-shadow:var(--px-color-border-state-active-default) 0 0 0px var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):disabled,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0px 0 inset;font-weight:var(--px-font-weight-title);text-align:left;background:0 0;padding:0}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].success{background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-image:var(--icon-success)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]{background-image:var(--icon-search);padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);margin-right:calc(( var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) ) * -1);margin-left:var(--px-spacing-s-mobile);background-position:50%;background-repeat:no-repeat}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success{background-image:var(--icon-success), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error{background-image:var(--icon-error), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select){text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;width:100%;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success{background-image:var(--icon-success), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{background-image:var(--icon-error), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea){flex-grow:0;height:auto!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).error{background-position:right 1rem top .5rem}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);align-items:center;max-width:100%;display:flex}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container span{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success{background-image:var(--icon-success), var(--icon-upload)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-image:var(--icon-error), var(--icon-upload)}:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-mobile) + 2 * var(--px-padding-xs-mobile) + var(--px-size-icon-s));background-image:var(--icon-search);padding-right:var(--autocomplete-search-icon-width);background-position:right 1rem center}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-error), var(--icon-search)!important}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f;font-size:var(--px-text-size-label-s-mobile)}#container{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:inline-flex}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:flex}input[type=file]{-webkit-appearance:none;opacity:0;width:0;height:0}@media screen and (width<=47.938rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (width>=48rem) and (width<=64rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (width>=48rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-tablet) + 2 * var(--px-padding-xs-tablet) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet);height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) ) * -1);margin-left:var(--px-spacing-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}slot[name=helper]{font-size:var(--px-text-size-label-s-tablet)}#container,#label-helper{gap:var(--px-spacing-2xs-tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (width>=64.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-laptop) + 2 * var(--px-padding-xs-laptop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) var(--px-padding-xs-laptop) var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) ) * -1);margin-left:var(--px-spacing-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-laptop)}slot{font-size:var(--px-text-size-label-m-laptop)}slot[name=helper]{font-size:var(--px-text-size-label-s-laptop)}#container,#label-helper{gap:var(--px-spacing-2xs-laptop)}}@media screen and (width>=90.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-desktop) + 2 * var(--px-padding-xs-desktop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)), center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) ) * -1);margin-left:var(--px-spacing-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container).extended--desktop{width:100%}:host([extended--desktop]) #container{width:100%}slot{font-size:var(--px-text-size-label-m-desktop)}slot[name=helper]{font-size:var(--px-text-size-label-s-desktop)}#container{gap:var(--px-spacing-2xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}:host([hidden-label]) #label-helper{position:absolute}:host([hidden-label]) #container,:host([hidden-label]) #label-helper{gap:0}", w = new CSSStyleSheet();
|
|
167
|
+
w.replaceSync(le);
|
|
168
|
+
var T = /* @__PURE__ */ function(e) {
|
|
169
169
|
return e.ERROR = "error", e.SUCCESS = "success", e;
|
|
170
|
-
}({}),
|
|
170
|
+
}({}), E = class extends t {
|
|
171
171
|
constructor() {
|
|
172
|
-
super(
|
|
172
|
+
super(w), this.containerTemplate = () => `
|
|
173
173
|
<div id="container">
|
|
174
174
|
<div id="label-helper">
|
|
175
175
|
<label><slot name="label"></slot></label>
|
|
@@ -183,7 +183,7 @@ var E = /* @__PURE__ */ function(e) {
|
|
|
183
183
|
bubbles: !0,
|
|
184
184
|
composed: !0
|
|
185
185
|
}));
|
|
186
|
-
}, this.onHelperSlotChange = () => this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.onStatusTextSlotChange = () => this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), this.shadowRoot
|
|
186
|
+
}, this.onHelperSlotChange = () => this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.onStatusTextSlotChange = () => this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), _(this.shadowRoot, this.containerTemplate()), this.internals = this.attachInternals?.();
|
|
187
187
|
}
|
|
188
188
|
static get observedAttributes() {
|
|
189
189
|
return [
|
|
@@ -198,7 +198,7 @@ var E = /* @__PURE__ */ function(e) {
|
|
|
198
198
|
];
|
|
199
199
|
}
|
|
200
200
|
attributeChangedCallback(e, t, n) {
|
|
201
|
-
e === "aria-describedby" && t !== n ?
|
|
201
|
+
e === "aria-describedby" && t !== n ? se(this, this.$el, !1) : e === "state" && t !== n ? this.stateChangeCallback(t, n) : (e === "extended" || e === "extended--mobile" || e === "extended--tablet" || e === "extended--laptop" || e === "extended--desktop") && t !== n ? this.$el.classList.toggle(e) : super.attributeChangedCallback(e, t, n);
|
|
202
202
|
}
|
|
203
203
|
stateChangeCallback(e, t) {
|
|
204
204
|
this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.setAttribute("aria-invalid", "true"), this.internals && (this.internals.ariaInvalid = "true"), this.$statusTextSlot.classList.remove("success")) : t === "success" ? (this.$statusTextSlot.classList.remove("error"), this.$statusTextSlot.classList.toggle("success")) : (this.$el.removeAttribute("aria-invalid"), this.internals && (this.internals.ariaInvalid = null), this.$statusTextSlot.classList.remove("error", "success"), this.$labelSlot.classList.remove("error", "success"), this.$el.style.backgroundImage = ""), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
|
|
@@ -291,7 +291,7 @@ var E = /* @__PURE__ */ function(e) {
|
|
|
291
291
|
get $slotStatusText() {
|
|
292
292
|
return this.querySelectorAll("[slot=\"status-text\"]");
|
|
293
293
|
}
|
|
294
|
-
},
|
|
294
|
+
}, ue = class extends E {
|
|
295
295
|
static {
|
|
296
296
|
this.nativeName = "input";
|
|
297
297
|
}
|
|
@@ -332,10 +332,10 @@ var E = /* @__PURE__ */ function(e) {
|
|
|
332
332
|
return this.shadowRoot.querySelector("div");
|
|
333
333
|
}
|
|
334
334
|
};
|
|
335
|
-
customElements.get("px-input") || customElements.define("px-input",
|
|
335
|
+
customElements.get("px-input") || customElements.define("px-input", ue);
|
|
336
336
|
//#endregion
|
|
337
337
|
//#region ../../components/Input/src/TextArea.ts
|
|
338
|
-
var
|
|
338
|
+
var de = class extends E {
|
|
339
339
|
static {
|
|
340
340
|
this.nativeName = "textarea";
|
|
341
341
|
}
|
|
@@ -346,10 +346,10 @@ var ce = class extends D {
|
|
|
346
346
|
return "<textarea></textarea>";
|
|
347
347
|
}
|
|
348
348
|
};
|
|
349
|
-
customElements.get("px-textarea") || customElements.define("px-textarea",
|
|
349
|
+
customElements.get("px-textarea") || customElements.define("px-textarea", de);
|
|
350
350
|
//#endregion
|
|
351
351
|
//#region ../../components/Input/src/Select.ts
|
|
352
|
-
var
|
|
352
|
+
var fe = class extends E {
|
|
353
353
|
static {
|
|
354
354
|
this.nativeName = "select";
|
|
355
355
|
}
|
|
@@ -380,10 +380,10 @@ var le = class extends D {
|
|
|
380
380
|
super.disconnectedCallback(), this.observer?.disconnect();
|
|
381
381
|
}
|
|
382
382
|
};
|
|
383
|
-
customElements.get("px-select") || customElements.define("px-select",
|
|
383
|
+
customElements.get("px-select") || customElements.define("px-select", fe);
|
|
384
384
|
//#endregion
|
|
385
385
|
//#region ../../components/Input/src/Upload.ts
|
|
386
|
-
var
|
|
386
|
+
var pe = class extends E {
|
|
387
387
|
static {
|
|
388
388
|
this.nativeName = "input";
|
|
389
389
|
}
|
|
@@ -413,14 +413,14 @@ var ue = class extends D {
|
|
|
413
413
|
return this.shadowRoot.querySelector("input[type=\"file\"]");
|
|
414
414
|
}
|
|
415
415
|
};
|
|
416
|
-
customElements.get("px-fileupload") || customElements.define("px-fileupload",
|
|
416
|
+
customElements.get("px-fileupload") || customElements.define("px-fileupload", pe);
|
|
417
417
|
//#endregion
|
|
418
418
|
//#region ../../components/Input/src/code-input.css?inline
|
|
419
|
-
var
|
|
420
|
-
|
|
421
|
-
var
|
|
419
|
+
var me = ":host{--code-box-width:2.813rem;--code-gap:var(--px-spacing-xs-mobile);display:block}:host *{box-sizing:border-box}.code-input{gap:var(--code-gap);display:flex}.code-input .code-input-cell{width:var(--code-box-width);text-align:center;cursor:text;padding:var(--px-padding-s-mobile)!important;background:var(--px-color-background-container-default-default)!important;height:2.75rem!important;box-shadow:var(--px-color-border-neutral-default) 0 0 0px var(--px-size-border-m) inset!important}.code-input .code-input-cell:hover:not(:disabled,:read-only){box-shadow:var(--px-color-border-state-hover-default) 0 0 0px var(--px-size-border-l) inset!important;background-color:var(--px-color-background-state-hover-bordered-default)!important}.code-input .code-input-cell.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0px var(--px-size-border-m) inset!important;background-image:none!important}.code-input .code-input-cell.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0px var(--px-size-border-m) inset!important;background-image:none!important}.code-input .code-input-cell:read-only,.code-input .code-input-cell:disabled{box-shadow:none!important;background:0 0!important}.code-input .code-input-single{width:calc(var(--code-cell-count) * var(--code-box-width) + (var(--code-cell-count) - 1) * var(--code-gap));text-align:left;caret-color:var(--px-color-text-neutral-default)}.code-input .code-input-single::selection{color:highlighttext;background-color:highlight}@media screen and (width>=48rem){:host{--code-gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){:host{--code-gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){:host{--code-gap:var(--px-spacing-xs-desktop)}}", D = new CSSStyleSheet();
|
|
420
|
+
D.replaceSync(me);
|
|
421
|
+
var he = class e extends E {
|
|
422
422
|
static {
|
|
423
|
-
this.styles =
|
|
423
|
+
this.styles = D;
|
|
424
424
|
}
|
|
425
425
|
static {
|
|
426
426
|
this.nativeName = "input";
|
|
@@ -471,7 +471,7 @@ var k = class e extends D {
|
|
|
471
471
|
}, this.onCellPaste = (e, t) => {
|
|
472
472
|
let n = e.clipboardData?.getData("text") ?? "";
|
|
473
473
|
n && (e.preventDefault(), this.distributeFrom(t, n));
|
|
474
|
-
}, this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets ?? [],
|
|
474
|
+
}, this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets ?? [], D], this.setupInputs();
|
|
475
475
|
}
|
|
476
476
|
connectedCallback() {
|
|
477
477
|
super.connectedCallback();
|
|
@@ -515,8 +515,8 @@ var k = class e extends D {
|
|
|
515
515
|
}
|
|
516
516
|
stateChangeCallback(e, t) {
|
|
517
517
|
this.$inputs.forEach((n) => {
|
|
518
|
-
n.classList.remove(e), n.classList.toggle(t), t ===
|
|
519
|
-
}), t ===
|
|
518
|
+
n.classList.remove(e), n.classList.toggle(t), t === T.ERROR ? n.setAttribute("aria-invalid", "true") : n.removeAttribute("aria-invalid");
|
|
519
|
+
}), t === T.ERROR ? (this.$statusTextSlot.classList.toggle("error"), this.internals && (this.internals.ariaInvalid = "true"), this.$statusTextSlot.classList.remove("success")) : t === T.SUCCESS ? (this.$statusTextSlot.classList.remove("error"), this.$statusTextSlot.classList.toggle("success")) : (this.internals && (this.internals.ariaInvalid = null), this.$statusTextSlot.classList.remove("error", "success"), this.$labelSlot.classList.remove("error", "success")), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), this.syncGroupAria();
|
|
520
520
|
}
|
|
521
521
|
formData() {
|
|
522
522
|
let e = new FormData(), t = this.getAttribute("name");
|
|
@@ -632,29 +632,21 @@ var k = class e extends D {
|
|
|
632
632
|
this._updateBooleanAttribute("disabled", e);
|
|
633
633
|
}
|
|
634
634
|
};
|
|
635
|
-
customElements.get("px-code-input") || customElements.define("px-code-input",
|
|
635
|
+
customElements.get("px-code-input") || customElements.define("px-code-input", he);
|
|
636
636
|
//#endregion
|
|
637
637
|
//#region src/Autocomplete.ts
|
|
638
|
-
var
|
|
639
|
-
|
|
640
|
-
var
|
|
638
|
+
var O = new CSSStyleSheet();
|
|
639
|
+
O.replaceSync(v);
|
|
640
|
+
var k = class e extends n {
|
|
641
|
+
static {
|
|
642
|
+
this.template = u("<px-dropdown anchoralignment=\"bottom-left\" manual-toggle><px-input slot=\"trigger\" auto-complete><slot name=\"label\" slot=\"label\"></slot><slot name=\"helper\" slot=\"helper\"></slot><slot name=\"status-text\" slot=\"status-text\"></slot></px-input><div class=\"dropdown-content\" slot=\"popover\" role=\"listbox\"><slot name=\"dropdown-content\"></slot></div></px-dropdown>");
|
|
643
|
+
}
|
|
641
644
|
static {
|
|
642
645
|
this.formAssociated = !0;
|
|
643
646
|
}
|
|
644
|
-
#e;
|
|
647
|
+
#e = Math.random().toString(36).substring(2, 15);
|
|
645
648
|
constructor() {
|
|
646
|
-
super(
|
|
647
|
-
this.#i.length && (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover());
|
|
648
|
-
}, this.#n = (e) => {
|
|
649
|
-
if (e.key !== "ArrowDown" && e.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true") return;
|
|
650
|
-
let t = this.#r;
|
|
651
|
-
if (!t.length) return;
|
|
652
|
-
e.preventDefault();
|
|
653
|
-
let n = t.findIndex((e) => e === document.activeElement), r;
|
|
654
|
-
r = e.key === "ArrowDown" ? n < t.length - 1 ? n + 1 : 0 : n > 0 ? n - 1 : t.length - 1, t[r].focus();
|
|
655
|
-
}, this.#a = () => {
|
|
656
|
-
this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), this.#o();
|
|
657
|
-
}, this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
|
|
649
|
+
super(O), _(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
|
|
658
650
|
}
|
|
659
651
|
static get observedAttributes() {
|
|
660
652
|
return [
|
|
@@ -694,15 +686,26 @@ var j = class extends n {
|
|
|
694
686
|
disconnectedCallback() {
|
|
695
687
|
this.$input.removeEventListener("input", this.#a), this.$input.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n);
|
|
696
688
|
}
|
|
697
|
-
#t
|
|
698
|
-
|
|
689
|
+
#t = () => {
|
|
690
|
+
this.#i.length && (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover());
|
|
691
|
+
};
|
|
692
|
+
#n = (e) => {
|
|
693
|
+
if (e.key !== "ArrowDown" && e.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true") return;
|
|
694
|
+
let t = this.#r;
|
|
695
|
+
if (!t.length) return;
|
|
696
|
+
e.preventDefault();
|
|
697
|
+
let n = t.findIndex((e) => e === document.activeElement), r;
|
|
698
|
+
r = e.key === "ArrowDown" ? n < t.length - 1 ? n + 1 : 0 : n > 0 ? n - 1 : t.length - 1, t[r].focus();
|
|
699
|
+
};
|
|
699
700
|
get #r() {
|
|
700
701
|
return Array.from(this.querySelectorAll("px-autocomplete-option:not([disabled])"));
|
|
701
702
|
}
|
|
702
703
|
get #i() {
|
|
703
704
|
return Array.from(this.querySelectorAll("px-autocomplete-option"));
|
|
704
705
|
}
|
|
705
|
-
#a
|
|
706
|
+
#a = () => {
|
|
707
|
+
this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), this.#o();
|
|
708
|
+
};
|
|
706
709
|
setDefaultPopoverHeight() {
|
|
707
710
|
this.popoverHeight ||= "16.5rem";
|
|
708
711
|
}
|
|
@@ -743,13 +746,13 @@ var j = class extends n {
|
|
|
743
746
|
return this.getAttribute("popover-height");
|
|
744
747
|
}
|
|
745
748
|
set popoverHeight(e) {
|
|
746
|
-
|
|
749
|
+
g(this, "popover-height", e);
|
|
747
750
|
}
|
|
748
751
|
};
|
|
749
|
-
customElements.get("px-autocomplete") || customElements.define("px-autocomplete",
|
|
752
|
+
customElements.get("px-autocomplete") || customElements.define("px-autocomplete", k);
|
|
750
753
|
//#endregion
|
|
751
754
|
//#region ../../components/Icon/common/src/IconSet.ts
|
|
752
|
-
var
|
|
755
|
+
var A = class extends HTMLElement {
|
|
753
756
|
constructor() {
|
|
754
757
|
super();
|
|
755
758
|
}
|
|
@@ -783,8 +786,8 @@ var M = class extends HTMLElement {
|
|
|
783
786
|
e && e.remove();
|
|
784
787
|
}
|
|
785
788
|
};
|
|
786
|
-
customElements.get("px-icon-set") || customElements.define("px-icon-set",
|
|
787
|
-
var
|
|
789
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", A);
|
|
790
|
+
var j = [
|
|
788
791
|
"Inherit",
|
|
789
792
|
"Brand",
|
|
790
793
|
"Accent",
|
|
@@ -798,12 +801,14 @@ var N = [
|
|
|
798
801
|
"StateHover",
|
|
799
802
|
"StateActive",
|
|
800
803
|
"StateDisabled"
|
|
801
|
-
].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)),
|
|
802
|
-
|
|
803
|
-
var
|
|
804
|
+
].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), M = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", N = new CSSStyleSheet();
|
|
805
|
+
N.replaceSync(M);
|
|
806
|
+
var P = class e extends n {
|
|
807
|
+
static {
|
|
808
|
+
this.template = u("<svg aria-hidden=\"true\"><use></use></svg>");
|
|
809
|
+
}
|
|
804
810
|
#e = null;
|
|
805
811
|
#t;
|
|
806
|
-
#n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
|
|
807
812
|
static get observedAttributes() {
|
|
808
813
|
return [
|
|
809
814
|
...super.observedAttributes,
|
|
@@ -816,8 +821,8 @@ var I = class extends n {
|
|
|
816
821
|
"disabled"
|
|
817
822
|
];
|
|
818
823
|
}
|
|
819
|
-
constructor(...
|
|
820
|
-
super(...
|
|
824
|
+
constructor(...t) {
|
|
825
|
+
super(...t, N), _(this.shadowRoot, e.template), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
|
|
821
826
|
}
|
|
822
827
|
attributeChangedCallback(e, t, n) {
|
|
823
828
|
if (t !== n) switch (e) {
|
|
@@ -825,10 +830,10 @@ var I = class extends n {
|
|
|
825
830
|
this.updateName(t, n);
|
|
826
831
|
break;
|
|
827
832
|
case "size":
|
|
828
|
-
this.updateAttribute(e, t, n,
|
|
833
|
+
this.updateAttribute(e, t, n, ae);
|
|
829
834
|
break;
|
|
830
835
|
case "color":
|
|
831
|
-
this.updateAttribute(e, t, n,
|
|
836
|
+
this.updateAttribute(e, t, n, j);
|
|
832
837
|
break;
|
|
833
838
|
case "disabled":
|
|
834
839
|
this.color = "state-disabled";
|
|
@@ -852,7 +857,7 @@ var I = class extends n {
|
|
|
852
857
|
!this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
|
|
853
858
|
}
|
|
854
859
|
updateAttribute(e, t, n, r) {
|
|
855
|
-
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) ||
|
|
860
|
+
t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || m(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
|
|
856
861
|
}
|
|
857
862
|
updateName(e, t) {
|
|
858
863
|
this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
|
|
@@ -864,25 +869,25 @@ var I = class extends n {
|
|
|
864
869
|
return this.getAttribute("name");
|
|
865
870
|
}
|
|
866
871
|
set name(e) {
|
|
867
|
-
|
|
872
|
+
g(this, "name", e);
|
|
868
873
|
}
|
|
869
874
|
get size() {
|
|
870
875
|
return this.getAttribute("size");
|
|
871
876
|
}
|
|
872
877
|
set size(e) {
|
|
873
|
-
|
|
878
|
+
g(this, "size", e);
|
|
874
879
|
}
|
|
875
880
|
get color() {
|
|
876
881
|
return this.getAttribute("color");
|
|
877
882
|
}
|
|
878
883
|
set color(e) {
|
|
879
|
-
|
|
884
|
+
g(this, "color", e);
|
|
880
885
|
}
|
|
881
886
|
get arialabel() {
|
|
882
887
|
return this.getAttribute("aria-label");
|
|
883
888
|
}
|
|
884
889
|
set arialabel(e) {
|
|
885
|
-
|
|
890
|
+
g(this, "aria-label", e);
|
|
886
891
|
}
|
|
887
892
|
get inverted() {
|
|
888
893
|
return this.hasAttribute("inverted");
|
|
@@ -894,7 +899,7 @@ var I = class extends n {
|
|
|
894
899
|
return this.getAttribute("from");
|
|
895
900
|
}
|
|
896
901
|
set from(e) {
|
|
897
|
-
|
|
902
|
+
g(this, "from", e);
|
|
898
903
|
}
|
|
899
904
|
get disabled() {
|
|
900
905
|
return this.hasAttribute("disabled");
|
|
@@ -903,18 +908,18 @@ var I = class extends n {
|
|
|
903
908
|
a(this, "disabled", e);
|
|
904
909
|
}
|
|
905
910
|
};
|
|
906
|
-
customElements.get("px-icon") || customElements.define("px-icon",
|
|
911
|
+
customElements.get("px-icon") || customElements.define("px-icon", P);
|
|
907
912
|
//#endregion
|
|
908
913
|
//#region ../../components/Container/src/container.css?inline
|
|
909
|
-
var L = ":host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-left-style:none;border-right-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-left-style:none;border-right-style:none}.border-side-left{border-top-style:none;border-bottom-style:none;border-right-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-position:50%;background-size:cover}.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]){z-index:3;transform:translateY(-50%)}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--mobile,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--mobile,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-full]){text-align:center;z-index:2;left:0;right:0;transform:translateY(-100%)}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{grid-template-rows:subgrid;grid-row:span var(--subgrid-rows);display:grid}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (width<=47.938rem){.container{background-color:var(--background-color--mobile,var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile,var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var(--background-gradient--mobile,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--mobile,var(--background-color-inverted))}.border-side-top--mobile{border-style:solid none none}.border-side-right--mobile{border-style:none solid none none}.border-side-bottom--mobile{border-style:none none solid}.border-side-left--mobile{border-style:none none none solid}.border-side-block--mobile{border-block-style:solid;border-inline-style:none}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (width>=48rem) and (width<=64rem){.container{background-color:var(--background-color--tablet,var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet,var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var(--background-gradient--tablet,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--tablet,var(--background-color-inverted))}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-style:solid none none}.border-side-right--tablet{border-style:none solid none none}.border-side-bottom--tablet{border-style:none none solid}.border-side-left--tablet{border-style:none none none solid}.border-side-block--tablet{border-block-style:solid;border-inline-style:none}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--tablet,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--tablet,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (width>=64.0625rem){.container{background-color:var(--background-color--laptop,var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop,var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var(--background-gradient--laptop,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--laptop,var(--background-color-inverted))}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--laptop,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--laptop,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-style:solid none none}.border-side-right--laptop{border-style:none solid none none}.border-side-bottom--laptop{border-style:none none solid}.border-side-left--laptop{border-style:none none none solid}.border-side-block--laptop{border-block-style:solid;border-inline-style:none}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (width>=90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}", R = new CSSStyleSheet();
|
|
910
|
-
|
|
911
|
-
var
|
|
914
|
+
var F = ":host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-left-style:none;border-right-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-left-style:none;border-right-style:none}.border-side-left{border-top-style:none;border-bottom-style:none;border-right-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-position:50%;background-size:cover}.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]){z-index:3;transform:translateY(-50%)}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--mobile,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--mobile,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-full]){text-align:center;z-index:2;left:0;right:0;transform:translateY(-100%)}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot=anchor-full]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{grid-template-rows:subgrid;grid-row:span var(--subgrid-rows);display:grid}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (width<=47.938rem){.container{background-color:var(--background-color--mobile,var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile,var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var(--background-gradient--mobile,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--mobile,var(--background-color-inverted))}.border-side-top--mobile{border-style:solid none none}.border-side-right--mobile{border-style:none solid none none}.border-side-bottom--mobile{border-style:none none solid}.border-side-left--mobile{border-style:none none none solid}.border-side-block--mobile{border-block-style:solid;border-inline-style:none}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (width>=48rem) and (width<=64rem){.container{background-color:var(--background-color--tablet,var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet,var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var(--background-gradient--tablet,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--tablet,var(--background-color-inverted))}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-style:solid none none}.border-side-right--tablet{border-style:none solid none none}.border-side-bottom--tablet{border-style:none none solid}.border-side-left--tablet{border-style:none none none solid}.border-side-block--tablet{border-block-style:solid;border-inline-style:none}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--tablet,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--tablet,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (width>=64.0625rem){.container{background-color:var(--background-color--laptop,var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop,var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var(--background-gradient--laptop,var(--background-gradient))}:host([inverted]) .container{background-color:var(--background-color-inverted--laptop,var(--background-color-inverted))}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot=anchor-right]){right:var(--container-anchor-offset--laptop,var(--container-padding-right,var(--container-padding-inline,var(--container-padding))))}::slotted([slot=anchor-left]){left:var(--container-anchor-offset--laptop,var(--container-padding-left,var(--container-padding-inline,var(--container-padding))))}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-style:solid none none}.border-side-right--laptop{border-style:none solid none none}.border-side-bottom--laptop{border-style:none none solid}.border-side-left--laptop{border-style:none none none solid}.border-side-block--laptop{border-block-style:solid;border-inline-style:none}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (width>=90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}", I = new CSSStyleSheet();
|
|
915
|
+
I.replaceSync(F);
|
|
916
|
+
var L = [
|
|
912
917
|
"top-patch",
|
|
913
918
|
"top-neighbor-patch",
|
|
914
919
|
"top-ribbon",
|
|
915
920
|
"top-neighbor-ribbon",
|
|
916
921
|
"top-patch-and-neighbor-ribbon"
|
|
917
|
-
],
|
|
922
|
+
], R = [
|
|
918
923
|
"1",
|
|
919
924
|
"2",
|
|
920
925
|
"3",
|
|
@@ -927,21 +932,24 @@ var z = [
|
|
|
927
932
|
"10",
|
|
928
933
|
"11",
|
|
929
934
|
"12"
|
|
930
|
-
],
|
|
931
|
-
d("padding",
|
|
932
|
-
d("padding-inline",
|
|
933
|
-
d("padding-block",
|
|
934
|
-
d("padding-top",
|
|
935
|
-
d("padding-right",
|
|
936
|
-
d("padding-bottom",
|
|
937
|
-
d("padding-left",
|
|
938
|
-
d("gap",
|
|
939
|
-
],
|
|
935
|
+
], z = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, B = "px-padding", ge = [
|
|
936
|
+
d("padding", z, h, B, "--container-padding"),
|
|
937
|
+
d("padding-inline", z, h, B),
|
|
938
|
+
d("padding-block", z, h, B),
|
|
939
|
+
d("padding-top", z, h, B),
|
|
940
|
+
d("padding-right", z, h, B, "--container-padding-right"),
|
|
941
|
+
d("padding-bottom", z, h, B),
|
|
942
|
+
d("padding-left", z, h, B, "--container-padding-left"),
|
|
943
|
+
d("gap", z, f, "px-spacing", void 0, "subgrid-gap")
|
|
944
|
+
], _e = class e extends n {
|
|
945
|
+
static {
|
|
946
|
+
this.template = u("<div class=\"container\"><slot></slot><slot name=\"anchor-left\"></slot><slot name=\"anchor-right\"></slot><slot name=\"anchor-full\"></slot></div>");
|
|
947
|
+
}
|
|
940
948
|
static {
|
|
941
949
|
this.nativeName = "div";
|
|
942
950
|
}
|
|
943
951
|
constructor() {
|
|
944
|
-
super(
|
|
952
|
+
super(I, ...ge), this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, _(this.shadowRoot, e.template);
|
|
945
953
|
}
|
|
946
954
|
static get observedAttributes() {
|
|
947
955
|
return [
|
|
@@ -997,7 +1005,7 @@ var z = [
|
|
|
997
1005
|
attributeChangedCallback(e, t, n) {
|
|
998
1006
|
if (t !== n) switch (e) {
|
|
999
1007
|
case "border":
|
|
1000
|
-
this.updateAttribute(e, t, n,
|
|
1008
|
+
this.updateAttribute(e, t, n, ee);
|
|
1001
1009
|
break;
|
|
1002
1010
|
case "border-color":
|
|
1003
1011
|
this.updateBorderColor(e, n);
|
|
@@ -1015,7 +1023,7 @@ var z = [
|
|
|
1015
1023
|
case "no-border-radius--mobile":
|
|
1016
1024
|
case "no-border-radius--tablet":
|
|
1017
1025
|
case "no-border-radius--laptop":
|
|
1018
|
-
this.updateNoBorderRadius(e, t, n,
|
|
1026
|
+
this.updateNoBorderRadius(e, t, n, oe);
|
|
1019
1027
|
break;
|
|
1020
1028
|
case "background-color":
|
|
1021
1029
|
case "background-color--mobile":
|
|
@@ -1042,16 +1050,16 @@ var z = [
|
|
|
1042
1050
|
n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
|
|
1043
1051
|
break;
|
|
1044
1052
|
case "box-shadow":
|
|
1045
|
-
this.updateAttribute(e, t, n,
|
|
1053
|
+
this.updateAttribute(e, t, n, te);
|
|
1046
1054
|
break;
|
|
1047
1055
|
case "anchor-offset":
|
|
1048
|
-
this.updateAnchorOffset(t, n,
|
|
1056
|
+
this.updateAnchorOffset(t, n, h);
|
|
1049
1057
|
break;
|
|
1050
1058
|
case "anchor-spacing":
|
|
1051
|
-
this.updateAnchorSpacing(t, n,
|
|
1059
|
+
this.updateAnchorSpacing(t, n, L);
|
|
1052
1060
|
break;
|
|
1053
1061
|
case "subgrid-rows":
|
|
1054
|
-
this.updateSubgridRows(e, t, n,
|
|
1062
|
+
this.updateSubgridRows(e, t, n, R);
|
|
1055
1063
|
break;
|
|
1056
1064
|
default: super.attributeChangedCallback(e, t, n);
|
|
1057
1065
|
}
|
|
@@ -1076,27 +1084,27 @@ var z = [
|
|
|
1076
1084
|
e = n.attrName;
|
|
1077
1085
|
let r = n.breakpoint;
|
|
1078
1086
|
this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
|
|
1079
|
-
} else
|
|
1087
|
+
} else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${p.join("\", \"")}".`);
|
|
1080
1088
|
}
|
|
1081
1089
|
updateBackgroundColor(e, t) {
|
|
1082
1090
|
let n = t.startsWith("surface-");
|
|
1083
1091
|
if (this.checkName(r, t)) {
|
|
1084
1092
|
let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
|
|
1085
1093
|
this.$el.style.setProperty(`--${r.attrName}${i}`, `var(--px-color-background-${t}${n ? "" : "-default"})`), this.$el.style.setProperty(`--${r.attrName}-inverted${i}`, `var(--px-color-background-${t}${n ? "" : "-inverted"})`);
|
|
1086
|
-
} else
|
|
1094
|
+
} else m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
1087
1095
|
}
|
|
1088
1096
|
updateBorderColor(e, t) {
|
|
1089
|
-
this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) :
|
|
1097
|
+
this.checkName(o, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : m(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
|
|
1090
1098
|
}
|
|
1091
1099
|
updateNoBorderRadius(e, t, n, r) {
|
|
1092
|
-
if (!this.checkName(r, n))
|
|
1100
|
+
if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
1093
1101
|
else {
|
|
1094
1102
|
let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
|
|
1095
1103
|
t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
|
|
1096
1104
|
}
|
|
1097
1105
|
}
|
|
1098
1106
|
updateAttribute(e, t, n, r) {
|
|
1099
|
-
if (!this.checkName(r, n))
|
|
1107
|
+
if (!this.checkName(r, n)) m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
1100
1108
|
else {
|
|
1101
1109
|
let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
|
|
1102
1110
|
t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
|
|
@@ -1118,8 +1126,8 @@ var z = [
|
|
|
1118
1126
|
};
|
|
1119
1127
|
}
|
|
1120
1128
|
updateAnchorOffset(e, t, n) {
|
|
1121
|
-
if (!
|
|
1122
|
-
|
|
1129
|
+
if (!l(n, t)) {
|
|
1130
|
+
m(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
|
|
1123
1131
|
return;
|
|
1124
1132
|
}
|
|
1125
1133
|
let r = (e) => {
|
|
@@ -1131,8 +1139,8 @@ var z = [
|
|
|
1131
1139
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
1132
1140
|
}
|
|
1133
1141
|
updateAnchorSpacing(e, t, n) {
|
|
1134
|
-
if (!
|
|
1135
|
-
|
|
1142
|
+
if (!l(n, t)) {
|
|
1143
|
+
m(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
|
|
1136
1144
|
return;
|
|
1137
1145
|
}
|
|
1138
1146
|
let r = (e) => {
|
|
@@ -1141,7 +1149,7 @@ var z = [
|
|
|
1141
1149
|
r(e), r(t);
|
|
1142
1150
|
}
|
|
1143
1151
|
updateSubgridRows(e, t, n, r) {
|
|
1144
|
-
|
|
1152
|
+
l(r, n) ? this.style.setProperty(`--${e}`, n) : m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
1145
1153
|
}
|
|
1146
1154
|
get $el() {
|
|
1147
1155
|
return this?.shadowRoot?.querySelector(".container");
|
|
@@ -1153,337 +1161,337 @@ var z = [
|
|
|
1153
1161
|
return this.getAttribute("padding");
|
|
1154
1162
|
}
|
|
1155
1163
|
set padding(e) {
|
|
1156
|
-
|
|
1164
|
+
g(this, "padding", e);
|
|
1157
1165
|
}
|
|
1158
1166
|
get paddingBlock() {
|
|
1159
1167
|
return this.getAttribute("padding-block");
|
|
1160
1168
|
}
|
|
1161
1169
|
set paddingBlock(e) {
|
|
1162
|
-
|
|
1170
|
+
g(this, "padding-block", e);
|
|
1163
1171
|
}
|
|
1164
1172
|
get paddingInline() {
|
|
1165
1173
|
return this.getAttribute("padding-inline");
|
|
1166
1174
|
}
|
|
1167
1175
|
set paddingInline(e) {
|
|
1168
|
-
|
|
1176
|
+
g(this, "padding-inline", e);
|
|
1169
1177
|
}
|
|
1170
1178
|
get paddingTop() {
|
|
1171
1179
|
return this.getAttribute("padding-top");
|
|
1172
1180
|
}
|
|
1173
1181
|
set paddingTop(e) {
|
|
1174
|
-
|
|
1182
|
+
g(this, "padding-top", e);
|
|
1175
1183
|
}
|
|
1176
1184
|
get paddingRight() {
|
|
1177
1185
|
return this.getAttribute("padding-right");
|
|
1178
1186
|
}
|
|
1179
1187
|
set paddingRight(e) {
|
|
1180
|
-
|
|
1188
|
+
g(this, "padding-right", e);
|
|
1181
1189
|
}
|
|
1182
1190
|
get paddingBottom() {
|
|
1183
1191
|
return this.getAttribute("padding-bottom");
|
|
1184
1192
|
}
|
|
1185
1193
|
set paddingBottom(e) {
|
|
1186
|
-
|
|
1194
|
+
g(this, "padding-bottom", e);
|
|
1187
1195
|
}
|
|
1188
1196
|
get paddingLeft() {
|
|
1189
1197
|
return this.getAttribute("padding-left");
|
|
1190
1198
|
}
|
|
1191
1199
|
set paddingLeft(e) {
|
|
1192
|
-
|
|
1200
|
+
g(this, "padding-left", e);
|
|
1193
1201
|
}
|
|
1194
1202
|
get paddingMobile() {
|
|
1195
1203
|
return this.getAttribute("padding--mobile");
|
|
1196
1204
|
}
|
|
1197
1205
|
set paddingMobile(e) {
|
|
1198
|
-
|
|
1206
|
+
g(this, "padding--mobile", e);
|
|
1199
1207
|
}
|
|
1200
1208
|
get paddingBlockMobile() {
|
|
1201
1209
|
return this.getAttribute("padding-block--mobile");
|
|
1202
1210
|
}
|
|
1203
1211
|
set paddingBlockMobile(e) {
|
|
1204
|
-
|
|
1212
|
+
g(this, "padding-block--mobile", e);
|
|
1205
1213
|
}
|
|
1206
1214
|
get paddingInlineMobile() {
|
|
1207
1215
|
return this.getAttribute("padding-inline--mobile");
|
|
1208
1216
|
}
|
|
1209
1217
|
set paddingInlineMobile(e) {
|
|
1210
|
-
|
|
1218
|
+
g(this, "padding-inline--mobile", e);
|
|
1211
1219
|
}
|
|
1212
1220
|
get paddingTopMobile() {
|
|
1213
1221
|
return this.getAttribute("padding-top--mobile");
|
|
1214
1222
|
}
|
|
1215
1223
|
set paddingTopMobile(e) {
|
|
1216
|
-
|
|
1224
|
+
g(this, "padding-top--mobile", e);
|
|
1217
1225
|
}
|
|
1218
1226
|
get paddingRightMobile() {
|
|
1219
1227
|
return this.getAttribute("padding-right--mobile");
|
|
1220
1228
|
}
|
|
1221
1229
|
set paddingRightMobile(e) {
|
|
1222
|
-
|
|
1230
|
+
g(this, "padding-right--mobile", e);
|
|
1223
1231
|
}
|
|
1224
1232
|
get paddingBottomMobile() {
|
|
1225
1233
|
return this.getAttribute("padding-bottom--mobile");
|
|
1226
1234
|
}
|
|
1227
1235
|
set paddingBottomMobile(e) {
|
|
1228
|
-
|
|
1236
|
+
g(this, "padding-bottom--mobile", e);
|
|
1229
1237
|
}
|
|
1230
1238
|
get paddingLeftMobile() {
|
|
1231
1239
|
return this.getAttribute("padding-left--mobile");
|
|
1232
1240
|
}
|
|
1233
1241
|
set paddingLeftMobile(e) {
|
|
1234
|
-
|
|
1242
|
+
g(this, "padding-left--mobile", e);
|
|
1235
1243
|
}
|
|
1236
1244
|
get paddingTablet() {
|
|
1237
1245
|
return this.getAttribute("padding--tablet");
|
|
1238
1246
|
}
|
|
1239
1247
|
set paddingTablet(e) {
|
|
1240
|
-
|
|
1248
|
+
g(this, "padding--tablet", e);
|
|
1241
1249
|
}
|
|
1242
1250
|
get paddingBlockTablet() {
|
|
1243
1251
|
return this.getAttribute("padding-block--tablet");
|
|
1244
1252
|
}
|
|
1245
1253
|
set paddingBlockTablet(e) {
|
|
1246
|
-
|
|
1254
|
+
g(this, "padding-block--tablet", e);
|
|
1247
1255
|
}
|
|
1248
1256
|
get paddingInlineTablet() {
|
|
1249
1257
|
return this.getAttribute("padding-inline--tablet");
|
|
1250
1258
|
}
|
|
1251
1259
|
set paddingInlineTablet(e) {
|
|
1252
|
-
|
|
1260
|
+
g(this, "padding-inline--tablet", e);
|
|
1253
1261
|
}
|
|
1254
1262
|
get paddingTopTablet() {
|
|
1255
1263
|
return this.getAttribute("padding-top--tablet");
|
|
1256
1264
|
}
|
|
1257
1265
|
set paddingTopTablet(e) {
|
|
1258
|
-
|
|
1266
|
+
g(this, "padding-top--tablet", e);
|
|
1259
1267
|
}
|
|
1260
1268
|
get paddingRightTablet() {
|
|
1261
1269
|
return this.getAttribute("padding-right--tablet");
|
|
1262
1270
|
}
|
|
1263
1271
|
set paddingRightTablet(e) {
|
|
1264
|
-
|
|
1272
|
+
g(this, "padding-right--tablet", e);
|
|
1265
1273
|
}
|
|
1266
1274
|
get paddingBottomTablet() {
|
|
1267
1275
|
return this.getAttribute("padding-bottom--tablet");
|
|
1268
1276
|
}
|
|
1269
1277
|
set paddingBottomTablet(e) {
|
|
1270
|
-
|
|
1278
|
+
g(this, "padding-bottom--tablet", e);
|
|
1271
1279
|
}
|
|
1272
1280
|
get paddingLeftTablet() {
|
|
1273
1281
|
return this.getAttribute("padding-left--tablet");
|
|
1274
1282
|
}
|
|
1275
1283
|
set paddingLeftTablet(e) {
|
|
1276
|
-
|
|
1284
|
+
g(this, "padding-left--tablet", e);
|
|
1277
1285
|
}
|
|
1278
1286
|
get paddingLaptop() {
|
|
1279
1287
|
return this.getAttribute("padding--laptop");
|
|
1280
1288
|
}
|
|
1281
1289
|
set paddingLaptop(e) {
|
|
1282
|
-
|
|
1290
|
+
g(this, "padding--laptop", e);
|
|
1283
1291
|
}
|
|
1284
1292
|
get paddingBlockLaptop() {
|
|
1285
1293
|
return this.getAttribute("padding-block--laptop");
|
|
1286
1294
|
}
|
|
1287
1295
|
set paddingBlockLaptop(e) {
|
|
1288
|
-
|
|
1296
|
+
g(this, "padding-block--laptop", e);
|
|
1289
1297
|
}
|
|
1290
1298
|
get paddingInlineLaptop() {
|
|
1291
1299
|
return this.getAttribute("padding-inline--laptop");
|
|
1292
1300
|
}
|
|
1293
1301
|
set paddingInlineLaptop(e) {
|
|
1294
|
-
|
|
1302
|
+
g(this, "padding-inline--laptop", e);
|
|
1295
1303
|
}
|
|
1296
1304
|
get paddingTopLaptop() {
|
|
1297
1305
|
return this.getAttribute("padding-top--laptop");
|
|
1298
1306
|
}
|
|
1299
1307
|
set paddingTopLaptop(e) {
|
|
1300
|
-
|
|
1308
|
+
g(this, "padding-top--laptop", e);
|
|
1301
1309
|
}
|
|
1302
1310
|
get paddingRightLaptop() {
|
|
1303
1311
|
return this.getAttribute("padding-right--laptop");
|
|
1304
1312
|
}
|
|
1305
1313
|
set paddingRightLaptop(e) {
|
|
1306
|
-
|
|
1314
|
+
g(this, "padding-right--laptop", e);
|
|
1307
1315
|
}
|
|
1308
1316
|
get paddingBottomLaptop() {
|
|
1309
1317
|
return this.getAttribute("padding-bottom--laptop");
|
|
1310
1318
|
}
|
|
1311
1319
|
set paddingBottomLaptop(e) {
|
|
1312
|
-
|
|
1320
|
+
g(this, "padding-bottom--laptop", e);
|
|
1313
1321
|
}
|
|
1314
1322
|
get paddingLeftLaptop() {
|
|
1315
1323
|
return this.getAttribute("padding-left--laptop");
|
|
1316
1324
|
}
|
|
1317
1325
|
set paddingLeftLaptop(e) {
|
|
1318
|
-
|
|
1326
|
+
g(this, "padding-left--laptop", e);
|
|
1319
1327
|
}
|
|
1320
1328
|
get border() {
|
|
1321
1329
|
return this.getAttribute("border");
|
|
1322
1330
|
}
|
|
1323
1331
|
set border(e) {
|
|
1324
|
-
|
|
1332
|
+
g(this, "border", e);
|
|
1325
1333
|
}
|
|
1326
1334
|
get borderColor() {
|
|
1327
1335
|
return this.getAttribute("border-color");
|
|
1328
1336
|
}
|
|
1329
1337
|
set borderColor(e) {
|
|
1330
|
-
|
|
1338
|
+
g(this, "border-color", e);
|
|
1331
1339
|
}
|
|
1332
1340
|
get borderSide() {
|
|
1333
1341
|
return this.getAttribute("border-side");
|
|
1334
1342
|
}
|
|
1335
1343
|
set borderSide(e) {
|
|
1336
|
-
|
|
1344
|
+
g(this, "border-side", e);
|
|
1337
1345
|
}
|
|
1338
1346
|
get borderSideMobile() {
|
|
1339
1347
|
return this.getAttribute("border-side--mobile");
|
|
1340
1348
|
}
|
|
1341
1349
|
set borderSideMobile(e) {
|
|
1342
|
-
|
|
1350
|
+
g(this, "border-side--mobile", e);
|
|
1343
1351
|
}
|
|
1344
1352
|
get borderSideTablet() {
|
|
1345
1353
|
return this.getAttribute("border-side--tablet");
|
|
1346
1354
|
}
|
|
1347
1355
|
set borderSideTablet(e) {
|
|
1348
|
-
|
|
1356
|
+
g(this, "border-side--tablet", e);
|
|
1349
1357
|
}
|
|
1350
1358
|
get borderSideLaptop() {
|
|
1351
1359
|
return this.getAttribute("border-side--laptop");
|
|
1352
1360
|
}
|
|
1353
1361
|
set borderSideLaptop(e) {
|
|
1354
|
-
|
|
1362
|
+
g(this, "border-side--laptop", e);
|
|
1355
1363
|
}
|
|
1356
1364
|
get borderRadius() {
|
|
1357
1365
|
return this.getAttribute("border-radius");
|
|
1358
1366
|
}
|
|
1359
1367
|
set borderRadius(e) {
|
|
1360
|
-
|
|
1368
|
+
g(this, "border-radius", e);
|
|
1361
1369
|
}
|
|
1362
1370
|
get noBorderRadius() {
|
|
1363
1371
|
return this.getAttribute("no-border-radius");
|
|
1364
1372
|
}
|
|
1365
1373
|
set noBorderRadius(e) {
|
|
1366
|
-
|
|
1374
|
+
g(this, "no-border-radius", e);
|
|
1367
1375
|
}
|
|
1368
1376
|
get noBorderRadiusMobile() {
|
|
1369
1377
|
return this.getAttribute("no-border-radius--mobile");
|
|
1370
1378
|
}
|
|
1371
1379
|
set noBorderRadiusMobile(e) {
|
|
1372
|
-
|
|
1380
|
+
g(this, "no-border-radius--mobile", e);
|
|
1373
1381
|
}
|
|
1374
1382
|
get noBorderRadiusTablet() {
|
|
1375
1383
|
return this.getAttribute("no-border-radius--tablet");
|
|
1376
1384
|
}
|
|
1377
1385
|
set noBorderRadiusTablet(e) {
|
|
1378
|
-
|
|
1386
|
+
g(this, "no-border-radius--tablet", e);
|
|
1379
1387
|
}
|
|
1380
1388
|
get noBorderRadiusLaptop() {
|
|
1381
1389
|
return this.getAttribute("no-border-radius--laptop");
|
|
1382
1390
|
}
|
|
1383
1391
|
set noBorderRadiusLaptop(e) {
|
|
1384
|
-
|
|
1392
|
+
g(this, "no-border-radius--laptop", e);
|
|
1385
1393
|
}
|
|
1386
1394
|
get backgroundColor() {
|
|
1387
1395
|
return this.getAttribute("background-color");
|
|
1388
1396
|
}
|
|
1389
1397
|
set backgroundColor(e) {
|
|
1390
|
-
|
|
1398
|
+
g(this, "background-color", e);
|
|
1391
1399
|
}
|
|
1392
1400
|
get backgroundColorMobile() {
|
|
1393
1401
|
return this.getAttribute("background-color--mobile");
|
|
1394
1402
|
}
|
|
1395
1403
|
set backgroundColorMobile(e) {
|
|
1396
|
-
|
|
1404
|
+
g(this, "background-color--mobile", e);
|
|
1397
1405
|
}
|
|
1398
1406
|
get backgroundColorTablet() {
|
|
1399
1407
|
return this.getAttribute("background-color--tablet");
|
|
1400
1408
|
}
|
|
1401
1409
|
set backgroundColorTablet(e) {
|
|
1402
|
-
|
|
1410
|
+
g(this, "background-color--tablet", e);
|
|
1403
1411
|
}
|
|
1404
1412
|
get backgroundColorLaptop() {
|
|
1405
1413
|
return this.getAttribute("background-color--laptop");
|
|
1406
1414
|
}
|
|
1407
1415
|
set backgroundColorLaptop(e) {
|
|
1408
|
-
|
|
1416
|
+
g(this, "background-color--laptop", e);
|
|
1409
1417
|
}
|
|
1410
1418
|
get gradient() {
|
|
1411
1419
|
return this.getAttribute("background-gradient");
|
|
1412
1420
|
}
|
|
1413
1421
|
set gradient(e) {
|
|
1414
|
-
|
|
1422
|
+
g(this, "background-gradient", e);
|
|
1415
1423
|
}
|
|
1416
1424
|
get gradientMobile() {
|
|
1417
1425
|
return this.getAttribute("background-gradient--mobile");
|
|
1418
1426
|
}
|
|
1419
1427
|
set gradientMobile(e) {
|
|
1420
|
-
|
|
1428
|
+
g(this, "background-gradient--mobile", e);
|
|
1421
1429
|
}
|
|
1422
1430
|
get gradientTablet() {
|
|
1423
1431
|
return this.getAttribute("background-gradient--tablet");
|
|
1424
1432
|
}
|
|
1425
1433
|
set gradientTablet(e) {
|
|
1426
|
-
|
|
1434
|
+
g(this, "background-gradient--tablet", e);
|
|
1427
1435
|
}
|
|
1428
1436
|
get gradientLaptop() {
|
|
1429
1437
|
return this.getAttribute("background-gradient--laptop");
|
|
1430
1438
|
}
|
|
1431
1439
|
set gradientLaptop(e) {
|
|
1432
|
-
|
|
1440
|
+
g(this, "background-gradient--laptop", e);
|
|
1433
1441
|
}
|
|
1434
1442
|
get backgroundImage() {
|
|
1435
1443
|
return this.getAttribute("background-image");
|
|
1436
1444
|
}
|
|
1437
1445
|
set backgroundImage(e) {
|
|
1438
|
-
|
|
1446
|
+
g(this, "background-image", e);
|
|
1439
1447
|
}
|
|
1440
1448
|
get backgroundImageMobile() {
|
|
1441
1449
|
return this.getAttribute("background-image--mobile");
|
|
1442
1450
|
}
|
|
1443
1451
|
set backgroundImageMobile(e) {
|
|
1444
|
-
|
|
1452
|
+
g(this, "background-image--mobile", e);
|
|
1445
1453
|
}
|
|
1446
1454
|
get backgroundImageTablet() {
|
|
1447
1455
|
return this.getAttribute("background-image--tablet");
|
|
1448
1456
|
}
|
|
1449
1457
|
set backgroundImageTablet(e) {
|
|
1450
|
-
|
|
1458
|
+
g(this, "background-image--tablet", e);
|
|
1451
1459
|
}
|
|
1452
1460
|
get backgroundImageLaptop() {
|
|
1453
1461
|
return this.getAttribute("background-image--laptop");
|
|
1454
1462
|
}
|
|
1455
1463
|
set backgroundImageLaptop(e) {
|
|
1456
|
-
|
|
1464
|
+
g(this, "background-image--laptop", e);
|
|
1457
1465
|
}
|
|
1458
1466
|
get backgroundSize() {
|
|
1459
1467
|
return this.getAttribute("background-size");
|
|
1460
1468
|
}
|
|
1461
1469
|
set backgroundSize(e) {
|
|
1462
|
-
|
|
1470
|
+
g(this, "background-size", e);
|
|
1463
1471
|
}
|
|
1464
1472
|
get backgroundPosition() {
|
|
1465
1473
|
return this.getAttribute("background-position");
|
|
1466
1474
|
}
|
|
1467
1475
|
set backgroundPosition(e) {
|
|
1468
|
-
|
|
1476
|
+
g(this, "background-position", e);
|
|
1469
1477
|
}
|
|
1470
1478
|
get boxShadow() {
|
|
1471
1479
|
return this.getAttribute("box-shadow");
|
|
1472
1480
|
}
|
|
1473
1481
|
set boxShadow(e) {
|
|
1474
|
-
|
|
1482
|
+
g(this, "box-shadow", e);
|
|
1475
1483
|
}
|
|
1476
1484
|
get anchorOffset() {
|
|
1477
1485
|
return this.getAttribute("anchor-offset");
|
|
1478
1486
|
}
|
|
1479
1487
|
set anchorOffset(e) {
|
|
1480
|
-
|
|
1488
|
+
g(this, "anchor-offset", e);
|
|
1481
1489
|
}
|
|
1482
1490
|
get anchorSpacing() {
|
|
1483
1491
|
return this.getAttribute("anchor-spacing");
|
|
1484
1492
|
}
|
|
1485
1493
|
set anchorSpacing(e) {
|
|
1486
|
-
|
|
1494
|
+
g(this, "anchor-spacing", e);
|
|
1487
1495
|
}
|
|
1488
1496
|
get inverted() {
|
|
1489
1497
|
return this.hasAttribute("inverted");
|
|
@@ -1495,46 +1503,48 @@ var z = [
|
|
|
1495
1503
|
return this.getAttribute("subgrid-rows");
|
|
1496
1504
|
}
|
|
1497
1505
|
set subgridRows(e) {
|
|
1498
|
-
|
|
1506
|
+
g(this, "subgrid-rows", e);
|
|
1499
1507
|
}
|
|
1500
1508
|
get subgridGap() {
|
|
1501
1509
|
return this.getAttribute("subgrid-gap");
|
|
1502
1510
|
}
|
|
1503
1511
|
set subgridGap(e) {
|
|
1504
|
-
|
|
1512
|
+
g(this, "subgrid-gap", e);
|
|
1505
1513
|
}
|
|
1506
1514
|
get subgridGapMobile() {
|
|
1507
1515
|
return this.getAttribute("subgrid-gap--mobile");
|
|
1508
1516
|
}
|
|
1509
1517
|
set subgridGapMobile(e) {
|
|
1510
|
-
|
|
1518
|
+
g(this, "subgrid-gap--mobile", e);
|
|
1511
1519
|
}
|
|
1512
1520
|
get subgridGapTablet() {
|
|
1513
1521
|
return this.getAttribute("subgrid-gap--tablet");
|
|
1514
1522
|
}
|
|
1515
1523
|
set subgridGapTablet(e) {
|
|
1516
|
-
|
|
1524
|
+
g(this, "subgrid-gap--tablet", e);
|
|
1517
1525
|
}
|
|
1518
1526
|
get subgridGapLaptop() {
|
|
1519
1527
|
return this.getAttribute("subgrid-gap--laptop");
|
|
1520
1528
|
}
|
|
1521
1529
|
set subgridGapLaptop(e) {
|
|
1522
|
-
|
|
1530
|
+
g(this, "subgrid-gap--laptop", e);
|
|
1523
1531
|
}
|
|
1524
1532
|
};
|
|
1525
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
1533
|
+
customElements.get("px-container") || customElements.define("px-container", _e);
|
|
1526
1534
|
//#endregion
|
|
1527
1535
|
//#region ../../components/Layout/src/Stack.css?inline
|
|
1528
|
-
var
|
|
1529
|
-
|
|
1530
|
-
var
|
|
1536
|
+
var ve = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", V = new CSSStyleSheet();
|
|
1537
|
+
V.replaceSync(ve);
|
|
1538
|
+
var H = document.createElement("template");
|
|
1539
|
+
H.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
|
|
1540
|
+
var ye = [
|
|
1531
1541
|
"",
|
|
1532
1542
|
"default",
|
|
1533
1543
|
"row",
|
|
1534
1544
|
"row-reverse",
|
|
1535
1545
|
"column",
|
|
1536
1546
|
"column-reverse"
|
|
1537
|
-
],
|
|
1547
|
+
], be = [
|
|
1538
1548
|
"",
|
|
1539
1549
|
"default",
|
|
1540
1550
|
"stretch",
|
|
@@ -1544,7 +1554,7 @@ var he = [
|
|
|
1544
1554
|
"end",
|
|
1545
1555
|
"center",
|
|
1546
1556
|
"baseline"
|
|
1547
|
-
],
|
|
1557
|
+
], xe = [
|
|
1548
1558
|
"",
|
|
1549
1559
|
"default",
|
|
1550
1560
|
"flex-start",
|
|
@@ -1555,25 +1565,23 @@ var he = [
|
|
|
1555
1565
|
"space-between",
|
|
1556
1566
|
"space-around",
|
|
1557
1567
|
"space-evenly"
|
|
1558
|
-
],
|
|
1568
|
+
], Se = [
|
|
1559
1569
|
"",
|
|
1560
1570
|
"default",
|
|
1561
1571
|
"nowrap",
|
|
1562
1572
|
"wrap",
|
|
1563
1573
|
"wrap-reverse"
|
|
1564
|
-
],
|
|
1574
|
+
], Ce = [
|
|
1565
1575
|
"",
|
|
1566
1576
|
"visible",
|
|
1567
1577
|
"hidden",
|
|
1568
1578
|
"scroll",
|
|
1569
1579
|
"auto"
|
|
1570
|
-
],
|
|
1580
|
+
], U = class t extends n {
|
|
1571
1581
|
constructor() {
|
|
1572
|
-
super(
|
|
1573
|
-
}
|
|
1574
|
-
connectedCallback() {
|
|
1575
|
-
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
|
|
1582
|
+
super(V), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(H.content, !0));
|
|
1576
1583
|
}
|
|
1584
|
+
connectedCallback() {}
|
|
1577
1585
|
static get observedAttributes() {
|
|
1578
1586
|
return [
|
|
1579
1587
|
...super.observedAttributes,
|
|
@@ -1623,266 +1631,286 @@ var he = [
|
|
|
1623
1631
|
case "justify-content--tablet":
|
|
1624
1632
|
case "justify-content--laptop":
|
|
1625
1633
|
case "justify-content--desktop":
|
|
1626
|
-
this.updateFlexProperties(e, t, n,
|
|
1634
|
+
this.updateFlexProperties(e, t, n, xe);
|
|
1627
1635
|
break;
|
|
1628
1636
|
case "align-items":
|
|
1629
1637
|
case "align-items--mobile":
|
|
1630
1638
|
case "align-items--tablet":
|
|
1631
1639
|
case "align-items--laptop":
|
|
1632
1640
|
case "align-items--desktop":
|
|
1633
|
-
this.updateFlexProperties(e, t, n,
|
|
1641
|
+
this.updateFlexProperties(e, t, n, be);
|
|
1634
1642
|
break;
|
|
1635
1643
|
case "wrap":
|
|
1636
1644
|
case "wrap--mobile":
|
|
1637
1645
|
case "wrap--tablet":
|
|
1638
1646
|
case "wrap--laptop":
|
|
1639
1647
|
case "wrap--desktop":
|
|
1640
|
-
this.updateFlexProperties(e, t, n,
|
|
1648
|
+
this.updateFlexProperties(e, t, n, Se);
|
|
1641
1649
|
break;
|
|
1642
1650
|
case "direction":
|
|
1643
1651
|
case "direction--mobile":
|
|
1644
1652
|
case "direction--tablet":
|
|
1645
1653
|
case "direction--laptop":
|
|
1646
1654
|
case "direction--desktop":
|
|
1647
|
-
this.updateFlexProperties(e, t, n,
|
|
1655
|
+
this.updateFlexProperties(e, t, n, ye);
|
|
1648
1656
|
break;
|
|
1649
1657
|
case "overflow-x":
|
|
1650
1658
|
case "overflow-x--mobile":
|
|
1651
1659
|
case "overflow-x--tablet":
|
|
1652
1660
|
case "overflow-x--laptop":
|
|
1653
1661
|
case "overflow-x--desktop":
|
|
1654
|
-
this.updateOverflowX(e, t, n,
|
|
1662
|
+
this.updateOverflowX(e, t, n, Ce);
|
|
1655
1663
|
break;
|
|
1656
1664
|
default: super.attributeChangedCallback(e, t, n);
|
|
1657
1665
|
}
|
|
1658
1666
|
}
|
|
1659
1667
|
updateOverflowX(e, t, n, r) {
|
|
1660
|
-
if (!
|
|
1661
|
-
|
|
1668
|
+
if (!l(r, n)) {
|
|
1669
|
+
m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
1662
1670
|
return;
|
|
1663
1671
|
}
|
|
1664
1672
|
this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
|
|
1665
1673
|
}
|
|
1666
|
-
updateFlexProperties(e,
|
|
1667
|
-
this.checkName(
|
|
1668
|
-
let
|
|
1669
|
-
if (
|
|
1670
|
-
this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
|
|
1671
|
-
});
|
|
1674
|
+
updateFlexProperties(e, n, r, i) {
|
|
1675
|
+
r !== null && !this.checkName(i, r) && m(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
1676
|
+
let a = e.indexOf("--");
|
|
1677
|
+
if (a === -1) for (let n of t.breakpoints) this.getAttribute(`${e}--${n}`) || this.updateStyle(e, n, r, i);
|
|
1672
1678
|
else {
|
|
1673
|
-
let
|
|
1674
|
-
this.updateStyle(
|
|
1679
|
+
let t = e.slice(0, a), n = e.slice(a + 2);
|
|
1680
|
+
this.updateStyle(t, n, r || this.getAttribute(t), i);
|
|
1675
1681
|
}
|
|
1676
1682
|
}
|
|
1677
1683
|
updateStyle(e, t, n, r) {
|
|
1678
|
-
|
|
1684
|
+
let i = `--flex-${e}--${t}-value`, a = e === "gap";
|
|
1685
|
+
if (!n) {
|
|
1686
|
+
this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
|
|
1687
|
+
return;
|
|
1688
|
+
}
|
|
1689
|
+
if (a && r && r.includes(n)) {
|
|
1690
|
+
let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
|
|
1691
|
+
this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
|
|
1692
|
+
} else this.$el.style.setProperty(i, n);
|
|
1693
|
+
}
|
|
1694
|
+
static {
|
|
1695
|
+
this.breakpoints = [
|
|
1696
|
+
"mobile",
|
|
1697
|
+
"tablet",
|
|
1698
|
+
"laptop",
|
|
1699
|
+
"desktop"
|
|
1700
|
+
];
|
|
1679
1701
|
}
|
|
1680
1702
|
get direction() {
|
|
1681
|
-
return this.getAttribute("direction");
|
|
1703
|
+
return this.getAttribute("direction") ?? "row";
|
|
1682
1704
|
}
|
|
1683
1705
|
set direction(e) {
|
|
1684
|
-
|
|
1706
|
+
g(this, "direction", e);
|
|
1685
1707
|
}
|
|
1686
1708
|
get directionMobile() {
|
|
1687
1709
|
return this.getAttribute("direction--mobile");
|
|
1688
1710
|
}
|
|
1689
1711
|
set directionMobile(e) {
|
|
1690
|
-
|
|
1712
|
+
g(this, "direction--mobile", e);
|
|
1691
1713
|
}
|
|
1692
1714
|
get directionTablet() {
|
|
1693
1715
|
return this.getAttribute("direction--tablet");
|
|
1694
1716
|
}
|
|
1695
1717
|
set directionTablet(e) {
|
|
1696
|
-
|
|
1718
|
+
g(this, "direction--tablet", e);
|
|
1697
1719
|
}
|
|
1698
1720
|
get directionLaptop() {
|
|
1699
1721
|
return this.getAttribute("direction--laptop");
|
|
1700
1722
|
}
|
|
1701
1723
|
set directionLaptop(e) {
|
|
1702
|
-
|
|
1724
|
+
g(this, "direction--laptop", e);
|
|
1703
1725
|
}
|
|
1704
1726
|
get directionDesktop() {
|
|
1705
1727
|
return this.getAttribute("direction--desktop");
|
|
1706
1728
|
}
|
|
1707
1729
|
set directionDesktop(e) {
|
|
1708
|
-
|
|
1730
|
+
g(this, "direction--desktop", e);
|
|
1709
1731
|
}
|
|
1710
1732
|
get gap() {
|
|
1711
|
-
return this.getAttribute("gap");
|
|
1733
|
+
return this.getAttribute("gap") ?? "none";
|
|
1712
1734
|
}
|
|
1713
1735
|
set gap(e) {
|
|
1714
|
-
|
|
1736
|
+
g(this, "gap", e);
|
|
1715
1737
|
}
|
|
1716
1738
|
get gapMobile() {
|
|
1717
1739
|
return this.getAttribute("gap--mobile");
|
|
1718
1740
|
}
|
|
1719
1741
|
set gapMobile(e) {
|
|
1720
|
-
|
|
1742
|
+
g(this, "gap--mobile", e);
|
|
1721
1743
|
}
|
|
1722
1744
|
get gapTablet() {
|
|
1723
1745
|
return this.getAttribute("gap--tablet");
|
|
1724
1746
|
}
|
|
1725
1747
|
set gapTablet(e) {
|
|
1726
|
-
|
|
1748
|
+
g(this, "gap--tablet", e);
|
|
1727
1749
|
}
|
|
1728
1750
|
get gapLaptop() {
|
|
1729
1751
|
return this.getAttribute("gap--laptop");
|
|
1730
1752
|
}
|
|
1731
1753
|
set gapLaptop(e) {
|
|
1732
|
-
|
|
1754
|
+
g(this, "gap--laptop", e);
|
|
1733
1755
|
}
|
|
1734
1756
|
get gapDesktop() {
|
|
1735
1757
|
return this.getAttribute("gap--desktop");
|
|
1736
1758
|
}
|
|
1737
1759
|
set gapDesktop(e) {
|
|
1738
|
-
|
|
1760
|
+
g(this, "gap--desktop", e);
|
|
1739
1761
|
}
|
|
1740
1762
|
get justifyContent() {
|
|
1741
|
-
return this.getAttribute("justify-content");
|
|
1763
|
+
return this.getAttribute("justify-content") ?? "flex-start";
|
|
1742
1764
|
}
|
|
1743
1765
|
set justifyContent(e) {
|
|
1744
|
-
|
|
1766
|
+
g(this, "justify-content", e);
|
|
1745
1767
|
}
|
|
1746
1768
|
get justifyContentMobile() {
|
|
1747
1769
|
return this.getAttribute("justify-content--mobile");
|
|
1748
1770
|
}
|
|
1749
1771
|
set justifyContentMobile(e) {
|
|
1750
|
-
|
|
1772
|
+
g(this, "justify-content--mobile", e);
|
|
1751
1773
|
}
|
|
1752
1774
|
get justifyContentTablet() {
|
|
1753
1775
|
return this.getAttribute("justify-content--tablet");
|
|
1754
1776
|
}
|
|
1755
1777
|
set justifyContentTablet(e) {
|
|
1756
|
-
|
|
1778
|
+
g(this, "justify-content--tablet", e);
|
|
1757
1779
|
}
|
|
1758
1780
|
get justifyContentLaptop() {
|
|
1759
1781
|
return this.getAttribute("justify-content--laptop");
|
|
1760
1782
|
}
|
|
1761
1783
|
set justifyContentLaptop(e) {
|
|
1762
|
-
|
|
1784
|
+
g(this, "justify-content--laptop", e);
|
|
1763
1785
|
}
|
|
1764
1786
|
get justifyContentDesktop() {
|
|
1765
1787
|
return this.getAttribute("justify-content--desktop");
|
|
1766
1788
|
}
|
|
1767
1789
|
set justifyContentDesktop(e) {
|
|
1768
|
-
|
|
1790
|
+
g(this, "justify-content--desktop", e);
|
|
1769
1791
|
}
|
|
1770
1792
|
get alignItems() {
|
|
1771
|
-
return this.getAttribute("align-items");
|
|
1793
|
+
return this.getAttribute("align-items") ?? "stretch";
|
|
1772
1794
|
}
|
|
1773
1795
|
set alignItems(e) {
|
|
1774
|
-
|
|
1796
|
+
g(this, "align-items", e);
|
|
1775
1797
|
}
|
|
1776
1798
|
get alignItemsMobile() {
|
|
1777
1799
|
return this.getAttribute("align-items--mobile");
|
|
1778
1800
|
}
|
|
1779
1801
|
set alignItemsMobile(e) {
|
|
1780
|
-
|
|
1802
|
+
g(this, "align-items--mobile", e);
|
|
1781
1803
|
}
|
|
1782
1804
|
get alignItemsTablet() {
|
|
1783
1805
|
return this.getAttribute("align-items--tablet");
|
|
1784
1806
|
}
|
|
1785
1807
|
set alignItemsTablet(e) {
|
|
1786
|
-
|
|
1808
|
+
g(this, "align-items--tablet", e);
|
|
1787
1809
|
}
|
|
1788
1810
|
get alignItemsLaptop() {
|
|
1789
1811
|
return this.getAttribute("align-items--laptop");
|
|
1790
1812
|
}
|
|
1791
1813
|
set alignItemsLaptop(e) {
|
|
1792
|
-
|
|
1814
|
+
g(this, "align-items--laptop", e);
|
|
1793
1815
|
}
|
|
1794
1816
|
get alignItemsDesktop() {
|
|
1795
1817
|
return this.getAttribute("align-items--desktop");
|
|
1796
1818
|
}
|
|
1797
1819
|
set alignItemsDesktop(e) {
|
|
1798
|
-
|
|
1820
|
+
g(this, "align-items--desktop", e);
|
|
1799
1821
|
}
|
|
1800
1822
|
get wrap() {
|
|
1801
|
-
return this.getAttribute("wrap");
|
|
1823
|
+
return this.getAttribute("wrap") ?? "nowrap";
|
|
1802
1824
|
}
|
|
1803
1825
|
set wrap(e) {
|
|
1804
|
-
|
|
1826
|
+
g(this, "wrap", e);
|
|
1805
1827
|
}
|
|
1806
1828
|
get wrapMobile() {
|
|
1807
1829
|
return this.getAttribute("wrap--mobile");
|
|
1808
1830
|
}
|
|
1809
1831
|
set wrapMobile(e) {
|
|
1810
|
-
|
|
1832
|
+
g(this, "wrap--mobile", e);
|
|
1811
1833
|
}
|
|
1812
1834
|
get wrapTablet() {
|
|
1813
1835
|
return this.getAttribute("wrap--tablet");
|
|
1814
1836
|
}
|
|
1815
1837
|
set wrapTablet(e) {
|
|
1816
|
-
|
|
1838
|
+
g(this, "wrap--tablet", e);
|
|
1817
1839
|
}
|
|
1818
1840
|
get wrapLaptop() {
|
|
1819
1841
|
return this.getAttribute("wrap--laptop");
|
|
1820
1842
|
}
|
|
1821
1843
|
set wrapLaptop(e) {
|
|
1822
|
-
|
|
1844
|
+
g(this, "wrap--laptop", e);
|
|
1823
1845
|
}
|
|
1824
1846
|
get wrapDesktop() {
|
|
1825
1847
|
return this.getAttribute("wrap--desktop");
|
|
1826
1848
|
}
|
|
1827
1849
|
set wrapDesktop(e) {
|
|
1828
|
-
|
|
1850
|
+
g(this, "wrap--desktop", e);
|
|
1829
1851
|
}
|
|
1830
1852
|
get overflowX() {
|
|
1831
|
-
return this.getAttribute("overflow-x");
|
|
1853
|
+
return this.getAttribute("overflow-x") ?? "visible";
|
|
1832
1854
|
}
|
|
1833
1855
|
set overflowX(e) {
|
|
1834
|
-
|
|
1856
|
+
g(this, "overflow-x", e);
|
|
1835
1857
|
}
|
|
1836
1858
|
get overflowXMobile() {
|
|
1837
1859
|
return this.getAttribute("overflow-x--mobile");
|
|
1838
1860
|
}
|
|
1839
1861
|
set overflowXMobile(e) {
|
|
1840
|
-
|
|
1862
|
+
g(this, "overflow-x--mobile", e);
|
|
1841
1863
|
}
|
|
1842
1864
|
get overflowXTablet() {
|
|
1843
1865
|
return this.getAttribute("overflow-x--tablet");
|
|
1844
1866
|
}
|
|
1845
1867
|
set overflowXTablet(e) {
|
|
1846
|
-
|
|
1868
|
+
g(this, "overflow-x--tablet", e);
|
|
1847
1869
|
}
|
|
1848
1870
|
get overflowXLaptop() {
|
|
1849
1871
|
return this.getAttribute("overflow-x--laptop");
|
|
1850
1872
|
}
|
|
1851
1873
|
set overflowXLaptop(e) {
|
|
1852
|
-
|
|
1874
|
+
g(this, "overflow-x--laptop", e);
|
|
1853
1875
|
}
|
|
1854
1876
|
get overflowXDesktop() {
|
|
1855
1877
|
return this.getAttribute("overflow-x--desktop");
|
|
1856
1878
|
}
|
|
1857
1879
|
set overflowXDesktop(e) {
|
|
1858
|
-
|
|
1880
|
+
g(this, "overflow-x--desktop", e);
|
|
1859
1881
|
}
|
|
1860
1882
|
get $el() {
|
|
1861
|
-
return this.shadowRoot.
|
|
1883
|
+
return this.shadowRoot.firstElementChild;
|
|
1862
1884
|
}
|
|
1863
1885
|
};
|
|
1864
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
1865
|
-
var
|
|
1866
|
-
|
|
1867
|
-
|
|
1886
|
+
customElements.get("px-stack") || customElements.define("px-stack", U);
|
|
1887
|
+
var W = (e) => e === "direction" || e.startsWith("direction--"), we = class extends U {
|
|
1888
|
+
get direction() {
|
|
1889
|
+
return "column";
|
|
1868
1890
|
}
|
|
1869
|
-
|
|
1870
|
-
|
|
1891
|
+
set direction(e) {
|
|
1892
|
+
g(this, "direction", e);
|
|
1893
|
+
}
|
|
1894
|
+
attributeChangedCallback(e, t, n) {
|
|
1895
|
+
W(e) || super.attributeChangedCallback(e, t, n);
|
|
1871
1896
|
}
|
|
1872
1897
|
};
|
|
1873
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
1874
|
-
var
|
|
1875
|
-
|
|
1876
|
-
|
|
1898
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", we);
|
|
1899
|
+
var Te = class extends U {
|
|
1900
|
+
get direction() {
|
|
1901
|
+
return "row";
|
|
1877
1902
|
}
|
|
1878
|
-
|
|
1879
|
-
|
|
1903
|
+
set direction(e) {
|
|
1904
|
+
g(this, "direction", e);
|
|
1905
|
+
}
|
|
1906
|
+
attributeChangedCallback(e, t, n) {
|
|
1907
|
+
W(e) || super.attributeChangedCallback(e, t, n);
|
|
1880
1908
|
}
|
|
1881
1909
|
};
|
|
1882
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
1910
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", Te);
|
|
1883
1911
|
//#endregion
|
|
1884
1912
|
//#region ../../components/Layout/src/Spacer.ts
|
|
1885
|
-
var
|
|
1913
|
+
var Ee = class extends HTMLElement {
|
|
1886
1914
|
constructor() {
|
|
1887
1915
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
1888
1916
|
}
|
|
@@ -1928,11 +1956,11 @@ var Se = class extends HTMLElement {
|
|
|
1928
1956
|
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
1929
1957
|
}
|
|
1930
1958
|
};
|
|
1931
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
1959
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", Ee);
|
|
1932
1960
|
//#endregion
|
|
1933
1961
|
//#region ../../components/Layout/src/Page.css?inline
|
|
1934
|
-
var
|
|
1935
|
-
G.replaceSync(
|
|
1962
|
+
var De = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", G = new CSSStyleSheet();
|
|
1963
|
+
G.replaceSync(De);
|
|
1936
1964
|
var K = class extends n {
|
|
1937
1965
|
constructor() {
|
|
1938
1966
|
super(G), this.template = () => `
|
|
@@ -2028,7 +2056,7 @@ var K = class extends n {
|
|
|
2028
2056
|
</px-container>
|
|
2029
2057
|
</px-vstack>
|
|
2030
2058
|
</px-container>
|
|
2031
|
-
`, this.shadowRoot
|
|
2059
|
+
`, _(this.shadowRoot, this.template());
|
|
2032
2060
|
}
|
|
2033
2061
|
static get observedAttributes() {
|
|
2034
2062
|
return [
|
|
@@ -2118,14 +2146,17 @@ var K = class extends n {
|
|
|
2118
2146
|
customElements.get("px-page") === void 0 && customElements.define("px-page", K);
|
|
2119
2147
|
//#endregion
|
|
2120
2148
|
//#region ../../components/Span/src/span.css?inline
|
|
2121
|
-
var
|
|
2122
|
-
q.replaceSync(
|
|
2123
|
-
var
|
|
2149
|
+
var Oe = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (width>=48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (width>=64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", ke = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (width>=48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (width>=64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (width>=90.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", q = new CSSStyleSheet(), J = new CSSStyleSheet();
|
|
2150
|
+
q.replaceSync(Oe), J.replaceSync(ke);
|
|
2151
|
+
var Ae = class e extends t {
|
|
2152
|
+
static {
|
|
2153
|
+
this.template = u("<span><slot></slot></span>");
|
|
2154
|
+
}
|
|
2124
2155
|
static {
|
|
2125
2156
|
this.nativeName = "span";
|
|
2126
2157
|
}
|
|
2127
2158
|
constructor() {
|
|
2128
|
-
super(q, J),
|
|
2159
|
+
super(q, J), _(this.shadowRoot, e.template);
|
|
2129
2160
|
}
|
|
2130
2161
|
static get observedAttributes() {
|
|
2131
2162
|
return [
|
|
@@ -2141,13 +2172,13 @@ var Ee = class extends t {
|
|
|
2141
2172
|
attributeChangedCallback(e, t, n) {
|
|
2142
2173
|
if (t !== n) switch (e) {
|
|
2143
2174
|
case "color":
|
|
2144
|
-
this.updateTypography(e, t, n,
|
|
2175
|
+
this.updateTypography(e, t, n, ne);
|
|
2145
2176
|
break;
|
|
2146
2177
|
case "font-size":
|
|
2147
|
-
this.updateTypography(e, t, n,
|
|
2178
|
+
this.updateTypography(e, t, n, re);
|
|
2148
2179
|
break;
|
|
2149
2180
|
case "font-weight":
|
|
2150
|
-
this.updateTypography(e, t, n,
|
|
2181
|
+
this.updateTypography(e, t, n, ie);
|
|
2151
2182
|
break;
|
|
2152
2183
|
case "disabled":
|
|
2153
2184
|
this.color = "state-disabled";
|
|
@@ -2156,7 +2187,7 @@ var Ee = class extends t {
|
|
|
2156
2187
|
}
|
|
2157
2188
|
}
|
|
2158
2189
|
updateTypography(e, t, n, r) {
|
|
2159
|
-
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`), this.checkName(r, n) ||
|
|
2190
|
+
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`), this.checkName(r, n) || m(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
2160
2191
|
}
|
|
2161
2192
|
get color() {
|
|
2162
2193
|
return this.getAttribute("color");
|
|
@@ -2195,14 +2226,17 @@ var Ee = class extends t {
|
|
|
2195
2226
|
this._updateBooleanAttribute("disabled", e);
|
|
2196
2227
|
}
|
|
2197
2228
|
};
|
|
2198
|
-
customElements.get("px-span") || customElements.define("px-span",
|
|
2229
|
+
customElements.get("px-span") || customElements.define("px-span", Ae);
|
|
2199
2230
|
//#endregion
|
|
2200
2231
|
//#region src/autocomplete-option.css?inline
|
|
2201
2232
|
var Y = ":host{display:block}.container{min-height:var(--px-size-l);display:flex}.container>button{appearance:none;box-sizing:border-box;width:100%;min-height:100%;color:inherit;font:inherit;letter-spacing:0;text-align:left;cursor:pointer;padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);background:0 0;border:0;align-items:center;margin:0;text-decoration:none;display:flex}.autocomplete-header{overflow:hidden}.autocomplete-header px-span{overflow-wrap:anywhere;min-width:0}:host([selected]) button,button:hover{background-color:var(--px-color-background-state-hover-default)}button:focus-visible{outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default);outline-offset:calc(-1 * var(--px-focus-offset-mobile));position:relative}@media only screen and (width>=48rem){button{padding:var(--px-padding-xs-tablet) var(--px-padding-s-tablet)}button:focus-visible{outline-width:var(--px-focus-outline-tablet);outline-offset:calc(-1 * var(--px-focus-offset-tablet))}}@media only screen and (width>=64.0625rem){button{padding:var(--px-padding-xs-laptop) var(--px-padding-s-laptop)}button:focus-visible{outline-width:var(--px-focus-outline-laptop);outline-offset:calc(-1 * var(--px-focus-offset-laptop))}}@media only screen and (width>=90.0625rem){button{padding:var(--px-padding-xs-desktop) var(--px-padding-s-desktop)}button:focus-visible{outline-width:var(--px-focus-outline-desktop);outline-offset:calc(-1 * var(--px-focus-offset-desktop))}}", X = new CSSStyleSheet();
|
|
2202
2233
|
X.replaceSync(Y);
|
|
2203
|
-
var Z = class extends HTMLElement {
|
|
2234
|
+
var Z = class e extends HTMLElement {
|
|
2235
|
+
static {
|
|
2236
|
+
this.template = u("<px-container border-radius=\"none\" padding=\"s\" background-color=\"container-default\" class=\"autocomplete-header\"><px-hstack gap=\"s\" align-items=\"center\"><px-icon name=\"search\" color=\"brand\" size=\"m\" from=\"lavender\"></px-icon><px-span size=\"body-s\"><slot></slot></px-span></px-hstack></px-container>");
|
|
2237
|
+
}
|
|
2204
2238
|
constructor() {
|
|
2205
|
-
super(), this.
|
|
2239
|
+
super(), this.attachShadow({ mode: "open" }), _(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [X];
|
|
2206
2240
|
}
|
|
2207
2241
|
connectedCallback() {
|
|
2208
2242
|
this.#e();
|
|
@@ -2222,9 +2256,12 @@ customElements.get("px-autocomplete-header") || customElements.define("px-autoco
|
|
|
2222
2256
|
//#region src/AutocompleteOption.ts
|
|
2223
2257
|
var Q = new CSSStyleSheet();
|
|
2224
2258
|
Q.replaceSync(Y);
|
|
2225
|
-
var $ = class extends HTMLElement {
|
|
2259
|
+
var $ = class e extends HTMLElement {
|
|
2260
|
+
static {
|
|
2261
|
+
this.template = u("<div tabindex=\"-1\" class=\"container\"><button type=\"button\" role=\"option\"><px-span size=\"body-s\"><slot></slot></px-span></button></div>");
|
|
2262
|
+
}
|
|
2226
2263
|
constructor() {
|
|
2227
|
-
super(), this.
|
|
2264
|
+
super(), this.attachShadow({ mode: "open" }), _(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [Q];
|
|
2228
2265
|
}
|
|
2229
2266
|
static get observedAttributes() {
|
|
2230
2267
|
return ["selected", "type"];
|
|
@@ -2265,4 +2302,4 @@ var $ = class extends HTMLElement {
|
|
|
2265
2302
|
};
|
|
2266
2303
|
customElements.get("px-autocomplete-option") || customElements.define("px-autocomplete-option", $);
|
|
2267
2304
|
//#endregion
|
|
2268
|
-
export {
|
|
2305
|
+
export { k as Autocomplete, Z as AutocompleteHeader, $ as AutocompleteOption };
|