@proximus/lavender-autocomplete 1.4.14-beta.3 → 1.4.14

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 +2177 -1898
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,28 +1,60 @@
1
- import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, backgroundColorValues as r, backgroundSizeValues as i, booleanPropertyToAttributeSetter as a, borderColorValues as o, borderRadiusValues as s, borderSideValues as c, borderValues as ee, boxShadowValues as te, checkName as l, colorValues as ne, cssTokenBreakpoints as u, fontsizeValues as d, fontweightValues as f, gapValues as p, gradientValues as m, iconSizeValuesKC as re, log as h, noBorderRadiusValues as ie, paddingValues as g, propertyToAttributeSetter as _, transferAccessibilityAttributes 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"
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"
8
12
  ];
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
- });
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
+ });
17
23
  }
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", ae = class extends n {
24
- get css() {
25
- return `::slotted([slot='trigger']) {
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']) {
26
58
  anchor-name: ${this.anchorName};
27
59
  }
28
60
  :host([anchoralignment="bottom-left"]) {
@@ -53,121 +85,129 @@ var w = "bottom-left", ae = class extends n {
53
85
  right: anchor(${this.anchorName} right);
54
86
  }
55
87
  }`;
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) : (h(`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
- _(this, "popover-height", e);
161
- }
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)));
162
203
  };
163
- customElements.get("px-dropdown") || customElements.define("px-dropdown", ae);
164
- //#endregion
165
- //#region ../../components/Input/src/input.css?inline
166
- var oe = ":host{--icon-error:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23B30000;%7D%3C/style%3E%3C/defs%3E%3Cg id='forms-error'%3E%3Cpath id='Error' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0ZM7.42,4.65a1.08,1.08,0,1,1,2.16,0V8.79a1.08,1.08,0,0,1-2.16,0Zm1.93,8.44a1.2,1.2,0,0,1-1.7-1.69,1.15,1.15,0,0,1,.85-.35,1.11,1.11,0,0,1,.84.35h0A1.21,1.21,0,0,1,9.35,13.09Z'/%3E%3C/g%3E%3C/svg%3E\");--icon-success:url(\"data:image/svg+xml,%3Csvg id='forms-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' width='17' height='17'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23008000;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Success' class='cls-1' d='M8.5,0A8.5,8.5,0,1,0,17,8.5,8.51,8.51,0,0,0,8.5,0Zm3.69,7.08-4.29,4a.81.81,0,0,1-.56.22.84.84,0,0,1-.59-.24L4.67,9A.81.81,0,0,1,5.81,7.85L7.35,9.4,11.1,5.91a.8.8,0,0,1,1.09,1.17Z'/%3E%3C/svg%3E\");--icon-search:url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M17.6451%2016.6649L12.5811%2011.7844C13.4371%2010.7503%2013.9122%209.46601%2013.9282%208.10498C13.9463%206.53112%2013.351%205.04391%2012.251%203.91824C11.1511%202.79211%209.67878%202.16202%208.10492%202.14352C8.081%202.14352%208.05753%202.14307%208.03406%202.14307C6.48637%202.14307%205.02715%202.7375%203.9182%203.82074C2.79208%204.92069%202.16199%206.393%202.14349%207.96687C2.12498%209.54118%202.72031%2011.0279%203.82026%2012.1536C4.97344%2013.3339%206.50442%2013.9261%208.03677%2013.9261C9.28408%2013.9261%2010.5303%2013.528%2011.5758%2012.7405L16.6828%2017.6633C16.8173%2017.7928%2016.9906%2017.8574%2017.164%2017.8574C17.3454%2017.8574%2017.5273%2017.7865%2017.6632%2017.6452C17.929%2017.3694%2017.9209%2016.9307%2017.6451%2016.6649ZM11.1849%2011.2595C10.3237%2012.1008%209.18546%2012.5707%207.98305%2012.5418C6.7793%2012.5278%205.65317%2012.0457%204.8123%2011.185C3.97101%2010.3238%203.5156%209.18687%203.53004%207.98312C3.54403%206.77981%204.02608%205.65369%204.88678%204.81282C5.73487%203.98413%206.85106%203.52962%208.03451%203.52962C8.05256%203.52962%208.07062%203.53007%208.08867%203.53007C9.29198%203.54406%2010.4181%204.02611%2011.2589%204.88684C12.1003%205.74802%2012.5557%206.88498%2012.5417%208.08873C12.5277%209.29249%2012.0456%2010.4186%2011.1849%2011.2595Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-cancel:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.33333 0C12.9357 0 16.6667 3.73096 16.6667 8.33333C16.6667 12.9357 12.9357 16.6667 8.33333 16.6667C3.73096 16.6667 0 12.9357 0 8.33333C0 3.73096 3.73096 0 8.33333 0ZM12.3071 4.35954C12.0502 4.10263 11.6339 4.10262 11.377 4.35954L8.33333 7.40316L5.28971 4.35954C5.03279 4.10261 4.61646 4.10261 4.35954 4.35954C4.10261 4.61646 4.10261 5.03279 4.35954 5.28971L7.40316 8.33333L4.35954 11.377C4.10262 11.6339 4.10263 12.0502 4.35954 12.3071C4.61648 12.5639 5.03284 12.564 5.28971 12.3071L8.33333 9.26351L11.377 12.3071C11.6339 12.564 12.0502 12.564 12.3071 12.3071C12.564 12.0502 12.564 11.6339 12.3071 11.377L9.26351 8.33333L12.3071 5.28971C12.564 5.03284 12.5639 4.61648 12.3071 4.35954Z' fill='%235C2D91'/%3E%3C/svg%3E\");--icon-calendar:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M14.7369%201.68408H12.779V0.42102C12.779%200.188549%2012.5904%200%2012.358%200C12.1255%200%2011.9369%200.188549%2011.9369%200.42102V1.68408H9.92439V0.42102C9.92439%200.188549%209.73584%200%209.50337%200C9.2709%200%209.08235%200.188549%209.08235%200.42102V1.68408H7.0698V0.42102C7.0698%200.188549%206.88126%200%206.64878%200C6.41631%200%206.22777%200.188549%206.22777%200.42102V1.68408H4.21082V0.42102C4.21051%200.188549%204.02196%200%203.78949%200C3.55702%200%203.36847%200.188549%203.36847%200.42102V1.68408H2.52643C1.13098%201.68408%200%202.81537%200%204.21051V14.7369C0%2015.4344%200.565647%2016%201.26306%2016H13.4736C14.8687%2016%2016%2014.869%2016%2013.4736V2.94745C16%202.24973%2015.4344%201.68408%2014.7369%201.68408ZM15.158%2013.4736C15.158%2014.4038%2014.4041%2015.1576%2013.4739%2015.1576H1.26306C1.03059%2015.1576%200.842039%2014.9691%200.842039%2014.7366V6.73663H15.158V13.4736ZM15.158%205.89459H0.842039V4.21051C0.842039%203.28031%201.59592%202.52643%202.52612%202.52643H3.36816V3.78949C3.36816%204.02196%203.55671%204.21051%203.78918%204.21051C4.02165%204.21051%204.2102%204.02196%204.2102%203.78949V2.52643H6.22714V3.78949C6.22714%204.02196%206.41569%204.21051%206.64816%204.21051C6.88063%204.21051%207.06918%204.02196%207.06918%203.78949V2.52643H9.08173V3.78949C9.08173%204.02196%209.27028%204.21051%209.50275%204.21051C9.73522%204.21051%209.92377%204.02196%209.92377%203.78949V2.52643H11.9363V3.78949C11.9363%204.02196%2012.1249%204.21051%2012.3573%204.21051C12.5898%204.21051%2012.7784%204.02196%2012.7784%203.78949V2.52643H14.7363C14.9688%202.52643%2015.1573%202.71498%2015.1573%202.94745V5.89459H15.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--icon-clock:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M8%200C3.5818%200%200%203.5818%200%208C0%2012.4182%203.5818%2016%208%2016C12.4182%2016%2016%2012.4182%2016%208C16%203.5818%2012.4182%200%208%200ZM8%2015.158C4.04675%2015.158%200.842039%2011.9533%200.842039%208C0.842039%204.04675%204.04675%200.842039%208%200.842039C11.9533%200.842039%2015.158%204.04675%2015.158%208C15.158%2011.9533%2011.9533%2015.158%208%2015.158Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M7.99929%202.81256C7.76682%202.81256%207.57827%203.00111%207.57827%203.23358V7.76818C7.57607%207.89963%207.46972%208.00599%207.33827%208.00818H2.78235C2.54988%208.00818%202.36133%208.19673%202.36133%208.4292C2.36133%208.66167%202.54988%208.85022%202.78235%208.85022H7.32133C7.92117%208.85713%208.41309%208.3765%208.42031%207.77665C8.42031%207.77383%208.42031%207.771%208.42031%207.76818V3.23358C8.42031%203.00111%208.23176%202.81256%207.99929%202.81256Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E%0A);--icon-select:url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M4%206.6665L8%2010.6665L12%206.6665%22%20stroke%3D%22%235C2D91%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E);--icon-upload:url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M18.7284%2020H6.54327C5.14071%2020%204%2018.816%204%2017.3603V16.102C4%2015.8589%204.18949%2015.6622%204.42374%2015.6622C4.65799%2015.6622%204.84748%2015.8589%204.84748%2016.102V17.3603C4.84748%2018.3311%205.60795%2019.1204%206.54327%2019.1204H18.7279C18.9618%2019.1204%2019.1517%2018.9233%2019.1517%2018.6806V16.0738C19.1517%2015.8307%2019.3412%2015.634%2019.5754%2015.634C19.8097%2015.634%2019.9992%2015.8307%2019.9992%2016.0738V18.6806C20%2019.4074%2019.4294%2020%2018.7284%2020Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3Cpath%20d%3D%22M12.4435%204.29306C12.0671%203.90231%2011.4576%203.90231%2011.0811%204.29306L11.0774%204.29697L7.39173%208.122C7.01526%208.51275%207.01526%209.14534%207.39173%209.53609C7.7682%209.92684%208.37766%209.92684%208.75413%209.53609L10.7929%207.41951H10.7967V15.0414C10.7967%2015.4799%2011.1397%2015.8354%2011.5622%2015.8354H11.9579C12.3808%2015.8354%2012.7234%2015.4799%2012.7234%2015.0414V7.41821H12.7292L14.7659%209.53218C15.1424%209.92293%2015.7523%209.92293%2016.1284%209.53218C16.5048%209.14186%2016.5048%208.50884%2016.1284%208.11853L12.4435%204.29306Z%22%20fill%3D%22%235C2D91%22%2F%3E%0A%3C%2Fsvg%3E);--cancel-icon-width:1em;--cancel-icon-height:1em;--search-icon-datalist-width:2em;--search-icon-focus-width:var(--search-icon-datalist-width);display:block}:host *{box-sizing:border-box}label{all:unset;font-size:var(--px-font-size-base);line-height:var(--px-line-height-ratio-l)}input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container{vertical-align:baseline;align-items:center;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-xs-mobile) calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile)) var(--px-padding-xs-mobile) var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default) no-repeat;background-position:center right var(--px-padding-s-mobile);box-shadow:var(--px-color-border-neutral-default) 0 0 0px var(--px-size-border-m) inset;border-radius:var(--px-radius-main);color:var(--px-color-text-neutral-default);font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);line-height:var(--px-line-height-ratio-l);text-align:left;box-sizing:border-box;border:none;outline:0;margin:0;height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended{width:100%}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success:hover{box-shadow:var(--px-color-border-state-hover-default) 0 0 0px var(--px-size-border-l) inset;background-color:var(--px-color-background-state-hover-bordered-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):active{box-shadow:var(--px-color-border-state-active-default) 0 0 0px var(--px-size-border-m) inset;background-color:var(--px-color-background-container-default-default);outline:none}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):disabled,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):read-only:not(:is(select),#input-file-container){box-shadow:var(--px-color-border-neutral-default) 0 0 0px 0 inset;font-weight:var(--px-font-weight-title);text-align:left;background:0 0;padding:0}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).error{box-shadow:var(--px-color-border-purpose-error-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).success{box-shadow:var(--px-color-border-purpose-success-default) 0 0 0px var(--px-size-border-m) inset;background-repeat:no-repeat;background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].success{background-image:var(--icon-success)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time].error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile))}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).success{background-image:var(--icon-success)}:is(:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=time]).error{background-image:var(--icon-error)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]{background-image:var(--icon-search);padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;background-image:var(--icon-cancel);height:var(--cancel-icon-height);width:var(--cancel-icon-width);margin-right:calc(( var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) ) * -1);margin-left:var(--px-spacing-s-mobile);background-position:50%;background-repeat:no-repeat}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{opacity:1;pointer-events:auto;margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-mobile) + var(--px-spacing-xs-mobile) ) * -1)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-mobile)) * -1))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].success{background-image:var(--icon-success), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)[type=search].error{background-image:var(--icon-error), var(--icon-search)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select){text-overflow:ellipsis;background-image:var(--icon-select);-webkit-appearance:none;width:100%;padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile) + var(--px-size-icon-s) + var(--px-spacing-s-mobile))}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).success{background-image:var(--icon-success), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(select).error{background-image:var(--icon-error), var(--icon-select)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea){flex-grow:0;height:auto!important}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).success,:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container):is(textarea).error{background-position:right 1rem top .5rem}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container{background-repeat:no-repeat;background-position:center right var(--px-padding-s-mobile);background-image:var(--icon-upload);align-items:center;max-width:100%;display:flex}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container span{text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.success{background-image:var(--icon-success), var(--icon-upload)}:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container)#input-file-container.error{background-image:var(--icon-error), var(--icon-upload)}:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-mobile) + 2 * var(--px-padding-xs-mobile) + var(--px-size-icon-s));background-image:var(--icon-search);padding-right:var(--autocomplete-search-icon-width);background-position:right 1rem center}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-mobile) + var(--px-padding-xs-mobile) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-mobile) + var(--px-size-icon-s) + var(--px-spacing-xs-mobile)), center right var(--px-padding-s-mobile);background-image:var(--icon-error), var(--icon-search)!important}slot{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);text-align:left;color:var(--px-color-text-neutral-default)}slot.error{color:var(--px-color-text-purpose-error-default)}slot.success{color:var(--px-color-text-purpose-success-default)}slot[name=helper]{color:#0000008f;font-size:var(--px-text-size-label-s-mobile)}#container{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:inline-flex}#container:has(#input-file-container){max-width:100%}:host([extended]) #container{width:100%}#label-helper{gap:var(--px-spacing-2xs-mobile);flex-direction:column;display:flex}input[type=file]{-webkit-appearance:none;opacity:0;width:0;height:0}@media screen and (width<=47.938rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--mobile{width:100%}:host([extended--mobile]) #container{width:100%}}@media screen and (width>=48rem) and (width<=64rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--tablet{width:100%}:host([extended--tablet]) #container{width:100%}}@media screen and (width>=48rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-tablet) + 2 * var(--px-padding-xs-tablet) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-tablet) + var(--px-padding-xs-tablet) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-tablet);padding:var(--px-padding-xs-tablet) calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet)) var(--px-padding-xs-tablet) var(--px-padding-s-tablet);font-size:var(--px-text-size-label-l-tablet);background-position:center right var(--px-padding-s-tablet);height:var(--px-size-l)!important}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visible:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet)), center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) ) * -1);margin-left:var(--px-spacing-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-tablet) + var(--px-spacing-xs-tablet) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-tablet)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-tablet)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-tablet) + var(--px-size-icon-s) + var(--px-spacing-xs-tablet) + var(--px-size-icon-s) + var(--px-spacing-s-tablet))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-tablet)}slot{font-size:var(--px-text-size-label-m-tablet)}slot[name=helper]{font-size:var(--px-text-size-label-s-tablet)}#container,#label-helper{gap:var(--px-spacing-2xs-tablet)}}@media screen and (width>=64.0625rem) and (width<=90rem){:is(input:not([type=file]),textarea,select,:host([auto-complete]) input,#input-file-container).extended--laptop{width:100%}:host([extended--laptop]) #container{width:100%}}@media screen and (width>=64.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-laptop) + 2 * var(--px-padding-xs-laptop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-xs-laptop) calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop)) var(--px-padding-xs-laptop) var(--px-padding-s-laptop);font-size:var(--px-text-size-label-l-laptop);background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) ) * -1);margin-left:var(--px-spacing-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-laptop) + var(--px-spacing-xs-laptop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-laptop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-laptop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop) + var(--px-size-icon-s) + var(--px-spacing-s-laptop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-laptop)}slot{font-size:var(--px-text-size-label-m-laptop)}slot[name=helper]{font-size:var(--px-text-size-label-s-laptop)}#container,#label-helper{gap:var(--px-spacing-2xs-laptop)}}@media screen and (width>=90.0625rem){:host([auto-complete]) input{--autocomplete-search-icon-width:calc(2 * var(--px-spacing-xs-desktop) + 2 * var(--px-padding-xs-desktop) + var(--px-size-icon-s))}:host([auto-complete]) input.success{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-success), var(--icon-search)!important}:host([auto-complete]) input.error{--autocomplete-search-icon-width:calc(2 * ( var(--px-spacing-xs-laptop) + var(--px-padding-xs-laptop) + var(--px-size-icon-s) ));background-position:center right calc(var(--px-padding-s-laptop) + var(--px-size-icon-s) + var(--px-spacing-xs-laptop)), center right var(--px-padding-s-laptop);background-image:var(--icon-error), var(--icon-search)!important}input:not([type=file]),textarea,select,#input-file-container{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-xs-desktop) calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop)) var(--px-padding-xs-desktop) var(--px-padding-s-desktop);font-size:var(--px-text-size-label-l-desktop);background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):focus-visble:not([disabled],[aria-disabled=true]):not([readonly],[aria-readonly=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.success,:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container.error{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop)), center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]{min-width:8.5rem;padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time])::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-size-icon-s) ) * -1)}:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).error,:is(:is(input:not([type=file]),textarea,select,#input-file-container)[type=date],:is(input:not([type=file]),textarea,select,#input-file-container)[type=datetime-local],:is(input:not([type=file]),textarea,select,#input-file-container)[type=month],:is(input:not([type=file]),textarea,select,#input-file-container)[type=week],:is(input:not([type=file]),textarea,select,#input-file-container)[type=time]).success{background-position:center right calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]::-webkit-search-cancel-button{margin-right:calc(( var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) ) * -1);margin-left:var(--px-spacing-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:focus::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search]:hover::-webkit-search-cancel-button{margin-right:calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-calendar-picker-indicator{margin-right:calc(( var(--px-size-icon-s) + var(--px-spacing-s-desktop) + var(--px-spacing-xs-desktop) ) * -1)}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:focus-visible::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search][list=suggestions]:hover::-webkit-search-cancel-button{margin-right:var(--search-cancel-datalist-margin-right,calc((var(--px-size-icon-s) + var(--px-spacing-s-desktop)) * -1))}:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].success:focus-visible,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:hover,:is(input:not([type=file]),textarea,select,#input-file-container)[type=search].error:focus-visible{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container):is(select){padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s))}:is(input:not([type=file]),textarea,select,#input-file-container):is(select).success,:is(input:not([type=file]),textarea,select,#input-file-container):is(select).error{padding-right:calc(var(--px-padding-s-desktop) + var(--px-size-icon-s) + var(--px-spacing-xs-desktop) + var(--px-size-icon-s) + var(--px-spacing-s-desktop))}:is(input:not([type=file]),textarea,select,#input-file-container)#input-file-container{background-position:center right var(--px-padding-s-desktop)}:is(input:not([type=file]),textarea,select,#input-file-container).extended--desktop{width:100%}:host([extended--desktop]) #container{width:100%}slot{font-size:var(--px-text-size-label-m-desktop)}slot[name=helper]{font-size:var(--px-text-size-label-s-desktop)}#container{gap:var(--px-spacing-2xs-laptop)}#label-helper{gap:var(--px-spacing-2xs-desktop)}}:host([hidden-label]) #label-helper{position:absolute}:host([hidden-label]) #container,:host([hidden-label]) #label-helper{gap:0}", T = new CSSStyleSheet();
167
- T.replaceSync(oe);
168
- var E = class extends t {
169
- constructor() {
170
- super(T), this.containerTemplate = () => `
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 = () => `
171
211
  <div id="container">
172
212
  <div id="label-helper">
173
213
  <label><slot name="label"></slot></label>
@@ -176,378 +216,410 @@ var E = class extends t {
176
216
  </div>
177
217
  ${this.template()}
178
218
  </div>
179
- `, this.onHelperSlotChange = () => this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.onStatusTextSlotChange = () => this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), 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
- "aria-describedby"
191
- ];
192
- }
193
- attributeChangedCallback(e, t, n) {
194
- e === "aria-describedby" && t !== n ? v(this, this.$el, !1) : e === "state" && t !== n ? this.stateChangeCallback(t, n) : (e === "extended" || e === "extended--mobile" || e === "extended--tablet" || e === "extended--laptop" || e === "extended--desktop") && t !== n ? this.$el.classList.toggle(e) : super.attributeChangedCallback(e, t, n);
195
- }
196
- stateChangeCallback(e, t) {
197
- this.$el.classList.remove(e), this.$el.classList.toggle(t), t === "error" ? (this.$statusTextSlot.classList.toggle("error"), this.$el.setAttribute("aria-invalid", "true"), this.internals && (this.internals.ariaInvalid = "true"), this.$statusTextSlot.classList.remove("success")) : t === "success" ? (this.$statusTextSlot.classList.remove("error"), this.$statusTextSlot.classList.toggle("success")) : (this.$el.removeAttribute("aria-invalid"), this.internals && (this.internals.ariaInvalid = null), this.$statusTextSlot.classList.remove("error", "success"), this.$labelSlot.classList.remove("error", "success"), this.$el.style.backgroundImage = ""), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text");
198
- }
199
- formData() {
200
- let e = new FormData(), t = this.getAttribute("name");
201
- return this.$el.name && t && e.append(t, this.$el.value), e;
202
- }
203
- connectedCallback() {
204
- ["change"].forEach((e) => {
205
- this.$el.addEventListener(e, () => {
206
- this.internals?.setFormValue(this.formData()), this.dispatchEvent(new CustomEvent(e, {
207
- bubbles: !0,
208
- composed: !0
209
- }));
210
- });
211
- }), this.setupForId(), this.setupAriaDescribedBy(this.$slotHelper, this.$helperSlot, "helper"), this.setupAriaDescribedBy(this.$slotStatusText, this.$statusTextSlot, "status-text"), this.$helperSlot.addEventListener("slotchange", this.onHelperSlotChange), this.$statusTextSlot.addEventListener("slotchange", this.onStatusTextSlotChange);
212
- }
213
- disconnectedCallback() {
214
- this.$helperSlot.removeEventListener("slotchange", this.onHelperSlotChange), this.$statusTextSlot.removeEventListener("slotchange", this.onStatusTextSlotChange);
215
- }
216
- static get formAssociated() {
217
- return !0;
218
- }
219
- formResetCallback() {
220
- this.$el.value = "";
221
- }
222
- formStateRestoreCallback(e) {
223
- this.$el.value = e;
224
- }
225
- setupForId() {
226
- let e = Math.random().toString(36).substr(2, 9);
227
- this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
228
- }
229
- setupAriaDescribedBy(e, t, n) {
230
- if (!this.$el?.hasAttribute("id")) return;
231
- let r = `${this.$el.id}-${n}`, i = (this.$el.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== r);
232
- e.length > 0 && (t.setAttribute("id", r), i.push(r)), i.sort((e, t) => this.ariaDescribedByRank(e) - this.ariaDescribedByRank(t)), i.length > 0 ? this.$el.setAttribute("aria-describedby", i.join(" ")) : this.$el.removeAttribute("aria-describedby");
233
- }
234
- ariaDescribedByRank(e) {
235
- return e.endsWith("-status-text") ? 0 : e.endsWith("-helper") ? 1 : 2;
236
- }
237
- get state() {
238
- return this.getAttribute("state");
239
- }
240
- set state(e) {
241
- this.setAttribute("state", e);
242
- }
243
- get extended() {
244
- return this.hasAttribute("extended");
245
- }
246
- set extended(e) {
247
- e ? this.setAttribute("extended", "") : this.removeAttribute("extended");
248
- }
249
- get extendedMobile() {
250
- return this.hasAttribute("extended--mobile");
251
- }
252
- set extendedMobile(e) {
253
- e ? this.setAttribute("extended--mobile", "") : this.removeAttribute("extended--mobile");
254
- }
255
- get extendedTablet() {
256
- return this.hasAttribute("extended--tablet");
257
- }
258
- set extendedTablet(e) {
259
- e ? this.setAttribute("extended--tablet", "") : this.removeAttribute("extended--tablet");
260
- }
261
- get extendedLaptop() {
262
- return this.hasAttribute("extended--laptop");
263
- }
264
- set extendedLaptop(e) {
265
- e ? this.setAttribute("extended--laptop", "") : this.removeAttribute("extended--laptop");
266
- }
267
- get extendedDesktop() {
268
- return this.hasAttribute("extended--desktop");
269
- }
270
- set extendedDesktop(e) {
271
- e ? this.setAttribute("extended--desktop", "") : this.removeAttribute("extended--desktop");
272
- }
273
- get $labelSlot() {
274
- return this.shadowRoot.querySelector("slot[name=\"label\"]");
275
- }
276
- get $helperSlot() {
277
- return this.shadowRoot.querySelector("slot[name=\"helper\"]");
278
- }
279
- get $statusTextSlot() {
280
- return this.shadowRoot.querySelector("slot[name=\"status-text\"]");
281
- }
282
- get $label() {
283
- return this.shadowRoot.querySelector("label");
284
- }
285
- get $labelHelper() {
286
- return this.shadowRoot.querySelector("#label-helper");
287
- }
288
- get $slotHelper() {
289
- return this.querySelectorAll("[slot=\"helper\"]");
290
- }
291
- get $slotStatusText() {
292
- return this.querySelectorAll("[slot=\"status-text\"]");
293
- }
294
- }, se = class extends E {
295
- static {
296
- this.nativeName = "input";
297
- }
298
- constructor() {
299
- super(), this.observer = null, this.syncDataList = () => {
300
- let e = this.$lightSuggestions?.cloneNode(!0);
301
- if (e) {
302
- if (e.id = "suggestions", this.$shadowSuggestions) {
303
- this.$shadowSuggestions.replaceWith(e);
304
- return;
305
- }
306
- this.$el.insertAdjacentElement("afterend", e), this.$el.setAttribute("list", "suggestions");
307
- } else this.$shadowSuggestions?.remove(), this.$el.hasAttribute("list") && this.$el.removeAttribute("list");
308
- };
309
- }
310
- connectedCallback() {
311
- if (super.connectedCallback(), this.$el.type === "search" && (this.syncDataList(), this.observer = new MutationObserver(this.syncDataList), this.observer.observe(this, {
312
- childList: !0,
313
- subtree: !0
314
- })), this.type === "search") {
315
- let e = navigator.userAgent;
316
- 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"));
317
- }
318
- }
319
- disconnectedCallback() {
320
- super.disconnectedCallback(), this.observer?.disconnect();
321
- }
322
- template() {
323
- return "<div><input type=\"text\" /></div>";
324
- }
325
- get $lightSuggestions() {
326
- return this.querySelector("datalist");
327
- }
328
- get $shadowSuggestions() {
329
- return this.shadowRoot.querySelector("datalist");
330
- }
331
- get $container() {
332
- return this.shadowRoot.querySelector("div");
333
- }
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
+ }
334
390
  };
335
- customElements.get("px-input") || customElements.define("px-input", se);
336
- //#endregion
337
- //#region ../../components/Input/src/TextArea.ts
338
- var ce = class extends E {
339
- static {
340
- this.nativeName = "textarea";
341
- }
342
- constructor() {
343
- super();
344
- }
345
- template() {
346
- return "<textarea></textarea>";
347
- }
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
+ }
348
401
  };
349
- customElements.get("px-textarea") || customElements.define("px-textarea", ce);
350
- //#endregion
351
- //#region ../../components/Input/src/Select.ts
352
- var le = class extends E {
353
- static {
354
- this.nativeName = "select";
355
- }
356
- template() {
357
- return "<select></select>";
358
- }
359
- constructor() {
360
- super(), this.observer = null, this.#e = () => {
361
- if (!this.$el) return;
362
- let e = Array.from(this.children).filter((e) => {
363
- let t = e.tagName.toLowerCase();
364
- return t === "option" || t === "optgroup";
365
- });
366
- this.$el.innerHTML = "", e.length > 0 && e.forEach((e) => {
367
- let t = e.cloneNode(!0);
368
- this.$el.appendChild(t);
369
- });
370
- };
371
- }
372
- connectedCallback() {
373
- super.connectedCallback(), this.#e(), this.observer = new MutationObserver(this.#e), this.observer.observe(this, {
374
- childList: !0,
375
- subtree: !0
376
- });
377
- }
378
- #e;
379
- disconnectedCallback() {
380
- super.disconnectedCallback(), this.observer?.disconnect();
381
- }
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
+ }
382
425
  };
383
- customElements.get("px-select") || customElements.define("px-select", le);
384
- //#endregion
385
- //#region ../../components/Input/src/Upload.ts
386
- var ue = class extends E {
387
- static {
388
- this.nativeName = "input";
389
- }
390
- constructor() {
391
- super();
392
- }
393
- connectedCallback() {
394
- super.connectedCallback(), this.addEventListener("click", (e) => {
395
- e.target === this && this.$el.click();
396
- }), this.$el.addEventListener("change", () => {
397
- this.$el.files && this.$el.files.length > 0 && (this.$span.innerText = this.$el.files[0].name);
398
- });
399
- }
400
- template() {
401
- return "<div id=\"input-file-container\"><span></span><input type=\"file\" /></div>";
402
- }
403
- stateChangeCallback(e, t) {
404
- super.stateChangeCallback(e, t), this.$container.classList.toggle(e), this.$container.classList.toggle(t);
405
- }
406
- get $container() {
407
- return this.shadowRoot.querySelector("#input-file-container");
408
- }
409
- get $span() {
410
- return this.shadowRoot.querySelector("span");
411
- }
412
- get $el() {
413
- return this.shadowRoot.querySelector("input[type=\"file\"]");
414
- }
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
+ }
415
464
  };
416
- customElements.get("px-fileupload") || customElements.define("px-fileupload", ue);
417
- //#endregion
418
- //#region src/Autocomplete.ts
419
- var D = new CSSStyleSheet();
420
- D.replaceSync(y);
421
- var O = class extends n {
422
- static {
423
- this.formAssociated = !0;
424
- }
425
- #e;
426
- constructor() {
427
- 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 = () => {
428
- this.#i.length && (this.$input.$el.setAttribute("aria-expanded", "true"), this.$dropDownContent.style.width = `${this.$input.shadowRoot.querySelector("input")?.offsetWidth}px`, this.$dropDown.showPopover());
429
- }, this.#n = (e) => {
430
- if (e.key !== "ArrowDown" && e.key !== "ArrowUp" || this.$input.$el.getAttribute("aria-expanded") !== "true") return;
431
- let t = this.#r;
432
- if (!t.length) return;
433
- e.preventDefault();
434
- let n = t.findIndex((e) => e === document.activeElement), r;
435
- r = e.key === "ArrowDown" ? n < t.length - 1 ? n + 1 : 0 : n > 0 ? n - 1 : t.length - 1, t[r].focus();
436
- }, this.#a = () => {
437
- 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();
438
- }, this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
439
- }
440
- static get observedAttributes() {
441
- return [
442
- ...super.observedAttributes,
443
- "size",
444
- "state",
445
- "extended",
446
- "extended--mobile",
447
- "extended--tablet",
448
- "extended--laptop",
449
- "extended--desktop",
450
- "popover-height"
451
- ];
452
- }
453
- attributeChangedCallback(e, t, n) {
454
- if (t !== n) switch (e) {
455
- case "size":
456
- case "state":
457
- case "extended":
458
- case "extended--mobile":
459
- case "extended--tablet":
460
- case "extended--laptop":
461
- case "extended--desktop":
462
- n === null ? this.$input.removeAttribute(e) : this.$input.setAttribute(e, n);
463
- break;
464
- case "popover-height":
465
- this.setDefaultPopoverHeight(), this.$dropDown.popoverHeight = this.popoverHeight;
466
- break;
467
- default: super.attributeChangedCallback(e, t, n);
468
- }
469
- }
470
- connectedCallback() {
471
- 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");
472
- let e = this.$label?.getAttribute("id");
473
- e && this.$dropDownContent.setAttribute("aria-labelledby", e), this.setDefaultPopoverHeight();
474
- }
475
- disconnectedCallback() {
476
- this.$input.removeEventListener("input", this.#a), this.$input.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n);
477
- }
478
- #t;
479
- #n;
480
- get #r() {
481
- return Array.from(this.querySelectorAll("px-autocomplete-option:not([disabled])"));
482
- }
483
- get #i() {
484
- return Array.from(this.querySelectorAll("px-autocomplete-option"));
485
- }
486
- #a;
487
- setDefaultPopoverHeight() {
488
- this.popoverHeight ||= "16.5rem";
489
- }
490
- get value() {
491
- return this.$input.value;
492
- }
493
- set value(e) {
494
- this.$input.value = e, this.$input.$el.setAttribute("aria-expanded", "false"), this.$dropDown.hidePopover(), this.$input.$el.focus(), this.#o();
495
- }
496
- get name() {
497
- return this.getAttribute("name");
498
- }
499
- #o() {
500
- if (this.name) {
501
- let e = new FormData();
502
- e.append(this.name, this.value), this.internals?.setFormValue(e);
503
- }
504
- }
505
- formResetCallback() {
506
- this.$input.value = "", this.#o();
507
- }
508
- formStateRestoreCallback(e) {
509
- this.$input.value = e, this.#o();
510
- }
511
- get $dropDown() {
512
- return this.shadowRoot.querySelector("px-dropdown");
513
- }
514
- get $dropDownContent() {
515
- return this.shadowRoot.querySelector(".dropdown-content");
516
- }
517
- get $input() {
518
- return this.shadowRoot.querySelector("px-input");
519
- }
520
- get $label() {
521
- return this.querySelector("[slot=\"label\"]");
522
- }
523
- get popoverHeight() {
524
- return this.getAttribute("popover-height");
525
- }
526
- set popoverHeight(e) {
527
- _(this, "popover-height", e);
528
- }
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
+ }
529
588
  };
530
- customElements.get("px-autocomplete") || customElements.define("px-autocomplete", O);
531
- //#endregion
532
- //#region ../../components/Icon/common/src/IconSet.ts
533
- var k = class extends HTMLElement {
534
- constructor() {
535
- super();
536
- }
537
- static get observedAttributes() {
538
- return [
539
- "name",
540
- "src",
541
- "type",
542
- "format"
543
- ];
544
- }
545
- connectedCallback() {
546
- 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") {
547
- let e = document.createElement("style");
548
- e.setAttribute("type", "text/css");
549
- let t = this.getAttribute("name");
550
- t && e.setAttribute("data-name", t), e.textContent = `
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 = `
551
623
  @font-face {
552
624
  font-family: 'lavender';
553
625
  src:
@@ -556,1167 +628,1336 @@ var k = class extends HTMLElement {
556
628
  font-style: normal;
557
629
  font-display: block;
558
630
  }
559
- `, document.head.appendChild(e);
560
- }
561
- }
562
- disconnectedCallback() {
563
- let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
564
- e && e.remove();
565
- }
566
- };
567
- customElements.get("px-icon-set") || customElements.define("px-icon-set", k);
568
- var A = [
569
- "Inherit",
570
- "Brand",
571
- "Accent",
572
- "Neutral",
573
- "Dimmed",
574
- "PurposeSuccess",
575
- "PurposeWarning",
576
- "PurposeError",
577
- "PurposeUnlimited",
578
- "PurposePromo",
579
- "StateHover",
580
- "StateActive",
581
- "StateDisabled"
582
- ].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();
583
- M.replaceSync(j);
584
- var N = class extends n {
585
- #e = null;
586
- #t;
587
- #n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
588
- static get observedAttributes() {
589
- return [
590
- ...super.observedAttributes,
591
- "name",
592
- "size",
593
- "color",
594
- "aria-label",
595
- "inverted",
596
- "from",
597
- "disabled"
598
- ];
599
- }
600
- constructor(...e) {
601
- super(...e, M), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
602
- }
603
- attributeChangedCallback(e, t, n) {
604
- if (t !== n) switch (e) {
605
- case "name":
606
- this.updateName(t, n);
607
- break;
608
- case "size":
609
- this.updateAttribute(e, t, n, re);
610
- break;
611
- case "color":
612
- this.updateAttribute(e, t, n, A);
613
- break;
614
- case "disabled":
615
- this.color = "state-disabled";
616
- break;
617
- case "aria-label":
618
- if (!this.#t) return;
619
- n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
620
- }
621
- }
622
- connectedCallback() {
623
- this.role = "img";
624
- let e = document.querySelectorAll("px-icon-set");
625
- e || console.log("<px-icon-set> component not found");
626
- for (let t of e) {
627
- if (!t.getAttribute("name") || !t.getAttribute("src")) {
628
- console.error("Icon name or src not found");
629
- continue;
630
- }
631
- t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
632
- }
633
- !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"));
634
- }
635
- updateAttribute(e, t, n, r) {
636
- 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) || h(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
637
- }
638
- updateName(e, t) {
639
- this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
640
- }
641
- get $el() {
642
- return this.shadowRoot.querySelector("svg");
643
- }
644
- get name() {
645
- return this.getAttribute("name");
646
- }
647
- set name(e) {
648
- _(this, "name", e);
649
- }
650
- get size() {
651
- return this.getAttribute("size");
652
- }
653
- set size(e) {
654
- _(this, "size", e);
655
- }
656
- get color() {
657
- return this.getAttribute("color");
658
- }
659
- set color(e) {
660
- _(this, "color", e);
661
- }
662
- get arialabel() {
663
- return this.getAttribute("aria-label");
664
- }
665
- set arialabel(e) {
666
- _(this, "aria-label", e);
667
- }
668
- get inverted() {
669
- return this.hasAttribute("inverted");
670
- }
671
- set inverted(e) {
672
- a(this, "inverted", e);
673
- }
674
- get from() {
675
- return this.getAttribute("from");
676
- }
677
- set from(e) {
678
- _(this, "from", e);
679
- }
680
- get disabled() {
681
- return this.hasAttribute("disabled");
682
- }
683
- set disabled(e) {
684
- a(this, "disabled", e);
685
- }
686
- };
687
- customElements.get("px-icon") || customElements.define("px-icon", N);
688
- //#endregion
689
- //#region ../../components/Container/src/container.css?inline
690
- 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();
691
- F.replaceSync(P);
692
- var I = [
693
- "top-patch",
694
- "top-neighbor-patch",
695
- "top-ribbon",
696
- "top-neighbor-ribbon",
697
- "top-patch-and-neighbor-ribbon"
698
- ], L = [
699
- "1",
700
- "2",
701
- "3",
702
- "4",
703
- "5",
704
- "6",
705
- "7",
706
- "8",
707
- "9",
708
- "10",
709
- "11",
710
- "12"
711
- ], R = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, z = "px-padding", B = [
712
- u("padding", R, g, z, "--container-padding"),
713
- u("padding-inline", R, g, z),
714
- u("padding-block", R, g, z),
715
- u("padding-top", R, g, z),
716
- u("padding-right", R, g, z, "--container-padding-right"),
717
- u("padding-bottom", R, g, z),
718
- u("padding-left", R, g, z, "--container-padding-left"),
719
- u("gap", R, p, "px-spacing", void 0, "subgrid-gap")
720
- ], V = class extends n {
721
- static {
722
- this.nativeName = "div";
723
- }
724
- constructor() {
725
- 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();
726
- }
727
- static get observedAttributes() {
728
- return [
729
- ...super.observedAttributes,
730
- "border",
731
- "border-color",
732
- "border-side",
733
- "border-side--mobile",
734
- "border-side--tablet",
735
- "border-side--laptop",
736
- "border-radius",
737
- "no-border-radius",
738
- "no-border-radius--mobile",
739
- "no-border-radius--tablet",
740
- "no-border-radius--laptop",
741
- "background-color",
742
- "background-color--mobile",
743
- "background-color--tablet",
744
- "background-color--laptop",
745
- "background-gradient",
746
- "background-gradient--mobile",
747
- "background-gradient--tablet",
748
- "background-gradient--laptop",
749
- "background-image",
750
- "background-image--mobile",
751
- "background-image--tablet",
752
- "background-image--laptop",
753
- "background-size",
754
- "background-position",
755
- "box-shadow",
756
- "anchor-offset",
757
- "anchor-spacing",
758
- "inverted",
759
- "subgrid-rows"
760
- ];
761
- }
762
- connectedCallback() {
763
- this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
764
- this.$slotAnchor && this.addAnchorClass();
765
- }), this.contentObserver.observe(this, {
766
- childList: !0,
767
- subtree: !0,
768
- characterData: !0
769
- }), this._bgObserver = new IntersectionObserver((e) => {
770
- e.forEach((e) => {
771
- e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
772
- });
773
- }), this._bgObserver.observe(this.$el);
774
- }
775
- disconnectedCallback() {
776
- this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
777
- }
778
- attributeChangedCallback(e, t, n) {
779
- if (t !== n) switch (e) {
780
- case "border":
781
- this.updateAttribute(e, t, n, ee);
782
- break;
783
- case "border-color":
784
- this.updateBorderColor(e, n);
785
- break;
786
- case "border-side":
787
- case "border-side--mobile":
788
- case "border-side--tablet":
789
- case "border-side--laptop":
790
- this.updateAttribute(e, t, n, c);
791
- break;
792
- case "border-radius":
793
- this.updateAttribute(e, t, n, s);
794
- break;
795
- case "no-border-radius":
796
- case "no-border-radius--mobile":
797
- case "no-border-radius--tablet":
798
- case "no-border-radius--laptop":
799
- this.updateNoBorderRadius(e, t, n, ie);
800
- break;
801
- case "background-color":
802
- case "background-color--mobile":
803
- case "background-color--tablet":
804
- case "background-color--laptop":
805
- this.updateBackgroundColor(e, n);
806
- break;
807
- case "background-gradient":
808
- case "background-gradient--mobile":
809
- case "background-gradient--tablet":
810
- case "background-gradient--laptop":
811
- this.updateGradient(e, n);
812
- break;
813
- case "background-size":
814
- this.updateAttribute(e, t, n, i);
815
- break;
816
- case "background-image":
817
- case "background-image--mobile":
818
- case "background-image--tablet":
819
- case "background-image--laptop":
820
- this._isInViewport && this.updateBackgroundImg(e, n);
821
- break;
822
- case "background-position":
823
- n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
824
- break;
825
- case "box-shadow":
826
- this.updateAttribute(e, t, n, te);
827
- break;
828
- case "anchor-offset":
829
- this.updateAnchorOffset(t, n, g);
830
- break;
831
- case "anchor-spacing":
832
- this.updateAnchorSpacing(t, n, I);
833
- break;
834
- case "subgrid-rows":
835
- this.updateSubgridRows(e, t, n, L);
836
- break;
837
- default: super.attributeChangedCallback(e, t, n);
838
- }
839
- }
840
- _loadBackgroundImages() {
841
- [
842
- "background-image",
843
- "background-image--mobile",
844
- "background-image--tablet",
845
- "background-image--laptop"
846
- ].forEach((e) => {
847
- let t = this.getAttribute(e);
848
- t && this.updateBackgroundImg(e, t);
849
- });
850
- }
851
- updateBackgroundImg(e, t) {
852
- this.$el.style.setProperty(`--${e}`, `url("${t}")`);
853
- }
854
- updateGradient(e, t) {
855
- if (this.checkName(m, t)) {
856
- let n = this.splitAttrNameFromBreakpoint(e);
857
- e = n.attrName;
858
- let r = n.breakpoint;
859
- this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
860
- } else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${m.join("\", \"")}".`);
861
- }
862
- updateBackgroundColor(e, t) {
863
- let n = t.startsWith("surface-");
864
- if (this.checkName(r, t)) {
865
- let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
866
- 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"})`);
867
- } else h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
868
- }
869
- updateBorderColor(e, t) {
870
- 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)`)) : h(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join("\", \"")}".`);
871
- }
872
- updateNoBorderRadius(e, t, n, r) {
873
- if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
874
- else {
875
- let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
876
- t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
877
- }
878
- }
879
- updateAttribute(e, t, n, r) {
880
- if (!this.checkName(r, n)) h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
881
- else {
882
- let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
883
- t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
884
- }
885
- }
886
- splitAttrNameFromBreakpoint(e) {
887
- let t = "";
888
- if ([
889
- "--mobile",
890
- "--tablet",
891
- "--laptop"
892
- ].some((t) => e.includes(t))) {
893
- let n = e.split("--");
894
- e = n[0], t = `--${n[1]}`;
895
- }
896
- return {
897
- attrName: e,
898
- breakpoint: t
899
- };
900
- }
901
- updateAnchorOffset(e, t, n) {
902
- if (!l(n, t)) {
903
- h(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
904
- return;
905
- }
906
- let r = (e) => {
907
- 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)`));
908
- };
909
- r(e), r(t);
910
- }
911
- addAnchorClass() {
912
- this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
913
- }
914
- updateAnchorSpacing(e, t, n) {
915
- if (!l(n, t)) {
916
- h(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
917
- return;
918
- }
919
- let r = (e) => {
920
- 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)`));
921
- };
922
- r(e), r(t);
923
- }
924
- updateSubgridRows(e, t, n, r) {
925
- l(r, n) ? this.style.setProperty(`--${e}`, n) : h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
926
- }
927
- get $el() {
928
- return this?.shadowRoot?.querySelector(".container");
929
- }
930
- get $slotAnchor() {
931
- return this.querySelector("[slot^=\"anchor\"]");
932
- }
933
- get padding() {
934
- return this.getAttribute("padding");
935
- }
936
- set padding(e) {
937
- _(this, "padding", e);
938
- }
939
- get paddingBlock() {
940
- return this.getAttribute("padding-block");
941
- }
942
- set paddingBlock(e) {
943
- _(this, "padding-block", e);
944
- }
945
- get paddingInline() {
946
- return this.getAttribute("padding-inline");
947
- }
948
- set paddingInline(e) {
949
- _(this, "padding-inline", e);
950
- }
951
- get paddingTop() {
952
- return this.getAttribute("padding-top");
953
- }
954
- set paddingTop(e) {
955
- _(this, "padding-top", e);
956
- }
957
- get paddingRight() {
958
- return this.getAttribute("padding-right");
959
- }
960
- set paddingRight(e) {
961
- _(this, "padding-right", e);
962
- }
963
- get paddingBottom() {
964
- return this.getAttribute("padding-bottom");
965
- }
966
- set paddingBottom(e) {
967
- _(this, "padding-bottom", e);
968
- }
969
- get paddingLeft() {
970
- return this.getAttribute("padding-left");
971
- }
972
- set paddingLeft(e) {
973
- _(this, "padding-left", e);
974
- }
975
- get paddingMobile() {
976
- return this.getAttribute("padding--mobile");
977
- }
978
- set paddingMobile(e) {
979
- _(this, "padding--mobile", e);
980
- }
981
- get paddingBlockMobile() {
982
- return this.getAttribute("padding-block--mobile");
983
- }
984
- set paddingBlockMobile(e) {
985
- _(this, "padding-block--mobile", e);
986
- }
987
- get paddingInlineMobile() {
988
- return this.getAttribute("padding-inline--mobile");
989
- }
990
- set paddingInlineMobile(e) {
991
- _(this, "padding-inline--mobile", e);
992
- }
993
- get paddingTopMobile() {
994
- return this.getAttribute("padding-top--mobile");
995
- }
996
- set paddingTopMobile(e) {
997
- _(this, "padding-top--mobile", e);
998
- }
999
- get paddingRightMobile() {
1000
- return this.getAttribute("padding-right--mobile");
1001
- }
1002
- set paddingRightMobile(e) {
1003
- _(this, "padding-right--mobile", e);
1004
- }
1005
- get paddingBottomMobile() {
1006
- return this.getAttribute("padding-bottom--mobile");
1007
- }
1008
- set paddingBottomMobile(e) {
1009
- _(this, "padding-bottom--mobile", e);
1010
- }
1011
- get paddingLeftMobile() {
1012
- return this.getAttribute("padding-left--mobile");
1013
- }
1014
- set paddingLeftMobile(e) {
1015
- _(this, "padding-left--mobile", e);
1016
- }
1017
- get paddingTablet() {
1018
- return this.getAttribute("padding--tablet");
1019
- }
1020
- set paddingTablet(e) {
1021
- _(this, "padding--tablet", e);
1022
- }
1023
- get paddingBlockTablet() {
1024
- return this.getAttribute("padding-block--tablet");
1025
- }
1026
- set paddingBlockTablet(e) {
1027
- _(this, "padding-block--tablet", e);
1028
- }
1029
- get paddingInlineTablet() {
1030
- return this.getAttribute("padding-inline--tablet");
1031
- }
1032
- set paddingInlineTablet(e) {
1033
- _(this, "padding-inline--tablet", e);
1034
- }
1035
- get paddingTopTablet() {
1036
- return this.getAttribute("padding-top--tablet");
1037
- }
1038
- set paddingTopTablet(e) {
1039
- _(this, "padding-top--tablet", e);
1040
- }
1041
- get paddingRightTablet() {
1042
- return this.getAttribute("padding-right--tablet");
1043
- }
1044
- set paddingRightTablet(e) {
1045
- _(this, "padding-right--tablet", e);
1046
- }
1047
- get paddingBottomTablet() {
1048
- return this.getAttribute("padding-bottom--tablet");
1049
- }
1050
- set paddingBottomTablet(e) {
1051
- _(this, "padding-bottom--tablet", e);
1052
- }
1053
- get paddingLeftTablet() {
1054
- return this.getAttribute("padding-left--tablet");
1055
- }
1056
- set paddingLeftTablet(e) {
1057
- _(this, "padding-left--tablet", e);
1058
- }
1059
- get paddingLaptop() {
1060
- return this.getAttribute("padding--laptop");
1061
- }
1062
- set paddingLaptop(e) {
1063
- _(this, "padding--laptop", e);
1064
- }
1065
- get paddingBlockLaptop() {
1066
- return this.getAttribute("padding-block--laptop");
1067
- }
1068
- set paddingBlockLaptop(e) {
1069
- _(this, "padding-block--laptop", e);
1070
- }
1071
- get paddingInlineLaptop() {
1072
- return this.getAttribute("padding-inline--laptop");
1073
- }
1074
- set paddingInlineLaptop(e) {
1075
- _(this, "padding-inline--laptop", e);
1076
- }
1077
- get paddingTopLaptop() {
1078
- return this.getAttribute("padding-top--laptop");
1079
- }
1080
- set paddingTopLaptop(e) {
1081
- _(this, "padding-top--laptop", e);
1082
- }
1083
- get paddingRightLaptop() {
1084
- return this.getAttribute("padding-right--laptop");
1085
- }
1086
- set paddingRightLaptop(e) {
1087
- _(this, "padding-right--laptop", e);
1088
- }
1089
- get paddingBottomLaptop() {
1090
- return this.getAttribute("padding-bottom--laptop");
1091
- }
1092
- set paddingBottomLaptop(e) {
1093
- _(this, "padding-bottom--laptop", e);
1094
- }
1095
- get paddingLeftLaptop() {
1096
- return this.getAttribute("padding-left--laptop");
1097
- }
1098
- set paddingLeftLaptop(e) {
1099
- _(this, "padding-left--laptop", e);
1100
- }
1101
- get border() {
1102
- return this.getAttribute("border");
1103
- }
1104
- set border(e) {
1105
- _(this, "border", e);
1106
- }
1107
- get borderColor() {
1108
- return this.getAttribute("border-color");
1109
- }
1110
- set borderColor(e) {
1111
- _(this, "border-color", e);
1112
- }
1113
- get borderSide() {
1114
- return this.getAttribute("border-side");
1115
- }
1116
- set borderSide(e) {
1117
- _(this, "border-side", e);
1118
- }
1119
- get borderSideMobile() {
1120
- return this.getAttribute("border-side--mobile");
1121
- }
1122
- set borderSideMobile(e) {
1123
- _(this, "border-side--mobile", e);
1124
- }
1125
- get borderSideTablet() {
1126
- return this.getAttribute("border-side--tablet");
1127
- }
1128
- set borderSideTablet(e) {
1129
- _(this, "border-side--tablet", e);
1130
- }
1131
- get borderSideLaptop() {
1132
- return this.getAttribute("border-side--laptop");
1133
- }
1134
- set borderSideLaptop(e) {
1135
- _(this, "border-side--laptop", e);
1136
- }
1137
- get borderRadius() {
1138
- return this.getAttribute("border-radius");
1139
- }
1140
- set borderRadius(e) {
1141
- _(this, "border-radius", e);
1142
- }
1143
- get noBorderRadius() {
1144
- return this.getAttribute("no-border-radius");
1145
- }
1146
- set noBorderRadius(e) {
1147
- _(this, "no-border-radius", e);
1148
- }
1149
- get noBorderRadiusMobile() {
1150
- return this.getAttribute("no-border-radius--mobile");
1151
- }
1152
- set noBorderRadiusMobile(e) {
1153
- _(this, "no-border-radius--mobile", e);
1154
- }
1155
- get noBorderRadiusTablet() {
1156
- return this.getAttribute("no-border-radius--tablet");
1157
- }
1158
- set noBorderRadiusTablet(e) {
1159
- _(this, "no-border-radius--tablet", e);
1160
- }
1161
- get noBorderRadiusLaptop() {
1162
- return this.getAttribute("no-border-radius--laptop");
1163
- }
1164
- set noBorderRadiusLaptop(e) {
1165
- _(this, "no-border-radius--laptop", e);
1166
- }
1167
- get backgroundColor() {
1168
- return this.getAttribute("background-color");
1169
- }
1170
- set backgroundColor(e) {
1171
- _(this, "background-color", e);
1172
- }
1173
- get backgroundColorMobile() {
1174
- return this.getAttribute("background-color--mobile");
1175
- }
1176
- set backgroundColorMobile(e) {
1177
- _(this, "background-color--mobile", e);
1178
- }
1179
- get backgroundColorTablet() {
1180
- return this.getAttribute("background-color--tablet");
1181
- }
1182
- set backgroundColorTablet(e) {
1183
- _(this, "background-color--tablet", e);
1184
- }
1185
- get backgroundColorLaptop() {
1186
- return this.getAttribute("background-color--laptop");
1187
- }
1188
- set backgroundColorLaptop(e) {
1189
- _(this, "background-color--laptop", e);
1190
- }
1191
- get gradient() {
1192
- return this.getAttribute("background-gradient");
1193
- }
1194
- set gradient(e) {
1195
- _(this, "background-gradient", e);
1196
- }
1197
- get gradientMobile() {
1198
- return this.getAttribute("background-gradient--mobile");
1199
- }
1200
- set gradientMobile(e) {
1201
- _(this, "background-gradient--mobile", e);
1202
- }
1203
- get gradientTablet() {
1204
- return this.getAttribute("background-gradient--tablet");
1205
- }
1206
- set gradientTablet(e) {
1207
- _(this, "background-gradient--tablet", e);
1208
- }
1209
- get gradientLaptop() {
1210
- return this.getAttribute("background-gradient--laptop");
1211
- }
1212
- set gradientLaptop(e) {
1213
- _(this, "background-gradient--laptop", e);
1214
- }
1215
- get backgroundImage() {
1216
- return this.getAttribute("background-image");
1217
- }
1218
- set backgroundImage(e) {
1219
- _(this, "background-image", e);
1220
- }
1221
- get backgroundImageMobile() {
1222
- return this.getAttribute("background-image--mobile");
1223
- }
1224
- set backgroundImageMobile(e) {
1225
- _(this, "background-image--mobile", e);
1226
- }
1227
- get backgroundImageTablet() {
1228
- return this.getAttribute("background-image--tablet");
1229
- }
1230
- set backgroundImageTablet(e) {
1231
- _(this, "background-image--tablet", e);
1232
- }
1233
- get backgroundImageLaptop() {
1234
- return this.getAttribute("background-image--laptop");
1235
- }
1236
- set backgroundImageLaptop(e) {
1237
- _(this, "background-image--laptop", e);
1238
- }
1239
- get backgroundSize() {
1240
- return this.getAttribute("background-size");
1241
- }
1242
- set backgroundSize(e) {
1243
- _(this, "background-size", e);
1244
- }
1245
- get backgroundPosition() {
1246
- return this.getAttribute("background-position");
1247
- }
1248
- set backgroundPosition(e) {
1249
- _(this, "background-position", e);
1250
- }
1251
- get boxShadow() {
1252
- return this.getAttribute("box-shadow");
1253
- }
1254
- set boxShadow(e) {
1255
- _(this, "box-shadow", e);
1256
- }
1257
- get anchorOffset() {
1258
- return this.getAttribute("anchor-offset");
1259
- }
1260
- set anchorOffset(e) {
1261
- _(this, "anchor-offset", e);
1262
- }
1263
- get anchorSpacing() {
1264
- return this.getAttribute("anchor-spacing");
1265
- }
1266
- set anchorSpacing(e) {
1267
- _(this, "anchor-spacing", e);
1268
- }
1269
- get inverted() {
1270
- return this.hasAttribute("inverted");
1271
- }
1272
- set inverted(e) {
1273
- a(this, "inverted", e);
1274
- }
1275
- get subgridRows() {
1276
- return this.getAttribute("subgrid-rows");
1277
- }
1278
- set subgridRows(e) {
1279
- _(this, "subgrid-rows", e);
1280
- }
1281
- get subgridGap() {
1282
- return this.getAttribute("subgrid-gap");
1283
- }
1284
- set subgridGap(e) {
1285
- _(this, "subgrid-gap", e);
1286
- }
1287
- get subgridGapMobile() {
1288
- return this.getAttribute("subgrid-gap--mobile");
1289
- }
1290
- set subgridGapMobile(e) {
1291
- _(this, "subgrid-gap--mobile", e);
1292
- }
1293
- get subgridGapTablet() {
1294
- return this.getAttribute("subgrid-gap--tablet");
1295
- }
1296
- set subgridGapTablet(e) {
1297
- _(this, "subgrid-gap--tablet", e);
1298
- }
1299
- get subgridGapLaptop() {
1300
- return this.getAttribute("subgrid-gap--laptop");
1301
- }
1302
- set subgridGapLaptop(e) {
1303
- _(this, "subgrid-gap--laptop", e);
1304
- }
1305
- };
1306
- customElements.get("px-container") || customElements.define("px-container", V);
1307
- //#endregion
1308
- //#region ../../components/Layout/src/Stack.css?inline
1309
- 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();
1310
- U.replaceSync(H);
1311
- var de = [
1312
- "",
1313
- "default",
1314
- "row",
1315
- "row-reverse",
1316
- "column",
1317
- "column-reverse"
1318
- ], fe = [
1319
- "",
1320
- "default",
1321
- "stretch",
1322
- "flex-start",
1323
- "start",
1324
- "flex-end",
1325
- "end",
1326
- "center",
1327
- "baseline"
1328
- ], pe = [
1329
- "",
1330
- "default",
1331
- "flex-start",
1332
- "start",
1333
- "flex-end",
1334
- "end",
1335
- "center",
1336
- "space-between",
1337
- "space-around",
1338
- "space-evenly"
1339
- ], me = [
1340
- "",
1341
- "default",
1342
- "nowrap",
1343
- "wrap",
1344
- "wrap-reverse"
1345
- ], he = [
1346
- "",
1347
- "visible",
1348
- "hidden",
1349
- "scroll",
1350
- "auto"
1351
- ], W = class extends n {
1352
- constructor() {
1353
- 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;
1354
- }
1355
- connectedCallback() {
1356
- 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");
1357
- }
1358
- static get observedAttributes() {
1359
- return [
1360
- ...super.observedAttributes,
1361
- "direction",
1362
- "direction--mobile",
1363
- "direction--tablet",
1364
- "direction--laptop",
1365
- "direction--desktop",
1366
- "gap",
1367
- "gap--mobile",
1368
- "gap--tablet",
1369
- "gap--laptop",
1370
- "gap--desktop",
1371
- "justify-content",
1372
- "justify-content--mobile",
1373
- "justify-content--tablet",
1374
- "justify-content--laptop",
1375
- "justify-content--desktop",
1376
- "align-items",
1377
- "align-items--mobile",
1378
- "align-items--tablet",
1379
- "align-items--laptop",
1380
- "align-items--desktop",
1381
- "wrap",
1382
- "wrap--mobile",
1383
- "wrap--tablet",
1384
- "wrap--laptop",
1385
- "wrap--desktop",
1386
- "overflow-x",
1387
- "overflow-x--mobile",
1388
- "overflow-x--tablet",
1389
- "overflow-x--laptop",
1390
- "overflow-x--desktop"
1391
- ];
1392
- }
1393
- attributeChangedCallback(e, t, n) {
1394
- switch (e) {
1395
- case "gap":
1396
- case "gap--mobile":
1397
- case "gap--tablet":
1398
- case "gap--laptop":
1399
- case "gap--desktop":
1400
- this.updateFlexProperties(e, t, n, p);
1401
- break;
1402
- case "justify-content":
1403
- case "justify-content--mobile":
1404
- case "justify-content--tablet":
1405
- case "justify-content--laptop":
1406
- case "justify-content--desktop":
1407
- this.updateFlexProperties(e, t, n, pe);
1408
- break;
1409
- case "align-items":
1410
- case "align-items--mobile":
1411
- case "align-items--tablet":
1412
- case "align-items--laptop":
1413
- case "align-items--desktop":
1414
- this.updateFlexProperties(e, t, n, fe);
1415
- break;
1416
- case "wrap":
1417
- case "wrap--mobile":
1418
- case "wrap--tablet":
1419
- case "wrap--laptop":
1420
- case "wrap--desktop":
1421
- this.updateFlexProperties(e, t, n, me);
1422
- break;
1423
- case "direction":
1424
- case "direction--mobile":
1425
- case "direction--tablet":
1426
- case "direction--laptop":
1427
- case "direction--desktop":
1428
- this.updateFlexProperties(e, t, n, de);
1429
- break;
1430
- case "overflow-x":
1431
- case "overflow-x--mobile":
1432
- case "overflow-x--tablet":
1433
- case "overflow-x--laptop":
1434
- case "overflow-x--desktop":
1435
- this.updateOverflowX(e, t, n, he);
1436
- break;
1437
- default: super.attributeChangedCallback(e, t, n);
1438
- }
1439
- }
1440
- updateOverflowX(e, t, n, r) {
1441
- if (!l(r, n)) {
1442
- h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1443
- return;
1444
- }
1445
- this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
1446
- }
1447
- updateFlexProperties(e, t, n, r) {
1448
- this.checkName(r, n) || h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1449
- let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
1450
- 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) => {
1451
- this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
1452
- });
1453
- else {
1454
- let i = e.split("--")[1];
1455
- this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
1456
- }
1457
- }
1458
- updateStyle(e, t, n, r) {
1459
- 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));
1460
- }
1461
- get direction() {
1462
- return this.getAttribute("direction");
1463
- }
1464
- set direction(e) {
1465
- _(this, "direction", e);
1466
- }
1467
- get directionMobile() {
1468
- return this.getAttribute("direction--mobile");
1469
- }
1470
- set directionMobile(e) {
1471
- _(this, "direction--mobile", e);
1472
- }
1473
- get directionTablet() {
1474
- return this.getAttribute("direction--tablet");
1475
- }
1476
- set directionTablet(e) {
1477
- _(this, "direction--tablet", e);
1478
- }
1479
- get directionLaptop() {
1480
- return this.getAttribute("direction--laptop");
1481
- }
1482
- set directionLaptop(e) {
1483
- _(this, "direction--laptop", e);
1484
- }
1485
- get directionDesktop() {
1486
- return this.getAttribute("direction--desktop");
1487
- }
1488
- set directionDesktop(e) {
1489
- _(this, "direction--desktop", e);
1490
- }
1491
- get gap() {
1492
- return this.getAttribute("gap");
1493
- }
1494
- set gap(e) {
1495
- _(this, "gap", e);
1496
- }
1497
- get gapMobile() {
1498
- return this.getAttribute("gap--mobile");
1499
- }
1500
- set gapMobile(e) {
1501
- _(this, "gap--mobile", e);
1502
- }
1503
- get gapTablet() {
1504
- return this.getAttribute("gap--tablet");
1505
- }
1506
- set gapTablet(e) {
1507
- _(this, "gap--tablet", e);
1508
- }
1509
- get gapLaptop() {
1510
- return this.getAttribute("gap--laptop");
1511
- }
1512
- set gapLaptop(e) {
1513
- _(this, "gap--laptop", e);
1514
- }
1515
- get gapDesktop() {
1516
- return this.getAttribute("gap--desktop");
1517
- }
1518
- set gapDesktop(e) {
1519
- _(this, "gap--desktop", e);
1520
- }
1521
- get justifyContent() {
1522
- return this.getAttribute("justify-content");
1523
- }
1524
- set justifyContent(e) {
1525
- _(this, "justify-content", e);
1526
- }
1527
- get justifyContentMobile() {
1528
- return this.getAttribute("justify-content--mobile");
1529
- }
1530
- set justifyContentMobile(e) {
1531
- _(this, "justify-content--mobile", e);
1532
- }
1533
- get justifyContentTablet() {
1534
- return this.getAttribute("justify-content--tablet");
1535
- }
1536
- set justifyContentTablet(e) {
1537
- _(this, "justify-content--tablet", e);
1538
- }
1539
- get justifyContentLaptop() {
1540
- return this.getAttribute("justify-content--laptop");
1541
- }
1542
- set justifyContentLaptop(e) {
1543
- _(this, "justify-content--laptop", e);
1544
- }
1545
- get justifyContentDesktop() {
1546
- return this.getAttribute("justify-content--desktop");
1547
- }
1548
- set justifyContentDesktop(e) {
1549
- _(this, "justify-content--desktop", e);
1550
- }
1551
- get alignItems() {
1552
- return this.getAttribute("align-items");
1553
- }
1554
- set alignItems(e) {
1555
- _(this, "align-items", e);
1556
- }
1557
- get alignItemsMobile() {
1558
- return this.getAttribute("align-items--mobile");
1559
- }
1560
- set alignItemsMobile(e) {
1561
- _(this, "align-items--mobile", e);
1562
- }
1563
- get alignItemsTablet() {
1564
- return this.getAttribute("align-items--tablet");
1565
- }
1566
- set alignItemsTablet(e) {
1567
- _(this, "align-items--tablet", e);
1568
- }
1569
- get alignItemsLaptop() {
1570
- return this.getAttribute("align-items--laptop");
1571
- }
1572
- set alignItemsLaptop(e) {
1573
- _(this, "align-items--laptop", e);
1574
- }
1575
- get alignItemsDesktop() {
1576
- return this.getAttribute("align-items--desktop");
1577
- }
1578
- set alignItemsDesktop(e) {
1579
- _(this, "align-items--desktop", e);
1580
- }
1581
- get wrap() {
1582
- return this.getAttribute("wrap");
1583
- }
1584
- set wrap(e) {
1585
- _(this, "wrap", e);
1586
- }
1587
- get wrapMobile() {
1588
- return this.getAttribute("wrap--mobile");
1589
- }
1590
- set wrapMobile(e) {
1591
- _(this, "wrap--mobile", e);
1592
- }
1593
- get wrapTablet() {
1594
- return this.getAttribute("wrap--tablet");
1595
- }
1596
- set wrapTablet(e) {
1597
- _(this, "wrap--tablet", e);
1598
- }
1599
- get wrapLaptop() {
1600
- return this.getAttribute("wrap--laptop");
1601
- }
1602
- set wrapLaptop(e) {
1603
- _(this, "wrap--laptop", e);
1604
- }
1605
- get wrapDesktop() {
1606
- return this.getAttribute("wrap--desktop");
1607
- }
1608
- set wrapDesktop(e) {
1609
- _(this, "wrap--desktop", e);
1610
- }
1611
- get overflowX() {
1612
- return this.getAttribute("overflow-x");
1613
- }
1614
- set overflowX(e) {
1615
- _(this, "overflow-x", e);
1616
- }
1617
- get overflowXMobile() {
1618
- return this.getAttribute("overflow-x--mobile");
1619
- }
1620
- set overflowXMobile(e) {
1621
- _(this, "overflow-x--mobile", e);
1622
- }
1623
- get overflowXTablet() {
1624
- return this.getAttribute("overflow-x--tablet");
1625
- }
1626
- set overflowXTablet(e) {
1627
- _(this, "overflow-x--tablet", e);
1628
- }
1629
- get overflowXLaptop() {
1630
- return this.getAttribute("overflow-x--laptop");
1631
- }
1632
- set overflowXLaptop(e) {
1633
- _(this, "overflow-x--laptop", e);
1634
- }
1635
- get overflowXDesktop() {
1636
- return this.getAttribute("overflow-x--desktop");
1637
- }
1638
- set overflowXDesktop(e) {
1639
- _(this, "overflow-x--desktop", e);
1640
- }
1641
- get $el() {
1642
- return this.shadowRoot.querySelector(".flex-container");
1643
- }
1644
- };
1645
- customElements.get("px-stack") || customElements.define("px-stack", W);
1646
- var ge = class extends W {
1647
- constructor() {
1648
- super();
1649
- }
1650
- connectedCallback() {
1651
- super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1652
- }
1653
- };
1654
- customElements.get("px-vstack") || customElements.define("px-vstack", ge);
1655
- var _e = class extends W {
1656
- constructor() {
1657
- super();
1658
- }
1659
- connectedCallback() {
1660
- super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1661
- }
1662
- };
1663
- customElements.get("px-hstack") || customElements.define("px-hstack", _e);
1664
- //#endregion
1665
- //#region ../../components/Layout/src/Spacer.ts
1666
- var ve = class extends HTMLElement {
1667
- constructor() {
1668
- super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1669
- }
1670
- static get observedAttributes() {
1671
- return ["grow", "nogap"];
1672
- }
1673
- attributeChangedCallback(e, t, n) {
1674
- e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
1675
- }
1676
- connectedCallback() {
1677
- this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
1678
- this.handleSizeChange();
1679
- }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
1680
- }
1681
- disconnectedCallback() {
1682
- this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
1683
- }
1684
- get grow() {
1685
- return this.getAttribute("grow");
1686
- }
1687
- set grow(e) {
1688
- this.setAttribute("grow", `${e}`);
1689
- }
1690
- scheduleRecheck() {
1691
- this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
1692
- this.recheckHandle = void 0, this.recalculateVisibility();
1693
- });
1694
- }
1695
- recalculateVisibility() {
1696
- this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
1697
- }
1698
- handleSizeChange() {
1699
- let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
1700
- this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
1701
- }
1702
- updateParticipation() {
1703
- this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
1704
- }
1705
- get nogap() {
1706
- return this.hasAttribute("nogap");
1707
- }
1708
- set nogap(e) {
1709
- e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1710
- }
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
+ }
1711
1528
  };
1712
- customElements.get("px-spacer") || customElements.define("px-spacer", ve);
1713
- //#endregion
1714
- //#region ../../components/Layout/src/Page.css?inline
1715
- var ye = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", G = new CSSStyleSheet();
1716
- G.replaceSync(ye);
1717
- var be = class extends n {
1718
- constructor() {
1719
- super(G), this.template = () => `
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) => `
1720
1961
  <px-container border-radius="none" padding="none">
1721
1962
  <px-vstack>
1722
1963
  <px-container id="header-container" border-radius="none">
@@ -1753,6 +1994,15 @@ var be = class extends n {
1753
1994
  <px-spacer></px-spacer>
1754
1995
  </px-hstack>
1755
1996
  </px-container>
1997
+ ${e ? ` <px-hstack>
1998
+ <px-spacer></px-spacer>
1999
+ <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
2000
+ <px-vstack gap="s">
2001
+ <slot name="image-sticky-container"></slot>
2002
+ </px-vstack>
2003
+ </px-container>
2004
+ <px-spacer></px-spacer>
2005
+ </px-hstack>` : ""}
1756
2006
  <px-container
1757
2007
  id="body-container"
1758
2008
  id="main"
@@ -1809,241 +2059,270 @@ var be = class extends n {
1809
2059
  </px-container>
1810
2060
  </px-vstack>
1811
2061
  </px-container>
1812
- `, this.shadowRoot.innerHTML = this.template();
1813
- }
1814
- static get observedAttributes() {
1815
- return [
1816
- ...super.observedAttributes,
1817
- "background-image",
1818
- "gap",
1819
- "background-color",
1820
- "padding-vertical",
1821
- "padding-horizontal"
1822
- ];
1823
- }
1824
- get $wideImage() {
1825
- return this.shadowRoot.querySelector("#image-box");
1826
- }
1827
- get $bodyVStackContainer() {
1828
- return this.shadowRoot.querySelector("#header-vstack-container");
1829
- }
1830
- get $bodyContainer() {
1831
- return this.shadowRoot.querySelector("#body-container");
1832
- }
1833
- get $contactContainer() {
1834
- return this.shadowRoot.querySelector("#contact-container");
1835
- }
1836
- get $footerContainer() {
1837
- return this.shadowRoot.querySelector("#footer-container");
1838
- }
1839
- get $headerContainer() {
1840
- return this.shadowRoot.querySelector("#header-container");
1841
- }
1842
- get $imageContainer() {
1843
- return this.shadowRoot.querySelector("#image-container");
1844
- }
1845
- get backgroundImage() {
1846
- return this.getAttribute("background-image");
1847
- }
1848
- get $main() {
1849
- return this.shadowRoot.querySelector("#main");
1850
- }
1851
- get backgroundColor() {
1852
- return this.getAttribute("background-color") || "none";
1853
- }
1854
- get paddingVertical() {
1855
- return this.getAttribute("padding-vertical");
1856
- }
1857
- get paddingHorizontal() {
1858
- return this.getAttribute("padding-horizontal");
1859
- }
1860
- set paddingVertical(e) {
1861
- this.setAttribute("padding-vertical", `${e}`);
1862
- }
1863
- set paddingHorizontal(e) {
1864
- this.setAttribute("padding-horizontal", `${e}`);
1865
- }
1866
- get gap() {
1867
- return this.getAttribute("gap");
1868
- }
1869
- connectedCallback() {
1870
- this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
1871
- }
1872
- attributeChangedCallback(e, t, n) {
1873
- if (t !== n) switch (e) {
1874
- case "background-image":
1875
- this.$imageContainer.setAttribute("background-image", n);
1876
- break;
1877
- case "gap":
1878
- this.$bodyVStackContainer.setAttribute("gap", n);
1879
- break;
1880
- case "background-color":
1881
- this.$bodyContainer.setAttribute("background-color", r.indexOf(n) > 0 ? n : "none");
1882
- break;
1883
- case "padding-vertical":
1884
- this.handlePaddingVerticalChange(n);
1885
- break;
1886
- case "padding-horizontal":
1887
- this.handlePaddingHorizontalChange(n);
1888
- break;
1889
- default: super.attributeChangedCallback(e, t, n);
1890
- }
1891
- }
1892
- handlePaddingVerticalChange(e) {
1893
- this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
1894
- }
1895
- handlePaddingHorizontalChange(e) {
1896
- 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;
1897
- }
2062
+ `, 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
+ }
1898
2237
  };
1899
- customElements.get("px-page") === void 0 && customElements.define("px-page", be);
1900
- //#endregion
1901
- //#region ../../components/Span/src/span.css?inline
1902
- var K = "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)}}", xe = ".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();
1903
- q.replaceSync(K), J.replaceSync(xe);
1904
- var Se = class extends t {
1905
- static {
1906
- this.nativeName = "span";
1907
- }
1908
- constructor() {
1909
- super(q, J), this.template = () => "<span><slot></slot></span>", this.shadowRoot.innerHTML = this.template();
1910
- }
1911
- static get observedAttributes() {
1912
- return [
1913
- ...super.observedAttributes,
1914
- "color",
1915
- "font-size",
1916
- "font-weight",
1917
- "inverted",
1918
- "disabled",
1919
- "strikethrough"
1920
- ];
1921
- }
1922
- attributeChangedCallback(e, t, n) {
1923
- if (t !== n) switch (e) {
1924
- case "color":
1925
- this.updateTypography(e, t, n, ne);
1926
- break;
1927
- case "font-size":
1928
- this.updateTypography(e, t, n, d);
1929
- break;
1930
- case "font-weight":
1931
- this.updateTypography(e, t, n, f);
1932
- break;
1933
- case "disabled":
1934
- this.color = "state-disabled";
1935
- break;
1936
- default: super.attributeChangedCallback(e, t, n);
1937
- }
1938
- }
1939
- updateTypography(e, t, n, r) {
1940
- 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) || h(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1941
- }
1942
- get color() {
1943
- return this.getAttribute("color");
1944
- }
1945
- set color(e) {
1946
- this._updateAttribute("color", e);
1947
- }
1948
- get fontsize() {
1949
- return this.getAttribute("font-size");
1950
- }
1951
- set fontsize(e) {
1952
- this._updateAttribute("font-size", e);
1953
- }
1954
- get fontweight() {
1955
- return this.getAttribute("font-weight");
1956
- }
1957
- set fontweight(e) {
1958
- this._updateAttribute("font-weight", e);
1959
- }
1960
- get inverted() {
1961
- return this.hasAttribute("inverted");
1962
- }
1963
- set inverted(e) {
1964
- this._updateBooleanAttribute("inverted", e);
1965
- }
1966
- get strikethrough() {
1967
- return this.hasAttribute("strikethrough");
1968
- }
1969
- set strikethrough(e) {
1970
- this._updateBooleanAttribute("strikethrough", e);
1971
- }
1972
- get disabled() {
1973
- return this.hasAttribute("disabled");
1974
- }
1975
- set disabled(e) {
1976
- this._updateBooleanAttribute("disabled", e);
1977
- }
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");
1978
2270
  };
1979
- customElements.get("px-span") || customElements.define("px-span", Se);
1980
- //#endregion
1981
- //#region src/autocomplete-option.css?inline
1982
- 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();
1983
- X.replaceSync(Y);
1984
- var Z = class extends HTMLElement {
1985
- constructor() {
1986
- 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];
1987
- }
1988
- connectedCallback() {
1989
- this.#e();
1990
- }
1991
- #e() {
1992
- this.parentElement?.localName === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
1993
- }
1994
- get $icon() {
1995
- return this.shadowRoot.querySelector("px-icon");
1996
- }
1997
- get $text() {
1998
- return this.shadowRoot.querySelector("px-span");
1999
- }
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");
2000
2322
  };
2001
- customElements.get("px-autocomplete-header") || customElements.define("px-autocomplete-header", Z);
2002
- //#endregion
2003
- //#region src/AutocompleteOption.ts
2004
- var Q = new CSSStyleSheet();
2005
- Q.replaceSync(Y);
2006
- var $ = class extends HTMLElement {
2007
- constructor() {
2008
- 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];
2009
- }
2010
- static get observedAttributes() {
2011
- return ["selected", "type"];
2012
- }
2013
- attributeChangedCallback(e, t, n) {
2014
- if (t !== n) {
2015
- if (e === "selected") {
2016
- this.$button.setAttribute("aria-selected", String(n !== null));
2017
- return;
2018
- }
2019
- n === null ? this.$button.removeAttribute(e) : this.$button.setAttribute(e, n);
2020
- }
2021
- }
2022
- connectedCallback() {
2023
- this.#e(), this.$button.setAttribute("aria-selected", String(this.hasAttribute("selected"))), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
2024
- }
2025
- focus(e) {
2026
- this.$button.focus(e);
2027
- }
2028
- #e() {
2029
- this.parentElement?.localName === "px-autocomplete" && !this.slot && (this.slot = "dropdown-content");
2030
- }
2031
- get selected() {
2032
- return this.hasAttribute("selected");
2033
- }
2034
- set selected(e) {
2035
- this.toggleAttribute("selected", e);
2036
- }
2037
- get type() {
2038
- return this.getAttribute("type") ?? "button";
2039
- }
2040
- set type(e) {
2041
- this.setAttribute("type", e);
2042
- }
2043
- get $button() {
2044
- return this.shadowRoot.querySelector("button");
2045
- }
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
2046
2328
  };
2047
- customElements.get("px-autocomplete-option") || customElements.define("px-autocomplete-option", $);
2048
- //#endregion
2049
- export { O as Autocomplete, Z as AutocompleteHeader, $ as AutocompleteOption };