@proximus/lavender-layout 2.0.0-alpha.14 → 2.0.0-alpha.142
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/index.es.js +52 -41
- package/package.json +1 -1
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,8 +374,8 @@ 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
|
}
|
|
@@ -411,10 +422,10 @@ class $ extends HTMLElement {
|
|
|
411
422
|
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
412
423
|
}
|
|
413
424
|
}
|
|
414
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
415
|
-
const
|
|
416
|
-
g.replaceSync(
|
|
417
|
-
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 {
|
|
418
429
|
constructor() {
|
|
419
430
|
super(g), this.template = (t) => `
|
|
420
431
|
<px-container border-radius="none" padding="none">
|
|
@@ -613,16 +624,16 @@ class j extends p {
|
|
|
613
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;
|
|
614
625
|
}
|
|
615
626
|
}
|
|
616
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
627
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", z);
|
|
617
628
|
export {
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
629
|
+
$ as HStack,
|
|
630
|
+
z as Page,
|
|
631
|
+
S as Spacer,
|
|
621
632
|
l as Stack,
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
633
|
+
C as VStack,
|
|
634
|
+
k as alignItemsValues,
|
|
635
|
+
v as directionValues,
|
|
636
|
+
w as justifyContentValues,
|
|
637
|
+
A as overflowValues,
|
|
638
|
+
y as wrapValues
|
|
628
639
|
};
|