@proximus/lavender-layout 2.0.0-alpha.2 → 2.0.0-alpha.20

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 (3) hide show
  1. package/dist/Spacer.d.ts +4 -0
  2. package/dist/index.es.js +58 -55
  3. package/package.json +1 -1
package/dist/Spacer.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  export declare class Spacer extends HTMLElement {
2
2
  private resizeObserver?;
3
+ private intersectionObserver?;
3
4
  private recheckHandle?;
4
5
  private isZeroSized;
5
6
  private growValue;
7
+ private isVertical;
6
8
  constructor();
7
9
  static get observedAttributes(): string[];
8
10
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
@@ -14,4 +16,6 @@ export declare class Spacer extends HTMLElement {
14
16
  private recalculateVisibility;
15
17
  private handleSizeChange;
16
18
  private updateParticipation;
19
+ get nogap(): boolean;
20
+ set nogap(value: boolean);
17
21
  }
package/dist/index.es.js CHANGED
@@ -1,14 +1,14 @@
1
- import { WithExtraAttributes as p, AttributeBreakpointHandlerDelegate as h, gapValues as u, checkName as b, backgroundColorValues as f } from "@proximus/lavender-common";
2
- const x = ':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 only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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([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 only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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([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 only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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([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))}}', d = new CSSStyleSheet();
3
- d.replaceSync(x);
4
- const m = [
1
+ import { WithExtraAttributes as d, AttributeBreakpointHandlerDelegate as u, gapValues as b, checkName as f, log as p, backgroundColorValues as x } from "@proximus/lavender-common";
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 only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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([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 only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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([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 only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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([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))}}', g = new CSSStyleSheet();
3
+ g.replaceSync(m);
4
+ const v = [
5
5
  "",
6
6
  "default",
7
7
  "row",
8
8
  "row-reverse",
9
9
  "column",
10
10
  "column-reverse"
11
- ], v = [
11
+ ], k = [
12
12
  "",
13
13
  "default",
14
14
  "stretch",
@@ -16,7 +16,7 @@ const m = [
16
16
  "flex-end",
17
17
  "center",
18
18
  "baseline"
19
- ], k = [
19
+ ], w = [
20
20
  "",
21
21
  "default",
22
22
  "flex-start",
@@ -25,10 +25,10 @@ const m = [
25
25
  "space-between",
26
26
  "space-around",
27
27
  "space-evenly"
28
- ], w = ["", "default", "nowrap", "wrap", "wrap-reverse"], y = ["", "visible", "hidden", "scroll", "auto"];
29
- class l extends p {
28
+ ], y = ["", "default", "nowrap", "wrap", "wrap-reverse"], A = ["", "visible", "hidden", "scroll", "auto"];
29
+ class l extends d {
30
30
  constructor() {
31
- super(d), this.overflowXAttributeDelegate = new h(
31
+ super(g), this.overflowXAttributeDelegate = new u(
32
32
  this,
33
33
  "overflow-x",
34
34
  (t) => t,
@@ -82,7 +82,7 @@ class l extends p {
82
82
  case "gap--tablet":
83
83
  case "gap--laptop":
84
84
  case "gap--desktop":
85
- this.updateFlexProperties(t, i, e, u);
85
+ this.updateFlexProperties(t, i, e, b);
86
86
  break;
87
87
  case "justify-content":
88
88
  case "justify-content--mobile":
@@ -93,7 +93,7 @@ class l extends p {
93
93
  t,
94
94
  i,
95
95
  e,
96
- k
96
+ w
97
97
  );
98
98
  break;
99
99
  case "align-items":
@@ -101,28 +101,28 @@ class l extends p {
101
101
  case "align-items--tablet":
102
102
  case "align-items--laptop":
103
103
  case "align-items--desktop":
104
- this.updateFlexProperties(t, i, e, v);
104
+ this.updateFlexProperties(t, i, e, k);
105
105
  break;
106
106
  case "wrap":
107
107
  case "wrap--mobile":
108
108
  case "wrap--tablet":
109
109
  case "wrap--laptop":
110
110
  case "wrap--desktop":
111
- this.updateFlexProperties(t, i, e, w);
111
+ this.updateFlexProperties(t, i, e, y);
112
112
  break;
113
113
  case "direction":
114
114
  case "direction--mobile":
115
115
  case "direction--tablet":
116
116
  case "direction--laptop":
117
117
  case "direction--desktop":
118
- this.updateFlexProperties(t, i, e, m);
118
+ this.updateFlexProperties(t, i, e, v);
119
119
  break;
120
120
  case "overflow-x":
121
121
  case "overflow-x--mobile":
122
122
  case "overflow-x--tablet":
123
123
  case "overflow-x--laptop":
124
124
  case "overflow-x--desktop":
125
- this.updateOverflowX(t, i, e, y);
125
+ this.updateOverflowX(t, i, e, A);
126
126
  break;
127
127
  default:
128
128
  super.attributeChangedCallback(t, i, e);
@@ -130,8 +130,10 @@ class l extends p {
130
130
  }
131
131
  }
132
132
  updateOverflowX(t, i, e, o) {
133
- if (!b(o, e)) {
134
- console.error(`${e} is not an allowed ${t} value`);
133
+ if (!f(o, e)) {
134
+ p(
135
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
136
+ );
135
137
  return;
136
138
  }
137
139
  this.overflowXAttributeDelegate.attributeChangedCallback(
@@ -141,7 +143,9 @@ class l extends p {
141
143
  );
142
144
  }
143
145
  updateFlexProperties(t, i, e, o) {
144
- this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
146
+ this.checkName(o, e) || p(
147
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
148
+ );
145
149
  const c = t.indexOf("--") > -1, a = c ? t.split("--")[0] : t, s = [];
146
150
  if (!c)
147
151
  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) => {
@@ -346,7 +350,7 @@ class l extends p {
346
350
  }
347
351
  }
348
352
  customElements.get("px-stack") || customElements.define("px-stack", l);
349
- class A extends l {
353
+ class C extends l {
350
354
  constructor() {
351
355
  super();
352
356
  }
@@ -354,8 +358,8 @@ class A extends l {
354
358
  super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
355
359
  }
356
360
  }
357
- customElements.get("px-vstack") || customElements.define("px-vstack", A);
358
- class C extends l {
361
+ customElements.get("px-vstack") || customElements.define("px-vstack", C);
362
+ class $ extends l {
359
363
  constructor() {
360
364
  super();
361
365
  }
@@ -363,25 +367,21 @@ class C extends l {
363
367
  super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
364
368
  }
365
369
  }
366
- customElements.get("px-hstack") || customElements.define("px-hstack", C);
367
- class $ extends HTMLElement {
370
+ customElements.get("px-hstack") || customElements.define("px-hstack", $);
371
+ class S extends HTMLElement {
368
372
  constructor() {
369
- super(), this.isZeroSized = !1, this.growValue = "1";
373
+ super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
370
374
  }
371
375
  static get observedAttributes() {
372
- return ["grow"];
376
+ return ["grow", "nogap"];
373
377
  }
374
378
  attributeChangedCallback(t, i, e) {
375
379
  t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
376
380
  }
377
381
  connectedCallback() {
378
- this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver((t) => {
379
- t.forEach((i) => {
380
- this.handleSizeChange(
381
- i.contentRect.width === 0 || i.contentRect.height === 0
382
- );
383
- });
384
- }), this.resizeObserver.observe(this), this.scheduleRecheck();
382
+ this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
383
+ this.handleSizeChange();
384
+ }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
385
385
  }
386
386
  disconnectedCallback() {
387
387
  var t;
@@ -399,25 +399,28 @@ class $ extends HTMLElement {
399
399
  });
400
400
  }
401
401
  recalculateVisibility() {
402
- if (!this.isConnected)
403
- return;
404
- this.style.display = "", this.style.flexGrow = this.growValue;
405
- const t = this.getBoundingClientRect(), i = t.width === 0 || t.height === 0;
406
- this.handleSizeChange(i);
402
+ this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
407
403
  }
408
- handleSizeChange(t) {
409
- this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
404
+ handleSizeChange() {
405
+ const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
406
+ this.isZeroSized !== i && (this.isZeroSized = i, this.updateParticipation());
410
407
  }
411
408
  updateParticipation() {
412
409
  this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
413
410
  }
411
+ get nogap() {
412
+ return this.hasAttribute("nogap");
413
+ }
414
+ set nogap(t) {
415
+ t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
416
+ }
414
417
  }
415
- customElements.get("px-spacer") || customElements.define("px-spacer", $);
416
- const S = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
417
- g.replaceSync(S);
418
- class j extends p {
418
+ 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.5em}", h = new CSSStyleSheet();
420
+ h.replaceSync(j);
421
+ class z extends d {
419
422
  constructor() {
420
- super(g), this.template = (t) => `
423
+ super(h), this.template = (t) => `
421
424
  <px-container border-radius="none" padding="none">
422
425
  <px-vstack>
423
426
  <px-container id="header-container" border-radius="none">
@@ -594,7 +597,7 @@ class j extends p {
594
597
  case "background-color":
595
598
  this.$bodyContainer.setAttribute(
596
599
  "background-color",
597
- f.indexOf(e) > 0 ? e : "none"
600
+ x.indexOf(e) > 0 ? e : "none"
598
601
  );
599
602
  break;
600
603
  case "padding-vertical":
@@ -614,16 +617,16 @@ class j extends p {
614
617
  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;
615
618
  }
616
619
  }
617
- customElements.get("px-page") === void 0 && customElements.define("px-page", j);
620
+ customElements.get("px-page") === void 0 && customElements.define("px-page", z);
618
621
  export {
619
- C as HStack,
620
- j as Page,
621
- $ as Spacer,
622
+ $ as HStack,
623
+ z as Page,
624
+ S as Spacer,
622
625
  l as Stack,
623
- A as VStack,
624
- v as alignItemsValues,
625
- m as directionValues,
626
- k as justifyContentValues,
627
- y as overflowValues,
628
- w as wrapValues
626
+ C as VStack,
627
+ k as alignItemsValues,
628
+ v as directionValues,
629
+ w as justifyContentValues,
630
+ A as overflowValues,
631
+ y as wrapValues
629
632
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-layout",
3
- "version": "2.0.0-alpha.2",
3
+ "version": "2.0.0-alpha.20",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",