@proximus/lavender-layout 1.4.19-beta.1 → 1.4.20-alpha.2

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { AttributeBreakpointHandlerDelegate as e, WithExtraAttributes as t, backgroundColorValues as n, checkName as r, gapValues as i, log as a, propertyToAttributeSetter as o, renderTemplate as s } from "@proximus/lavender-common";
-// src/Stack.css?inline
+//#region src/Stack.css?inline
 var c = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", l = new CSSStyleSheet();
 l.replaceSync(c);
 var u = document.createElement("template");
@@ -132,7 +132,11 @@ var d = [
 		}
 	}
 	updateOverflowX(e, t, n, i) {
-		r(i, n) ? this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n) : a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+		if (!r(i, n)) {
+			a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+			return;
+		}
+		this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
 	}
 	updateFlexProperties(e, t, r, i) {
 		r !== null && !this.checkName(i, r) && a(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
@@ -145,8 +149,11 @@ var d = [
 	}
 	updateStyle(e, t, n, r) {
 		let i = `--flex-${e}--${t}-value`, a = e === "gap";
-		if (!n) this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
-		else if (a && r && r.includes(n)) {
+		if (!n) {
+			this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
+			return;
+		}
+		if (a && r && r.includes(n)) {
 			let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
 			this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
 		} else this.$el.style.setProperty(i, n);
@@ -368,7 +375,8 @@ var y = class extends g {
 	}
 };
 customElements.get("px-hstack") || customElements.define("px-hstack", y);
-// src/Spacer.ts
+//#endregion
+//#region src/Spacer.ts
 var b = class extends HTMLElement {
 	constructor() {
 		super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
@@ -416,7 +424,8 @@ var b = class extends HTMLElement {
 	}
 };
 customElements.get("px-spacer") || customElements.define("px-spacer", b);
-// src/Page.css?inline
+//#endregion
+//#region src/Page.css?inline
 var x = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", S = new CSSStyleSheet();
 S.replaceSync(x);
 var C = class extends t {
@@ -602,4 +611,5 @@ var C = class extends t {
 	}
 };
 customElements.get("px-page") === void 0 && customElements.define("px-page", C);
+//#endregion
 export { y as HStack, C as Page, b as Spacer, g as Stack, v as VStack, f as alignItemsValues, d as directionValues, p as justifyContentValues, h as overflowValues, m as wrapValues };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-layout",
-  "version": "1.4.19-beta.1",
+  "version": "1.4.20-alpha.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",