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

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 +41 -67
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,38 +1,25 @@
1
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);
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)}}", o = new CSSStyleSheet();
3
+ o.replaceSync(p);
4
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"
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"
32
19
  ];
33
- class o extends r {
20
+ class s extends r {
34
21
  constructor() {
35
- super(s), this.template = `<div class="flex-container">
22
+ super(o), this.template = `<div class="flex-container">
36
23
  <slot></slot>
37
24
  </div>`, this.shadowRoot.innerHTML = this.template;
38
25
  }
@@ -48,10 +35,6 @@ class o extends r {
48
35
  "direction--laptop",
49
36
  "direction--desktop",
50
37
  "gap",
51
- "gap--mobile",
52
- "gap--tablet",
53
- "gap--laptop",
54
- "gap--desktop",
55
38
  "justify-content",
56
39
  "justify-content--mobile",
57
40
  "justify-content--tablet",
@@ -74,27 +57,18 @@ class o extends r {
74
57
  throw new Error("Invalid direction");
75
58
  switch (t) {
76
59
  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
- case "gap--mobile":
92
- case "gap--tablet":
93
- case "gap--laptop":
94
- case "gap--desktop":
95
60
  this.$el.style.setProperty(
96
- `--flex-${t}-value`,
97
- this.getGapCSSVariable(e)
61
+ "--flex-gap-mobile-value",
62
+ this.getGapCSSVariable(e, "mobile")
63
+ ), this.$el.style.setProperty(
64
+ "--flex-gap-tablet-value",
65
+ this.getGapCSSVariable(e, "tablet")
66
+ ), this.$el.style.setProperty(
67
+ "--flex-gap-laptop-value",
68
+ this.getGapCSSVariable(e, "desktop")
69
+ ), this.$el.style.setProperty(
70
+ "--flex-gap-desktop-value",
71
+ this.getGapCSSVariable(e, "desktop")
98
72
  );
99
73
  break;
100
74
  case "direction":
@@ -176,8 +150,8 @@ class o extends r {
176
150
  break;
177
151
  }
178
152
  }
179
- getGapCSSVariable(t) {
180
- return c.includes(t) ? `var(--px-spacing-${t})` : t;
153
+ getGapCSSVariable(t, i = "mobile") {
154
+ return c.includes(t) ? `var(--px-spacing-${t}-${i})` : t;
181
155
  }
182
156
  get direction() {
183
157
  return this.getAttribute("direction");
@@ -327,8 +301,8 @@ class o extends r {
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", s);
305
+ class d extends s {
332
306
  constructor() {
333
307
  super();
334
308
  }
@@ -337,7 +311,7 @@ class d extends o {
337
311
  }
338
312
  }
339
313
  customElements.get("px-vstack") || customElements.define("px-vstack", d);
340
- class g extends o {
314
+ class g extends s {
341
315
  constructor() {
342
316
  super();
343
317
  }
@@ -346,7 +320,7 @@ class g extends o {
346
320
  }
347
321
  }
348
322
  customElements.get("px-hstack") || customElements.define("px-hstack", g);
349
- class b extends HTMLElement {
323
+ class u extends HTMLElement {
350
324
  constructor() {
351
325
  super();
352
326
  }
@@ -366,9 +340,9 @@ 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);
343
+ customElements.define("px-spacer", u);
344
+ const b = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", n = new CSSStyleSheet();
345
+ n.replaceSync(b);
372
346
  class h extends r {
373
347
  constructor() {
374
348
  super(n), this.template = (t) => `
@@ -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"
@@ -572,8 +546,8 @@ customElements.get("px-page") === void 0 && customElements.define("px-page", h);
572
546
  export {
573
547
  g as HStack,
574
548
  h as Page,
575
- b as Spacer,
576
- o as Stack,
549
+ u as Spacer,
550
+ s as Stack,
577
551
  d as VStack,
578
552
  c as gapValues
579
553
  };
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.7",
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": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {