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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/Container.d.ts +122 -122
  2. package/dist/index.es.js +620 -756
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,757 +1,621 @@
1
- import { cssTokenBreakpoints as a, paddingValues as d, gapValues as f, WithExtraAttributes as A, boxShadowValues as y, backgroundSizeValues as x, noBorderRadiusValues as $, borderRadiusValues as w, borderSideValues as L, borderValues as B, gradientValues as c, log as s, backgroundColorValues as h, borderColorValues as v, checkName as g } from "@proximus/lavender-common";
2
- const C = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', k = new CSSStyleSheet();
3
- k.replaceSync(C);
4
- const S = [
5
- "top-patch",
6
- "top-neighbor-patch",
7
- "top-ribbon",
8
- "top-neighbor-ribbon",
9
- "top-patch-and-neighbor-ribbon"
10
- ], T = [
11
- "1",
12
- "2",
13
- "3",
14
- "4",
15
- "5",
16
- "6",
17
- "7",
18
- "8",
19
- "9",
20
- "10",
21
- "11",
22
- "12"
23
- ], n = (m, t, r) => `:host([${m}${r ? `--${r}` : ""}='${t}']) .container`, b = "px-padding", R = [
24
- a(
25
- "padding",
26
- n,
27
- d,
28
- b,
29
- "--container-padding"
30
- ),
31
- a(
32
- "padding-inline",
33
- n,
34
- d,
35
- b
36
- ),
37
- a(
38
- "padding-block",
39
- n,
40
- d,
41
- b
42
- ),
43
- a(
44
- "padding-top",
45
- n,
46
- d,
47
- b
48
- ),
49
- a(
50
- "padding-right",
51
- n,
52
- d,
53
- b,
54
- "--container-padding-right"
55
- ),
56
- a(
57
- "padding-bottom",
58
- n,
59
- d,
60
- b
61
- ),
62
- a(
63
- "padding-left",
64
- n,
65
- d,
66
- b,
67
- "--container-padding-left"
68
- ),
69
- a(
70
- "gap",
71
- n,
72
- f,
73
- "px-spacing",
74
- void 0,
75
- "subgrid-gap"
76
- )
77
- ], u = class u extends A {
78
- constructor() {
79
- super(k, ...R), this.template = () => `<div class="container">
80
- <slot></slot>
81
- <slot name="anchor-left"></slot>
82
- <slot name="anchor-right"></slot>
83
- <slot name="anchor-full"></slot>
84
- </div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
85
- }
86
- static get observedAttributes() {
87
- return [
88
- ...super.observedAttributes,
89
- "border",
90
- "border-color",
91
- "border-side",
92
- "border-side--mobile",
93
- "border-side--tablet",
94
- "border-side--laptop",
95
- "border-radius",
96
- "no-border-radius",
97
- "no-border-radius--mobile",
98
- "no-border-radius--tablet",
99
- "no-border-radius--laptop",
100
- "background-color",
101
- "background-color--mobile",
102
- "background-color--tablet",
103
- "background-color--laptop",
104
- "background-gradient",
105
- "background-gradient--mobile",
106
- "background-gradient--tablet",
107
- "background-gradient--laptop",
108
- "background-image",
109
- "background-image--mobile",
110
- "background-image--tablet",
111
- "background-image--laptop",
112
- "background-size",
113
- "background-position",
114
- "box-shadow",
115
- "anchor-offset",
116
- "anchor-spacing",
117
- "inverted",
118
- "subgrid-rows"
119
- ];
120
- }
121
- connectedCallback() {
122
- this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
123
- this.$slotAnchor && this.addAnchorClass();
124
- }), this.contentObserver.observe(this, {
125
- childList: !0,
126
- subtree: !0,
127
- characterData: !0
128
- }), this._bgObserver = new IntersectionObserver((t) => {
129
- t.forEach((r) => {
130
- var e;
131
- r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
132
- });
133
- }), this._bgObserver.observe(this.$el);
134
- }
135
- disconnectedCallback() {
136
- var t, r;
137
- (t = this._bgObserver) == null || t.disconnect(), (r = this.contentObserver) == null || r.disconnect();
138
- }
139
- attributeChangedCallback(t, r, e) {
140
- if (r !== e)
141
- switch (t) {
142
- case "border":
143
- this.updateAttribute(t, r, e, B);
144
- break;
145
- case "border-color":
146
- this.updateBorderColor(t, e);
147
- break;
148
- case "border-side":
149
- case "border-side--mobile":
150
- case "border-side--tablet":
151
- case "border-side--laptop":
152
- this.updateAttribute(t, r, e, L);
153
- break;
154
- case "border-radius":
155
- this.updateAttribute(
156
- t,
157
- r,
158
- e,
159
- w
160
- );
161
- break;
162
- case "no-border-radius":
163
- case "no-border-radius--mobile":
164
- case "no-border-radius--tablet":
165
- case "no-border-radius--laptop":
166
- this.updateNoBorderRadius(
167
- t,
168
- r,
169
- e,
170
- $
171
- );
172
- break;
173
- case "background-color":
174
- case "background-color--mobile":
175
- case "background-color--tablet":
176
- case "background-color--laptop":
177
- this.updateBackgroundColor(t, e);
178
- break;
179
- case "background-gradient":
180
- case "background-gradient--mobile":
181
- case "background-gradient--tablet":
182
- case "background-gradient--laptop":
183
- this.updateGradient(t, e);
184
- break;
185
- case "background-size":
186
- this.updateAttribute(
187
- t,
188
- r,
189
- e,
190
- x
191
- );
192
- break;
193
- case "background-image":
194
- case "background-image--mobile":
195
- case "background-image--tablet":
196
- case "background-image--laptop":
197
- this._isInViewport && this.updateBackgroundImg(t, e);
198
- break;
199
- case "background-position":
200
- e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
201
- break;
202
- case "box-shadow":
203
- this.updateAttribute(t, r, e, y);
204
- break;
205
- case "anchor-offset":
206
- this.updateAnchorOffset(r, e, d);
207
- break;
208
- case "anchor-spacing":
209
- this.updateAnchorSpacing(r, e, S);
210
- break;
211
- case "subgrid-rows":
212
- this.updateSubgridRows(
213
- t,
214
- r,
215
- e,
216
- T
217
- );
218
- break;
219
- default:
220
- super.attributeChangedCallback(t, r, e);
221
- break;
222
- }
223
- }
224
- _loadBackgroundImages() {
225
- [
226
- "background-image",
227
- "background-image--mobile",
228
- "background-image--tablet",
229
- "background-image--laptop"
230
- ].forEach((r) => {
231
- const e = this.getAttribute(r);
232
- e && this.updateBackgroundImg(r, e);
233
- });
234
- }
235
- updateBackgroundImg(t, r) {
236
- this.$el.style.setProperty(`--${t}`, `url("${r}")`);
237
- }
238
- updateGradient(t, r) {
239
- if (this.checkName(c, r)) {
240
- const e = this.splitAttrNameFromBreakpoint(t);
241
- t = e.attrName;
242
- const i = e.breakpoint;
243
- this.$el.style.setProperty(
244
- `--${t}${i}`,
245
- `linear-gradient(var(--px-color-background-gradient-${r}))`
246
- );
247
- } else
248
- s(
249
- `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${c.join('", "')}".`
250
- );
251
- }
252
- updateBackgroundColor(t, r) {
253
- const e = r.startsWith("surface-");
254
- if (this.checkName(h, r)) {
255
- const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
256
- this.$el.style.setProperty(
257
- `--${i.attrName}${o}`,
258
- `var(--px-color-background-${r}${e ? "" : "-default"})`
259
- ), this.$el.style.setProperty(
260
- `--${i.attrName}-inverted${o}`,
261
- `var(--px-color-background-${r}${e ? "" : "-inverted"})`
262
- );
263
- } else
264
- s(
265
- `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${h.join('", "')}".`
266
- );
267
- }
268
- updateBorderColor(t, r) {
269
- this.checkName(v, r) ? (this.$el.style.setProperty(
270
- `--${t}`,
271
- `var(--px-color-border-${r}-default)`
272
- ), this.$el.style.setProperty(
273
- `--${t}-inverted`,
274
- `var(--px-color-border-${r}-inverted)`
275
- )) : s(
276
- `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${v.join('", "')}".`
277
- );
278
- }
279
- updateNoBorderRadius(t, r, e, i) {
280
- if (!this.checkName(i, e))
281
- s(
282
- `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
283
- );
284
- else {
285
- const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
286
- r !== null && r !== "" && this.$el.classList.toggle(
287
- `${o.attrName}-${r}${l}`
288
- ), e !== null && e !== "" && this.$el.classList.toggle(
289
- `${o.attrName}-${e}${l}`
290
- );
291
- }
292
- }
293
- updateAttribute(t, r, e, i) {
294
- if (!this.checkName(i, e))
295
- s(
296
- `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
297
- );
298
- else {
299
- const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
300
- r !== null && r !== "" && this.$el.classList.toggle(
301
- `${o.attrName}-${r}${l}`
302
- ), e !== null && e !== "" && this.$el.classList.toggle(
303
- `${o.attrName}-${e}${l}`
304
- );
305
- }
306
- }
307
- splitAttrNameFromBreakpoint(t) {
308
- let r = "";
309
- if (["--mobile", "--tablet", "--laptop"].some(
310
- (e) => t.includes(e)
311
- )) {
312
- const e = t.split("--");
313
- t = e[0], r = `--${e[1]}`;
314
- }
315
- return { attrName: t, breakpoint: r };
316
- }
317
- updateAnchorOffset(t, r, e) {
318
- if (!g(e, r)) {
319
- s(
320
- `"${r}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
321
- );
322
- return;
323
- }
324
- const i = (o) => {
325
- o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
326
- "--container-anchor-offset--mobile",
327
- `var(--px-padding-${o}-mobile)`
328
- ), this.$el.style.setProperty(
329
- "--container-anchor-offset--tablet",
330
- `var(--px-padding-${o}-tablet)`
331
- ), this.$el.style.setProperty(
332
- "--container-anchor-offset--laptop",
333
- `var(--px-padding-${o}-laptop)`
334
- ));
335
- };
336
- i(t), i(r);
337
- }
338
- addAnchorClass() {
339
- this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
340
- }
341
- updateAnchorSpacing(t, r, e) {
342
- if (!g(e, r)) {
343
- s(
344
- `"${r}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${e.join('", "')}".`
345
- );
346
- return;
347
- }
348
- const i = (o) => {
349
- o !== null && o !== "" && o !== "default" && (this.style.setProperty(
350
- "--container-anchor-spacing--mobile",
351
- `var(--px-spacing-${o}-mobile)`
352
- ), this.style.setProperty(
353
- "--container-anchor-spacing--tablet",
354
- `var(--px-spacing-${o}-tablet)`
355
- ), this.style.setProperty(
356
- "--container-anchor-spacing--laptop",
357
- `var(--px-spacing-${o}-laptop)`
358
- ), this.style.setProperty(
359
- "--container-anchor-spacing--desktop",
360
- `var(--px-spacing-${o}-desktop)`
361
- ));
362
- };
363
- i(t), i(r);
364
- }
365
- updateSubgridRows(t, r, e, i) {
366
- g(i, e) ? this.style.setProperty(`--${t}`, e) : s(
367
- `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
368
- );
369
- }
370
- get $el() {
371
- var t;
372
- return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
373
- }
374
- get $slotAnchor() {
375
- return this.querySelector('[slot^="anchor"]');
376
- }
377
- get padding() {
378
- return this.getAttribute("padding");
379
- }
380
- set padding(t) {
381
- this.setAttribute("padding", t);
382
- }
383
- get paddingBlock() {
384
- return this.getAttribute("padding-block");
385
- }
386
- set paddingBlock(t) {
387
- this.setAttribute("padding-block", t);
388
- }
389
- get paddingInline() {
390
- return this.getAttribute("padding-inline");
391
- }
392
- set paddingInline(t) {
393
- this.setAttribute("padding-inline", t);
394
- }
395
- get paddingTop() {
396
- return this.getAttribute("padding-top");
397
- }
398
- set paddingTop(t) {
399
- this.setAttribute("padding-top", t);
400
- }
401
- get paddingRight() {
402
- return this.getAttribute("padding-right");
403
- }
404
- set paddingRight(t) {
405
- this.setAttribute("padding-right", t);
406
- }
407
- get paddingBottom() {
408
- return this.getAttribute("padding-bottom");
409
- }
410
- set paddingBottom(t) {
411
- this.setAttribute("padding-bottom", t);
412
- }
413
- get paddingLeft() {
414
- return this.getAttribute("padding-left");
415
- }
416
- set paddingLeft(t) {
417
- this.setAttribute("padding-left", t);
418
- }
419
- get paddingMobile() {
420
- return this.getAttribute("padding--mobile");
421
- }
422
- set paddingMobile(t) {
423
- this.setAttribute("padding--mobile", t);
424
- }
425
- get paddingBlockMobile() {
426
- return this.getAttribute("padding-block--mobile");
427
- }
428
- set paddingBlockMobile(t) {
429
- this.setAttribute("padding-block--mobile", t);
430
- }
431
- get paddingInlineMobile() {
432
- return this.getAttribute("padding-inline--mobile");
433
- }
434
- set paddingInlineMobile(t) {
435
- this.setAttribute("padding-inline--mobile", t);
436
- }
437
- get paddingTopMobile() {
438
- return this.getAttribute("padding-top--mobile");
439
- }
440
- set paddingTopMobile(t) {
441
- this.setAttribute("padding-top--mobile", t);
442
- }
443
- get paddingRightMobile() {
444
- return this.getAttribute("padding-right--mobile");
445
- }
446
- set paddingRightMobile(t) {
447
- this.setAttribute("padding-right--mobile", t);
448
- }
449
- get paddingBottomMobile() {
450
- return this.getAttribute("padding-bottom--mobile");
451
- }
452
- set paddingBottomMobile(t) {
453
- this.setAttribute("padding-bottom--mobile", t);
454
- }
455
- get paddingLeftMobile() {
456
- return this.getAttribute("padding-left--mobile");
457
- }
458
- set paddingLeftMobile(t) {
459
- this.setAttribute("padding-left--mobile", t);
460
- }
461
- get paddingTablet() {
462
- return this.getAttribute("padding--tablet");
463
- }
464
- set paddingTablet(t) {
465
- this.setAttribute("padding--tablet", t);
466
- }
467
- get paddingBlockTablet() {
468
- return this.getAttribute("padding-block--tablet");
469
- }
470
- set paddingBlockTablet(t) {
471
- this.setAttribute("padding-block--tablet", t);
472
- }
473
- get paddingInlineTablet() {
474
- return this.getAttribute("padding-inline--tablet");
475
- }
476
- set paddingInlineTablet(t) {
477
- this.setAttribute("padding-inline--tablet", t);
478
- }
479
- get paddingTopTablet() {
480
- return this.getAttribute("padding-top--tablet");
481
- }
482
- set paddingTopTablet(t) {
483
- this.setAttribute("padding-top--tablet", t);
484
- }
485
- get paddingRightTablet() {
486
- return this.getAttribute("padding-right--tablet");
487
- }
488
- set paddingRightTablet(t) {
489
- this.setAttribute("padding-right--tablet", t);
490
- }
491
- get paddingBottomTablet() {
492
- return this.getAttribute("padding-bottom--tablet");
493
- }
494
- set paddingBottomTablet(t) {
495
- this.setAttribute("padding-bottom--tablet", t);
496
- }
497
- get paddingLeftTablet() {
498
- return this.getAttribute("padding-left--tablet");
499
- }
500
- set paddingLeftTablet(t) {
501
- this.setAttribute("padding-left--tablet", t);
502
- }
503
- get paddingLaptop() {
504
- return this.getAttribute("padding--laptop");
505
- }
506
- set paddingLaptop(t) {
507
- this.setAttribute("padding--laptop", t);
508
- }
509
- get paddingBlockLaptop() {
510
- return this.getAttribute("padding-block--laptop");
511
- }
512
- set paddingBlockLaptop(t) {
513
- this.setAttribute("padding-block--laptop", t);
514
- }
515
- get paddingInlineLaptop() {
516
- return this.getAttribute("padding-inline--laptop");
517
- }
518
- set paddingInlineLaptop(t) {
519
- this.setAttribute("padding-inline--laptop", t);
520
- }
521
- get paddingTopLaptop() {
522
- return this.getAttribute("padding-top--laptop");
523
- }
524
- set paddingTopLaptop(t) {
525
- this.setAttribute("padding-top--laptop", t);
526
- }
527
- get paddingRightLaptop() {
528
- return this.getAttribute("padding-right--laptop");
529
- }
530
- set paddingRightLaptop(t) {
531
- this.setAttribute("padding-right--laptop", t);
532
- }
533
- get paddingBottomLaptop() {
534
- return this.getAttribute("padding-bottom--laptop");
535
- }
536
- set paddingBottomLaptop(t) {
537
- this.setAttribute("padding-bottom--laptop", t);
538
- }
539
- get paddingLeftLaptop() {
540
- return this.getAttribute("padding-left--laptop");
541
- }
542
- set paddingLeftLaptop(t) {
543
- this.setAttribute("padding-left--laptop", t);
544
- }
545
- get border() {
546
- return this.getAttribute("border");
547
- }
548
- set border(t) {
549
- this.setAttribute("border", t);
550
- }
551
- get borderColor() {
552
- return this.getAttribute("border-color");
553
- }
554
- set borderColor(t) {
555
- this.setAttribute("border-color", t);
556
- }
557
- get borderSide() {
558
- return this.getAttribute("border-side");
559
- }
560
- set borderSide(t) {
561
- this.setAttribute("border-side", t);
562
- }
563
- get borderSideMobile() {
564
- return this.getAttribute("border-side--mobile");
565
- }
566
- set borderSideMobile(t) {
567
- this.setAttribute("border-side--mobile", t);
568
- }
569
- get borderSideTablet() {
570
- return this.getAttribute("border-side--tablet");
571
- }
572
- set borderSideTablet(t) {
573
- this.setAttribute("border-side--tablet", t);
574
- }
575
- get borderSideLaptop() {
576
- return this.getAttribute("border-side--laptop");
577
- }
578
- set borderSideLaptop(t) {
579
- this.setAttribute("border-side--laptop", t);
580
- }
581
- get borderRadius() {
582
- return this.getAttribute("border-radius");
583
- }
584
- set borderRadius(t) {
585
- this.setAttribute("border-radius", t);
586
- }
587
- get noBorderRadius() {
588
- return this.getAttribute("no-border-radius");
589
- }
590
- set noBorderRadius(t) {
591
- this.setAttribute("no-border-radius", t);
592
- }
593
- get noBorderRadiusMobile() {
594
- return this.getAttribute("no-border-radius--mobile");
595
- }
596
- set noBorderRadiusMobile(t) {
597
- this.setAttribute("no-border-radius--mobile", t);
598
- }
599
- get noBorderRadiusTablet() {
600
- return this.getAttribute("no-border-radius--tablet");
601
- }
602
- set noBorderRadiusTablet(t) {
603
- this.setAttribute("no-border-radius--tablet", t);
604
- }
605
- get noBorderRadiusLaptop() {
606
- return this.getAttribute("no-border-radius--laptop");
607
- }
608
- set noBorderRadiusLaptop(t) {
609
- this.setAttribute("no-border-radius--laptop", t);
610
- }
611
- get backgroundColor() {
612
- return this.getAttribute("background-color");
613
- }
614
- set backgroundColor(t) {
615
- this.setAttribute("background-color", t);
616
- }
617
- get backgroundColorMobile() {
618
- return this.getAttribute("background-color--mobile");
619
- }
620
- set backgroundColorMobile(t) {
621
- this.setAttribute("background-color--mobile", t);
622
- }
623
- get backgroundColorTablet() {
624
- return this.getAttribute("background-color--tablet");
625
- }
626
- set backgroundColorTablet(t) {
627
- this.setAttribute("background-color--tablet", t);
628
- }
629
- get backgroundColorLaptop() {
630
- return this.getAttribute("background-color--laptop");
631
- }
632
- set backgroundColorLaptop(t) {
633
- this.setAttribute("background-color--laptop", t);
634
- }
635
- get gradient() {
636
- return this.getAttribute("background-gradient");
637
- }
638
- set gradient(t) {
639
- this.setAttribute("background-gradient", t);
640
- }
641
- get gradientMobile() {
642
- return this.getAttribute("background-gradient--mobile");
643
- }
644
- set gradientMobile(t) {
645
- this.setAttribute("background-gradient--mobile", t);
646
- }
647
- get gradientTablet() {
648
- return this.getAttribute("background-gradient--tablet");
649
- }
650
- set gradientTablet(t) {
651
- this.setAttribute("background-gradient--tablet", t);
652
- }
653
- get gradientLaptop() {
654
- return this.getAttribute("background-gradient--laptop");
655
- }
656
- set gradientLaptop(t) {
657
- this.setAttribute("background-gradient--laptop", t);
658
- }
659
- get backgroundImage() {
660
- return this.getAttribute("background-image");
661
- }
662
- set backgroundImage(t) {
663
- this.setAttribute("background-image", t);
664
- }
665
- get backgroundImageMobile() {
666
- return this.getAttribute("background-image--mobile");
667
- }
668
- set backgroundImageMobile(t) {
669
- this.setAttribute("background-image--mobile", t);
670
- }
671
- get backgroundImageTablet() {
672
- return this.getAttribute("background-image--tablet");
673
- }
674
- set backgroundImageTablet(t) {
675
- this.setAttribute("background-image--tablet", t);
676
- }
677
- get backgroundImageLaptop() {
678
- return this.getAttribute("background-image--laptop");
679
- }
680
- set backgroundImageLaptop(t) {
681
- this.setAttribute("background-image--laptop", t);
682
- }
683
- get backgroundSize() {
684
- return this.getAttribute("background-size");
685
- }
686
- set backgroundSize(t) {
687
- this.setAttribute("background-size", t);
688
- }
689
- get backgroundPosition() {
690
- return this.getAttribute("background-position");
691
- }
692
- set backgroundPosition(t) {
693
- this.setAttribute("background-position", t);
694
- }
695
- get boxShadow() {
696
- return this.getAttribute("box-shadow");
697
- }
698
- set boxShadow(t) {
699
- this.setAttribute("box-shadow", t);
700
- }
701
- get anchorOffset() {
702
- return this.getAttribute("anchor-offset");
703
- }
704
- set anchorOffset(t) {
705
- this.setAttribute("anchor-offset", t);
706
- }
707
- get anchorSpacing() {
708
- return this.getAttribute("anchor-spacing");
709
- }
710
- set anchorSpacing(t) {
711
- this.setAttribute("anchor-spacing", t);
712
- }
713
- get inverted() {
714
- return this.hasAttribute("inverted");
715
- }
716
- set inverted(t) {
717
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
718
- }
719
- get subgridRows() {
720
- return this.getAttribute("subgrid-rows");
721
- }
722
- set subgridRows(t) {
723
- this.setAttribute("subgrid-rows", t);
724
- }
725
- get subgridGap() {
726
- return this.getAttribute("subgrid-gap");
727
- }
728
- set subgridGap(t) {
729
- this.setAttribute("subgrid-gap", t);
730
- }
731
- get subgridGapMobile() {
732
- return this.getAttribute("subgrid-gap--mobile");
733
- }
734
- set subgridGapMobile(t) {
735
- this.setAttribute("subgrid-gap--mobile", t);
736
- }
737
- get subgridGapTablet() {
738
- return this.getAttribute("subgrid-gap--tablet");
739
- }
740
- set subgridGapTablet(t) {
741
- this.setAttribute("subgrid-gap--tablet", t);
742
- }
743
- get subgridGapLaptop() {
744
- return this.getAttribute("subgrid-gap--laptop");
745
- }
746
- set subgridGapLaptop(t) {
747
- this.setAttribute("subgrid-gap--laptop", t);
748
- }
749
- };
750
- u.nativeName = "div";
751
- let p = u;
752
- customElements.get("px-container") || customElements.define("px-container", p);
753
- export {
754
- p as Container,
755
- S as anchorSpacingValues,
756
- T as subgridRowsValues
1
+ import { WithExtraAttributes as e, backgroundColorValues as t, backgroundSizeValues as n, booleanPropertyToAttributeSetter as r, borderColorValues as i, borderRadiusValues as a, borderSideValues as o, borderValues as s, boxShadowValues as c, checkName as l, cssTokenBreakpoints as u, gapValues as d, gradientValues as f, log as p, noBorderRadiusValues as m, paddingValues as h, propertyToAttributeSetter as g } from "@proximus/lavender-common";
2
+ //#region src/container.css?inline
3
+ var _ = ":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)}}", v = new CSSStyleSheet();
4
+ v.replaceSync(_);
5
+ var y = [
6
+ "top-patch",
7
+ "top-neighbor-patch",
8
+ "top-ribbon",
9
+ "top-neighbor-ribbon",
10
+ "top-patch-and-neighbor-ribbon"
11
+ ], b = [
12
+ "1",
13
+ "2",
14
+ "3",
15
+ "4",
16
+ "5",
17
+ "6",
18
+ "7",
19
+ "8",
20
+ "9",
21
+ "10",
22
+ "11",
23
+ "12"
24
+ ], x = (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .container`, S = "px-padding", C = [
25
+ u("padding", x, h, S, "--container-padding"),
26
+ u("padding-inline", x, h, S),
27
+ u("padding-block", x, h, S),
28
+ u("padding-top", x, h, S),
29
+ u("padding-right", x, h, S, "--container-padding-right"),
30
+ u("padding-bottom", x, h, S),
31
+ u("padding-left", x, h, S, "--container-padding-left"),
32
+ u("gap", x, d, "px-spacing", void 0, "subgrid-gap")
33
+ ], w = class extends e {
34
+ static {
35
+ this.nativeName = "div";
36
+ }
37
+ constructor() {
38
+ super(v, ...C), 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();
39
+ }
40
+ static get observedAttributes() {
41
+ return [
42
+ ...super.observedAttributes,
43
+ "border",
44
+ "border-color",
45
+ "border-side",
46
+ "border-side--mobile",
47
+ "border-side--tablet",
48
+ "border-side--laptop",
49
+ "border-radius",
50
+ "no-border-radius",
51
+ "no-border-radius--mobile",
52
+ "no-border-radius--tablet",
53
+ "no-border-radius--laptop",
54
+ "background-color",
55
+ "background-color--mobile",
56
+ "background-color--tablet",
57
+ "background-color--laptop",
58
+ "background-gradient",
59
+ "background-gradient--mobile",
60
+ "background-gradient--tablet",
61
+ "background-gradient--laptop",
62
+ "background-image",
63
+ "background-image--mobile",
64
+ "background-image--tablet",
65
+ "background-image--laptop",
66
+ "background-size",
67
+ "background-position",
68
+ "box-shadow",
69
+ "anchor-offset",
70
+ "anchor-spacing",
71
+ "inverted",
72
+ "subgrid-rows"
73
+ ];
74
+ }
75
+ connectedCallback() {
76
+ this.padding ||= "m", this.backgroundColor ||= "surface-light", this.borderColor ||= "main", this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
77
+ this.$slotAnchor && this.addAnchorClass();
78
+ }), this.contentObserver.observe(this, {
79
+ childList: !0,
80
+ subtree: !0,
81
+ characterData: !0
82
+ }), this._bgObserver = new IntersectionObserver((e) => {
83
+ e.forEach((e) => {
84
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), this._bgObserver?.disconnect());
85
+ });
86
+ }), this._bgObserver.observe(this.$el);
87
+ }
88
+ disconnectedCallback() {
89
+ this._bgObserver?.disconnect(), this.contentObserver?.disconnect();
90
+ }
91
+ attributeChangedCallback(e, t, r) {
92
+ if (t !== r) switch (e) {
93
+ case "border":
94
+ this.updateAttribute(e, t, r, s);
95
+ break;
96
+ case "border-color":
97
+ this.updateBorderColor(e, r);
98
+ break;
99
+ case "border-side":
100
+ case "border-side--mobile":
101
+ case "border-side--tablet":
102
+ case "border-side--laptop":
103
+ this.updateAttribute(e, t, r, o);
104
+ break;
105
+ case "border-radius":
106
+ this.updateAttribute(e, t, r, a);
107
+ break;
108
+ case "no-border-radius":
109
+ case "no-border-radius--mobile":
110
+ case "no-border-radius--tablet":
111
+ case "no-border-radius--laptop":
112
+ this.updateNoBorderRadius(e, t, r, m);
113
+ break;
114
+ case "background-color":
115
+ case "background-color--mobile":
116
+ case "background-color--tablet":
117
+ case "background-color--laptop":
118
+ this.updateBackgroundColor(e, r);
119
+ break;
120
+ case "background-gradient":
121
+ case "background-gradient--mobile":
122
+ case "background-gradient--tablet":
123
+ case "background-gradient--laptop":
124
+ this.updateGradient(e, r);
125
+ break;
126
+ case "background-size":
127
+ this.updateAttribute(e, t, r, n);
128
+ break;
129
+ case "background-image":
130
+ case "background-image--mobile":
131
+ case "background-image--tablet":
132
+ case "background-image--laptop":
133
+ this._isInViewport && this.updateBackgroundImg(e, r);
134
+ break;
135
+ case "background-position":
136
+ r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
137
+ break;
138
+ case "box-shadow":
139
+ this.updateAttribute(e, t, r, c);
140
+ break;
141
+ case "anchor-offset":
142
+ this.updateAnchorOffset(t, r, h);
143
+ break;
144
+ case "anchor-spacing":
145
+ this.updateAnchorSpacing(t, r, y);
146
+ break;
147
+ case "subgrid-rows":
148
+ this.updateSubgridRows(e, t, r, b);
149
+ break;
150
+ default: super.attributeChangedCallback(e, t, r);
151
+ }
152
+ }
153
+ _loadBackgroundImages() {
154
+ [
155
+ "background-image",
156
+ "background-image--mobile",
157
+ "background-image--tablet",
158
+ "background-image--laptop"
159
+ ].forEach((e) => {
160
+ let t = this.getAttribute(e);
161
+ t && this.updateBackgroundImg(e, t);
162
+ });
163
+ }
164
+ updateBackgroundImg(e, t) {
165
+ this.$el.style.setProperty(`--${e}`, `url("${t}")`);
166
+ }
167
+ updateGradient(e, t) {
168
+ if (this.checkName(f, t)) {
169
+ let n = this.splitAttrNameFromBreakpoint(e);
170
+ e = n.attrName;
171
+ let r = n.breakpoint;
172
+ this.$el.style.setProperty(`--${e}${r}`, `linear-gradient(var(--px-color-background-gradient-${t}))`);
173
+ } else p(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${f.join("\", \"")}".`);
174
+ }
175
+ updateBackgroundColor(e, n) {
176
+ let r = n.startsWith("surface-");
177
+ if (this.checkName(t, n)) {
178
+ let t = this.splitAttrNameFromBreakpoint(e), i = t.breakpoint;
179
+ this.$el.style.setProperty(`--${t.attrName}${i}`, `var(--px-color-background-${n}${r ? "" : "-default"})`), this.$el.style.setProperty(`--${t.attrName}-inverted${i}`, `var(--px-color-background-${n}${r ? "" : "-inverted"})`);
180
+ } else p(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${t.join("\", \"")}".`);
181
+ }
182
+ updateBorderColor(e, t) {
183
+ this.checkName(i, t) ? (this.$el.style.setProperty(`--${e}`, `var(--px-color-border-${t}-default)`), this.$el.style.setProperty(`--${e}-inverted`, `var(--px-color-border-${t}-inverted)`)) : p(`"${t}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
184
+ }
185
+ updateNoBorderRadius(e, t, n, r) {
186
+ if (!this.checkName(r, n)) p(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
187
+ else {
188
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
189
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
190
+ }
191
+ }
192
+ updateAttribute(e, t, n, r) {
193
+ if (!this.checkName(r, n)) p(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
194
+ else {
195
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
196
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
197
+ }
198
+ }
199
+ splitAttrNameFromBreakpoint(e) {
200
+ let t = "";
201
+ if ([
202
+ "--mobile",
203
+ "--tablet",
204
+ "--laptop"
205
+ ].some((t) => e.includes(t))) {
206
+ let n = e.split("--");
207
+ e = n[0], t = `--${n[1]}`;
208
+ }
209
+ return {
210
+ attrName: e,
211
+ breakpoint: t
212
+ };
213
+ }
214
+ updateAnchorOffset(e, t, n) {
215
+ if (!l(n, t)) {
216
+ p(`"${t}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
217
+ return;
218
+ }
219
+ let r = (e) => {
220
+ 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)`));
221
+ };
222
+ r(e), r(t);
223
+ }
224
+ addAnchorClass() {
225
+ this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
226
+ }
227
+ updateAnchorSpacing(e, t, n) {
228
+ if (!l(n, t)) {
229
+ p(`"${t}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
230
+ return;
231
+ }
232
+ let r = (e) => {
233
+ 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)`));
234
+ };
235
+ r(e), r(t);
236
+ }
237
+ updateSubgridRows(e, t, n, r) {
238
+ l(r, n) ? this.style.setProperty(`--${e}`, n) : p(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
239
+ }
240
+ get $el() {
241
+ return this?.shadowRoot?.querySelector(".container");
242
+ }
243
+ get $slotAnchor() {
244
+ return this.querySelector("[slot^=\"anchor\"]");
245
+ }
246
+ get padding() {
247
+ return this.getAttribute("padding");
248
+ }
249
+ set padding(e) {
250
+ g(this, "padding", e);
251
+ }
252
+ get paddingBlock() {
253
+ return this.getAttribute("padding-block");
254
+ }
255
+ set paddingBlock(e) {
256
+ g(this, "padding-block", e);
257
+ }
258
+ get paddingInline() {
259
+ return this.getAttribute("padding-inline");
260
+ }
261
+ set paddingInline(e) {
262
+ g(this, "padding-inline", e);
263
+ }
264
+ get paddingTop() {
265
+ return this.getAttribute("padding-top");
266
+ }
267
+ set paddingTop(e) {
268
+ g(this, "padding-top", e);
269
+ }
270
+ get paddingRight() {
271
+ return this.getAttribute("padding-right");
272
+ }
273
+ set paddingRight(e) {
274
+ g(this, "padding-right", e);
275
+ }
276
+ get paddingBottom() {
277
+ return this.getAttribute("padding-bottom");
278
+ }
279
+ set paddingBottom(e) {
280
+ g(this, "padding-bottom", e);
281
+ }
282
+ get paddingLeft() {
283
+ return this.getAttribute("padding-left");
284
+ }
285
+ set paddingLeft(e) {
286
+ g(this, "padding-left", e);
287
+ }
288
+ get paddingMobile() {
289
+ return this.getAttribute("padding--mobile");
290
+ }
291
+ set paddingMobile(e) {
292
+ g(this, "padding--mobile", e);
293
+ }
294
+ get paddingBlockMobile() {
295
+ return this.getAttribute("padding-block--mobile");
296
+ }
297
+ set paddingBlockMobile(e) {
298
+ g(this, "padding-block--mobile", e);
299
+ }
300
+ get paddingInlineMobile() {
301
+ return this.getAttribute("padding-inline--mobile");
302
+ }
303
+ set paddingInlineMobile(e) {
304
+ g(this, "padding-inline--mobile", e);
305
+ }
306
+ get paddingTopMobile() {
307
+ return this.getAttribute("padding-top--mobile");
308
+ }
309
+ set paddingTopMobile(e) {
310
+ g(this, "padding-top--mobile", e);
311
+ }
312
+ get paddingRightMobile() {
313
+ return this.getAttribute("padding-right--mobile");
314
+ }
315
+ set paddingRightMobile(e) {
316
+ g(this, "padding-right--mobile", e);
317
+ }
318
+ get paddingBottomMobile() {
319
+ return this.getAttribute("padding-bottom--mobile");
320
+ }
321
+ set paddingBottomMobile(e) {
322
+ g(this, "padding-bottom--mobile", e);
323
+ }
324
+ get paddingLeftMobile() {
325
+ return this.getAttribute("padding-left--mobile");
326
+ }
327
+ set paddingLeftMobile(e) {
328
+ g(this, "padding-left--mobile", e);
329
+ }
330
+ get paddingTablet() {
331
+ return this.getAttribute("padding--tablet");
332
+ }
333
+ set paddingTablet(e) {
334
+ g(this, "padding--tablet", e);
335
+ }
336
+ get paddingBlockTablet() {
337
+ return this.getAttribute("padding-block--tablet");
338
+ }
339
+ set paddingBlockTablet(e) {
340
+ g(this, "padding-block--tablet", e);
341
+ }
342
+ get paddingInlineTablet() {
343
+ return this.getAttribute("padding-inline--tablet");
344
+ }
345
+ set paddingInlineTablet(e) {
346
+ g(this, "padding-inline--tablet", e);
347
+ }
348
+ get paddingTopTablet() {
349
+ return this.getAttribute("padding-top--tablet");
350
+ }
351
+ set paddingTopTablet(e) {
352
+ g(this, "padding-top--tablet", e);
353
+ }
354
+ get paddingRightTablet() {
355
+ return this.getAttribute("padding-right--tablet");
356
+ }
357
+ set paddingRightTablet(e) {
358
+ g(this, "padding-right--tablet", e);
359
+ }
360
+ get paddingBottomTablet() {
361
+ return this.getAttribute("padding-bottom--tablet");
362
+ }
363
+ set paddingBottomTablet(e) {
364
+ g(this, "padding-bottom--tablet", e);
365
+ }
366
+ get paddingLeftTablet() {
367
+ return this.getAttribute("padding-left--tablet");
368
+ }
369
+ set paddingLeftTablet(e) {
370
+ g(this, "padding-left--tablet", e);
371
+ }
372
+ get paddingLaptop() {
373
+ return this.getAttribute("padding--laptop");
374
+ }
375
+ set paddingLaptop(e) {
376
+ g(this, "padding--laptop", e);
377
+ }
378
+ get paddingBlockLaptop() {
379
+ return this.getAttribute("padding-block--laptop");
380
+ }
381
+ set paddingBlockLaptop(e) {
382
+ g(this, "padding-block--laptop", e);
383
+ }
384
+ get paddingInlineLaptop() {
385
+ return this.getAttribute("padding-inline--laptop");
386
+ }
387
+ set paddingInlineLaptop(e) {
388
+ g(this, "padding-inline--laptop", e);
389
+ }
390
+ get paddingTopLaptop() {
391
+ return this.getAttribute("padding-top--laptop");
392
+ }
393
+ set paddingTopLaptop(e) {
394
+ g(this, "padding-top--laptop", e);
395
+ }
396
+ get paddingRightLaptop() {
397
+ return this.getAttribute("padding-right--laptop");
398
+ }
399
+ set paddingRightLaptop(e) {
400
+ g(this, "padding-right--laptop", e);
401
+ }
402
+ get paddingBottomLaptop() {
403
+ return this.getAttribute("padding-bottom--laptop");
404
+ }
405
+ set paddingBottomLaptop(e) {
406
+ g(this, "padding-bottom--laptop", e);
407
+ }
408
+ get paddingLeftLaptop() {
409
+ return this.getAttribute("padding-left--laptop");
410
+ }
411
+ set paddingLeftLaptop(e) {
412
+ g(this, "padding-left--laptop", e);
413
+ }
414
+ get border() {
415
+ return this.getAttribute("border");
416
+ }
417
+ set border(e) {
418
+ g(this, "border", e);
419
+ }
420
+ get borderColor() {
421
+ return this.getAttribute("border-color");
422
+ }
423
+ set borderColor(e) {
424
+ g(this, "border-color", e);
425
+ }
426
+ get borderSide() {
427
+ return this.getAttribute("border-side");
428
+ }
429
+ set borderSide(e) {
430
+ g(this, "border-side", e);
431
+ }
432
+ get borderSideMobile() {
433
+ return this.getAttribute("border-side--mobile");
434
+ }
435
+ set borderSideMobile(e) {
436
+ g(this, "border-side--mobile", e);
437
+ }
438
+ get borderSideTablet() {
439
+ return this.getAttribute("border-side--tablet");
440
+ }
441
+ set borderSideTablet(e) {
442
+ g(this, "border-side--tablet", e);
443
+ }
444
+ get borderSideLaptop() {
445
+ return this.getAttribute("border-side--laptop");
446
+ }
447
+ set borderSideLaptop(e) {
448
+ g(this, "border-side--laptop", e);
449
+ }
450
+ get borderRadius() {
451
+ return this.getAttribute("border-radius");
452
+ }
453
+ set borderRadius(e) {
454
+ g(this, "border-radius", e);
455
+ }
456
+ get noBorderRadius() {
457
+ return this.getAttribute("no-border-radius");
458
+ }
459
+ set noBorderRadius(e) {
460
+ g(this, "no-border-radius", e);
461
+ }
462
+ get noBorderRadiusMobile() {
463
+ return this.getAttribute("no-border-radius--mobile");
464
+ }
465
+ set noBorderRadiusMobile(e) {
466
+ g(this, "no-border-radius--mobile", e);
467
+ }
468
+ get noBorderRadiusTablet() {
469
+ return this.getAttribute("no-border-radius--tablet");
470
+ }
471
+ set noBorderRadiusTablet(e) {
472
+ g(this, "no-border-radius--tablet", e);
473
+ }
474
+ get noBorderRadiusLaptop() {
475
+ return this.getAttribute("no-border-radius--laptop");
476
+ }
477
+ set noBorderRadiusLaptop(e) {
478
+ g(this, "no-border-radius--laptop", e);
479
+ }
480
+ get backgroundColor() {
481
+ return this.getAttribute("background-color");
482
+ }
483
+ set backgroundColor(e) {
484
+ g(this, "background-color", e);
485
+ }
486
+ get backgroundColorMobile() {
487
+ return this.getAttribute("background-color--mobile");
488
+ }
489
+ set backgroundColorMobile(e) {
490
+ g(this, "background-color--mobile", e);
491
+ }
492
+ get backgroundColorTablet() {
493
+ return this.getAttribute("background-color--tablet");
494
+ }
495
+ set backgroundColorTablet(e) {
496
+ g(this, "background-color--tablet", e);
497
+ }
498
+ get backgroundColorLaptop() {
499
+ return this.getAttribute("background-color--laptop");
500
+ }
501
+ set backgroundColorLaptop(e) {
502
+ g(this, "background-color--laptop", e);
503
+ }
504
+ get gradient() {
505
+ return this.getAttribute("background-gradient");
506
+ }
507
+ set gradient(e) {
508
+ g(this, "background-gradient", e);
509
+ }
510
+ get gradientMobile() {
511
+ return this.getAttribute("background-gradient--mobile");
512
+ }
513
+ set gradientMobile(e) {
514
+ g(this, "background-gradient--mobile", e);
515
+ }
516
+ get gradientTablet() {
517
+ return this.getAttribute("background-gradient--tablet");
518
+ }
519
+ set gradientTablet(e) {
520
+ g(this, "background-gradient--tablet", e);
521
+ }
522
+ get gradientLaptop() {
523
+ return this.getAttribute("background-gradient--laptop");
524
+ }
525
+ set gradientLaptop(e) {
526
+ g(this, "background-gradient--laptop", e);
527
+ }
528
+ get backgroundImage() {
529
+ return this.getAttribute("background-image");
530
+ }
531
+ set backgroundImage(e) {
532
+ g(this, "background-image", e);
533
+ }
534
+ get backgroundImageMobile() {
535
+ return this.getAttribute("background-image--mobile");
536
+ }
537
+ set backgroundImageMobile(e) {
538
+ g(this, "background-image--mobile", e);
539
+ }
540
+ get backgroundImageTablet() {
541
+ return this.getAttribute("background-image--tablet");
542
+ }
543
+ set backgroundImageTablet(e) {
544
+ g(this, "background-image--tablet", e);
545
+ }
546
+ get backgroundImageLaptop() {
547
+ return this.getAttribute("background-image--laptop");
548
+ }
549
+ set backgroundImageLaptop(e) {
550
+ g(this, "background-image--laptop", e);
551
+ }
552
+ get backgroundSize() {
553
+ return this.getAttribute("background-size");
554
+ }
555
+ set backgroundSize(e) {
556
+ g(this, "background-size", e);
557
+ }
558
+ get backgroundPosition() {
559
+ return this.getAttribute("background-position");
560
+ }
561
+ set backgroundPosition(e) {
562
+ g(this, "background-position", e);
563
+ }
564
+ get boxShadow() {
565
+ return this.getAttribute("box-shadow");
566
+ }
567
+ set boxShadow(e) {
568
+ g(this, "box-shadow", e);
569
+ }
570
+ get anchorOffset() {
571
+ return this.getAttribute("anchor-offset");
572
+ }
573
+ set anchorOffset(e) {
574
+ g(this, "anchor-offset", e);
575
+ }
576
+ get anchorSpacing() {
577
+ return this.getAttribute("anchor-spacing");
578
+ }
579
+ set anchorSpacing(e) {
580
+ g(this, "anchor-spacing", e);
581
+ }
582
+ get inverted() {
583
+ return this.hasAttribute("inverted");
584
+ }
585
+ set inverted(e) {
586
+ r(this, "inverted", e);
587
+ }
588
+ get subgridRows() {
589
+ return this.getAttribute("subgrid-rows");
590
+ }
591
+ set subgridRows(e) {
592
+ g(this, "subgrid-rows", e);
593
+ }
594
+ get subgridGap() {
595
+ return this.getAttribute("subgrid-gap");
596
+ }
597
+ set subgridGap(e) {
598
+ g(this, "subgrid-gap", e);
599
+ }
600
+ get subgridGapMobile() {
601
+ return this.getAttribute("subgrid-gap--mobile");
602
+ }
603
+ set subgridGapMobile(e) {
604
+ g(this, "subgrid-gap--mobile", e);
605
+ }
606
+ get subgridGapTablet() {
607
+ return this.getAttribute("subgrid-gap--tablet");
608
+ }
609
+ set subgridGapTablet(e) {
610
+ g(this, "subgrid-gap--tablet", e);
611
+ }
612
+ get subgridGapLaptop() {
613
+ return this.getAttribute("subgrid-gap--laptop");
614
+ }
615
+ set subgridGapLaptop(e) {
616
+ g(this, "subgrid-gap--laptop", e);
617
+ }
757
618
  };
619
+ customElements.get("px-container") || customElements.define("px-container", w);
620
+ //#endregion
621
+ export { w as Container, y as anchorSpacingValues, b as subgridRowsValues };