@proximus/lavender-layout 1.1.0-alpha.3 → 1.1.0-alpha.5

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 +71 -105
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { WithFlexAttributes as o, bgColorValues as p } from "@proximus/lavender-common";
2
- const c = ".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(c);
4
- const g = [
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);
4
+ const c = [
5
5
  // Vertical
6
6
  "between-section-vertical",
7
7
  "between-options-vertical",
@@ -30,7 +30,7 @@ const g = [
30
30
  "component-compact-horizontal-mobile",
31
31
  "component-default-horizontal-mobile"
32
32
  ];
33
- class r extends o {
33
+ class o extends r {
34
34
  constructor() {
35
35
  super(s), this.template = `<div class="flex-container">
36
36
  <slot></slot>
@@ -53,15 +53,15 @@ class r extends o {
53
53
  "gap-laptop",
54
54
  "gap-desktop",
55
55
  "justify-content",
56
- "justify-content-mobile",
57
- "justify-content-tablet",
58
- "justify-content-laptop",
59
- "justify-content-desktop",
56
+ "justify-content--mobile",
57
+ "justify-content--tablet",
58
+ "justify-content--laptop",
59
+ "justify-content--desktop",
60
60
  "align-items",
61
- "align-items-mobile",
62
- "align-items-tablet",
63
- "align-items-laptop",
64
- "align-items-desktop",
61
+ "align-items--mobile",
62
+ "align-items--tablet",
63
+ "align-items--laptop",
64
+ "align-items--desktop",
65
65
  "wrap",
66
66
  "wrap-mobile",
67
67
  "wrap-tablet",
@@ -105,39 +105,39 @@ class r extends o {
105
105
  break;
106
106
  case "justify-content":
107
107
  this.$el.style.getPropertyValue(
108
- "--flex-justify-content-mobile-value"
108
+ "--flex-justify-content--mobile-value"
109
109
  ) || this.$el.style.setProperty(
110
- "--flex-justify-content-mobile-value",
110
+ "--flex-justify-content--mobile-value",
111
111
  e
112
112
  ), this.$el.style.getPropertyValue(
113
- "--flex-justify-content-tablet-value"
113
+ "--flex-justify-content--tablet-value"
114
114
  ) || this.$el.style.setProperty(
115
- "--flex-justify-content-tablet-value",
115
+ "--flex-justify-content--tablet-value",
116
116
  e
117
117
  ), this.$el.style.getPropertyValue(
118
- "--flex-justify-content-laptop-value"
118
+ "--flex-justify-content--laptop-value"
119
119
  ) || this.$el.style.setProperty(
120
- "--flex-justify-content-laptop-value",
120
+ "--flex-justify-content--laptop-value",
121
121
  e
122
122
  ), this.$el.style.getPropertyValue(
123
- "--flex-justify-content-desktop-value"
123
+ "--flex-justify-content--desktop-value"
124
124
  ) || this.$el.style.setProperty(
125
- "--flex-justify-content-desktop-value",
125
+ "--flex-justify-content--desktop-value",
126
126
  e
127
127
  );
128
128
  break;
129
129
  case "align-items":
130
- this.$el.style.getPropertyValue("--flex-align-items-mobile-value") || this.$el.style.setProperty(
131
- "--flex-align-items-mobile-value",
130
+ this.$el.style.getPropertyValue("--flex-align-items--mobile-value") || this.$el.style.setProperty(
131
+ "--flex-align-items--mobile-value",
132
132
  e
133
- ), this.$el.style.getPropertyValue("--flex-align-items-tablet-value") || this.$el.style.setProperty(
134
- "--flex-align-items-tablet-value",
133
+ ), this.$el.style.getPropertyValue("--flex-align-items--tablet-value") || this.$el.style.setProperty(
134
+ "--flex-align-items--tablet-value",
135
135
  e
136
- ), this.$el.style.getPropertyValue("--flex-align-items-laptop-value") || this.$el.style.setProperty(
137
- "--flex-align-items-laptop-value",
136
+ ), this.$el.style.getPropertyValue("--flex-align-items--laptop-value") || this.$el.style.setProperty(
137
+ "--flex-align-items--laptop-value",
138
138
  e
139
- ), this.$el.style.getPropertyValue("--flex-align-items-desktop-value") || this.$el.style.setProperty(
140
- "--flex-align-items-desktop-value",
139
+ ), this.$el.style.getPropertyValue("--flex-align-items--desktop-value") || this.$el.style.setProperty(
140
+ "--flex-align-items--desktop-value",
141
141
  e
142
142
  );
143
143
  break;
@@ -148,14 +148,14 @@ class r extends o {
148
148
  case "direction-tablet":
149
149
  case "direction-laptop":
150
150
  case "direction-desktop":
151
- case "justify-content-mobile":
152
- case "justify-content-tablet":
153
- case "justify-content-laptop":
154
- case "justify-content-desktop":
155
- case "align-items-mobile":
156
- case "align-items-tablet":
157
- case "align-items-laptop":
158
- case "align-items-desktop":
151
+ case "justify-content--mobile":
152
+ case "justify-content--tablet":
153
+ case "justify-content--laptop":
154
+ case "justify-content--desktop":
155
+ case "align-items--mobile":
156
+ case "align-items--tablet":
157
+ case "align-items--laptop":
158
+ case "align-items--desktop":
159
159
  case "wrap-mobile":
160
160
  case "wrap-tablet":
161
161
  case "wrap-laptop":
@@ -168,7 +168,7 @@ class r extends o {
168
168
  }
169
169
  }
170
170
  getGapCSSVariable(t) {
171
- return g.includes(t) ? `var(--px-spacing-${t})` : t;
171
+ return c.includes(t) ? `var(--px-spacing-${t})` : t;
172
172
  }
173
173
  get direction() {
174
174
  return this.getAttribute("direction");
@@ -231,28 +231,28 @@ class r extends o {
231
231
  this.setAttribute("justify-content", t);
232
232
  }
233
233
  get justifyContentMobile() {
234
- return this.getAttribute("justify-content-mobile");
234
+ return this.getAttribute("justify-content--mobile");
235
235
  }
236
236
  set justifyContentMobile(t) {
237
- this.setAttribute("justify-content-mobile", t);
237
+ this.setAttribute("justify-content--mobile", t);
238
238
  }
239
239
  get justifyContentTablet() {
240
- return this.getAttribute("justify-content-tablet");
240
+ return this.getAttribute("justify-content--tablet");
241
241
  }
242
242
  set justifyContentTablet(t) {
243
- this.setAttribute("justify-content-tablet", t);
243
+ this.setAttribute("justify-content--tablet", t);
244
244
  }
245
245
  get justifyContentLaptop() {
246
- return this.getAttribute("justify-content-laptop");
246
+ return this.getAttribute("justify-content--laptop");
247
247
  }
248
248
  set justifyContentLaptop(t) {
249
- this.setAttribute("justify-content-laptop", t);
249
+ this.setAttribute("justify-content--laptop", t);
250
250
  }
251
251
  get justifyContentDesktop() {
252
- return this.getAttribute("justify-content-desktop");
252
+ return this.getAttribute("justify-content--desktop");
253
253
  }
254
254
  set justifyContentDesktop(t) {
255
- this.setAttribute("justify-content-desktop", t);
255
+ this.setAttribute("justify-content--desktop", t);
256
256
  }
257
257
  get alignItems() {
258
258
  return this.getAttribute("align-items");
@@ -261,28 +261,28 @@ class r extends o {
261
261
  this.setAttribute("align-items", t);
262
262
  }
263
263
  get alignItemsMobile() {
264
- return this.getAttribute("align-items-mobile");
264
+ return this.getAttribute("align-items--mobile");
265
265
  }
266
266
  set alignItemsMobile(t) {
267
- this.setAttribute("align-items-mobile", t);
267
+ this.setAttribute("align-items--mobile", t);
268
268
  }
269
269
  get alignItemsTablet() {
270
- return this.getAttribute("align-items-tablet");
270
+ return this.getAttribute("align-items--tablet");
271
271
  }
272
272
  set alignItemsTablet(t) {
273
- this.setAttribute("align-items-tablet", t);
273
+ this.setAttribute("align-items--tablet", t);
274
274
  }
275
275
  get alignItemsLaptop() {
276
- return this.getAttribute("align-items-laptop");
276
+ return this.getAttribute("align-items--laptop");
277
277
  }
278
278
  set alignItemsLaptop(t) {
279
- this.setAttribute("align-items-laptop", t);
279
+ this.setAttribute("align-items--laptop", t);
280
280
  }
281
281
  get alignItemsDesktop() {
282
- return this.getAttribute("align-items-desktop");
282
+ return this.getAttribute("align-items--desktop");
283
283
  }
284
284
  set alignItemsDesktop(t) {
285
- this.setAttribute("align-items-desktop", t);
285
+ this.setAttribute("align-items--desktop", t);
286
286
  }
287
287
  get wrap() {
288
288
  return this.getAttribute("wrap");
@@ -318,8 +318,8 @@ class r extends o {
318
318
  return this.shadowRoot.querySelector(".flex-container");
319
319
  }
320
320
  }
321
- customElements.get("px-stack") || customElements.define("px-stack", r);
322
- class d extends r {
321
+ customElements.get("px-stack") || customElements.define("px-stack", o);
322
+ class d extends o {
323
323
  constructor() {
324
324
  super();
325
325
  }
@@ -328,7 +328,7 @@ class d extends r {
328
328
  }
329
329
  }
330
330
  customElements.get("px-vstack") || customElements.define("px-vstack", d);
331
- class b extends r {
331
+ class g extends o {
332
332
  constructor() {
333
333
  super();
334
334
  }
@@ -336,8 +336,8 @@ class b extends r {
336
336
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
337
337
  }
338
338
  }
339
- customElements.get("px-hstack") || customElements.define("px-hstack", b);
340
- class u extends HTMLElement {
339
+ customElements.get("px-hstack") || customElements.define("px-hstack", g);
340
+ class b extends HTMLElement {
341
341
  constructor() {
342
342
  super();
343
343
  }
@@ -357,45 +357,12 @@ class u extends HTMLElement {
357
357
  this.setAttribute("grow", t);
358
358
  }
359
359
  }
360
- customElements.define("px-spacer", u);
361
- const h = "slot[name=heading]{display:block;margin-top:1rem;margin-bottom:1rem}", n = new CSSStyleSheet();
362
- n.replaceSync(h);
363
- class m extends o {
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);
363
+ class h extends r {
364
364
  constructor() {
365
- super(n), this.template = `
366
- <section>
367
- <slot name="heading"></slot>
368
- <px-stack direction="column" gap="1rem">
369
- <slot></slot>
370
- </px-stack>
371
- </section>`, this.shadowRoot.innerHTML = this.template;
372
- }
373
- static get observedAttributes() {
374
- return [...super.observedAttributes, "gap"];
375
- }
376
- attributeChangedCallback(t, i, e) {
377
- if (t === "gap" && i !== e) {
378
- this.$el.gap = e;
379
- return;
380
- }
381
- super.attributeChangedCallback(t, i, e);
382
- }
383
- get gap() {
384
- return this.getAttribute("gap");
385
- }
386
- set gap(t) {
387
- this.setAttribute("gap", t);
388
- }
389
- get $el() {
390
- return this.shadowRoot.querySelector('px-stack[direction="column"]');
391
- }
392
- }
393
- customElements.define("px-section-damien", m);
394
- const x = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", l = new CSSStyleSheet();
395
- l.replaceSync(x);
396
- class f extends o {
397
- constructor() {
398
- super(l), this.template = (t) => `
365
+ super(n), this.template = (t) => `
399
366
  <px-container border-radius="none" padding="none">
400
367
  <px-vstack>
401
368
  <px-container id="header-container" border-radius="none">
@@ -572,7 +539,7 @@ class f extends o {
572
539
  case "background-color":
573
540
  this.$bodyContainer.setAttribute(
574
541
  "background-color",
575
- p.indexOf(e) > 0 ? e : "none"
542
+ l.indexOf(e) > 0 ? e : "none"
576
543
  );
577
544
  break;
578
545
  case "padding-vertical":
@@ -592,13 +559,12 @@ class f extends o {
592
559
  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;
593
560
  }
594
561
  }
595
- customElements.get("px-page") === void 0 && customElements.define("px-page", f);
562
+ customElements.get("px-page") === void 0 && customElements.define("px-page", h);
596
563
  export {
597
- b as HStack,
598
- f as Page,
599
- m as Section,
600
- u as Spacer,
601
- r as Stack,
564
+ g as HStack,
565
+ h as Page,
566
+ b as Spacer,
567
+ o as Stack,
602
568
  d as VStack,
603
- g as gapValues
569
+ c as gapValues
604
570
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-layout",
3
- "version": "1.1.0-alpha.3",
3
+ "version": "1.1.0-alpha.5",
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": "0820404474bf245bd128ec808c3ba120cd94da21",
27
+ "gitHead": "63b0c21c667217ecab10f627d4aa2aa4edc20914",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {