@proximus/lavender-layout 2.0.0-alpha.11 → 2.0.0-alpha.111
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/Spacer.d.ts +3 -0
- package/dist/index.es.js +61 -44
- package/package.json +1 -1
package/dist/Spacer.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare class Spacer extends HTMLElement {
|
|
2
2
|
private resizeObserver?;
|
|
3
|
+
private intersectionObserver?;
|
|
3
4
|
private recheckHandle?;
|
|
4
5
|
private isZeroSized;
|
|
5
6
|
private growValue;
|
|
@@ -15,4 +16,6 @@ export declare class Spacer extends HTMLElement {
|
|
|
15
16
|
private recalculateVisibility;
|
|
16
17
|
private handleSizeChange;
|
|
17
18
|
private updateParticipation;
|
|
19
|
+
get nogap(): boolean;
|
|
20
|
+
set nogap(value: boolean);
|
|
18
21
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,34 +1,38 @@
|
|
|
1
|
-
import { WithExtraAttributes as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { WithExtraAttributes as d, AttributeBreakpointHandlerDelegate as u, gapValues as b, checkName as x, log as c, backgroundColorValues as f } from "@proximus/lavender-common";
|
|
2
|
+
const m = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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))}}', h = new CSSStyleSheet();
|
|
3
|
+
h.replaceSync(m);
|
|
4
|
+
const v = [
|
|
5
5
|
"",
|
|
6
6
|
"default",
|
|
7
7
|
"row",
|
|
8
8
|
"row-reverse",
|
|
9
9
|
"column",
|
|
10
10
|
"column-reverse"
|
|
11
|
-
],
|
|
11
|
+
], k = [
|
|
12
12
|
"",
|
|
13
13
|
"default",
|
|
14
14
|
"stretch",
|
|
15
15
|
"flex-start",
|
|
16
|
+
"start",
|
|
16
17
|
"flex-end",
|
|
18
|
+
"end",
|
|
17
19
|
"center",
|
|
18
20
|
"baseline"
|
|
19
|
-
],
|
|
21
|
+
], w = [
|
|
20
22
|
"",
|
|
21
23
|
"default",
|
|
22
24
|
"flex-start",
|
|
25
|
+
"start",
|
|
23
26
|
"flex-end",
|
|
27
|
+
"end",
|
|
24
28
|
"center",
|
|
25
29
|
"space-between",
|
|
26
30
|
"space-around",
|
|
27
31
|
"space-evenly"
|
|
28
|
-
],
|
|
29
|
-
class l extends
|
|
32
|
+
], y = ["", "default", "nowrap", "wrap", "wrap-reverse"], A = ["", "visible", "hidden", "scroll", "auto"];
|
|
33
|
+
class l extends d {
|
|
30
34
|
constructor() {
|
|
31
|
-
super(
|
|
35
|
+
super(h), this.overflowXAttributeDelegate = new u(
|
|
32
36
|
this,
|
|
33
37
|
"overflow-x",
|
|
34
38
|
(t) => t,
|
|
@@ -82,7 +86,7 @@ class l extends p {
|
|
|
82
86
|
case "gap--tablet":
|
|
83
87
|
case "gap--laptop":
|
|
84
88
|
case "gap--desktop":
|
|
85
|
-
this.updateFlexProperties(t, i, e,
|
|
89
|
+
this.updateFlexProperties(t, i, e, b);
|
|
86
90
|
break;
|
|
87
91
|
case "justify-content":
|
|
88
92
|
case "justify-content--mobile":
|
|
@@ -93,7 +97,7 @@ class l extends p {
|
|
|
93
97
|
t,
|
|
94
98
|
i,
|
|
95
99
|
e,
|
|
96
|
-
|
|
100
|
+
w
|
|
97
101
|
);
|
|
98
102
|
break;
|
|
99
103
|
case "align-items":
|
|
@@ -101,28 +105,28 @@ class l extends p {
|
|
|
101
105
|
case "align-items--tablet":
|
|
102
106
|
case "align-items--laptop":
|
|
103
107
|
case "align-items--desktop":
|
|
104
|
-
this.updateFlexProperties(t, i, e,
|
|
108
|
+
this.updateFlexProperties(t, i, e, k);
|
|
105
109
|
break;
|
|
106
110
|
case "wrap":
|
|
107
111
|
case "wrap--mobile":
|
|
108
112
|
case "wrap--tablet":
|
|
109
113
|
case "wrap--laptop":
|
|
110
114
|
case "wrap--desktop":
|
|
111
|
-
this.updateFlexProperties(t, i, e,
|
|
115
|
+
this.updateFlexProperties(t, i, e, y);
|
|
112
116
|
break;
|
|
113
117
|
case "direction":
|
|
114
118
|
case "direction--mobile":
|
|
115
119
|
case "direction--tablet":
|
|
116
120
|
case "direction--laptop":
|
|
117
121
|
case "direction--desktop":
|
|
118
|
-
this.updateFlexProperties(t, i, e,
|
|
122
|
+
this.updateFlexProperties(t, i, e, v);
|
|
119
123
|
break;
|
|
120
124
|
case "overflow-x":
|
|
121
125
|
case "overflow-x--mobile":
|
|
122
126
|
case "overflow-x--tablet":
|
|
123
127
|
case "overflow-x--laptop":
|
|
124
128
|
case "overflow-x--desktop":
|
|
125
|
-
this.updateOverflowX(t, i, e,
|
|
129
|
+
this.updateOverflowX(t, i, e, A);
|
|
126
130
|
break;
|
|
127
131
|
default:
|
|
128
132
|
super.attributeChangedCallback(t, i, e);
|
|
@@ -130,8 +134,10 @@ class l extends p {
|
|
|
130
134
|
}
|
|
131
135
|
}
|
|
132
136
|
updateOverflowX(t, i, e, o) {
|
|
133
|
-
if (!
|
|
134
|
-
|
|
137
|
+
if (!x(o, e)) {
|
|
138
|
+
c(
|
|
139
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
140
|
+
);
|
|
135
141
|
return;
|
|
136
142
|
}
|
|
137
143
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
@@ -141,9 +147,11 @@ class l extends p {
|
|
|
141
147
|
);
|
|
142
148
|
}
|
|
143
149
|
updateFlexProperties(t, i, e, o) {
|
|
144
|
-
this.checkName(o, e) ||
|
|
145
|
-
|
|
146
|
-
|
|
150
|
+
this.checkName(o, e) || c(
|
|
151
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
152
|
+
);
|
|
153
|
+
const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, s = [];
|
|
154
|
+
if (!p)
|
|
147
155
|
this.getAttribute(a + "--mobile") || s.push("mobile"), this.getAttribute(a + "--tablet") || s.push("tablet"), this.getAttribute(a + "--laptop") || s.push("laptop"), this.getAttribute(a + "--desktop") || s.push("desktop"), s.forEach((r) => {
|
|
148
156
|
this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
|
|
149
157
|
});
|
|
@@ -153,10 +161,13 @@ class l extends p {
|
|
|
153
161
|
}
|
|
154
162
|
}
|
|
155
163
|
updateStyle(t, i, e, o) {
|
|
156
|
-
e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
|
|
164
|
+
e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
|
|
157
165
|
`--flex-${t}--${i}-value`,
|
|
158
166
|
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
159
|
-
)
|
|
167
|
+
), this.style.setProperty(
|
|
168
|
+
`--host-gap--${i}`,
|
|
169
|
+
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
170
|
+
)) : this.$el.style.setProperty(
|
|
160
171
|
`--flex-${t}--${i}-value`,
|
|
161
172
|
e
|
|
162
173
|
));
|
|
@@ -346,7 +357,7 @@ class l extends p {
|
|
|
346
357
|
}
|
|
347
358
|
}
|
|
348
359
|
customElements.get("px-stack") || customElements.define("px-stack", l);
|
|
349
|
-
class
|
|
360
|
+
class C extends l {
|
|
350
361
|
constructor() {
|
|
351
362
|
super();
|
|
352
363
|
}
|
|
@@ -354,8 +365,8 @@ class A extends l {
|
|
|
354
365
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
355
366
|
}
|
|
356
367
|
}
|
|
357
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
358
|
-
class
|
|
368
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", C);
|
|
369
|
+
class $ extends l {
|
|
359
370
|
constructor() {
|
|
360
371
|
super();
|
|
361
372
|
}
|
|
@@ -363,21 +374,21 @@ class C extends l {
|
|
|
363
374
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
364
375
|
}
|
|
365
376
|
}
|
|
366
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
367
|
-
class
|
|
377
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", $);
|
|
378
|
+
class S extends HTMLElement {
|
|
368
379
|
constructor() {
|
|
369
380
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
370
381
|
}
|
|
371
382
|
static get observedAttributes() {
|
|
372
|
-
return ["grow"];
|
|
383
|
+
return ["grow", "nogap"];
|
|
373
384
|
}
|
|
374
385
|
attributeChangedCallback(t, i, e) {
|
|
375
386
|
t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
376
387
|
}
|
|
377
388
|
connectedCallback() {
|
|
378
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
389
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
|
|
379
390
|
this.handleSizeChange();
|
|
380
|
-
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
391
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
381
392
|
}
|
|
382
393
|
disconnectedCallback() {
|
|
383
394
|
var t;
|
|
@@ -404,11 +415,17 @@ class $ extends HTMLElement {
|
|
|
404
415
|
updateParticipation() {
|
|
405
416
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
406
417
|
}
|
|
418
|
+
get nogap() {
|
|
419
|
+
return this.hasAttribute("nogap");
|
|
420
|
+
}
|
|
421
|
+
set nogap(t) {
|
|
422
|
+
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
423
|
+
}
|
|
407
424
|
}
|
|
408
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
409
|
-
const
|
|
410
|
-
g.replaceSync(
|
|
411
|
-
class
|
|
425
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", S);
|
|
426
|
+
const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", g = new CSSStyleSheet();
|
|
427
|
+
g.replaceSync(j);
|
|
428
|
+
class z extends d {
|
|
412
429
|
constructor() {
|
|
413
430
|
super(g), this.template = (t) => `
|
|
414
431
|
<px-container border-radius="none" padding="none">
|
|
@@ -607,16 +624,16 @@ class j extends p {
|
|
|
607
624
|
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;
|
|
608
625
|
}
|
|
609
626
|
}
|
|
610
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
627
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", z);
|
|
611
628
|
export {
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
629
|
+
$ as HStack,
|
|
630
|
+
z as Page,
|
|
631
|
+
S as Spacer,
|
|
615
632
|
l as Stack,
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
633
|
+
C as VStack,
|
|
634
|
+
k as alignItemsValues,
|
|
635
|
+
v as directionValues,
|
|
636
|
+
w as justifyContentValues,
|
|
637
|
+
A as overflowValues,
|
|
638
|
+
y as wrapValues
|
|
622
639
|
};
|