@proximus/lavender-layout 1.1.0-alpha.5 → 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 +72 -89
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,38 +1,25 @@
1
- import { WithFlexAttributes as r, bgColorValues 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);
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)}}", 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
  }
@@ -43,15 +30,11 @@ class o extends r {
43
30
  return [
44
31
  ...super.observedAttributes,
45
32
  "direction",
46
- "direction-mobile",
47
- "direction-tablet",
48
- "direction-laptop",
49
- "direction-desktop",
33
+ "direction--mobile",
34
+ "direction--tablet",
35
+ "direction--laptop",
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,32 +57,32 @@ 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(
60
+ this.$el.style.setProperty(
78
61
  "--flex-gap-mobile-value",
79
- this.getGapCSSVariable(e)
80
- ), this.$el.style.getPropertyValue("--flex-gap-tablet-value") || this.$el.style.setProperty(
62
+ this.getGapCSSVariable(e, "mobile")
63
+ ), this.$el.style.setProperty(
81
64
  "--flex-gap-tablet-value",
82
- this.getGapCSSVariable(e)
83
- ), this.$el.style.getPropertyValue("--flex-gap-laptop-value") || this.$el.style.setProperty(
65
+ this.getGapCSSVariable(e, "tablet")
66
+ ), this.$el.style.setProperty(
84
67
  "--flex-gap-laptop-value",
85
- this.getGapCSSVariable(e)
86
- ), this.$el.style.getPropertyValue("--flex-gap-desktop-value") || this.$el.style.setProperty(
68
+ this.getGapCSSVariable(e, "desktop")
69
+ ), this.$el.style.setProperty(
87
70
  "--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
- this.$el.style.setProperty(
96
- `--flex-${t}-value`,
97
- this.getGapCSSVariable(e)
71
+ this.getGapCSSVariable(e, "desktop")
98
72
  );
99
73
  break;
100
74
  case "direction":
101
- this.$el.style.getPropertyValue("--flex-direction-mobile-value") || this.$el.style.setProperty("--flex-direction-mobile-value", e), this.$el.style.getPropertyValue("--flex-direction-tablet-value") || this.$el.style.setProperty("--flex-direction-tablet-value", e), this.$el.style.getPropertyValue("--flex-direction-laptop-value") || this.$el.style.setProperty("--flex-direction-laptop-value", e), this.$el.style.getPropertyValue("--flex-direction-desktop-value") || this.$el.style.setProperty(
102
- "--flex-direction-desktop-value",
75
+ this.$el.style.getPropertyValue("--flex-direction--mobile-value") || this.$el.style.setProperty(
76
+ "--flex-direction--mobile-value",
77
+ e
78
+ ), this.$el.style.getPropertyValue("--flex-direction--tablet-value") || this.$el.style.setProperty(
79
+ "--flex-direction--tablet-value",
80
+ e
81
+ ), this.$el.style.getPropertyValue("--flex-direction--laptop-value") || this.$el.style.setProperty(
82
+ "--flex-direction--laptop-value",
83
+ e
84
+ ), this.$el.style.getPropertyValue("--flex-direction--desktop-value") || this.$el.style.setProperty(
85
+ "--flex-direction--desktop-value",
103
86
  e
104
87
  );
105
88
  break;
@@ -144,10 +127,10 @@ class o extends r {
144
127
  case "wrap":
145
128
  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);
146
129
  break;
147
- case "direction-mobile":
148
- case "direction-tablet":
149
- case "direction-laptop":
150
- case "direction-desktop":
130
+ case "direction--mobile":
131
+ case "direction--tablet":
132
+ case "direction--laptop":
133
+ case "direction--desktop":
151
134
  case "justify-content--mobile":
152
135
  case "justify-content--tablet":
153
136
  case "justify-content--laptop":
@@ -167,8 +150,8 @@ class o extends r {
167
150
  break;
168
151
  }
169
152
  }
170
- getGapCSSVariable(t) {
171
- 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;
172
155
  }
173
156
  get direction() {
174
157
  return this.getAttribute("direction");
@@ -177,28 +160,28 @@ class o extends r {
177
160
  this.setAttribute("direction", t);
178
161
  }
179
162
  get directionMobile() {
180
- return this.getAttribute("direction-mobile");
163
+ return this.getAttribute("direction--mobile");
181
164
  }
182
165
  set directionMobile(t) {
183
- this.setAttribute("direction-mobile", t);
166
+ this.setAttribute("direction--mobile", t);
184
167
  }
185
168
  get directionTablet() {
186
- return this.getAttribute("direction-tablet");
169
+ return this.getAttribute("direction--tablet");
187
170
  }
188
171
  set directionTablet(t) {
189
- this.setAttribute("direction-tablet", t);
172
+ this.setAttribute("direction--tablet", t);
190
173
  }
191
174
  get directionLaptop() {
192
- return this.getAttribute("direction-laptop");
175
+ return this.getAttribute("direction--laptop");
193
176
  }
194
177
  set directionLaptop(t) {
195
- this.setAttribute("direction-laptop", t);
178
+ this.setAttribute("direction--laptop", t);
196
179
  }
197
180
  get directionDesktop() {
198
- return this.getAttribute("direction-desktop");
181
+ return this.getAttribute("direction--desktop");
199
182
  }
200
183
  set directionDesktop(t) {
201
- this.setAttribute("direction-desktop", t);
184
+ this.setAttribute("direction--desktop", t);
202
185
  }
203
186
  get gap() {
204
187
  return this.getAttribute("gap");
@@ -207,22 +190,22 @@ class o extends r {
207
190
  this.setAttribute("gap", t);
208
191
  }
209
192
  get gapMobile() {
210
- return this.getAttribute("gap-mobile");
193
+ return this.getAttribute("gap--mobile");
211
194
  }
212
195
  set gapMobile(t) {
213
- this.setAttribute("gap-mobile", t);
196
+ this.setAttribute("gap--mobile", t);
214
197
  }
215
198
  get gapTablet() {
216
- return this.getAttribute("gap-tablet");
199
+ return this.getAttribute("gap--tablet");
217
200
  }
218
201
  set gapTablet(t) {
219
- this.setAttribute("gap-tablet", t);
202
+ this.setAttribute("gap--tablet", t);
220
203
  }
221
204
  get gapLaptop() {
222
- return this.getAttribute("gap-laptop");
205
+ return this.getAttribute("gap--laptop");
223
206
  }
224
207
  set gapLaptop(t) {
225
- this.setAttribute("gap-laptop", t);
208
+ this.setAttribute("gap--laptop", t);
226
209
  }
227
210
  get justifyContent() {
228
211
  return this.getAttribute("justify-content");
@@ -318,8 +301,8 @@ class o extends r {
318
301
  return this.shadowRoot.querySelector(".flex-container");
319
302
  }
320
303
  }
321
- customElements.get("px-stack") || customElements.define("px-stack", o);
322
- class d extends o {
304
+ customElements.get("px-stack") || customElements.define("px-stack", s);
305
+ class d extends s {
323
306
  constructor() {
324
307
  super();
325
308
  }
@@ -328,7 +311,7 @@ class d extends o {
328
311
  }
329
312
  }
330
313
  customElements.get("px-vstack") || customElements.define("px-vstack", d);
331
- class g extends o {
314
+ class g extends s {
332
315
  constructor() {
333
316
  super();
334
317
  }
@@ -337,7 +320,7 @@ class g extends o {
337
320
  }
338
321
  }
339
322
  customElements.get("px-hstack") || customElements.define("px-hstack", g);
340
- class b extends HTMLElement {
323
+ class u extends HTMLElement {
341
324
  constructor() {
342
325
  super();
343
326
  }
@@ -357,9 +340,9 @@ class b extends HTMLElement {
357
340
  this.setAttribute("grow", t);
358
341
  }
359
342
  }
360
- customElements.define("px-spacer", b);
361
- 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();
362
- 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);
363
346
  class h extends r {
364
347
  constructor() {
365
348
  super(n), this.template = (t) => `
@@ -448,7 +431,7 @@ class h extends r {
448
431
  </px-container>
449
432
  <px-container
450
433
  id="footer-container"
451
- background-color="container-none"
434
+ background-color="none"
452
435
  border-radius="none"
453
436
  style="background-color: rgb(108, 66, 156)"
454
437
  padding-top="xl"
@@ -563,8 +546,8 @@ customElements.get("px-page") === void 0 && customElements.define("px-page", h);
563
546
  export {
564
547
  g as HStack,
565
548
  h as Page,
566
- b as Spacer,
567
- o as Stack,
549
+ u as Spacer,
550
+ s as Stack,
568
551
  d as VStack,
569
552
  c as gapValues
570
553
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-layout",
3
- "version": "1.1.0-alpha.5",
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": "63b0c21c667217ecab10f627d4aa2aa4edc20914",
27
+ "gitHead": "671fab7ee21d1c0ec6498b45b0bb2fd47e6e6c84",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {