@proximus/lavender-section 1.0.0-alpha.9 → 1.0.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/Section.d.ts +62 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +297 -0
- package/package.json +7 -27
- package/dist/PxSection.es.js +0 -140
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { Container } from '@proximus/lavender-container';
|
|
2
|
+
import '@proximus/lavender-container';
|
|
3
|
+
import '@proximus/lavender-layout';
|
|
4
|
+
export declare class Section extends HTMLElement {
|
|
5
|
+
private template;
|
|
6
|
+
constructor();
|
|
7
|
+
connectedCallback(): void;
|
|
8
|
+
static get observedAttributes(): string[];
|
|
9
|
+
get $container(): Container;
|
|
10
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
11
|
+
get $slotOverlap(): HTMLSlotElement;
|
|
12
|
+
get backgroundColor(): string;
|
|
13
|
+
set backgroundColor(value: string);
|
|
14
|
+
get gradient(): string;
|
|
15
|
+
set gradient(value: string);
|
|
16
|
+
get backgroundImage(): string;
|
|
17
|
+
set backgroundImage(value: string);
|
|
18
|
+
get backgroundImageMobile(): string;
|
|
19
|
+
set backgroundImageMobile(value: string);
|
|
20
|
+
get backgroundImageTablet(): string;
|
|
21
|
+
set backgroundImageTablet(value: string);
|
|
22
|
+
get backgroundImageLaptop(): string;
|
|
23
|
+
set backgroundImageLaptop(value: string);
|
|
24
|
+
get backgroundSize(): string;
|
|
25
|
+
set backgroundSize(value: string);
|
|
26
|
+
get backgroundPosition(): string;
|
|
27
|
+
set backgroundPosition(value: string);
|
|
28
|
+
get paddingBlock(): string;
|
|
29
|
+
set paddingBlock(value: string);
|
|
30
|
+
get paddingTop(): string;
|
|
31
|
+
set paddingTop(value: string);
|
|
32
|
+
get paddingBottom(): string;
|
|
33
|
+
set paddingBottom(value: string);
|
|
34
|
+
get paddingBlockMobile(): string;
|
|
35
|
+
set paddingBlockMobile(value: string);
|
|
36
|
+
get paddingTopMobile(): string;
|
|
37
|
+
set paddingTopMobile(value: string);
|
|
38
|
+
get paddingBottomMobile(): string;
|
|
39
|
+
set paddingBottomMobile(value: string);
|
|
40
|
+
get paddingBlockTablet(): string;
|
|
41
|
+
set paddingBlockTablet(value: string);
|
|
42
|
+
get paddingTopTablet(): string;
|
|
43
|
+
set paddingTopTablet(value: string);
|
|
44
|
+
get paddingBottomTablet(): string;
|
|
45
|
+
set paddingBottomTablet(value: string);
|
|
46
|
+
get paddingBlockLaptop(): string;
|
|
47
|
+
set paddingBlockLaptop(value: string);
|
|
48
|
+
get paddingTopLaptop(): string;
|
|
49
|
+
set paddingTopLaptop(value: string);
|
|
50
|
+
get paddingBottomLaptop(): string;
|
|
51
|
+
set paddingBottomLaptop(value: string);
|
|
52
|
+
get border(): string;
|
|
53
|
+
set border(value: string);
|
|
54
|
+
get borderSide(): string;
|
|
55
|
+
set borderSide(value: string);
|
|
56
|
+
get borderSideMobile(): string;
|
|
57
|
+
set borderSideMobile(value: string);
|
|
58
|
+
get borderSideTablet(): string;
|
|
59
|
+
set borderSideTablet(value: string);
|
|
60
|
+
get borderSideLaptop(): string;
|
|
61
|
+
set borderSideLaptop(value: string);
|
|
62
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Section';
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
import { backgroundColorValues as a } from "@proximus/lavender-common";
|
|
2
|
+
import "@proximus/lavender-container";
|
|
3
|
+
import "@proximus/lavender-layout";
|
|
4
|
+
const d = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', o = new CSSStyleSheet();
|
|
5
|
+
o.replaceSync(d);
|
|
6
|
+
class r extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(), this.template = () => `
|
|
9
|
+
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
10
|
+
<div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
|
|
11
|
+
<px-vstack gap="heading-to-content">
|
|
12
|
+
<slot name="heading"></slot>
|
|
13
|
+
<px-vstack gap="none">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</px-vstack>
|
|
16
|
+
</px-vstack>
|
|
17
|
+
</div>
|
|
18
|
+
</px-container>
|
|
19
|
+
<div class="content-wrapper">
|
|
20
|
+
<slot name="overlap"></slot>
|
|
21
|
+
</div>
|
|
22
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [o];
|
|
23
|
+
}
|
|
24
|
+
connectedCallback() {
|
|
25
|
+
const t = this.querySelector('[slot="heading"]');
|
|
26
|
+
!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
|
|
27
|
+
}
|
|
28
|
+
static get observedAttributes() {
|
|
29
|
+
return [
|
|
30
|
+
"background-color",
|
|
31
|
+
"background-gradient",
|
|
32
|
+
"background-image",
|
|
33
|
+
"background-image--mobile",
|
|
34
|
+
"background-image--tablet",
|
|
35
|
+
"background-image--laptop",
|
|
36
|
+
"background-size",
|
|
37
|
+
"background-position",
|
|
38
|
+
"padding-block",
|
|
39
|
+
"padding-top",
|
|
40
|
+
"padding-bottom",
|
|
41
|
+
"padding-block--mobile",
|
|
42
|
+
"padding-top--mobile",
|
|
43
|
+
"padding-bottom--mobile",
|
|
44
|
+
"padding-block--tablet",
|
|
45
|
+
"padding-top--tablet",
|
|
46
|
+
"padding-bottom--tablet",
|
|
47
|
+
"padding-block--laptop",
|
|
48
|
+
"padding-top--laptop",
|
|
49
|
+
"padding-bottom--laptop",
|
|
50
|
+
"border",
|
|
51
|
+
"border-side",
|
|
52
|
+
"border-side--mobile",
|
|
53
|
+
"border-side--tablet",
|
|
54
|
+
"border-side--laptop"
|
|
55
|
+
];
|
|
56
|
+
}
|
|
57
|
+
get $container() {
|
|
58
|
+
return this.shadowRoot.querySelector("px-container");
|
|
59
|
+
}
|
|
60
|
+
attributeChangedCallback(t, i, e) {
|
|
61
|
+
if (i !== e)
|
|
62
|
+
switch (t) {
|
|
63
|
+
case "background-color":
|
|
64
|
+
this.$container.backgroundColor = a.indexOf(e) > 0 ? e : "none";
|
|
65
|
+
break;
|
|
66
|
+
case "background-gradient":
|
|
67
|
+
this.$container.gradient = this.gradient;
|
|
68
|
+
break;
|
|
69
|
+
case "background-image":
|
|
70
|
+
this.$container.backgroundImage = e;
|
|
71
|
+
break;
|
|
72
|
+
case "background-image--mobile":
|
|
73
|
+
this.$container.backgroundImageMobile = e;
|
|
74
|
+
break;
|
|
75
|
+
case "background-image--tablet":
|
|
76
|
+
this.$container.backgroundImageTablet = e;
|
|
77
|
+
break;
|
|
78
|
+
case "background-image--laptop":
|
|
79
|
+
this.$container.backgroundImageLaptop = e;
|
|
80
|
+
break;
|
|
81
|
+
case "background-size":
|
|
82
|
+
this.$container.backgroundSize = e;
|
|
83
|
+
break;
|
|
84
|
+
case "background-position":
|
|
85
|
+
this.$container.backgroundPosition = e;
|
|
86
|
+
break;
|
|
87
|
+
case "padding-block":
|
|
88
|
+
this.$container.paddingBlock = e;
|
|
89
|
+
break;
|
|
90
|
+
case "padding-top":
|
|
91
|
+
this.$container.paddingTop = e;
|
|
92
|
+
break;
|
|
93
|
+
case "padding-bottom":
|
|
94
|
+
this.$container.paddingBottom = e;
|
|
95
|
+
break;
|
|
96
|
+
case "padding-block--mobile":
|
|
97
|
+
this.$container.paddingBlockMobile = e;
|
|
98
|
+
break;
|
|
99
|
+
case "padding-top--mobile":
|
|
100
|
+
this.$container.paddingTopMobile = e;
|
|
101
|
+
break;
|
|
102
|
+
case "padding-bottom--mobile":
|
|
103
|
+
this.$container.paddingBottomMobile = e;
|
|
104
|
+
break;
|
|
105
|
+
case "padding-block--tablet":
|
|
106
|
+
this.$container.paddingBlockTablet = e;
|
|
107
|
+
break;
|
|
108
|
+
case "padding-top--tablet":
|
|
109
|
+
this.$container.paddingTopTablet = e;
|
|
110
|
+
break;
|
|
111
|
+
case "padding-bottom--tablet":
|
|
112
|
+
this.$container.paddingBottomTablet = e;
|
|
113
|
+
break;
|
|
114
|
+
case "padding-block--laptop":
|
|
115
|
+
this.$container.paddingBlockLaptop = e;
|
|
116
|
+
break;
|
|
117
|
+
case "padding-top--laptop":
|
|
118
|
+
this.$container.paddingTopLaptop = e;
|
|
119
|
+
break;
|
|
120
|
+
case "padding-bottom--laptop":
|
|
121
|
+
this.$container.paddingBottomLaptop = e;
|
|
122
|
+
break;
|
|
123
|
+
case "border":
|
|
124
|
+
this.$container.border = e;
|
|
125
|
+
break;
|
|
126
|
+
case "border-side":
|
|
127
|
+
this.$container.borderSide = e;
|
|
128
|
+
break;
|
|
129
|
+
case "border-side--mobile":
|
|
130
|
+
this.$container.borderSideMobile = e;
|
|
131
|
+
break;
|
|
132
|
+
case "border-side--tablet":
|
|
133
|
+
this.$container.borderSideTablet = e;
|
|
134
|
+
break;
|
|
135
|
+
case "border-side--laptop":
|
|
136
|
+
this.$container.borderSideLaptop = e;
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
get $slotOverlap() {
|
|
141
|
+
return this.querySelector('[slot="overlap"]');
|
|
142
|
+
}
|
|
143
|
+
get backgroundColor() {
|
|
144
|
+
return this.getAttribute("background-color") || "none";
|
|
145
|
+
}
|
|
146
|
+
set backgroundColor(t) {
|
|
147
|
+
this.setAttribute("background-color", t);
|
|
148
|
+
}
|
|
149
|
+
get gradient() {
|
|
150
|
+
return this.getAttribute("background-gradient");
|
|
151
|
+
}
|
|
152
|
+
set gradient(t) {
|
|
153
|
+
this.setAttribute("background-gradient", t);
|
|
154
|
+
}
|
|
155
|
+
get backgroundImage() {
|
|
156
|
+
return this.getAttribute("background-image");
|
|
157
|
+
}
|
|
158
|
+
set backgroundImage(t) {
|
|
159
|
+
this.setAttribute("background-image", t);
|
|
160
|
+
}
|
|
161
|
+
get backgroundImageMobile() {
|
|
162
|
+
return this.getAttribute("background-image--mobile");
|
|
163
|
+
}
|
|
164
|
+
set backgroundImageMobile(t) {
|
|
165
|
+
this.setAttribute("background-image--mobile", t);
|
|
166
|
+
}
|
|
167
|
+
get backgroundImageTablet() {
|
|
168
|
+
return this.getAttribute("background-image--tablet");
|
|
169
|
+
}
|
|
170
|
+
set backgroundImageTablet(t) {
|
|
171
|
+
this.setAttribute("background-image--tablet", t);
|
|
172
|
+
}
|
|
173
|
+
get backgroundImageLaptop() {
|
|
174
|
+
return this.getAttribute("background-image--laptop");
|
|
175
|
+
}
|
|
176
|
+
set backgroundImageLaptop(t) {
|
|
177
|
+
this.setAttribute("background-image--laptop", t);
|
|
178
|
+
}
|
|
179
|
+
get backgroundSize() {
|
|
180
|
+
return this.getAttribute("background-size");
|
|
181
|
+
}
|
|
182
|
+
set backgroundSize(t) {
|
|
183
|
+
this.setAttribute("background-size", t);
|
|
184
|
+
}
|
|
185
|
+
get backgroundPosition() {
|
|
186
|
+
return this.getAttribute("background-position");
|
|
187
|
+
}
|
|
188
|
+
set backgroundPosition(t) {
|
|
189
|
+
this.setAttribute("background-position", t);
|
|
190
|
+
}
|
|
191
|
+
get paddingBlock() {
|
|
192
|
+
return this.getAttribute("padding-block");
|
|
193
|
+
}
|
|
194
|
+
set paddingBlock(t) {
|
|
195
|
+
this.setAttribute("padding-block", t);
|
|
196
|
+
}
|
|
197
|
+
get paddingTop() {
|
|
198
|
+
return this.getAttribute("padding-top");
|
|
199
|
+
}
|
|
200
|
+
set paddingTop(t) {
|
|
201
|
+
this.setAttribute("padding-top", t);
|
|
202
|
+
}
|
|
203
|
+
get paddingBottom() {
|
|
204
|
+
return this.getAttribute("padding-bottom");
|
|
205
|
+
}
|
|
206
|
+
set paddingBottom(t) {
|
|
207
|
+
this.setAttribute("padding-bottom", t);
|
|
208
|
+
}
|
|
209
|
+
get paddingBlockMobile() {
|
|
210
|
+
return this.getAttribute("padding-block--mobile");
|
|
211
|
+
}
|
|
212
|
+
set paddingBlockMobile(t) {
|
|
213
|
+
this.setAttribute("padding-block--mobile", t);
|
|
214
|
+
}
|
|
215
|
+
get paddingTopMobile() {
|
|
216
|
+
return this.getAttribute("padding-top--mobile");
|
|
217
|
+
}
|
|
218
|
+
set paddingTopMobile(t) {
|
|
219
|
+
this.setAttribute("padding-top--mobile", t);
|
|
220
|
+
}
|
|
221
|
+
get paddingBottomMobile() {
|
|
222
|
+
return this.getAttribute("padding-bottom--mobile");
|
|
223
|
+
}
|
|
224
|
+
set paddingBottomMobile(t) {
|
|
225
|
+
this.setAttribute("padding-bottom--mobile", t);
|
|
226
|
+
}
|
|
227
|
+
get paddingBlockTablet() {
|
|
228
|
+
return this.getAttribute("padding-block--tablet");
|
|
229
|
+
}
|
|
230
|
+
set paddingBlockTablet(t) {
|
|
231
|
+
this.setAttribute("padding-block--tablet", t);
|
|
232
|
+
}
|
|
233
|
+
get paddingTopTablet() {
|
|
234
|
+
return this.getAttribute("padding-top--tablet");
|
|
235
|
+
}
|
|
236
|
+
set paddingTopTablet(t) {
|
|
237
|
+
this.setAttribute("padding-top--tablet", t);
|
|
238
|
+
}
|
|
239
|
+
get paddingBottomTablet() {
|
|
240
|
+
return this.getAttribute("padding-bottom--tablet");
|
|
241
|
+
}
|
|
242
|
+
set paddingBottomTablet(t) {
|
|
243
|
+
this.setAttribute("padding-bottom--tablet", t);
|
|
244
|
+
}
|
|
245
|
+
get paddingBlockLaptop() {
|
|
246
|
+
return this.getAttribute("padding-block--laptop");
|
|
247
|
+
}
|
|
248
|
+
set paddingBlockLaptop(t) {
|
|
249
|
+
this.setAttribute("padding-block--laptop", t);
|
|
250
|
+
}
|
|
251
|
+
get paddingTopLaptop() {
|
|
252
|
+
return this.getAttribute("padding-top--laptop");
|
|
253
|
+
}
|
|
254
|
+
set paddingTopLaptop(t) {
|
|
255
|
+
this.setAttribute("padding-top--laptop", t);
|
|
256
|
+
}
|
|
257
|
+
get paddingBottomLaptop() {
|
|
258
|
+
return this.getAttribute("padding-bottom--laptop");
|
|
259
|
+
}
|
|
260
|
+
set paddingBottomLaptop(t) {
|
|
261
|
+
this.setAttribute("padding-bottom--laptop", t);
|
|
262
|
+
}
|
|
263
|
+
get border() {
|
|
264
|
+
return this.getAttribute("border");
|
|
265
|
+
}
|
|
266
|
+
set border(t) {
|
|
267
|
+
this.setAttribute("border", t);
|
|
268
|
+
}
|
|
269
|
+
get borderSide() {
|
|
270
|
+
return this.getAttribute("border-side");
|
|
271
|
+
}
|
|
272
|
+
set borderSide(t) {
|
|
273
|
+
this.setAttribute("border-side", t);
|
|
274
|
+
}
|
|
275
|
+
get borderSideMobile() {
|
|
276
|
+
return this.getAttribute("border-side--mobile");
|
|
277
|
+
}
|
|
278
|
+
set borderSideMobile(t) {
|
|
279
|
+
this.setAttribute("border-side--mobile", t);
|
|
280
|
+
}
|
|
281
|
+
get borderSideTablet() {
|
|
282
|
+
return this.getAttribute("border-side--tablet");
|
|
283
|
+
}
|
|
284
|
+
set borderSideTablet(t) {
|
|
285
|
+
this.setAttribute("border-side--tablet", t);
|
|
286
|
+
}
|
|
287
|
+
get borderSideLaptop() {
|
|
288
|
+
return this.getAttribute("border-side--laptop");
|
|
289
|
+
}
|
|
290
|
+
set borderSideLaptop(t) {
|
|
291
|
+
this.setAttribute("border-side--laptop", t);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
customElements.get("px-section") || customElements.define("px-section", r);
|
|
295
|
+
export {
|
|
296
|
+
r as Section
|
|
297
|
+
};
|
package/package.json
CHANGED
|
@@ -1,40 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-section",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.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
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
|
-
}
|
|
27
|
-
"lerna": {
|
|
28
|
-
"command": {
|
|
29
|
-
"publish": {
|
|
30
|
-
"assets": [
|
|
31
|
-
"CHANGELOG.md",
|
|
32
|
-
"package.json",
|
|
33
|
-
"dist/*.js",
|
|
34
|
-
"dist/css/**/*.css"
|
|
35
|
-
]
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"gitHead": "c4c767620b91acf2ff6166ba54c224cd73fa9bf9"
|
|
19
|
+
}
|
|
40
20
|
}
|
package/dist/PxSection.es.js
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
import { bgColorValues as a } from "@proximus/lavender-common";
|
|
2
|
-
import "@proximus/lavender-container";
|
|
3
|
-
import "@proximus/lavender-layout";
|
|
4
|
-
const r = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}", i = new CSSStyleSheet();
|
|
5
|
-
i.replaceSync(r);
|
|
6
|
-
class n extends HTMLElement {
|
|
7
|
-
constructor() {
|
|
8
|
-
super(), this.template = () => `
|
|
9
|
-
<px-container border-radius="none" padding="none" background-color="${this.bgColor}">
|
|
10
|
-
<div class="content-wrapper">
|
|
11
|
-
<px-vstack gap="under-display-vertical">
|
|
12
|
-
<slot name="heading"></slot>
|
|
13
|
-
<px-vstack gap="none">
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</px-vstack>
|
|
16
|
-
</px-vstack>
|
|
17
|
-
</div>
|
|
18
|
-
</px-container>
|
|
19
|
-
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [i];
|
|
20
|
-
}
|
|
21
|
-
connectedCallback() {
|
|
22
|
-
this.querySelector('[slot="heading"]') || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
|
|
23
|
-
}
|
|
24
|
-
static get observedAttributes() {
|
|
25
|
-
return [
|
|
26
|
-
"background-color",
|
|
27
|
-
"background-gradient",
|
|
28
|
-
"background-image-mobile",
|
|
29
|
-
"background-image-tablet",
|
|
30
|
-
"background-image-laptop",
|
|
31
|
-
"background-size",
|
|
32
|
-
"background-position",
|
|
33
|
-
"padding-block",
|
|
34
|
-
"padding-top",
|
|
35
|
-
"padding-bottom"
|
|
36
|
-
];
|
|
37
|
-
}
|
|
38
|
-
get $container() {
|
|
39
|
-
return this.shadowRoot.querySelector("px-container");
|
|
40
|
-
}
|
|
41
|
-
attributeChangedCallback(t, o, e) {
|
|
42
|
-
if (o !== e)
|
|
43
|
-
switch (t) {
|
|
44
|
-
case "background-color":
|
|
45
|
-
this.$container.bgColor = a.indexOf(e) > 0 ? e : "none";
|
|
46
|
-
break;
|
|
47
|
-
case "background-gradient":
|
|
48
|
-
this.$container.gradient = this.gradient;
|
|
49
|
-
break;
|
|
50
|
-
case "background-image-mobile":
|
|
51
|
-
this.$container.bgImgMobile = e;
|
|
52
|
-
break;
|
|
53
|
-
case "background-image-tablet":
|
|
54
|
-
this.$container.bgImgTablet = e;
|
|
55
|
-
break;
|
|
56
|
-
case "background-image-laptop":
|
|
57
|
-
this.$container.bgImgLaptop = e;
|
|
58
|
-
break;
|
|
59
|
-
case "background-size":
|
|
60
|
-
this.$container.bgImgSize = e;
|
|
61
|
-
break;
|
|
62
|
-
case "background-position":
|
|
63
|
-
this.$container.bgImgPosition = e;
|
|
64
|
-
break;
|
|
65
|
-
case "padding-block":
|
|
66
|
-
this.$container.paddingBlock = e;
|
|
67
|
-
break;
|
|
68
|
-
case "padding-top":
|
|
69
|
-
this.$container.paddingTop = e;
|
|
70
|
-
break;
|
|
71
|
-
case "padding-bottom":
|
|
72
|
-
this.$container.paddingBottom = e;
|
|
73
|
-
break;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
get bgColor() {
|
|
77
|
-
return this.getAttribute("background-color") || "none";
|
|
78
|
-
}
|
|
79
|
-
set bgColor(t) {
|
|
80
|
-
this.setAttribute("background-color", t);
|
|
81
|
-
}
|
|
82
|
-
get gradient() {
|
|
83
|
-
return this.getAttribute("background-gradient");
|
|
84
|
-
}
|
|
85
|
-
set gradient(t) {
|
|
86
|
-
this.setAttribute("background-gradient", t);
|
|
87
|
-
}
|
|
88
|
-
get bgImgMobile() {
|
|
89
|
-
return this.getAttribute("background-image-mobile");
|
|
90
|
-
}
|
|
91
|
-
set bgImgMobile(t) {
|
|
92
|
-
this.setAttribute("background-image-mobile", t);
|
|
93
|
-
}
|
|
94
|
-
get bgImgTablet() {
|
|
95
|
-
return this.getAttribute("background-image-tablet");
|
|
96
|
-
}
|
|
97
|
-
set bgImgTablet(t) {
|
|
98
|
-
this.setAttribute("background-image-tablet", t);
|
|
99
|
-
}
|
|
100
|
-
get bgImgLaptop() {
|
|
101
|
-
return this.getAttribute("background-image-laptop");
|
|
102
|
-
}
|
|
103
|
-
set bgImgLaptop(t) {
|
|
104
|
-
this.setAttribute("background-image-laptop", t);
|
|
105
|
-
}
|
|
106
|
-
get bgImgSize() {
|
|
107
|
-
return this.getAttribute("background-size");
|
|
108
|
-
}
|
|
109
|
-
set bgImgSize(t) {
|
|
110
|
-
this.setAttribute("background-size", t);
|
|
111
|
-
}
|
|
112
|
-
get bgImgPosition() {
|
|
113
|
-
return this.getAttribute("background-position");
|
|
114
|
-
}
|
|
115
|
-
set bgImgPosition(t) {
|
|
116
|
-
this.setAttribute("background-position", t);
|
|
117
|
-
}
|
|
118
|
-
get paddingBlock() {
|
|
119
|
-
return this.getAttribute("padding-block");
|
|
120
|
-
}
|
|
121
|
-
set paddingBlock(t) {
|
|
122
|
-
this.setAttribute("padding-block", t);
|
|
123
|
-
}
|
|
124
|
-
get paddingTop() {
|
|
125
|
-
return this.getAttribute("padding-top");
|
|
126
|
-
}
|
|
127
|
-
set paddingTop(t) {
|
|
128
|
-
this.setAttribute("padding-top", t);
|
|
129
|
-
}
|
|
130
|
-
get paddingBottom() {
|
|
131
|
-
return this.getAttribute("padding-bottom");
|
|
132
|
-
}
|
|
133
|
-
set paddingBottom(t) {
|
|
134
|
-
this.setAttribute("padding-bottom", t);
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
customElements.define("px-section", n);
|
|
138
|
-
export {
|
|
139
|
-
n as Section
|
|
140
|
-
};
|