@proximus/lavender-layout 1.1.0-alpha.6 → 1.1.0-alpha.8

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 (2) hide show
  1. package/dist/index.js +127 -149
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,43 +1,54 @@
1
- import { WithFlexAttributes as r, backgroundColorValues as l } from "@proximus/lavender-common";
2
- const p = ".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)}@media screen and (min-width: 768px){.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)}}@media screen and (min-width: 1025px){.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)}}@media screen and (min-width: 1441px){.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)}}", s = new CSSStyleSheet();
3
- s.replaceSync(p);
4
- const c = [
5
- // Vertical
6
- "between-section-vertical",
7
- "between-options-vertical",
8
- "under-text-vertical",
9
- "display-to-subtitle-vertical",
10
- "under-display-vertical",
11
- "component-default-vertical",
12
- "component-expanded-vertical",
13
- "between-section-vertical-mobile",
14
- "between-options-vertical-mobile",
15
- "under-text-vertical-mobile",
16
- "display-to-subtitle-vertical-mobile",
17
- "under-display-vertical-mobile",
18
- "component-default-vertical-mobile",
19
- "component-expanded-vertical-mobile",
20
- // Horizontal
21
- "between-icon-horizontal",
22
- "text-to-icon-compact-horizontal",
23
- "text-to-icon-horizontal",
24
- "component-compact-horizontal",
25
- "component-default-horizontal",
26
- "component-expanded-horizontal",
27
- "between-icon-horizontal-mobile",
28
- "text-to-icon-compact-horizontal-mobile",
29
- "text-to-icon-horizontal-mobile",
30
- "component-compact-horizontal-mobile",
31
- "component-default-horizontal-mobile"
32
- ];
33
- class o extends r {
1
+ import { WithFlexAttributes as l, backgroundColorValues as b } from "@proximus/lavender-common";
2
+ const u = ".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)}@media screen and (min-width: 768px){.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)}}@media screen and (min-width: 1025px){.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)}}@media screen and (min-width: 1441px){.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)}}", d = new CSSStyleSheet();
3
+ d.replaceSync(u);
4
+ const h = [
5
+ "after-element-none",
6
+ "after-element-2xs",
7
+ "after-element-xs",
8
+ "after-element-s",
9
+ "after-element-default",
10
+ "after-element-l",
11
+ "heading-to-subtitle",
12
+ "heading-to-content",
13
+ "inside-section-none",
14
+ "inside-section-xs",
15
+ "inside-section-s",
16
+ "inside-section-default",
17
+ "inside-section-l",
18
+ "between-sections"
19
+ ], x = [
20
+ "",
21
+ "default",
22
+ "row",
23
+ "row-reverse",
24
+ "column",
25
+ "column-reverse"
26
+ ], m = [
27
+ "",
28
+ "default",
29
+ "stretch",
30
+ "flex-start",
31
+ "flex-end",
32
+ "center",
33
+ "baseline"
34
+ ], f = [
35
+ "",
36
+ "default",
37
+ "flex-start",
38
+ "flex-end",
39
+ "center",
40
+ "space-between",
41
+ "space-around",
42
+ "space-evenly"
43
+ ], k = ["", "default", "nowrap", "wrap", "wrap-reverse"];
44
+ class p extends l {
34
45
  constructor() {
35
- super(s), this.template = `<div class="flex-container">
46
+ super(d), this.template = `<div class="flex-container">
36
47
  <slot></slot>
37
48
  </div>`, this.shadowRoot.innerHTML = this.template;
38
49
  }
39
50
  connectedCallback() {
40
- this.hasAttribute("direction") || (this.direction = "row");
51
+ this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "inside-section-none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap");
41
52
  }
42
53
  static get observedAttributes() {
43
54
  return [
@@ -63,10 +74,10 @@ class o extends r {
63
74
  "align-items--laptop",
64
75
  "align-items--desktop",
65
76
  "wrap",
66
- "wrap-mobile",
67
- "wrap-tablet",
68
- "wrap-laptop",
69
- "wrap-desktop"
77
+ "wrap--mobile",
78
+ "wrap--tablet",
79
+ "wrap--laptop",
80
+ "wrap--desktop"
70
81
  ];
71
82
  }
72
83
  attributeChangedCallback(t, i, e) {
@@ -74,110 +85,73 @@ class o extends r {
74
85
  throw new Error("Invalid direction");
75
86
  switch (t) {
76
87
  case "gap":
77
- this.$el.style.getPropertyValue("--flex-gap--mobile-value") || this.$el.style.setProperty(
78
- "--flex-gap--mobile-value",
79
- this.getGapCSSVariable(e)
80
- ), this.$el.style.getPropertyValue("--flex-gap--tablet-value") || this.$el.style.setProperty(
81
- "--flex-gap--tablet-value",
82
- this.getGapCSSVariable(e)
83
- ), this.$el.style.getPropertyValue("--flex-gap--laptop-value") || this.$el.style.setProperty(
84
- "--flex-gap--laptop-value",
85
- this.getGapCSSVariable(e)
86
- ), this.$el.style.getPropertyValue("--flex-gap--desktop-value") || this.$el.style.setProperty(
87
- "--flex-gap--desktop-value",
88
- this.getGapCSSVariable(e)
89
- );
90
- break;
91
88
  case "gap--mobile":
92
89
  case "gap--tablet":
93
90
  case "gap--laptop":
94
91
  case "gap--desktop":
95
- this.$el.style.setProperty(
96
- `--flex-${t}-value`,
97
- this.getGapCSSVariable(e)
98
- );
99
- break;
100
- case "direction":
101
- this.$el.style.getPropertyValue("--flex-direction--mobile-value") || this.$el.style.setProperty(
102
- "--flex-direction--mobile-value",
103
- e
104
- ), this.$el.style.getPropertyValue("--flex-direction--tablet-value") || this.$el.style.setProperty(
105
- "--flex-direction--tablet-value",
106
- e
107
- ), this.$el.style.getPropertyValue("--flex-direction--laptop-value") || this.$el.style.setProperty(
108
- "--flex-direction--laptop-value",
109
- e
110
- ), this.$el.style.getPropertyValue("--flex-direction--desktop-value") || this.$el.style.setProperty(
111
- "--flex-direction--desktop-value",
112
- e
113
- );
92
+ this.updateFlexProperties(t, i, e, h);
114
93
  break;
115
94
  case "justify-content":
116
- this.$el.style.getPropertyValue(
117
- "--flex-justify-content--mobile-value"
118
- ) || this.$el.style.setProperty(
119
- "--flex-justify-content--mobile-value",
120
- e
121
- ), this.$el.style.getPropertyValue(
122
- "--flex-justify-content--tablet-value"
123
- ) || this.$el.style.setProperty(
124
- "--flex-justify-content--tablet-value",
125
- e
126
- ), this.$el.style.getPropertyValue(
127
- "--flex-justify-content--laptop-value"
128
- ) || this.$el.style.setProperty(
129
- "--flex-justify-content--laptop-value",
130
- e
131
- ), this.$el.style.getPropertyValue(
132
- "--flex-justify-content--desktop-value"
133
- ) || this.$el.style.setProperty(
134
- "--flex-justify-content--desktop-value",
135
- e
95
+ case "justify-content--mobile":
96
+ case "justify-content--tablet":
97
+ case "justify-content--laptop":
98
+ case "justify-content--desktop":
99
+ this.updateFlexProperties(
100
+ t,
101
+ i,
102
+ e,
103
+ f
136
104
  );
137
105
  break;
138
106
  case "align-items":
139
- this.$el.style.getPropertyValue("--flex-align-items--mobile-value") || this.$el.style.setProperty(
140
- "--flex-align-items--mobile-value",
141
- e
142
- ), this.$el.style.getPropertyValue("--flex-align-items--tablet-value") || this.$el.style.setProperty(
143
- "--flex-align-items--tablet-value",
144
- e
145
- ), this.$el.style.getPropertyValue("--flex-align-items--laptop-value") || this.$el.style.setProperty(
146
- "--flex-align-items--laptop-value",
147
- e
148
- ), this.$el.style.getPropertyValue("--flex-align-items--desktop-value") || this.$el.style.setProperty(
149
- "--flex-align-items--desktop-value",
150
- e
151
- );
107
+ case "align-items--mobile":
108
+ case "align-items--tablet":
109
+ case "align-items--laptop":
110
+ case "align-items--desktop":
111
+ this.updateFlexProperties(t, i, e, m);
152
112
  break;
153
113
  case "wrap":
154
- this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
114
+ case "wrap--mobile":
115
+ case "wrap--tablet":
116
+ case "wrap--laptop":
117
+ case "wrap--desktop":
118
+ this.updateFlexProperties(t, i, e, k);
155
119
  break;
120
+ case "direction":
156
121
  case "direction--mobile":
157
122
  case "direction--tablet":
158
123
  case "direction--laptop":
159
124
  case "direction--desktop":
160
- case "justify-content--mobile":
161
- case "justify-content--tablet":
162
- case "justify-content--laptop":
163
- case "justify-content--desktop":
164
- case "align-items--mobile":
165
- case "align-items--tablet":
166
- case "align-items--laptop":
167
- case "align-items--desktop":
168
- case "wrap-mobile":
169
- case "wrap-tablet":
170
- case "wrap-laptop":
171
- case "wrap-desktop":
172
- this.$el.style.setProperty(`--flex-${t}-value`, e);
125
+ this.updateFlexProperties(t, i, e, x);
173
126
  break;
174
127
  default:
175
128
  super.attributeChangedCallback(t, i, e);
176
129
  break;
177
130
  }
178
131
  }
179
- getGapCSSVariable(t) {
180
- return c.includes(t) ? `var(--px-spacing-${t})` : t;
132
+ updateFlexProperties(t, i, e, s) {
133
+ this.checkName(s, e) || console.error(`Bad ${t} value for`, this.$el);
134
+ const c = t.indexOf("--") > -1, a = c ? t.split("--")[0] : t, r = [];
135
+ if (!c)
136
+ this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((o) => {
137
+ this.updateStyle(a, o, i, s), this.updateStyle(a, o, e, s);
138
+ });
139
+ else {
140
+ const o = t.split("--")[1];
141
+ this.updateStyle(a, o, i, s), this.updateStyle(a, o, e, s);
142
+ }
143
+ }
144
+ updateStyle(t, i, e, s) {
145
+ e !== null && e !== "" && e !== "default" && (t === "gap" && s.includes(e) ? this.$el.style.setProperty(
146
+ `--flex-${t}--${i}-value`,
147
+ `var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
148
+ ) : this.$el.style.setProperty(
149
+ `--flex-${t}--${i}-value`,
150
+ e
151
+ ));
152
+ }
153
+ checkName(t, i) {
154
+ return t.includes(i);
181
155
  }
182
156
  get direction() {
183
157
  return this.getAttribute("direction");
@@ -300,35 +274,35 @@ class o extends r {
300
274
  this.setAttribute("wrap", t);
301
275
  }
302
276
  get wrapMobile() {
303
- return this.getAttribute("wrap-mobile");
277
+ return this.getAttribute("wrap--mobile");
304
278
  }
305
279
  set wrapMobile(t) {
306
- this.setAttribute("wrap-mobile", t);
280
+ this.setAttribute("wrap--mobile", t);
307
281
  }
308
282
  get wrapTablet() {
309
- return this.getAttribute("wrap-tablet");
283
+ return this.getAttribute("wrap--tablet");
310
284
  }
311
285
  set wrapTablet(t) {
312
- this.setAttribute("wrap-tablet", t);
286
+ this.setAttribute("wrap--tablet", t);
313
287
  }
314
288
  get wrapLaptop() {
315
- return this.getAttribute("wrap-laptop");
289
+ return this.getAttribute("wrap--laptop");
316
290
  }
317
291
  set wrapLaptop(t) {
318
- this.setAttribute("wrap-laptop", t);
292
+ this.setAttribute("wrap--laptop", t);
319
293
  }
320
294
  get wrapDesktop() {
321
- return this.getAttribute("wrap-desktop");
295
+ return this.getAttribute("wrap--desktop");
322
296
  }
323
297
  set wrapDesktop(t) {
324
- this.setAttribute("wrap-desktop", t);
298
+ this.setAttribute("wrap--desktop", t);
325
299
  }
326
300
  get $el() {
327
301
  return this.shadowRoot.querySelector(".flex-container");
328
302
  }
329
303
  }
330
- customElements.get("px-stack") || customElements.define("px-stack", o);
331
- class d extends o {
304
+ customElements.get("px-stack") || customElements.define("px-stack", p);
305
+ class y extends p {
332
306
  constructor() {
333
307
  super();
334
308
  }
@@ -336,8 +310,8 @@ class d extends o {
336
310
  super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
337
311
  }
338
312
  }
339
- customElements.get("px-vstack") || customElements.define("px-vstack", d);
340
- class g extends o {
313
+ customElements.get("px-vstack") || customElements.define("px-vstack", y);
314
+ class A extends p {
341
315
  constructor() {
342
316
  super();
343
317
  }
@@ -345,8 +319,8 @@ class g extends o {
345
319
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
346
320
  }
347
321
  }
348
- customElements.get("px-hstack") || customElements.define("px-hstack", g);
349
- class b extends HTMLElement {
322
+ customElements.get("px-hstack") || customElements.define("px-hstack", A);
323
+ class v extends HTMLElement {
350
324
  constructor() {
351
325
  super();
352
326
  }
@@ -366,12 +340,12 @@ class b extends HTMLElement {
366
340
  this.setAttribute("grow", t);
367
341
  }
368
342
  }
369
- customElements.define("px-spacer", b);
370
- const u = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", n = new CSSStyleSheet();
371
- n.replaceSync(u);
372
- class h extends r {
343
+ customElements.define("px-spacer", v);
344
+ const w = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", g = new CSSStyleSheet();
345
+ g.replaceSync(w);
346
+ class C extends l {
373
347
  constructor() {
374
- super(n), this.template = (t) => `
348
+ super(g), this.template = (t) => `
375
349
  <px-container border-radius="none" padding="none">
376
350
  <px-vstack>
377
351
  <px-container id="header-container" border-radius="none">
@@ -457,7 +431,7 @@ class h extends r {
457
431
  </px-container>
458
432
  <px-container
459
433
  id="footer-container"
460
- background-color="container-none"
434
+ background-color="none"
461
435
  border-radius="none"
462
436
  style="background-color: rgb(108, 66, 156)"
463
437
  padding-top="xl"
@@ -548,7 +522,7 @@ class h extends r {
548
522
  case "background-color":
549
523
  this.$bodyContainer.setAttribute(
550
524
  "background-color",
551
- l.indexOf(e) > 0 ? e : "none"
525
+ b.indexOf(e) > 0 ? e : "none"
552
526
  );
553
527
  break;
554
528
  case "padding-vertical":
@@ -568,12 +542,16 @@ class h extends r {
568
542
  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;
569
543
  }
570
544
  }
571
- customElements.get("px-page") === void 0 && customElements.define("px-page", h);
545
+ customElements.get("px-page") === void 0 && customElements.define("px-page", C);
572
546
  export {
573
- g as HStack,
574
- h as Page,
575
- b as Spacer,
576
- o as Stack,
577
- d as VStack,
578
- c as gapValues
547
+ A as HStack,
548
+ C as Page,
549
+ v as Spacer,
550
+ p as Stack,
551
+ y as VStack,
552
+ m as alignItemsValues,
553
+ x as directionValues,
554
+ h as gapValues,
555
+ f as justifyContentValues,
556
+ k as wrapValues
579
557
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-layout",
3
- "version": "1.1.0-alpha.6",
3
+ "version": "1.1.0-alpha.8",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -24,7 +24,7 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282",
27
+ "gitHead": "74b23a0ad9d5ab4f454d38eaa0c043d2f0c2128e",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {