@proximus/lavender-layout 2.0.0-alpha.203 → 2.0.0-alpha.204
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Stack.d.ts +18 -6
- package/dist/index.es.js +76 -56
- package/package.json +1 -1
package/dist/Stack.d.ts
CHANGED
|
@@ -6,14 +6,24 @@ export declare const wrapValues: string[];
|
|
|
6
6
|
export declare const overflowValues: string[];
|
|
7
7
|
export declare class Stack extends WithExtraAttributes {
|
|
8
8
|
overflowXAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
|
-
template: string;
|
|
10
9
|
constructor();
|
|
10
|
+
/**
|
|
11
|
+
* Defaults (direction: row, gap: none, align-items: stretch,
|
|
12
|
+
* justify-content: flex-start, wrap: nowrap, overflow-x: visible) are
|
|
13
|
+
* provided by Stack.css; nothing is written to the DOM on connection.
|
|
14
|
+
* Kept for subclasses calling super.
|
|
15
|
+
*/
|
|
11
16
|
connectedCallback(): void;
|
|
12
17
|
static get observedAttributes(): string[];
|
|
13
18
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
14
19
|
updateOverflowX(name: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
15
|
-
updateFlexProperties(name: string,
|
|
20
|
+
updateFlexProperties(name: string, _oldValue: string | null, newValue: string | null, attrValue: string[]): void;
|
|
21
|
+
/**
|
|
22
|
+
* Writes the CSS custom properties for one flex property / breakpoint.
|
|
23
|
+
* A null/empty value removes them so the defaults from Stack.css apply.
|
|
24
|
+
*/
|
|
16
25
|
updateStyle(cssName: string, breakpoint: string, value: string | null, attrValue?: string[]): void;
|
|
26
|
+
private static readonly breakpoints;
|
|
17
27
|
get direction(): string | null;
|
|
18
28
|
set direction(value: string | null);
|
|
19
29
|
get directionMobile(): string | null;
|
|
@@ -77,10 +87,12 @@ export declare class Stack extends WithExtraAttributes {
|
|
|
77
87
|
get $el(): HTMLDivElement;
|
|
78
88
|
}
|
|
79
89
|
export declare class VStack extends Stack {
|
|
80
|
-
|
|
81
|
-
|
|
90
|
+
get direction(): string | null;
|
|
91
|
+
set direction(value: string | null);
|
|
92
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
82
93
|
}
|
|
83
94
|
export declare class HStack extends Stack {
|
|
84
|
-
|
|
85
|
-
|
|
95
|
+
get direction(): string | null;
|
|
96
|
+
set direction(value: string | null);
|
|
97
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
86
98
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, checkName as r, gapValues as i, log as a, propertyToAttributeSetter as o } from "@proximus/lavender-common";
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, checkName as r, gapValues as i, log as a, propertyToAttributeSetter as o, renderTemplate as s } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/Stack.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var c = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", l = new CSSStyleSheet();
|
|
4
|
+
l.replaceSync(c);
|
|
5
|
+
var u = document.createElement("template");
|
|
6
|
+
u.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
|
|
7
|
+
var d = [
|
|
6
8
|
"",
|
|
7
9
|
"default",
|
|
8
10
|
"row",
|
|
9
11
|
"row-reverse",
|
|
10
12
|
"column",
|
|
11
13
|
"column-reverse"
|
|
12
|
-
],
|
|
14
|
+
], f = [
|
|
13
15
|
"",
|
|
14
16
|
"default",
|
|
15
17
|
"stretch",
|
|
@@ -19,7 +21,7 @@ var l = [
|
|
|
19
21
|
"end",
|
|
20
22
|
"center",
|
|
21
23
|
"baseline"
|
|
22
|
-
],
|
|
24
|
+
], p = [
|
|
23
25
|
"",
|
|
24
26
|
"default",
|
|
25
27
|
"flex-start",
|
|
@@ -30,25 +32,23 @@ var l = [
|
|
|
30
32
|
"space-between",
|
|
31
33
|
"space-around",
|
|
32
34
|
"space-evenly"
|
|
33
|
-
],
|
|
35
|
+
], m = [
|
|
34
36
|
"",
|
|
35
37
|
"default",
|
|
36
38
|
"nowrap",
|
|
37
39
|
"wrap",
|
|
38
40
|
"wrap-reverse"
|
|
39
|
-
],
|
|
41
|
+
], h = [
|
|
40
42
|
"",
|
|
41
43
|
"visible",
|
|
42
44
|
"hidden",
|
|
43
45
|
"scroll",
|
|
44
46
|
"auto"
|
|
45
|
-
],
|
|
47
|
+
], g = class n extends t {
|
|
46
48
|
constructor() {
|
|
47
|
-
super(
|
|
48
|
-
}
|
|
49
|
-
connectedCallback() {
|
|
50
|
-
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");
|
|
49
|
+
super(l), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(u.content, !0));
|
|
51
50
|
}
|
|
51
|
+
connectedCallback() {}
|
|
52
52
|
static get observedAttributes() {
|
|
53
53
|
return [
|
|
54
54
|
...super.observedAttributes,
|
|
@@ -98,35 +98,35 @@ var l = [
|
|
|
98
98
|
case "justify-content--tablet":
|
|
99
99
|
case "justify-content--laptop":
|
|
100
100
|
case "justify-content--desktop":
|
|
101
|
-
this.updateFlexProperties(e, t, n,
|
|
101
|
+
this.updateFlexProperties(e, t, n, p);
|
|
102
102
|
break;
|
|
103
103
|
case "align-items":
|
|
104
104
|
case "align-items--mobile":
|
|
105
105
|
case "align-items--tablet":
|
|
106
106
|
case "align-items--laptop":
|
|
107
107
|
case "align-items--desktop":
|
|
108
|
-
this.updateFlexProperties(e, t, n,
|
|
108
|
+
this.updateFlexProperties(e, t, n, f);
|
|
109
109
|
break;
|
|
110
110
|
case "wrap":
|
|
111
111
|
case "wrap--mobile":
|
|
112
112
|
case "wrap--tablet":
|
|
113
113
|
case "wrap--laptop":
|
|
114
114
|
case "wrap--desktop":
|
|
115
|
-
this.updateFlexProperties(e, t, n,
|
|
115
|
+
this.updateFlexProperties(e, t, n, m);
|
|
116
116
|
break;
|
|
117
117
|
case "direction":
|
|
118
118
|
case "direction--mobile":
|
|
119
119
|
case "direction--tablet":
|
|
120
120
|
case "direction--laptop":
|
|
121
121
|
case "direction--desktop":
|
|
122
|
-
this.updateFlexProperties(e, t, n,
|
|
122
|
+
this.updateFlexProperties(e, t, n, d);
|
|
123
123
|
break;
|
|
124
124
|
case "overflow-x":
|
|
125
125
|
case "overflow-x--mobile":
|
|
126
126
|
case "overflow-x--tablet":
|
|
127
127
|
case "overflow-x--laptop":
|
|
128
128
|
case "overflow-x--desktop":
|
|
129
|
-
this.updateOverflowX(e, t, n,
|
|
129
|
+
this.updateOverflowX(e, t, n, h);
|
|
130
130
|
break;
|
|
131
131
|
default: super.attributeChangedCallback(e, t, n);
|
|
132
132
|
}
|
|
@@ -138,22 +138,36 @@ var l = [
|
|
|
138
138
|
}
|
|
139
139
|
this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
|
|
140
140
|
}
|
|
141
|
-
updateFlexProperties(e, t,
|
|
142
|
-
this.checkName(
|
|
143
|
-
let
|
|
144
|
-
if (
|
|
145
|
-
this.updateStyle(o, e, t, r), this.updateStyle(o, e, n, r);
|
|
146
|
-
});
|
|
141
|
+
updateFlexProperties(e, t, r, i) {
|
|
142
|
+
r !== null && !this.checkName(i, r) && a(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
143
|
+
let o = e.indexOf("--");
|
|
144
|
+
if (o === -1) for (let t of n.breakpoints) this.getAttribute(`${e}--${t}`) || this.updateStyle(e, t, r, i);
|
|
147
145
|
else {
|
|
148
|
-
let
|
|
149
|
-
this.updateStyle(
|
|
146
|
+
let t = e.slice(0, o), n = e.slice(o + 2);
|
|
147
|
+
this.updateStyle(t, n, r || this.getAttribute(t), i);
|
|
150
148
|
}
|
|
151
149
|
}
|
|
152
150
|
updateStyle(e, t, n, r) {
|
|
153
|
-
|
|
151
|
+
let i = `--flex-${e}--${t}-value`, a = e === "gap";
|
|
152
|
+
if (!n) {
|
|
153
|
+
this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
if (a && r && r.includes(n)) {
|
|
157
|
+
let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
|
|
158
|
+
this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
|
|
159
|
+
} else this.$el.style.setProperty(i, n);
|
|
160
|
+
}
|
|
161
|
+
static {
|
|
162
|
+
this.breakpoints = [
|
|
163
|
+
"mobile",
|
|
164
|
+
"tablet",
|
|
165
|
+
"laptop",
|
|
166
|
+
"desktop"
|
|
167
|
+
];
|
|
154
168
|
}
|
|
155
169
|
get direction() {
|
|
156
|
-
return this.getAttribute("direction");
|
|
170
|
+
return this.getAttribute("direction") ?? "row";
|
|
157
171
|
}
|
|
158
172
|
set direction(e) {
|
|
159
173
|
o(this, "direction", e);
|
|
@@ -183,7 +197,7 @@ var l = [
|
|
|
183
197
|
o(this, "direction--desktop", e);
|
|
184
198
|
}
|
|
185
199
|
get gap() {
|
|
186
|
-
return this.getAttribute("gap");
|
|
200
|
+
return this.getAttribute("gap") ?? "none";
|
|
187
201
|
}
|
|
188
202
|
set gap(e) {
|
|
189
203
|
o(this, "gap", e);
|
|
@@ -213,7 +227,7 @@ var l = [
|
|
|
213
227
|
o(this, "gap--desktop", e);
|
|
214
228
|
}
|
|
215
229
|
get justifyContent() {
|
|
216
|
-
return this.getAttribute("justify-content");
|
|
230
|
+
return this.getAttribute("justify-content") ?? "flex-start";
|
|
217
231
|
}
|
|
218
232
|
set justifyContent(e) {
|
|
219
233
|
o(this, "justify-content", e);
|
|
@@ -243,7 +257,7 @@ var l = [
|
|
|
243
257
|
o(this, "justify-content--desktop", e);
|
|
244
258
|
}
|
|
245
259
|
get alignItems() {
|
|
246
|
-
return this.getAttribute("align-items");
|
|
260
|
+
return this.getAttribute("align-items") ?? "stretch";
|
|
247
261
|
}
|
|
248
262
|
set alignItems(e) {
|
|
249
263
|
o(this, "align-items", e);
|
|
@@ -273,7 +287,7 @@ var l = [
|
|
|
273
287
|
o(this, "align-items--desktop", e);
|
|
274
288
|
}
|
|
275
289
|
get wrap() {
|
|
276
|
-
return this.getAttribute("wrap");
|
|
290
|
+
return this.getAttribute("wrap") ?? "nowrap";
|
|
277
291
|
}
|
|
278
292
|
set wrap(e) {
|
|
279
293
|
o(this, "wrap", e);
|
|
@@ -303,7 +317,7 @@ var l = [
|
|
|
303
317
|
o(this, "wrap--desktop", e);
|
|
304
318
|
}
|
|
305
319
|
get overflowX() {
|
|
306
|
-
return this.getAttribute("overflow-x");
|
|
320
|
+
return this.getAttribute("overflow-x") ?? "visible";
|
|
307
321
|
}
|
|
308
322
|
set overflowX(e) {
|
|
309
323
|
o(this, "overflow-x", e);
|
|
@@ -333,31 +347,37 @@ var l = [
|
|
|
333
347
|
o(this, "overflow-x--desktop", e);
|
|
334
348
|
}
|
|
335
349
|
get $el() {
|
|
336
|
-
return this.shadowRoot.
|
|
350
|
+
return this.shadowRoot.firstElementChild;
|
|
337
351
|
}
|
|
338
352
|
};
|
|
339
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
340
|
-
var
|
|
341
|
-
|
|
342
|
-
|
|
353
|
+
customElements.get("px-stack") || customElements.define("px-stack", g);
|
|
354
|
+
var _ = (e) => e === "direction" || e.startsWith("direction--"), v = class extends g {
|
|
355
|
+
get direction() {
|
|
356
|
+
return "column";
|
|
343
357
|
}
|
|
344
|
-
|
|
345
|
-
|
|
358
|
+
set direction(e) {
|
|
359
|
+
o(this, "direction", e);
|
|
360
|
+
}
|
|
361
|
+
attributeChangedCallback(e, t, n) {
|
|
362
|
+
_(e) || super.attributeChangedCallback(e, t, n);
|
|
346
363
|
}
|
|
347
364
|
};
|
|
348
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
349
|
-
var
|
|
350
|
-
|
|
351
|
-
|
|
365
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", v);
|
|
366
|
+
var y = class extends g {
|
|
367
|
+
get direction() {
|
|
368
|
+
return "row";
|
|
352
369
|
}
|
|
353
|
-
|
|
354
|
-
|
|
370
|
+
set direction(e) {
|
|
371
|
+
o(this, "direction", e);
|
|
372
|
+
}
|
|
373
|
+
attributeChangedCallback(e, t, n) {
|
|
374
|
+
_(e) || super.attributeChangedCallback(e, t, n);
|
|
355
375
|
}
|
|
356
376
|
};
|
|
357
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
377
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", y);
|
|
358
378
|
//#endregion
|
|
359
379
|
//#region src/Spacer.ts
|
|
360
|
-
var
|
|
380
|
+
var b = class extends HTMLElement {
|
|
361
381
|
constructor() {
|
|
362
382
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
363
383
|
}
|
|
@@ -403,14 +423,14 @@ var _ = class extends HTMLElement {
|
|
|
403
423
|
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
404
424
|
}
|
|
405
425
|
};
|
|
406
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
426
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", b);
|
|
407
427
|
//#endregion
|
|
408
428
|
//#region src/Page.css?inline
|
|
409
|
-
var
|
|
410
|
-
|
|
411
|
-
var
|
|
429
|
+
var x = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", S = new CSSStyleSheet();
|
|
430
|
+
S.replaceSync(x);
|
|
431
|
+
var C = class extends t {
|
|
412
432
|
constructor() {
|
|
413
|
-
super(
|
|
433
|
+
super(S), this.template = () => `
|
|
414
434
|
<px-container border-radius="none" padding="none">
|
|
415
435
|
<px-vstack>
|
|
416
436
|
<px-container id="header-container" border-radius="none">
|
|
@@ -503,7 +523,7 @@ var b = class extends t {
|
|
|
503
523
|
</px-container>
|
|
504
524
|
</px-vstack>
|
|
505
525
|
</px-container>
|
|
506
|
-
`, this.shadowRoot
|
|
526
|
+
`, s(this.shadowRoot, this.template());
|
|
507
527
|
}
|
|
508
528
|
static get observedAttributes() {
|
|
509
529
|
return [
|
|
@@ -590,6 +610,6 @@ var b = class extends t {
|
|
|
590
610
|
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;
|
|
591
611
|
}
|
|
592
612
|
};
|
|
593
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
613
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", C);
|
|
594
614
|
//#endregion
|
|
595
|
-
export {
|
|
615
|
+
export { y as HStack, C as Page, b as Spacer, g as Stack, v as VStack, f as alignItemsValues, d as directionValues, p as justifyContentValues, h as overflowValues, m as wrapValues };
|