@proximus/lavender-autocomplete 1.4.14-beta.2 → 1.4.15-alpha.2

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.
Files changed (3) hide show
  1. package/dist/Autocomplete.d.ts +4 -4
  2. package/dist/index.es.js +1894 -2167
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,60 +1,28 @@
1
- var oe = (s) => {
2
- throw TypeError(s);
3
- };
4
- var B = (s, e, t) => e.has(s) || oe("Cannot " + t);
5
- var a = (s, e, t) => (B(s, e, "read from private field"), t ? t.call(s) : e.get(s)), c = (s, e, t) => e.has(s) ? oe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), g = (s, e, t, i) => (B(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), u = (s, e, t) => (B(s, e, "access private method"), t);
6
- import { WithExtraAttributes as L, log as p, PxElement as ce, iconSizeValuesKC as Ee, cssTokenBreakpoints as f, paddingValues as v, gapValues as le, boxShadowValues as De, backgroundSizeValues as Te, noBorderRadiusValues as Re, borderRadiusValues as Me, borderSideValues as He, borderValues as Pe, gradientValues as se, backgroundColorValues as F, borderColorValues as ae, checkName as R, AttributeBreakpointHandlerDelegate as je, fontweightValues as Be, fontsizeValues as Ie, colorValues as Fe, isFalsy as I } from "@proximus/lavender-common";
7
- const qe = ":host .dropdown-content{background-color:var(--px-color-background-surface-default);border-radius:var(--px-radius-main);box-shadow:0 4px 6px -1px #25252514;padding:0;margin-top:calc(var(--px-focus-offset-mobile) + var(--px-focus-outline-mobile));overflow:auto}@media screen and (min-width: 48rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-tablet) + var(--px-focus-outline-tablet))}}@media screen and (min-width: 64.0625rem){:host .dropdown-content{margin-top:calc(var(--px-focus-offset-laptop) + var(--px-focus-outline-laptop))}}@media screen and (min-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)}", Oe = ':host{position:relative}::slotted([slot="popover"]){position:fixed;border-radius:var(--px-radius-main, 8px);background:var(--px-color-background-container-light-default, #fff);box-shadow:0 20px 25px -5px #25252514;margin:0;padding:var(--px-padding-xs-mobile) 0;border:0;right:0;width:auto;max-height:var(--px-popover-max-height)}:host([grow]) ::slotted([slot="trigger"]):after{right:0;padding-right:var(--px-padding-xs-mobile)}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){top:auto}:host([anchoralignment="bottom-right"]) ::slotted([slot="popover"]){left:auto}@media screen and (max-width: 47.938rem){::slotted([slot="trigger"]){display:block;width:100%}:host([anchoralignment="top-left"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}:host([anchoralignment="top-right"]) ::slotted([slot="popover"]){left:var(--px-padding-s-mobile)}}@media screen and (min-width: 48rem){::slotted([slot="popover"]){padding-block:var(--px-padding-s-desktop);right:auto;width:auto}}', Ne = [
8
- "top-left",
9
- "top-right",
10
- "bottom-left",
11
- "bottom-right"
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 l, boxShadowValues as ee, checkName as u, colorValues as d, cssTokenBreakpoints as f, fontsizeValues as te, fontweightValues as p, gapValues as m, gradientValues as h, iconSizeValuesKC as ne, log as g, noBorderRadiusValues as re, paddingValues as _, propertyToAttributeSetter as v } from "@proximus/lavender-common";
2
+ //#region src/autocomplete.css?inline
3
+ var y = ":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)}", b = ":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}}", x = [
4
+ "top-left",
5
+ "top-right",
6
+ "bottom-left",
7
+ "bottom-right"
12
8
  ];
13
- function ne(s, e, t = "bottom-left", i, r = !1) {
14
- "anchorName" in document.documentElement.style && r === !1 || e.addEventListener("toggle", () => {
15
- var ie, re;
16
- if (!s || !e)
17
- return;
18
- const o = s.getBoundingClientRect(), n = ((ie = window.visualViewport) == null ? void 0 : ie.height) ?? window.innerHeight, l = ((re = window.visualViewport) == null ? void 0 : re.width) ?? window.innerWidth, d = i.getPropertyValue("--px-padding-s-mobile") || "16px", Le = parseInt(
19
- (i.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", "")
20
- );
21
- ["top-left", "top-right"].includes(t) ? (e.style.bottom = `calc( ${d} + ${n - o.top - window.scrollY}px)`, e.style.top = "auto", t === "top-left" ? e.style.left = l < 768 ? `${d}px` : `${o.left}px` : e.style.right = l < 768 ? `${d}px` : `${l - o.right}px`) : (e.style.top = `${o.bottom + window.scrollY}px`, t === "bottom-left" ? e.style.left = l < 768 ? `${d}px` : `${o.left}px` : e.style.right = l < 768 ? `${d}px` : `${l - o.right - Le}px`);
22
- });
9
+ //#endregion
10
+ //#region ../../components/Dropdown/src/anchorPolyfill.ts
11
+ function S(e, t, n = "bottom-left", r, i = !1) {
12
+ "anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
13
+ if (!e || !t) return;
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", ""));
15
+ ["top-left", "top-right"].includes(n) ? (t.style.bottom = `calc( ${s} + ${a - i.top - window.scrollY}px)`, t.style.top = "auto", n === "top-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right}px`) : (t.style.top = `${i.bottom + window.scrollY}px`, n === "bottom-left" ? t.style.left = o < 768 ? `${s}px` : `${i.left}px` : t.style.right = o < 768 ? `${s}px` : `${o - i.right - c}px`);
16
+ });
23
17
  }
24
- const pe = new CSSStyleSheet();
25
- pe.replaceSync(Oe);
26
- const T = "bottom-left";
27
- var S, de, k, w, ue;
28
- class Ze extends L {
29
- constructor() {
30
- super(pe);
31
- c(this, S);
32
- c(this, k);
33
- c(this, w);
34
- this.template = () => `
35
- <style>${this.css}</style>
36
- <slot name="trigger"></slot>
37
- <slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
38
- this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.manualToggle || (this.$trigger.ariaExpanded = "true"));
39
- }, this.showPopover = () => {
40
- this.isAboutToClose || this.$popoverElement.showPopover();
41
- }, this.hidePopover = () => {
42
- this.$popoverElement.hidePopover();
43
- }, g(this, k, () => {
44
- this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
45
- }), g(this, w, () => {
46
- this.$popoverElement.matches(":popover-open") || setTimeout(() => {
47
- this.isAboutToClose = !1;
48
- });
49
- }), this.shadowRoot.innerHTML = this.template();
50
- }
51
- /**
52
- * Instance level styling for the dropdown component.
53
- * This is used to set the anchor name and position of the popover.
54
- * @private
55
- */
56
- get css() {
57
- return `::slotted([slot='trigger']) {
18
+ /* v8 ignore end */
19
+ //#endregion
20
+ //#region ../../components/Dropdown/src/Dropdown.ts
21
+ var C = new CSSStyleSheet();
22
+ C.replaceSync(b);
23
+ var w = "bottom-left", ie = class extends n {
24
+ get css() {
25
+ return `::slotted([slot='trigger']) {
58
26
  anchor-name: ${this.anchorName};
59
27
  }
60
28
  :host([anchoralignment="bottom-left"]) {
@@ -85,129 +53,121 @@ class Ze extends L {
85
53
  right: anchor(${this.anchorName} right);
86
54
  }
87
55
  }`;
88
- }
89
- static get observedAttributes() {
90
- return [
91
- ...super.observedAttributes,
92
- "id",
93
- "anchoralignment",
94
- "use-polyfill",
95
- "manual-toggle",
96
- "popover-height"
97
- ];
98
- }
99
- connectedCallback() {
100
- this.getAttribute("id") || this.setAttribute(
101
- "id",
102
- `px-dropdown-${Math.random().toString(36).substring(2, 15)}`
103
- ), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", T), ne(
104
- this.$trigger,
105
- this.$popoverElement,
106
- this.anchorAlignment,
107
- getComputedStyle(this),
108
- this.usePolyfill
109
- );
110
- }
111
- attributeChangedCallback(t, i, r) {
112
- var o;
113
- if (i !== r)
114
- switch (t) {
115
- case "id":
116
- this.initPopover();
117
- break;
118
- case "use-polyfill":
119
- ne(
120
- this.$trigger,
121
- this.$popoverElement,
122
- this.anchorAlignment,
123
- getComputedStyle(this),
124
- this.usePolyfill
125
- );
126
- break;
127
- case "manual-toggle":
128
- r != null && ((o = this.$trigger) == null || o.removeAttribute("aria-expanded"));
129
- break;
130
- case "popover-height":
131
- this.updatePopoverHeight(r);
132
- break;
133
- default:
134
- super.attributeChangedCallback(t, i, r);
135
- break;
136
- }
137
- }
138
- updatePopoverHeight(t) {
139
- t ? this.$popoverElement.style.setProperty(
140
- "--px-popover-max-height",
141
- t
142
- ) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
143
- }
144
- initPopover() {
145
- this.$trigger && (this.$trigger.setAttribute("popovertarget", this.popoverId), this.$trigger.setAttribute("aria-controls", this.getAttribute("id")), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, u(this, S, de).call(this), u(this, S, ue).call(this));
146
- }
147
- get popoverId() {
148
- return `${this.getAttribute("id")}-popover`;
149
- }
150
- get anchorName() {
151
- return `--${this.getAttribute("id")}-anchor`;
152
- }
153
- get $style() {
154
- return this.shadowRoot.querySelector("style");
155
- }
156
- get $trigger() {
157
- return this.querySelector('[slot="trigger"]');
158
- }
159
- get $popoverElement() {
160
- return this.querySelector('[slot="popover"]');
161
- }
162
- get anchorAlignment() {
163
- return this.getAttribute("anchoralignment") || T;
164
- }
165
- set anchorAlignment(t) {
166
- Ne.includes(t) ? this.setAttribute("anchoralignment", t) : (p(
167
- `Invalid anchor alignment value: ${t}. Using default ${T}.`
168
- ), this.setAttribute("anchoralignment", T));
169
- }
170
- get usePolyfill() {
171
- return this.hasAttribute("use-polyfill");
172
- }
173
- set usePolyfill(t) {
174
- t ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
175
- }
176
- get manualToggle() {
177
- return this.hasAttribute("manual-toggle");
178
- }
179
- set manualToggle(t) {
180
- t ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
181
- }
182
- get popoverHeight() {
183
- return this.getAttribute("popover-height");
184
- }
185
- set popoverHeight(t) {
186
- t ? this.setAttribute("popover-height", t) : this.removeAttribute("popover-height");
187
- }
188
- }
189
- S = new WeakSet(), de = function() {
190
- this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener(
191
- "beforetoggle",
192
- a(this, k)
193
- ), this.$popoverElement.removeEventListener("toggle", a(this, w));
194
- }, k = new WeakMap(), w = new WeakMap(), /**
195
- * Handles the manual display of the popover when the trigger is clicked.
196
- * This is necessary for cases where the trigger is not a button or input element.
197
- * This method adds event listeners to the trigger element to toggle the popover.
198
- * It also manages the state of whether the popover is about to close or not to avoid
199
- * race conditions when the popover is toggled and the trigger click event is fired.
200
- */
201
- ue = function() {
202
- this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", a(this, k)), this.$popoverElement.addEventListener("toggle", a(this, w)));
56
+ }
57
+ static get observedAttributes() {
58
+ return [
59
+ ...super.observedAttributes,
60
+ "id",
61
+ "anchoralignment",
62
+ "use-polyfill",
63
+ "manual-toggle",
64
+ "popover-height"
65
+ ];
66
+ }
67
+ constructor() {
68
+ super(C), this.template = () => `
69
+ <style>${this.css}</style>
70
+ <slot name="trigger"></slot>
71
+ <slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
72
+ this.isAboutToClose || (this.$popoverElement.togglePopover({ source: this.$trigger }), this.manualToggle || (this.$trigger.ariaExpanded = "true"));
73
+ }, this.showPopover = () => {
74
+ this.isAboutToClose || this.$popoverElement.showPopover();
75
+ }, this.hidePopover = () => {
76
+ this.$popoverElement.hidePopover();
77
+ }, this.#t = () => {
78
+ this.$popoverElement.matches(":popover-open") && (this.isAboutToClose = !0, this.manualToggle || (this.$trigger.ariaExpanded = "false"));
79
+ }, this.#n = () => {
80
+ this.$popoverElement.matches(":popover-open") || setTimeout(() => {
81
+ this.isAboutToClose = !1;
82
+ });
83
+ }, this.shadowRoot.innerHTML = this.template();
84
+ }
85
+ connectedCallback() {
86
+ this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", w), S(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
87
+ }
88
+ #e() {
89
+ this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener("beforetoggle", this.#t), this.$popoverElement.removeEventListener("toggle", this.#n);
90
+ }
91
+ #t;
92
+ #n;
93
+ #r() {
94
+ this.$trigger && !["button", "input"].includes(this.$trigger.localName) && (this.manualToggle || this.$trigger.addEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.addEventListener("beforetoggle", this.#t), this.$popoverElement.addEventListener("toggle", this.#n));
95
+ }
96
+ attributeChangedCallback(e, t, n) {
97
+ if (t !== n) switch (e) {
98
+ case "id":
99
+ this.initPopover();
100
+ break;
101
+ case "use-polyfill":
102
+ S(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
103
+ break;
104
+ case "manual-toggle":
105
+ n != null && this.$trigger?.removeAttribute("aria-expanded");
106
+ break;
107
+ case "popover-height":
108
+ this.updatePopoverHeight(n);
109
+ break;
110
+ default: super.attributeChangedCallback(e, t, n);
111
+ }
112
+ }
113
+ updatePopoverHeight(e) {
114
+ e ? this.$popoverElement.style.setProperty("--px-popover-max-height", e) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
115
+ }
116
+ initPopover() {
117
+ if (this.$trigger) {
118
+ this.$trigger.setAttribute("popovertarget", this.popoverId);
119
+ let e = this.getAttribute("id");
120
+ e && this.$trigger.setAttribute("aria-controls", e), this.hasAttribute("manual-toggle") || this.$trigger.setAttribute("aria-expanded", "false"), this.$popoverElement.setAttribute("id", this.popoverId), this.$popoverElement.setAttribute("popover", ""), this.$style.innerHTML = this.css, this.#e(), this.#r();
121
+ }
122
+ }
123
+ get popoverId() {
124
+ return `${this.getAttribute("id")}-popover`;
125
+ }
126
+ get anchorName() {
127
+ return `--${this.getAttribute("id")}-anchor`;
128
+ }
129
+ get $style() {
130
+ return this.shadowRoot.querySelector("style");
131
+ }
132
+ get $trigger() {
133
+ return this.querySelector("[slot=\"trigger\"]");
134
+ }
135
+ get $popoverElement() {
136
+ return this.querySelector("[slot=\"popover\"]");
137
+ }
138
+ get anchorAlignment() {
139
+ return this.getAttribute("anchoralignment") || w;
140
+ }
141
+ set anchorAlignment(e) {
142
+ x.includes(e) ? this.setAttribute("anchoralignment", e) : (g(`Invalid anchor alignment value: ${e}. Using default ${w}.`), this.setAttribute("anchoralignment", w));
143
+ }
144
+ get usePolyfill() {
145
+ return this.hasAttribute("use-polyfill");
146
+ }
147
+ set usePolyfill(e) {
148
+ e ? this.setAttribute("use-polyfill", "") : this.removeAttribute("use-polyfill");
149
+ }
150
+ get manualToggle() {
151
+ return this.hasAttribute("manual-toggle");
152
+ }
153
+ set manualToggle(e) {
154
+ e ? this.setAttribute("manual-toggle", "") : this.removeAttribute("manual-toggle");
155
+ }
156
+ get popoverHeight() {
157
+ return this.getAttribute("popover-height");
158
+ }
159
+ set popoverHeight(e) {
160
+ v(this, "popover-height", e);
161
+ }
203
162
  };
204
- customElements.get("px-dropdown") || customElements.define("px-dropdown", Ze);
205
- const Ge = `:host{display:block;--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)}: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{margin:0;outline:0;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);height:var(--px-size-l)!important;background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0 var(--px-size-border-m) inset;border:none;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-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}input:not([type=file]).extended,textarea.extended,select.extended,:host([auto-complete]) input.extended,#input-file-container.extended{width:100%}input:not([type=file]):hover,input:not([type=file]).error:hover,input:not([type=file]).success:hover,textarea:hover,textarea.error:hover,textarea.success:hover,select:hover,select.error:hover,select.success:hover,:host([auto-complete]) input:hover,:host([auto-complete]) input.error:hover,:host([auto-complete]) input.success:hover,#input-file-container:hover,#input-file-container.error:hover,#input-file-container.success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0 var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),:host([auto-complete]) input:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#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)}input:not([type=file]):active,textarea:active,select:active,:host([auto-complete]) input:active,#input-file-container:active{box-shadow:var(--px-color-border-state-active-default) 0 0 0 var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}input:not([type=file]):disabled,input:not([type=file]):read-only:not(:is(select),#input-file-container),textarea:disabled,textarea:read-only:not(:is(select),#input-file-container),select:disabled,select:read-only:not(:is(select),#input-file-container),:host([auto-complete]) input:disabled,:host([auto-complete]) input:read-only:not(:is(select),#input-file-container),#input-file-container:disabled,#input-file-container:read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0 0 inset;background:transparent;padding:0;font-weight:var(--px-font-weight-title);text-align:left}input:not([type=file]).error,textarea.error,select.error,:host([auto-complete]) input.error,#input-file-container.error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}input:not([type=file]).success,textarea.success,select.success,:host([auto-complete]) input.success,#input-file-container.success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0 var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,:host([auto-complete]) input[type=search].success,:host([auto-complete]) input[type=search].error,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,:host([auto-complete]) input#input-file-container.success,:host([auto-complete]) input#input-file-container.error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)),center right var(--px-padding-s-mobile)}input:not([type=file])[type=time].success,textarea[type=time].success,select[type=time].success,:host([auto-complete]) input[type=time].success,#input-file-container[type=time].success{background-image:var(--icon-success)}input:not([type=file])[type=time].error,textarea[type=time].error,select[type=time].error,:host([auto-complete]) input[type=time].error,#input-file-container[type=time].error{background-image:var(--icon-error)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],:host([auto-complete]) input[type=date],:host([auto-complete]) input[type=datetime-local],:host([auto-complete]) input[type=month],:host([auto-complete]) input[type=week],:host([auto-complete]) input[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#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))}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=date]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=datetime-local]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=month]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=week]::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].error,:host([auto-complete]) input[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#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))}input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].success,input:not([type=file])[type=week].success,input:not([type=file])[type=time].success,textarea[type=date].success,textarea[type=datetime-local].success,textarea[type=month].success,textarea[type=week].success,textarea[type=time].success,select[type=date].success,select[type=datetime-local].success,select[type=month].success,select[type=week].success,select[type=time].success,:host([auto-complete]) input[type=date].success,:host([auto-complete]) input[type=datetime-local].success,:host([auto-complete]) input[type=month].success,:host([auto-complete]) input[type=week].success,:host([auto-complete]) input[type=time].success,#input-file-container[type=date].success,#input-file-container[type=datetime-local].success,#input-file-container[type=month].success,#input-file-container[type=week].success,#input-file-container[type=time].success{background-image:var(--icon-success)}input:not([type=file])[type=date].error,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=month].error,input:not([type=file])[type=week].error,input:not([type=file])[type=time].error,textarea[type=date].error,textarea[type=datetime-local].error,textarea[type=month].error,textarea[type=week].error,textarea[type=time].error,select[type=date].error,select[type=datetime-local].error,select[type=month].error,select[type=week].error,select[type=time].error,:host([auto-complete]) input[type=date].error,:host([auto-complete]) input[type=datetime-local].error,:host([auto-complete]) input[type=month].error,:host([auto-complete]) input[type=week].error,:host([auto-complete]) input[type=time].error,#input-file-container[type=date].error,#input-file-container[type=datetime-local].error,#input-file-container[type=month].error,#input-file-container[type=week].error,#input-file-container[type=time].error{background-image:var(--icon-error)}input:not([type=file])[type=search],textarea[type=search],select[type=search],:host([auto-complete]) input[type=search],#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))}input:not([type=file])[type=search]::-webkit-search-cancel-button,textarea[type=search]::-webkit-search-cancel-button,select[type=search]::-webkit-search-cancel-button,:host([auto-complete]) input[type=search]::-webkit-search-cancel-button,#input-file-container[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);background-position:center;height:var(--cancel-icon-height);width:var(--cancel-icon-width);background-repeat:no-repeat;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)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,:host([auto-complete]) input[type=search]:focus::-webkit-search-cancel-button,:host([auto-complete]) input[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,#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)}input:not([type=file])[type=search][list=suggestions]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:focus::-webkit-search-cancel-button,:host([auto-complete]) input[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus::-webkit-search-cancel-button,#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) )}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,:host([auto-complete]) input[type=search].success:hover,:host([auto-complete]) input[type=search].success:focus-visible,:host([auto-complete]) input[type=search].error:hover,:host([auto-complete]) input[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}input:not([type=file])[type=search].success,textarea[type=search].success,select[type=search].success,:host([auto-complete]) input[type=search].success,#input-file-container[type=search].success{background-image:var(--icon-success),var(--icon-search)}input:not([type=file])[type=search].error,textarea[type=search].error,select[type=search].error,:host([auto-complete]) input[type=search].error,#input-file-container[type=search].error{background-image:var(--icon-error),var(--icon-search)}input:not([type=file]):is(select),textarea:is(select),select:is(select),:host([auto-complete]) input:is(select),#input-file-container:is(select){width:100%;text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s))}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,:host([auto-complete]) input:is(select).success,:host([auto-complete]) input:is(select).error,#input-file-container:is(select).success,#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))}input:not([type=file]):is(select).success,textarea:is(select).success,select:is(select).success,:host([auto-complete]) input:is(select).success,#input-file-container:is(select).success{background-image:var(--icon-success),var(--icon-select)}input:not([type=file]):is(select).error,textarea:is(select).error,select:is(select).error,:host([auto-complete]) input:is(select).error,#input-file-container:is(select).error{background-image:var(--icon-error),var(--icon-select)}input:not([type=file]):is(textarea),textarea:is(textarea),select:is(textarea),:host([auto-complete]) input:is(textarea),#input-file-container:is(textarea){height:auto!important;flex-grow:0}input:not([type=file]):is(textarea).success,input:not([type=file]):is(textarea).error,textarea:is(textarea).success,textarea:is(textarea).error,select:is(textarea).success,select:is(textarea).error,:host([auto-complete]) input:is(textarea).success,:host([auto-complete]) input:is(textarea).error,#input-file-container:is(textarea).success,#input-file-container:is(textarea).error{background-position:top .5rem right 1rem}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,:host([auto-complete]) input#input-file-container,#input-file-container#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);display:flex;align-items:center;max-width:100%}input:not([type=file])#input-file-container span,textarea#input-file-container span,select#input-file-container span,:host([auto-complete]) input#input-file-container span,#input-file-container#input-file-container span{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}input:not([type=file])#input-file-container.success,textarea#input-file-container.success,select#input-file-container.success,:host([auto-complete]) input#input-file-container.success,#input-file-container#input-file-container.success{background-image:var(--icon-success),var(--icon-upload)}input:not([type=file])#input-file-container.error,textarea#input-file-container.error,select#input-file-container.error,:host([auto-complete]) input#input-file-container.error,#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:center right 1rem}: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-image:var(--icon-success),var(--icon-search)!important;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)}: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-image:var(--icon-error),var(--icon-search)!important;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)}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{display:inline-flex;flex-direction:column;gap:var(--px-spacing-2xs-mobile)}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{display:flex;flex-direction:column;gap:var(--px-spacing-2xs-mobile)}input[type=file]{-webkit-appearance:none;opacity:0;height:0;width:0}@media screen and (max-width: 47.938rem){input:not([type=file]).extended--mobile,textarea.extended--mobile,select.extended--mobile,:host([auto-complete]) input.extended--mobile,#input-file-container.extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (min-width: 48rem) and (max-width: 64rem){input:not([type=file]).extended--tablet,textarea.extended--tablet,select.extended--tablet,:host([auto-complete]) input.extended--tablet,#input-file-container.extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (min-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-image:var(--icon-success),var(--icon-search)!important;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)}: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-image:var(--icon-error),var(--icon-search)!important;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)}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}input:not([type=file]):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#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)}input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)),center right var(--px-padding-s-tablet)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#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))}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#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))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#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))}input:not([type=file])[type=search]::-webkit-search-cancel-button,textarea[type=search]::-webkit-search-cancel-button,select[type=search]::-webkit-search-cancel-button,#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)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator,#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)}input:not([type=file])[type=search][list=suggestions]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus::-webkit-search-cancel-button,#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) )}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-tablet)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s))}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#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))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#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 (min-width: 64.0625rem) and (max-width: 90rem){input:not([type=file]).extended--laptop,textarea.extended--laptop,select.extended--laptop,:host([auto-complete]) input.extended--laptop,#input-file-container.extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (min-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-image:var(--icon-success),var(--icon-search)!important;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)}: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-image:var(--icon-error),var(--icon-search)!important;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)}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)}input:not([type=file]):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#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)}input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)),center right var(--px-padding-s-laptop)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#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))}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#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))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#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))}input:not([type=file])[type=search]::-webkit-search-cancel-button,textarea[type=search]::-webkit-search-cancel-button,select[type=search]::-webkit-search-cancel-button,#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)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#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)}input:not([type=file])[type=search][list=suggestions]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus::-webkit-search-cancel-button,#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) )}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#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))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#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 (min-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-image:var(--icon-success),var(--icon-search)!important;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)}: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-image:var(--icon-error),var(--icon-search)!important;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)}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)}input:not([type=file]):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),textarea:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),select:focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]),#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)}input:not([type=file])[type=search].success,input:not([type=file])[type=search].error,input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,input:not([type=file])#input-file-container.success,input:not([type=file])#input-file-container.error,textarea[type=search].success,textarea[type=search].error,textarea:is(select).success,textarea:is(select).error,textarea#input-file-container.success,textarea#input-file-container.error,select[type=search].success,select[type=search].error,select:is(select).success,select:is(select).error,select#input-file-container.success,select#input-file-container.error,#input-file-container[type=search].success,#input-file-container[type=search].error,#input-file-container:is(select).success,#input-file-container:is(select).error,#input-file-container#input-file-container.success,#input-file-container#input-file-container.error{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)),center right var(--px-padding-s-desktop)}input:not([type=file])[type=date],input:not([type=file])[type=datetime-local],input:not([type=file])[type=month],input:not([type=file])[type=week],input:not([type=file])[type=time],textarea[type=date],textarea[type=datetime-local],textarea[type=month],textarea[type=week],textarea[type=time],select[type=date],select[type=datetime-local],select[type=month],select[type=week],select[type=time],#input-file-container[type=date],#input-file-container[type=datetime-local],#input-file-container[type=month],#input-file-container[type=week],#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))}input:not([type=file])[type=date]::-webkit-calendar-picker-indicator,input:not([type=file])[type=datetime-local]::-webkit-calendar-picker-indicator,input:not([type=file])[type=month]::-webkit-calendar-picker-indicator,input:not([type=file])[type=week]::-webkit-calendar-picker-indicator,input:not([type=file])[type=time]::-webkit-calendar-picker-indicator,textarea[type=date]::-webkit-calendar-picker-indicator,textarea[type=datetime-local]::-webkit-calendar-picker-indicator,textarea[type=month]::-webkit-calendar-picker-indicator,textarea[type=week]::-webkit-calendar-picker-indicator,textarea[type=time]::-webkit-calendar-picker-indicator,select[type=date]::-webkit-calendar-picker-indicator,select[type=datetime-local]::-webkit-calendar-picker-indicator,select[type=month]::-webkit-calendar-picker-indicator,select[type=week]::-webkit-calendar-picker-indicator,select[type=time]::-webkit-calendar-picker-indicator,#input-file-container[type=date]::-webkit-calendar-picker-indicator,#input-file-container[type=datetime-local]::-webkit-calendar-picker-indicator,#input-file-container[type=month]::-webkit-calendar-picker-indicator,#input-file-container[type=week]::-webkit-calendar-picker-indicator,#input-file-container[type=time]::-webkit-calendar-picker-indicator{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s)) * -1)}input:not([type=file])[type=date].error,input:not([type=file])[type=date].success,input:not([type=file])[type=datetime-local].error,input:not([type=file])[type=datetime-local].success,input:not([type=file])[type=month].error,input:not([type=file])[type=month].success,input:not([type=file])[type=week].error,input:not([type=file])[type=week].success,input:not([type=file])[type=time].error,input:not([type=file])[type=time].success,textarea[type=date].error,textarea[type=date].success,textarea[type=datetime-local].error,textarea[type=datetime-local].success,textarea[type=month].error,textarea[type=month].success,textarea[type=week].error,textarea[type=week].success,textarea[type=time].error,textarea[type=time].success,select[type=date].error,select[type=date].success,select[type=datetime-local].error,select[type=datetime-local].success,select[type=month].error,select[type=month].success,select[type=week].error,select[type=week].success,select[type=time].error,select[type=time].success,#input-file-container[type=date].error,#input-file-container[type=date].success,#input-file-container[type=datetime-local].error,#input-file-container[type=datetime-local].success,#input-file-container[type=month].error,#input-file-container[type=month].success,#input-file-container[type=week].error,#input-file-container[type=week].success,#input-file-container[type=time].error,#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))}input:not([type=file])[type=search],textarea[type=search],select[type=search],#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))}input:not([type=file])[type=search]::-webkit-search-cancel-button,textarea[type=search]::-webkit-search-cancel-button,select[type=search]::-webkit-search-cancel-button,#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)}input:not([type=file])[type=search]:focus::-webkit-search-cancel-button,input:not([type=file])[type=search]:hover::-webkit-search-cancel-button,textarea[type=search]:focus::-webkit-search-cancel-button,textarea[type=search]:hover::-webkit-search-cancel-button,select[type=search]:focus::-webkit-search-cancel-button,select[type=search]:hover::-webkit-search-cancel-button,#input-file-container[type=search]:focus::-webkit-search-cancel-button,#input-file-container[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,textarea[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,select[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator,#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)}input:not([type=file])[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,input:not([type=file])[type=search][list=suggestions]:hover::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,textarea[type=search][list=suggestions]:hover::-webkit-search-cancel-button,select[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,select[type=search][list=suggestions]:hover::-webkit-search-cancel-button,#input-file-container[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button,#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) )}input:not([type=file])[type=search].success:hover,input:not([type=file])[type=search].success:focus-visible,input:not([type=file])[type=search].error:hover,input:not([type=file])[type=search].error:focus-visible,textarea[type=search].success:hover,textarea[type=search].success:focus-visible,textarea[type=search].error:hover,textarea[type=search].error:focus-visible,select[type=search].success:hover,select[type=search].success:focus-visible,select[type=search].error:hover,select[type=search].error:focus-visible,#input-file-container[type=search].success:hover,#input-file-container[type=search].success:focus-visible,#input-file-container[type=search].error:hover,#input-file-container[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}input:not([type=file]):is(select),textarea:is(select),select:is(select),#input-file-container:is(select){padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s))}input:not([type=file]):is(select).success,input:not([type=file]):is(select).error,textarea:is(select).success,textarea:is(select).error,select:is(select).success,select:is(select).error,#input-file-container:is(select).success,#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))}input:not([type=file])#input-file-container,textarea#input-file-container,select#input-file-container,#input-file-container#input-file-container{background-position:center right var(--px-padding-s-desktop)}input:not([type=file]).extended--desktop,textarea.extended--desktop,select.extended--desktop,#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)}}`, he = new CSSStyleSheet();
206
- he.replaceSync(Ge);
207
- class j extends ce {
208
- constructor() {
209
- var e;
210
- super(he), this.containerTemplate = () => `
163
+ customElements.get("px-dropdown") || customElements.define("px-dropdown", ie);
164
+ //#endregion
165
+ //#region ../../components/Input/src/input.css?inline
166
+ var ae = ":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)}}", T = new CSSStyleSheet();
167
+ T.replaceSync(ae);
168
+ var E = class extends t {
169
+ constructor() {
170
+ super(T), this.containerTemplate = () => `
211
171
  <div id="container">
212
172
  <div id="label-helper">
213
173
  <label><slot name="label"></slot></label>
@@ -216,410 +176,372 @@ class j extends ce {
216
176
  </div>
217
177
  ${this.template()}
218
178
  </div>
219
- `, this.shadowRoot.innerHTML = this.containerTemplate(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
220
- }
221
- static get observedAttributes() {
222
- return [
223
- ...super.observedAttributes,
224
- "state",
225
- "extended",
226
- "extended--mobile",
227
- "extended--tablet",
228
- "extended--laptop",
229
- "extended--desktop"
230
- ];
231
- }
232
- attributeChangedCallback(e, t, i) {
233
- e === "state" && t !== i ? this.stateChangeCallback(t, i) : (e === "extended" || e === "extended--mobile" || e === "extended--tablet" || e === "extended--laptop" || e === "extended--desktop") && t !== i ? this.$el.classList.toggle(e) : super.attributeChangedCallback(e, t, i);
234
- }
235
- stateChangeCallback(e, t) {
236
- this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.ariaInvalid = "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(
237
- this.$slotStatusText,
238
- this.$statusTextSlot,
239
- "status-text"
240
- );
241
- }
242
- formData() {
243
- if (this.$el.name) {
244
- const e = new FormData();
245
- return e.append(this.getAttribute("name"), this.$el.value), e;
246
- }
247
- }
248
- connectedCallback() {
249
- ["change"].forEach((e) => {
250
- this.$el.addEventListener(e, () => {
251
- var t;
252
- (t = this.internals) == null || t.setFormValue(this.formData()), this.dispatchEvent(
253
- new CustomEvent(e, { bubbles: !0, composed: !0 })
254
- );
255
- });
256
- }), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(
257
- this.$slotStatusText,
258
- this.$statusTextSlot,
259
- "status-text"
260
- );
261
- }
262
- // Form-associated callbacks
263
- static get formAssociated() {
264
- return !0;
265
- }
266
- // Set default behavior when the element is attached to a form
267
- formResetCallback() {
268
- this.$el.value = "";
269
- }
270
- formStateRestoreCallback(e) {
271
- this.$el.value = e;
272
- }
273
- setupForId() {
274
- const e = Math.random().toString(36).substr(2, 9);
275
- this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
276
- }
277
- setupAriaDescribedBy(e, t, i) {
278
- if (e.length > 0 && this.$el.hasAttribute("id")) {
279
- t.setAttribute("id", `${this.$el.id}-${i}`);
280
- let r = this.$el.getAttribute("aria-describedby");
281
- r ? r += ` ${this.$el.id}-${i}` : r = `${this.$el.id}-${i}`, this.$el.setAttribute("aria-describedby", r);
282
- }
283
- }
284
- get state() {
285
- return this.getAttribute("state");
286
- }
287
- set state(e) {
288
- this.setAttribute("state", e);
289
- }
290
- get extended() {
291
- return this.hasAttribute("extended");
292
- }
293
- set extended(e) {
294
- e ? this.setAttribute("extended", "") : this.removeAttribute("extended");
295
- }
296
- get extendedMobile() {
297
- return this.hasAttribute("extended--mobile");
298
- }
299
- set extendedMobile(e) {
300
- e ? this.setAttribute("extended--mobile", "") : this.removeAttribute("extended--mobile");
301
- }
302
- get extendedTablet() {
303
- return this.hasAttribute("extended--tablet");
304
- }
305
- set extendedTablet(e) {
306
- e ? this.setAttribute("extended--tablet", "") : this.removeAttribute("extended--tablet");
307
- }
308
- get extendedLaptop() {
309
- return this.hasAttribute("extended--laptop");
310
- }
311
- set extendedLaptop(e) {
312
- e ? this.setAttribute("extended--laptop", "") : this.removeAttribute("extended--laptop");
313
- }
314
- get extendedDesktop() {
315
- return this.hasAttribute("extended--desktop");
316
- }
317
- set extendedDesktop(e) {
318
- e ? this.setAttribute("extended--desktop", "") : this.removeAttribute("extended--desktop");
319
- }
320
- get $labelSlot() {
321
- return this.shadowRoot.querySelector('slot[name="label"]');
322
- }
323
- get $helperSlot() {
324
- return this.shadowRoot.querySelector('slot[name="helper"]');
325
- }
326
- get $statusTextSlot() {
327
- return this.shadowRoot.querySelector('slot[name="status-text"]');
328
- }
329
- get $label() {
330
- return this.shadowRoot.querySelector("label");
331
- }
332
- get $labelHelper() {
333
- return this.shadowRoot.querySelector("#label-helper");
334
- }
335
- get $slotHelper() {
336
- return this.querySelectorAll('[slot="helper"]');
337
- }
338
- get $slotStatusText() {
339
- return this.querySelectorAll('[slot="status-text"]');
340
- }
341
- }
342
- const _ = class _ extends j {
343
- constructor() {
344
- super();
345
- }
346
- connectedCallback() {
347
- if (super.connectedCallback(), this.$el.type === "search" && (this.syncDataList(), this.observer = new MutationObserver(() => {
348
- this.syncDataList();
349
- }), this.observer.observe(this, {
350
- childList: !0,
351
- subtree: !0
352
- })), this.type === "search") {
353
- const e = navigator.userAgent;
354
- e.includes("Chrome") && !e.includes("OPR") && (this.$el.style.setProperty("--search-icon-focus-width", "2.5rem"), this.$el.style.setProperty("--search-icon-datalist-width", "1rem"), this.$el.style.setProperty(
355
- "--search-cancel-datalist-margin-right",
356
- "0"
357
- ));
358
- }
359
- }
360
- syncDataList() {
361
- var t, i;
362
- const e = (t = this.$lightSuggestions) == null ? void 0 : t.cloneNode(
363
- !0
364
- );
365
- if (e) {
366
- if (e.id = "suggestions", this.$shadowSuggestions) {
367
- this.$shadowSuggestions.replaceWith(e);
368
- return;
369
- }
370
- this.$el.insertAdjacentElement("afterend", e), this.$el.setAttribute("list", "suggestions");
371
- } else
372
- (i = this.$shadowSuggestions) == null || i.remove(), this.$el.hasAttribute("list") && this.$el.removeAttribute("list");
373
- }
374
- disconnectedCallback() {
375
- var e;
376
- (e = this.observer) == null || e.disconnect();
377
- }
378
- template() {
379
- return '<div><input type="text" /></div>';
380
- }
381
- get $lightSuggestions() {
382
- return this.querySelector("datalist");
383
- }
384
- get $shadowSuggestions() {
385
- return this.shadowRoot.querySelector("datalist");
386
- }
387
- get $container() {
388
- return this.shadowRoot.querySelector("div");
389
- }
179
+ `, this.shadowRoot.innerHTML = this.containerTemplate(), this.internals = this.attachInternals?.();
180
+ }
181
+ static get observedAttributes() {
182
+ return [
183
+ ...super.observedAttributes,
184
+ "state",
185
+ "extended",
186
+ "extended--mobile",
187
+ "extended--tablet",
188
+ "extended--laptop",
189
+ "extended--desktop"
190
+ ];
191
+ }
192
+ attributeChangedCallback(e, t, n) {
193
+ 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);
194
+ }
195
+ stateChangeCallback(e, t) {
196
+ this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.ariaInvalid = "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");
197
+ }
198
+ formData() {
199
+ let e = new FormData(), t = this.getAttribute("name");
200
+ return this.$el.name && t && e.append(t, this.$el.value), e;
201
+ }
202
+ connectedCallback() {
203
+ ["change"].forEach((e) => {
204
+ this.$el.addEventListener(e, () => {
205
+ this.internals?.setFormValue(this.formData()), this.dispatchEvent(new CustomEvent(e, {
206
+ bubbles: !0,
207
+ composed: !0
208
+ }));
209
+ });
210
+ }), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
211
+ }
212
+ static get formAssociated() {
213
+ return !0;
214
+ }
215
+ formResetCallback() {
216
+ this.$el.value = "";
217
+ }
218
+ formStateRestoreCallback(e) {
219
+ this.$el.value = e;
220
+ }
221
+ setupForId() {
222
+ let e = Math.random().toString(36).substr(2, 9);
223
+ this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
224
+ }
225
+ setupAriaDescribedBy(e, t, n) {
226
+ if (e.length > 0 && this.$el.hasAttribute("id")) {
227
+ t.setAttribute("id", `${this.$el.id}-${n}`);
228
+ let e = this.$el.getAttribute("aria-describedby");
229
+ e ? e += ` ${this.$el.id}-${n}` : e = `${this.$el.id}-${n}`, this.$el.setAttribute("aria-describedby", e);
230
+ }
231
+ }
232
+ get state() {
233
+ return this.getAttribute("state");
234
+ }
235
+ set state(e) {
236
+ this.setAttribute("state", e);
237
+ }
238
+ get extended() {
239
+ return this.hasAttribute("extended");
240
+ }
241
+ set extended(e) {
242
+ e ? this.setAttribute("extended", "") : this.removeAttribute("extended");
243
+ }
244
+ get extendedMobile() {
245
+ return this.hasAttribute("extended--mobile");
246
+ }
247
+ set extendedMobile(e) {
248
+ e ? this.setAttribute("extended--mobile", "") : this.removeAttribute("extended--mobile");
249
+ }
250
+ get extendedTablet() {
251
+ return this.hasAttribute("extended--tablet");
252
+ }
253
+ set extendedTablet(e) {
254
+ e ? this.setAttribute("extended--tablet", "") : this.removeAttribute("extended--tablet");
255
+ }
256
+ get extendedLaptop() {
257
+ return this.hasAttribute("extended--laptop");
258
+ }
259
+ set extendedLaptop(e) {
260
+ e ? this.setAttribute("extended--laptop", "") : this.removeAttribute("extended--laptop");
261
+ }
262
+ get extendedDesktop() {
263
+ return this.hasAttribute("extended--desktop");
264
+ }
265
+ set extendedDesktop(e) {
266
+ e ? this.setAttribute("extended--desktop", "") : this.removeAttribute("extended--desktop");
267
+ }
268
+ get $labelSlot() {
269
+ return this.shadowRoot.querySelector("slot[name=\"label\"]");
270
+ }
271
+ get $helperSlot() {
272
+ return this.shadowRoot.querySelector("slot[name=\"helper\"]");
273
+ }
274
+ get $statusTextSlot() {
275
+ return this.shadowRoot.querySelector("slot[name=\"status-text\"]");
276
+ }
277
+ get $label() {
278
+ return this.shadowRoot.querySelector("label");
279
+ }
280
+ get $labelHelper() {
281
+ return this.shadowRoot.querySelector("#label-helper");
282
+ }
283
+ get $slotHelper() {
284
+ return this.querySelectorAll("[slot=\"helper\"]");
285
+ }
286
+ get $slotStatusText() {
287
+ return this.querySelectorAll("[slot=\"status-text\"]");
288
+ }
289
+ }, oe = class extends E {
290
+ static {
291
+ this.nativeName = "input";
292
+ }
293
+ constructor() {
294
+ super(), this.observer = null, this.syncDataList = () => {
295
+ let e = this.$lightSuggestions?.cloneNode(!0);
296
+ if (e) {
297
+ if (e.id = "suggestions", this.$shadowSuggestions) {
298
+ this.$shadowSuggestions.replaceWith(e);
299
+ return;
300
+ }
301
+ this.$el.insertAdjacentElement("afterend", e), this.$el.setAttribute("list", "suggestions");
302
+ } else this.$shadowSuggestions?.remove(), this.$el.hasAttribute("list") && this.$el.removeAttribute("list");
303
+ };
304
+ }
305
+ connectedCallback() {
306
+ if (super.connectedCallback(), this.$el.type === "search" && (this.syncDataList(), this.observer = new MutationObserver(this.syncDataList), this.observer.observe(this, {
307
+ childList: !0,
308
+ subtree: !0
309
+ })), this.type === "search") {
310
+ let e = navigator.userAgent;
311
+ e.includes("Chrome") && !e.includes("OPR") && (this.$el.style.setProperty("--search-icon-focus-width", "2.5rem"), this.$el.style.setProperty("--search-icon-datalist-width", "1rem"), this.$el.style.setProperty("--search-cancel-datalist-margin-right", "0"));
312
+ }
313
+ }
314
+ disconnectedCallback() {
315
+ this.observer?.disconnect();
316
+ }
317
+ template() {
318
+ return "<div><input type=\"text\" /></div>";
319
+ }
320
+ get $lightSuggestions() {
321
+ return this.querySelector("datalist");
322
+ }
323
+ get $shadowSuggestions() {
324
+ return this.shadowRoot.querySelector("datalist");
325
+ }
326
+ get $container() {
327
+ return this.shadowRoot.querySelector("div");
328
+ }
390
329
  };
391
- _.nativeName = "input";
392
- let q = _;
393
- customElements.get("px-input") || customElements.define("px-input", q);
394
- const U = class U extends j {
395
- constructor() {
396
- super();
397
- }
398
- template() {
399
- return "<textarea></textarea>";
400
- }
330
+ customElements.get("px-input") || customElements.define("px-input", oe);
331
+ //#endregion
332
+ //#region ../../components/Input/src/TextArea.ts
333
+ var se = class extends E {
334
+ static {
335
+ this.nativeName = "textarea";
336
+ }
337
+ constructor() {
338
+ super();
339
+ }
340
+ template() {
341
+ return "<textarea></textarea>";
342
+ }
401
343
  };
402
- U.nativeName = "textarea";
403
- let O = U;
404
- customElements.get("px-textarea") || customElements.define("px-textarea", O);
405
- var D, Z;
406
- const J = class J extends j {
407
- constructor() {
408
- super();
409
- c(this, D);
410
- }
411
- template() {
412
- return "<select></select>";
413
- }
414
- connectedCallback() {
415
- super.connectedCallback(), u(this, D, Z).call(this), this.observer = new MutationObserver(() => {
416
- u(this, D, Z).call(this);
417
- }), this.observer.observe(this, {
418
- childList: !0,
419
- subtree: !0
420
- });
421
- }
422
- disconnectedCallback() {
423
- this.observer.disconnect();
424
- }
344
+ customElements.get("px-textarea") || customElements.define("px-textarea", se);
345
+ //#endregion
346
+ //#region ../../components/Input/src/Select.ts
347
+ var ce = class extends E {
348
+ static {
349
+ this.nativeName = "select";
350
+ }
351
+ template() {
352
+ return "<select></select>";
353
+ }
354
+ constructor() {
355
+ super(), this.observer = null, this.#e = () => {
356
+ let e = Array.from(this.children).filter((e) => {
357
+ let t = e.tagName.toLowerCase();
358
+ return t === "option" || t === "optgroup";
359
+ });
360
+ this.$el.innerHTML = "", e.length > 0 && e.forEach((e) => {
361
+ let t = e.cloneNode(!0);
362
+ this.$el.appendChild(t);
363
+ });
364
+ };
365
+ }
366
+ connectedCallback() {
367
+ super.connectedCallback(), this.#e(), this.observer = new MutationObserver(this.#e), this.observer.observe(this, {
368
+ childList: !0,
369
+ subtree: !0
370
+ });
371
+ }
372
+ #e;
373
+ disconnectedCallback() {
374
+ this.observer?.disconnect();
375
+ }
425
376
  };
426
- D = new WeakSet(), Z = function() {
427
- const t = Array.from(this.children).filter((i) => {
428
- const r = i.tagName.toLowerCase();
429
- return r === "option" || r === "optgroup";
430
- });
431
- this.$el.innerHTML = "", t.length > 0 && t.forEach((i) => {
432
- const r = i.cloneNode(!0);
433
- this.$el.appendChild(r);
434
- });
435
- }, J.nativeName = "select";
436
- let N = J;
437
- customElements.get("px-select") || customElements.define("px-select", N);
438
- const Q = class Q extends j {
439
- constructor() {
440
- super();
441
- }
442
- connectedCallback() {
443
- super.connectedCallback(), this.addEventListener("click", (e) => {
444
- e.target === this && this.$el.click();
445
- }), this.$el.addEventListener("change", () => {
446
- this.$span.innerText = this.$el.files[0].name;
447
- });
448
- }
449
- template() {
450
- return '<div id="input-file-container"><span></span><input type="file" /></input>';
451
- }
452
- stateChangeCallback(e, t) {
453
- super.stateChangeCallback(e, t), this.$container.classList.toggle(e), this.$container.classList.toggle(t);
454
- }
455
- get $container() {
456
- return this.shadowRoot.querySelector("#input-file-container");
457
- }
458
- get $span() {
459
- return this.shadowRoot.querySelector("span");
460
- }
461
- get $el() {
462
- return this.shadowRoot.querySelector('input[type="file"]');
463
- }
377
+ customElements.get("px-select") || customElements.define("px-select", ce);
378
+ //#endregion
379
+ //#region ../../components/Input/src/Upload.ts
380
+ var le = class extends E {
381
+ static {
382
+ this.nativeName = "input";
383
+ }
384
+ constructor() {
385
+ super();
386
+ }
387
+ connectedCallback() {
388
+ super.connectedCallback(), this.addEventListener("click", (e) => {
389
+ e.target === this && this.$el.click();
390
+ }), this.$el.addEventListener("change", () => {
391
+ this.$el.files && this.$el.files.length > 0 && (this.$span.innerText = this.$el.files[0].name);
392
+ });
393
+ }
394
+ template() {
395
+ return "<div id=\"input-file-container\"><span></span><input type=\"file\" /></input>";
396
+ }
397
+ stateChangeCallback(e, t) {
398
+ super.stateChangeCallback(e, t), this.$container.classList.toggle(e), this.$container.classList.toggle(t);
399
+ }
400
+ get $container() {
401
+ return this.shadowRoot.querySelector("#input-file-container");
402
+ }
403
+ get $span() {
404
+ return this.shadowRoot.querySelector("span");
405
+ }
406
+ get $el() {
407
+ return this.shadowRoot.querySelector("input[type=\"file\"]");
408
+ }
464
409
  };
465
- Q.nativeName = "input";
466
- let G = Q;
467
- customElements.get("px-fileupload") || customElements.define("px-fileupload", G);
468
- const be = new CSSStyleSheet();
469
- be.replaceSync(qe);
470
- var A, $, z, b, ge, fe, C, E;
471
- const V = class V extends L {
472
- constructor() {
473
- var t;
474
- super(be);
475
- c(this, b);
476
- c(this, A);
477
- c(this, $);
478
- c(this, z);
479
- c(this, C);
480
- g(this, A, Math.random().toString(36).substring(2, 15)), this.template = () => `
481
- <px-dropdown anchoralignment="bottom-left" manual-toggle>
482
- <px-input slot="trigger" auto-complete>
483
- <slot name="label" slot="label"></slot>
484
- <slot name="helper" slot="helper"></slot>
485
- <slot name="status-text" slot="status-text"></slot>
486
- </px-input>
487
- <div class="dropdown-content" slot="popover" role="listbox">
488
- <slot name="dropdown-content"></slot>
489
- </div>
490
- </px-dropdown>`, g(this, $, () => {
491
- var i;
492
- a(this, b, fe).length && (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$dropDown.showPopover());
493
- }), g(this, z, (i) => {
494
- if (i.key !== "ArrowDown" && i.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true")
495
- return;
496
- const r = a(this, b, ge);
497
- if (!r.length)
498
- return;
499
- i.preventDefault();
500
- const o = r.findIndex(
501
- (l) => l === document.activeElement
502
- );
503
- let n;
504
- i.key === "ArrowDown" ? n = o < r.length - 1 ? o + 1 : 0 : n = o > 0 ? o - 1 : r.length - 1, r[n].focus();
505
- }), g(this, C, () => {
506
- var i;
507
- this.$input.value ? (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$dropDown.showPopover()) : (this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.focus()), u(this, b, E).call(this);
508
- }), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
509
- }
510
- static get observedAttributes() {
511
- return [
512
- ...super.observedAttributes,
513
- "size",
514
- "state",
515
- "extended",
516
- "extended--mobile",
517
- "extended--tablet",
518
- "extended--laptop",
519
- "extended--desktop",
520
- "popover-height"
521
- ];
522
- }
523
- attributeChangedCallback(t, i, r) {
524
- if (i !== r)
525
- switch (t) {
526
- case "size":
527
- case "state":
528
- case "extended":
529
- case "extended--mobile":
530
- case "extended--tablet":
531
- case "extended--laptop":
532
- case "extended--desktop":
533
- r !== null ? this.$input.setAttribute(t, r) : this.$input.removeAttribute(t);
534
- break;
535
- case "popover-height":
536
- this.setDefaultPopoverHeight(), this.$dropDown.popoverHeight = this.popoverHeight;
537
- break;
538
- default:
539
- super.attributeChangedCallback(t, i, r);
540
- break;
541
- }
542
- }
543
- connectedCallback() {
544
- var i, r;
545
- this.$input.addEventListener("input", a(this, C)), this.$input.addEventListener("click", a(this, $)), this.addEventListener("keydown", a(this, z)), this.$dropDownContent.style.width = `${(i = this.$input.shadowRoot.querySelector("input")) == null ? void 0 : i.offsetWidth}px`, this.$input.$el.setAttribute("role", "combobox"), this.$input.$el.setAttribute("autocomplete", "off"), this.$input.$el.setAttribute("aria-autocomplete", "both"), this.$input.$el.setAttribute("aria-expanded", "false"), this.$input.$el.setAttribute("aria-controls", a(this, A)), this.$dropDownContent.setAttribute("id", a(this, A)), this.$dropDownContent.setAttribute("role", "listbox");
546
- const t = (r = this.$label) == null ? void 0 : r.getAttribute("id");
547
- t && this.$dropDownContent.setAttribute("aria-labelledby", t), this.setDefaultPopoverHeight();
548
- }
549
- disconnectedCallback() {
550
- this.$input.removeEventListener("input", a(this, C)), this.$input.removeEventListener("click", a(this, $)), this.removeEventListener("keydown", a(this, z));
551
- }
552
- setDefaultPopoverHeight() {
553
- this.popoverHeight || (this.popoverHeight = "16.5rem");
554
- }
555
- get value() {
556
- return this.$input.value;
557
- }
558
- set value(t) {
559
- this.$input.value = t, this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.$el.focus(), u(this, b, E).call(this);
560
- }
561
- get name() {
562
- return this.getAttribute("name");
563
- }
564
- formResetCallback() {
565
- this.$input.value = "", u(this, b, E).call(this);
566
- }
567
- formStateRestoreCallback(t) {
568
- this.$input.value = t, u(this, b, E).call(this);
569
- }
570
- get $dropDown() {
571
- return this.shadowRoot.querySelector("px-dropdown");
572
- }
573
- get $dropDownContent() {
574
- return this.shadowRoot.querySelector(".dropdown-content");
575
- }
576
- get $input() {
577
- return this.shadowRoot.querySelector("px-input");
578
- }
579
- get $label() {
580
- return this.querySelector('[slot="label"]');
581
- }
582
- get popoverHeight() {
583
- return this.getAttribute("popover-height");
584
- }
585
- set popoverHeight(t) {
586
- t ? this.setAttribute("popover-height", t) : this.removeAttribute("popover-height");
587
- }
410
+ customElements.get("px-fileupload") || customElements.define("px-fileupload", le);
411
+ //#endregion
412
+ //#region src/Autocomplete.ts
413
+ var D = new CSSStyleSheet();
414
+ D.replaceSync(y);
415
+ var O = class extends n {
416
+ static {
417
+ this.formAssociated = !0;
418
+ }
419
+ #e;
420
+ constructor() {
421
+ super(D), this.#e = Math.random().toString(36).substring(2, 15), this.template = () => "\n<px-dropdown anchoralignment=\"bottom-left\" manual-toggle>\n <px-input slot=\"trigger\" auto-complete>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"helper\" slot=\"helper\"></slot>\n <slot name=\"status-text\" slot=\"status-text\"></slot>\n </px-input>\n <div class=\"dropdown-content\" slot=\"popover\" role=\"listbox\">\n <slot name=\"dropdown-content\"></slot>\n </div>\n</px-dropdown>", this.#t = () => {
422
+ this.#i.length && (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover());
423
+ }, this.#n = (e) => {
424
+ if (e.key !== "ArrowDown" && e.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true") return;
425
+ let t = this.#r;
426
+ if (!t.length) return;
427
+ e.preventDefault();
428
+ let n = t.findIndex((e) => e === document.activeElement), r;
429
+ r = e.key === "ArrowDown" ? n < t.length - 1 ? n + 1 : 0 : n > 0 ? n - 1 : t.length - 1, t[r].focus();
430
+ }, this.#a = () => {
431
+ 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();
432
+ }, this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
433
+ }
434
+ static get observedAttributes() {
435
+ return [
436
+ ...super.observedAttributes,
437
+ "size",
438
+ "state",
439
+ "extended",
440
+ "extended--mobile",
441
+ "extended--tablet",
442
+ "extended--laptop",
443
+ "extended--desktop",
444
+ "popover-height"
445
+ ];
446
+ }
447
+ attributeChangedCallback(e, t, n) {
448
+ if (t !== n) switch (e) {
449
+ case "size":
450
+ case "state":
451
+ case "extended":
452
+ case "extended--mobile":
453
+ case "extended--tablet":
454
+ case "extended--laptop":
455
+ case "extended--desktop":
456
+ n === null ? this.$input.removeAttribute(e) : this.$input.setAttribute(e, n);
457
+ break;
458
+ case "popover-height":
459
+ this.setDefaultPopoverHeight(), this.$dropDown.popoverHeight = this.popoverHeight;
460
+ break;
461
+ default: super.attributeChangedCallback(e, t, n);
462
+ }
463
+ }
464
+ connectedCallback() {
465
+ this.$input.addEventListener("input", this.#a), this.$input.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$input.$el.setAttribute("role", "combobox"), this.$input.$el.setAttribute("autocomplete", "off"), this.$input.$el.setAttribute("aria-autocomplete", "both"), this.$input.$el.setAttribute("aria-expanded", "false"), this.$input.$el.setAttribute("aria-controls", this.#e), this.$dropDownContent.setAttribute("id", this.#e), this.$dropDownContent.setAttribute("role", "listbox");
466
+ let e = this.$label?.getAttribute("id");
467
+ e && this.$dropDownContent.setAttribute("aria-labelledby", e), this.setDefaultPopoverHeight();
468
+ }
469
+ disconnectedCallback() {
470
+ this.$input.removeEventListener("input", this.#a), this.$input.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n);
471
+ }
472
+ #t;
473
+ #n;
474
+ get #r() {
475
+ return Array.from(this.querySelectorAll("px-autocomplete-option:not([disabled])"));
476
+ }
477
+ get #i() {
478
+ return Array.from(this.querySelectorAll("px-autocomplete-option"));
479
+ }
480
+ #a;
481
+ setDefaultPopoverHeight() {
482
+ this.popoverHeight ||= "16.5rem";
483
+ }
484
+ get value() {
485
+ return this.$input.value;
486
+ }
487
+ set value(e) {
488
+ this.$input.value = e, this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.$el.focus(), this.#o();
489
+ }
490
+ get name() {
491
+ return this.getAttribute("name");
492
+ }
493
+ #o() {
494
+ if (this.name) {
495
+ let e = new FormData();
496
+ e.append(this.name, this.value), this.internals?.setFormValue(e);
497
+ }
498
+ }
499
+ formResetCallback() {
500
+ this.$input.value = "", this.#o();
501
+ }
502
+ formStateRestoreCallback(e) {
503
+ this.$input.value = e, this.#o();
504
+ }
505
+ get $dropDown() {
506
+ return this.shadowRoot.querySelector("px-dropdown");
507
+ }
508
+ get $dropDownContent() {
509
+ return this.shadowRoot.querySelector(".dropdown-content");
510
+ }
511
+ get $input() {
512
+ return this.shadowRoot.querySelector("px-input");
513
+ }
514
+ get $label() {
515
+ return this.querySelector("[slot=\"label\"]");
516
+ }
517
+ get popoverHeight() {
518
+ return this.getAttribute("popover-height");
519
+ }
520
+ set popoverHeight(e) {
521
+ v(this, "popover-height", e);
522
+ }
588
523
  };
589
- A = new WeakMap(), $ = new WeakMap(), z = new WeakMap(), b = new WeakSet(), ge = function() {
590
- return Array.from(
591
- this.querySelectorAll(
592
- "px-autocomplete-option:not([disabled])"
593
- )
594
- );
595
- }, fe = function() {
596
- return Array.from(
597
- this.querySelectorAll("px-autocomplete-option")
598
- );
599
- }, C = new WeakMap(), E = function() {
600
- var t;
601
- if (this.name) {
602
- const i = new FormData();
603
- i.append(this.name, this.value), (t = this.internals) == null || t.setFormValue(i);
604
- }
605
- }, V.formAssociated = !0;
606
- let X = V;
607
- customElements.get("px-autocomplete") || customElements.define("px-autocomplete", X);
608
- class Xe extends HTMLElement {
609
- constructor() {
610
- super();
611
- }
612
- static get observedAttributes() {
613
- return ["name", "src", "type", "format"];
614
- }
615
- connectedCallback() {
616
- if (document.querySelectorAll(
617
- `px-icon-set[name="${this.getAttribute("name")}"]`
618
- ).length > 1 && (console.warn(
619
- "Only one <px-icon-set> component is allowed, self removing"
620
- ), this.remove()), this.getAttribute("type") === "font") {
621
- const t = document.createElement("style");
622
- t.setAttribute("type", "text/css"), t.setAttribute("data-name", this.getAttribute("name")), t.textContent = `
524
+ customElements.get("px-autocomplete") || customElements.define("px-autocomplete", O);
525
+ //#endregion
526
+ //#region ../../components/Icon/common/src/IconSet.ts
527
+ var k = class extends HTMLElement {
528
+ constructor() {
529
+ super();
530
+ }
531
+ static get observedAttributes() {
532
+ return [
533
+ "name",
534
+ "src",
535
+ "type",
536
+ "format"
537
+ ];
538
+ }
539
+ connectedCallback() {
540
+ if (document.querySelectorAll(`px-icon-set[name="${this.getAttribute("name")}"]`).length > 1 && (console.warn("Only one <px-icon-set> component is allowed, self removing"), this.remove()), this.getAttribute("type") === "font") {
541
+ let e = document.createElement("style");
542
+ e.setAttribute("type", "text/css");
543
+ let t = this.getAttribute("name");
544
+ t && e.setAttribute("data-name", t), e.textContent = `
623
545
  @font-face {
624
546
  font-family: 'lavender';
625
547
  src:
@@ -628,1336 +550,1167 @@ class Xe extends HTMLElement {
628
550
  font-style: normal;
629
551
  font-display: block;
630
552
  }
631
- `, document.head.appendChild(t);
632
- }
633
- }
634
- disconnectedCallback() {
635
- const e = document.querySelector(
636
- `style[data-name="${this.getAttribute("name")}"]`
637
- );
638
- e && e.remove();
639
- }
640
- }
641
- customElements.get("px-icon-set") || customElements.define("px-icon-set", Xe);
642
- const We = [
643
- "Brand",
644
- "Accent",
645
- "Neutral",
646
- "Dimmed",
647
- "PurposeSuccess",
648
- "PurposeWarning",
649
- "PurposeError",
650
- "PurposeUnlimited",
651
- "PurposePromo",
652
- "StateHover",
653
- "StateActive",
654
- "StateDisabled"
655
- ], Ye = ["Inherit", ...We].map(
656
- (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
657
- ), Ke = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:1;width:1em;height:1em;color:var(--px-color-icon-accent-default)}.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)}", xe = new CSSStyleSheet();
658
- xe.replaceSync(Ke);
659
- var y, h, M;
660
- class _e extends L {
661
- constructor(...t) {
662
- var i;
663
- super(...t, xe);
664
- c(this, y);
665
- c(this, h);
666
- c(this, M, () => `<svg aria-hidden="true">
667
- <use></use>
668
- </svg>`);
669
- this.shadowRoot.innerHTML = a(this, M).call(this), g(this, h, (i = this.attachInternals) == null ? void 0 : i.call(this)), a(this, h) && (a(this, h).role = "img");
670
- }
671
- static get observedAttributes() {
672
- return [
673
- ...super.observedAttributes,
674
- "name",
675
- "size",
676
- "color",
677
- "aria-label",
678
- "inverted",
679
- "from",
680
- "disabled"
681
- ];
682
- }
683
- attributeChangedCallback(t, i, r) {
684
- if (i !== r)
685
- switch (t) {
686
- case "name":
687
- this.updateName(i, r);
688
- break;
689
- case "size":
690
- this.updateAttribute(t, i, r, Ee);
691
- break;
692
- case "color":
693
- this.updateAttribute(t, i, r, Ye);
694
- break;
695
- case "disabled":
696
- this.color = "state-disabled";
697
- break;
698
- case "aria-label":
699
- if (!a(this, h))
700
- return;
701
- r ? (a(this, h).ariaHidden = "false", this.ariaHidden = "false") : (a(this, h).ariaHidden = "true", this.ariaHidden = "true");
702
- break;
703
- }
704
- }
705
- connectedCallback() {
706
- var i;
707
- this.role = "img";
708
- const t = document.querySelectorAll("px-icon-set");
709
- t || console.log("<px-icon-set> component not found");
710
- for (const r of t) {
711
- if (!r.getAttribute("name") || !r.getAttribute("src")) {
712
- console.error("Icon name or src not found");
713
- continue;
714
- }
715
- r.getAttribute("name") === this.from && r.getAttribute("type") !== "font" && (g(this, y, r.getAttribute("src")), this.$el.firstElementChild.setAttribute(
716
- "href",
717
- `${a(this, y)}#icon-${this.name}`
718
- ));
719
- }
720
- !this.ariaLabel && a(this, h) && (a(this, h).ariaHidden = "true", this.ariaHidden = "true"), ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
721
- }
722
- updateAttribute(t, i, r, o) {
723
- i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), r !== null && r !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${r}`) : this.$el.classList.toggle(r)), this.checkName(o, r) || p(
724
- `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
725
- );
726
- }
727
- updateName(t, i) {
728
- a(this, y) && this.$el.firstElementChild.setAttribute(
729
- "href",
730
- `${a(this, y)}#icon-${i}`
731
- );
732
- }
733
- get $el() {
734
- return this.shadowRoot.querySelector("svg");
735
- }
736
- get name() {
737
- return this.getAttribute("name");
738
- }
739
- set name(t) {
740
- this.setAttribute("name", t);
741
- }
742
- get size() {
743
- return this.getAttribute("size");
744
- }
745
- set size(t) {
746
- this.setAttribute("size", t);
747
- }
748
- get color() {
749
- return this.getAttribute("color");
750
- }
751
- set color(t) {
752
- this.setAttribute("color", t);
753
- }
754
- get arialabel() {
755
- return this.getAttribute("aria-label");
756
- }
757
- set arialabel(t) {
758
- this.setAttribute("aria-label", t);
759
- }
760
- get inverted() {
761
- return this.getAttribute("inverted");
762
- }
763
- set inverted(t) {
764
- this.setAttribute("inverted", t);
765
- }
766
- get from() {
767
- return this.getAttribute("from");
768
- }
769
- set from(t) {
770
- this.setAttribute("from", t);
771
- }
772
- get disabled() {
773
- return this.getAttribute("disabled");
774
- }
775
- set disabled(t) {
776
- this.setAttribute("disabled", t);
777
- }
778
- }
779
- y = new WeakMap(), h = new WeakMap(), M = new WeakMap();
780
- customElements.get("px-icon") || customElements.define("px-icon", _e);
781
- const Ue = ':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-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::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"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::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{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}: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 (max-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-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}: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 (min-width: 48rem) and (max-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-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-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 (min-width: 64.0625rem) and (max-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 (min-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-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-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)}}', ve = new CSSStyleSheet();
782
- ve.replaceSync(Ue);
783
- const Je = [
784
- "top-patch",
785
- "top-neighbor-patch",
786
- "top-ribbon",
787
- "top-neighbor-ribbon",
788
- "top-patch-and-neighbor-ribbon"
789
- ], Qe = [
790
- "1",
791
- "2",
792
- "3",
793
- "4",
794
- "5",
795
- "6",
796
- "7",
797
- "8",
798
- "9",
799
- "10",
800
- "11",
801
- "12"
802
- ], x = (s, e, t) => `:host([${s}${t ? `--${t}` : ""}='${e}']) .container`, m = "px-padding", Ve = [
803
- f(
804
- "padding",
805
- x,
806
- v,
807
- m,
808
- "--container-padding"
809
- ),
810
- f(
811
- "padding-inline",
812
- x,
813
- v,
814
- m
815
- ),
816
- f(
817
- "padding-block",
818
- x,
819
- v,
820
- m
821
- ),
822
- f(
823
- "padding-top",
824
- x,
825
- v,
826
- m
827
- ),
828
- f(
829
- "padding-right",
830
- x,
831
- v,
832
- m,
833
- "--container-padding-right"
834
- ),
835
- f(
836
- "padding-bottom",
837
- x,
838
- v,
839
- m
840
- ),
841
- f(
842
- "padding-left",
843
- x,
844
- v,
845
- m,
846
- "--container-padding-left"
847
- ),
848
- f(
849
- "gap",
850
- x,
851
- le,
852
- "px-spacing",
853
- void 0,
854
- "subgrid-gap"
855
- )
856
- ], ee = class ee extends L {
857
- constructor() {
858
- super(ve, ...Ve), this.template = () => `<div class="container">
859
- <slot></slot>
860
- <slot name="anchor-left"></slot>
861
- <slot name="anchor-right"></slot>
862
- <slot name="anchor-full"></slot>
863
- </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
864
- }
865
- static get observedAttributes() {
866
- return [
867
- ...super.observedAttributes,
868
- "border",
869
- "border-color",
870
- "border-side",
871
- "border-side--mobile",
872
- "border-side--tablet",
873
- "border-side--laptop",
874
- "border-radius",
875
- "no-border-radius",
876
- "no-border-radius--mobile",
877
- "no-border-radius--tablet",
878
- "no-border-radius--laptop",
879
- "background-color",
880
- "background-color--mobile",
881
- "background-color--tablet",
882
- "background-color--laptop",
883
- "background-gradient",
884
- "background-gradient--mobile",
885
- "background-gradient--tablet",
886
- "background-gradient--laptop",
887
- "background-image",
888
- "background-image--mobile",
889
- "background-image--tablet",
890
- "background-image--laptop",
891
- "background-size",
892
- "background-position",
893
- "box-shadow",
894
- "anchor-offset",
895
- "anchor-spacing",
896
- "inverted",
897
- "subgrid-rows"
898
- ];
899
- }
900
- connectedCallback() {
901
- this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
902
- this.$slotAnchor && this.addAnchorClass();
903
- }), this.contentObserver.observe(this, {
904
- childList: !0,
905
- subtree: !0,
906
- characterData: !0
907
- }), this._bgObserver = new IntersectionObserver((e) => {
908
- e.forEach((t) => {
909
- var i;
910
- t.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (i = this._bgObserver) == null || i.disconnect());
911
- });
912
- }), this._bgObserver.observe(this.$el);
913
- }
914
- disconnectedCallback() {
915
- var e, t;
916
- (e = this._bgObserver) == null || e.disconnect(), (t = this.contentObserver) == null || t.disconnect();
917
- }
918
- attributeChangedCallback(e, t, i) {
919
- if (t !== i)
920
- switch (e) {
921
- case "border":
922
- this.updateAttribute(e, t, i, Pe);
923
- break;
924
- case "border-color":
925
- this.updateBorderColor(e, i);
926
- break;
927
- case "border-side":
928
- case "border-side--mobile":
929
- case "border-side--tablet":
930
- case "border-side--laptop":
931
- this.updateAttribute(e, t, i, He);
932
- break;
933
- case "border-radius":
934
- this.updateAttribute(
935
- e,
936
- t,
937
- i,
938
- Me
939
- );
940
- break;
941
- case "no-border-radius":
942
- case "no-border-radius--mobile":
943
- case "no-border-radius--tablet":
944
- case "no-border-radius--laptop":
945
- this.updateNoBorderRadius(
946
- e,
947
- t,
948
- i,
949
- Re
950
- );
951
- break;
952
- case "background-color":
953
- case "background-color--mobile":
954
- case "background-color--tablet":
955
- case "background-color--laptop":
956
- this.updateBackgroundColor(e, i);
957
- break;
958
- case "background-gradient":
959
- case "background-gradient--mobile":
960
- case "background-gradient--tablet":
961
- case "background-gradient--laptop":
962
- this.updateGradient(e, i);
963
- break;
964
- case "background-size":
965
- this.updateAttribute(
966
- e,
967
- t,
968
- i,
969
- Te
970
- );
971
- break;
972
- case "background-image":
973
- case "background-image--mobile":
974
- case "background-image--tablet":
975
- case "background-image--laptop":
976
- this._isInViewport && this.updateBackgroundImg(e, i);
977
- break;
978
- case "background-position":
979
- i !== null && i !== "" && (this.$el.style.backgroundPosition = i);
980
- break;
981
- case "box-shadow":
982
- this.updateAttribute(e, t, i, De);
983
- break;
984
- case "anchor-offset":
985
- this.updateAnchorOffset(t, i, v);
986
- break;
987
- case "anchor-spacing":
988
- this.updateAnchorSpacing(t, i, Je);
989
- break;
990
- case "subgrid-rows":
991
- this.updateSubgridRows(
992
- e,
993
- t,
994
- i,
995
- Qe
996
- );
997
- break;
998
- default:
999
- super.attributeChangedCallback(e, t, i);
1000
- break;
1001
- }
1002
- }
1003
- _loadBackgroundImages() {
1004
- [
1005
- "background-image",
1006
- "background-image--mobile",
1007
- "background-image--tablet",
1008
- "background-image--laptop"
1009
- ].forEach((t) => {
1010
- const i = this.getAttribute(t);
1011
- i && this.updateBackgroundImg(t, i);
1012
- });
1013
- }
1014
- updateBackgroundImg(e, t) {
1015
- this.$el.style.setProperty(`--${e}`, `url("${t}")`);
1016
- }
1017
- updateGradient(e, t) {
1018
- if (this.checkName(se, t)) {
1019
- const i = this.splitAttrNameFromBreakpoint(e);
1020
- e = i.attrName;
1021
- const r = i.breakpoint;
1022
- this.$el.style.setProperty(
1023
- `--${e}${r}`,
1024
- `linear-gradient(var(--px-color-background-gradient-${t}))`
1025
- );
1026
- } else
1027
- p(
1028
- `"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${se.join('", "')}".`
1029
- );
1030
- }
1031
- updateBackgroundColor(e, t) {
1032
- const i = t.startsWith("surface-");
1033
- if (this.checkName(F, t)) {
1034
- const r = this.splitAttrNameFromBreakpoint(e), o = r.breakpoint;
1035
- this.$el.style.setProperty(
1036
- `--${r.attrName}${o}`,
1037
- `var(--px-color-background-${t}${i ? "" : "-default"})`
1038
- ), this.$el.style.setProperty(
1039
- `--${r.attrName}-inverted${o}`,
1040
- `var(--px-color-background-${t}${i ? "" : "-inverted"})`
1041
- );
1042
- } else
1043
- p(
1044
- `"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${F.join('", "')}".`
1045
- );
1046
- }
1047
- updateBorderColor(e, t) {
1048
- this.checkName(ae, t) ? (this.$el.style.setProperty(
1049
- `--${e}`,
1050
- `var(--px-color-border-${t}-default)`
1051
- ), this.$el.style.setProperty(
1052
- `--${e}-inverted`,
1053
- `var(--px-color-border-${t}-inverted)`
1054
- )) : p(
1055
- `"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${ae.join('", "')}".`
1056
- );
1057
- }
1058
- updateNoBorderRadius(e, t, i, r) {
1059
- if (!this.checkName(r, i))
1060
- p(
1061
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1062
- );
1063
- else {
1064
- const o = this.splitAttrNameFromBreakpoint(e), n = o.breakpoint;
1065
- t !== null && t !== "" && this.$el.classList.toggle(
1066
- `${o.attrName}-${t}${n}`
1067
- ), i !== null && i !== "" && this.$el.classList.toggle(
1068
- `${o.attrName}-${i}${n}`
1069
- );
1070
- }
1071
- }
1072
- updateAttribute(e, t, i, r) {
1073
- if (!this.checkName(r, i))
1074
- p(
1075
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1076
- );
1077
- else {
1078
- const o = this.splitAttrNameFromBreakpoint(e), n = o.breakpoint;
1079
- t !== null && t !== "" && this.$el.classList.toggle(
1080
- `${o.attrName}-${t}${n}`
1081
- ), i !== null && i !== "" && this.$el.classList.toggle(
1082
- `${o.attrName}-${i}${n}`
1083
- );
1084
- }
1085
- }
1086
- splitAttrNameFromBreakpoint(e) {
1087
- let t = "";
1088
- if (["--mobile", "--tablet", "--laptop"].some(
1089
- (i) => e.includes(i)
1090
- )) {
1091
- const i = e.split("--");
1092
- e = i[0], t = `--${i[1]}`;
1093
- }
1094
- return { attrName: e, breakpoint: t };
1095
- }
1096
- updateAnchorOffset(e, t, i) {
1097
- if (!R(i, t)) {
1098
- p(
1099
- `"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
1100
- );
1101
- return;
1102
- }
1103
- const r = (o) => {
1104
- o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
1105
- "--container-anchor-offset--mobile",
1106
- `var(--px-padding-${o}-mobile)`
1107
- ), this.$el.style.setProperty(
1108
- "--container-anchor-offset--tablet",
1109
- `var(--px-padding-${o}-tablet)`
1110
- ), this.$el.style.setProperty(
1111
- "--container-anchor-offset--laptop",
1112
- `var(--px-padding-${o}-laptop)`
1113
- ));
1114
- };
1115
- r(e), r(t);
1116
- }
1117
- addAnchorClass() {
1118
- this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
1119
- }
1120
- updateAnchorSpacing(e, t, i) {
1121
- if (!R(i, t)) {
1122
- p(
1123
- `"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
1124
- );
1125
- return;
1126
- }
1127
- const r = (o) => {
1128
- o !== null && o !== "" && o !== "default" && (this.style.setProperty(
1129
- "--container-anchor-spacing--mobile",
1130
- `var(--px-spacing-${o}-mobile)`
1131
- ), this.style.setProperty(
1132
- "--container-anchor-spacing--tablet",
1133
- `var(--px-spacing-${o}-tablet)`
1134
- ), this.style.setProperty(
1135
- "--container-anchor-spacing--laptop",
1136
- `var(--px-spacing-${o}-laptop)`
1137
- ), this.style.setProperty(
1138
- "--container-anchor-spacing--desktop",
1139
- `var(--px-spacing-${o}-desktop)`
1140
- ));
1141
- };
1142
- r(e), r(t);
1143
- }
1144
- updateSubgridRows(e, t, i, r) {
1145
- R(r, i) ? this.style.setProperty(`--${e}`, i) : p(
1146
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1147
- );
1148
- }
1149
- get $el() {
1150
- var e;
1151
- return (e = this == null ? void 0 : this.shadowRoot) == null ? void 0 : e.querySelector(".container");
1152
- }
1153
- get $slotAnchor() {
1154
- return this.querySelector('[slot^="anchor"]');
1155
- }
1156
- get padding() {
1157
- return this.getAttribute("padding");
1158
- }
1159
- set padding(e) {
1160
- this.setAttribute("padding", e);
1161
- }
1162
- get paddingBlock() {
1163
- return this.getAttribute("padding-block");
1164
- }
1165
- set paddingBlock(e) {
1166
- this.setAttribute("padding-block", e);
1167
- }
1168
- get paddingInline() {
1169
- return this.getAttribute("padding-inline");
1170
- }
1171
- set paddingInline(e) {
1172
- this.setAttribute("padding-inline", e);
1173
- }
1174
- get paddingTop() {
1175
- return this.getAttribute("padding-top");
1176
- }
1177
- set paddingTop(e) {
1178
- this.setAttribute("padding-top", e);
1179
- }
1180
- get paddingRight() {
1181
- return this.getAttribute("padding-right");
1182
- }
1183
- set paddingRight(e) {
1184
- this.setAttribute("padding-right", e);
1185
- }
1186
- get paddingBottom() {
1187
- return this.getAttribute("padding-bottom");
1188
- }
1189
- set paddingBottom(e) {
1190
- this.setAttribute("padding-bottom", e);
1191
- }
1192
- get paddingLeft() {
1193
- return this.getAttribute("padding-left");
1194
- }
1195
- set paddingLeft(e) {
1196
- this.setAttribute("padding-left", e);
1197
- }
1198
- get paddingMobile() {
1199
- return this.getAttribute("padding--mobile");
1200
- }
1201
- set paddingMobile(e) {
1202
- this.setAttribute("padding--mobile", e);
1203
- }
1204
- get paddingBlockMobile() {
1205
- return this.getAttribute("padding-block--mobile");
1206
- }
1207
- set paddingBlockMobile(e) {
1208
- this.setAttribute("padding-block--mobile", e);
1209
- }
1210
- get paddingInlineMobile() {
1211
- return this.getAttribute("padding-inline--mobile");
1212
- }
1213
- set paddingInlineMobile(e) {
1214
- this.setAttribute("padding-inline--mobile", e);
1215
- }
1216
- get paddingTopMobile() {
1217
- return this.getAttribute("padding-top--mobile");
1218
- }
1219
- set paddingTopMobile(e) {
1220
- this.setAttribute("padding-top--mobile", e);
1221
- }
1222
- get paddingRightMobile() {
1223
- return this.getAttribute("padding-right--mobile");
1224
- }
1225
- set paddingRightMobile(e) {
1226
- this.setAttribute("padding-right--mobile", e);
1227
- }
1228
- get paddingBottomMobile() {
1229
- return this.getAttribute("padding-bottom--mobile");
1230
- }
1231
- set paddingBottomMobile(e) {
1232
- this.setAttribute("padding-bottom--mobile", e);
1233
- }
1234
- get paddingLeftMobile() {
1235
- return this.getAttribute("padding-left--mobile");
1236
- }
1237
- set paddingLeftMobile(e) {
1238
- this.setAttribute("padding-left--mobile", e);
1239
- }
1240
- get paddingTablet() {
1241
- return this.getAttribute("padding--tablet");
1242
- }
1243
- set paddingTablet(e) {
1244
- this.setAttribute("padding--tablet", e);
1245
- }
1246
- get paddingBlockTablet() {
1247
- return this.getAttribute("padding-block--tablet");
1248
- }
1249
- set paddingBlockTablet(e) {
1250
- this.setAttribute("padding-block--tablet", e);
1251
- }
1252
- get paddingInlineTablet() {
1253
- return this.getAttribute("padding-inline--tablet");
1254
- }
1255
- set paddingInlineTablet(e) {
1256
- this.setAttribute("padding-inline--tablet", e);
1257
- }
1258
- get paddingTopTablet() {
1259
- return this.getAttribute("padding-top--tablet");
1260
- }
1261
- set paddingTopTablet(e) {
1262
- this.setAttribute("padding-top--tablet", e);
1263
- }
1264
- get paddingRightTablet() {
1265
- return this.getAttribute("padding-right--tablet");
1266
- }
1267
- set paddingRightTablet(e) {
1268
- this.setAttribute("padding-right--tablet", e);
1269
- }
1270
- get paddingBottomTablet() {
1271
- return this.getAttribute("padding-bottom--tablet");
1272
- }
1273
- set paddingBottomTablet(e) {
1274
- this.setAttribute("padding-bottom--tablet", e);
1275
- }
1276
- get paddingLeftTablet() {
1277
- return this.getAttribute("padding-left--tablet");
1278
- }
1279
- set paddingLeftTablet(e) {
1280
- this.setAttribute("padding-left--tablet", e);
1281
- }
1282
- get paddingLaptop() {
1283
- return this.getAttribute("padding--laptop");
1284
- }
1285
- set paddingLaptop(e) {
1286
- this.setAttribute("padding--laptop", e);
1287
- }
1288
- get paddingBlockLaptop() {
1289
- return this.getAttribute("padding-block--laptop");
1290
- }
1291
- set paddingBlockLaptop(e) {
1292
- this.setAttribute("padding-block--laptop", e);
1293
- }
1294
- get paddingInlineLaptop() {
1295
- return this.getAttribute("padding-inline--laptop");
1296
- }
1297
- set paddingInlineLaptop(e) {
1298
- this.setAttribute("padding-inline--laptop", e);
1299
- }
1300
- get paddingTopLaptop() {
1301
- return this.getAttribute("padding-top--laptop");
1302
- }
1303
- set paddingTopLaptop(e) {
1304
- this.setAttribute("padding-top--laptop", e);
1305
- }
1306
- get paddingRightLaptop() {
1307
- return this.getAttribute("padding-right--laptop");
1308
- }
1309
- set paddingRightLaptop(e) {
1310
- this.setAttribute("padding-right--laptop", e);
1311
- }
1312
- get paddingBottomLaptop() {
1313
- return this.getAttribute("padding-bottom--laptop");
1314
- }
1315
- set paddingBottomLaptop(e) {
1316
- this.setAttribute("padding-bottom--laptop", e);
1317
- }
1318
- get paddingLeftLaptop() {
1319
- return this.getAttribute("padding-left--laptop");
1320
- }
1321
- set paddingLeftLaptop(e) {
1322
- this.setAttribute("padding-left--laptop", e);
1323
- }
1324
- get border() {
1325
- return this.getAttribute("border");
1326
- }
1327
- set border(e) {
1328
- this.setAttribute("border", e);
1329
- }
1330
- get borderColor() {
1331
- return this.getAttribute("border-color");
1332
- }
1333
- set borderColor(e) {
1334
- this.setAttribute("border-color", e);
1335
- }
1336
- get borderSide() {
1337
- return this.getAttribute("border-side");
1338
- }
1339
- set borderSide(e) {
1340
- this.setAttribute("border-side", e);
1341
- }
1342
- get borderSideMobile() {
1343
- return this.getAttribute("border-side--mobile");
1344
- }
1345
- set borderSideMobile(e) {
1346
- this.setAttribute("border-side--mobile", e);
1347
- }
1348
- get borderSideTablet() {
1349
- return this.getAttribute("border-side--tablet");
1350
- }
1351
- set borderSideTablet(e) {
1352
- this.setAttribute("border-side--tablet", e);
1353
- }
1354
- get borderSideLaptop() {
1355
- return this.getAttribute("border-side--laptop");
1356
- }
1357
- set borderSideLaptop(e) {
1358
- this.setAttribute("border-side--laptop", e);
1359
- }
1360
- get borderRadius() {
1361
- return this.getAttribute("border-radius");
1362
- }
1363
- set borderRadius(e) {
1364
- this.setAttribute("border-radius", e);
1365
- }
1366
- get noBorderRadius() {
1367
- return this.getAttribute("no-border-radius");
1368
- }
1369
- set noBorderRadius(e) {
1370
- this.setAttribute("no-border-radius", e);
1371
- }
1372
- get noBorderRadiusMobile() {
1373
- return this.getAttribute("no-border-radius--mobile");
1374
- }
1375
- set noBorderRadiusMobile(e) {
1376
- this.setAttribute("no-border-radius--mobile", e);
1377
- }
1378
- get noBorderRadiusTablet() {
1379
- return this.getAttribute("no-border-radius--tablet");
1380
- }
1381
- set noBorderRadiusTablet(e) {
1382
- this.setAttribute("no-border-radius--tablet", e);
1383
- }
1384
- get noBorderRadiusLaptop() {
1385
- return this.getAttribute("no-border-radius--laptop");
1386
- }
1387
- set noBorderRadiusLaptop(e) {
1388
- this.setAttribute("no-border-radius--laptop", e);
1389
- }
1390
- get backgroundColor() {
1391
- return this.getAttribute("background-color");
1392
- }
1393
- set backgroundColor(e) {
1394
- this.setAttribute("background-color", e);
1395
- }
1396
- get backgroundColorMobile() {
1397
- return this.getAttribute("background-color--mobile");
1398
- }
1399
- set backgroundColorMobile(e) {
1400
- this.setAttribute("background-color--mobile", e);
1401
- }
1402
- get backgroundColorTablet() {
1403
- return this.getAttribute("background-color--tablet");
1404
- }
1405
- set backgroundColorTablet(e) {
1406
- this.setAttribute("background-color--tablet", e);
1407
- }
1408
- get backgroundColorLaptop() {
1409
- return this.getAttribute("background-color--laptop");
1410
- }
1411
- set backgroundColorLaptop(e) {
1412
- this.setAttribute("background-color--laptop", e);
1413
- }
1414
- get gradient() {
1415
- return this.getAttribute("background-gradient");
1416
- }
1417
- set gradient(e) {
1418
- this.setAttribute("background-gradient", e);
1419
- }
1420
- get gradientMobile() {
1421
- return this.getAttribute("background-gradient--mobile");
1422
- }
1423
- set gradientMobile(e) {
1424
- this.setAttribute("background-gradient--mobile", e);
1425
- }
1426
- get gradientTablet() {
1427
- return this.getAttribute("background-gradient--tablet");
1428
- }
1429
- set gradientTablet(e) {
1430
- this.setAttribute("background-gradient--tablet", e);
1431
- }
1432
- get gradientLaptop() {
1433
- return this.getAttribute("background-gradient--laptop");
1434
- }
1435
- set gradientLaptop(e) {
1436
- this.setAttribute("background-gradient--laptop", e);
1437
- }
1438
- get backgroundImage() {
1439
- return this.getAttribute("background-image");
1440
- }
1441
- set backgroundImage(e) {
1442
- this.setAttribute("background-image", e);
1443
- }
1444
- get backgroundImageMobile() {
1445
- return this.getAttribute("background-image--mobile");
1446
- }
1447
- set backgroundImageMobile(e) {
1448
- this.setAttribute("background-image--mobile", e);
1449
- }
1450
- get backgroundImageTablet() {
1451
- return this.getAttribute("background-image--tablet");
1452
- }
1453
- set backgroundImageTablet(e) {
1454
- this.setAttribute("background-image--tablet", e);
1455
- }
1456
- get backgroundImageLaptop() {
1457
- return this.getAttribute("background-image--laptop");
1458
- }
1459
- set backgroundImageLaptop(e) {
1460
- this.setAttribute("background-image--laptop", e);
1461
- }
1462
- get backgroundSize() {
1463
- return this.getAttribute("background-size");
1464
- }
1465
- set backgroundSize(e) {
1466
- this.setAttribute("background-size", e);
1467
- }
1468
- get backgroundPosition() {
1469
- return this.getAttribute("background-position");
1470
- }
1471
- set backgroundPosition(e) {
1472
- this.setAttribute("background-position", e);
1473
- }
1474
- get boxShadow() {
1475
- return this.getAttribute("box-shadow");
1476
- }
1477
- set boxShadow(e) {
1478
- this.setAttribute("box-shadow", e);
1479
- }
1480
- get anchorOffset() {
1481
- return this.getAttribute("anchor-offset");
1482
- }
1483
- set anchorOffset(e) {
1484
- this.setAttribute("anchor-offset", e);
1485
- }
1486
- get anchorSpacing() {
1487
- return this.getAttribute("anchor-spacing");
1488
- }
1489
- set anchorSpacing(e) {
1490
- this.setAttribute("anchor-spacing", e);
1491
- }
1492
- get inverted() {
1493
- return this.hasAttribute("inverted");
1494
- }
1495
- set inverted(e) {
1496
- e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
1497
- }
1498
- get subgridRows() {
1499
- return this.getAttribute("subgrid-rows");
1500
- }
1501
- set subgridRows(e) {
1502
- this.setAttribute("subgrid-rows", e);
1503
- }
1504
- get subgridGap() {
1505
- return this.getAttribute("subgrid-gap");
1506
- }
1507
- set subgridGap(e) {
1508
- this.setAttribute("subgrid-gap", e);
1509
- }
1510
- get subgridGapMobile() {
1511
- return this.getAttribute("subgrid-gap--mobile");
1512
- }
1513
- set subgridGapMobile(e) {
1514
- this.setAttribute("subgrid-gap--mobile", e);
1515
- }
1516
- get subgridGapTablet() {
1517
- return this.getAttribute("subgrid-gap--tablet");
1518
- }
1519
- set subgridGapTablet(e) {
1520
- this.setAttribute("subgrid-gap--tablet", e);
1521
- }
1522
- get subgridGapLaptop() {
1523
- return this.getAttribute("subgrid-gap--laptop");
1524
- }
1525
- set subgridGapLaptop(e) {
1526
- this.setAttribute("subgrid-gap--laptop", e);
1527
- }
553
+ `, document.head.appendChild(e);
554
+ }
555
+ }
556
+ disconnectedCallback() {
557
+ let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
558
+ e && e.remove();
559
+ }
1528
560
  };
1529
- ee.nativeName = "div";
1530
- let W = ee;
1531
- customElements.get("px-container") || customElements.define("px-container", W);
1532
- const et = ':host{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{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-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 (min-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 (min-width: 48rem) and (max-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 (min-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 (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-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))}}', me = new CSSStyleSheet();
1533
- me.replaceSync(et);
1534
- const tt = [
1535
- "",
1536
- "default",
1537
- "row",
1538
- "row-reverse",
1539
- "column",
1540
- "column-reverse"
1541
- ], it = [
1542
- "",
1543
- "default",
1544
- "stretch",
1545
- "flex-start",
1546
- "start",
1547
- "flex-end",
1548
- "end",
1549
- "center",
1550
- "baseline"
1551
- ], rt = [
1552
- "",
1553
- "default",
1554
- "flex-start",
1555
- "start",
1556
- "flex-end",
1557
- "end",
1558
- "center",
1559
- "space-between",
1560
- "space-around",
1561
- "space-evenly"
1562
- ], ot = ["", "default", "nowrap", "wrap", "wrap-reverse"], st = ["", "visible", "hidden", "scroll", "auto"];
1563
- class K extends L {
1564
- constructor() {
1565
- super(me), this.overflowXAttributeDelegate = new je(
1566
- this,
1567
- "overflow-x",
1568
- (e) => e,
1569
- "--overflow-x"
1570
- ), this.template = `<div class="flex-container">
1571
- <slot></slot>
1572
- </div>`, this.shadowRoot.innerHTML = this.template;
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");
1576
- }
1577
- static get observedAttributes() {
1578
- return [
1579
- ...super.observedAttributes,
1580
- "direction",
1581
- "direction--mobile",
1582
- "direction--tablet",
1583
- "direction--laptop",
1584
- "direction--desktop",
1585
- "gap",
1586
- "gap--mobile",
1587
- "gap--tablet",
1588
- "gap--laptop",
1589
- "gap--desktop",
1590
- "justify-content",
1591
- "justify-content--mobile",
1592
- "justify-content--tablet",
1593
- "justify-content--laptop",
1594
- "justify-content--desktop",
1595
- "align-items",
1596
- "align-items--mobile",
1597
- "align-items--tablet",
1598
- "align-items--laptop",
1599
- "align-items--desktop",
1600
- "wrap",
1601
- "wrap--mobile",
1602
- "wrap--tablet",
1603
- "wrap--laptop",
1604
- "wrap--desktop",
1605
- "overflow-x",
1606
- "overflow-x--mobile",
1607
- "overflow-x--tablet",
1608
- "overflow-x--laptop",
1609
- "overflow-x--desktop"
1610
- ];
1611
- }
1612
- attributeChangedCallback(e, t, i) {
1613
- switch (e) {
1614
- case "gap":
1615
- case "gap--mobile":
1616
- case "gap--tablet":
1617
- case "gap--laptop":
1618
- case "gap--desktop":
1619
- this.updateFlexProperties(e, t, i, le);
1620
- break;
1621
- case "justify-content":
1622
- case "justify-content--mobile":
1623
- case "justify-content--tablet":
1624
- case "justify-content--laptop":
1625
- case "justify-content--desktop":
1626
- this.updateFlexProperties(
1627
- e,
1628
- t,
1629
- i,
1630
- rt
1631
- );
1632
- break;
1633
- case "align-items":
1634
- case "align-items--mobile":
1635
- case "align-items--tablet":
1636
- case "align-items--laptop":
1637
- case "align-items--desktop":
1638
- this.updateFlexProperties(e, t, i, it);
1639
- break;
1640
- case "wrap":
1641
- case "wrap--mobile":
1642
- case "wrap--tablet":
1643
- case "wrap--laptop":
1644
- case "wrap--desktop":
1645
- this.updateFlexProperties(e, t, i, ot);
1646
- break;
1647
- case "direction":
1648
- case "direction--mobile":
1649
- case "direction--tablet":
1650
- case "direction--laptop":
1651
- case "direction--desktop":
1652
- this.updateFlexProperties(e, t, i, tt);
1653
- break;
1654
- case "overflow-x":
1655
- case "overflow-x--mobile":
1656
- case "overflow-x--tablet":
1657
- case "overflow-x--laptop":
1658
- case "overflow-x--desktop":
1659
- this.updateOverflowX(e, t, i, st);
1660
- break;
1661
- default:
1662
- super.attributeChangedCallback(e, t, i);
1663
- break;
1664
- }
1665
- }
1666
- updateOverflowX(e, t, i, r) {
1667
- if (!R(r, i)) {
1668
- p(
1669
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1670
- );
1671
- return;
1672
- }
1673
- this.overflowXAttributeDelegate.attributeChangedCallback(
1674
- e,
1675
- t,
1676
- i
1677
- );
1678
- }
1679
- updateFlexProperties(e, t, i, r) {
1680
- this.checkName(r, i) || p(
1681
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
1682
- );
1683
- const o = e.indexOf("--") > -1, n = o ? e.split("--")[0] : e, l = [];
1684
- if (!o)
1685
- this.getAttribute(n + "--mobile") || l.push("mobile"), this.getAttribute(n + "--tablet") || l.push("tablet"), this.getAttribute(n + "--laptop") || l.push("laptop"), this.getAttribute(n + "--desktop") || l.push("desktop"), l.forEach((d) => {
1686
- this.updateStyle(n, d, t, r), this.updateStyle(n, d, i, r);
1687
- });
1688
- else {
1689
- const d = e.split("--")[1];
1690
- this.updateStyle(n, d, t, r), this.updateStyle(n, d, i, r);
1691
- }
1692
- }
1693
- updateStyle(e, t, i, r) {
1694
- i && (e === "gap" && r && r.includes(i) ? (this.$el.style.setProperty(
1695
- `--flex-${e}--${t}-value`,
1696
- `var(--px-spacing-${i}-${t === "laptop" ? "desktop" : t})`
1697
- ), this.style.setProperty(
1698
- `--host-gap--${t}`,
1699
- `var(--px-spacing-${i}-${t === "laptop" ? "desktop" : t})`
1700
- )) : this.$el.style.setProperty(
1701
- `--flex-${e}--${t}-value`,
1702
- i
1703
- ));
1704
- }
1705
- get direction() {
1706
- return this.getAttribute("direction");
1707
- }
1708
- set direction(e) {
1709
- this.setAttribute("direction", e);
1710
- }
1711
- get directionMobile() {
1712
- return this.getAttribute("direction--mobile");
1713
- }
1714
- set directionMobile(e) {
1715
- this.setAttribute("direction--mobile", e);
1716
- }
1717
- get directionTablet() {
1718
- return this.getAttribute("direction--tablet");
1719
- }
1720
- set directionTablet(e) {
1721
- this.setAttribute("direction--tablet", e);
1722
- }
1723
- get directionLaptop() {
1724
- return this.getAttribute("direction--laptop");
1725
- }
1726
- set directionLaptop(e) {
1727
- this.setAttribute("direction--laptop", e);
1728
- }
1729
- get directionDesktop() {
1730
- return this.getAttribute("direction--desktop");
1731
- }
1732
- set directionDesktop(e) {
1733
- this.setAttribute("direction--desktop", e);
1734
- }
1735
- get gap() {
1736
- return this.getAttribute("gap");
1737
- }
1738
- set gap(e) {
1739
- this.setAttribute("gap", e);
1740
- }
1741
- get gapMobile() {
1742
- return this.getAttribute("gap--mobile");
1743
- }
1744
- set gapMobile(e) {
1745
- this.setAttribute("gap--mobile", e);
1746
- }
1747
- get gapTablet() {
1748
- return this.getAttribute("gap--tablet");
1749
- }
1750
- set gapTablet(e) {
1751
- this.setAttribute("gap--tablet", e);
1752
- }
1753
- get gapLaptop() {
1754
- return this.getAttribute("gap--laptop");
1755
- }
1756
- set gapLaptop(e) {
1757
- this.setAttribute("gap--laptop", e);
1758
- }
1759
- get gapDesktop() {
1760
- return this.getAttribute("gap--desktop");
1761
- }
1762
- set gapDesktop(e) {
1763
- this.setAttribute("gap--desktop", e);
1764
- }
1765
- get justifyContent() {
1766
- return this.getAttribute("justify-content");
1767
- }
1768
- set justifyContent(e) {
1769
- this.setAttribute("justify-content", e);
1770
- }
1771
- get justifyContentMobile() {
1772
- return this.getAttribute("justify-content--mobile");
1773
- }
1774
- set justifyContentMobile(e) {
1775
- this.setAttribute("justify-content--mobile", e);
1776
- }
1777
- get justifyContentTablet() {
1778
- return this.getAttribute("justify-content--tablet");
1779
- }
1780
- set justifyContentTablet(e) {
1781
- this.setAttribute("justify-content--tablet", e);
1782
- }
1783
- get justifyContentLaptop() {
1784
- return this.getAttribute("justify-content--laptop");
1785
- }
1786
- set justifyContentLaptop(e) {
1787
- this.setAttribute("justify-content--laptop", e);
1788
- }
1789
- get justifyContentDesktop() {
1790
- return this.getAttribute("justify-content--desktop");
1791
- }
1792
- set justifyContentDesktop(e) {
1793
- this.setAttribute("justify-content--desktop", e);
1794
- }
1795
- get alignItems() {
1796
- return this.getAttribute("align-items");
1797
- }
1798
- set alignItems(e) {
1799
- this.setAttribute("align-items", e);
1800
- }
1801
- get alignItemsMobile() {
1802
- return this.getAttribute("align-items--mobile");
1803
- }
1804
- set alignItemsMobile(e) {
1805
- this.setAttribute("align-items--mobile", e);
1806
- }
1807
- get alignItemsTablet() {
1808
- return this.getAttribute("align-items--tablet");
1809
- }
1810
- set alignItemsTablet(e) {
1811
- this.setAttribute("align-items--tablet", e);
1812
- }
1813
- get alignItemsLaptop() {
1814
- return this.getAttribute("align-items--laptop");
1815
- }
1816
- set alignItemsLaptop(e) {
1817
- this.setAttribute("align-items--laptop", e);
1818
- }
1819
- get alignItemsDesktop() {
1820
- return this.getAttribute("align-items--desktop");
1821
- }
1822
- set alignItemsDesktop(e) {
1823
- this.setAttribute("align-items--desktop", e);
1824
- }
1825
- get wrap() {
1826
- return this.getAttribute("wrap");
1827
- }
1828
- set wrap(e) {
1829
- this.setAttribute("wrap", e);
1830
- }
1831
- get wrapMobile() {
1832
- return this.getAttribute("wrap--mobile");
1833
- }
1834
- set wrapMobile(e) {
1835
- this.setAttribute("wrap--mobile", e);
1836
- }
1837
- get wrapTablet() {
1838
- return this.getAttribute("wrap--tablet");
1839
- }
1840
- set wrapTablet(e) {
1841
- this.setAttribute("wrap--tablet", e);
1842
- }
1843
- get wrapLaptop() {
1844
- return this.getAttribute("wrap--laptop");
1845
- }
1846
- set wrapLaptop(e) {
1847
- this.setAttribute("wrap--laptop", e);
1848
- }
1849
- get wrapDesktop() {
1850
- return this.getAttribute("wrap--desktop");
1851
- }
1852
- set wrapDesktop(e) {
1853
- this.setAttribute("wrap--desktop", e);
1854
- }
1855
- get overflowX() {
1856
- return this.getAttribute("overflow-x");
1857
- }
1858
- set overflowX(e) {
1859
- this.setAttribute("overflow-x", e);
1860
- }
1861
- get overflowXMobile() {
1862
- return this.getAttribute("overflow-x--mobile");
1863
- }
1864
- set overflowXMobile(e) {
1865
- this.setAttribute("overflow-x--mobile", e);
1866
- }
1867
- get overflowXTablet() {
1868
- return this.getAttribute("overflow-x--tablet");
1869
- }
1870
- set overflowXTablet(e) {
1871
- this.setAttribute("overflow-x--tablet", e);
1872
- }
1873
- get overflowXLaptop() {
1874
- return this.getAttribute("overflow-x--laptop");
1875
- }
1876
- set overflowXLaptop(e) {
1877
- this.setAttribute("overflow-x--laptop", e);
1878
- }
1879
- get overflowXDesktop() {
1880
- return this.getAttribute("overflow-x--desktop");
1881
- }
1882
- set overflowXDesktop(e) {
1883
- this.setAttribute("overflow-x--desktop", e);
1884
- }
1885
- get $el() {
1886
- return this.shadowRoot.querySelector(".flex-container");
1887
- }
1888
- }
1889
- customElements.get("px-stack") || customElements.define("px-stack", K);
1890
- class at extends K {
1891
- constructor() {
1892
- super();
1893
- }
1894
- connectedCallback() {
1895
- super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1896
- }
1897
- }
1898
- customElements.get("px-vstack") || customElements.define("px-vstack", at);
1899
- class nt extends K {
1900
- constructor() {
1901
- super();
1902
- }
1903
- connectedCallback() {
1904
- super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1905
- }
1906
- }
1907
- customElements.get("px-hstack") || customElements.define("px-hstack", nt);
1908
- class ct extends HTMLElement {
1909
- constructor() {
1910
- super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1911
- }
1912
- static get observedAttributes() {
1913
- return ["grow", "nogap"];
1914
- }
1915
- attributeChangedCallback(e, t, i) {
1916
- e === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
1917
- }
1918
- connectedCallback() {
1919
- this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
1920
- this.handleSizeChange();
1921
- }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
1922
- }
1923
- disconnectedCallback() {
1924
- var e;
1925
- (e = this.resizeObserver) == null || e.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
1926
- }
1927
- get grow() {
1928
- return this.getAttribute("grow");
1929
- }
1930
- set grow(e) {
1931
- this.setAttribute("grow", e);
1932
- }
1933
- scheduleRecheck() {
1934
- this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
1935
- this.recheckHandle = void 0, this.recalculateVisibility();
1936
- });
1937
- }
1938
- recalculateVisibility() {
1939
- this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
1940
- }
1941
- handleSizeChange() {
1942
- const e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
1943
- this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
1944
- }
1945
- updateParticipation() {
1946
- this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
1947
- }
1948
- get nogap() {
1949
- return this.hasAttribute("nogap");
1950
- }
1951
- set nogap(e) {
1952
- e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1953
- }
1954
- }
1955
- customElements.get("px-spacer") || customElements.define("px-spacer", ct);
1956
- const lt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", ye = new CSSStyleSheet();
1957
- ye.replaceSync(lt);
1958
- class pt extends L {
1959
- constructor() {
1960
- super(ye), this.template = (e) => `
561
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", k);
562
+ var A = [
563
+ "Inherit",
564
+ "Brand",
565
+ "Accent",
566
+ "Neutral",
567
+ "Dimmed",
568
+ "PurposeSuccess",
569
+ "PurposeWarning",
570
+ "PurposeError",
571
+ "PurposeUnlimited",
572
+ "PurposePromo",
573
+ "StateHover",
574
+ "StateActive",
575
+ "StateDisabled"
576
+ ].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), j = ":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)}", M = new CSSStyleSheet();
577
+ M.replaceSync(j);
578
+ var N = class extends n {
579
+ #e = null;
580
+ #t;
581
+ #n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
582
+ static get observedAttributes() {
583
+ return [
584
+ ...super.observedAttributes,
585
+ "name",
586
+ "size",
587
+ "color",
588
+ "aria-label",
589
+ "inverted",
590
+ "from",
591
+ "disabled"
592
+ ];
593
+ }
594
+ constructor(...e) {
595
+ super(...e, M), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
596
+ }
597
+ attributeChangedCallback(e, t, n) {
598
+ if (t !== n) switch (e) {
599
+ case "name":
600
+ this.updateName(t, n);
601
+ break;
602
+ case "size":
603
+ this.updateAttribute(e, t, n, ne);
604
+ break;
605
+ case "color":
606
+ this.updateAttribute(e, t, n, A);
607
+ break;
608
+ case "disabled":
609
+ this.color = "state-disabled";
610
+ break;
611
+ case "aria-label":
612
+ if (!this.#t) return;
613
+ n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
614
+ }
615
+ }
616
+ connectedCallback() {
617
+ this.role = "img";
618
+ let e = document.querySelectorAll("px-icon-set");
619
+ e || console.log("<px-icon-set> component not found");
620
+ for (let t of e) {
621
+ if (!t.getAttribute("name") || !t.getAttribute("src")) {
622
+ console.error("Icon name or src not found");
623
+ continue;
624
+ }
625
+ t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
626
+ }
627
+ !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"));
628
+ }
629
+ updateAttribute(e, t, n, r) {
630
+ 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) || g(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
631
+ }
632
+ updateName(e, t) {
633
+ this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
634
+ }
635
+ get $el() {
636
+ return this.shadowRoot.querySelector("svg");
637
+ }
638
+ get name() {
639
+ return this.getAttribute("name");
640
+ }
641
+ set name(e) {
642
+ v(this, "name", e);
643
+ }
644
+ get size() {
645
+ return this.getAttribute("size");
646
+ }
647
+ set size(e) {
648
+ v(this, "size", e);
649
+ }
650
+ get color() {
651
+ return this.getAttribute("color");
652
+ }
653
+ set color(e) {
654
+ v(this, "color", e);
655
+ }
656
+ get arialabel() {
657
+ return this.getAttribute("aria-label");
658
+ }
659
+ set arialabel(e) {
660
+ v(this, "aria-label", e);
661
+ }
662
+ get inverted() {
663
+ return this.hasAttribute("inverted");
664
+ }
665
+ set inverted(e) {
666
+ a(this, "inverted", e);
667
+ }
668
+ get from() {
669
+ return this.getAttribute("from");
670
+ }
671
+ set from(e) {
672
+ v(this, "from", e);
673
+ }
674
+ get disabled() {
675
+ return this.hasAttribute("disabled");
676
+ }
677
+ set disabled(e) {
678
+ a(this, "disabled", e);
679
+ }
680
+ };
681
+ customElements.get("px-icon") || customElements.define("px-icon", N);
682
+ //#endregion
683
+ //#region ../../components/Container/src/container.css?inline
684
+ var P = ":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)}}", F = new CSSStyleSheet();
685
+ F.replaceSync(P);
686
+ var I = [
687
+ "top-patch",
688
+ "top-neighbor-patch",
689
+ "top-ribbon",
690
+ "top-neighbor-ribbon",
691
+ "top-patch-and-neighbor-ribbon"
692
+ ], L = [
693
+ "1",
694
+ "2",
695
+ "3",
696
+ "4",
697
+ "5",
698
+ "6",
699
+ "7",
700
+ "8",
701
+ "9",
702
+ "10",
703
+ "11",
704
+ "12"
705
+ ], R = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, z = "px-padding", B = [
706
+ f("padding", R, _, z, "--container-padding"),
707
+ f("padding-inline", R, _, z),
708
+ f("padding-block", R, _, z),
709
+ f("padding-top", R, _, z),
710
+ f("padding-right", R, _, z, "--container-padding-right"),
711
+ f("padding-bottom", R, _, z),
712
+ f("padding-left", R, _, z, "--container-padding-left"),
713
+ f("gap", R, m, "px-spacing", void 0, "subgrid-gap")
714
+ ], V = class extends n {
715
+ static {
716
+ this.nativeName = "div";
717
+ }
718
+ constructor() {
719
+ super(F, ...B), this.template = () => "<div class=\"container\">\n <slot></slot>\n <slot name=\"anchor-left\"></slot>\n <slot name=\"anchor-right\"></slot>\n <slot name=\"anchor-full\"></slot>\n </div>", this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
720
+ }
721
+ static get observedAttributes() {
722
+ return [
723
+ ...super.observedAttributes,
724
+ "border",
725
+ "border-color",
726
+ "border-side",
727
+ "border-side--mobile",
728
+ "border-side--tablet",
729
+ "border-side--laptop",
730
+ "border-radius",
731
+ "no-border-radius",
732
+ "no-border-radius--mobile",
733
+ "no-border-radius--tablet",
734
+ "no-border-radius--laptop",
735
+ "background-color",
736
+ "background-color--mobile",
737
+ "background-color--tablet",
738
+ "background-color--laptop",
739
+ "background-gradient",
740
+ "background-gradient--mobile",
741
+ "background-gradient--tablet",
742
+ "background-gradient--laptop",
743
+ "background-image",
744
+ "background-image--mobile",
745
+ "background-image--tablet",
746
+ "background-image--laptop",
747
+ "background-size",
748
+ "background-position",
749
+ "box-shadow",
750
+ "anchor-offset",
751
+ "anchor-spacing",
752
+ "inverted",
753
+ "subgrid-rows"
754
+ ];
755
+ }
756
+ connectedCallback() {
757
+ this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
758
+ this.$slotAnchor && this.addAnchorClass();
759
+ }), this.contentObserver.observe(this, {
760
+ childList: !0,
761
+ subtree: !0,
762
+ characterData: !0
763
+ }), this._bgObserver = new IntersectionObserver((e) => {
764
+ e.forEach((e) => {
765
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
766
+ });
767
+ }), this._bgObserver.observe(this.$el);
768
+ }
769
+ disconnectedCallback() {
770
+ this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
771
+ }
772
+ attributeChangedCallback(e, t, n) {
773
+ if (t !== n) switch (e) {
774
+ case "border":
775
+ this.updateAttribute(e, t, n, l);
776
+ break;
777
+ case "border-color":
778
+ this.updateBorderColor(e, n);
779
+ break;
780
+ case "border-side":
781
+ case "border-side--mobile":
782
+ case "border-side--tablet":
783
+ case "border-side--laptop":
784
+ this.updateAttribute(e, t, n, c);
785
+ break;
786
+ case "border-radius":
787
+ this.updateAttribute(e, t, n, s);
788
+ break;
789
+ case "no-border-radius":
790
+ case "no-border-radius--mobile":
791
+ case "no-border-radius--tablet":
792
+ case "no-border-radius--laptop":
793
+ this.updateNoBorderRadius(e, t, n, re);
794
+ break;
795
+ case "background-color":
796
+ case "background-color--mobile":
797
+ case "background-color--tablet":
798
+ case "background-color--laptop":
799
+ this.updateBackgroundColor(e, n);
800
+ break;
801
+ case "background-gradient":
802
+ case "background-gradient--mobile":
803
+ case "background-gradient--tablet":
804
+ case "background-gradient--laptop":
805
+ this.updateGradient(e, n);
806
+ break;
807
+ case "background-size":
808
+ this.updateAttribute(e, t, n, i);
809
+ break;
810
+ case "background-image":
811
+ case "background-image--mobile":
812
+ case "background-image--tablet":
813
+ case "background-image--laptop":
814
+ this._isInViewport && this.updateBackgroundImg(e, n);
815
+ break;
816
+ case "background-position":
817
+ n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
818
+ break;
819
+ case "box-shadow":
820
+ this.updateAttribute(e, t, n, ee);
821
+ break;
822
+ case "anchor-offset":
823
+ this.updateAnchorOffset(t, n, _);
824
+ break;
825
+ case "anchor-spacing":
826
+ this.updateAnchorSpacing(t, n, I);
827
+ break;
828
+ case "subgrid-rows":
829
+ this.updateSubgridRows(e, t, n, L);
830
+ break;
831
+ default: super.attributeChangedCallback(e, t, n);
832
+ }
833
+ }
834
+ _loadBackgroundImages() {
835
+ [
836
+ "background-image",
837
+ "background-image--mobile",
838
+ "background-image--tablet",
839
+ "background-image--laptop"
840
+ ].forEach((e) => {
841
+ let t = this.getAttribute(e);
842
+ t && this.updateBackgroundImg(e, t);
843
+ });
844
+ }
845
+ updateBackgroundImg(e, t) {
846
+ this.$el.style.setProperty(`--${e}`, `url("${t}")`);
847
+ }
848
+ updateGradient(e, t) {
849
+ if (this.checkName(h, t)) {
850
+ let n = this.splitAttrNameFromBreakpoint(e);
851
+ e = n.attrName;
852
+ let r = n.breakpoint;
853
+ this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
854
+ } else g(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${h.join("\", \"")}".`);
855
+ }
856
+ updateBackgroundColor(e, t) {
857
+ let n = t.startsWith("surface-");
858
+ if (this.checkName(r, t)) {
859
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
860
+ 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"})`);
861
+ } else g(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
862
+ }
863
+ updateBorderColor(e, t) {
864
+ 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)`)) : g(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
865
+ }
866
+ updateNoBorderRadius(e, t, n, r) {
867
+ if (!this.checkName(r, n)) g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
868
+ else {
869
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
870
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
871
+ }
872
+ }
873
+ updateAttribute(e, t, n, r) {
874
+ if (!this.checkName(r, n)) g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
875
+ else {
876
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
877
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
878
+ }
879
+ }
880
+ splitAttrNameFromBreakpoint(e) {
881
+ let t = "";
882
+ if ([
883
+ "--mobile",
884
+ "--tablet",
885
+ "--laptop"
886
+ ].some((t) => e.includes(t))) {
887
+ let n = e.split("--");
888
+ e = n[0], t = `--${n[1]}`;
889
+ }
890
+ return {
891
+ attrName: e,
892
+ breakpoint: t
893
+ };
894
+ }
895
+ updateAnchorOffset(e, t, n) {
896
+ if (!u(n, t)) {
897
+ g(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
898
+ return;
899
+ }
900
+ let r = (e) => {
901
+ e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--container-anchor-offset--mobile", `var(--px-padding-${e}-mobile)`), this.$el.style.setProperty("--container-anchor-offset--tablet", `var(--px-padding-${e}-tablet)`), this.$el.style.setProperty("--container-anchor-offset--laptop", `var(--px-padding-${e}-laptop)`));
902
+ };
903
+ r(e), r(t);
904
+ }
905
+ addAnchorClass() {
906
+ this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
907
+ }
908
+ updateAnchorSpacing(e, t, n) {
909
+ if (!u(n, t)) {
910
+ g(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
911
+ return;
912
+ }
913
+ let r = (e) => {
914
+ e !== null && e !== "" && e !== "default" && (this.style.setProperty("--container-anchor-spacing--mobile", `var(--px-spacing-${e}-mobile)`), this.style.setProperty("--container-anchor-spacing--tablet", `var(--px-spacing-${e}-tablet)`), this.style.setProperty("--container-anchor-spacing--laptop", `var(--px-spacing-${e}-laptop)`), this.style.setProperty("--container-anchor-spacing--desktop", `var(--px-spacing-${e}-desktop)`));
915
+ };
916
+ r(e), r(t);
917
+ }
918
+ updateSubgridRows(e, t, n, r) {
919
+ u(r, n) ? this.style.setProperty(`--${e}`, n) : g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
920
+ }
921
+ get $el() {
922
+ return this?.shadowRoot?.querySelector(".container");
923
+ }
924
+ get $slotAnchor() {
925
+ return this.querySelector("[slot^=\"anchor\"]");
926
+ }
927
+ get padding() {
928
+ return this.getAttribute("padding");
929
+ }
930
+ set padding(e) {
931
+ v(this, "padding", e);
932
+ }
933
+ get paddingBlock() {
934
+ return this.getAttribute("padding-block");
935
+ }
936
+ set paddingBlock(e) {
937
+ v(this, "padding-block", e);
938
+ }
939
+ get paddingInline() {
940
+ return this.getAttribute("padding-inline");
941
+ }
942
+ set paddingInline(e) {
943
+ v(this, "padding-inline", e);
944
+ }
945
+ get paddingTop() {
946
+ return this.getAttribute("padding-top");
947
+ }
948
+ set paddingTop(e) {
949
+ v(this, "padding-top", e);
950
+ }
951
+ get paddingRight() {
952
+ return this.getAttribute("padding-right");
953
+ }
954
+ set paddingRight(e) {
955
+ v(this, "padding-right", e);
956
+ }
957
+ get paddingBottom() {
958
+ return this.getAttribute("padding-bottom");
959
+ }
960
+ set paddingBottom(e) {
961
+ v(this, "padding-bottom", e);
962
+ }
963
+ get paddingLeft() {
964
+ return this.getAttribute("padding-left");
965
+ }
966
+ set paddingLeft(e) {
967
+ v(this, "padding-left", e);
968
+ }
969
+ get paddingMobile() {
970
+ return this.getAttribute("padding--mobile");
971
+ }
972
+ set paddingMobile(e) {
973
+ v(this, "padding--mobile", e);
974
+ }
975
+ get paddingBlockMobile() {
976
+ return this.getAttribute("padding-block--mobile");
977
+ }
978
+ set paddingBlockMobile(e) {
979
+ v(this, "padding-block--mobile", e);
980
+ }
981
+ get paddingInlineMobile() {
982
+ return this.getAttribute("padding-inline--mobile");
983
+ }
984
+ set paddingInlineMobile(e) {
985
+ v(this, "padding-inline--mobile", e);
986
+ }
987
+ get paddingTopMobile() {
988
+ return this.getAttribute("padding-top--mobile");
989
+ }
990
+ set paddingTopMobile(e) {
991
+ v(this, "padding-top--mobile", e);
992
+ }
993
+ get paddingRightMobile() {
994
+ return this.getAttribute("padding-right--mobile");
995
+ }
996
+ set paddingRightMobile(e) {
997
+ v(this, "padding-right--mobile", e);
998
+ }
999
+ get paddingBottomMobile() {
1000
+ return this.getAttribute("padding-bottom--mobile");
1001
+ }
1002
+ set paddingBottomMobile(e) {
1003
+ v(this, "padding-bottom--mobile", e);
1004
+ }
1005
+ get paddingLeftMobile() {
1006
+ return this.getAttribute("padding-left--mobile");
1007
+ }
1008
+ set paddingLeftMobile(e) {
1009
+ v(this, "padding-left--mobile", e);
1010
+ }
1011
+ get paddingTablet() {
1012
+ return this.getAttribute("padding--tablet");
1013
+ }
1014
+ set paddingTablet(e) {
1015
+ v(this, "padding--tablet", e);
1016
+ }
1017
+ get paddingBlockTablet() {
1018
+ return this.getAttribute("padding-block--tablet");
1019
+ }
1020
+ set paddingBlockTablet(e) {
1021
+ v(this, "padding-block--tablet", e);
1022
+ }
1023
+ get paddingInlineTablet() {
1024
+ return this.getAttribute("padding-inline--tablet");
1025
+ }
1026
+ set paddingInlineTablet(e) {
1027
+ v(this, "padding-inline--tablet", e);
1028
+ }
1029
+ get paddingTopTablet() {
1030
+ return this.getAttribute("padding-top--tablet");
1031
+ }
1032
+ set paddingTopTablet(e) {
1033
+ v(this, "padding-top--tablet", e);
1034
+ }
1035
+ get paddingRightTablet() {
1036
+ return this.getAttribute("padding-right--tablet");
1037
+ }
1038
+ set paddingRightTablet(e) {
1039
+ v(this, "padding-right--tablet", e);
1040
+ }
1041
+ get paddingBottomTablet() {
1042
+ return this.getAttribute("padding-bottom--tablet");
1043
+ }
1044
+ set paddingBottomTablet(e) {
1045
+ v(this, "padding-bottom--tablet", e);
1046
+ }
1047
+ get paddingLeftTablet() {
1048
+ return this.getAttribute("padding-left--tablet");
1049
+ }
1050
+ set paddingLeftTablet(e) {
1051
+ v(this, "padding-left--tablet", e);
1052
+ }
1053
+ get paddingLaptop() {
1054
+ return this.getAttribute("padding--laptop");
1055
+ }
1056
+ set paddingLaptop(e) {
1057
+ v(this, "padding--laptop", e);
1058
+ }
1059
+ get paddingBlockLaptop() {
1060
+ return this.getAttribute("padding-block--laptop");
1061
+ }
1062
+ set paddingBlockLaptop(e) {
1063
+ v(this, "padding-block--laptop", e);
1064
+ }
1065
+ get paddingInlineLaptop() {
1066
+ return this.getAttribute("padding-inline--laptop");
1067
+ }
1068
+ set paddingInlineLaptop(e) {
1069
+ v(this, "padding-inline--laptop", e);
1070
+ }
1071
+ get paddingTopLaptop() {
1072
+ return this.getAttribute("padding-top--laptop");
1073
+ }
1074
+ set paddingTopLaptop(e) {
1075
+ v(this, "padding-top--laptop", e);
1076
+ }
1077
+ get paddingRightLaptop() {
1078
+ return this.getAttribute("padding-right--laptop");
1079
+ }
1080
+ set paddingRightLaptop(e) {
1081
+ v(this, "padding-right--laptop", e);
1082
+ }
1083
+ get paddingBottomLaptop() {
1084
+ return this.getAttribute("padding-bottom--laptop");
1085
+ }
1086
+ set paddingBottomLaptop(e) {
1087
+ v(this, "padding-bottom--laptop", e);
1088
+ }
1089
+ get paddingLeftLaptop() {
1090
+ return this.getAttribute("padding-left--laptop");
1091
+ }
1092
+ set paddingLeftLaptop(e) {
1093
+ v(this, "padding-left--laptop", e);
1094
+ }
1095
+ get border() {
1096
+ return this.getAttribute("border");
1097
+ }
1098
+ set border(e) {
1099
+ v(this, "border", e);
1100
+ }
1101
+ get borderColor() {
1102
+ return this.getAttribute("border-color");
1103
+ }
1104
+ set borderColor(e) {
1105
+ v(this, "border-color", e);
1106
+ }
1107
+ get borderSide() {
1108
+ return this.getAttribute("border-side");
1109
+ }
1110
+ set borderSide(e) {
1111
+ v(this, "border-side", e);
1112
+ }
1113
+ get borderSideMobile() {
1114
+ return this.getAttribute("border-side--mobile");
1115
+ }
1116
+ set borderSideMobile(e) {
1117
+ v(this, "border-side--mobile", e);
1118
+ }
1119
+ get borderSideTablet() {
1120
+ return this.getAttribute("border-side--tablet");
1121
+ }
1122
+ set borderSideTablet(e) {
1123
+ v(this, "border-side--tablet", e);
1124
+ }
1125
+ get borderSideLaptop() {
1126
+ return this.getAttribute("border-side--laptop");
1127
+ }
1128
+ set borderSideLaptop(e) {
1129
+ v(this, "border-side--laptop", e);
1130
+ }
1131
+ get borderRadius() {
1132
+ return this.getAttribute("border-radius");
1133
+ }
1134
+ set borderRadius(e) {
1135
+ v(this, "border-radius", e);
1136
+ }
1137
+ get noBorderRadius() {
1138
+ return this.getAttribute("no-border-radius");
1139
+ }
1140
+ set noBorderRadius(e) {
1141
+ v(this, "no-border-radius", e);
1142
+ }
1143
+ get noBorderRadiusMobile() {
1144
+ return this.getAttribute("no-border-radius--mobile");
1145
+ }
1146
+ set noBorderRadiusMobile(e) {
1147
+ v(this, "no-border-radius--mobile", e);
1148
+ }
1149
+ get noBorderRadiusTablet() {
1150
+ return this.getAttribute("no-border-radius--tablet");
1151
+ }
1152
+ set noBorderRadiusTablet(e) {
1153
+ v(this, "no-border-radius--tablet", e);
1154
+ }
1155
+ get noBorderRadiusLaptop() {
1156
+ return this.getAttribute("no-border-radius--laptop");
1157
+ }
1158
+ set noBorderRadiusLaptop(e) {
1159
+ v(this, "no-border-radius--laptop", e);
1160
+ }
1161
+ get backgroundColor() {
1162
+ return this.getAttribute("background-color");
1163
+ }
1164
+ set backgroundColor(e) {
1165
+ v(this, "background-color", e);
1166
+ }
1167
+ get backgroundColorMobile() {
1168
+ return this.getAttribute("background-color--mobile");
1169
+ }
1170
+ set backgroundColorMobile(e) {
1171
+ v(this, "background-color--mobile", e);
1172
+ }
1173
+ get backgroundColorTablet() {
1174
+ return this.getAttribute("background-color--tablet");
1175
+ }
1176
+ set backgroundColorTablet(e) {
1177
+ v(this, "background-color--tablet", e);
1178
+ }
1179
+ get backgroundColorLaptop() {
1180
+ return this.getAttribute("background-color--laptop");
1181
+ }
1182
+ set backgroundColorLaptop(e) {
1183
+ v(this, "background-color--laptop", e);
1184
+ }
1185
+ get gradient() {
1186
+ return this.getAttribute("background-gradient");
1187
+ }
1188
+ set gradient(e) {
1189
+ v(this, "background-gradient", e);
1190
+ }
1191
+ get gradientMobile() {
1192
+ return this.getAttribute("background-gradient--mobile");
1193
+ }
1194
+ set gradientMobile(e) {
1195
+ v(this, "background-gradient--mobile", e);
1196
+ }
1197
+ get gradientTablet() {
1198
+ return this.getAttribute("background-gradient--tablet");
1199
+ }
1200
+ set gradientTablet(e) {
1201
+ v(this, "background-gradient--tablet", e);
1202
+ }
1203
+ get gradientLaptop() {
1204
+ return this.getAttribute("background-gradient--laptop");
1205
+ }
1206
+ set gradientLaptop(e) {
1207
+ v(this, "background-gradient--laptop", e);
1208
+ }
1209
+ get backgroundImage() {
1210
+ return this.getAttribute("background-image");
1211
+ }
1212
+ set backgroundImage(e) {
1213
+ v(this, "background-image", e);
1214
+ }
1215
+ get backgroundImageMobile() {
1216
+ return this.getAttribute("background-image--mobile");
1217
+ }
1218
+ set backgroundImageMobile(e) {
1219
+ v(this, "background-image--mobile", e);
1220
+ }
1221
+ get backgroundImageTablet() {
1222
+ return this.getAttribute("background-image--tablet");
1223
+ }
1224
+ set backgroundImageTablet(e) {
1225
+ v(this, "background-image--tablet", e);
1226
+ }
1227
+ get backgroundImageLaptop() {
1228
+ return this.getAttribute("background-image--laptop");
1229
+ }
1230
+ set backgroundImageLaptop(e) {
1231
+ v(this, "background-image--laptop", e);
1232
+ }
1233
+ get backgroundSize() {
1234
+ return this.getAttribute("background-size");
1235
+ }
1236
+ set backgroundSize(e) {
1237
+ v(this, "background-size", e);
1238
+ }
1239
+ get backgroundPosition() {
1240
+ return this.getAttribute("background-position");
1241
+ }
1242
+ set backgroundPosition(e) {
1243
+ v(this, "background-position", e);
1244
+ }
1245
+ get boxShadow() {
1246
+ return this.getAttribute("box-shadow");
1247
+ }
1248
+ set boxShadow(e) {
1249
+ v(this, "box-shadow", e);
1250
+ }
1251
+ get anchorOffset() {
1252
+ return this.getAttribute("anchor-offset");
1253
+ }
1254
+ set anchorOffset(e) {
1255
+ v(this, "anchor-offset", e);
1256
+ }
1257
+ get anchorSpacing() {
1258
+ return this.getAttribute("anchor-spacing");
1259
+ }
1260
+ set anchorSpacing(e) {
1261
+ v(this, "anchor-spacing", e);
1262
+ }
1263
+ get inverted() {
1264
+ return this.hasAttribute("inverted");
1265
+ }
1266
+ set inverted(e) {
1267
+ a(this, "inverted", e);
1268
+ }
1269
+ get subgridRows() {
1270
+ return this.getAttribute("subgrid-rows");
1271
+ }
1272
+ set subgridRows(e) {
1273
+ v(this, "subgrid-rows", e);
1274
+ }
1275
+ get subgridGap() {
1276
+ return this.getAttribute("subgrid-gap");
1277
+ }
1278
+ set subgridGap(e) {
1279
+ v(this, "subgrid-gap", e);
1280
+ }
1281
+ get subgridGapMobile() {
1282
+ return this.getAttribute("subgrid-gap--mobile");
1283
+ }
1284
+ set subgridGapMobile(e) {
1285
+ v(this, "subgrid-gap--mobile", e);
1286
+ }
1287
+ get subgridGapTablet() {
1288
+ return this.getAttribute("subgrid-gap--tablet");
1289
+ }
1290
+ set subgridGapTablet(e) {
1291
+ v(this, "subgrid-gap--tablet", e);
1292
+ }
1293
+ get subgridGapLaptop() {
1294
+ return this.getAttribute("subgrid-gap--laptop");
1295
+ }
1296
+ set subgridGapLaptop(e) {
1297
+ v(this, "subgrid-gap--laptop", e);
1298
+ }
1299
+ };
1300
+ customElements.get("px-container") || customElements.define("px-container", V);
1301
+ //#endregion
1302
+ //#region ../../components/Layout/src/Stack.css?inline
1303
+ var H = ":host{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{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))}}", U = new CSSStyleSheet();
1304
+ U.replaceSync(H);
1305
+ var ue = [
1306
+ "",
1307
+ "default",
1308
+ "row",
1309
+ "row-reverse",
1310
+ "column",
1311
+ "column-reverse"
1312
+ ], de = [
1313
+ "",
1314
+ "default",
1315
+ "stretch",
1316
+ "flex-start",
1317
+ "start",
1318
+ "flex-end",
1319
+ "end",
1320
+ "center",
1321
+ "baseline"
1322
+ ], fe = [
1323
+ "",
1324
+ "default",
1325
+ "flex-start",
1326
+ "start",
1327
+ "flex-end",
1328
+ "end",
1329
+ "center",
1330
+ "space-between",
1331
+ "space-around",
1332
+ "space-evenly"
1333
+ ], pe = [
1334
+ "",
1335
+ "default",
1336
+ "nowrap",
1337
+ "wrap",
1338
+ "wrap-reverse"
1339
+ ], me = [
1340
+ "",
1341
+ "visible",
1342
+ "hidden",
1343
+ "scroll",
1344
+ "auto"
1345
+ ], W = class extends n {
1346
+ constructor() {
1347
+ super(U), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template;
1348
+ }
1349
+ connectedCallback() {
1350
+ 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");
1351
+ }
1352
+ static get observedAttributes() {
1353
+ return [
1354
+ ...super.observedAttributes,
1355
+ "direction",
1356
+ "direction--mobile",
1357
+ "direction--tablet",
1358
+ "direction--laptop",
1359
+ "direction--desktop",
1360
+ "gap",
1361
+ "gap--mobile",
1362
+ "gap--tablet",
1363
+ "gap--laptop",
1364
+ "gap--desktop",
1365
+ "justify-content",
1366
+ "justify-content--mobile",
1367
+ "justify-content--tablet",
1368
+ "justify-content--laptop",
1369
+ "justify-content--desktop",
1370
+ "align-items",
1371
+ "align-items--mobile",
1372
+ "align-items--tablet",
1373
+ "align-items--laptop",
1374
+ "align-items--desktop",
1375
+ "wrap",
1376
+ "wrap--mobile",
1377
+ "wrap--tablet",
1378
+ "wrap--laptop",
1379
+ "wrap--desktop",
1380
+ "overflow-x",
1381
+ "overflow-x--mobile",
1382
+ "overflow-x--tablet",
1383
+ "overflow-x--laptop",
1384
+ "overflow-x--desktop"
1385
+ ];
1386
+ }
1387
+ attributeChangedCallback(e, t, n) {
1388
+ switch (e) {
1389
+ case "gap":
1390
+ case "gap--mobile":
1391
+ case "gap--tablet":
1392
+ case "gap--laptop":
1393
+ case "gap--desktop":
1394
+ this.updateFlexProperties(e, t, n, m);
1395
+ break;
1396
+ case "justify-content":
1397
+ case "justify-content--mobile":
1398
+ case "justify-content--tablet":
1399
+ case "justify-content--laptop":
1400
+ case "justify-content--desktop":
1401
+ this.updateFlexProperties(e, t, n, fe);
1402
+ break;
1403
+ case "align-items":
1404
+ case "align-items--mobile":
1405
+ case "align-items--tablet":
1406
+ case "align-items--laptop":
1407
+ case "align-items--desktop":
1408
+ this.updateFlexProperties(e, t, n, de);
1409
+ break;
1410
+ case "wrap":
1411
+ case "wrap--mobile":
1412
+ case "wrap--tablet":
1413
+ case "wrap--laptop":
1414
+ case "wrap--desktop":
1415
+ this.updateFlexProperties(e, t, n, pe);
1416
+ break;
1417
+ case "direction":
1418
+ case "direction--mobile":
1419
+ case "direction--tablet":
1420
+ case "direction--laptop":
1421
+ case "direction--desktop":
1422
+ this.updateFlexProperties(e, t, n, ue);
1423
+ break;
1424
+ case "overflow-x":
1425
+ case "overflow-x--mobile":
1426
+ case "overflow-x--tablet":
1427
+ case "overflow-x--laptop":
1428
+ case "overflow-x--desktop":
1429
+ this.updateOverflowX(e, t, n, me);
1430
+ break;
1431
+ default: super.attributeChangedCallback(e, t, n);
1432
+ }
1433
+ }
1434
+ updateOverflowX(e, t, n, r) {
1435
+ if (!u(r, n)) {
1436
+ g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1437
+ return;
1438
+ }
1439
+ this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
1440
+ }
1441
+ updateFlexProperties(e, t, n, r) {
1442
+ this.checkName(r, n) || g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1443
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
1444
+ if (!i) this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((e) => {
1445
+ this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
1446
+ });
1447
+ else {
1448
+ let i = e.split("--")[1];
1449
+ this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
1450
+ }
1451
+ }
1452
+ updateStyle(e, t, n, r) {
1453
+ n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
1454
+ }
1455
+ get direction() {
1456
+ return this.getAttribute("direction");
1457
+ }
1458
+ set direction(e) {
1459
+ v(this, "direction", e);
1460
+ }
1461
+ get directionMobile() {
1462
+ return this.getAttribute("direction--mobile");
1463
+ }
1464
+ set directionMobile(e) {
1465
+ v(this, "direction--mobile", e);
1466
+ }
1467
+ get directionTablet() {
1468
+ return this.getAttribute("direction--tablet");
1469
+ }
1470
+ set directionTablet(e) {
1471
+ v(this, "direction--tablet", e);
1472
+ }
1473
+ get directionLaptop() {
1474
+ return this.getAttribute("direction--laptop");
1475
+ }
1476
+ set directionLaptop(e) {
1477
+ v(this, "direction--laptop", e);
1478
+ }
1479
+ get directionDesktop() {
1480
+ return this.getAttribute("direction--desktop");
1481
+ }
1482
+ set directionDesktop(e) {
1483
+ v(this, "direction--desktop", e);
1484
+ }
1485
+ get gap() {
1486
+ return this.getAttribute("gap");
1487
+ }
1488
+ set gap(e) {
1489
+ v(this, "gap", e);
1490
+ }
1491
+ get gapMobile() {
1492
+ return this.getAttribute("gap--mobile");
1493
+ }
1494
+ set gapMobile(e) {
1495
+ v(this, "gap--mobile", e);
1496
+ }
1497
+ get gapTablet() {
1498
+ return this.getAttribute("gap--tablet");
1499
+ }
1500
+ set gapTablet(e) {
1501
+ v(this, "gap--tablet", e);
1502
+ }
1503
+ get gapLaptop() {
1504
+ return this.getAttribute("gap--laptop");
1505
+ }
1506
+ set gapLaptop(e) {
1507
+ v(this, "gap--laptop", e);
1508
+ }
1509
+ get gapDesktop() {
1510
+ return this.getAttribute("gap--desktop");
1511
+ }
1512
+ set gapDesktop(e) {
1513
+ v(this, "gap--desktop", e);
1514
+ }
1515
+ get justifyContent() {
1516
+ return this.getAttribute("justify-content");
1517
+ }
1518
+ set justifyContent(e) {
1519
+ v(this, "justify-content", e);
1520
+ }
1521
+ get justifyContentMobile() {
1522
+ return this.getAttribute("justify-content--mobile");
1523
+ }
1524
+ set justifyContentMobile(e) {
1525
+ v(this, "justify-content--mobile", e);
1526
+ }
1527
+ get justifyContentTablet() {
1528
+ return this.getAttribute("justify-content--tablet");
1529
+ }
1530
+ set justifyContentTablet(e) {
1531
+ v(this, "justify-content--tablet", e);
1532
+ }
1533
+ get justifyContentLaptop() {
1534
+ return this.getAttribute("justify-content--laptop");
1535
+ }
1536
+ set justifyContentLaptop(e) {
1537
+ v(this, "justify-content--laptop", e);
1538
+ }
1539
+ get justifyContentDesktop() {
1540
+ return this.getAttribute("justify-content--desktop");
1541
+ }
1542
+ set justifyContentDesktop(e) {
1543
+ v(this, "justify-content--desktop", e);
1544
+ }
1545
+ get alignItems() {
1546
+ return this.getAttribute("align-items");
1547
+ }
1548
+ set alignItems(e) {
1549
+ v(this, "align-items", e);
1550
+ }
1551
+ get alignItemsMobile() {
1552
+ return this.getAttribute("align-items--mobile");
1553
+ }
1554
+ set alignItemsMobile(e) {
1555
+ v(this, "align-items--mobile", e);
1556
+ }
1557
+ get alignItemsTablet() {
1558
+ return this.getAttribute("align-items--tablet");
1559
+ }
1560
+ set alignItemsTablet(e) {
1561
+ v(this, "align-items--tablet", e);
1562
+ }
1563
+ get alignItemsLaptop() {
1564
+ return this.getAttribute("align-items--laptop");
1565
+ }
1566
+ set alignItemsLaptop(e) {
1567
+ v(this, "align-items--laptop", e);
1568
+ }
1569
+ get alignItemsDesktop() {
1570
+ return this.getAttribute("align-items--desktop");
1571
+ }
1572
+ set alignItemsDesktop(e) {
1573
+ v(this, "align-items--desktop", e);
1574
+ }
1575
+ get wrap() {
1576
+ return this.getAttribute("wrap");
1577
+ }
1578
+ set wrap(e) {
1579
+ v(this, "wrap", e);
1580
+ }
1581
+ get wrapMobile() {
1582
+ return this.getAttribute("wrap--mobile");
1583
+ }
1584
+ set wrapMobile(e) {
1585
+ v(this, "wrap--mobile", e);
1586
+ }
1587
+ get wrapTablet() {
1588
+ return this.getAttribute("wrap--tablet");
1589
+ }
1590
+ set wrapTablet(e) {
1591
+ v(this, "wrap--tablet", e);
1592
+ }
1593
+ get wrapLaptop() {
1594
+ return this.getAttribute("wrap--laptop");
1595
+ }
1596
+ set wrapLaptop(e) {
1597
+ v(this, "wrap--laptop", e);
1598
+ }
1599
+ get wrapDesktop() {
1600
+ return this.getAttribute("wrap--desktop");
1601
+ }
1602
+ set wrapDesktop(e) {
1603
+ v(this, "wrap--desktop", e);
1604
+ }
1605
+ get overflowX() {
1606
+ return this.getAttribute("overflow-x");
1607
+ }
1608
+ set overflowX(e) {
1609
+ v(this, "overflow-x", e);
1610
+ }
1611
+ get overflowXMobile() {
1612
+ return this.getAttribute("overflow-x--mobile");
1613
+ }
1614
+ set overflowXMobile(e) {
1615
+ v(this, "overflow-x--mobile", e);
1616
+ }
1617
+ get overflowXTablet() {
1618
+ return this.getAttribute("overflow-x--tablet");
1619
+ }
1620
+ set overflowXTablet(e) {
1621
+ v(this, "overflow-x--tablet", e);
1622
+ }
1623
+ get overflowXLaptop() {
1624
+ return this.getAttribute("overflow-x--laptop");
1625
+ }
1626
+ set overflowXLaptop(e) {
1627
+ v(this, "overflow-x--laptop", e);
1628
+ }
1629
+ get overflowXDesktop() {
1630
+ return this.getAttribute("overflow-x--desktop");
1631
+ }
1632
+ set overflowXDesktop(e) {
1633
+ v(this, "overflow-x--desktop", e);
1634
+ }
1635
+ get $el() {
1636
+ return this.shadowRoot.querySelector(".flex-container");
1637
+ }
1638
+ };
1639
+ customElements.get("px-stack") || customElements.define("px-stack", W);
1640
+ var he = class extends W {
1641
+ constructor() {
1642
+ super();
1643
+ }
1644
+ connectedCallback() {
1645
+ super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1646
+ }
1647
+ };
1648
+ customElements.get("px-vstack") || customElements.define("px-vstack", he);
1649
+ var ge = class extends W {
1650
+ constructor() {
1651
+ super();
1652
+ }
1653
+ connectedCallback() {
1654
+ super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1655
+ }
1656
+ };
1657
+ customElements.get("px-hstack") || customElements.define("px-hstack", ge);
1658
+ //#endregion
1659
+ //#region ../../components/Layout/src/Spacer.ts
1660
+ var _e = class extends HTMLElement {
1661
+ constructor() {
1662
+ super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1663
+ }
1664
+ static get observedAttributes() {
1665
+ return ["grow", "nogap"];
1666
+ }
1667
+ attributeChangedCallback(e, t, n) {
1668
+ e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
1669
+ }
1670
+ connectedCallback() {
1671
+ this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
1672
+ this.handleSizeChange();
1673
+ }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
1674
+ }
1675
+ disconnectedCallback() {
1676
+ this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
1677
+ }
1678
+ get grow() {
1679
+ return this.getAttribute("grow");
1680
+ }
1681
+ set grow(e) {
1682
+ this.setAttribute("grow", `${e}`);
1683
+ }
1684
+ scheduleRecheck() {
1685
+ this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
1686
+ this.recheckHandle = void 0, this.recalculateVisibility();
1687
+ });
1688
+ }
1689
+ recalculateVisibility() {
1690
+ this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
1691
+ }
1692
+ handleSizeChange() {
1693
+ let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
1694
+ this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
1695
+ }
1696
+ updateParticipation() {
1697
+ this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
1698
+ }
1699
+ get nogap() {
1700
+ return this.hasAttribute("nogap");
1701
+ }
1702
+ set nogap(e) {
1703
+ e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1704
+ }
1705
+ };
1706
+ customElements.get("px-spacer") || customElements.define("px-spacer", _e);
1707
+ //#endregion
1708
+ //#region ../../components/Layout/src/Page.css?inline
1709
+ var ve = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", G = new CSSStyleSheet();
1710
+ G.replaceSync(ve);
1711
+ var ye = class extends n {
1712
+ constructor() {
1713
+ super(G), this.template = (e) => `
1961
1714
  <px-container border-radius="none" padding="none">
1962
1715
  <px-vstack>
1963
1716
  <px-container id="header-container" border-radius="none">
@@ -2060,269 +1813,243 @@ class pt extends L {
2060
1813
  </px-vstack>
2061
1814
  </px-container>
2062
1815
  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
2063
- }
2064
- static get observedAttributes() {
2065
- return [
2066
- ...super.observedAttributes,
2067
- "background-image",
2068
- "gap",
2069
- "background-color",
2070
- "padding-vertical",
2071
- "padding-horizontal"
2072
- ];
2073
- }
2074
- get $wideImage() {
2075
- return this.shadowRoot.querySelector("#image-box");
2076
- }
2077
- get $bodyVStackContainer() {
2078
- return this.shadowRoot.querySelector("#header-vstack-container");
2079
- }
2080
- get $bodyContainer() {
2081
- return this.shadowRoot.querySelector("#body-container");
2082
- }
2083
- get $contactContainer() {
2084
- return this.shadowRoot.querySelector("#contact-container");
2085
- }
2086
- get $footerContainer() {
2087
- return this.shadowRoot.querySelector("#footer-container");
2088
- }
2089
- get $headerContainer() {
2090
- return this.shadowRoot.querySelector("#header-container");
2091
- }
2092
- get $imageContainer() {
2093
- return this.shadowRoot.querySelector("#image-container");
2094
- }
2095
- get backgroundImage() {
2096
- return this.getAttribute("background-image");
2097
- }
2098
- get $imageStickySlot() {
2099
- return this.querySelector('*[slot="image-sticky-container"]');
2100
- }
2101
- get $main() {
2102
- return this.shadowRoot.querySelector("#main");
2103
- }
2104
- get backgroundColor() {
2105
- return this.getAttribute("background-color") || "none";
2106
- }
2107
- get paddingVertical() {
2108
- return this.getAttribute("padding-vertical");
2109
- }
2110
- get paddingHorizontal() {
2111
- return this.getAttribute("padding-horizontal");
2112
- }
2113
- set paddingVertical(e) {
2114
- this.setAttribute("padding-vertical", e);
2115
- }
2116
- set paddingHorizontal(e) {
2117
- this.setAttribute("padding-horizontal", e);
2118
- }
2119
- get gap() {
2120
- return this.getAttribute("gap");
2121
- }
2122
- connectedCallback() {
2123
- this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
2124
- }
2125
- attributeChangedCallback(e, t, i) {
2126
- if (t !== i)
2127
- switch (e) {
2128
- case "background-image":
2129
- this.$imageContainer.setAttribute("background-image", i);
2130
- break;
2131
- case "gap":
2132
- this.$bodyVStackContainer.setAttribute("gap", i);
2133
- break;
2134
- case "background-color":
2135
- this.$bodyContainer.setAttribute(
2136
- "background-color",
2137
- F.indexOf(i) > 0 ? i : "none"
2138
- );
2139
- break;
2140
- case "padding-vertical":
2141
- this.handlePaddingVerticalChange(i);
2142
- break;
2143
- case "padding-horizontal":
2144
- this.handlePaddingHorizontalChange(i);
2145
- break;
2146
- default:
2147
- super.attributeChangedCallback(e, t, i);
2148
- }
2149
- }
2150
- handlePaddingVerticalChange(e) {
2151
- this.$headerContainer.setAttribute("padding-top", e), this.$footerContainer.setAttribute("padding-bottom", e);
2152
- }
2153
- handlePaddingHorizontalChange(e) {
2154
- this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
2155
- }
2156
- }
2157
- customElements.get("px-page") === void 0 && customElements.define("px-page", pt);
2158
- const dt = "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 (min-width: 48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (min-width: 64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-laptop)}}", ut = ".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 (min-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 (min-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 (min-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)}", ke = new CSSStyleSheet(), we = new CSSStyleSheet();
2159
- ke.replaceSync(dt);
2160
- we.replaceSync(ut);
2161
- const te = class te extends ce {
2162
- constructor() {
2163
- super(ke, we), this.template = () => "<span><slot></slot></span>", this.shadowRoot.innerHTML = this.template();
2164
- }
2165
- static get observedAttributes() {
2166
- return [
2167
- ...super.observedAttributes,
2168
- "color",
2169
- "font-size",
2170
- "font-weight",
2171
- "inverted",
2172
- "disabled",
2173
- "strikethrough"
2174
- ];
2175
- }
2176
- attributeChangedCallback(e, t, i) {
2177
- if (t !== i)
2178
- switch (e) {
2179
- case "color":
2180
- this.updateTypography(e, t, i, Fe);
2181
- break;
2182
- case "font-size":
2183
- this.updateTypography(e, t, i, Ie);
2184
- break;
2185
- case "font-weight":
2186
- this.updateTypography(e, t, i, Be);
2187
- break;
2188
- case "disabled":
2189
- this.color = "state-disabled";
2190
- break;
2191
- default:
2192
- super.attributeChangedCallback(e, t, i);
2193
- break;
2194
- }
2195
- }
2196
- updateTypography(e, t, i, r) {
2197
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${e}-${i}`), this.checkName(r, i) || p(
2198
- `"${i}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
2199
- );
2200
- }
2201
- get color() {
2202
- return this.getAttribute("color");
2203
- }
2204
- set color(e) {
2205
- this.setAttribute("color", e);
2206
- }
2207
- get fontsize() {
2208
- return this.getAttribute("font-size");
2209
- }
2210
- set fontsize(e) {
2211
- this.setAttribute("font-size", e);
2212
- }
2213
- get fontweight() {
2214
- return this.getAttribute("font-weight");
2215
- }
2216
- set fontweight(e) {
2217
- this.setAttribute("font-weight", e);
2218
- }
2219
- get inverted() {
2220
- return this.getAttribute("inverted");
2221
- }
2222
- set inverted(e) {
2223
- I(e) ? this.removeAttribute("inverted") : this.setAttribute("inverted", e);
2224
- }
2225
- get strikethrough() {
2226
- return this.getAttribute("strikethrough");
2227
- }
2228
- set strikethrough(e) {
2229
- I(e) ? this.removeAttribute("strikethrough") : this.setAttribute("strikethrough", e);
2230
- }
2231
- get disabled() {
2232
- return this.getAttribute("disabled");
2233
- }
2234
- set disabled(e) {
2235
- I(e) ? this.removeAttribute("disabled") : this.setAttribute("disabled", e);
2236
- }
1816
+ }
1817
+ static get observedAttributes() {
1818
+ return [
1819
+ ...super.observedAttributes,
1820
+ "background-image",
1821
+ "gap",
1822
+ "background-color",
1823
+ "padding-vertical",
1824
+ "padding-horizontal"
1825
+ ];
1826
+ }
1827
+ get $wideImage() {
1828
+ return this.shadowRoot.querySelector("#image-box");
1829
+ }
1830
+ get $bodyVStackContainer() {
1831
+ return this.shadowRoot.querySelector("#header-vstack-container");
1832
+ }
1833
+ get $bodyContainer() {
1834
+ return this.shadowRoot.querySelector("#body-container");
1835
+ }
1836
+ get $contactContainer() {
1837
+ return this.shadowRoot.querySelector("#contact-container");
1838
+ }
1839
+ get $footerContainer() {
1840
+ return this.shadowRoot.querySelector("#footer-container");
1841
+ }
1842
+ get $headerContainer() {
1843
+ return this.shadowRoot.querySelector("#header-container");
1844
+ }
1845
+ get $imageContainer() {
1846
+ return this.shadowRoot.querySelector("#image-container");
1847
+ }
1848
+ get backgroundImage() {
1849
+ return this.getAttribute("background-image");
1850
+ }
1851
+ get $imageStickySlot() {
1852
+ return this.querySelector("*[slot=\"image-sticky-container\"]");
1853
+ }
1854
+ get $main() {
1855
+ return this.shadowRoot.querySelector("#main");
1856
+ }
1857
+ get backgroundColor() {
1858
+ return this.getAttribute("background-color") || "none";
1859
+ }
1860
+ get paddingVertical() {
1861
+ return this.getAttribute("padding-vertical");
1862
+ }
1863
+ get paddingHorizontal() {
1864
+ return this.getAttribute("padding-horizontal");
1865
+ }
1866
+ set paddingVertical(e) {
1867
+ this.setAttribute("padding-vertical", `${e}`);
1868
+ }
1869
+ set paddingHorizontal(e) {
1870
+ this.setAttribute("padding-horizontal", `${e}`);
1871
+ }
1872
+ get gap() {
1873
+ return this.getAttribute("gap");
1874
+ }
1875
+ connectedCallback() {
1876
+ this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
1877
+ }
1878
+ attributeChangedCallback(e, t, n) {
1879
+ if (t !== n) switch (e) {
1880
+ case "background-image":
1881
+ this.$imageContainer.setAttribute("background-image", n);
1882
+ break;
1883
+ case "gap":
1884
+ this.$bodyVStackContainer.setAttribute("gap", n);
1885
+ break;
1886
+ case "background-color":
1887
+ this.$bodyContainer.setAttribute("background-color", r.indexOf(n) > 0 ? n : "none");
1888
+ break;
1889
+ case "padding-vertical":
1890
+ this.handlePaddingVerticalChange(n);
1891
+ break;
1892
+ case "padding-horizontal":
1893
+ this.handlePaddingHorizontalChange(n);
1894
+ break;
1895
+ default: super.attributeChangedCallback(e, t, n);
1896
+ }
1897
+ }
1898
+ handlePaddingVerticalChange(e) {
1899
+ this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
1900
+ }
1901
+ handlePaddingHorizontalChange(e) {
1902
+ this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
1903
+ }
2237
1904
  };
2238
- te.nativeName = "span";
2239
- let Y = te;
2240
- customElements.get("px-span") || customElements.define("px-span", Y);
2241
- const Ae = ":host{display:block}.container{min-height:var(--px-size-l);display:flex}.container>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:100%;min-height:100%;display:flex;align-items:center;margin:0;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer;padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile)}.autocomplete-header{overflow:hidden}.autocomplete-header px-span{min-width:0;overflow-wrap:anywhere}: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 (min-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 (min-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 (min-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))}}", $e = new CSSStyleSheet();
2242
- $e.replaceSync(Ae);
2243
- var H, ze;
2244
- class ht extends HTMLElement {
2245
- constructor() {
2246
- super();
2247
- c(this, H);
2248
- this.template = () => `
2249
- <px-container border-radius="none" padding="s" background-color="container-default" class="autocomplete-header">
2250
- <px-hstack gap="s" align-items="center">
2251
- <px-icon name="search" color="brand" size="m" from="lavender"></px-icon>
2252
- <px-span size="body-s"><slot></slot></px-span>
2253
- </px-hstack>
2254
- </px-container>
2255
- `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [$e];
2256
- }
2257
- connectedCallback() {
2258
- u(this, H, ze).call(this);
2259
- }
2260
- get $icon() {
2261
- return this.shadowRoot.querySelector("px-icon");
2262
- }
2263
- get $text() {
2264
- return this.shadowRoot.querySelector("px-span");
2265
- }
2266
- }
2267
- H = new WeakSet(), ze = function() {
2268
- var t;
2269
- ((t = this.parentElement) == null ? void 0 : t.localName) === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
1905
+ customElements.get("px-page") === void 0 && customElements.define("px-page", ye);
1906
+ //#endregion
1907
+ //#region ../../components/Span/src/span.css?inline
1908
+ var be = "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-tablet)}}@media screen and (width>=64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-laptop)}}", K = ".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();
1909
+ q.replaceSync(be), J.replaceSync(K);
1910
+ var xe = class extends t {
1911
+ static {
1912
+ this.nativeName = "span";
1913
+ }
1914
+ constructor() {
1915
+ super(q, J), this.template = () => "<span><slot></slot></span>", this.shadowRoot.innerHTML = this.template();
1916
+ }
1917
+ static get observedAttributes() {
1918
+ return [
1919
+ ...super.observedAttributes,
1920
+ "color",
1921
+ "font-size",
1922
+ "font-weight",
1923
+ "inverted",
1924
+ "disabled",
1925
+ "strikethrough"
1926
+ ];
1927
+ }
1928
+ attributeChangedCallback(e, t, n) {
1929
+ if (t !== n) switch (e) {
1930
+ case "color":
1931
+ this.updateTypography(e, t, n, d);
1932
+ break;
1933
+ case "font-size":
1934
+ this.updateTypography(e, t, n, te);
1935
+ break;
1936
+ case "font-weight":
1937
+ this.updateTypography(e, t, n, p);
1938
+ break;
1939
+ case "disabled":
1940
+ this.color = "state-disabled";
1941
+ break;
1942
+ default: super.attributeChangedCallback(e, t, n);
1943
+ }
1944
+ }
1945
+ updateTypography(e, t, n, r) {
1946
+ 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) || g(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1947
+ }
1948
+ get color() {
1949
+ return this.getAttribute("color");
1950
+ }
1951
+ set color(e) {
1952
+ this._updateAttribute("color", e);
1953
+ }
1954
+ get fontsize() {
1955
+ return this.getAttribute("font-size");
1956
+ }
1957
+ set fontsize(e) {
1958
+ this._updateAttribute("font-size", e);
1959
+ }
1960
+ get fontweight() {
1961
+ return this.getAttribute("font-weight");
1962
+ }
1963
+ set fontweight(e) {
1964
+ this._updateAttribute("font-weight", e);
1965
+ }
1966
+ get inverted() {
1967
+ return this.hasAttribute("inverted");
1968
+ }
1969
+ set inverted(e) {
1970
+ this._updateBooleanAttribute("inverted", e);
1971
+ }
1972
+ get strikethrough() {
1973
+ return this.hasAttribute("strikethrough");
1974
+ }
1975
+ set strikethrough(e) {
1976
+ this._updateBooleanAttribute("strikethrough", e);
1977
+ }
1978
+ get disabled() {
1979
+ return this.hasAttribute("disabled");
1980
+ }
1981
+ set disabled(e) {
1982
+ this._updateBooleanAttribute("disabled", e);
1983
+ }
2270
1984
  };
2271
- customElements.get("px-autocomplete-header") || customElements.define("px-autocomplete-header", ht);
2272
- const Ce = new CSSStyleSheet();
2273
- Ce.replaceSync(Ae);
2274
- var P, Se;
2275
- class bt extends HTMLElement {
2276
- constructor() {
2277
- super();
2278
- c(this, P);
2279
- this.template = () => '<div tabindex="-1" class="container"><button type="button" role="option"><px-span size="body-s"><slot></slot></px-span></button></div>', this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Ce];
2280
- }
2281
- static get observedAttributes() {
2282
- return ["selected", "type"];
2283
- }
2284
- attributeChangedCallback(t, i, r) {
2285
- if (i !== r) {
2286
- if (t === "selected") {
2287
- this.$button.setAttribute("aria-selected", String(r !== null));
2288
- return;
2289
- }
2290
- r === null ? this.$button.removeAttribute(t) : this.$button.setAttribute(t, r);
2291
- }
2292
- }
2293
- connectedCallback() {
2294
- u(this, P, Se).call(this), this.$button.setAttribute(
2295
- "aria-selected",
2296
- String(this.hasAttribute("selected"))
2297
- ), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
2298
- }
2299
- // delegate host focus to the inner option button
2300
- focus(t) {
2301
- this.$button.focus(t);
2302
- }
2303
- get selected() {
2304
- return this.hasAttribute("selected");
2305
- }
2306
- set selected(t) {
2307
- this.toggleAttribute("selected", t);
2308
- }
2309
- get type() {
2310
- return this.getAttribute("type") ?? "button";
2311
- }
2312
- set type(t) {
2313
- this.setAttribute("type", t);
2314
- }
2315
- get $button() {
2316
- return this.shadowRoot.querySelector("button");
2317
- }
2318
- }
2319
- P = new WeakSet(), Se = function() {
2320
- var t;
2321
- ((t = this.parentElement) == null ? void 0 : t.localName) === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
1985
+ customElements.get("px-span") || customElements.define("px-span", xe);
1986
+ //#endregion
1987
+ //#region src/autocomplete-option.css?inline
1988
+ 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();
1989
+ X.replaceSync(Y);
1990
+ var Z = class extends HTMLElement {
1991
+ constructor() {
1992
+ super(), this.template = () => "\n <px-container border-radius=\"none\" padding=\"s\" background-color=\"container-default\" class=\"autocomplete-header\">\n <px-hstack gap=\"s\" align-items=\"center\">\n <px-icon name=\"search\" color=\"brand\" size=\"m\" from=\"lavender\"></px-icon>\n <px-span size=\"body-s\"><slot></slot></px-span>\n </px-hstack>\n </px-container>\n ", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [X];
1993
+ }
1994
+ connectedCallback() {
1995
+ this.#e();
1996
+ }
1997
+ #e() {
1998
+ this.parentElement?.localName === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
1999
+ }
2000
+ get $icon() {
2001
+ return this.shadowRoot.querySelector("px-icon");
2002
+ }
2003
+ get $text() {
2004
+ return this.shadowRoot.querySelector("px-span");
2005
+ }
2322
2006
  };
2323
- customElements.get("px-autocomplete-option") || customElements.define("px-autocomplete-option", bt);
2324
- export {
2325
- X as Autocomplete,
2326
- ht as AutocompleteHeader,
2327
- bt as AutocompleteOption
2007
+ customElements.get("px-autocomplete-header") || customElements.define("px-autocomplete-header", Z);
2008
+ //#endregion
2009
+ //#region src/AutocompleteOption.ts
2010
+ var Q = new CSSStyleSheet();
2011
+ Q.replaceSync(Y);
2012
+ var $ = class extends HTMLElement {
2013
+ constructor() {
2014
+ super(), this.template = () => "<div tabindex=\"-1\" class=\"container\"><button type=\"button\" role=\"option\"><px-span size=\"body-s\"><slot></slot></px-span></button></div>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [Q];
2015
+ }
2016
+ static get observedAttributes() {
2017
+ return ["selected", "type"];
2018
+ }
2019
+ attributeChangedCallback(e, t, n) {
2020
+ if (t !== n) {
2021
+ if (e === "selected") {
2022
+ this.$button.setAttribute("aria-selected", String(n !== null));
2023
+ return;
2024
+ }
2025
+ n === null ? this.$button.removeAttribute(e) : this.$button.setAttribute(e, n);
2026
+ }
2027
+ }
2028
+ connectedCallback() {
2029
+ this.#e(), this.$button.setAttribute("aria-selected", String(this.hasAttribute("selected"))), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
2030
+ }
2031
+ focus(e) {
2032
+ this.$button.focus(e);
2033
+ }
2034
+ #e() {
2035
+ this.parentElement?.localName === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
2036
+ }
2037
+ get selected() {
2038
+ return this.hasAttribute("selected");
2039
+ }
2040
+ set selected(e) {
2041
+ this.toggleAttribute("selected", e);
2042
+ }
2043
+ get type() {
2044
+ return this.getAttribute("type") ?? "button";
2045
+ }
2046
+ set type(e) {
2047
+ this.setAttribute("type", e);
2048
+ }
2049
+ get $button() {
2050
+ return this.shadowRoot.querySelector("button");
2051
+ }
2328
2052
  };
2053
+ customElements.get("px-autocomplete-option") || customElements.define("px-autocomplete-option", $);
2054
+ //#endregion
2055
+ export { O as Autocomplete, Z as AutocompleteHeader, $ as AutocompleteOption };