@proximus/lavender-layout 2.0.0-alpha.16 → 2.0.0-alpha.160
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 +24 -17
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { WithExtraAttributes as d, AttributeBreakpointHandlerDelegate as u, gapValues as b, checkName as
|
|
2
|
-
const m = ':host{display:block}: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
|
|
3
|
-
|
|
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
4
|
const v = [
|
|
5
5
|
"",
|
|
6
6
|
"default",
|
|
@@ -13,14 +13,18 @@ const v = [
|
|
|
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",
|
|
@@ -28,7 +32,7 @@ const v = [
|
|
|
28
32
|
], y = ["", "default", "nowrap", "wrap", "wrap-reverse"], A = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
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,
|
|
@@ -130,9 +134,9 @@ class l extends d {
|
|
|
130
134
|
}
|
|
131
135
|
}
|
|
132
136
|
updateOverflowX(t, i, e, o) {
|
|
133
|
-
if (!
|
|
134
|
-
|
|
135
|
-
|
|
137
|
+
if (!x(o, e)) {
|
|
138
|
+
c(
|
|
139
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
136
140
|
);
|
|
137
141
|
return;
|
|
138
142
|
}
|
|
@@ -143,11 +147,11 @@ class l extends d {
|
|
|
143
147
|
);
|
|
144
148
|
}
|
|
145
149
|
updateFlexProperties(t, i, e, o) {
|
|
146
|
-
this.checkName(o, e) ||
|
|
147
|
-
|
|
150
|
+
this.checkName(o, e) || c(
|
|
151
|
+
`"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
148
152
|
);
|
|
149
|
-
const
|
|
150
|
-
if (!
|
|
153
|
+
const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, s = [];
|
|
154
|
+
if (!p)
|
|
151
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) => {
|
|
152
156
|
this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
|
|
153
157
|
});
|
|
@@ -157,10 +161,13 @@ class l extends d {
|
|
|
157
161
|
}
|
|
158
162
|
}
|
|
159
163
|
updateStyle(t, i, e, o) {
|
|
160
|
-
e && (t === "gap" && o && o.includes(e) ? this.$el.style.setProperty(
|
|
164
|
+
e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
|
|
161
165
|
`--flex-${t}--${i}-value`,
|
|
162
166
|
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
163
|
-
)
|
|
167
|
+
), this.style.setProperty(
|
|
168
|
+
`--host-gap--${i}`,
|
|
169
|
+
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
170
|
+
)) : this.$el.style.setProperty(
|
|
164
171
|
`--flex-${t}--${i}-value`,
|
|
165
172
|
e
|
|
166
173
|
));
|
|
@@ -416,11 +423,11 @@ class S extends HTMLElement {
|
|
|
416
423
|
}
|
|
417
424
|
}
|
|
418
425
|
customElements.get("px-spacer") || customElements.define("px-spacer", S);
|
|
419
|
-
const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.
|
|
420
|
-
|
|
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);
|
|
421
428
|
class z extends d {
|
|
422
429
|
constructor() {
|
|
423
|
-
super(
|
|
430
|
+
super(g), this.template = (t) => `
|
|
424
431
|
<px-container border-radius="none" padding="none">
|
|
425
432
|
<px-vstack>
|
|
426
433
|
<px-container id="header-container" border-radius="none">
|
|
@@ -597,7 +604,7 @@ class z extends d {
|
|
|
597
604
|
case "background-color":
|
|
598
605
|
this.$bodyContainer.setAttribute(
|
|
599
606
|
"background-color",
|
|
600
|
-
|
|
607
|
+
f.indexOf(e) > 0 ? e : "none"
|
|
601
608
|
);
|
|
602
609
|
break;
|
|
603
610
|
case "padding-vertical":
|