@proximus/lavender-layout 1.1.0-alpha.3 → 1.1.0-alpha.30
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.es.js +601 -0
- package/package.json +8 -27
- package/dist/index.js +0 -604
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
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,601 @@
|
|
|
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 = [
|
|
5
|
+
"",
|
|
6
|
+
"default",
|
|
7
|
+
"row",
|
|
8
|
+
"row-reverse",
|
|
9
|
+
"column",
|
|
10
|
+
"column-reverse"
|
|
11
|
+
], v = [
|
|
12
|
+
"",
|
|
13
|
+
"default",
|
|
14
|
+
"stretch",
|
|
15
|
+
"flex-start",
|
|
16
|
+
"flex-end",
|
|
17
|
+
"center",
|
|
18
|
+
"baseline"
|
|
19
|
+
], k = [
|
|
20
|
+
"",
|
|
21
|
+
"default",
|
|
22
|
+
"flex-start",
|
|
23
|
+
"flex-end",
|
|
24
|
+
"center",
|
|
25
|
+
"space-between",
|
|
26
|
+
"space-around",
|
|
27
|
+
"space-evenly"
|
|
28
|
+
], w = ["", "default", "nowrap", "wrap", "wrap-reverse"], y = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
|
+
class l extends c {
|
|
30
|
+
constructor() {
|
|
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">
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</div>`, this.shadowRoot.innerHTML = this.template;
|
|
39
|
+
}
|
|
40
|
+
connectedCallback() {
|
|
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");
|
|
42
|
+
}
|
|
43
|
+
static get observedAttributes() {
|
|
44
|
+
return [
|
|
45
|
+
...super.observedAttributes,
|
|
46
|
+
"direction",
|
|
47
|
+
"direction--mobile",
|
|
48
|
+
"direction--tablet",
|
|
49
|
+
"direction--laptop",
|
|
50
|
+
"direction--desktop",
|
|
51
|
+
"gap",
|
|
52
|
+
"gap--mobile",
|
|
53
|
+
"gap--tablet",
|
|
54
|
+
"gap--laptop",
|
|
55
|
+
"gap--desktop",
|
|
56
|
+
"justify-content",
|
|
57
|
+
"justify-content--mobile",
|
|
58
|
+
"justify-content--tablet",
|
|
59
|
+
"justify-content--laptop",
|
|
60
|
+
"justify-content--desktop",
|
|
61
|
+
"align-items",
|
|
62
|
+
"align-items--mobile",
|
|
63
|
+
"align-items--tablet",
|
|
64
|
+
"align-items--laptop",
|
|
65
|
+
"align-items--desktop",
|
|
66
|
+
"wrap",
|
|
67
|
+
"wrap--mobile",
|
|
68
|
+
"wrap--tablet",
|
|
69
|
+
"wrap--laptop",
|
|
70
|
+
"wrap--desktop",
|
|
71
|
+
"overflow-x",
|
|
72
|
+
"overflow-x--mobile",
|
|
73
|
+
"overflow-x--tablet",
|
|
74
|
+
"overflow-x--laptop",
|
|
75
|
+
"overflow-x--desktop"
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
attributeChangedCallback(t, i, e) {
|
|
79
|
+
switch (t) {
|
|
80
|
+
case "gap":
|
|
81
|
+
case "gap--mobile":
|
|
82
|
+
case "gap--tablet":
|
|
83
|
+
case "gap--laptop":
|
|
84
|
+
case "gap--desktop":
|
|
85
|
+
this.updateFlexProperties(t, i, e, u);
|
|
86
|
+
break;
|
|
87
|
+
case "justify-content":
|
|
88
|
+
case "justify-content--mobile":
|
|
89
|
+
case "justify-content--tablet":
|
|
90
|
+
case "justify-content--laptop":
|
|
91
|
+
case "justify-content--desktop":
|
|
92
|
+
this.updateFlexProperties(
|
|
93
|
+
t,
|
|
94
|
+
i,
|
|
95
|
+
e,
|
|
96
|
+
k
|
|
97
|
+
);
|
|
98
|
+
break;
|
|
99
|
+
case "align-items":
|
|
100
|
+
case "align-items--mobile":
|
|
101
|
+
case "align-items--tablet":
|
|
102
|
+
case "align-items--laptop":
|
|
103
|
+
case "align-items--desktop":
|
|
104
|
+
this.updateFlexProperties(t, i, e, v);
|
|
105
|
+
break;
|
|
106
|
+
case "wrap":
|
|
107
|
+
case "wrap--mobile":
|
|
108
|
+
case "wrap--tablet":
|
|
109
|
+
case "wrap--laptop":
|
|
110
|
+
case "wrap--desktop":
|
|
111
|
+
this.updateFlexProperties(t, i, e, w);
|
|
112
|
+
break;
|
|
113
|
+
case "direction":
|
|
114
|
+
case "direction--mobile":
|
|
115
|
+
case "direction--tablet":
|
|
116
|
+
case "direction--laptop":
|
|
117
|
+
case "direction--desktop":
|
|
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
|
+
break;
|
|
127
|
+
default:
|
|
128
|
+
super.attributeChangedCallback(t, i, e);
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
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);
|
|
149
|
+
});
|
|
150
|
+
else {
|
|
151
|
+
const s = t.split("--")[1];
|
|
152
|
+
this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
updateStyle(t, i, e, o) {
|
|
156
|
+
e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
|
|
157
|
+
`--flex-${t}--${i}-value`,
|
|
158
|
+
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
159
|
+
) : this.$el.style.setProperty(
|
|
160
|
+
`--flex-${t}--${i}-value`,
|
|
161
|
+
e
|
|
162
|
+
));
|
|
163
|
+
}
|
|
164
|
+
get direction() {
|
|
165
|
+
return this.getAttribute("direction");
|
|
166
|
+
}
|
|
167
|
+
set direction(t) {
|
|
168
|
+
this.setAttribute("direction", t);
|
|
169
|
+
}
|
|
170
|
+
get directionMobile() {
|
|
171
|
+
return this.getAttribute("direction--mobile");
|
|
172
|
+
}
|
|
173
|
+
set directionMobile(t) {
|
|
174
|
+
this.setAttribute("direction--mobile", t);
|
|
175
|
+
}
|
|
176
|
+
get directionTablet() {
|
|
177
|
+
return this.getAttribute("direction--tablet");
|
|
178
|
+
}
|
|
179
|
+
set directionTablet(t) {
|
|
180
|
+
this.setAttribute("direction--tablet", t);
|
|
181
|
+
}
|
|
182
|
+
get directionLaptop() {
|
|
183
|
+
return this.getAttribute("direction--laptop");
|
|
184
|
+
}
|
|
185
|
+
set directionLaptop(t) {
|
|
186
|
+
this.setAttribute("direction--laptop", t);
|
|
187
|
+
}
|
|
188
|
+
get directionDesktop() {
|
|
189
|
+
return this.getAttribute("direction--desktop");
|
|
190
|
+
}
|
|
191
|
+
set directionDesktop(t) {
|
|
192
|
+
this.setAttribute("direction--desktop", t);
|
|
193
|
+
}
|
|
194
|
+
get gap() {
|
|
195
|
+
return this.getAttribute("gap");
|
|
196
|
+
}
|
|
197
|
+
set gap(t) {
|
|
198
|
+
this.setAttribute("gap", t);
|
|
199
|
+
}
|
|
200
|
+
get gapMobile() {
|
|
201
|
+
return this.getAttribute("gap--mobile");
|
|
202
|
+
}
|
|
203
|
+
set gapMobile(t) {
|
|
204
|
+
this.setAttribute("gap--mobile", t);
|
|
205
|
+
}
|
|
206
|
+
get gapTablet() {
|
|
207
|
+
return this.getAttribute("gap--tablet");
|
|
208
|
+
}
|
|
209
|
+
set gapTablet(t) {
|
|
210
|
+
this.setAttribute("gap--tablet", t);
|
|
211
|
+
}
|
|
212
|
+
get gapLaptop() {
|
|
213
|
+
return this.getAttribute("gap--laptop");
|
|
214
|
+
}
|
|
215
|
+
set gapLaptop(t) {
|
|
216
|
+
this.setAttribute("gap--laptop", t);
|
|
217
|
+
}
|
|
218
|
+
get gapDesktop() {
|
|
219
|
+
return this.getAttribute("gap--desktop");
|
|
220
|
+
}
|
|
221
|
+
set gapDesktop(t) {
|
|
222
|
+
this.setAttribute("gap--desktop", t);
|
|
223
|
+
}
|
|
224
|
+
get justifyContent() {
|
|
225
|
+
return this.getAttribute("justify-content");
|
|
226
|
+
}
|
|
227
|
+
set justifyContent(t) {
|
|
228
|
+
this.setAttribute("justify-content", t);
|
|
229
|
+
}
|
|
230
|
+
get justifyContentMobile() {
|
|
231
|
+
return this.getAttribute("justify-content--mobile");
|
|
232
|
+
}
|
|
233
|
+
set justifyContentMobile(t) {
|
|
234
|
+
this.setAttribute("justify-content--mobile", t);
|
|
235
|
+
}
|
|
236
|
+
get justifyContentTablet() {
|
|
237
|
+
return this.getAttribute("justify-content--tablet");
|
|
238
|
+
}
|
|
239
|
+
set justifyContentTablet(t) {
|
|
240
|
+
this.setAttribute("justify-content--tablet", t);
|
|
241
|
+
}
|
|
242
|
+
get justifyContentLaptop() {
|
|
243
|
+
return this.getAttribute("justify-content--laptop");
|
|
244
|
+
}
|
|
245
|
+
set justifyContentLaptop(t) {
|
|
246
|
+
this.setAttribute("justify-content--laptop", t);
|
|
247
|
+
}
|
|
248
|
+
get justifyContentDesktop() {
|
|
249
|
+
return this.getAttribute("justify-content--desktop");
|
|
250
|
+
}
|
|
251
|
+
set justifyContentDesktop(t) {
|
|
252
|
+
this.setAttribute("justify-content--desktop", t);
|
|
253
|
+
}
|
|
254
|
+
get alignItems() {
|
|
255
|
+
return this.getAttribute("align-items");
|
|
256
|
+
}
|
|
257
|
+
set alignItems(t) {
|
|
258
|
+
this.setAttribute("align-items", t);
|
|
259
|
+
}
|
|
260
|
+
get alignItemsMobile() {
|
|
261
|
+
return this.getAttribute("align-items--mobile");
|
|
262
|
+
}
|
|
263
|
+
set alignItemsMobile(t) {
|
|
264
|
+
this.setAttribute("align-items--mobile", t);
|
|
265
|
+
}
|
|
266
|
+
get alignItemsTablet() {
|
|
267
|
+
return this.getAttribute("align-items--tablet");
|
|
268
|
+
}
|
|
269
|
+
set alignItemsTablet(t) {
|
|
270
|
+
this.setAttribute("align-items--tablet", t);
|
|
271
|
+
}
|
|
272
|
+
get alignItemsLaptop() {
|
|
273
|
+
return this.getAttribute("align-items--laptop");
|
|
274
|
+
}
|
|
275
|
+
set alignItemsLaptop(t) {
|
|
276
|
+
this.setAttribute("align-items--laptop", t);
|
|
277
|
+
}
|
|
278
|
+
get alignItemsDesktop() {
|
|
279
|
+
return this.getAttribute("align-items--desktop");
|
|
280
|
+
}
|
|
281
|
+
set alignItemsDesktop(t) {
|
|
282
|
+
this.setAttribute("align-items--desktop", t);
|
|
283
|
+
}
|
|
284
|
+
get wrap() {
|
|
285
|
+
return this.getAttribute("wrap");
|
|
286
|
+
}
|
|
287
|
+
set wrap(t) {
|
|
288
|
+
this.setAttribute("wrap", t);
|
|
289
|
+
}
|
|
290
|
+
get wrapMobile() {
|
|
291
|
+
return this.getAttribute("wrap--mobile");
|
|
292
|
+
}
|
|
293
|
+
set wrapMobile(t) {
|
|
294
|
+
this.setAttribute("wrap--mobile", t);
|
|
295
|
+
}
|
|
296
|
+
get wrapTablet() {
|
|
297
|
+
return this.getAttribute("wrap--tablet");
|
|
298
|
+
}
|
|
299
|
+
set wrapTablet(t) {
|
|
300
|
+
this.setAttribute("wrap--tablet", t);
|
|
301
|
+
}
|
|
302
|
+
get wrapLaptop() {
|
|
303
|
+
return this.getAttribute("wrap--laptop");
|
|
304
|
+
}
|
|
305
|
+
set wrapLaptop(t) {
|
|
306
|
+
this.setAttribute("wrap--laptop", t);
|
|
307
|
+
}
|
|
308
|
+
get wrapDesktop() {
|
|
309
|
+
return this.getAttribute("wrap--desktop");
|
|
310
|
+
}
|
|
311
|
+
set wrapDesktop(t) {
|
|
312
|
+
this.setAttribute("wrap--desktop", t);
|
|
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
|
+
}
|
|
344
|
+
get $el() {
|
|
345
|
+
return this.shadowRoot.querySelector(".flex-container");
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
customElements.get("px-stack") || customElements.define("px-stack", l);
|
|
349
|
+
class A extends l {
|
|
350
|
+
constructor() {
|
|
351
|
+
super();
|
|
352
|
+
}
|
|
353
|
+
connectedCallback() {
|
|
354
|
+
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", A);
|
|
358
|
+
class C extends l {
|
|
359
|
+
constructor() {
|
|
360
|
+
super();
|
|
361
|
+
}
|
|
362
|
+
connectedCallback() {
|
|
363
|
+
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", C);
|
|
367
|
+
class $ extends HTMLElement {
|
|
368
|
+
constructor() {
|
|
369
|
+
super();
|
|
370
|
+
}
|
|
371
|
+
static get observedAttributes() {
|
|
372
|
+
return ["grow"];
|
|
373
|
+
}
|
|
374
|
+
attributeChangedCallback(t, i, e) {
|
|
375
|
+
t === "grow" && (this.style.flexGrow = e);
|
|
376
|
+
}
|
|
377
|
+
connectedCallback() {
|
|
378
|
+
this.style.flexGrow = this.getAttribute("grow") || "1";
|
|
379
|
+
}
|
|
380
|
+
get grow() {
|
|
381
|
+
return this.getAttribute("grow");
|
|
382
|
+
}
|
|
383
|
+
set grow(t) {
|
|
384
|
+
this.setAttribute("grow", t);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
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 {
|
|
391
|
+
constructor() {
|
|
392
|
+
super(g), this.template = (t) => `
|
|
393
|
+
<px-container border-radius="none" padding="none">
|
|
394
|
+
<px-vstack>
|
|
395
|
+
<px-container id="header-container" border-radius="none">
|
|
396
|
+
<px-hstack>
|
|
397
|
+
<px-spacer></px-spacer>
|
|
398
|
+
<px-vstack
|
|
399
|
+
id="header-vstack-container"
|
|
400
|
+
gap="s"
|
|
401
|
+
grow="${this.grow}"
|
|
402
|
+
basis="${this.basis}"
|
|
403
|
+
>
|
|
404
|
+
<slot name="header-container"></slot>
|
|
405
|
+
</px-vstack>
|
|
406
|
+
<px-spacer></px-spacer>
|
|
407
|
+
</px-hstack>
|
|
408
|
+
</px-container>
|
|
409
|
+
<px-container
|
|
410
|
+
id="image-container"
|
|
411
|
+
border-radius="none"
|
|
412
|
+
padding="none"
|
|
413
|
+
padding-top="xl"
|
|
414
|
+
id="image-box"
|
|
415
|
+
background-size="cover"
|
|
416
|
+
background-position="top center"
|
|
417
|
+
padding-bottom="xl"
|
|
418
|
+
border-radius="none"
|
|
419
|
+
bgimg="${this.backgroundImage}"
|
|
420
|
+
>
|
|
421
|
+
<px-hstack>
|
|
422
|
+
<px-spacer></px-spacer>
|
|
423
|
+
<px-vstack grow="${this.grow}" basis="${this.basis}">
|
|
424
|
+
<slot name="image-container"></slot>
|
|
425
|
+
</px-vstack>
|
|
426
|
+
<px-spacer></px-spacer>
|
|
427
|
+
</px-hstack>
|
|
428
|
+
</px-container>
|
|
429
|
+
${t ? ` <px-hstack>
|
|
430
|
+
<px-spacer></px-spacer>
|
|
431
|
+
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
432
|
+
<px-vstack gap="s">
|
|
433
|
+
<slot name="image-sticky-container"></slot>
|
|
434
|
+
</px-vstack>
|
|
435
|
+
</px-container>
|
|
436
|
+
<px-spacer></px-spacer>
|
|
437
|
+
</px-hstack>` : ""}
|
|
438
|
+
<px-container
|
|
439
|
+
id="body-container"
|
|
440
|
+
id="main"
|
|
441
|
+
background-color="${this.backgroundColor}"
|
|
442
|
+
padding="none"
|
|
443
|
+
padding-top="xl"
|
|
444
|
+
padding-bottom="xl"
|
|
445
|
+
>
|
|
446
|
+
<px-hstack>
|
|
447
|
+
<px-spacer></px-spacer>
|
|
448
|
+
<px-vstack
|
|
449
|
+
id="body-vstack-container"
|
|
450
|
+
gap="l"
|
|
451
|
+
grow="${this.grow}"
|
|
452
|
+
basis="${this.basis}"
|
|
453
|
+
>
|
|
454
|
+
<slot name="body-container"></slot>
|
|
455
|
+
</px-vstack>
|
|
456
|
+
<px-spacer></px-spacer>
|
|
457
|
+
</px-hstack>
|
|
458
|
+
</px-container>
|
|
459
|
+
<px-container
|
|
460
|
+
id="contact-container"
|
|
461
|
+
border-radius="none"
|
|
462
|
+
id="main"
|
|
463
|
+
background-color="surface-default"
|
|
464
|
+
padding="none"
|
|
465
|
+
padding-top="xl"
|
|
466
|
+
padding-bottom="xl"
|
|
467
|
+
>
|
|
468
|
+
<px-hstack>
|
|
469
|
+
<px-spacer></px-spacer>
|
|
470
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
471
|
+
<slot name="contact-container"></slot>
|
|
472
|
+
</px-vstack>
|
|
473
|
+
<px-spacer></px-spacer>
|
|
474
|
+
</px-hstack>
|
|
475
|
+
</px-container>
|
|
476
|
+
<px-container
|
|
477
|
+
id="footer-container"
|
|
478
|
+
background-color="none"
|
|
479
|
+
border-radius="none"
|
|
480
|
+
style="background-color: rgb(108, 66, 156)"
|
|
481
|
+
padding-top="xl"
|
|
482
|
+
padding-bottom="xl"
|
|
483
|
+
>
|
|
484
|
+
<px-hstack>
|
|
485
|
+
<px-spacer></px-spacer>
|
|
486
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
487
|
+
<slot name="footer-container"></slot>
|
|
488
|
+
</px-vstack>
|
|
489
|
+
<px-spacer></px-spacer>
|
|
490
|
+
</px-hstack>
|
|
491
|
+
</px-container>
|
|
492
|
+
</px-vstack>
|
|
493
|
+
</px-container>
|
|
494
|
+
`, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
|
|
495
|
+
}
|
|
496
|
+
static get observedAttributes() {
|
|
497
|
+
return [
|
|
498
|
+
...super.observedAttributes,
|
|
499
|
+
"background-image",
|
|
500
|
+
"gap",
|
|
501
|
+
"background-color",
|
|
502
|
+
"padding-vertical",
|
|
503
|
+
"padding-horizontal"
|
|
504
|
+
];
|
|
505
|
+
}
|
|
506
|
+
get $wideImage() {
|
|
507
|
+
return this.shadowRoot.querySelector("#image-box");
|
|
508
|
+
}
|
|
509
|
+
get $bodyVStackContainer() {
|
|
510
|
+
return this.shadowRoot.querySelector("#header-vstack-container");
|
|
511
|
+
}
|
|
512
|
+
get $bodyContainer() {
|
|
513
|
+
return this.shadowRoot.querySelector("#body-container");
|
|
514
|
+
}
|
|
515
|
+
get $contactContainer() {
|
|
516
|
+
return this.shadowRoot.querySelector("#contact-container");
|
|
517
|
+
}
|
|
518
|
+
get $footerContainer() {
|
|
519
|
+
return this.shadowRoot.querySelector("#footer-container");
|
|
520
|
+
}
|
|
521
|
+
get $headerContainer() {
|
|
522
|
+
return this.shadowRoot.querySelector("#header-container");
|
|
523
|
+
}
|
|
524
|
+
get $imageContainer() {
|
|
525
|
+
return this.shadowRoot.querySelector("#image-container");
|
|
526
|
+
}
|
|
527
|
+
get backgroundImage() {
|
|
528
|
+
return this.getAttribute("background-image");
|
|
529
|
+
}
|
|
530
|
+
get $imageStickySlot() {
|
|
531
|
+
return this.querySelector('*[slot="image-sticky-container"]');
|
|
532
|
+
}
|
|
533
|
+
get $main() {
|
|
534
|
+
return this.shadowRoot.querySelector("#main");
|
|
535
|
+
}
|
|
536
|
+
get backgroundColor() {
|
|
537
|
+
return this.getAttribute("background-color") || "none";
|
|
538
|
+
}
|
|
539
|
+
get paddingVertical() {
|
|
540
|
+
return this.getAttribute("padding-vertical");
|
|
541
|
+
}
|
|
542
|
+
get paddingHorizontal() {
|
|
543
|
+
return this.getAttribute("padding-horizontal");
|
|
544
|
+
}
|
|
545
|
+
set paddingVertical(t) {
|
|
546
|
+
this.setAttribute("padding-vertical", t);
|
|
547
|
+
}
|
|
548
|
+
set paddingHorizontal(t) {
|
|
549
|
+
this.setAttribute("padding-horizontal", t);
|
|
550
|
+
}
|
|
551
|
+
get gap() {
|
|
552
|
+
return this.getAttribute("gap");
|
|
553
|
+
}
|
|
554
|
+
connectedCallback() {
|
|
555
|
+
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
556
|
+
}
|
|
557
|
+
attributeChangedCallback(t, i, e) {
|
|
558
|
+
if (i !== e)
|
|
559
|
+
switch (t) {
|
|
560
|
+
case "background-image":
|
|
561
|
+
this.$imageContainer.setAttribute("background-image", e);
|
|
562
|
+
break;
|
|
563
|
+
case "gap":
|
|
564
|
+
this.$bodyVStackContainer.setAttribute("gap", e);
|
|
565
|
+
break;
|
|
566
|
+
case "background-color":
|
|
567
|
+
this.$bodyContainer.setAttribute(
|
|
568
|
+
"background-color",
|
|
569
|
+
f.indexOf(e) > 0 ? e : "none"
|
|
570
|
+
);
|
|
571
|
+
break;
|
|
572
|
+
case "padding-vertical":
|
|
573
|
+
this.handlePaddingVerticalChange(e);
|
|
574
|
+
break;
|
|
575
|
+
case "padding-horizontal":
|
|
576
|
+
this.handlePaddingHorizontalChange(e);
|
|
577
|
+
break;
|
|
578
|
+
default:
|
|
579
|
+
super.attributeChangedCallback(t, i, e);
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
handlePaddingVerticalChange(t) {
|
|
583
|
+
this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
|
|
584
|
+
}
|
|
585
|
+
handlePaddingHorizontalChange(t) {
|
|
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;
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", S);
|
|
590
|
+
export {
|
|
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
|
|
601
|
+
};
|
package/package.json
CHANGED
|
@@ -1,40 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-layout",
|
|
3
|
-
"version": "1.1.0-alpha.
|
|
3
|
+
"version": "1.1.0-alpha.30",
|
|
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
|
}
|
package/dist/index.js
DELETED
|
@@ -1,604 +0,0 @@
|
|
|
1
|
-
import { WithFlexAttributes as o, bgColorValues as p } from "@proximus/lavender-common";
|
|
2
|
-
const c = ".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)}@media screen and (min-width: 768px){.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)}}@media screen and (min-width: 1025px){.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)}}@media screen and (min-width: 1441px){.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)}}", s = new CSSStyleSheet();
|
|
3
|
-
s.replaceSync(c);
|
|
4
|
-
const g = [
|
|
5
|
-
// Vertical
|
|
6
|
-
"between-section-vertical",
|
|
7
|
-
"between-options-vertical",
|
|
8
|
-
"under-text-vertical",
|
|
9
|
-
"display-to-subtitle-vertical",
|
|
10
|
-
"under-display-vertical",
|
|
11
|
-
"component-default-vertical",
|
|
12
|
-
"component-expanded-vertical",
|
|
13
|
-
"between-section-vertical-mobile",
|
|
14
|
-
"between-options-vertical-mobile",
|
|
15
|
-
"under-text-vertical-mobile",
|
|
16
|
-
"display-to-subtitle-vertical-mobile",
|
|
17
|
-
"under-display-vertical-mobile",
|
|
18
|
-
"component-default-vertical-mobile",
|
|
19
|
-
"component-expanded-vertical-mobile",
|
|
20
|
-
// Horizontal
|
|
21
|
-
"between-icon-horizontal",
|
|
22
|
-
"text-to-icon-compact-horizontal",
|
|
23
|
-
"text-to-icon-horizontal",
|
|
24
|
-
"component-compact-horizontal",
|
|
25
|
-
"component-default-horizontal",
|
|
26
|
-
"component-expanded-horizontal",
|
|
27
|
-
"between-icon-horizontal-mobile",
|
|
28
|
-
"text-to-icon-compact-horizontal-mobile",
|
|
29
|
-
"text-to-icon-horizontal-mobile",
|
|
30
|
-
"component-compact-horizontal-mobile",
|
|
31
|
-
"component-default-horizontal-mobile"
|
|
32
|
-
];
|
|
33
|
-
class r extends o {
|
|
34
|
-
constructor() {
|
|
35
|
-
super(s), this.template = `<div class="flex-container">
|
|
36
|
-
<slot></slot>
|
|
37
|
-
</div>`, this.shadowRoot.innerHTML = this.template;
|
|
38
|
-
}
|
|
39
|
-
connectedCallback() {
|
|
40
|
-
this.hasAttribute("direction") || (this.direction = "row");
|
|
41
|
-
}
|
|
42
|
-
static get observedAttributes() {
|
|
43
|
-
return [
|
|
44
|
-
...super.observedAttributes,
|
|
45
|
-
"direction",
|
|
46
|
-
"direction-mobile",
|
|
47
|
-
"direction-tablet",
|
|
48
|
-
"direction-laptop",
|
|
49
|
-
"direction-desktop",
|
|
50
|
-
"gap",
|
|
51
|
-
"gap-mobile",
|
|
52
|
-
"gap-tablet",
|
|
53
|
-
"gap-laptop",
|
|
54
|
-
"gap-desktop",
|
|
55
|
-
"justify-content",
|
|
56
|
-
"justify-content-mobile",
|
|
57
|
-
"justify-content-tablet",
|
|
58
|
-
"justify-content-laptop",
|
|
59
|
-
"justify-content-desktop",
|
|
60
|
-
"align-items",
|
|
61
|
-
"align-items-mobile",
|
|
62
|
-
"align-items-tablet",
|
|
63
|
-
"align-items-laptop",
|
|
64
|
-
"align-items-desktop",
|
|
65
|
-
"wrap",
|
|
66
|
-
"wrap-mobile",
|
|
67
|
-
"wrap-tablet",
|
|
68
|
-
"wrap-laptop",
|
|
69
|
-
"wrap-desktop"
|
|
70
|
-
];
|
|
71
|
-
}
|
|
72
|
-
attributeChangedCallback(t, i, e) {
|
|
73
|
-
if (t.indexOf("direction") > -1 && !["column", "row"].includes(e))
|
|
74
|
-
throw new Error("Invalid direction");
|
|
75
|
-
switch (t) {
|
|
76
|
-
case "gap":
|
|
77
|
-
this.$el.style.getPropertyValue("--flex-gap-mobile-value") || this.$el.style.setProperty(
|
|
78
|
-
"--flex-gap-mobile-value",
|
|
79
|
-
this.getGapCSSVariable(e)
|
|
80
|
-
), this.$el.style.getPropertyValue("--flex-gap-tablet-value") || this.$el.style.setProperty(
|
|
81
|
-
"--flex-gap-tablet-value",
|
|
82
|
-
this.getGapCSSVariable(e)
|
|
83
|
-
), this.$el.style.getPropertyValue("--flex-gap-laptop-value") || this.$el.style.setProperty(
|
|
84
|
-
"--flex-gap-laptop-value",
|
|
85
|
-
this.getGapCSSVariable(e)
|
|
86
|
-
), this.$el.style.getPropertyValue("--flex-gap-desktop-value") || this.$el.style.setProperty(
|
|
87
|
-
"--flex-gap-desktop-value",
|
|
88
|
-
this.getGapCSSVariable(e)
|
|
89
|
-
);
|
|
90
|
-
break;
|
|
91
|
-
case "gap-mobile":
|
|
92
|
-
case "gap-tablet":
|
|
93
|
-
case "gap-laptop":
|
|
94
|
-
case "gap-desktop":
|
|
95
|
-
this.$el.style.setProperty(
|
|
96
|
-
`--flex-${t}-value`,
|
|
97
|
-
this.getGapCSSVariable(e)
|
|
98
|
-
);
|
|
99
|
-
break;
|
|
100
|
-
case "direction":
|
|
101
|
-
this.$el.style.getPropertyValue("--flex-direction-mobile-value") || this.$el.style.setProperty("--flex-direction-mobile-value", e), this.$el.style.getPropertyValue("--flex-direction-tablet-value") || this.$el.style.setProperty("--flex-direction-tablet-value", e), this.$el.style.getPropertyValue("--flex-direction-laptop-value") || this.$el.style.setProperty("--flex-direction-laptop-value", e), this.$el.style.getPropertyValue("--flex-direction-desktop-value") || this.$el.style.setProperty(
|
|
102
|
-
"--flex-direction-desktop-value",
|
|
103
|
-
e
|
|
104
|
-
);
|
|
105
|
-
break;
|
|
106
|
-
case "justify-content":
|
|
107
|
-
this.$el.style.getPropertyValue(
|
|
108
|
-
"--flex-justify-content-mobile-value"
|
|
109
|
-
) || this.$el.style.setProperty(
|
|
110
|
-
"--flex-justify-content-mobile-value",
|
|
111
|
-
e
|
|
112
|
-
), this.$el.style.getPropertyValue(
|
|
113
|
-
"--flex-justify-content-tablet-value"
|
|
114
|
-
) || this.$el.style.setProperty(
|
|
115
|
-
"--flex-justify-content-tablet-value",
|
|
116
|
-
e
|
|
117
|
-
), this.$el.style.getPropertyValue(
|
|
118
|
-
"--flex-justify-content-laptop-value"
|
|
119
|
-
) || this.$el.style.setProperty(
|
|
120
|
-
"--flex-justify-content-laptop-value",
|
|
121
|
-
e
|
|
122
|
-
), this.$el.style.getPropertyValue(
|
|
123
|
-
"--flex-justify-content-desktop-value"
|
|
124
|
-
) || this.$el.style.setProperty(
|
|
125
|
-
"--flex-justify-content-desktop-value",
|
|
126
|
-
e
|
|
127
|
-
);
|
|
128
|
-
break;
|
|
129
|
-
case "align-items":
|
|
130
|
-
this.$el.style.getPropertyValue("--flex-align-items-mobile-value") || this.$el.style.setProperty(
|
|
131
|
-
"--flex-align-items-mobile-value",
|
|
132
|
-
e
|
|
133
|
-
), this.$el.style.getPropertyValue("--flex-align-items-tablet-value") || this.$el.style.setProperty(
|
|
134
|
-
"--flex-align-items-tablet-value",
|
|
135
|
-
e
|
|
136
|
-
), this.$el.style.getPropertyValue("--flex-align-items-laptop-value") || this.$el.style.setProperty(
|
|
137
|
-
"--flex-align-items-laptop-value",
|
|
138
|
-
e
|
|
139
|
-
), this.$el.style.getPropertyValue("--flex-align-items-desktop-value") || this.$el.style.setProperty(
|
|
140
|
-
"--flex-align-items-desktop-value",
|
|
141
|
-
e
|
|
142
|
-
);
|
|
143
|
-
break;
|
|
144
|
-
case "wrap":
|
|
145
|
-
this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
|
|
146
|
-
break;
|
|
147
|
-
case "direction-mobile":
|
|
148
|
-
case "direction-tablet":
|
|
149
|
-
case "direction-laptop":
|
|
150
|
-
case "direction-desktop":
|
|
151
|
-
case "justify-content-mobile":
|
|
152
|
-
case "justify-content-tablet":
|
|
153
|
-
case "justify-content-laptop":
|
|
154
|
-
case "justify-content-desktop":
|
|
155
|
-
case "align-items-mobile":
|
|
156
|
-
case "align-items-tablet":
|
|
157
|
-
case "align-items-laptop":
|
|
158
|
-
case "align-items-desktop":
|
|
159
|
-
case "wrap-mobile":
|
|
160
|
-
case "wrap-tablet":
|
|
161
|
-
case "wrap-laptop":
|
|
162
|
-
case "wrap-desktop":
|
|
163
|
-
this.$el.style.setProperty(`--flex-${t}-value`, e);
|
|
164
|
-
break;
|
|
165
|
-
default:
|
|
166
|
-
super.attributeChangedCallback(t, i, e);
|
|
167
|
-
break;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
getGapCSSVariable(t) {
|
|
171
|
-
return g.includes(t) ? `var(--px-spacing-${t})` : t;
|
|
172
|
-
}
|
|
173
|
-
get direction() {
|
|
174
|
-
return this.getAttribute("direction");
|
|
175
|
-
}
|
|
176
|
-
set direction(t) {
|
|
177
|
-
this.setAttribute("direction", t);
|
|
178
|
-
}
|
|
179
|
-
get directionMobile() {
|
|
180
|
-
return this.getAttribute("direction-mobile");
|
|
181
|
-
}
|
|
182
|
-
set directionMobile(t) {
|
|
183
|
-
this.setAttribute("direction-mobile", t);
|
|
184
|
-
}
|
|
185
|
-
get directionTablet() {
|
|
186
|
-
return this.getAttribute("direction-tablet");
|
|
187
|
-
}
|
|
188
|
-
set directionTablet(t) {
|
|
189
|
-
this.setAttribute("direction-tablet", t);
|
|
190
|
-
}
|
|
191
|
-
get directionLaptop() {
|
|
192
|
-
return this.getAttribute("direction-laptop");
|
|
193
|
-
}
|
|
194
|
-
set directionLaptop(t) {
|
|
195
|
-
this.setAttribute("direction-laptop", t);
|
|
196
|
-
}
|
|
197
|
-
get directionDesktop() {
|
|
198
|
-
return this.getAttribute("direction-desktop");
|
|
199
|
-
}
|
|
200
|
-
set directionDesktop(t) {
|
|
201
|
-
this.setAttribute("direction-desktop", t);
|
|
202
|
-
}
|
|
203
|
-
get gap() {
|
|
204
|
-
return this.getAttribute("gap");
|
|
205
|
-
}
|
|
206
|
-
set gap(t) {
|
|
207
|
-
this.setAttribute("gap", t);
|
|
208
|
-
}
|
|
209
|
-
get gapMobile() {
|
|
210
|
-
return this.getAttribute("gap-mobile");
|
|
211
|
-
}
|
|
212
|
-
set gapMobile(t) {
|
|
213
|
-
this.setAttribute("gap-mobile", t);
|
|
214
|
-
}
|
|
215
|
-
get gapTablet() {
|
|
216
|
-
return this.getAttribute("gap-tablet");
|
|
217
|
-
}
|
|
218
|
-
set gapTablet(t) {
|
|
219
|
-
this.setAttribute("gap-tablet", t);
|
|
220
|
-
}
|
|
221
|
-
get gapLaptop() {
|
|
222
|
-
return this.getAttribute("gap-laptop");
|
|
223
|
-
}
|
|
224
|
-
set gapLaptop(t) {
|
|
225
|
-
this.setAttribute("gap-laptop", t);
|
|
226
|
-
}
|
|
227
|
-
get justifyContent() {
|
|
228
|
-
return this.getAttribute("justify-content");
|
|
229
|
-
}
|
|
230
|
-
set justifyContent(t) {
|
|
231
|
-
this.setAttribute("justify-content", t);
|
|
232
|
-
}
|
|
233
|
-
get justifyContentMobile() {
|
|
234
|
-
return this.getAttribute("justify-content-mobile");
|
|
235
|
-
}
|
|
236
|
-
set justifyContentMobile(t) {
|
|
237
|
-
this.setAttribute("justify-content-mobile", t);
|
|
238
|
-
}
|
|
239
|
-
get justifyContentTablet() {
|
|
240
|
-
return this.getAttribute("justify-content-tablet");
|
|
241
|
-
}
|
|
242
|
-
set justifyContentTablet(t) {
|
|
243
|
-
this.setAttribute("justify-content-tablet", t);
|
|
244
|
-
}
|
|
245
|
-
get justifyContentLaptop() {
|
|
246
|
-
return this.getAttribute("justify-content-laptop");
|
|
247
|
-
}
|
|
248
|
-
set justifyContentLaptop(t) {
|
|
249
|
-
this.setAttribute("justify-content-laptop", t);
|
|
250
|
-
}
|
|
251
|
-
get justifyContentDesktop() {
|
|
252
|
-
return this.getAttribute("justify-content-desktop");
|
|
253
|
-
}
|
|
254
|
-
set justifyContentDesktop(t) {
|
|
255
|
-
this.setAttribute("justify-content-desktop", t);
|
|
256
|
-
}
|
|
257
|
-
get alignItems() {
|
|
258
|
-
return this.getAttribute("align-items");
|
|
259
|
-
}
|
|
260
|
-
set alignItems(t) {
|
|
261
|
-
this.setAttribute("align-items", t);
|
|
262
|
-
}
|
|
263
|
-
get alignItemsMobile() {
|
|
264
|
-
return this.getAttribute("align-items-mobile");
|
|
265
|
-
}
|
|
266
|
-
set alignItemsMobile(t) {
|
|
267
|
-
this.setAttribute("align-items-mobile", t);
|
|
268
|
-
}
|
|
269
|
-
get alignItemsTablet() {
|
|
270
|
-
return this.getAttribute("align-items-tablet");
|
|
271
|
-
}
|
|
272
|
-
set alignItemsTablet(t) {
|
|
273
|
-
this.setAttribute("align-items-tablet", t);
|
|
274
|
-
}
|
|
275
|
-
get alignItemsLaptop() {
|
|
276
|
-
return this.getAttribute("align-items-laptop");
|
|
277
|
-
}
|
|
278
|
-
set alignItemsLaptop(t) {
|
|
279
|
-
this.setAttribute("align-items-laptop", t);
|
|
280
|
-
}
|
|
281
|
-
get alignItemsDesktop() {
|
|
282
|
-
return this.getAttribute("align-items-desktop");
|
|
283
|
-
}
|
|
284
|
-
set alignItemsDesktop(t) {
|
|
285
|
-
this.setAttribute("align-items-desktop", t);
|
|
286
|
-
}
|
|
287
|
-
get wrap() {
|
|
288
|
-
return this.getAttribute("wrap");
|
|
289
|
-
}
|
|
290
|
-
set wrap(t) {
|
|
291
|
-
this.setAttribute("wrap", t);
|
|
292
|
-
}
|
|
293
|
-
get wrapMobile() {
|
|
294
|
-
return this.getAttribute("wrap-mobile");
|
|
295
|
-
}
|
|
296
|
-
set wrapMobile(t) {
|
|
297
|
-
this.setAttribute("wrap-mobile", t);
|
|
298
|
-
}
|
|
299
|
-
get wrapTablet() {
|
|
300
|
-
return this.getAttribute("wrap-tablet");
|
|
301
|
-
}
|
|
302
|
-
set wrapTablet(t) {
|
|
303
|
-
this.setAttribute("wrap-tablet", t);
|
|
304
|
-
}
|
|
305
|
-
get wrapLaptop() {
|
|
306
|
-
return this.getAttribute("wrap-laptop");
|
|
307
|
-
}
|
|
308
|
-
set wrapLaptop(t) {
|
|
309
|
-
this.setAttribute("wrap-laptop", t);
|
|
310
|
-
}
|
|
311
|
-
get wrapDesktop() {
|
|
312
|
-
return this.getAttribute("wrap-desktop");
|
|
313
|
-
}
|
|
314
|
-
set wrapDesktop(t) {
|
|
315
|
-
this.setAttribute("wrap-desktop", t);
|
|
316
|
-
}
|
|
317
|
-
get $el() {
|
|
318
|
-
return this.shadowRoot.querySelector(".flex-container");
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
customElements.get("px-stack") || customElements.define("px-stack", r);
|
|
322
|
-
class d extends r {
|
|
323
|
-
constructor() {
|
|
324
|
-
super();
|
|
325
|
-
}
|
|
326
|
-
connectedCallback() {
|
|
327
|
-
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
customElements.get("px-vstack") || customElements.define("px-vstack", d);
|
|
331
|
-
class b extends r {
|
|
332
|
-
constructor() {
|
|
333
|
-
super();
|
|
334
|
-
}
|
|
335
|
-
connectedCallback() {
|
|
336
|
-
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
customElements.get("px-hstack") || customElements.define("px-hstack", b);
|
|
340
|
-
class u extends HTMLElement {
|
|
341
|
-
constructor() {
|
|
342
|
-
super();
|
|
343
|
-
}
|
|
344
|
-
static get observedAttributes() {
|
|
345
|
-
return ["grow"];
|
|
346
|
-
}
|
|
347
|
-
attributeChangedCallback(t, i, e) {
|
|
348
|
-
t === "grow" && (this.style.flexGrow = e);
|
|
349
|
-
}
|
|
350
|
-
connectedCallback() {
|
|
351
|
-
this.style.flexGrow = this.getAttribute("grow") || "1";
|
|
352
|
-
}
|
|
353
|
-
get grow() {
|
|
354
|
-
return this.getAttribute("grow");
|
|
355
|
-
}
|
|
356
|
-
set grow(t) {
|
|
357
|
-
this.setAttribute("grow", t);
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
customElements.define("px-spacer", u);
|
|
361
|
-
const h = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}", n = new CSSStyleSheet();
|
|
362
|
-
n.replaceSync(h);
|
|
363
|
-
class m extends o {
|
|
364
|
-
constructor() {
|
|
365
|
-
super(n), this.template = `
|
|
366
|
-
<section>
|
|
367
|
-
<slot name="heading"></slot>
|
|
368
|
-
<px-stack direction="column" gap="1rem">
|
|
369
|
-
<slot></slot>
|
|
370
|
-
</px-stack>
|
|
371
|
-
</section>`, this.shadowRoot.innerHTML = this.template;
|
|
372
|
-
}
|
|
373
|
-
static get observedAttributes() {
|
|
374
|
-
return [...super.observedAttributes, "gap"];
|
|
375
|
-
}
|
|
376
|
-
attributeChangedCallback(t, i, e) {
|
|
377
|
-
if (t === "gap" && i !== e) {
|
|
378
|
-
this.$el.gap = e;
|
|
379
|
-
return;
|
|
380
|
-
}
|
|
381
|
-
super.attributeChangedCallback(t, i, e);
|
|
382
|
-
}
|
|
383
|
-
get gap() {
|
|
384
|
-
return this.getAttribute("gap");
|
|
385
|
-
}
|
|
386
|
-
set gap(t) {
|
|
387
|
-
this.setAttribute("gap", t);
|
|
388
|
-
}
|
|
389
|
-
get $el() {
|
|
390
|
-
return this.shadowRoot.querySelector('px-stack[direction="column"]');
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
customElements.define("px-section-damien", m);
|
|
394
|
-
const x = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", l = new CSSStyleSheet();
|
|
395
|
-
l.replaceSync(x);
|
|
396
|
-
class f extends o {
|
|
397
|
-
constructor() {
|
|
398
|
-
super(l), this.template = (t) => `
|
|
399
|
-
<px-container border-radius="none" padding="none">
|
|
400
|
-
<px-vstack>
|
|
401
|
-
<px-container id="header-container" border-radius="none">
|
|
402
|
-
<px-hstack>
|
|
403
|
-
<px-spacer></px-spacer>
|
|
404
|
-
<px-vstack
|
|
405
|
-
id="header-vstack-container"
|
|
406
|
-
gap="1rem"
|
|
407
|
-
grow="${this.grow}"
|
|
408
|
-
basis="${this.basis}"
|
|
409
|
-
>
|
|
410
|
-
<slot name="header-container"></slot>
|
|
411
|
-
</px-vstack>
|
|
412
|
-
<px-spacer></px-spacer>
|
|
413
|
-
</px-hstack>
|
|
414
|
-
</px-container>
|
|
415
|
-
<px-container
|
|
416
|
-
id="image-container"
|
|
417
|
-
border-radius="none"
|
|
418
|
-
padding="none"
|
|
419
|
-
padding-top="xl"
|
|
420
|
-
id="image-box"
|
|
421
|
-
background-size="cover"
|
|
422
|
-
background-position="top center"
|
|
423
|
-
padding-bottom="xl"
|
|
424
|
-
border-radius="none"
|
|
425
|
-
bgimg="${this.backgroundImage}"
|
|
426
|
-
>
|
|
427
|
-
<px-hstack>
|
|
428
|
-
<px-spacer></px-spacer>
|
|
429
|
-
<px-vstack grow="${this.grow}" basis="${this.basis}">
|
|
430
|
-
<slot name="image-container"></slot>
|
|
431
|
-
</px-vstack>
|
|
432
|
-
<px-spacer></px-spacer>
|
|
433
|
-
</px-hstack>
|
|
434
|
-
</px-container>
|
|
435
|
-
${t ? ` <px-hstack>
|
|
436
|
-
<px-spacer></px-spacer>
|
|
437
|
-
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
438
|
-
<px-vstack gap="1rem">
|
|
439
|
-
<slot name="image-sticky-container"></slot>
|
|
440
|
-
</px-vstack>
|
|
441
|
-
</px-container>
|
|
442
|
-
<px-spacer></px-spacer>
|
|
443
|
-
</px-hstack>` : ""}
|
|
444
|
-
<px-container
|
|
445
|
-
id="body-container"
|
|
446
|
-
id="main"
|
|
447
|
-
background-color="${this.backgroundColor}"
|
|
448
|
-
padding="none"
|
|
449
|
-
padding-top="xl"
|
|
450
|
-
padding-bottom="xl"
|
|
451
|
-
>
|
|
452
|
-
<px-hstack>
|
|
453
|
-
<px-spacer></px-spacer>
|
|
454
|
-
<px-vstack
|
|
455
|
-
id="body-vstack-container"
|
|
456
|
-
gap="3rem"
|
|
457
|
-
grow="${this.grow}"
|
|
458
|
-
basis="${this.basis}"
|
|
459
|
-
>
|
|
460
|
-
<slot name="body-container"></slot>
|
|
461
|
-
</px-vstack>
|
|
462
|
-
<px-spacer></px-spacer>
|
|
463
|
-
</px-hstack>
|
|
464
|
-
</px-container>
|
|
465
|
-
<px-container
|
|
466
|
-
id="contact-container"
|
|
467
|
-
border-radius="none"
|
|
468
|
-
id="main"
|
|
469
|
-
background-color="container-weak"
|
|
470
|
-
padding="none"
|
|
471
|
-
padding-top="xl"
|
|
472
|
-
padding-bottom="xl"
|
|
473
|
-
>
|
|
474
|
-
<px-hstack>
|
|
475
|
-
<px-spacer></px-spacer>
|
|
476
|
-
<px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
|
|
477
|
-
<slot name="contact-container"></slot>
|
|
478
|
-
</px-vstack>
|
|
479
|
-
<px-spacer></px-spacer>
|
|
480
|
-
</px-hstack>
|
|
481
|
-
</px-container>
|
|
482
|
-
<px-container
|
|
483
|
-
id="footer-container"
|
|
484
|
-
background-color="container-none"
|
|
485
|
-
border-radius="none"
|
|
486
|
-
style="background-color: rgb(108, 66, 156)"
|
|
487
|
-
padding-top="xl"
|
|
488
|
-
padding-bottom="xl"
|
|
489
|
-
>
|
|
490
|
-
<px-hstack>
|
|
491
|
-
<px-spacer></px-spacer>
|
|
492
|
-
<px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
|
|
493
|
-
<slot name="footer-container"></slot>
|
|
494
|
-
</px-vstack>
|
|
495
|
-
<px-spacer></px-spacer>
|
|
496
|
-
</px-hstack>
|
|
497
|
-
</px-container>
|
|
498
|
-
</px-vstack>
|
|
499
|
-
</px-container>
|
|
500
|
-
`, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
|
|
501
|
-
}
|
|
502
|
-
static get observedAttributes() {
|
|
503
|
-
return [
|
|
504
|
-
...super.observedAttributes,
|
|
505
|
-
"background-image",
|
|
506
|
-
"gap",
|
|
507
|
-
"background-color",
|
|
508
|
-
"padding-vertical",
|
|
509
|
-
"padding-horizontal"
|
|
510
|
-
];
|
|
511
|
-
}
|
|
512
|
-
get $wideImage() {
|
|
513
|
-
return this.shadowRoot.querySelector("#image-box");
|
|
514
|
-
}
|
|
515
|
-
get $bodyVStackContainer() {
|
|
516
|
-
return this.shadowRoot.querySelector("#header-vstack-container");
|
|
517
|
-
}
|
|
518
|
-
get $bodyContainer() {
|
|
519
|
-
return this.shadowRoot.querySelector("#body-container");
|
|
520
|
-
}
|
|
521
|
-
get $contactContainer() {
|
|
522
|
-
return this.shadowRoot.querySelector("#contact-container");
|
|
523
|
-
}
|
|
524
|
-
get $footerContainer() {
|
|
525
|
-
return this.shadowRoot.querySelector("#footer-container");
|
|
526
|
-
}
|
|
527
|
-
get $headerContainer() {
|
|
528
|
-
return this.shadowRoot.querySelector("#header-container");
|
|
529
|
-
}
|
|
530
|
-
get $imageContainer() {
|
|
531
|
-
return this.shadowRoot.querySelector("#image-container");
|
|
532
|
-
}
|
|
533
|
-
get backgroundImage() {
|
|
534
|
-
return this.getAttribute("background-image");
|
|
535
|
-
}
|
|
536
|
-
get $imageStickySlot() {
|
|
537
|
-
return this.querySelector('*[slot="image-sticky-container"]');
|
|
538
|
-
}
|
|
539
|
-
get $main() {
|
|
540
|
-
return this.shadowRoot.querySelector("#main");
|
|
541
|
-
}
|
|
542
|
-
get backgroundColor() {
|
|
543
|
-
return this.getAttribute("background-color") || "none";
|
|
544
|
-
}
|
|
545
|
-
get paddingVertical() {
|
|
546
|
-
return this.getAttribute("padding-vertical");
|
|
547
|
-
}
|
|
548
|
-
get paddingHorizontal() {
|
|
549
|
-
return this.getAttribute("padding-horizontal");
|
|
550
|
-
}
|
|
551
|
-
set paddingVertical(t) {
|
|
552
|
-
this.setAttribute("padding-vertical", t);
|
|
553
|
-
}
|
|
554
|
-
set paddingHorizontal(t) {
|
|
555
|
-
this.setAttribute("padding-horizontal", t);
|
|
556
|
-
}
|
|
557
|
-
get gap() {
|
|
558
|
-
return this.getAttribute("gap");
|
|
559
|
-
}
|
|
560
|
-
connectedCallback() {
|
|
561
|
-
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
562
|
-
}
|
|
563
|
-
attributeChangedCallback(t, i, e) {
|
|
564
|
-
if (i !== e)
|
|
565
|
-
switch (t) {
|
|
566
|
-
case "background-image":
|
|
567
|
-
this.$imageContainer.setAttribute("background-image", e);
|
|
568
|
-
break;
|
|
569
|
-
case "gap":
|
|
570
|
-
this.$bodyVStackContainer.setAttribute("gap", e);
|
|
571
|
-
break;
|
|
572
|
-
case "background-color":
|
|
573
|
-
this.$bodyContainer.setAttribute(
|
|
574
|
-
"background-color",
|
|
575
|
-
p.indexOf(e) > 0 ? e : "none"
|
|
576
|
-
);
|
|
577
|
-
break;
|
|
578
|
-
case "padding-vertical":
|
|
579
|
-
this.handlePaddingVerticalChange(e);
|
|
580
|
-
break;
|
|
581
|
-
case "padding-horizontal":
|
|
582
|
-
this.handlePaddingHorizontalChange(e);
|
|
583
|
-
break;
|
|
584
|
-
default:
|
|
585
|
-
super.attributeChangedCallback(t, i, e);
|
|
586
|
-
}
|
|
587
|
-
}
|
|
588
|
-
handlePaddingVerticalChange(t) {
|
|
589
|
-
this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
|
|
590
|
-
}
|
|
591
|
-
handlePaddingHorizontalChange(t) {
|
|
592
|
-
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;
|
|
593
|
-
}
|
|
594
|
-
}
|
|
595
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page", f);
|
|
596
|
-
export {
|
|
597
|
-
b as HStack,
|
|
598
|
-
f as Page,
|
|
599
|
-
m as Section,
|
|
600
|
-
u as Spacer,
|
|
601
|
-
r as Stack,
|
|
602
|
-
d as VStack,
|
|
603
|
-
g as gapValues
|
|
604
|
-
};
|