@proximus/lavender-layout 2.0.0-alpha.2 → 2.0.0-alpha.200
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/Page.d.ts +11 -12
- package/dist/Spacer.d.ts +6 -2
- package/dist/Stack.d.ts +60 -60
- package/dist/index.es.js +502 -536
- package/package.json +1 -1
package/dist/Page.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
2
|
import { Stack } from './Stack.ts';
|
|
3
|
-
import { Container } from '@proximus/lavender-container';
|
|
3
|
+
import { type Container } from '@proximus/lavender-container';
|
|
4
4
|
export declare class Page extends WithExtraAttributes {
|
|
5
|
-
template: (
|
|
5
|
+
template: () => string;
|
|
6
6
|
constructor();
|
|
7
7
|
static get observedAttributes(): string[];
|
|
8
8
|
get $wideImage(): Container;
|
|
@@ -12,17 +12,16 @@ export declare class Page extends WithExtraAttributes {
|
|
|
12
12
|
get $footerContainer(): Container;
|
|
13
13
|
get $headerContainer(): Container;
|
|
14
14
|
get $imageContainer(): Container;
|
|
15
|
-
get backgroundImage(): string;
|
|
16
|
-
get $
|
|
17
|
-
get $main(): Container;
|
|
15
|
+
get backgroundImage(): string | null;
|
|
16
|
+
get $main(): Container | null;
|
|
18
17
|
get backgroundColor(): string;
|
|
19
|
-
get paddingVertical(): string;
|
|
20
|
-
get paddingHorizontal(): string;
|
|
21
|
-
set paddingVertical(value: string);
|
|
22
|
-
set paddingHorizontal(value: string);
|
|
23
|
-
get gap(): string;
|
|
18
|
+
get paddingVertical(): string | null;
|
|
19
|
+
get paddingHorizontal(): string | null;
|
|
20
|
+
set paddingVertical(value: string | null);
|
|
21
|
+
set paddingHorizontal(value: string | null);
|
|
22
|
+
get gap(): string | null;
|
|
24
23
|
connectedCallback(): void;
|
|
25
24
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
26
|
-
handlePaddingVerticalChange(newValue: string): void;
|
|
27
|
-
handlePaddingHorizontalChange(newValue: string): void;
|
|
25
|
+
handlePaddingVerticalChange(newValue: string | null): void;
|
|
26
|
+
handlePaddingHorizontalChange(newValue: string | null): void;
|
|
28
27
|
}
|
package/dist/Spacer.d.ts
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
export declare class Spacer extends HTMLElement {
|
|
2
2
|
private resizeObserver?;
|
|
3
|
+
private intersectionObserver?;
|
|
3
4
|
private recheckHandle?;
|
|
4
5
|
private isZeroSized;
|
|
5
6
|
private growValue;
|
|
7
|
+
private isVertical;
|
|
6
8
|
constructor();
|
|
7
9
|
static get observedAttributes(): string[];
|
|
8
10
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
9
11
|
connectedCallback(): void;
|
|
10
12
|
disconnectedCallback(): void;
|
|
11
|
-
get grow(): string;
|
|
12
|
-
set grow(value: string);
|
|
13
|
+
get grow(): string | null;
|
|
14
|
+
set grow(value: string | null);
|
|
13
15
|
private scheduleRecheck;
|
|
14
16
|
private recalculateVisibility;
|
|
15
17
|
private handleSizeChange;
|
|
16
18
|
private updateParticipation;
|
|
19
|
+
get nogap(): boolean;
|
|
20
|
+
set nogap(value: boolean);
|
|
17
21
|
}
|
package/dist/Stack.d.ts
CHANGED
|
@@ -14,66 +14,66 @@ export declare class Stack extends WithExtraAttributes {
|
|
|
14
14
|
updateOverflowX(name: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
15
15
|
updateFlexProperties(name: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
16
16
|
updateStyle(cssName: string, breakpoint: string, value: string | null, attrValue?: string[]): void;
|
|
17
|
-
get direction(): string;
|
|
18
|
-
set direction(value: string);
|
|
19
|
-
get directionMobile(): string;
|
|
20
|
-
set directionMobile(value: string);
|
|
21
|
-
get directionTablet(): string;
|
|
22
|
-
set directionTablet(value: string);
|
|
23
|
-
get directionLaptop(): string;
|
|
24
|
-
set directionLaptop(value: string);
|
|
25
|
-
get directionDesktop(): string;
|
|
26
|
-
set directionDesktop(value: string);
|
|
27
|
-
get gap(): string;
|
|
28
|
-
set gap(value: string);
|
|
29
|
-
get gapMobile(): string;
|
|
30
|
-
set gapMobile(value: string);
|
|
31
|
-
get gapTablet(): string;
|
|
32
|
-
set gapTablet(value: string);
|
|
33
|
-
get gapLaptop(): string;
|
|
34
|
-
set gapLaptop(value: string);
|
|
35
|
-
get gapDesktop(): string;
|
|
36
|
-
set gapDesktop(value: string);
|
|
37
|
-
get justifyContent(): string;
|
|
38
|
-
set justifyContent(value: string);
|
|
39
|
-
get justifyContentMobile(): string;
|
|
40
|
-
set justifyContentMobile(value: string);
|
|
41
|
-
get justifyContentTablet(): string;
|
|
42
|
-
set justifyContentTablet(value: string);
|
|
43
|
-
get justifyContentLaptop(): string;
|
|
44
|
-
set justifyContentLaptop(value: string);
|
|
45
|
-
get justifyContentDesktop(): string;
|
|
46
|
-
set justifyContentDesktop(value: string);
|
|
47
|
-
get alignItems(): string;
|
|
48
|
-
set alignItems(value: string);
|
|
49
|
-
get alignItemsMobile(): string;
|
|
50
|
-
set alignItemsMobile(value: string);
|
|
51
|
-
get alignItemsTablet(): string;
|
|
52
|
-
set alignItemsTablet(value: string);
|
|
53
|
-
get alignItemsLaptop(): string;
|
|
54
|
-
set alignItemsLaptop(value: string);
|
|
55
|
-
get alignItemsDesktop(): string;
|
|
56
|
-
set alignItemsDesktop(value: string);
|
|
57
|
-
get wrap(): string;
|
|
58
|
-
set wrap(value: string);
|
|
59
|
-
get wrapMobile(): string;
|
|
60
|
-
set wrapMobile(value: string);
|
|
61
|
-
get wrapTablet(): string;
|
|
62
|
-
set wrapTablet(value: string);
|
|
63
|
-
get wrapLaptop(): string;
|
|
64
|
-
set wrapLaptop(value: string);
|
|
65
|
-
get wrapDesktop(): string;
|
|
66
|
-
set wrapDesktop(value: string);
|
|
67
|
-
get overflowX(): string;
|
|
68
|
-
set overflowX(value: string);
|
|
69
|
-
get overflowXMobile(): string;
|
|
70
|
-
set overflowXMobile(value: string);
|
|
71
|
-
get overflowXTablet(): string;
|
|
72
|
-
set overflowXTablet(value: string);
|
|
73
|
-
get overflowXLaptop(): string;
|
|
74
|
-
set overflowXLaptop(value: string);
|
|
75
|
-
get overflowXDesktop(): string;
|
|
76
|
-
set overflowXDesktop(value: string);
|
|
17
|
+
get direction(): string | null;
|
|
18
|
+
set direction(value: string | null);
|
|
19
|
+
get directionMobile(): string | null;
|
|
20
|
+
set directionMobile(value: string | null);
|
|
21
|
+
get directionTablet(): string | null;
|
|
22
|
+
set directionTablet(value: string | null);
|
|
23
|
+
get directionLaptop(): string | null;
|
|
24
|
+
set directionLaptop(value: string | null);
|
|
25
|
+
get directionDesktop(): string | null;
|
|
26
|
+
set directionDesktop(value: string | null);
|
|
27
|
+
get gap(): string | null;
|
|
28
|
+
set gap(value: string | null);
|
|
29
|
+
get gapMobile(): string | null;
|
|
30
|
+
set gapMobile(value: string | null);
|
|
31
|
+
get gapTablet(): string | null;
|
|
32
|
+
set gapTablet(value: string | null);
|
|
33
|
+
get gapLaptop(): string | null;
|
|
34
|
+
set gapLaptop(value: string | null);
|
|
35
|
+
get gapDesktop(): string | null;
|
|
36
|
+
set gapDesktop(value: string | null);
|
|
37
|
+
get justifyContent(): string | null;
|
|
38
|
+
set justifyContent(value: string | null);
|
|
39
|
+
get justifyContentMobile(): string | null;
|
|
40
|
+
set justifyContentMobile(value: string | null);
|
|
41
|
+
get justifyContentTablet(): string | null;
|
|
42
|
+
set justifyContentTablet(value: string | null);
|
|
43
|
+
get justifyContentLaptop(): string | null;
|
|
44
|
+
set justifyContentLaptop(value: string | null);
|
|
45
|
+
get justifyContentDesktop(): string | null;
|
|
46
|
+
set justifyContentDesktop(value: string | null);
|
|
47
|
+
get alignItems(): string | null;
|
|
48
|
+
set alignItems(value: string | null);
|
|
49
|
+
get alignItemsMobile(): string | null;
|
|
50
|
+
set alignItemsMobile(value: string | null);
|
|
51
|
+
get alignItemsTablet(): string | null;
|
|
52
|
+
set alignItemsTablet(value: string | null);
|
|
53
|
+
get alignItemsLaptop(): string | null;
|
|
54
|
+
set alignItemsLaptop(value: string | null);
|
|
55
|
+
get alignItemsDesktop(): string | null;
|
|
56
|
+
set alignItemsDesktop(value: string | null);
|
|
57
|
+
get wrap(): string | null;
|
|
58
|
+
set wrap(value: string | null);
|
|
59
|
+
get wrapMobile(): string | null;
|
|
60
|
+
set wrapMobile(value: string | null);
|
|
61
|
+
get wrapTablet(): string | null;
|
|
62
|
+
set wrapTablet(value: string | null);
|
|
63
|
+
get wrapLaptop(): string | null;
|
|
64
|
+
set wrapLaptop(value: string | null);
|
|
65
|
+
get wrapDesktop(): string | null;
|
|
66
|
+
set wrapDesktop(value: string | null);
|
|
67
|
+
get overflowX(): string | null;
|
|
68
|
+
set overflowX(value: string | null);
|
|
69
|
+
get overflowXMobile(): string | null;
|
|
70
|
+
set overflowXMobile(value: string | null);
|
|
71
|
+
get overflowXTablet(): string | null;
|
|
72
|
+
set overflowXTablet(value: string | null);
|
|
73
|
+
get overflowXLaptop(): string | null;
|
|
74
|
+
set overflowXLaptop(value: string | null);
|
|
75
|
+
get overflowXDesktop(): string | null;
|
|
76
|
+
set overflowXDesktop(value: string | null);
|
|
77
77
|
get $el(): HTMLDivElement;
|
|
78
78
|
}
|
|
79
79
|
export declare class VStack extends Stack {
|
package/dist/index.es.js
CHANGED
|
@@ -1,423 +1,416 @@
|
|
|
1
|
-
import { WithExtraAttributes as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
}
|
|
348
|
-
customElements.get("px-
|
|
349
|
-
class
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
}
|
|
357
|
-
customElements.get("px-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
}
|
|
415
|
-
customElements.get("px-spacer") || customElements.define("px-spacer", $);
|
|
416
|
-
const S = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
|
|
417
|
-
g.replaceSync(S);
|
|
418
|
-
class j extends p {
|
|
419
|
-
constructor() {
|
|
420
|
-
super(g), this.template = (t) => `
|
|
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";
|
|
2
|
+
//#region src/Stack.css?inline
|
|
3
|
+
var s = ":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))}}", c = new CSSStyleSheet();
|
|
4
|
+
c.replaceSync(s);
|
|
5
|
+
var l = [
|
|
6
|
+
"",
|
|
7
|
+
"default",
|
|
8
|
+
"row",
|
|
9
|
+
"row-reverse",
|
|
10
|
+
"column",
|
|
11
|
+
"column-reverse"
|
|
12
|
+
], u = [
|
|
13
|
+
"",
|
|
14
|
+
"default",
|
|
15
|
+
"stretch",
|
|
16
|
+
"flex-start",
|
|
17
|
+
"start",
|
|
18
|
+
"flex-end",
|
|
19
|
+
"end",
|
|
20
|
+
"center",
|
|
21
|
+
"baseline"
|
|
22
|
+
], d = [
|
|
23
|
+
"",
|
|
24
|
+
"default",
|
|
25
|
+
"flex-start",
|
|
26
|
+
"start",
|
|
27
|
+
"flex-end",
|
|
28
|
+
"end",
|
|
29
|
+
"center",
|
|
30
|
+
"space-between",
|
|
31
|
+
"space-around",
|
|
32
|
+
"space-evenly"
|
|
33
|
+
], f = [
|
|
34
|
+
"",
|
|
35
|
+
"default",
|
|
36
|
+
"nowrap",
|
|
37
|
+
"wrap",
|
|
38
|
+
"wrap-reverse"
|
|
39
|
+
], p = [
|
|
40
|
+
"",
|
|
41
|
+
"visible",
|
|
42
|
+
"hidden",
|
|
43
|
+
"scroll",
|
|
44
|
+
"auto"
|
|
45
|
+
], m = class extends t {
|
|
46
|
+
constructor() {
|
|
47
|
+
super(c), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template;
|
|
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");
|
|
51
|
+
}
|
|
52
|
+
static get observedAttributes() {
|
|
53
|
+
return [
|
|
54
|
+
...super.observedAttributes,
|
|
55
|
+
"direction",
|
|
56
|
+
"direction--mobile",
|
|
57
|
+
"direction--tablet",
|
|
58
|
+
"direction--laptop",
|
|
59
|
+
"direction--desktop",
|
|
60
|
+
"gap",
|
|
61
|
+
"gap--mobile",
|
|
62
|
+
"gap--tablet",
|
|
63
|
+
"gap--laptop",
|
|
64
|
+
"gap--desktop",
|
|
65
|
+
"justify-content",
|
|
66
|
+
"justify-content--mobile",
|
|
67
|
+
"justify-content--tablet",
|
|
68
|
+
"justify-content--laptop",
|
|
69
|
+
"justify-content--desktop",
|
|
70
|
+
"align-items",
|
|
71
|
+
"align-items--mobile",
|
|
72
|
+
"align-items--tablet",
|
|
73
|
+
"align-items--laptop",
|
|
74
|
+
"align-items--desktop",
|
|
75
|
+
"wrap",
|
|
76
|
+
"wrap--mobile",
|
|
77
|
+
"wrap--tablet",
|
|
78
|
+
"wrap--laptop",
|
|
79
|
+
"wrap--desktop",
|
|
80
|
+
"overflow-x",
|
|
81
|
+
"overflow-x--mobile",
|
|
82
|
+
"overflow-x--tablet",
|
|
83
|
+
"overflow-x--laptop",
|
|
84
|
+
"overflow-x--desktop"
|
|
85
|
+
];
|
|
86
|
+
}
|
|
87
|
+
attributeChangedCallback(e, t, n) {
|
|
88
|
+
switch (e) {
|
|
89
|
+
case "gap":
|
|
90
|
+
case "gap--mobile":
|
|
91
|
+
case "gap--tablet":
|
|
92
|
+
case "gap--laptop":
|
|
93
|
+
case "gap--desktop":
|
|
94
|
+
this.updateFlexProperties(e, t, n, i);
|
|
95
|
+
break;
|
|
96
|
+
case "justify-content":
|
|
97
|
+
case "justify-content--mobile":
|
|
98
|
+
case "justify-content--tablet":
|
|
99
|
+
case "justify-content--laptop":
|
|
100
|
+
case "justify-content--desktop":
|
|
101
|
+
this.updateFlexProperties(e, t, n, d);
|
|
102
|
+
break;
|
|
103
|
+
case "align-items":
|
|
104
|
+
case "align-items--mobile":
|
|
105
|
+
case "align-items--tablet":
|
|
106
|
+
case "align-items--laptop":
|
|
107
|
+
case "align-items--desktop":
|
|
108
|
+
this.updateFlexProperties(e, t, n, u);
|
|
109
|
+
break;
|
|
110
|
+
case "wrap":
|
|
111
|
+
case "wrap--mobile":
|
|
112
|
+
case "wrap--tablet":
|
|
113
|
+
case "wrap--laptop":
|
|
114
|
+
case "wrap--desktop":
|
|
115
|
+
this.updateFlexProperties(e, t, n, f);
|
|
116
|
+
break;
|
|
117
|
+
case "direction":
|
|
118
|
+
case "direction--mobile":
|
|
119
|
+
case "direction--tablet":
|
|
120
|
+
case "direction--laptop":
|
|
121
|
+
case "direction--desktop":
|
|
122
|
+
this.updateFlexProperties(e, t, n, l);
|
|
123
|
+
break;
|
|
124
|
+
case "overflow-x":
|
|
125
|
+
case "overflow-x--mobile":
|
|
126
|
+
case "overflow-x--tablet":
|
|
127
|
+
case "overflow-x--laptop":
|
|
128
|
+
case "overflow-x--desktop":
|
|
129
|
+
this.updateOverflowX(e, t, n, p);
|
|
130
|
+
break;
|
|
131
|
+
default: super.attributeChangedCallback(e, t, n);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
updateOverflowX(e, t, n, i) {
|
|
135
|
+
if (!r(i, n)) {
|
|
136
|
+
a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
|
|
140
|
+
}
|
|
141
|
+
updateFlexProperties(e, t, n, r) {
|
|
142
|
+
this.checkName(r, n) || a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
143
|
+
let i = e.indexOf("--") > -1, o = i ? e.split("--")[0] : e, s = [];
|
|
144
|
+
if (!i) this.getAttribute(o + "--mobile") || s.push("mobile"), this.getAttribute(o + "--tablet") || s.push("tablet"), this.getAttribute(o + "--laptop") || s.push("laptop"), this.getAttribute(o + "--desktop") || s.push("desktop"), s.forEach((e) => {
|
|
145
|
+
this.updateStyle(o, e, t, r), this.updateStyle(o, e, n, r);
|
|
146
|
+
});
|
|
147
|
+
else {
|
|
148
|
+
let i = e.split("--")[1];
|
|
149
|
+
this.updateStyle(o, i, t, r), this.updateStyle(o, i, n, r);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
updateStyle(e, t, n, r) {
|
|
153
|
+
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));
|
|
154
|
+
}
|
|
155
|
+
get direction() {
|
|
156
|
+
return this.getAttribute("direction");
|
|
157
|
+
}
|
|
158
|
+
set direction(e) {
|
|
159
|
+
o(this, "direction", e);
|
|
160
|
+
}
|
|
161
|
+
get directionMobile() {
|
|
162
|
+
return this.getAttribute("direction--mobile");
|
|
163
|
+
}
|
|
164
|
+
set directionMobile(e) {
|
|
165
|
+
o(this, "direction--mobile", e);
|
|
166
|
+
}
|
|
167
|
+
get directionTablet() {
|
|
168
|
+
return this.getAttribute("direction--tablet");
|
|
169
|
+
}
|
|
170
|
+
set directionTablet(e) {
|
|
171
|
+
o(this, "direction--tablet", e);
|
|
172
|
+
}
|
|
173
|
+
get directionLaptop() {
|
|
174
|
+
return this.getAttribute("direction--laptop");
|
|
175
|
+
}
|
|
176
|
+
set directionLaptop(e) {
|
|
177
|
+
o(this, "direction--laptop", e);
|
|
178
|
+
}
|
|
179
|
+
get directionDesktop() {
|
|
180
|
+
return this.getAttribute("direction--desktop");
|
|
181
|
+
}
|
|
182
|
+
set directionDesktop(e) {
|
|
183
|
+
o(this, "direction--desktop", e);
|
|
184
|
+
}
|
|
185
|
+
get gap() {
|
|
186
|
+
return this.getAttribute("gap");
|
|
187
|
+
}
|
|
188
|
+
set gap(e) {
|
|
189
|
+
o(this, "gap", e);
|
|
190
|
+
}
|
|
191
|
+
get gapMobile() {
|
|
192
|
+
return this.getAttribute("gap--mobile");
|
|
193
|
+
}
|
|
194
|
+
set gapMobile(e) {
|
|
195
|
+
o(this, "gap--mobile", e);
|
|
196
|
+
}
|
|
197
|
+
get gapTablet() {
|
|
198
|
+
return this.getAttribute("gap--tablet");
|
|
199
|
+
}
|
|
200
|
+
set gapTablet(e) {
|
|
201
|
+
o(this, "gap--tablet", e);
|
|
202
|
+
}
|
|
203
|
+
get gapLaptop() {
|
|
204
|
+
return this.getAttribute("gap--laptop");
|
|
205
|
+
}
|
|
206
|
+
set gapLaptop(e) {
|
|
207
|
+
o(this, "gap--laptop", e);
|
|
208
|
+
}
|
|
209
|
+
get gapDesktop() {
|
|
210
|
+
return this.getAttribute("gap--desktop");
|
|
211
|
+
}
|
|
212
|
+
set gapDesktop(e) {
|
|
213
|
+
o(this, "gap--desktop", e);
|
|
214
|
+
}
|
|
215
|
+
get justifyContent() {
|
|
216
|
+
return this.getAttribute("justify-content");
|
|
217
|
+
}
|
|
218
|
+
set justifyContent(e) {
|
|
219
|
+
o(this, "justify-content", e);
|
|
220
|
+
}
|
|
221
|
+
get justifyContentMobile() {
|
|
222
|
+
return this.getAttribute("justify-content--mobile");
|
|
223
|
+
}
|
|
224
|
+
set justifyContentMobile(e) {
|
|
225
|
+
o(this, "justify-content--mobile", e);
|
|
226
|
+
}
|
|
227
|
+
get justifyContentTablet() {
|
|
228
|
+
return this.getAttribute("justify-content--tablet");
|
|
229
|
+
}
|
|
230
|
+
set justifyContentTablet(e) {
|
|
231
|
+
o(this, "justify-content--tablet", e);
|
|
232
|
+
}
|
|
233
|
+
get justifyContentLaptop() {
|
|
234
|
+
return this.getAttribute("justify-content--laptop");
|
|
235
|
+
}
|
|
236
|
+
set justifyContentLaptop(e) {
|
|
237
|
+
o(this, "justify-content--laptop", e);
|
|
238
|
+
}
|
|
239
|
+
get justifyContentDesktop() {
|
|
240
|
+
return this.getAttribute("justify-content--desktop");
|
|
241
|
+
}
|
|
242
|
+
set justifyContentDesktop(e) {
|
|
243
|
+
o(this, "justify-content--desktop", e);
|
|
244
|
+
}
|
|
245
|
+
get alignItems() {
|
|
246
|
+
return this.getAttribute("align-items");
|
|
247
|
+
}
|
|
248
|
+
set alignItems(e) {
|
|
249
|
+
o(this, "align-items", e);
|
|
250
|
+
}
|
|
251
|
+
get alignItemsMobile() {
|
|
252
|
+
return this.getAttribute("align-items--mobile");
|
|
253
|
+
}
|
|
254
|
+
set alignItemsMobile(e) {
|
|
255
|
+
o(this, "align-items--mobile", e);
|
|
256
|
+
}
|
|
257
|
+
get alignItemsTablet() {
|
|
258
|
+
return this.getAttribute("align-items--tablet");
|
|
259
|
+
}
|
|
260
|
+
set alignItemsTablet(e) {
|
|
261
|
+
o(this, "align-items--tablet", e);
|
|
262
|
+
}
|
|
263
|
+
get alignItemsLaptop() {
|
|
264
|
+
return this.getAttribute("align-items--laptop");
|
|
265
|
+
}
|
|
266
|
+
set alignItemsLaptop(e) {
|
|
267
|
+
o(this, "align-items--laptop", e);
|
|
268
|
+
}
|
|
269
|
+
get alignItemsDesktop() {
|
|
270
|
+
return this.getAttribute("align-items--desktop");
|
|
271
|
+
}
|
|
272
|
+
set alignItemsDesktop(e) {
|
|
273
|
+
o(this, "align-items--desktop", e);
|
|
274
|
+
}
|
|
275
|
+
get wrap() {
|
|
276
|
+
return this.getAttribute("wrap");
|
|
277
|
+
}
|
|
278
|
+
set wrap(e) {
|
|
279
|
+
o(this, "wrap", e);
|
|
280
|
+
}
|
|
281
|
+
get wrapMobile() {
|
|
282
|
+
return this.getAttribute("wrap--mobile");
|
|
283
|
+
}
|
|
284
|
+
set wrapMobile(e) {
|
|
285
|
+
o(this, "wrap--mobile", e);
|
|
286
|
+
}
|
|
287
|
+
get wrapTablet() {
|
|
288
|
+
return this.getAttribute("wrap--tablet");
|
|
289
|
+
}
|
|
290
|
+
set wrapTablet(e) {
|
|
291
|
+
o(this, "wrap--tablet", e);
|
|
292
|
+
}
|
|
293
|
+
get wrapLaptop() {
|
|
294
|
+
return this.getAttribute("wrap--laptop");
|
|
295
|
+
}
|
|
296
|
+
set wrapLaptop(e) {
|
|
297
|
+
o(this, "wrap--laptop", e);
|
|
298
|
+
}
|
|
299
|
+
get wrapDesktop() {
|
|
300
|
+
return this.getAttribute("wrap--desktop");
|
|
301
|
+
}
|
|
302
|
+
set wrapDesktop(e) {
|
|
303
|
+
o(this, "wrap--desktop", e);
|
|
304
|
+
}
|
|
305
|
+
get overflowX() {
|
|
306
|
+
return this.getAttribute("overflow-x");
|
|
307
|
+
}
|
|
308
|
+
set overflowX(e) {
|
|
309
|
+
o(this, "overflow-x", e);
|
|
310
|
+
}
|
|
311
|
+
get overflowXMobile() {
|
|
312
|
+
return this.getAttribute("overflow-x--mobile");
|
|
313
|
+
}
|
|
314
|
+
set overflowXMobile(e) {
|
|
315
|
+
o(this, "overflow-x--mobile", e);
|
|
316
|
+
}
|
|
317
|
+
get overflowXTablet() {
|
|
318
|
+
return this.getAttribute("overflow-x--tablet");
|
|
319
|
+
}
|
|
320
|
+
set overflowXTablet(e) {
|
|
321
|
+
o(this, "overflow-x--tablet", e);
|
|
322
|
+
}
|
|
323
|
+
get overflowXLaptop() {
|
|
324
|
+
return this.getAttribute("overflow-x--laptop");
|
|
325
|
+
}
|
|
326
|
+
set overflowXLaptop(e) {
|
|
327
|
+
o(this, "overflow-x--laptop", e);
|
|
328
|
+
}
|
|
329
|
+
get overflowXDesktop() {
|
|
330
|
+
return this.getAttribute("overflow-x--desktop");
|
|
331
|
+
}
|
|
332
|
+
set overflowXDesktop(e) {
|
|
333
|
+
o(this, "overflow-x--desktop", e);
|
|
334
|
+
}
|
|
335
|
+
get $el() {
|
|
336
|
+
return this.shadowRoot.querySelector(".flex-container");
|
|
337
|
+
}
|
|
338
|
+
};
|
|
339
|
+
customElements.get("px-stack") || customElements.define("px-stack", m);
|
|
340
|
+
var h = class extends m {
|
|
341
|
+
constructor() {
|
|
342
|
+
super();
|
|
343
|
+
}
|
|
344
|
+
connectedCallback() {
|
|
345
|
+
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", h);
|
|
349
|
+
var g = class extends m {
|
|
350
|
+
constructor() {
|
|
351
|
+
super();
|
|
352
|
+
}
|
|
353
|
+
connectedCallback() {
|
|
354
|
+
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", g);
|
|
358
|
+
//#endregion
|
|
359
|
+
//#region src/Spacer.ts
|
|
360
|
+
var _ = class extends HTMLElement {
|
|
361
|
+
constructor() {
|
|
362
|
+
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
363
|
+
}
|
|
364
|
+
static get observedAttributes() {
|
|
365
|
+
return ["grow", "nogap"];
|
|
366
|
+
}
|
|
367
|
+
attributeChangedCallback(e, t, n) {
|
|
368
|
+
e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
369
|
+
}
|
|
370
|
+
connectedCallback() {
|
|
371
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
|
|
372
|
+
this.handleSizeChange();
|
|
373
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
374
|
+
}
|
|
375
|
+
disconnectedCallback() {
|
|
376
|
+
this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
|
|
377
|
+
}
|
|
378
|
+
get grow() {
|
|
379
|
+
return this.getAttribute("grow");
|
|
380
|
+
}
|
|
381
|
+
set grow(e) {
|
|
382
|
+
this.setAttribute("grow", `${e}`);
|
|
383
|
+
}
|
|
384
|
+
scheduleRecheck() {
|
|
385
|
+
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
386
|
+
this.recheckHandle = void 0, this.recalculateVisibility();
|
|
387
|
+
});
|
|
388
|
+
}
|
|
389
|
+
recalculateVisibility() {
|
|
390
|
+
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
391
|
+
}
|
|
392
|
+
handleSizeChange() {
|
|
393
|
+
let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
|
|
394
|
+
this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
|
|
395
|
+
}
|
|
396
|
+
updateParticipation() {
|
|
397
|
+
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
398
|
+
}
|
|
399
|
+
get nogap() {
|
|
400
|
+
return this.hasAttribute("nogap");
|
|
401
|
+
}
|
|
402
|
+
set nogap(e) {
|
|
403
|
+
e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
404
|
+
}
|
|
405
|
+
};
|
|
406
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", _);
|
|
407
|
+
//#endregion
|
|
408
|
+
//#region src/Page.css?inline
|
|
409
|
+
var v = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", y = new CSSStyleSheet();
|
|
410
|
+
y.replaceSync(v);
|
|
411
|
+
var b = class extends t {
|
|
412
|
+
constructor() {
|
|
413
|
+
super(y), this.template = () => `
|
|
421
414
|
<px-container border-radius="none" padding="none">
|
|
422
415
|
<px-vstack>
|
|
423
416
|
<px-container id="header-container" border-radius="none">
|
|
@@ -454,15 +447,6 @@ class j extends p {
|
|
|
454
447
|
<px-spacer></px-spacer>
|
|
455
448
|
</px-hstack>
|
|
456
449
|
</px-container>
|
|
457
|
-
${t ? ` <px-hstack>
|
|
458
|
-
<px-spacer></px-spacer>
|
|
459
|
-
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
460
|
-
<px-vstack gap="s">
|
|
461
|
-
<slot name="image-sticky-container"></slot>
|
|
462
|
-
</px-vstack>
|
|
463
|
-
</px-container>
|
|
464
|
-
<px-spacer></px-spacer>
|
|
465
|
-
</px-hstack>` : ""}
|
|
466
450
|
<px-container
|
|
467
451
|
id="body-container"
|
|
468
452
|
id="main"
|
|
@@ -519,111 +503,93 @@ class j extends p {
|
|
|
519
503
|
</px-container>
|
|
520
504
|
</px-vstack>
|
|
521
505
|
</px-container>
|
|
522
|
-
`, this.shadowRoot.innerHTML = this.template(
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
}
|
|
609
|
-
}
|
|
610
|
-
handlePaddingVerticalChange(t) {
|
|
611
|
-
this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
|
|
612
|
-
}
|
|
613
|
-
handlePaddingHorizontalChange(t) {
|
|
614
|
-
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
615
|
-
}
|
|
616
|
-
}
|
|
617
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page", j);
|
|
618
|
-
export {
|
|
619
|
-
C as HStack,
|
|
620
|
-
j as Page,
|
|
621
|
-
$ as Spacer,
|
|
622
|
-
l as Stack,
|
|
623
|
-
A as VStack,
|
|
624
|
-
v as alignItemsValues,
|
|
625
|
-
m as directionValues,
|
|
626
|
-
k as justifyContentValues,
|
|
627
|
-
y as overflowValues,
|
|
628
|
-
w as wrapValues
|
|
506
|
+
`, this.shadowRoot.innerHTML = this.template();
|
|
507
|
+
}
|
|
508
|
+
static get observedAttributes() {
|
|
509
|
+
return [
|
|
510
|
+
...super.observedAttributes,
|
|
511
|
+
"background-image",
|
|
512
|
+
"gap",
|
|
513
|
+
"background-color",
|
|
514
|
+
"padding-vertical",
|
|
515
|
+
"padding-horizontal"
|
|
516
|
+
];
|
|
517
|
+
}
|
|
518
|
+
get $wideImage() {
|
|
519
|
+
return this.shadowRoot.querySelector("#image-box");
|
|
520
|
+
}
|
|
521
|
+
get $bodyVStackContainer() {
|
|
522
|
+
return this.shadowRoot.querySelector("#header-vstack-container");
|
|
523
|
+
}
|
|
524
|
+
get $bodyContainer() {
|
|
525
|
+
return this.shadowRoot.querySelector("#body-container");
|
|
526
|
+
}
|
|
527
|
+
get $contactContainer() {
|
|
528
|
+
return this.shadowRoot.querySelector("#contact-container");
|
|
529
|
+
}
|
|
530
|
+
get $footerContainer() {
|
|
531
|
+
return this.shadowRoot.querySelector("#footer-container");
|
|
532
|
+
}
|
|
533
|
+
get $headerContainer() {
|
|
534
|
+
return this.shadowRoot.querySelector("#header-container");
|
|
535
|
+
}
|
|
536
|
+
get $imageContainer() {
|
|
537
|
+
return this.shadowRoot.querySelector("#image-container");
|
|
538
|
+
}
|
|
539
|
+
get backgroundImage() {
|
|
540
|
+
return this.getAttribute("background-image");
|
|
541
|
+
}
|
|
542
|
+
get $main() {
|
|
543
|
+
return this.shadowRoot.querySelector("#main");
|
|
544
|
+
}
|
|
545
|
+
get backgroundColor() {
|
|
546
|
+
return this.getAttribute("background-color") || "none";
|
|
547
|
+
}
|
|
548
|
+
get paddingVertical() {
|
|
549
|
+
return this.getAttribute("padding-vertical");
|
|
550
|
+
}
|
|
551
|
+
get paddingHorizontal() {
|
|
552
|
+
return this.getAttribute("padding-horizontal");
|
|
553
|
+
}
|
|
554
|
+
set paddingVertical(e) {
|
|
555
|
+
this.setAttribute("padding-vertical", `${e}`);
|
|
556
|
+
}
|
|
557
|
+
set paddingHorizontal(e) {
|
|
558
|
+
this.setAttribute("padding-horizontal", `${e}`);
|
|
559
|
+
}
|
|
560
|
+
get gap() {
|
|
561
|
+
return this.getAttribute("gap");
|
|
562
|
+
}
|
|
563
|
+
connectedCallback() {
|
|
564
|
+
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
565
|
+
}
|
|
566
|
+
attributeChangedCallback(e, t, r) {
|
|
567
|
+
if (t !== r) switch (e) {
|
|
568
|
+
case "background-image":
|
|
569
|
+
this.$imageContainer.setAttribute("background-image", r);
|
|
570
|
+
break;
|
|
571
|
+
case "gap":
|
|
572
|
+
this.$bodyVStackContainer.setAttribute("gap", r);
|
|
573
|
+
break;
|
|
574
|
+
case "background-color":
|
|
575
|
+
this.$bodyContainer.setAttribute("background-color", n.indexOf(r) > 0 ? r : "none");
|
|
576
|
+
break;
|
|
577
|
+
case "padding-vertical":
|
|
578
|
+
this.handlePaddingVerticalChange(r);
|
|
579
|
+
break;
|
|
580
|
+
case "padding-horizontal":
|
|
581
|
+
this.handlePaddingHorizontalChange(r);
|
|
582
|
+
break;
|
|
583
|
+
default: super.attributeChangedCallback(e, t, r);
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
handlePaddingVerticalChange(e) {
|
|
587
|
+
this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
|
|
588
|
+
}
|
|
589
|
+
handlePaddingHorizontalChange(e) {
|
|
590
|
+
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
|
+
}
|
|
629
592
|
};
|
|
593
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", b);
|
|
594
|
+
//#endregion
|
|
595
|
+
export { g as HStack, b as Page, _ as Spacer, m as Stack, h as VStack, u as alignItemsValues, l as directionValues, d as justifyContentValues, p as overflowValues, f as wrapValues };
|