@proximus/lavender-section 1.4.14-beta.3 → 1.4.14

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.
Files changed (3) hide show
  1. package/dist/Section.d.ts +52 -52
  2. package/dist/index.es.js +345 -308
  3. package/package.json +1 -1
package/dist/Section.d.ts CHANGED
@@ -14,58 +14,58 @@ export declare class Section extends WithExtraAttributes {
14
14
  setHeadingSpacing(): void;
15
15
  get $container(): Container;
16
16
  get $mainContentWrapper(): HTMLElement;
17
- get $slotOverlap(): HTMLSlotElement | null | undefined;
17
+ get $slotOverlap(): HTMLSlotElement;
18
18
  get $slottedOverlap(): HTMLSlotElement;
19
- get $slotHeading(): HTMLSlotElement | null | undefined;
19
+ get $slotHeading(): HTMLSlotElement;
20
20
  get $slottedHeading(): HTMLSlotElement;
21
- get backgroundColor(): string | null;
22
- set backgroundColor(value: string | null);
23
- get gradient(): string | null;
24
- set gradient(value: string | null);
25
- get backgroundImage(): string | null;
26
- set backgroundImage(value: string | null);
27
- get backgroundImageMobile(): string | null;
28
- set backgroundImageMobile(value: string | null);
29
- get backgroundImageTablet(): string | null;
30
- set backgroundImageTablet(value: string | null);
31
- get backgroundImageLaptop(): string | null;
32
- set backgroundImageLaptop(value: string | null);
33
- get backgroundSize(): string | null;
34
- set backgroundSize(value: string | null);
35
- get backgroundPosition(): string | null;
36
- set backgroundPosition(value: string | null);
37
- get paddingBlock(): string | null;
38
- set paddingBlock(value: string | null);
39
- get paddingTop(): string | null;
40
- set paddingTop(value: string | null);
41
- get paddingBottom(): string | null;
42
- set paddingBottom(value: string | null);
43
- get paddingBlockMobile(): string | null;
44
- set paddingBlockMobile(value: string | null);
45
- get paddingTopMobile(): string | null;
46
- set paddingTopMobile(value: string | null);
47
- get paddingBottomMobile(): string | null;
48
- set paddingBottomMobile(value: string | null);
49
- get paddingBlockTablet(): string | null;
50
- set paddingBlockTablet(value: string | null);
51
- get paddingTopTablet(): string | null;
52
- set paddingTopTablet(value: string | null);
53
- get paddingBottomTablet(): string | null;
54
- set paddingBottomTablet(value: string | null);
55
- get paddingBlockLaptop(): string | null;
56
- set paddingBlockLaptop(value: string | null);
57
- get paddingTopLaptop(): string | null;
58
- set paddingTopLaptop(value: string | null);
59
- get paddingBottomLaptop(): string | null;
60
- set paddingBottomLaptop(value: string | null);
61
- get border(): string | null;
62
- set border(value: string | null);
63
- get borderSide(): string | null;
64
- set borderSide(value: string | null);
65
- get borderSideMobile(): string | null;
66
- set borderSideMobile(value: string | null);
67
- get borderSideTablet(): string | null;
68
- set borderSideTablet(value: string | null);
69
- get borderSideLaptop(): string | null;
70
- set borderSideLaptop(value: string | null);
21
+ get backgroundColor(): string;
22
+ set backgroundColor(value: string);
23
+ get gradient(): string;
24
+ set gradient(value: string);
25
+ get backgroundImage(): string;
26
+ set backgroundImage(value: string);
27
+ get backgroundImageMobile(): string;
28
+ set backgroundImageMobile(value: string);
29
+ get backgroundImageTablet(): string;
30
+ set backgroundImageTablet(value: string);
31
+ get backgroundImageLaptop(): string;
32
+ set backgroundImageLaptop(value: string);
33
+ get backgroundSize(): string;
34
+ set backgroundSize(value: string);
35
+ get backgroundPosition(): string;
36
+ set backgroundPosition(value: string);
37
+ get paddingBlock(): string;
38
+ set paddingBlock(value: string);
39
+ get paddingTop(): string;
40
+ set paddingTop(value: string);
41
+ get paddingBottom(): string;
42
+ set paddingBottom(value: string);
43
+ get paddingBlockMobile(): string;
44
+ set paddingBlockMobile(value: string);
45
+ get paddingTopMobile(): string;
46
+ set paddingTopMobile(value: string);
47
+ get paddingBottomMobile(): string;
48
+ set paddingBottomMobile(value: string);
49
+ get paddingBlockTablet(): string;
50
+ set paddingBlockTablet(value: string);
51
+ get paddingTopTablet(): string;
52
+ set paddingTopTablet(value: string);
53
+ get paddingBottomTablet(): string;
54
+ set paddingBottomTablet(value: string);
55
+ get paddingBlockLaptop(): string;
56
+ set paddingBlockLaptop(value: string);
57
+ get paddingTopLaptop(): string;
58
+ set paddingTopLaptop(value: string);
59
+ get paddingBottomLaptop(): string;
60
+ set paddingBottomLaptop(value: string);
61
+ get border(): string;
62
+ set border(value: string);
63
+ get borderSide(): string;
64
+ set borderSide(value: string);
65
+ get borderSideMobile(): string;
66
+ set borderSideMobile(value: string);
67
+ get borderSideTablet(): string;
68
+ set borderSideTablet(value: string);
69
+ get borderSideLaptop(): string;
70
+ set borderSideLaptop(value: string);
71
71
  }
package/dist/index.es.js CHANGED
@@ -1,311 +1,348 @@
1
- import { WithExtraAttributes as e, backgroundColorValues as t, propertyToAttributeSetter as n } from "@proximus/lavender-common";
1
+ import { WithExtraAttributes as r, backgroundColorValues as d } from "@proximus/lavender-common";
2
2
  import "@proximus/lavender-container";
3
3
  import "@proximus/lavender-layout";
4
- //#region src/section.css?inline
5
- var r = ":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 screen and (width>=77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-mobile)}@media screen and (width>=48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-tablet)}}@media screen and (width>=64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot=overlap]){margin-top:var(--px-overlapped-laptop)}}", i = new CSSStyleSheet();
6
- i.replaceSync(r);
7
- var a = class extends e {
8
- constructor() {
9
- super(i), this.template = () => "\n <px-container border-radius=\"none\" padding-inline=\"none\">\n <div class=\"content-wrapper\">\n <px-vstack gap=\"heading-to-content\">\n <slot name=\"heading\"></slot>\n <px-vstack gap=\"none\">\n <slot></slot>\n </px-vstack>\n </px-vstack>\n </div>\n </px-container>\n <div class=\"content-wrapper\">\n <slot name=\"overlap\"></slot>\n </div>\n ", this.shadowRoot.innerHTML = this.template();
10
- }
11
- connectedCallback() {
12
- n(this.$container, "background-color", this.backgroundColor), !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"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), this.$slotHeading?.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), this.$slotOverlap?.addEventListener("slotchange", this.toggleOverlapSpacing);
13
- }
14
- static get observedAttributes() {
15
- return [
16
- ...super.observedAttributes,
17
- "background-color",
18
- "background-gradient",
19
- "background-image",
20
- "background-image--mobile",
21
- "background-image--tablet",
22
- "background-image--laptop",
23
- "background-size",
24
- "background-position",
25
- "padding-block",
26
- "padding-top",
27
- "padding-bottom",
28
- "padding-block--mobile",
29
- "padding-top--mobile",
30
- "padding-bottom--mobile",
31
- "padding-block--tablet",
32
- "padding-top--tablet",
33
- "padding-bottom--tablet",
34
- "padding-block--laptop",
35
- "padding-top--laptop",
36
- "padding-bottom--laptop",
37
- "border",
38
- "border-side",
39
- "border-side--mobile",
40
- "border-side--tablet",
41
- "border-side--laptop"
42
- ];
43
- }
44
- attributeChangedCallback(e, n, r) {
45
- if (n !== r) switch (e) {
46
- case "background-color":
47
- this.$container.backgroundColor = t.indexOf(r) > 0 ? r : "none";
48
- break;
49
- case "background-gradient":
50
- this.$container.gradient = this.gradient;
51
- break;
52
- case "background-image":
53
- this.$container.backgroundImage = r;
54
- break;
55
- case "background-image--mobile":
56
- this.$container.backgroundImageMobile = r;
57
- break;
58
- case "background-image--tablet":
59
- this.$container.backgroundImageTablet = r;
60
- break;
61
- case "background-image--laptop":
62
- this.$container.backgroundImageLaptop = r;
63
- break;
64
- case "background-size":
65
- this.$container.backgroundSize = r;
66
- break;
67
- case "background-position":
68
- this.$container.backgroundPosition = r;
69
- break;
70
- case "padding-block":
71
- this.$container.paddingBlock = r;
72
- break;
73
- case "padding-top":
74
- this.$container.paddingTop = r;
75
- break;
76
- case "padding-bottom":
77
- this.$container.paddingBottom = r;
78
- break;
79
- case "padding-block--mobile":
80
- this.$container.paddingBlockMobile = r;
81
- break;
82
- case "padding-top--mobile":
83
- this.$container.paddingTopMobile = r;
84
- break;
85
- case "padding-bottom--mobile":
86
- this.$container.paddingBottomMobile = r;
87
- break;
88
- case "padding-block--tablet":
89
- this.$container.paddingBlockTablet = r;
90
- break;
91
- case "padding-top--tablet":
92
- this.$container.paddingTopTablet = r;
93
- break;
94
- case "padding-bottom--tablet":
95
- this.$container.paddingBottomTablet = r;
96
- break;
97
- case "padding-block--laptop":
98
- this.$container.paddingBlockLaptop = r;
99
- break;
100
- case "padding-top--laptop":
101
- this.$container.paddingTopLaptop = r;
102
- break;
103
- case "padding-bottom--laptop":
104
- this.$container.paddingBottomLaptop = r;
105
- break;
106
- case "border":
107
- this.$container.border = r;
108
- break;
109
- case "border-side":
110
- this.$container.borderSide = r;
111
- break;
112
- case "border-side--mobile":
113
- this.$container.borderSideMobile = r;
114
- break;
115
- case "border-side--tablet":
116
- this.$container.borderSideTablet = r;
117
- break;
118
- case "border-side--laptop":
119
- this.$container.borderSideLaptop = r;
120
- break;
121
- default: super.attributeChangedCallback(e, n, r);
122
- }
123
- }
124
- disconnectedCallback() {
125
- this.$slotHeading?.removeEventListener("slotchange", this.setHeadingSpacing), this.$slotOverlap?.removeEventListener("slotchange", this.toggleOverlapSpacing);
126
- }
127
- toggleOverlapSpacing() {
128
- let e = this.$slotOverlap, t = this.$mainContentWrapper;
129
- if (!e || !t) return;
130
- let n = e.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
131
- t.classList.toggle("overlapped", n);
132
- }
133
- isNotEmptyNode(e) {
134
- return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && (e.textContent ?? "").trim().length > 0;
135
- }
136
- setHeadingSpacing() {
137
- let e = this.$slotHeading, t = this.shadowRoot?.querySelector("px-vstack");
138
- e && t && (e.assignedElements().length > 0 ? t.setAttribute("gap", "heading-to-content") : t.setAttribute("gap", "none"));
139
- }
140
- get $container() {
141
- return this.shadowRoot?.querySelector("px-container");
142
- }
143
- get $mainContentWrapper() {
144
- return this.$container?.querySelector(".content-wrapper");
145
- }
146
- get $slotOverlap() {
147
- return this.shadowRoot?.querySelector("slot[name=\"overlap\"]");
148
- }
149
- get $slottedOverlap() {
150
- return this.querySelector("[slot=\"overlap\"]");
151
- }
152
- get $slotHeading() {
153
- return this.shadowRoot?.querySelector("slot[name=\"heading\"]");
154
- }
155
- get $slottedHeading() {
156
- return this.querySelector("[slot=\"heading\"]");
157
- }
158
- get backgroundColor() {
159
- return this.getAttribute("background-color") || "none";
160
- }
161
- set backgroundColor(e) {
162
- n(this, "background-color", e);
163
- }
164
- get gradient() {
165
- return this.getAttribute("background-gradient");
166
- }
167
- set gradient(e) {
168
- n(this, "background-gradient", e);
169
- }
170
- get backgroundImage() {
171
- return this.getAttribute("background-image");
172
- }
173
- set backgroundImage(e) {
174
- n(this, "background-image", e);
175
- }
176
- get backgroundImageMobile() {
177
- return this.getAttribute("background-image--mobile");
178
- }
179
- set backgroundImageMobile(e) {
180
- n(this, "background-image--mobile", e);
181
- }
182
- get backgroundImageTablet() {
183
- return this.getAttribute("background-image--tablet");
184
- }
185
- set backgroundImageTablet(e) {
186
- n(this, "background-image--tablet", e);
187
- }
188
- get backgroundImageLaptop() {
189
- return this.getAttribute("background-image--laptop");
190
- }
191
- set backgroundImageLaptop(e) {
192
- n(this, "background-image--laptop", e);
193
- }
194
- get backgroundSize() {
195
- return this.getAttribute("background-size");
196
- }
197
- set backgroundSize(e) {
198
- n(this, "background-size", e);
199
- }
200
- get backgroundPosition() {
201
- return this.getAttribute("background-position");
202
- }
203
- set backgroundPosition(e) {
204
- n(this, "background-position", e);
205
- }
206
- get paddingBlock() {
207
- return this.getAttribute("padding-block");
208
- }
209
- set paddingBlock(e) {
210
- n(this, "padding-block", e);
211
- }
212
- get paddingTop() {
213
- return this.getAttribute("padding-top");
214
- }
215
- set paddingTop(e) {
216
- n(this, "padding-top", e);
217
- }
218
- get paddingBottom() {
219
- return this.getAttribute("padding-bottom");
220
- }
221
- set paddingBottom(e) {
222
- n(this, "padding-bottom", e);
223
- }
224
- get paddingBlockMobile() {
225
- return this.getAttribute("padding-block--mobile");
226
- }
227
- set paddingBlockMobile(e) {
228
- n(this, "padding-block--mobile", e);
229
- }
230
- get paddingTopMobile() {
231
- return this.getAttribute("padding-top--mobile");
232
- }
233
- set paddingTopMobile(e) {
234
- n(this, "padding-top--mobile", e);
235
- }
236
- get paddingBottomMobile() {
237
- return this.getAttribute("padding-bottom--mobile");
238
- }
239
- set paddingBottomMobile(e) {
240
- n(this, "padding-bottom--mobile", e);
241
- }
242
- get paddingBlockTablet() {
243
- return this.getAttribute("padding-block--tablet");
244
- }
245
- set paddingBlockTablet(e) {
246
- n(this, "padding-block--tablet", e);
247
- }
248
- get paddingTopTablet() {
249
- return this.getAttribute("padding-top--tablet");
250
- }
251
- set paddingTopTablet(e) {
252
- n(this, "padding-top--tablet", e);
253
- }
254
- get paddingBottomTablet() {
255
- return this.getAttribute("padding-bottom--tablet");
256
- }
257
- set paddingBottomTablet(e) {
258
- n(this, "padding-bottom--tablet", e);
259
- }
260
- get paddingBlockLaptop() {
261
- return this.getAttribute("padding-block--laptop");
262
- }
263
- set paddingBlockLaptop(e) {
264
- n(this, "padding-block--laptop", e);
265
- }
266
- get paddingTopLaptop() {
267
- return this.getAttribute("padding-top--laptop");
268
- }
269
- set paddingTopLaptop(e) {
270
- n(this, "padding-top--laptop", e);
271
- }
272
- get paddingBottomLaptop() {
273
- return this.getAttribute("padding-bottom--laptop");
274
- }
275
- set paddingBottomLaptop(e) {
276
- n(this, "padding-bottom--laptop", e);
277
- }
278
- get border() {
279
- return this.getAttribute("border");
280
- }
281
- set border(e) {
282
- n(this, "border", e);
283
- }
284
- get borderSide() {
285
- return this.getAttribute("border-side");
286
- }
287
- set borderSide(e) {
288
- n(this, "border-side", e);
289
- }
290
- get borderSideMobile() {
291
- return this.getAttribute("border-side--mobile");
292
- }
293
- set borderSideMobile(e) {
294
- n(this, "border-side--mobile", e);
295
- }
296
- get borderSideTablet() {
297
- return this.getAttribute("border-side--tablet");
298
- }
299
- set borderSideTablet(e) {
300
- n(this, "border-side--tablet", e);
301
- }
302
- get borderSideLaptop() {
303
- return this.getAttribute("border-side--laptop");
304
- }
305
- set borderSideLaptop(e) {
306
- n(this, "border-side--laptop", e);
307
- }
4
+ const n = ':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 screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}', a = new CSSStyleSheet();
5
+ a.replaceSync(n);
6
+ class s extends r {
7
+ constructor() {
8
+ super(a), this.template = () => `
9
+ <px-container border-radius="none" padding-inline="none">
10
+ <div class="content-wrapper">
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.shadowRoot.innerHTML = this.template();
23
+ }
24
+ connectedCallback() {
25
+ var t, i;
26
+ this.$container.setAttribute("background-color", this.backgroundColor), !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"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (i = this.$slotOverlap) == null || i.addEventListener(
27
+ "slotchange",
28
+ this.toggleOverlapSpacing
29
+ );
30
+ }
31
+ static get observedAttributes() {
32
+ return [
33
+ ...super.observedAttributes,
34
+ "background-color",
35
+ "background-gradient",
36
+ "background-image",
37
+ "background-image--mobile",
38
+ "background-image--tablet",
39
+ "background-image--laptop",
40
+ "background-size",
41
+ "background-position",
42
+ "padding-block",
43
+ "padding-top",
44
+ "padding-bottom",
45
+ "padding-block--mobile",
46
+ "padding-top--mobile",
47
+ "padding-bottom--mobile",
48
+ "padding-block--tablet",
49
+ "padding-top--tablet",
50
+ "padding-bottom--tablet",
51
+ "padding-block--laptop",
52
+ "padding-top--laptop",
53
+ "padding-bottom--laptop",
54
+ "border",
55
+ "border-side",
56
+ "border-side--mobile",
57
+ "border-side--tablet",
58
+ "border-side--laptop"
59
+ ];
60
+ }
61
+ attributeChangedCallback(t, i, e) {
62
+ if (i !== e)
63
+ switch (t) {
64
+ case "background-color":
65
+ this.$container.backgroundColor = d.indexOf(e) > 0 ? e : "none";
66
+ break;
67
+ case "background-gradient":
68
+ this.$container.gradient = this.gradient;
69
+ break;
70
+ case "background-image":
71
+ this.$container.backgroundImage = e;
72
+ break;
73
+ case "background-image--mobile":
74
+ this.$container.backgroundImageMobile = e;
75
+ break;
76
+ case "background-image--tablet":
77
+ this.$container.backgroundImageTablet = e;
78
+ break;
79
+ case "background-image--laptop":
80
+ this.$container.backgroundImageLaptop = e;
81
+ break;
82
+ case "background-size":
83
+ this.$container.backgroundSize = e;
84
+ break;
85
+ case "background-position":
86
+ this.$container.backgroundPosition = e;
87
+ break;
88
+ case "padding-block":
89
+ this.$container.paddingBlock = e;
90
+ break;
91
+ case "padding-top":
92
+ this.$container.paddingTop = e;
93
+ break;
94
+ case "padding-bottom":
95
+ this.$container.paddingBottom = e;
96
+ break;
97
+ case "padding-block--mobile":
98
+ this.$container.paddingBlockMobile = e;
99
+ break;
100
+ case "padding-top--mobile":
101
+ this.$container.paddingTopMobile = e;
102
+ break;
103
+ case "padding-bottom--mobile":
104
+ this.$container.paddingBottomMobile = e;
105
+ break;
106
+ case "padding-block--tablet":
107
+ this.$container.paddingBlockTablet = e;
108
+ break;
109
+ case "padding-top--tablet":
110
+ this.$container.paddingTopTablet = e;
111
+ break;
112
+ case "padding-bottom--tablet":
113
+ this.$container.paddingBottomTablet = e;
114
+ break;
115
+ case "padding-block--laptop":
116
+ this.$container.paddingBlockLaptop = e;
117
+ break;
118
+ case "padding-top--laptop":
119
+ this.$container.paddingTopLaptop = e;
120
+ break;
121
+ case "padding-bottom--laptop":
122
+ this.$container.paddingBottomLaptop = e;
123
+ break;
124
+ case "border":
125
+ this.$container.border = e;
126
+ break;
127
+ case "border-side":
128
+ this.$container.borderSide = e;
129
+ break;
130
+ case "border-side--mobile":
131
+ this.$container.borderSideMobile = e;
132
+ break;
133
+ case "border-side--tablet":
134
+ this.$container.borderSideTablet = e;
135
+ break;
136
+ case "border-side--laptop":
137
+ this.$container.borderSideLaptop = e;
138
+ break;
139
+ default:
140
+ super.attributeChangedCallback(t, i, e);
141
+ break;
142
+ }
143
+ }
144
+ disconnectedCallback() {
145
+ var t, i;
146
+ (t = this.$slotHeading) == null || t.removeEventListener(
147
+ "slotchange",
148
+ this.setHeadingSpacing
149
+ ), (i = this.$slotOverlap) == null || i.removeEventListener(
150
+ "slotchange",
151
+ this.toggleOverlapSpacing
152
+ );
153
+ }
154
+ toggleOverlapSpacing() {
155
+ const t = this.$slotOverlap, i = this.$mainContentWrapper;
156
+ if (!t || !i) return;
157
+ const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
158
+ i.classList.toggle("overlapped", o);
159
+ }
160
+ isNotEmptyNode(t) {
161
+ return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
162
+ }
163
+ setHeadingSpacing() {
164
+ var e;
165
+ const t = this.$slotHeading, i = (e = this.shadowRoot) == null ? void 0 : e.querySelector("px-vstack");
166
+ t && i && (t.assignedElements().length > 0 ? i.setAttribute("gap", "heading-to-content") : i.setAttribute("gap", "none"));
167
+ }
168
+ get $container() {
169
+ var t;
170
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
171
+ }
172
+ get $mainContentWrapper() {
173
+ var t;
174
+ return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
175
+ }
176
+ get $slotOverlap() {
177
+ var t;
178
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
179
+ 'slot[name="overlap"]'
180
+ );
181
+ }
182
+ get $slottedOverlap() {
183
+ return this.querySelector('[slot="overlap"]');
184
+ }
185
+ get $slotHeading() {
186
+ var t;
187
+ return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
188
+ 'slot[name="heading"]'
189
+ );
190
+ }
191
+ get $slottedHeading() {
192
+ return this.querySelector('[slot="heading"]');
193
+ }
194
+ get backgroundColor() {
195
+ return this.getAttribute("background-color") || "none";
196
+ }
197
+ set backgroundColor(t) {
198
+ this.setAttribute("background-color", t);
199
+ }
200
+ get gradient() {
201
+ return this.getAttribute("background-gradient");
202
+ }
203
+ set gradient(t) {
204
+ this.setAttribute("background-gradient", t);
205
+ }
206
+ get backgroundImage() {
207
+ return this.getAttribute("background-image");
208
+ }
209
+ set backgroundImage(t) {
210
+ this.setAttribute("background-image", t);
211
+ }
212
+ get backgroundImageMobile() {
213
+ return this.getAttribute("background-image--mobile");
214
+ }
215
+ set backgroundImageMobile(t) {
216
+ this.setAttribute("background-image--mobile", t);
217
+ }
218
+ get backgroundImageTablet() {
219
+ return this.getAttribute("background-image--tablet");
220
+ }
221
+ set backgroundImageTablet(t) {
222
+ this.setAttribute("background-image--tablet", t);
223
+ }
224
+ get backgroundImageLaptop() {
225
+ return this.getAttribute("background-image--laptop");
226
+ }
227
+ set backgroundImageLaptop(t) {
228
+ this.setAttribute("background-image--laptop", t);
229
+ }
230
+ get backgroundSize() {
231
+ return this.getAttribute("background-size");
232
+ }
233
+ set backgroundSize(t) {
234
+ this.setAttribute("background-size", t);
235
+ }
236
+ get backgroundPosition() {
237
+ return this.getAttribute("background-position");
238
+ }
239
+ set backgroundPosition(t) {
240
+ this.setAttribute("background-position", t);
241
+ }
242
+ get paddingBlock() {
243
+ return this.getAttribute("padding-block");
244
+ }
245
+ set paddingBlock(t) {
246
+ this.setAttribute("padding-block", t);
247
+ }
248
+ get paddingTop() {
249
+ return this.getAttribute("padding-top");
250
+ }
251
+ set paddingTop(t) {
252
+ this.setAttribute("padding-top", t);
253
+ }
254
+ get paddingBottom() {
255
+ return this.getAttribute("padding-bottom");
256
+ }
257
+ set paddingBottom(t) {
258
+ this.setAttribute("padding-bottom", t);
259
+ }
260
+ get paddingBlockMobile() {
261
+ return this.getAttribute("padding-block--mobile");
262
+ }
263
+ set paddingBlockMobile(t) {
264
+ this.setAttribute("padding-block--mobile", t);
265
+ }
266
+ get paddingTopMobile() {
267
+ return this.getAttribute("padding-top--mobile");
268
+ }
269
+ set paddingTopMobile(t) {
270
+ this.setAttribute("padding-top--mobile", t);
271
+ }
272
+ get paddingBottomMobile() {
273
+ return this.getAttribute("padding-bottom--mobile");
274
+ }
275
+ set paddingBottomMobile(t) {
276
+ this.setAttribute("padding-bottom--mobile", t);
277
+ }
278
+ get paddingBlockTablet() {
279
+ return this.getAttribute("padding-block--tablet");
280
+ }
281
+ set paddingBlockTablet(t) {
282
+ this.setAttribute("padding-block--tablet", t);
283
+ }
284
+ get paddingTopTablet() {
285
+ return this.getAttribute("padding-top--tablet");
286
+ }
287
+ set paddingTopTablet(t) {
288
+ this.setAttribute("padding-top--tablet", t);
289
+ }
290
+ get paddingBottomTablet() {
291
+ return this.getAttribute("padding-bottom--tablet");
292
+ }
293
+ set paddingBottomTablet(t) {
294
+ this.setAttribute("padding-bottom--tablet", t);
295
+ }
296
+ get paddingBlockLaptop() {
297
+ return this.getAttribute("padding-block--laptop");
298
+ }
299
+ set paddingBlockLaptop(t) {
300
+ this.setAttribute("padding-block--laptop", t);
301
+ }
302
+ get paddingTopLaptop() {
303
+ return this.getAttribute("padding-top--laptop");
304
+ }
305
+ set paddingTopLaptop(t) {
306
+ this.setAttribute("padding-top--laptop", t);
307
+ }
308
+ get paddingBottomLaptop() {
309
+ return this.getAttribute("padding-bottom--laptop");
310
+ }
311
+ set paddingBottomLaptop(t) {
312
+ this.setAttribute("padding-bottom--laptop", t);
313
+ }
314
+ get border() {
315
+ return this.getAttribute("border");
316
+ }
317
+ set border(t) {
318
+ this.setAttribute("border", t);
319
+ }
320
+ get borderSide() {
321
+ return this.getAttribute("border-side");
322
+ }
323
+ set borderSide(t) {
324
+ this.setAttribute("border-side", t);
325
+ }
326
+ get borderSideMobile() {
327
+ return this.getAttribute("border-side--mobile");
328
+ }
329
+ set borderSideMobile(t) {
330
+ this.setAttribute("border-side--mobile", t);
331
+ }
332
+ get borderSideTablet() {
333
+ return this.getAttribute("border-side--tablet");
334
+ }
335
+ set borderSideTablet(t) {
336
+ this.setAttribute("border-side--tablet", t);
337
+ }
338
+ get borderSideLaptop() {
339
+ return this.getAttribute("border-side--laptop");
340
+ }
341
+ set borderSideLaptop(t) {
342
+ this.setAttribute("border-side--laptop", t);
343
+ }
344
+ }
345
+ customElements.get("px-section") || customElements.define("px-section", s);
346
+ export {
347
+ s as Section
308
348
  };
309
- customElements.get("px-section") || customElements.define("px-section", a);
310
- //#endregion
311
- export { a as Section };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-section",
3
- "version": "1.4.14-beta.3",
3
+ "version": "1.4.14",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",