@proximus/lavender-section 1.0.0-alpha.6
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/PxSection.es.js +140 -0
- package/package.json +40 -0
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { bgColorValues as g } from "@proximus/lavender-common";
|
|
2
|
+
import "@proximus/lavender-container";
|
|
3
|
+
import "@proximus/lavender-layout";
|
|
4
|
+
const s = ":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(s);
|
|
6
|
+
class r extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(), this.template = () => `
|
|
9
|
+
<px-container borderradius="none" padding="none" bgcolor="${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
|
+
"bgcolor",
|
|
27
|
+
"gradient",
|
|
28
|
+
"bgimg-mobile",
|
|
29
|
+
"bgimg-tablet",
|
|
30
|
+
"bgimg-laptop",
|
|
31
|
+
"bgimgsize",
|
|
32
|
+
"bgimgposition",
|
|
33
|
+
"paddingblock",
|
|
34
|
+
"paddingtop",
|
|
35
|
+
"paddingbottom"
|
|
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 "bgcolor":
|
|
45
|
+
this.$container.bgColor = g.indexOf(e) > 0 ? e : "none";
|
|
46
|
+
break;
|
|
47
|
+
case "gradient":
|
|
48
|
+
this.$container.gradient = this.gradient;
|
|
49
|
+
break;
|
|
50
|
+
case "bgimg-mobile":
|
|
51
|
+
this.$container.bgImgMobile = e;
|
|
52
|
+
break;
|
|
53
|
+
case "bgimg-tablet":
|
|
54
|
+
this.$container.bgImgTablet = e;
|
|
55
|
+
break;
|
|
56
|
+
case "bgimg-laptop":
|
|
57
|
+
this.$container.bgImgLaptop = e;
|
|
58
|
+
break;
|
|
59
|
+
case "bgimgsize":
|
|
60
|
+
this.$container.bgImgSize = e;
|
|
61
|
+
break;
|
|
62
|
+
case "bgimgposition":
|
|
63
|
+
this.$container.bgImgPosition = e;
|
|
64
|
+
break;
|
|
65
|
+
case "paddingblock":
|
|
66
|
+
this.$container.paddingBlock = e;
|
|
67
|
+
break;
|
|
68
|
+
case "paddingtop":
|
|
69
|
+
this.$container.paddingTop = e;
|
|
70
|
+
break;
|
|
71
|
+
case "paddingbottom":
|
|
72
|
+
this.$container.paddingBottom = e;
|
|
73
|
+
break;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
get bgColor() {
|
|
77
|
+
return this.getAttribute("bgcolor") || "none";
|
|
78
|
+
}
|
|
79
|
+
set bgColor(t) {
|
|
80
|
+
this.setAttribute("bgcolor", t);
|
|
81
|
+
}
|
|
82
|
+
get gradient() {
|
|
83
|
+
return this.getAttribute("gradient");
|
|
84
|
+
}
|
|
85
|
+
set gradient(t) {
|
|
86
|
+
this.setAttribute("gradient", t);
|
|
87
|
+
}
|
|
88
|
+
get bgImgMobile() {
|
|
89
|
+
return this.getAttribute("bgimg-mobile");
|
|
90
|
+
}
|
|
91
|
+
set bgImgMobile(t) {
|
|
92
|
+
this.setAttribute("bgimg-mobile", t);
|
|
93
|
+
}
|
|
94
|
+
get bgImgTablet() {
|
|
95
|
+
return this.getAttribute("bgimg-tablet");
|
|
96
|
+
}
|
|
97
|
+
set bgImgTablet(t) {
|
|
98
|
+
this.setAttribute("bgimg-tablet", t);
|
|
99
|
+
}
|
|
100
|
+
get bgImgLaptop() {
|
|
101
|
+
return this.getAttribute("bgimg-laptop");
|
|
102
|
+
}
|
|
103
|
+
set bgImgLaptop(t) {
|
|
104
|
+
this.setAttribute("bgimg-laptop", t);
|
|
105
|
+
}
|
|
106
|
+
get bgImgSize() {
|
|
107
|
+
return this.getAttribute("bgimgsize");
|
|
108
|
+
}
|
|
109
|
+
set bgImgSize(t) {
|
|
110
|
+
this.setAttribute("bgimgsize", t);
|
|
111
|
+
}
|
|
112
|
+
get bgImgPosition() {
|
|
113
|
+
return this.getAttribute("bgimgposition");
|
|
114
|
+
}
|
|
115
|
+
set bgImgPosition(t) {
|
|
116
|
+
this.setAttribute("bgimgposition", t);
|
|
117
|
+
}
|
|
118
|
+
get paddingBlock() {
|
|
119
|
+
return this.getAttribute("paddingblock");
|
|
120
|
+
}
|
|
121
|
+
set paddingBlock(t) {
|
|
122
|
+
this.setAttribute("paddingblock", t);
|
|
123
|
+
}
|
|
124
|
+
get paddingTop() {
|
|
125
|
+
return this.getAttribute("paddingtop");
|
|
126
|
+
}
|
|
127
|
+
set paddingTop(t) {
|
|
128
|
+
this.setAttribute("paddingtop", t);
|
|
129
|
+
}
|
|
130
|
+
get paddingBottom() {
|
|
131
|
+
return this.getAttribute("paddingbottom");
|
|
132
|
+
}
|
|
133
|
+
set paddingBottom(t) {
|
|
134
|
+
this.setAttribute("paddingbottom", t);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
customElements.define("px-section", r);
|
|
138
|
+
export {
|
|
139
|
+
r as Section
|
|
140
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@proximus/lavender-section",
|
|
3
|
+
"version": "1.0.0-alpha.6",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"exports": {
|
|
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
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "tsc; vite build",
|
|
22
|
+
"test": "vitest run --coverage"
|
|
23
|
+
},
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"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": "15a231df98020f83813279639a9a7712a5a5e759"
|
|
40
|
+
}
|