@proximus/lavender-toaster 1.4.14-beta.3

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 (4) hide show
  1. package/dist/Toaster.d.ts +52 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.es.js +2161 -0
  4. package/package.json +21 -0
package/dist/index.es.js ADDED
@@ -0,0 +1,2161 @@
1
+ //#region ../Container/src/container.css?inline
2
+ var e = ":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)}}", t = "@layer px-reset{:host{font-variant:normal;font-size-adjust:none;font-kerning:auto;font-optical-sizing:auto;font-synthesis:weight style small-caps position;font-feature-settings:normal;font-variation-settings:normal;font-language-override:normal;font-palette:normal;letter-spacing:normal;word-spacing:normal;tab-size:8;text-align:start;text-indent:0;text-transform:none;text-shadow:none;text-rendering:auto;text-wrap:wrap;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;text-underline-offset:auto;text-underline-position:auto;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:auto;-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;font-style:normal;font-stretch:100%;line-height:normal;text-emphasis:none}}:host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted([shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all}@media screen and (width>=48rem) and (width<=64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted([shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all}@media screen and (width>=90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all}}";
3
+ //#endregion
4
+ //#region ../common/src/common.ts
5
+ function n(e) {
6
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
+ return Object.getOwnPropertyNames(n);
8
+ }
9
+ function r(e) {
10
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
+ return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
12
+ }
13
+ var i = new CSSStyleSheet();
14
+ i.replaceSync(t);
15
+ var a = {
16
+ BASE_URL: "/",
17
+ DEV: !0,
18
+ MODE: "production",
19
+ PROD: !1,
20
+ SSR: !1,
21
+ VITE_COMPONENT_DEBUG: "true"
22
+ }, o = a?.VITE_COMPONENT_DEBUG === "true" || a?.DEV === !0;
23
+ typeof window < "u" && (window.isComponentDebug = s);
24
+ function s() {
25
+ return o;
26
+ }
27
+ function c(e) {
28
+ s() && console.error(e);
29
+ }
30
+ typeof window < "u" && (window.isComponentDebug = s);
31
+ var l = class e extends HTMLElement {
32
+ static get observedAttributes() {
33
+ return /* @__PURE__ */ "grow.grow--mobile.grow--tablet.grow--laptop.grow--desktop.shrink.shrink--mobile.shrink--tablet.shrink--laptop.shrink--desktop.basis.basis--mobile.basis--tablet.basis--laptop.basis--desktop.align-self.align-self--mobile.align-self--tablet.align-self--laptop.align-self--desktop.justify-self.justify-self--mobile.justify-self--tablet.justify-self--laptop.justify-self--desktop.hidden.hidden--mobile.hidden--tablet.hidden--laptop.hidden--desktop.shown--sr.shown--sr--mobile.shown--sr--tablet.shown--sr--laptop.shown--sr--desktop.col-span.col-span--mobile.col-span--tablet.col-span--laptop.col-span--desktop.order.order--mobile.order--tablet.order--laptop.order--desktop.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
34
+ }
35
+ constructor(...e) {
36
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [i, ...e];
37
+ }
38
+ attributeChangedCallback(t, n, r) {
39
+ if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
40
+ case "grow":
41
+ case "grow--mobile":
42
+ case "grow--tablet":
43
+ case "grow--laptop":
44
+ case "grow--desktop":
45
+ case "shrink":
46
+ case "shrink--mobile":
47
+ case "shrink--tablet":
48
+ case "shrink--laptop":
49
+ case "shrink--desktop":
50
+ case "basis":
51
+ case "basis--mobile":
52
+ case "basis--tablet":
53
+ case "basis--laptop":
54
+ case "basis--desktop":
55
+ this.style.setProperty(`--${t}-value`, r);
56
+ break;
57
+ case "align-self":
58
+ case "align-self--mobile":
59
+ case "align-self--tablet":
60
+ case "align-self--laptop":
61
+ case "align-self--desktop":
62
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? d : u);
63
+ break;
64
+ case "justify-self":
65
+ case "justify-self--mobile":
66
+ case "justify-self--tablet":
67
+ case "justify-self--laptop":
68
+ case "justify-self--desktop":
69
+ this.updateProperties(t, n, r, ee);
70
+ break;
71
+ case "col-span":
72
+ case "col-span--mobile":
73
+ case "col-span--tablet":
74
+ case "col-span--laptop":
75
+ case "col-span--desktop":
76
+ this.updateProperties(t, n, r, te);
77
+ break;
78
+ case "order":
79
+ case "order--mobile":
80
+ case "order--tablet":
81
+ case "order--laptop":
82
+ case "order--desktop": this.updateProperties(t, n, r, ne);
83
+ }
84
+ }
85
+ updateProperties(e, t, n, r) {
86
+ r && (this.checkName(r, n) || c(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
87
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
88
+ if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
89
+ else {
90
+ let r = e.split("--")[1];
91
+ this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
92
+ }
93
+ }
94
+ updateStyle(e, t, n) {
95
+ n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
96
+ }
97
+ checkName(e, t) {
98
+ return e.includes(t);
99
+ }
100
+ get $el() {
101
+ return this;
102
+ }
103
+ get $parentElementName() {
104
+ return this.parentElement?.tagName.toLowerCase();
105
+ }
106
+ get isInsideGridOrStack() {
107
+ let e = this.parentElement;
108
+ for (; e;) {
109
+ if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
110
+ if (window.getComputedStyle(e).display === "contents") {
111
+ e = e.parentElement;
112
+ continue;
113
+ }
114
+ break;
115
+ }
116
+ return !1;
117
+ }
118
+ get grow() {
119
+ return this.getAttribute("grow");
120
+ }
121
+ set grow(e) {
122
+ C(this, "grow", e);
123
+ }
124
+ get growMobile() {
125
+ return this.getAttribute("grow--mobile");
126
+ }
127
+ set growMobile(e) {
128
+ C(this, "grow--mobile", e);
129
+ }
130
+ get growTablet() {
131
+ return this.getAttribute("grow--tablet");
132
+ }
133
+ set growTablet(e) {
134
+ C(this, "grow--tablet", e);
135
+ }
136
+ get growLaptop() {
137
+ return this.getAttribute("grow--laptop");
138
+ }
139
+ set growLaptop(e) {
140
+ C(this, "grow--laptop", e);
141
+ }
142
+ get growDesktop() {
143
+ return this.getAttribute("grow--desktop");
144
+ }
145
+ set growDesktop(e) {
146
+ C(this, "grow--desktop", e);
147
+ }
148
+ get shrink() {
149
+ return this.getAttribute("shrink");
150
+ }
151
+ set shrink(e) {
152
+ C(this, "shrink", e);
153
+ }
154
+ get shrinkMobile() {
155
+ return this.getAttribute("shrink--mobile");
156
+ }
157
+ set shrinkMobile(e) {
158
+ C(this, "shrink--mobile", e);
159
+ }
160
+ get shrinkTablet() {
161
+ return this.getAttribute("shrink--tablet");
162
+ }
163
+ set shrinkTablet(e) {
164
+ C(this, "shrink--tablet", e);
165
+ }
166
+ get shrinkLaptop() {
167
+ return this.getAttribute("shrink--laptop");
168
+ }
169
+ set shrinkLaptop(e) {
170
+ C(this, "shrink--laptop", e);
171
+ }
172
+ get shrinkDesktop() {
173
+ return this.getAttribute("shrink--desktop");
174
+ }
175
+ set shrinkDesktop(e) {
176
+ C(this, "shrink--desktop", e);
177
+ }
178
+ get basis() {
179
+ return this.getAttribute("basis");
180
+ }
181
+ set basis(e) {
182
+ C(this, "basis", e);
183
+ }
184
+ get basisMobile() {
185
+ return this.getAttribute("basis--mobile");
186
+ }
187
+ set basisMobile(e) {
188
+ C(this, "basis--mobile", e);
189
+ }
190
+ get basisTablet() {
191
+ return this.getAttribute("basis--tablet");
192
+ }
193
+ set basisTablet(e) {
194
+ C(this, "basis--tablet", e);
195
+ }
196
+ get basisLaptop() {
197
+ return this.getAttribute("basis--laptop");
198
+ }
199
+ set basisLaptop(e) {
200
+ C(this, "basis--laptop", e);
201
+ }
202
+ get basisDesktop() {
203
+ return this.getAttribute("basis--desktop");
204
+ }
205
+ set basisDesktop(e) {
206
+ C(this, "basis--desktop", e);
207
+ }
208
+ get alignSelf() {
209
+ return this.getAttribute("align-self");
210
+ }
211
+ set alignSelf(e) {
212
+ C(this, "align-self", e);
213
+ }
214
+ get alignSelfMobile() {
215
+ return this.getAttribute("align-self--mobile");
216
+ }
217
+ set alignSelfMobile(e) {
218
+ C(this, "align-self--mobile", e);
219
+ }
220
+ get alignSelfTablet() {
221
+ return this.getAttribute("align-self--tablet");
222
+ }
223
+ set alignSelfTablet(e) {
224
+ C(this, "align-self--tablet", e);
225
+ }
226
+ get alignSelfLaptop() {
227
+ return this.getAttribute("align-self--laptop");
228
+ }
229
+ set alignSelfLaptop(e) {
230
+ C(this, "align-self--laptop", e);
231
+ }
232
+ get alignSelfDesktop() {
233
+ return this.getAttribute("align-self--desktop");
234
+ }
235
+ set alignSelfDesktop(e) {
236
+ C(this, "align-self--desktop", e);
237
+ }
238
+ get justifySelf() {
239
+ return this.getAttribute("justify-self");
240
+ }
241
+ set justifySelf(e) {
242
+ C(this, "justify-self", e);
243
+ }
244
+ get justifySelfMobile() {
245
+ return this.getAttribute("justify-self--mobile");
246
+ }
247
+ set justifySelfMobile(e) {
248
+ C(this, "justify-self--mobile", e);
249
+ }
250
+ get justifySelfTablet() {
251
+ return this.getAttribute("justify-self--tablet");
252
+ }
253
+ set justifySelfTablet(e) {
254
+ C(this, "justify-self--tablet", e);
255
+ }
256
+ get justifySelfLaptop() {
257
+ return this.getAttribute("justify-self--laptop");
258
+ }
259
+ set justifySelfLaptop(e) {
260
+ C(this, "justify-self--laptop", e);
261
+ }
262
+ get justifySelfDesktop() {
263
+ return this.getAttribute("justify-self--desktop");
264
+ }
265
+ set justifySelfDesktop(e) {
266
+ C(this, "justify-self--desktop", e);
267
+ }
268
+ get hiddenMobile() {
269
+ return this.hasAttribute("hidden--mobile");
270
+ }
271
+ set hiddenMobile(e) {
272
+ w(this, "hidden--mobile", e);
273
+ }
274
+ get hiddenTablet() {
275
+ return this.hasAttribute("hidden--tablet");
276
+ }
277
+ set hiddenTablet(e) {
278
+ w(this, "hidden--tablet", e);
279
+ }
280
+ get hiddenLaptop() {
281
+ return this.hasAttribute("hidden--laptop");
282
+ }
283
+ set hiddenLaptop(e) {
284
+ w(this, "hidden--laptop", e);
285
+ }
286
+ get hiddenDesktop() {
287
+ return this.hasAttribute("hidden--desktop");
288
+ }
289
+ set hiddenDesktop(e) {
290
+ w(this, "hidden--desktop", e);
291
+ }
292
+ get colSpan() {
293
+ return this.getAttribute("col-span");
294
+ }
295
+ set colSpan(e) {
296
+ C(this, "col-span", e);
297
+ }
298
+ get colSpanMobile() {
299
+ return this.getAttribute("col-span--mobile");
300
+ }
301
+ set colSpanMobile(e) {
302
+ C(this, "col-span--mobile", e);
303
+ }
304
+ get colSpanTablet() {
305
+ return this.getAttribute("col-span--tablet");
306
+ }
307
+ set colSpanTablet(e) {
308
+ C(this, "col-span--tablet", e);
309
+ }
310
+ get colSpanLaptop() {
311
+ return this.getAttribute("col-span--laptop");
312
+ }
313
+ set colSpanLaptop(e) {
314
+ C(this, "col-span--laptop", e);
315
+ }
316
+ get colSpanDesktop() {
317
+ return this.getAttribute("col-span--desktop");
318
+ }
319
+ set colSpanDesktop(e) {
320
+ C(this, "col-span--desktop", e);
321
+ }
322
+ get order() {
323
+ return this.getAttribute("order");
324
+ }
325
+ set order(e) {
326
+ C(this, "order", e);
327
+ }
328
+ get orderMobile() {
329
+ return this.getAttribute("order--mobile");
330
+ }
331
+ set orderMobile(e) {
332
+ C(this, "order--mobile", e);
333
+ }
334
+ get orderTablet() {
335
+ return this.getAttribute("order--tablet");
336
+ }
337
+ set orderTablet(e) {
338
+ C(this, "order--tablet", e);
339
+ }
340
+ get orderLaptop() {
341
+ return this.getAttribute("order--laptop");
342
+ }
343
+ set orderLaptop(e) {
344
+ C(this, "order--laptop", e);
345
+ }
346
+ get orderDesktop() {
347
+ return this.getAttribute("order--desktop");
348
+ }
349
+ set orderDesktop(e) {
350
+ C(this, "order--desktop", e);
351
+ }
352
+ };
353
+ (class extends l {
354
+ static {
355
+ this.accessorExclusions = [];
356
+ }
357
+ static get observedAttributes() {
358
+ return [...super.observedAttributes, ...r(this.nativeName)];
359
+ }
360
+ attributeChangedCallback(e, t, n) {
361
+ super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
362
+ }
363
+ get ctor() {
364
+ return Object.getPrototypeOf(this).constructor;
365
+ }
366
+ constructor(...e) {
367
+ super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = n(this.ctor.nativeName)), this.enhanceWithNativeProperties();
368
+ }
369
+ enhanceWithNativeProperties() {
370
+ for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
371
+ Object.defineProperty(this, e, {
372
+ get() {
373
+ return this.$el[e];
374
+ },
375
+ set(t) {
376
+ this.$el[e] !== t && (this.$el[e] = t);
377
+ }
378
+ });
379
+ } catch (t) {
380
+ console.warn(`Could not create property ${e} for`, this.$el, t);
381
+ }
382
+ }
383
+ get $el() {
384
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
385
+ }
386
+ _updateAttribute(e, t) {
387
+ C(this, e, t);
388
+ }
389
+ _updateBooleanAttribute(e, t) {
390
+ w(this, e, t);
391
+ }
392
+ });
393
+ var u = [
394
+ "",
395
+ "default",
396
+ "auto",
397
+ "flex-start",
398
+ "start",
399
+ "flex-end",
400
+ "end",
401
+ "center",
402
+ "baseline",
403
+ "stretch"
404
+ ], d = [
405
+ "",
406
+ "default",
407
+ "start",
408
+ "end",
409
+ "center",
410
+ "stretch"
411
+ ], ee = [
412
+ "",
413
+ "default",
414
+ "start",
415
+ "end",
416
+ "center",
417
+ "stretch"
418
+ ], te = [
419
+ "",
420
+ "1",
421
+ "2",
422
+ "3",
423
+ "4",
424
+ "5",
425
+ "6",
426
+ "7",
427
+ "8",
428
+ "9",
429
+ "10",
430
+ "11",
431
+ "12"
432
+ ], ne = [
433
+ "",
434
+ "-1",
435
+ "0",
436
+ "1",
437
+ "2",
438
+ "3",
439
+ "4",
440
+ "5",
441
+ "6",
442
+ "7",
443
+ "8",
444
+ "9",
445
+ "10",
446
+ "11",
447
+ "12"
448
+ ], re = [
449
+ "",
450
+ "default",
451
+ ...[
452
+ "Xs",
453
+ "S",
454
+ "M",
455
+ "L",
456
+ "Xl"
457
+ ].map((e) => e.toLowerCase())
458
+ ], f = [
459
+ "",
460
+ "none",
461
+ "3xs",
462
+ "2xs",
463
+ "xs",
464
+ "s",
465
+ "m",
466
+ "l",
467
+ "xl"
468
+ ], p = [
469
+ "",
470
+ "none",
471
+ "s",
472
+ "m",
473
+ "l"
474
+ ], m = [
475
+ "",
476
+ "none",
477
+ "main",
478
+ "pill"
479
+ ], h = [
480
+ "none",
481
+ "main",
482
+ "brand",
483
+ "state-hover",
484
+ "state-active",
485
+ "neutral",
486
+ "purpose-success",
487
+ "purpose-warning",
488
+ "purpose-error",
489
+ "purpose-unlimited"
490
+ ], ie = [
491
+ "",
492
+ "all",
493
+ "top",
494
+ "right",
495
+ "bottom",
496
+ "left",
497
+ "block",
498
+ "inline"
499
+ ], g = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), _ = [
500
+ "",
501
+ "cover",
502
+ "contain",
503
+ "default"
504
+ ], v = [
505
+ "",
506
+ "none",
507
+ "s",
508
+ "m",
509
+ "l",
510
+ "xl"
511
+ ], y = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), b = [
512
+ "none",
513
+ "2xs",
514
+ "xs",
515
+ "s",
516
+ "default",
517
+ "l",
518
+ "heading-to-subtitle",
519
+ "heading-to-content",
520
+ "page-layout-between-sections"
521
+ ], x = [
522
+ "",
523
+ "all",
524
+ "top",
525
+ "right",
526
+ "bottom",
527
+ "left"
528
+ ];
529
+ function S(e, t) {
530
+ return t !== null && e.includes(t);
531
+ }
532
+ function C(e, t, n) {
533
+ if (n == null || n === "") {
534
+ e.removeAttribute(t);
535
+ return;
536
+ }
537
+ e.setAttribute(t, n.toString());
538
+ }
539
+ function w(e, t, n) {
540
+ if (!n) {
541
+ e.removeAttribute(t);
542
+ return;
543
+ }
544
+ e.setAttribute(t, "");
545
+ }
546
+ //#endregion
547
+ //#region ../common/src/breakpoints.ts
548
+ function T(e, t, n, r = "", i, a = e) {
549
+ let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
550
+ ${t(a, o)} {
551
+ ${e}: var(--${r}-${o}-desktop);
552
+ ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
553
+ }
554
+ /* Mobile only - max 767px */
555
+ @media only screen and (max-width: 47.938rem) {
556
+ ${t(a, o)} {
557
+ ${e}: var(--${r}-${o}-mobile);
558
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
559
+ }
560
+ }
561
+ ${t(a, o, "mobile")} {
562
+ /* Mobile only - max 767px */
563
+ @media only screen and (max-width: 47.938rem) {
564
+ ${e}: var(--${r}-${o}-mobile) !important;
565
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
566
+ }
567
+ }
568
+ ${t(a, o, "tablet")} {
569
+ /* Tablet - min 768px max 1024px */
570
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
571
+ ${e}: var(--${r}-${o}-desktop) !important;
572
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
573
+ }
574
+ }
575
+ ${t(a, o, "laptop")} {
576
+ /* Laptop - 1025px*/
577
+ @media only screen and (min-width: 64.0625rem) {
578
+ ${e}: var(--${r}-${o}-desktop) !important;
579
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
580
+ }
581
+ }
582
+ ${t(a, o, "desktop")} {
583
+ /* Desktop - 1025px*/
584
+ @media only screen and (min-width: 64.0625rem) {
585
+ ${e}: var(--${r}-${o}-desktop) !important;
586
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
587
+ }
588
+ }`, "");
589
+ return o.replaceSync(s), o;
590
+ }
591
+ var ae = class {
592
+ constructor(e, t, n, r) {
593
+ this.component = e, this.attributeName = t, this.cssVariable = r, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = n, Object.defineProperty(this.component, this.toCamelCase(this.attributeName), {
594
+ get: () => this.component.getAttribute(this.attributeName),
595
+ set: (e) => {
596
+ this.component.setAttribute(this.attributeName, e);
597
+ }
598
+ });
599
+ }
600
+ toCamelCase(e) {
601
+ return e.replace(/[-_]+(.)?/g, (e, t) => t ? t.toUpperCase() : "");
602
+ }
603
+ init(e) {
604
+ this.setCSSProperty(this.attributeName, e), this.setCSSProperties();
605
+ }
606
+ attributeChangedCallback(e, t, n) {
607
+ if (t !== n) switch (!0) {
608
+ case e === this.attributeName:
609
+ case e === `${this.attributeName}--mobile`:
610
+ case e === `${this.attributeName}--tablet`:
611
+ case e === `${this.attributeName}--laptop`:
612
+ case e === `${this.attributeName}--desktop`:
613
+ this.setCSSProperty(e, n);
614
+ break;
615
+ default: return;
616
+ }
617
+ }
618
+ setCSSProperty(e, t, n = !0) {
619
+ let [, r = ""] = e.split("--");
620
+ this.component.style.setProperty(`${this.cssVariable}${n ? "-all" : ""}${r ? `-${r}` : ""}`, `${this._attributeValue(t, r)}`);
621
+ }
622
+ setCSSProperties() {
623
+ let e = this.component.getAttribute(this.attributeName);
624
+ e && (this.setCSSProperty(this.attributeName, e), this.setCSSProperty(this.attributeNameMobile, e), this.setCSSProperty(this.attributeNameTablet, e), this.setCSSProperty(this.attributeNameLaptop, e), this.setCSSProperty(this.attributeNameDesktop, e));
625
+ let t = this.component.getAttribute(this.attributeNameMobile);
626
+ t && this.setCSSProperty(this.attributeNameMobile, t, !1);
627
+ let n = this.component.getAttribute(this.attributeNameTablet);
628
+ n && this.setCSSProperty(this.attributeNameTablet, n, !1);
629
+ let r = this.component.getAttribute(this.attributeNameLaptop);
630
+ r && this.setCSSProperty(this.attributeNameLaptop, r, !1);
631
+ let i = this.component.getAttribute(this.attributeNameDesktop);
632
+ i && this.setCSSProperty(this.attributeNameDesktop, i, !1);
633
+ }
634
+ set attributeValue(e) {
635
+ this._attributeValue = e, this.setCSSProperties();
636
+ }
637
+ }, E = new CSSStyleSheet();
638
+ E.replaceSync(e);
639
+ var D = [
640
+ "top-patch",
641
+ "top-neighbor-patch",
642
+ "top-ribbon",
643
+ "top-neighbor-ribbon",
644
+ "top-patch-and-neighbor-ribbon"
645
+ ], O = [
646
+ "1",
647
+ "2",
648
+ "3",
649
+ "4",
650
+ "5",
651
+ "6",
652
+ "7",
653
+ "8",
654
+ "9",
655
+ "10",
656
+ "11",
657
+ "12"
658
+ ], k = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, A = "px-padding", j = [
659
+ T("padding", k, f, A, "--container-padding"),
660
+ T("padding-inline", k, f, A),
661
+ T("padding-block", k, f, A),
662
+ T("padding-top", k, f, A),
663
+ T("padding-right", k, f, A, "--container-padding-right"),
664
+ T("padding-bottom", k, f, A),
665
+ T("padding-left", k, f, A, "--container-padding-left"),
666
+ T("gap", k, b, "px-spacing", void 0, "subgrid-gap")
667
+ ], M = class extends l {
668
+ static {
669
+ this.nativeName = "div";
670
+ }
671
+ constructor() {
672
+ super(E, ...j), 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();
673
+ }
674
+ static get observedAttributes() {
675
+ return [
676
+ ...super.observedAttributes,
677
+ "border",
678
+ "border-color",
679
+ "border-side",
680
+ "border-side--mobile",
681
+ "border-side--tablet",
682
+ "border-side--laptop",
683
+ "border-radius",
684
+ "no-border-radius",
685
+ "no-border-radius--mobile",
686
+ "no-border-radius--tablet",
687
+ "no-border-radius--laptop",
688
+ "background-color",
689
+ "background-color--mobile",
690
+ "background-color--tablet",
691
+ "background-color--laptop",
692
+ "background-gradient",
693
+ "background-gradient--mobile",
694
+ "background-gradient--tablet",
695
+ "background-gradient--laptop",
696
+ "background-image",
697
+ "background-image--mobile",
698
+ "background-image--tablet",
699
+ "background-image--laptop",
700
+ "background-size",
701
+ "background-position",
702
+ "box-shadow",
703
+ "anchor-offset",
704
+ "anchor-spacing",
705
+ "inverted",
706
+ "subgrid-rows"
707
+ ];
708
+ }
709
+ connectedCallback() {
710
+ this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
711
+ this.$slotAnchor && this.addAnchorClass();
712
+ }), this.contentObserver.observe(this, {
713
+ childList: !0,
714
+ subtree: !0,
715
+ characterData: !0
716
+ }), this._bgObserver = new IntersectionObserver((e) => {
717
+ e.forEach((e) => {
718
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
719
+ });
720
+ }), this._bgObserver.observe(this.$el);
721
+ }
722
+ disconnectedCallback() {
723
+ this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
724
+ }
725
+ attributeChangedCallback(e, t, n) {
726
+ if (t !== n) switch (e) {
727
+ case "border":
728
+ this.updateAttribute(e, t, n, p);
729
+ break;
730
+ case "border-color":
731
+ this.updateBorderColor(e, n);
732
+ break;
733
+ case "border-side":
734
+ case "border-side--mobile":
735
+ case "border-side--tablet":
736
+ case "border-side--laptop":
737
+ this.updateAttribute(e, t, n, ie);
738
+ break;
739
+ case "border-radius":
740
+ this.updateAttribute(e, t, n, m);
741
+ break;
742
+ case "no-border-radius":
743
+ case "no-border-radius--mobile":
744
+ case "no-border-radius--tablet":
745
+ case "no-border-radius--laptop":
746
+ this.updateNoBorderRadius(e, t, n, x);
747
+ break;
748
+ case "background-color":
749
+ case "background-color--mobile":
750
+ case "background-color--tablet":
751
+ case "background-color--laptop":
752
+ this.updateBackgroundColor(e, n);
753
+ break;
754
+ case "background-gradient":
755
+ case "background-gradient--mobile":
756
+ case "background-gradient--tablet":
757
+ case "background-gradient--laptop":
758
+ this.updateGradient(e, n);
759
+ break;
760
+ case "background-size":
761
+ this.updateAttribute(e, t, n, _);
762
+ break;
763
+ case "background-image":
764
+ case "background-image--mobile":
765
+ case "background-image--tablet":
766
+ case "background-image--laptop":
767
+ this._isInViewport && this.updateBackgroundImg(e, n);
768
+ break;
769
+ case "background-position":
770
+ n !== null && n !== "" && (this.$el.style.backgroundPosition = n);
771
+ break;
772
+ case "box-shadow":
773
+ this.updateAttribute(e, t, n, v);
774
+ break;
775
+ case "anchor-offset":
776
+ this.updateAnchorOffset(t, n, f);
777
+ break;
778
+ case "anchor-spacing":
779
+ this.updateAnchorSpacing(t, n, D);
780
+ break;
781
+ case "subgrid-rows":
782
+ this.updateSubgridRows(e, t, n, O);
783
+ break;
784
+ default: super.attributeChangedCallback(e, t, n);
785
+ }
786
+ }
787
+ _loadBackgroundImages() {
788
+ [
789
+ "background-image",
790
+ "background-image--mobile",
791
+ "background-image--tablet",
792
+ "background-image--laptop"
793
+ ].forEach((e) => {
794
+ let t = this.getAttribute(e);
795
+ t && this.updateBackgroundImg(e, t);
796
+ });
797
+ }
798
+ updateBackgroundImg(e, t) {
799
+ this.$el.style.setProperty(`--${e}`, `url("${t}")`);
800
+ }
801
+ updateGradient(e, t) {
802
+ if (this.checkName(y, t)) {
803
+ let n = this.splitAttrNameFromBreakpoint(e);
804
+ e = n.attrName;
805
+ let r = n.breakpoint;
806
+ this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
807
+ } else c(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${y.join("\", \"")}".`);
808
+ }
809
+ updateBackgroundColor(e, t) {
810
+ let n = t.startsWith("surface-");
811
+ if (this.checkName(g, t)) {
812
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
813
+ 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"})`);
814
+ } else c(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${g.join("\", \"")}".`);
815
+ }
816
+ updateBorderColor(e, t) {
817
+ this.checkName(h, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : c(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${h.join("\", \"")}".`);
818
+ }
819
+ updateNoBorderRadius(e, t, n, r) {
820
+ if (!this.checkName(r, n)) c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
821
+ else {
822
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
823
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
824
+ }
825
+ }
826
+ updateAttribute(e, t, n, r) {
827
+ if (!this.checkName(r, n)) c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
828
+ else {
829
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
830
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
831
+ }
832
+ }
833
+ splitAttrNameFromBreakpoint(e) {
834
+ let t = "";
835
+ if ([
836
+ "--mobile",
837
+ "--tablet",
838
+ "--laptop"
839
+ ].some((t) => e.includes(t))) {
840
+ let n = e.split("--");
841
+ e = n[0], t = `--${n[1]}`;
842
+ }
843
+ return {
844
+ attrName: e,
845
+ breakpoint: t
846
+ };
847
+ }
848
+ updateAnchorOffset(e, t, n) {
849
+ if (!S(n, t)) {
850
+ c(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
851
+ return;
852
+ }
853
+ let r = (e) => {
854
+ 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)`));
855
+ };
856
+ r(e), r(t);
857
+ }
858
+ addAnchorClass() {
859
+ this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
860
+ }
861
+ updateAnchorSpacing(e, t, n) {
862
+ if (!S(n, t)) {
863
+ c(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
864
+ return;
865
+ }
866
+ let r = (e) => {
867
+ 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)`));
868
+ };
869
+ r(e), r(t);
870
+ }
871
+ updateSubgridRows(e, t, n, r) {
872
+ S(r, n) ? this.style.setProperty(`--${e}`, n) : c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
873
+ }
874
+ get $el() {
875
+ return this?.shadowRoot?.querySelector(".container");
876
+ }
877
+ get $slotAnchor() {
878
+ return this.querySelector("[slot^=\"anchor\"]");
879
+ }
880
+ get padding() {
881
+ return this.getAttribute("padding");
882
+ }
883
+ set padding(e) {
884
+ C(this, "padding", e);
885
+ }
886
+ get paddingBlock() {
887
+ return this.getAttribute("padding-block");
888
+ }
889
+ set paddingBlock(e) {
890
+ C(this, "padding-block", e);
891
+ }
892
+ get paddingInline() {
893
+ return this.getAttribute("padding-inline");
894
+ }
895
+ set paddingInline(e) {
896
+ C(this, "padding-inline", e);
897
+ }
898
+ get paddingTop() {
899
+ return this.getAttribute("padding-top");
900
+ }
901
+ set paddingTop(e) {
902
+ C(this, "padding-top", e);
903
+ }
904
+ get paddingRight() {
905
+ return this.getAttribute("padding-right");
906
+ }
907
+ set paddingRight(e) {
908
+ C(this, "padding-right", e);
909
+ }
910
+ get paddingBottom() {
911
+ return this.getAttribute("padding-bottom");
912
+ }
913
+ set paddingBottom(e) {
914
+ C(this, "padding-bottom", e);
915
+ }
916
+ get paddingLeft() {
917
+ return this.getAttribute("padding-left");
918
+ }
919
+ set paddingLeft(e) {
920
+ C(this, "padding-left", e);
921
+ }
922
+ get paddingMobile() {
923
+ return this.getAttribute("padding--mobile");
924
+ }
925
+ set paddingMobile(e) {
926
+ C(this, "padding--mobile", e);
927
+ }
928
+ get paddingBlockMobile() {
929
+ return this.getAttribute("padding-block--mobile");
930
+ }
931
+ set paddingBlockMobile(e) {
932
+ C(this, "padding-block--mobile", e);
933
+ }
934
+ get paddingInlineMobile() {
935
+ return this.getAttribute("padding-inline--mobile");
936
+ }
937
+ set paddingInlineMobile(e) {
938
+ C(this, "padding-inline--mobile", e);
939
+ }
940
+ get paddingTopMobile() {
941
+ return this.getAttribute("padding-top--mobile");
942
+ }
943
+ set paddingTopMobile(e) {
944
+ C(this, "padding-top--mobile", e);
945
+ }
946
+ get paddingRightMobile() {
947
+ return this.getAttribute("padding-right--mobile");
948
+ }
949
+ set paddingRightMobile(e) {
950
+ C(this, "padding-right--mobile", e);
951
+ }
952
+ get paddingBottomMobile() {
953
+ return this.getAttribute("padding-bottom--mobile");
954
+ }
955
+ set paddingBottomMobile(e) {
956
+ C(this, "padding-bottom--mobile", e);
957
+ }
958
+ get paddingLeftMobile() {
959
+ return this.getAttribute("padding-left--mobile");
960
+ }
961
+ set paddingLeftMobile(e) {
962
+ C(this, "padding-left--mobile", e);
963
+ }
964
+ get paddingTablet() {
965
+ return this.getAttribute("padding--tablet");
966
+ }
967
+ set paddingTablet(e) {
968
+ C(this, "padding--tablet", e);
969
+ }
970
+ get paddingBlockTablet() {
971
+ return this.getAttribute("padding-block--tablet");
972
+ }
973
+ set paddingBlockTablet(e) {
974
+ C(this, "padding-block--tablet", e);
975
+ }
976
+ get paddingInlineTablet() {
977
+ return this.getAttribute("padding-inline--tablet");
978
+ }
979
+ set paddingInlineTablet(e) {
980
+ C(this, "padding-inline--tablet", e);
981
+ }
982
+ get paddingTopTablet() {
983
+ return this.getAttribute("padding-top--tablet");
984
+ }
985
+ set paddingTopTablet(e) {
986
+ C(this, "padding-top--tablet", e);
987
+ }
988
+ get paddingRightTablet() {
989
+ return this.getAttribute("padding-right--tablet");
990
+ }
991
+ set paddingRightTablet(e) {
992
+ C(this, "padding-right--tablet", e);
993
+ }
994
+ get paddingBottomTablet() {
995
+ return this.getAttribute("padding-bottom--tablet");
996
+ }
997
+ set paddingBottomTablet(e) {
998
+ C(this, "padding-bottom--tablet", e);
999
+ }
1000
+ get paddingLeftTablet() {
1001
+ return this.getAttribute("padding-left--tablet");
1002
+ }
1003
+ set paddingLeftTablet(e) {
1004
+ C(this, "padding-left--tablet", e);
1005
+ }
1006
+ get paddingLaptop() {
1007
+ return this.getAttribute("padding--laptop");
1008
+ }
1009
+ set paddingLaptop(e) {
1010
+ C(this, "padding--laptop", e);
1011
+ }
1012
+ get paddingBlockLaptop() {
1013
+ return this.getAttribute("padding-block--laptop");
1014
+ }
1015
+ set paddingBlockLaptop(e) {
1016
+ C(this, "padding-block--laptop", e);
1017
+ }
1018
+ get paddingInlineLaptop() {
1019
+ return this.getAttribute("padding-inline--laptop");
1020
+ }
1021
+ set paddingInlineLaptop(e) {
1022
+ C(this, "padding-inline--laptop", e);
1023
+ }
1024
+ get paddingTopLaptop() {
1025
+ return this.getAttribute("padding-top--laptop");
1026
+ }
1027
+ set paddingTopLaptop(e) {
1028
+ C(this, "padding-top--laptop", e);
1029
+ }
1030
+ get paddingRightLaptop() {
1031
+ return this.getAttribute("padding-right--laptop");
1032
+ }
1033
+ set paddingRightLaptop(e) {
1034
+ C(this, "padding-right--laptop", e);
1035
+ }
1036
+ get paddingBottomLaptop() {
1037
+ return this.getAttribute("padding-bottom--laptop");
1038
+ }
1039
+ set paddingBottomLaptop(e) {
1040
+ C(this, "padding-bottom--laptop", e);
1041
+ }
1042
+ get paddingLeftLaptop() {
1043
+ return this.getAttribute("padding-left--laptop");
1044
+ }
1045
+ set paddingLeftLaptop(e) {
1046
+ C(this, "padding-left--laptop", e);
1047
+ }
1048
+ get border() {
1049
+ return this.getAttribute("border");
1050
+ }
1051
+ set border(e) {
1052
+ C(this, "border", e);
1053
+ }
1054
+ get borderColor() {
1055
+ return this.getAttribute("border-color");
1056
+ }
1057
+ set borderColor(e) {
1058
+ C(this, "border-color", e);
1059
+ }
1060
+ get borderSide() {
1061
+ return this.getAttribute("border-side");
1062
+ }
1063
+ set borderSide(e) {
1064
+ C(this, "border-side", e);
1065
+ }
1066
+ get borderSideMobile() {
1067
+ return this.getAttribute("border-side--mobile");
1068
+ }
1069
+ set borderSideMobile(e) {
1070
+ C(this, "border-side--mobile", e);
1071
+ }
1072
+ get borderSideTablet() {
1073
+ return this.getAttribute("border-side--tablet");
1074
+ }
1075
+ set borderSideTablet(e) {
1076
+ C(this, "border-side--tablet", e);
1077
+ }
1078
+ get borderSideLaptop() {
1079
+ return this.getAttribute("border-side--laptop");
1080
+ }
1081
+ set borderSideLaptop(e) {
1082
+ C(this, "border-side--laptop", e);
1083
+ }
1084
+ get borderRadius() {
1085
+ return this.getAttribute("border-radius");
1086
+ }
1087
+ set borderRadius(e) {
1088
+ C(this, "border-radius", e);
1089
+ }
1090
+ get noBorderRadius() {
1091
+ return this.getAttribute("no-border-radius");
1092
+ }
1093
+ set noBorderRadius(e) {
1094
+ C(this, "no-border-radius", e);
1095
+ }
1096
+ get noBorderRadiusMobile() {
1097
+ return this.getAttribute("no-border-radius--mobile");
1098
+ }
1099
+ set noBorderRadiusMobile(e) {
1100
+ C(this, "no-border-radius--mobile", e);
1101
+ }
1102
+ get noBorderRadiusTablet() {
1103
+ return this.getAttribute("no-border-radius--tablet");
1104
+ }
1105
+ set noBorderRadiusTablet(e) {
1106
+ C(this, "no-border-radius--tablet", e);
1107
+ }
1108
+ get noBorderRadiusLaptop() {
1109
+ return this.getAttribute("no-border-radius--laptop");
1110
+ }
1111
+ set noBorderRadiusLaptop(e) {
1112
+ C(this, "no-border-radius--laptop", e);
1113
+ }
1114
+ get backgroundColor() {
1115
+ return this.getAttribute("background-color");
1116
+ }
1117
+ set backgroundColor(e) {
1118
+ C(this, "background-color", e);
1119
+ }
1120
+ get backgroundColorMobile() {
1121
+ return this.getAttribute("background-color--mobile");
1122
+ }
1123
+ set backgroundColorMobile(e) {
1124
+ C(this, "background-color--mobile", e);
1125
+ }
1126
+ get backgroundColorTablet() {
1127
+ return this.getAttribute("background-color--tablet");
1128
+ }
1129
+ set backgroundColorTablet(e) {
1130
+ C(this, "background-color--tablet", e);
1131
+ }
1132
+ get backgroundColorLaptop() {
1133
+ return this.getAttribute("background-color--laptop");
1134
+ }
1135
+ set backgroundColorLaptop(e) {
1136
+ C(this, "background-color--laptop", e);
1137
+ }
1138
+ get gradient() {
1139
+ return this.getAttribute("background-gradient");
1140
+ }
1141
+ set gradient(e) {
1142
+ C(this, "background-gradient", e);
1143
+ }
1144
+ get gradientMobile() {
1145
+ return this.getAttribute("background-gradient--mobile");
1146
+ }
1147
+ set gradientMobile(e) {
1148
+ C(this, "background-gradient--mobile", e);
1149
+ }
1150
+ get gradientTablet() {
1151
+ return this.getAttribute("background-gradient--tablet");
1152
+ }
1153
+ set gradientTablet(e) {
1154
+ C(this, "background-gradient--tablet", e);
1155
+ }
1156
+ get gradientLaptop() {
1157
+ return this.getAttribute("background-gradient--laptop");
1158
+ }
1159
+ set gradientLaptop(e) {
1160
+ C(this, "background-gradient--laptop", e);
1161
+ }
1162
+ get backgroundImage() {
1163
+ return this.getAttribute("background-image");
1164
+ }
1165
+ set backgroundImage(e) {
1166
+ C(this, "background-image", e);
1167
+ }
1168
+ get backgroundImageMobile() {
1169
+ return this.getAttribute("background-image--mobile");
1170
+ }
1171
+ set backgroundImageMobile(e) {
1172
+ C(this, "background-image--mobile", e);
1173
+ }
1174
+ get backgroundImageTablet() {
1175
+ return this.getAttribute("background-image--tablet");
1176
+ }
1177
+ set backgroundImageTablet(e) {
1178
+ C(this, "background-image--tablet", e);
1179
+ }
1180
+ get backgroundImageLaptop() {
1181
+ return this.getAttribute("background-image--laptop");
1182
+ }
1183
+ set backgroundImageLaptop(e) {
1184
+ C(this, "background-image--laptop", e);
1185
+ }
1186
+ get backgroundSize() {
1187
+ return this.getAttribute("background-size");
1188
+ }
1189
+ set backgroundSize(e) {
1190
+ C(this, "background-size", e);
1191
+ }
1192
+ get backgroundPosition() {
1193
+ return this.getAttribute("background-position");
1194
+ }
1195
+ set backgroundPosition(e) {
1196
+ C(this, "background-position", e);
1197
+ }
1198
+ get boxShadow() {
1199
+ return this.getAttribute("box-shadow");
1200
+ }
1201
+ set boxShadow(e) {
1202
+ C(this, "box-shadow", e);
1203
+ }
1204
+ get anchorOffset() {
1205
+ return this.getAttribute("anchor-offset");
1206
+ }
1207
+ set anchorOffset(e) {
1208
+ C(this, "anchor-offset", e);
1209
+ }
1210
+ get anchorSpacing() {
1211
+ return this.getAttribute("anchor-spacing");
1212
+ }
1213
+ set anchorSpacing(e) {
1214
+ C(this, "anchor-spacing", e);
1215
+ }
1216
+ get inverted() {
1217
+ return this.hasAttribute("inverted");
1218
+ }
1219
+ set inverted(e) {
1220
+ w(this, "inverted", e);
1221
+ }
1222
+ get subgridRows() {
1223
+ return this.getAttribute("subgrid-rows");
1224
+ }
1225
+ set subgridRows(e) {
1226
+ C(this, "subgrid-rows", e);
1227
+ }
1228
+ get subgridGap() {
1229
+ return this.getAttribute("subgrid-gap");
1230
+ }
1231
+ set subgridGap(e) {
1232
+ C(this, "subgrid-gap", e);
1233
+ }
1234
+ get subgridGapMobile() {
1235
+ return this.getAttribute("subgrid-gap--mobile");
1236
+ }
1237
+ set subgridGapMobile(e) {
1238
+ C(this, "subgrid-gap--mobile", e);
1239
+ }
1240
+ get subgridGapTablet() {
1241
+ return this.getAttribute("subgrid-gap--tablet");
1242
+ }
1243
+ set subgridGapTablet(e) {
1244
+ C(this, "subgrid-gap--tablet", e);
1245
+ }
1246
+ get subgridGapLaptop() {
1247
+ return this.getAttribute("subgrid-gap--laptop");
1248
+ }
1249
+ set subgridGapLaptop(e) {
1250
+ C(this, "subgrid-gap--laptop", e);
1251
+ }
1252
+ };
1253
+ customElements.get("px-container") || customElements.define("px-container", M);
1254
+ //#endregion
1255
+ //#region ../Layout/src/Stack.css?inline
1256
+ var N = ":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))}}", P = new CSSStyleSheet();
1257
+ P.replaceSync(N);
1258
+ var F = [
1259
+ "",
1260
+ "default",
1261
+ "row",
1262
+ "row-reverse",
1263
+ "column",
1264
+ "column-reverse"
1265
+ ], I = [
1266
+ "",
1267
+ "default",
1268
+ "stretch",
1269
+ "flex-start",
1270
+ "start",
1271
+ "flex-end",
1272
+ "end",
1273
+ "center",
1274
+ "baseline"
1275
+ ], L = [
1276
+ "",
1277
+ "default",
1278
+ "flex-start",
1279
+ "start",
1280
+ "flex-end",
1281
+ "end",
1282
+ "center",
1283
+ "space-between",
1284
+ "space-around",
1285
+ "space-evenly"
1286
+ ], R = [
1287
+ "",
1288
+ "default",
1289
+ "nowrap",
1290
+ "wrap",
1291
+ "wrap-reverse"
1292
+ ], z = [
1293
+ "",
1294
+ "visible",
1295
+ "hidden",
1296
+ "scroll",
1297
+ "auto"
1298
+ ], B = class extends l {
1299
+ constructor() {
1300
+ super(P), this.overflowXAttributeDelegate = new ae(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template;
1301
+ }
1302
+ connectedCallback() {
1303
+ 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");
1304
+ }
1305
+ static get observedAttributes() {
1306
+ return [
1307
+ ...super.observedAttributes,
1308
+ "direction",
1309
+ "direction--mobile",
1310
+ "direction--tablet",
1311
+ "direction--laptop",
1312
+ "direction--desktop",
1313
+ "gap",
1314
+ "gap--mobile",
1315
+ "gap--tablet",
1316
+ "gap--laptop",
1317
+ "gap--desktop",
1318
+ "justify-content",
1319
+ "justify-content--mobile",
1320
+ "justify-content--tablet",
1321
+ "justify-content--laptop",
1322
+ "justify-content--desktop",
1323
+ "align-items",
1324
+ "align-items--mobile",
1325
+ "align-items--tablet",
1326
+ "align-items--laptop",
1327
+ "align-items--desktop",
1328
+ "wrap",
1329
+ "wrap--mobile",
1330
+ "wrap--tablet",
1331
+ "wrap--laptop",
1332
+ "wrap--desktop",
1333
+ "overflow-x",
1334
+ "overflow-x--mobile",
1335
+ "overflow-x--tablet",
1336
+ "overflow-x--laptop",
1337
+ "overflow-x--desktop"
1338
+ ];
1339
+ }
1340
+ attributeChangedCallback(e, t, n) {
1341
+ switch (e) {
1342
+ case "gap":
1343
+ case "gap--mobile":
1344
+ case "gap--tablet":
1345
+ case "gap--laptop":
1346
+ case "gap--desktop":
1347
+ this.updateFlexProperties(e, t, n, b);
1348
+ break;
1349
+ case "justify-content":
1350
+ case "justify-content--mobile":
1351
+ case "justify-content--tablet":
1352
+ case "justify-content--laptop":
1353
+ case "justify-content--desktop":
1354
+ this.updateFlexProperties(e, t, n, L);
1355
+ break;
1356
+ case "align-items":
1357
+ case "align-items--mobile":
1358
+ case "align-items--tablet":
1359
+ case "align-items--laptop":
1360
+ case "align-items--desktop":
1361
+ this.updateFlexProperties(e, t, n, I);
1362
+ break;
1363
+ case "wrap":
1364
+ case "wrap--mobile":
1365
+ case "wrap--tablet":
1366
+ case "wrap--laptop":
1367
+ case "wrap--desktop":
1368
+ this.updateFlexProperties(e, t, n, R);
1369
+ break;
1370
+ case "direction":
1371
+ case "direction--mobile":
1372
+ case "direction--tablet":
1373
+ case "direction--laptop":
1374
+ case "direction--desktop":
1375
+ this.updateFlexProperties(e, t, n, F);
1376
+ break;
1377
+ case "overflow-x":
1378
+ case "overflow-x--mobile":
1379
+ case "overflow-x--tablet":
1380
+ case "overflow-x--laptop":
1381
+ case "overflow-x--desktop":
1382
+ this.updateOverflowX(e, t, n, z);
1383
+ break;
1384
+ default: super.attributeChangedCallback(e, t, n);
1385
+ }
1386
+ }
1387
+ updateOverflowX(e, t, n, r) {
1388
+ if (!S(r, n)) {
1389
+ c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1390
+ return;
1391
+ }
1392
+ this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
1393
+ }
1394
+ updateFlexProperties(e, t, n, r) {
1395
+ this.checkName(r, n) || c(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
1396
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
1397
+ 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) => {
1398
+ this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
1399
+ });
1400
+ else {
1401
+ let i = e.split("--")[1];
1402
+ this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
1403
+ }
1404
+ }
1405
+ updateStyle(e, t, n, r) {
1406
+ 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));
1407
+ }
1408
+ get direction() {
1409
+ return this.getAttribute("direction");
1410
+ }
1411
+ set direction(e) {
1412
+ C(this, "direction", e);
1413
+ }
1414
+ get directionMobile() {
1415
+ return this.getAttribute("direction--mobile");
1416
+ }
1417
+ set directionMobile(e) {
1418
+ C(this, "direction--mobile", e);
1419
+ }
1420
+ get directionTablet() {
1421
+ return this.getAttribute("direction--tablet");
1422
+ }
1423
+ set directionTablet(e) {
1424
+ C(this, "direction--tablet", e);
1425
+ }
1426
+ get directionLaptop() {
1427
+ return this.getAttribute("direction--laptop");
1428
+ }
1429
+ set directionLaptop(e) {
1430
+ C(this, "direction--laptop", e);
1431
+ }
1432
+ get directionDesktop() {
1433
+ return this.getAttribute("direction--desktop");
1434
+ }
1435
+ set directionDesktop(e) {
1436
+ C(this, "direction--desktop", e);
1437
+ }
1438
+ get gap() {
1439
+ return this.getAttribute("gap");
1440
+ }
1441
+ set gap(e) {
1442
+ C(this, "gap", e);
1443
+ }
1444
+ get gapMobile() {
1445
+ return this.getAttribute("gap--mobile");
1446
+ }
1447
+ set gapMobile(e) {
1448
+ C(this, "gap--mobile", e);
1449
+ }
1450
+ get gapTablet() {
1451
+ return this.getAttribute("gap--tablet");
1452
+ }
1453
+ set gapTablet(e) {
1454
+ C(this, "gap--tablet", e);
1455
+ }
1456
+ get gapLaptop() {
1457
+ return this.getAttribute("gap--laptop");
1458
+ }
1459
+ set gapLaptop(e) {
1460
+ C(this, "gap--laptop", e);
1461
+ }
1462
+ get gapDesktop() {
1463
+ return this.getAttribute("gap--desktop");
1464
+ }
1465
+ set gapDesktop(e) {
1466
+ C(this, "gap--desktop", e);
1467
+ }
1468
+ get justifyContent() {
1469
+ return this.getAttribute("justify-content");
1470
+ }
1471
+ set justifyContent(e) {
1472
+ C(this, "justify-content", e);
1473
+ }
1474
+ get justifyContentMobile() {
1475
+ return this.getAttribute("justify-content--mobile");
1476
+ }
1477
+ set justifyContentMobile(e) {
1478
+ C(this, "justify-content--mobile", e);
1479
+ }
1480
+ get justifyContentTablet() {
1481
+ return this.getAttribute("justify-content--tablet");
1482
+ }
1483
+ set justifyContentTablet(e) {
1484
+ C(this, "justify-content--tablet", e);
1485
+ }
1486
+ get justifyContentLaptop() {
1487
+ return this.getAttribute("justify-content--laptop");
1488
+ }
1489
+ set justifyContentLaptop(e) {
1490
+ C(this, "justify-content--laptop", e);
1491
+ }
1492
+ get justifyContentDesktop() {
1493
+ return this.getAttribute("justify-content--desktop");
1494
+ }
1495
+ set justifyContentDesktop(e) {
1496
+ C(this, "justify-content--desktop", e);
1497
+ }
1498
+ get alignItems() {
1499
+ return this.getAttribute("align-items");
1500
+ }
1501
+ set alignItems(e) {
1502
+ C(this, "align-items", e);
1503
+ }
1504
+ get alignItemsMobile() {
1505
+ return this.getAttribute("align-items--mobile");
1506
+ }
1507
+ set alignItemsMobile(e) {
1508
+ C(this, "align-items--mobile", e);
1509
+ }
1510
+ get alignItemsTablet() {
1511
+ return this.getAttribute("align-items--tablet");
1512
+ }
1513
+ set alignItemsTablet(e) {
1514
+ C(this, "align-items--tablet", e);
1515
+ }
1516
+ get alignItemsLaptop() {
1517
+ return this.getAttribute("align-items--laptop");
1518
+ }
1519
+ set alignItemsLaptop(e) {
1520
+ C(this, "align-items--laptop", e);
1521
+ }
1522
+ get alignItemsDesktop() {
1523
+ return this.getAttribute("align-items--desktop");
1524
+ }
1525
+ set alignItemsDesktop(e) {
1526
+ C(this, "align-items--desktop", e);
1527
+ }
1528
+ get wrap() {
1529
+ return this.getAttribute("wrap");
1530
+ }
1531
+ set wrap(e) {
1532
+ C(this, "wrap", e);
1533
+ }
1534
+ get wrapMobile() {
1535
+ return this.getAttribute("wrap--mobile");
1536
+ }
1537
+ set wrapMobile(e) {
1538
+ C(this, "wrap--mobile", e);
1539
+ }
1540
+ get wrapTablet() {
1541
+ return this.getAttribute("wrap--tablet");
1542
+ }
1543
+ set wrapTablet(e) {
1544
+ C(this, "wrap--tablet", e);
1545
+ }
1546
+ get wrapLaptop() {
1547
+ return this.getAttribute("wrap--laptop");
1548
+ }
1549
+ set wrapLaptop(e) {
1550
+ C(this, "wrap--laptop", e);
1551
+ }
1552
+ get wrapDesktop() {
1553
+ return this.getAttribute("wrap--desktop");
1554
+ }
1555
+ set wrapDesktop(e) {
1556
+ C(this, "wrap--desktop", e);
1557
+ }
1558
+ get overflowX() {
1559
+ return this.getAttribute("overflow-x");
1560
+ }
1561
+ set overflowX(e) {
1562
+ C(this, "overflow-x", e);
1563
+ }
1564
+ get overflowXMobile() {
1565
+ return this.getAttribute("overflow-x--mobile");
1566
+ }
1567
+ set overflowXMobile(e) {
1568
+ C(this, "overflow-x--mobile", e);
1569
+ }
1570
+ get overflowXTablet() {
1571
+ return this.getAttribute("overflow-x--tablet");
1572
+ }
1573
+ set overflowXTablet(e) {
1574
+ C(this, "overflow-x--tablet", e);
1575
+ }
1576
+ get overflowXLaptop() {
1577
+ return this.getAttribute("overflow-x--laptop");
1578
+ }
1579
+ set overflowXLaptop(e) {
1580
+ C(this, "overflow-x--laptop", e);
1581
+ }
1582
+ get overflowXDesktop() {
1583
+ return this.getAttribute("overflow-x--desktop");
1584
+ }
1585
+ set overflowXDesktop(e) {
1586
+ C(this, "overflow-x--desktop", e);
1587
+ }
1588
+ get $el() {
1589
+ return this.shadowRoot.querySelector(".flex-container");
1590
+ }
1591
+ };
1592
+ customElements.get("px-stack") || customElements.define("px-stack", B);
1593
+ var oe = class extends B {
1594
+ constructor() {
1595
+ super();
1596
+ }
1597
+ connectedCallback() {
1598
+ super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
1599
+ }
1600
+ };
1601
+ customElements.get("px-vstack") || customElements.define("px-vstack", oe);
1602
+ var V = class extends B {
1603
+ constructor() {
1604
+ super();
1605
+ }
1606
+ connectedCallback() {
1607
+ super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
1608
+ }
1609
+ };
1610
+ customElements.get("px-hstack") || customElements.define("px-hstack", V);
1611
+ //#endregion
1612
+ //#region ../Layout/src/Spacer.ts
1613
+ var H = class extends HTMLElement {
1614
+ constructor() {
1615
+ super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
1616
+ }
1617
+ static get observedAttributes() {
1618
+ return ["grow", "nogap"];
1619
+ }
1620
+ attributeChangedCallback(e, t, n) {
1621
+ e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
1622
+ }
1623
+ connectedCallback() {
1624
+ this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
1625
+ this.handleSizeChange();
1626
+ }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
1627
+ }
1628
+ disconnectedCallback() {
1629
+ this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
1630
+ }
1631
+ get grow() {
1632
+ return this.getAttribute("grow");
1633
+ }
1634
+ set grow(e) {
1635
+ this.setAttribute("grow", `${e}`);
1636
+ }
1637
+ scheduleRecheck() {
1638
+ this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
1639
+ this.recheckHandle = void 0, this.recalculateVisibility();
1640
+ });
1641
+ }
1642
+ recalculateVisibility() {
1643
+ this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
1644
+ }
1645
+ handleSizeChange() {
1646
+ let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
1647
+ this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
1648
+ }
1649
+ updateParticipation() {
1650
+ this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
1651
+ }
1652
+ get nogap() {
1653
+ return this.hasAttribute("nogap");
1654
+ }
1655
+ set nogap(e) {
1656
+ e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
1657
+ }
1658
+ };
1659
+ customElements.get("px-spacer") || customElements.define("px-spacer", H);
1660
+ //#endregion
1661
+ //#region ../Layout/src/Page.css?inline
1662
+ var U = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", W = new CSSStyleSheet();
1663
+ W.replaceSync(U);
1664
+ var G = class extends l {
1665
+ constructor() {
1666
+ super(W), this.template = () => `
1667
+ <px-container border-radius="none" padding="none">
1668
+ <px-vstack>
1669
+ <px-container id="header-container" border-radius="none">
1670
+ <px-hstack>
1671
+ <px-spacer></px-spacer>
1672
+ <px-vstack
1673
+ id="header-vstack-container"
1674
+ gap="s"
1675
+ grow="${this.grow}"
1676
+ basis="${this.basis}"
1677
+ >
1678
+ <slot name="header-container"></slot>
1679
+ </px-vstack>
1680
+ <px-spacer></px-spacer>
1681
+ </px-hstack>
1682
+ </px-container>
1683
+ <px-container
1684
+ id="image-container"
1685
+ border-radius="none"
1686
+ padding="none"
1687
+ padding-top="xl"
1688
+ id="image-box"
1689
+ background-size="cover"
1690
+ background-position="top center"
1691
+ padding-bottom="xl"
1692
+ border-radius="none"
1693
+ bgimg="${this.backgroundImage}"
1694
+ >
1695
+ <px-hstack>
1696
+ <px-spacer></px-spacer>
1697
+ <px-vstack grow="${this.grow}" basis="${this.basis}">
1698
+ <slot name="image-container"></slot>
1699
+ </px-vstack>
1700
+ <px-spacer></px-spacer>
1701
+ </px-hstack>
1702
+ </px-container>
1703
+ <px-container
1704
+ id="body-container"
1705
+ id="main"
1706
+ background-color="${this.backgroundColor}"
1707
+ padding="none"
1708
+ padding-top="xl"
1709
+ padding-bottom="xl"
1710
+ >
1711
+ <px-hstack>
1712
+ <px-spacer></px-spacer>
1713
+ <px-vstack
1714
+ id="body-vstack-container"
1715
+ gap="l"
1716
+ grow="${this.grow}"
1717
+ basis="${this.basis}"
1718
+ >
1719
+ <slot name="body-container"></slot>
1720
+ </px-vstack>
1721
+ <px-spacer></px-spacer>
1722
+ </px-hstack>
1723
+ </px-container>
1724
+ <px-container
1725
+ id="contact-container"
1726
+ border-radius="none"
1727
+ id="main"
1728
+ background-color="surface-default"
1729
+ padding="none"
1730
+ padding-top="xl"
1731
+ padding-bottom="xl"
1732
+ >
1733
+ <px-hstack>
1734
+ <px-spacer></px-spacer>
1735
+ <px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
1736
+ <slot name="contact-container"></slot>
1737
+ </px-vstack>
1738
+ <px-spacer></px-spacer>
1739
+ </px-hstack>
1740
+ </px-container>
1741
+ <px-container
1742
+ id="footer-container"
1743
+ background-color="none"
1744
+ border-radius="none"
1745
+ style="background-color: rgb(108, 66, 156)"
1746
+ padding-top="xl"
1747
+ padding-bottom="xl"
1748
+ >
1749
+ <px-hstack>
1750
+ <px-spacer></px-spacer>
1751
+ <px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
1752
+ <slot name="footer-container"></slot>
1753
+ </px-vstack>
1754
+ <px-spacer></px-spacer>
1755
+ </px-hstack>
1756
+ </px-container>
1757
+ </px-vstack>
1758
+ </px-container>
1759
+ `, this.shadowRoot.innerHTML = this.template();
1760
+ }
1761
+ static get observedAttributes() {
1762
+ return [
1763
+ ...super.observedAttributes,
1764
+ "background-image",
1765
+ "gap",
1766
+ "background-color",
1767
+ "padding-vertical",
1768
+ "padding-horizontal"
1769
+ ];
1770
+ }
1771
+ get $wideImage() {
1772
+ return this.shadowRoot.querySelector("#image-box");
1773
+ }
1774
+ get $bodyVStackContainer() {
1775
+ return this.shadowRoot.querySelector("#header-vstack-container");
1776
+ }
1777
+ get $bodyContainer() {
1778
+ return this.shadowRoot.querySelector("#body-container");
1779
+ }
1780
+ get $contactContainer() {
1781
+ return this.shadowRoot.querySelector("#contact-container");
1782
+ }
1783
+ get $footerContainer() {
1784
+ return this.shadowRoot.querySelector("#footer-container");
1785
+ }
1786
+ get $headerContainer() {
1787
+ return this.shadowRoot.querySelector("#header-container");
1788
+ }
1789
+ get $imageContainer() {
1790
+ return this.shadowRoot.querySelector("#image-container");
1791
+ }
1792
+ get backgroundImage() {
1793
+ return this.getAttribute("background-image");
1794
+ }
1795
+ get $main() {
1796
+ return this.shadowRoot.querySelector("#main");
1797
+ }
1798
+ get backgroundColor() {
1799
+ return this.getAttribute("background-color") || "none";
1800
+ }
1801
+ get paddingVertical() {
1802
+ return this.getAttribute("padding-vertical");
1803
+ }
1804
+ get paddingHorizontal() {
1805
+ return this.getAttribute("padding-horizontal");
1806
+ }
1807
+ set paddingVertical(e) {
1808
+ this.setAttribute("padding-vertical", `${e}`);
1809
+ }
1810
+ set paddingHorizontal(e) {
1811
+ this.setAttribute("padding-horizontal", `${e}`);
1812
+ }
1813
+ get gap() {
1814
+ return this.getAttribute("gap");
1815
+ }
1816
+ connectedCallback() {
1817
+ this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
1818
+ }
1819
+ attributeChangedCallback(e, t, n) {
1820
+ if (t !== n) switch (e) {
1821
+ case "background-image":
1822
+ this.$imageContainer.setAttribute("background-image", n);
1823
+ break;
1824
+ case "gap":
1825
+ this.$bodyVStackContainer.setAttribute("gap", n);
1826
+ break;
1827
+ case "background-color":
1828
+ this.$bodyContainer.setAttribute("background-color", g.indexOf(n) > 0 ? n : "none");
1829
+ break;
1830
+ case "padding-vertical":
1831
+ this.handlePaddingVerticalChange(n);
1832
+ break;
1833
+ case "padding-horizontal":
1834
+ this.handlePaddingHorizontalChange(n);
1835
+ break;
1836
+ default: super.attributeChangedCallback(e, t, n);
1837
+ }
1838
+ }
1839
+ handlePaddingVerticalChange(e) {
1840
+ this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
1841
+ }
1842
+ handlePaddingHorizontalChange(e) {
1843
+ 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;
1844
+ }
1845
+ };
1846
+ customElements.get("px-page") === void 0 && customElements.define("px-page", G);
1847
+ //#endregion
1848
+ //#region ../Icon/common/src/IconSet.ts
1849
+ var K = class extends HTMLElement {
1850
+ constructor() {
1851
+ super();
1852
+ }
1853
+ static get observedAttributes() {
1854
+ return [
1855
+ "name",
1856
+ "src",
1857
+ "type",
1858
+ "format"
1859
+ ];
1860
+ }
1861
+ connectedCallback() {
1862
+ 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") {
1863
+ let e = document.createElement("style");
1864
+ e.setAttribute("type", "text/css");
1865
+ let t = this.getAttribute("name");
1866
+ t && e.setAttribute("data-name", t), e.textContent = `
1867
+ @font-face {
1868
+ font-family: 'lavender';
1869
+ src:
1870
+ url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
1871
+ font-weight: normal;
1872
+ font-style: normal;
1873
+ font-display: block;
1874
+ }
1875
+ `, document.head.appendChild(e);
1876
+ }
1877
+ }
1878
+ disconnectedCallback() {
1879
+ let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
1880
+ e && e.remove();
1881
+ }
1882
+ };
1883
+ customElements.get("px-icon-set") || customElements.define("px-icon-set", K);
1884
+ var q = [
1885
+ "Inherit",
1886
+ "Brand",
1887
+ "Accent",
1888
+ "Neutral",
1889
+ "Dimmed",
1890
+ "PurposeSuccess",
1891
+ "PurposeWarning",
1892
+ "PurposeError",
1893
+ "PurposeUnlimited",
1894
+ "PurposePromo",
1895
+ "StateHover",
1896
+ "StateActive",
1897
+ "StateDisabled"
1898
+ ].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)}", Y = new CSSStyleSheet();
1899
+ Y.replaceSync(J);
1900
+ var se = class extends l {
1901
+ #e = null;
1902
+ #t;
1903
+ #n = () => "<svg aria-hidden=\"true\">\n <use></use>\n </svg>";
1904
+ static get observedAttributes() {
1905
+ return [
1906
+ ...super.observedAttributes,
1907
+ "name",
1908
+ "size",
1909
+ "color",
1910
+ "aria-label",
1911
+ "inverted",
1912
+ "from",
1913
+ "disabled"
1914
+ ];
1915
+ }
1916
+ constructor(...e) {
1917
+ super(...e, Y), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
1918
+ }
1919
+ attributeChangedCallback(e, t, n) {
1920
+ if (t !== n) switch (e) {
1921
+ case "name":
1922
+ this.updateName(t, n);
1923
+ break;
1924
+ case "size":
1925
+ this.updateAttribute(e, t, n, re);
1926
+ break;
1927
+ case "color":
1928
+ this.updateAttribute(e, t, n, q);
1929
+ break;
1930
+ case "disabled":
1931
+ this.color = "state-disabled";
1932
+ break;
1933
+ case "aria-label":
1934
+ if (!this.#t) return;
1935
+ n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
1936
+ }
1937
+ }
1938
+ connectedCallback() {
1939
+ this.role = "img";
1940
+ let e = document.querySelectorAll("px-icon-set");
1941
+ e || console.log("<px-icon-set> component not found");
1942
+ for (let t of e) {
1943
+ if (!t.getAttribute("name") || !t.getAttribute("src")) {
1944
+ console.error("Icon name or src not found");
1945
+ continue;
1946
+ }
1947
+ t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
1948
+ }
1949
+ !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"));
1950
+ }
1951
+ updateAttribute(e, t, n, r) {
1952
+ 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) || c(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
1953
+ }
1954
+ updateName(e, t) {
1955
+ this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
1956
+ }
1957
+ get $el() {
1958
+ return this.shadowRoot.querySelector("svg");
1959
+ }
1960
+ get name() {
1961
+ return this.getAttribute("name");
1962
+ }
1963
+ set name(e) {
1964
+ C(this, "name", e);
1965
+ }
1966
+ get size() {
1967
+ return this.getAttribute("size");
1968
+ }
1969
+ set size(e) {
1970
+ C(this, "size", e);
1971
+ }
1972
+ get color() {
1973
+ return this.getAttribute("color");
1974
+ }
1975
+ set color(e) {
1976
+ C(this, "color", e);
1977
+ }
1978
+ get arialabel() {
1979
+ return this.getAttribute("aria-label");
1980
+ }
1981
+ set arialabel(e) {
1982
+ C(this, "aria-label", e);
1983
+ }
1984
+ get inverted() {
1985
+ return this.hasAttribute("inverted");
1986
+ }
1987
+ set inverted(e) {
1988
+ w(this, "inverted", e);
1989
+ }
1990
+ get from() {
1991
+ return this.getAttribute("from");
1992
+ }
1993
+ set from(e) {
1994
+ C(this, "from", e);
1995
+ }
1996
+ get disabled() {
1997
+ return this.hasAttribute("disabled");
1998
+ }
1999
+ set disabled(e) {
2000
+ w(this, "disabled", e);
2001
+ }
2002
+ };
2003
+ customElements.get("px-icon") || customElements.define("px-icon", se);
2004
+ //#endregion
2005
+ //#region src/toaster.css?inline
2006
+ var ce = ":host{display:block}:host *{box-sizing:border-box}dialog{box-shadow:none;margin:auto var(--px-spacing-s-mobile) var(--px-spacing-s-mobile) var(--px-spacing-s-mobile);box-sizing:border-box;max-width:30rem;width:calc(100% - var(--px-spacing-s-mobile) * 2);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);background:0 0;border:0;border-radius:0;padding:0;animation:.3s ease-out forwards modalIn}dialog:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}dialog[open]{justify-content:center;display:flex}::slotted([slot=label]){font-size:var(--px-text-size-label-l-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-inverted);margin-top:3px}.toaster-message{flex-grow:1}slot[name=footer]{align-items:center;gap:var(--px-spacing-xs-mobile);display:flex}@media screen and (width>=32rem){dialog{margin:auto auto var(--px-spacing-s-mobile) auto;width:480px}}@media screen and (width>=48rem){dialog{margin:auto auto var(--px-spacing-s-tablet) auto}::slotted([slot=label]){font-size:var(--px-text-size-label-l-tablet);margin-top:0}slot[name=footer]{gap:var(--px-spacing-s-tablet)}}@media screen and (width>=64.0625rem){dialog{margin:auto auto var(--px-spacing-s-laptop) auto}::slotted([slot=label]){font-size:var(--px-text-size-label-l-laptop)}slot[name=footer]{gap:var(--px-spacing-s-laptop)}}@media screen and (width>=90.0625rem){dialog{margin:auto auto var(--px-spacing-s-desktop) auto}::slotted([slot=label]){font-size:var(--px-text-size-label-l-desktop)}slot[name=footer]{gap:var(--px-spacing-s-desktop)}}:host([inverted]) dialog{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) ::slotted([slot=label]){color:var(--px-color-text-neutral-default)}", X = new CSSStyleSheet();
2007
+ X.replaceSync(ce);
2008
+ var Z = [
2009
+ "",
2010
+ "info",
2011
+ "success",
2012
+ "error",
2013
+ "warning"
2014
+ ], le = "px.lavender.toaster.hide", Q = 0, $ = class extends HTMLElement {
2015
+ constructor() {
2016
+ super(), this.popoverButtonsCleanups = [], this.onHideClick = () => this.hide(), this.onShowClick = () => this.show(), this.autoHideTimeoutId = null, this.timeoutStartedAt = null, this.remainingDuration = null, this.isVisible = !1, this.isHovered = !1, this.isFocused = !1, this.onPointerEnter = () => {
2017
+ this.isHovered = !0, this.pauseAutoHideTimeout();
2018
+ }, this.onPointerLeave = () => {
2019
+ this.isHovered = !1, this.resumeAutoHideTimeout();
2020
+ }, this.onFocusIn = (e) => {
2021
+ e.target !== this.$dialog && (this.isFocused = !0, this.pauseAutoHideTimeout());
2022
+ }, this.onFocusOut = (e) => {
2023
+ let t = e.relatedTarget;
2024
+ this.isFocused = !!t && t !== this.$dialog && (this.contains(t) || this.$dialog?.contains(t) === !0), this.isFocused || this.resumeAutoHideTimeout();
2025
+ }, this.template = "<dialog popover=\"manual\">\n <px-container padding=\"s\" background-color=\"surface-dark\">\n <px-vstack gap=\"s\" >\n <px-hstack gap=\"s\" align-items=\"flex-start\" class=\"toaster-content\">\n <slot name=\"visual\"></slot>\n <div class=\"toaster-message\" role=\"status\" aria-atomic=\"true\">\n <slot name=\"label\"></slot>\n </div>\n <slot name=\"action\"></slot>\n </px-hstack>\n <slot name=\"footer\"></slot>\n </px-vstack>\n </px-container>\n </dialog>";
2026
+ let e = this.attachShadow({ mode: "open" });
2027
+ e && (e.innerHTML = this.template, e.adoptedStyleSheets = [X]);
2028
+ }
2029
+ connectedCallback() {
2030
+ this.addEventListenersToHideButtons(), this.$dialog?.addEventListener("pointerenter", this.onPointerEnter), this.$dialog?.addEventListener("pointerleave", this.onPointerLeave), this.$dialog?.addEventListener("focusin", this.onFocusIn), this.$dialog?.addEventListener("focusout", this.onFocusOut), this.hasAttribute("open") && this.show();
2031
+ }
2032
+ static get observedAttributes() {
2033
+ return [
2034
+ "id",
2035
+ "open",
2036
+ "status",
2037
+ "duration",
2038
+ "inverted"
2039
+ ];
2040
+ }
2041
+ attributeChangedCallback(e, t, n) {
2042
+ if (t !== n) switch (e) {
2043
+ case "id":
2044
+ this.addEventListenersToHideButtons();
2045
+ break;
2046
+ case "open":
2047
+ this.isConnected && this.handleOpenChange();
2048
+ break;
2049
+ case "duration":
2050
+ this.remainingDuration = this.duration, this.startAutoHideTimeout();
2051
+ break;
2052
+ case "status":
2053
+ this.handleStatusChange(n, Z);
2054
+ break;
2055
+ case "inverted": this.handleInvertedChange();
2056
+ }
2057
+ }
2058
+ disconnectedCallback() {
2059
+ this.removePopoverButtonListeners(), this.clearAutoHideTimeout(), this.isVisible = !1, this.$dialog?.removeEventListener("pointerenter", this.onPointerEnter), this.$dialog?.removeEventListener("pointerleave", this.onPointerLeave), this.$dialog?.removeEventListener("focusin", this.onFocusIn), this.$dialog?.removeEventListener("focusout", this.onFocusOut);
2060
+ }
2061
+ handleOpenChange() {
2062
+ this.hasAttribute("open") ? this.show() : this.hide();
2063
+ }
2064
+ show() {
2065
+ this.$dialog?.showPopover(), this.isVisible = !0, this.remainingDuration = this.duration, this.startAutoHideTimeout();
2066
+ }
2067
+ hide() {
2068
+ this.isVisible = !1, this.isHovered = !1, this.isFocused = !1, this.clearAutoHideTimeout(), this.remainingDuration = null, this.$dialog?.hidePopover(), this.dispatchEvent(new CustomEvent(le, {
2069
+ bubbles: !0,
2070
+ composed: !0
2071
+ }));
2072
+ }
2073
+ startAutoHideTimeout() {
2074
+ this.clearAutoHideTimeout(), !(!this.isVisible || this.isHovered || this.isFocused || this.remainingDuration === null || this.remainingDuration <= 0) && (this.timeoutStartedAt = Date.now(), this.autoHideTimeoutId = setTimeout(() => {
2075
+ this.remainingDuration = 0, this.hide();
2076
+ }, this.remainingDuration));
2077
+ }
2078
+ pauseAutoHideTimeout() {
2079
+ this.timeoutStartedAt !== null && this.remainingDuration !== null && (this.remainingDuration = Math.max(0, this.remainingDuration - (Date.now() - this.timeoutStartedAt))), this.clearAutoHideTimeout();
2080
+ }
2081
+ resumeAutoHideTimeout() {
2082
+ !this.isHovered && !this.isFocused && this.startAutoHideTimeout();
2083
+ }
2084
+ clearAutoHideTimeout() {
2085
+ this.autoHideTimeoutId !== null && (clearTimeout(this.autoHideTimeoutId), this.autoHideTimeoutId = null), this.timeoutStartedAt = null;
2086
+ }
2087
+ showPopover() {
2088
+ this.show();
2089
+ }
2090
+ hidePopover() {
2091
+ this.hide();
2092
+ }
2093
+ handleInvertedChange() {
2094
+ this.inverted ? this.$pxContainer?.setAttribute("background-color", "surface-light") : this.$pxContainer?.setAttribute("background-color", "surface-dark");
2095
+ }
2096
+ addEventListenersToHideButtons() {
2097
+ this.removePopoverButtonListeners(), this.id && document.querySelectorAll(`[popovertarget="${this.id}"]`).forEach((e) => {
2098
+ e.getAttribute("popovertargetaction") === "hide" ? (e.addEventListener("click", this.onHideClick), this.popoverButtonsCleanups.push(() => e.removeEventListener("click", this.onHideClick))) : e.getAttribute("popovertargetaction") === "show" && (e.addEventListener("click", this.onShowClick), this.popoverButtonsCleanups.push(() => e.removeEventListener("click", this.onShowClick)));
2099
+ });
2100
+ }
2101
+ removePopoverButtonListeners() {
2102
+ this.popoverButtonsCleanups.forEach((e) => e()), this.popoverButtonsCleanups = [];
2103
+ }
2104
+ handleStatusChange(e, t) {
2105
+ if (!S(t, e)) {
2106
+ c(`"${e}" is not a valid background-color value for ${this.tagName.toLowerCase()}.
2107
+ Allowed values are: "${t.join("\", \"")}".`);
2108
+ return;
2109
+ }
2110
+ this.$message?.setAttribute("role", this.getLiveRegionRole(e));
2111
+ let n = document.createElement("px-icon");
2112
+ n.setAttribute("name", this.getIcon(e)), n.setAttribute("from", "lavender"), n.setAttribute("color", `${e === "info" ? "brand" : `purpose-${e}`}`), n.setAttribute("size", "m"), this.inverted || n.setAttribute("inverted", ""), this.$slotVisual?.appendChild(n);
2113
+ }
2114
+ getLiveRegionRole(e) {
2115
+ return e === "error" || e === "warning" ? "alert" : "status";
2116
+ }
2117
+ getIcon(e) {
2118
+ return e === "success" ? "checkmark_fill" : e === "warning" ? "exclamation_mark_fill" : e === "error" ? "minus_fill" : "information_fill";
2119
+ }
2120
+ get $dialog() {
2121
+ return this.shadowRoot?.querySelector("dialog");
2122
+ }
2123
+ get $slotVisual() {
2124
+ return this.shadowRoot?.querySelector("slot[name=\"visual\"]");
2125
+ }
2126
+ get $message() {
2127
+ return this.shadowRoot?.querySelector(".toaster-message");
2128
+ }
2129
+ get $pxContainer() {
2130
+ return this.shadowRoot?.querySelector("px-container");
2131
+ }
2132
+ get status() {
2133
+ return this.getAttribute("status") || "";
2134
+ }
2135
+ set status(e) {
2136
+ C(this, "status", e);
2137
+ }
2138
+ get open() {
2139
+ return this.hasAttribute("open");
2140
+ }
2141
+ set open(e) {
2142
+ w(this, "open", e);
2143
+ }
2144
+ get duration() {
2145
+ if (!this.hasAttribute("duration")) return Q;
2146
+ let e = Number(this.getAttribute("duration"));
2147
+ return Number.isNaN(e) ? Q : e;
2148
+ }
2149
+ set duration(e) {
2150
+ C(this, "duration", e);
2151
+ }
2152
+ get inverted() {
2153
+ return this.hasAttribute("inverted");
2154
+ }
2155
+ set inverted(e) {
2156
+ w(this, "inverted", e);
2157
+ }
2158
+ };
2159
+ customElements.get("px-toaster") || customElements.define("px-toaster", $);
2160
+ //#endregion
2161
+ export { $ as Toaster, Z as toasterStatusValues };