@proximus/lavender-layout 1.1.0-alpha.8 → 1.1.0-beta.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 -74
- package/package.json +8 -27
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,19 +67,22 @@ 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) {
|
|
84
|
-
if (t.indexOf("direction") > -1 && !["column", "row"].includes(e))
|
|
85
|
-
throw new Error("Invalid direction");
|
|
86
79
|
switch (t) {
|
|
87
80
|
case "gap":
|
|
88
81
|
case "gap--mobile":
|
|
89
82
|
case "gap--tablet":
|
|
90
83
|
case "gap--laptop":
|
|
91
84
|
case "gap--desktop":
|
|
92
|
-
this.updateFlexProperties(t, i, e,
|
|
85
|
+
this.updateFlexProperties(t, i, e, u);
|
|
93
86
|
break;
|
|
94
87
|
case "justify-content":
|
|
95
88
|
case "justify-content--mobile":
|
|
@@ -100,7 +93,7 @@ class p extends l {
|
|
|
100
93
|
t,
|
|
101
94
|
i,
|
|
102
95
|
e,
|
|
103
|
-
|
|
96
|
+
k
|
|
104
97
|
);
|
|
105
98
|
break;
|
|
106
99
|
case "align-items":
|
|
@@ -108,41 +101,59 @@ class p extends l {
|
|
|
108
101
|
case "align-items--tablet":
|
|
109
102
|
case "align-items--laptop":
|
|
110
103
|
case "align-items--desktop":
|
|
111
|
-
this.updateFlexProperties(t, i, e,
|
|
104
|
+
this.updateFlexProperties(t, i, e, v);
|
|
112
105
|
break;
|
|
113
106
|
case "wrap":
|
|
114
107
|
case "wrap--mobile":
|
|
115
108
|
case "wrap--tablet":
|
|
116
109
|
case "wrap--laptop":
|
|
117
110
|
case "wrap--desktop":
|
|
118
|
-
this.updateFlexProperties(t, i, e,
|
|
111
|
+
this.updateFlexProperties(t, i, e, w);
|
|
119
112
|
break;
|
|
120
113
|
case "direction":
|
|
121
114
|
case "direction--mobile":
|
|
122
115
|
case "direction--tablet":
|
|
123
116
|
case "direction--laptop":
|
|
124
117
|
case "direction--desktop":
|
|
125
|
-
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);
|
|
126
126
|
break;
|
|
127
127
|
default:
|
|
128
128
|
super.attributeChangedCallback(t, i, e);
|
|
129
129
|
break;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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);
|
|
138
149
|
});
|
|
139
150
|
else {
|
|
140
|
-
const
|
|
141
|
-
this.updateStyle(a,
|
|
151
|
+
const s = t.split("--")[1];
|
|
152
|
+
this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
|
|
142
153
|
}
|
|
143
154
|
}
|
|
144
|
-
updateStyle(t, i, e,
|
|
145
|
-
e
|
|
155
|
+
updateStyle(t, i, e, o) {
|
|
156
|
+
e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
|
|
146
157
|
`--flex-${t}--${i}-value`,
|
|
147
158
|
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
148
159
|
) : this.$el.style.setProperty(
|
|
@@ -150,9 +161,6 @@ class p extends l {
|
|
|
150
161
|
e
|
|
151
162
|
));
|
|
152
163
|
}
|
|
153
|
-
checkName(t, i) {
|
|
154
|
-
return t.includes(i);
|
|
155
|
-
}
|
|
156
164
|
get direction() {
|
|
157
165
|
return this.getAttribute("direction");
|
|
158
166
|
}
|
|
@@ -207,6 +215,12 @@ class p extends l {
|
|
|
207
215
|
set gapLaptop(t) {
|
|
208
216
|
this.setAttribute("gap--laptop", t);
|
|
209
217
|
}
|
|
218
|
+
get gapDesktop() {
|
|
219
|
+
return this.getAttribute("gap--desktop");
|
|
220
|
+
}
|
|
221
|
+
set gapDesktop(t) {
|
|
222
|
+
this.setAttribute("gap--desktop", t);
|
|
223
|
+
}
|
|
210
224
|
get justifyContent() {
|
|
211
225
|
return this.getAttribute("justify-content");
|
|
212
226
|
}
|
|
@@ -297,12 +311,42 @@ class p extends l {
|
|
|
297
311
|
set wrapDesktop(t) {
|
|
298
312
|
this.setAttribute("wrap--desktop", t);
|
|
299
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
|
+
}
|
|
300
344
|
get $el() {
|
|
301
345
|
return this.shadowRoot.querySelector(".flex-container");
|
|
302
346
|
}
|
|
303
347
|
}
|
|
304
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
305
|
-
class
|
|
348
|
+
customElements.get("px-stack") || customElements.define("px-stack", l);
|
|
349
|
+
class A extends l {
|
|
306
350
|
constructor() {
|
|
307
351
|
super();
|
|
308
352
|
}
|
|
@@ -310,8 +354,8 @@ class y extends p {
|
|
|
310
354
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
311
355
|
}
|
|
312
356
|
}
|
|
313
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
314
|
-
class
|
|
357
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", A);
|
|
358
|
+
class C extends l {
|
|
315
359
|
constructor() {
|
|
316
360
|
super();
|
|
317
361
|
}
|
|
@@ -319,8 +363,8 @@ class A extends p {
|
|
|
319
363
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
320
364
|
}
|
|
321
365
|
}
|
|
322
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
323
|
-
class
|
|
366
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", C);
|
|
367
|
+
class $ extends HTMLElement {
|
|
324
368
|
constructor() {
|
|
325
369
|
super();
|
|
326
370
|
}
|
|
@@ -340,10 +384,10 @@ class v extends HTMLElement {
|
|
|
340
384
|
this.setAttribute("grow", t);
|
|
341
385
|
}
|
|
342
386
|
}
|
|
343
|
-
customElements.define("px-spacer",
|
|
344
|
-
const
|
|
345
|
-
g.replaceSync(
|
|
346
|
-
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 {
|
|
347
391
|
constructor() {
|
|
348
392
|
super(g), this.template = (t) => `
|
|
349
393
|
<px-container border-radius="none" padding="none">
|
|
@@ -353,7 +397,7 @@ class C extends l {
|
|
|
353
397
|
<px-spacer></px-spacer>
|
|
354
398
|
<px-vstack
|
|
355
399
|
id="header-vstack-container"
|
|
356
|
-
gap="
|
|
400
|
+
gap="s"
|
|
357
401
|
grow="${this.grow}"
|
|
358
402
|
basis="${this.basis}"
|
|
359
403
|
>
|
|
@@ -385,7 +429,7 @@ class C extends l {
|
|
|
385
429
|
${t ? ` <px-hstack>
|
|
386
430
|
<px-spacer></px-spacer>
|
|
387
431
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
388
|
-
<px-vstack gap="
|
|
432
|
+
<px-vstack gap="s">
|
|
389
433
|
<slot name="image-sticky-container"></slot>
|
|
390
434
|
</px-vstack>
|
|
391
435
|
</px-container>
|
|
@@ -403,7 +447,7 @@ class C extends l {
|
|
|
403
447
|
<px-spacer></px-spacer>
|
|
404
448
|
<px-vstack
|
|
405
449
|
id="body-vstack-container"
|
|
406
|
-
gap="
|
|
450
|
+
gap="l"
|
|
407
451
|
grow="${this.grow}"
|
|
408
452
|
basis="${this.basis}"
|
|
409
453
|
>
|
|
@@ -416,14 +460,14 @@ class C extends l {
|
|
|
416
460
|
id="contact-container"
|
|
417
461
|
border-radius="none"
|
|
418
462
|
id="main"
|
|
419
|
-
background-color="
|
|
463
|
+
background-color="surface-default"
|
|
420
464
|
padding="none"
|
|
421
465
|
padding-top="xl"
|
|
422
466
|
padding-bottom="xl"
|
|
423
467
|
>
|
|
424
468
|
<px-hstack>
|
|
425
469
|
<px-spacer></px-spacer>
|
|
426
|
-
<px-vstack gap="
|
|
470
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
427
471
|
<slot name="contact-container"></slot>
|
|
428
472
|
</px-vstack>
|
|
429
473
|
<px-spacer></px-spacer>
|
|
@@ -439,7 +483,7 @@ class C extends l {
|
|
|
439
483
|
>
|
|
440
484
|
<px-hstack>
|
|
441
485
|
<px-spacer></px-spacer>
|
|
442
|
-
<px-vstack gap="
|
|
486
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
443
487
|
<slot name="footer-container"></slot>
|
|
444
488
|
</px-vstack>
|
|
445
489
|
<px-spacer></px-spacer>
|
|
@@ -522,7 +566,7 @@ class C extends l {
|
|
|
522
566
|
case "background-color":
|
|
523
567
|
this.$bodyContainer.setAttribute(
|
|
524
568
|
"background-color",
|
|
525
|
-
|
|
569
|
+
f.indexOf(e) > 0 ? e : "none"
|
|
526
570
|
);
|
|
527
571
|
break;
|
|
528
572
|
case "padding-vertical":
|
|
@@ -542,16 +586,16 @@ class C extends l {
|
|
|
542
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;
|
|
543
587
|
}
|
|
544
588
|
}
|
|
545
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
589
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", S);
|
|
546
590
|
export {
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
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
|
|
557
601
|
};
|
package/package.json
CHANGED
|
@@ -1,40 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-layout",
|
|
3
|
-
"version": "1.1.0-
|
|
3
|
+
"version": "1.1.0-beta.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/css/**/*.css"
|
|
36
|
-
]
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
20
|
+
"gitHead": "460ebd4c7e0171baabc0871a7058f475b5c9adbb"
|
|
40
21
|
}
|