@proximus/lavender-layout 1.1.0-alpha.9 → 1.1.0
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 +28 -0
- package/dist/Spacer.d.ts +8 -0
- package/dist/Stack.d.ts +86 -0
- package/dist/index.d.ts +3 -0
- package/dist/{index.js → index.es.js} +118 -72
- package/package.json +8 -29
package/dist/Page.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
|
+
import { Stack } from './Stack.ts';
|
|
3
|
+
import { Container } from '@proximus/lavender-container';
|
|
4
|
+
export declare class Page extends WithExtraAttributes {
|
|
5
|
+
template: (stickyContainer: boolean) => string;
|
|
6
|
+
constructor();
|
|
7
|
+
static get observedAttributes(): string[];
|
|
8
|
+
get $wideImage(): Container;
|
|
9
|
+
get $bodyVStackContainer(): Stack;
|
|
10
|
+
get $bodyContainer(): Container;
|
|
11
|
+
get $contactContainer(): Container;
|
|
12
|
+
get $footerContainer(): Container;
|
|
13
|
+
get $headerContainer(): Container;
|
|
14
|
+
get $imageContainer(): Container;
|
|
15
|
+
get backgroundImage(): string;
|
|
16
|
+
get $imageStickySlot(): Element;
|
|
17
|
+
get $main(): Container;
|
|
18
|
+
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;
|
|
24
|
+
connectedCallback(): void;
|
|
25
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
26
|
+
handlePaddingVerticalChange(newValue: string): void;
|
|
27
|
+
handlePaddingHorizontalChange(newValue: string): void;
|
|
28
|
+
}
|
package/dist/Spacer.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare class Spacer extends HTMLElement {
|
|
2
|
+
constructor();
|
|
3
|
+
static get observedAttributes(): string[];
|
|
4
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
5
|
+
connectedCallback(): void;
|
|
6
|
+
get grow(): string;
|
|
7
|
+
set grow(value: string);
|
|
8
|
+
}
|
package/dist/Stack.d.ts
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { WithExtraAttributes, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
|
|
2
|
+
export declare const directionValues: string[];
|
|
3
|
+
export declare const alignItemsValues: string[];
|
|
4
|
+
export declare const justifyContentValues: string[];
|
|
5
|
+
export declare const wrapValues: string[];
|
|
6
|
+
export declare const overflowValues: string[];
|
|
7
|
+
export declare class Stack extends WithExtraAttributes {
|
|
8
|
+
overflowXAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
|
+
template: string;
|
|
10
|
+
constructor();
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
static get observedAttributes(): string[];
|
|
13
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
14
|
+
updateOverflowX(name: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
15
|
+
updateFlexProperties(name: string, oldValue: string, newValue: string, attrValue: string[]): void;
|
|
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);
|
|
77
|
+
get $el(): HTMLDivElement;
|
|
78
|
+
}
|
|
79
|
+
export declare class VStack extends Stack {
|
|
80
|
+
constructor();
|
|
81
|
+
connectedCallback(): void;
|
|
82
|
+
}
|
|
83
|
+
export declare class HStack extends Stack {
|
|
84
|
+
constructor();
|
|
85
|
+
connectedCallback(): void;
|
|
86
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -1,29 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
d.replaceSync(
|
|
4
|
-
const
|
|
5
|
-
"after-element-none",
|
|
6
|
-
"after-element-2xs",
|
|
7
|
-
"after-element-xs",
|
|
8
|
-
"after-element-s",
|
|
9
|
-
"after-element-default",
|
|
10
|
-
"after-element-l",
|
|
11
|
-
"heading-to-subtitle",
|
|
12
|
-
"heading-to-content",
|
|
13
|
-
"inside-section-none",
|
|
14
|
-
"inside-section-xs",
|
|
15
|
-
"inside-section-s",
|
|
16
|
-
"inside-section-default",
|
|
17
|
-
"inside-section-l",
|
|
18
|
-
"between-sections"
|
|
19
|
-
], x = [
|
|
1
|
+
import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as b, gapValues as u, checkName as h, backgroundColorValues as f } from "@proximus/lavender-common";
|
|
2
|
+
const x = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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([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 only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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([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 only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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([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))}}', d = new CSSStyleSheet();
|
|
3
|
+
d.replaceSync(x);
|
|
4
|
+
const m = [
|
|
20
5
|
"",
|
|
21
6
|
"default",
|
|
22
7
|
"row",
|
|
23
8
|
"row-reverse",
|
|
24
9
|
"column",
|
|
25
10
|
"column-reverse"
|
|
26
|
-
],
|
|
11
|
+
], v = [
|
|
27
12
|
"",
|
|
28
13
|
"default",
|
|
29
14
|
"stretch",
|
|
@@ -31,7 +16,7 @@ const h = [
|
|
|
31
16
|
"flex-end",
|
|
32
17
|
"center",
|
|
33
18
|
"baseline"
|
|
34
|
-
],
|
|
19
|
+
], k = [
|
|
35
20
|
"",
|
|
36
21
|
"default",
|
|
37
22
|
"flex-start",
|
|
@@ -40,15 +25,20 @@ const h = [
|
|
|
40
25
|
"space-between",
|
|
41
26
|
"space-around",
|
|
42
27
|
"space-evenly"
|
|
43
|
-
],
|
|
44
|
-
class
|
|
28
|
+
], w = ["", "default", "nowrap", "wrap", "wrap-reverse"], y = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
|
+
class l extends c {
|
|
45
30
|
constructor() {
|
|
46
|
-
super(d), this.
|
|
31
|
+
super(d), this.overflowXAttributeDelegate = new b(
|
|
32
|
+
this,
|
|
33
|
+
"overflow-x",
|
|
34
|
+
(t) => t,
|
|
35
|
+
"--overflow-x"
|
|
36
|
+
), this.template = `<div class="flex-container">
|
|
47
37
|
<slot></slot>
|
|
48
38
|
</div>`, this.shadowRoot.innerHTML = this.template;
|
|
49
39
|
}
|
|
50
40
|
connectedCallback() {
|
|
51
|
-
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "
|
|
41
|
+
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");
|
|
52
42
|
}
|
|
53
43
|
static get observedAttributes() {
|
|
54
44
|
return [
|
|
@@ -77,7 +67,12 @@ class p extends l {
|
|
|
77
67
|
"wrap--mobile",
|
|
78
68
|
"wrap--tablet",
|
|
79
69
|
"wrap--laptop",
|
|
80
|
-
"wrap--desktop"
|
|
70
|
+
"wrap--desktop",
|
|
71
|
+
"overflow-x",
|
|
72
|
+
"overflow-x--mobile",
|
|
73
|
+
"overflow-x--tablet",
|
|
74
|
+
"overflow-x--laptop",
|
|
75
|
+
"overflow-x--desktop"
|
|
81
76
|
];
|
|
82
77
|
}
|
|
83
78
|
attributeChangedCallback(t, i, e) {
|
|
@@ -87,7 +82,7 @@ class p extends l {
|
|
|
87
82
|
case "gap--tablet":
|
|
88
83
|
case "gap--laptop":
|
|
89
84
|
case "gap--desktop":
|
|
90
|
-
this.updateFlexProperties(t, i, e,
|
|
85
|
+
this.updateFlexProperties(t, i, e, u);
|
|
91
86
|
break;
|
|
92
87
|
case "justify-content":
|
|
93
88
|
case "justify-content--mobile":
|
|
@@ -98,7 +93,7 @@ class p extends l {
|
|
|
98
93
|
t,
|
|
99
94
|
i,
|
|
100
95
|
e,
|
|
101
|
-
|
|
96
|
+
k
|
|
102
97
|
);
|
|
103
98
|
break;
|
|
104
99
|
case "align-items":
|
|
@@ -106,41 +101,59 @@ class p extends l {
|
|
|
106
101
|
case "align-items--tablet":
|
|
107
102
|
case "align-items--laptop":
|
|
108
103
|
case "align-items--desktop":
|
|
109
|
-
this.updateFlexProperties(t, i, e,
|
|
104
|
+
this.updateFlexProperties(t, i, e, v);
|
|
110
105
|
break;
|
|
111
106
|
case "wrap":
|
|
112
107
|
case "wrap--mobile":
|
|
113
108
|
case "wrap--tablet":
|
|
114
109
|
case "wrap--laptop":
|
|
115
110
|
case "wrap--desktop":
|
|
116
|
-
this.updateFlexProperties(t, i, e,
|
|
111
|
+
this.updateFlexProperties(t, i, e, w);
|
|
117
112
|
break;
|
|
118
113
|
case "direction":
|
|
119
114
|
case "direction--mobile":
|
|
120
115
|
case "direction--tablet":
|
|
121
116
|
case "direction--laptop":
|
|
122
117
|
case "direction--desktop":
|
|
123
|
-
this.updateFlexProperties(t, i, e,
|
|
118
|
+
this.updateFlexProperties(t, i, e, m);
|
|
119
|
+
break;
|
|
120
|
+
case "overflow-x":
|
|
121
|
+
case "overflow-x--mobile":
|
|
122
|
+
case "overflow-x--tablet":
|
|
123
|
+
case "overflow-x--laptop":
|
|
124
|
+
case "overflow-x--desktop":
|
|
125
|
+
this.updateOverflowX(t, i, e, y);
|
|
124
126
|
break;
|
|
125
127
|
default:
|
|
126
128
|
super.attributeChangedCallback(t, i, e);
|
|
127
129
|
break;
|
|
128
130
|
}
|
|
129
131
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
132
|
+
updateOverflowX(t, i, e, o) {
|
|
133
|
+
if (!h(o, e)) {
|
|
134
|
+
console.error(`${e} is not an allowed ${t} value`);
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
138
|
+
t,
|
|
139
|
+
i,
|
|
140
|
+
e
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
updateFlexProperties(t, i, e, o) {
|
|
144
|
+
this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
|
|
145
|
+
const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, r = [];
|
|
146
|
+
if (!p)
|
|
147
|
+
this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((s) => {
|
|
148
|
+
this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
|
|
136
149
|
});
|
|
137
150
|
else {
|
|
138
|
-
const
|
|
139
|
-
this.updateStyle(a,
|
|
151
|
+
const s = t.split("--")[1];
|
|
152
|
+
this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
|
|
140
153
|
}
|
|
141
154
|
}
|
|
142
|
-
updateStyle(t, i, e,
|
|
143
|
-
e
|
|
155
|
+
updateStyle(t, i, e, o) {
|
|
156
|
+
e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
|
|
144
157
|
`--flex-${t}--${i}-value`,
|
|
145
158
|
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
146
159
|
) : this.$el.style.setProperty(
|
|
@@ -148,9 +161,6 @@ class p extends l {
|
|
|
148
161
|
e
|
|
149
162
|
));
|
|
150
163
|
}
|
|
151
|
-
checkName(t, i) {
|
|
152
|
-
return t.includes(i);
|
|
153
|
-
}
|
|
154
164
|
get direction() {
|
|
155
165
|
return this.getAttribute("direction");
|
|
156
166
|
}
|
|
@@ -205,6 +215,12 @@ class p extends l {
|
|
|
205
215
|
set gapLaptop(t) {
|
|
206
216
|
this.setAttribute("gap--laptop", t);
|
|
207
217
|
}
|
|
218
|
+
get gapDesktop() {
|
|
219
|
+
return this.getAttribute("gap--desktop");
|
|
220
|
+
}
|
|
221
|
+
set gapDesktop(t) {
|
|
222
|
+
this.setAttribute("gap--desktop", t);
|
|
223
|
+
}
|
|
208
224
|
get justifyContent() {
|
|
209
225
|
return this.getAttribute("justify-content");
|
|
210
226
|
}
|
|
@@ -295,12 +311,42 @@ class p extends l {
|
|
|
295
311
|
set wrapDesktop(t) {
|
|
296
312
|
this.setAttribute("wrap--desktop", t);
|
|
297
313
|
}
|
|
314
|
+
get overflowX() {
|
|
315
|
+
return this.getAttribute("overflow-x");
|
|
316
|
+
}
|
|
317
|
+
set overflowX(t) {
|
|
318
|
+
this.setAttribute("overflow-x", t);
|
|
319
|
+
}
|
|
320
|
+
get overflowXMobile() {
|
|
321
|
+
return this.getAttribute("overflow-x--mobile");
|
|
322
|
+
}
|
|
323
|
+
set overflowXMobile(t) {
|
|
324
|
+
this.setAttribute("overflow-x--mobile", t);
|
|
325
|
+
}
|
|
326
|
+
get overflowXTablet() {
|
|
327
|
+
return this.getAttribute("overflow-x--tablet");
|
|
328
|
+
}
|
|
329
|
+
set overflowXTablet(t) {
|
|
330
|
+
this.setAttribute("overflow-x--tablet", t);
|
|
331
|
+
}
|
|
332
|
+
get overflowXLaptop() {
|
|
333
|
+
return this.getAttribute("overflow-x--laptop");
|
|
334
|
+
}
|
|
335
|
+
set overflowXLaptop(t) {
|
|
336
|
+
this.setAttribute("overflow-x--laptop", t);
|
|
337
|
+
}
|
|
338
|
+
get overflowXDesktop() {
|
|
339
|
+
return this.getAttribute("overflow-x--desktop");
|
|
340
|
+
}
|
|
341
|
+
set overflowXDesktop(t) {
|
|
342
|
+
this.setAttribute("overflow-x--desktop", t);
|
|
343
|
+
}
|
|
298
344
|
get $el() {
|
|
299
345
|
return this.shadowRoot.querySelector(".flex-container");
|
|
300
346
|
}
|
|
301
347
|
}
|
|
302
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
303
|
-
class
|
|
348
|
+
customElements.get("px-stack") || customElements.define("px-stack", l);
|
|
349
|
+
class A extends l {
|
|
304
350
|
constructor() {
|
|
305
351
|
super();
|
|
306
352
|
}
|
|
@@ -308,8 +354,8 @@ class y extends p {
|
|
|
308
354
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
309
355
|
}
|
|
310
356
|
}
|
|
311
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
312
|
-
class
|
|
357
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", A);
|
|
358
|
+
class C extends l {
|
|
313
359
|
constructor() {
|
|
314
360
|
super();
|
|
315
361
|
}
|
|
@@ -317,8 +363,8 @@ class A extends p {
|
|
|
317
363
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
318
364
|
}
|
|
319
365
|
}
|
|
320
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
321
|
-
class
|
|
366
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", C);
|
|
367
|
+
class $ extends HTMLElement {
|
|
322
368
|
constructor() {
|
|
323
369
|
super();
|
|
324
370
|
}
|
|
@@ -338,10 +384,10 @@ class v extends HTMLElement {
|
|
|
338
384
|
this.setAttribute("grow", t);
|
|
339
385
|
}
|
|
340
386
|
}
|
|
341
|
-
customElements.define("px-spacer",
|
|
342
|
-
const
|
|
343
|
-
g.replaceSync(
|
|
344
|
-
class
|
|
387
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", $);
|
|
388
|
+
const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
|
|
389
|
+
g.replaceSync(j);
|
|
390
|
+
class S extends c {
|
|
345
391
|
constructor() {
|
|
346
392
|
super(g), this.template = (t) => `
|
|
347
393
|
<px-container border-radius="none" padding="none">
|
|
@@ -351,7 +397,7 @@ class C extends l {
|
|
|
351
397
|
<px-spacer></px-spacer>
|
|
352
398
|
<px-vstack
|
|
353
399
|
id="header-vstack-container"
|
|
354
|
-
gap="
|
|
400
|
+
gap="s"
|
|
355
401
|
grow="${this.grow}"
|
|
356
402
|
basis="${this.basis}"
|
|
357
403
|
>
|
|
@@ -383,7 +429,7 @@ class C extends l {
|
|
|
383
429
|
${t ? ` <px-hstack>
|
|
384
430
|
<px-spacer></px-spacer>
|
|
385
431
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
386
|
-
<px-vstack gap="
|
|
432
|
+
<px-vstack gap="s">
|
|
387
433
|
<slot name="image-sticky-container"></slot>
|
|
388
434
|
</px-vstack>
|
|
389
435
|
</px-container>
|
|
@@ -401,7 +447,7 @@ class C extends l {
|
|
|
401
447
|
<px-spacer></px-spacer>
|
|
402
448
|
<px-vstack
|
|
403
449
|
id="body-vstack-container"
|
|
404
|
-
gap="
|
|
450
|
+
gap="l"
|
|
405
451
|
grow="${this.grow}"
|
|
406
452
|
basis="${this.basis}"
|
|
407
453
|
>
|
|
@@ -414,14 +460,14 @@ class C extends l {
|
|
|
414
460
|
id="contact-container"
|
|
415
461
|
border-radius="none"
|
|
416
462
|
id="main"
|
|
417
|
-
background-color="
|
|
463
|
+
background-color="surface-default"
|
|
418
464
|
padding="none"
|
|
419
465
|
padding-top="xl"
|
|
420
466
|
padding-bottom="xl"
|
|
421
467
|
>
|
|
422
468
|
<px-hstack>
|
|
423
469
|
<px-spacer></px-spacer>
|
|
424
|
-
<px-vstack gap="
|
|
470
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
425
471
|
<slot name="contact-container"></slot>
|
|
426
472
|
</px-vstack>
|
|
427
473
|
<px-spacer></px-spacer>
|
|
@@ -437,7 +483,7 @@ class C extends l {
|
|
|
437
483
|
>
|
|
438
484
|
<px-hstack>
|
|
439
485
|
<px-spacer></px-spacer>
|
|
440
|
-
<px-vstack gap="
|
|
486
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
441
487
|
<slot name="footer-container"></slot>
|
|
442
488
|
</px-vstack>
|
|
443
489
|
<px-spacer></px-spacer>
|
|
@@ -520,7 +566,7 @@ class C extends l {
|
|
|
520
566
|
case "background-color":
|
|
521
567
|
this.$bodyContainer.setAttribute(
|
|
522
568
|
"background-color",
|
|
523
|
-
|
|
569
|
+
f.indexOf(e) > 0 ? e : "none"
|
|
524
570
|
);
|
|
525
571
|
break;
|
|
526
572
|
case "padding-vertical":
|
|
@@ -540,16 +586,16 @@ class C extends l {
|
|
|
540
586
|
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;
|
|
541
587
|
}
|
|
542
588
|
}
|
|
543
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
589
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", S);
|
|
544
590
|
export {
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
591
|
+
C as HStack,
|
|
592
|
+
S as Page,
|
|
593
|
+
$ as Spacer,
|
|
594
|
+
l as Stack,
|
|
595
|
+
A as VStack,
|
|
596
|
+
v as alignItemsValues,
|
|
597
|
+
m as directionValues,
|
|
598
|
+
k as justifyContentValues,
|
|
599
|
+
y as overflowValues,
|
|
600
|
+
w as wrapValues
|
|
555
601
|
};
|
package/package.json
CHANGED
|
@@ -1,42 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-layout",
|
|
3
|
-
"version": "1.1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"
|
|
7
|
-
".": {
|
|
8
|
-
"types": "./src/index.ts",
|
|
9
|
-
"development": "./src/index.ts",
|
|
10
|
-
"default": "./dist/index.js"
|
|
11
|
-
},
|
|
12
|
-
"./src/*.css": {
|
|
13
|
-
"development": "src/*.css"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
5
|
+
"main": "dist/index.es.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
16
7
|
"files": [
|
|
17
|
-
"dist
|
|
8
|
+
"dist"
|
|
18
9
|
],
|
|
19
10
|
"type": "module",
|
|
20
11
|
"scripts": {
|
|
21
|
-
"
|
|
12
|
+
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
13
|
+
"clean": "rm -rf dist",
|
|
14
|
+
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json",
|
|
22
15
|
"test": "vitest run --coverage"
|
|
23
16
|
},
|
|
24
17
|
"publishConfig": {
|
|
25
18
|
"access": "public"
|
|
26
19
|
},
|
|
27
|
-
"gitHead": "
|
|
28
|
-
"lerna": {
|
|
29
|
-
"command": {
|
|
30
|
-
"publish": {
|
|
31
|
-
"assets": [
|
|
32
|
-
"CHANGELOG.md",
|
|
33
|
-
"package.json",
|
|
34
|
-
"dist/*.js",
|
|
35
|
-
"dist/*.cjs",
|
|
36
|
-
"dist/css/**/*.css",
|
|
37
|
-
"dist/js/**/*.js"
|
|
38
|
-
]
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
20
|
+
"gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
|
|
42
21
|
}
|