@arsedizioni/ars-utils 22.0.18 → 22.0.21

package/fesm2022/arsedizioni-ars-utils-ui.mjs

@@ -1373,21 +1373,20 @@ class IfBpDirective {
             return this._aliases().some(alias => this.media.isActive(alias));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
-        /** Tracks whether the main view is currently embedded — plain field, not a signal. */
-        this._hasView = false;
         effect(() => {
             const active = this._isActive();
             const elseTpl = this.ifBpElse();
-            if (active === this._hasView)
-                return; // dirty-check
+            const next = active ? 'main' : elseTpl ? 'else' : 'none';
+            if (next === this._rendered)
+                return; // dirty-check (initial undefined never matches)
             this.vcr.clear();
-            if (active) {
+            if (next === 'main') {
                 this.vcr.createEmbeddedView(this.tpl);
             }
-            else if (elseTpl) {
+            else if (next === 'else') {
                 this.vcr.createEmbeddedView(elseTpl);
             }
-            this._hasView = active;
+            this._rendered = next;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IfBpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1530,6 +1529,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Directive
         }] });
 
+/**
+ * @file fx-layout.directive.ts  (Angular 22 — signals)
+ *
+ * [fxLayout]     — sets display + flex-direction (+ optional flex-wrap) on the host.
+ * [fxLayoutWrap] — dedicated alias for flex-wrap (original ngx-layout compat).
+ *
+ * ngx-layout parity (ported from @ngbracket layout-validator.ts):
+ *   • Value format: "<direction> [wrap] [inline]" in any ngx-accepted spelling
+ *   • Wrap aliases: reverse | wrap-reverse | reverse-wrap → wrap-reverse,
+ *                   no | none | nowrap → nowrap, anything else truthy → wrap
+ *   • 'inline' modifier → display: inline-flex
+ *   • No wrap token → flex-wrap REMOVED (ngx emits null), not forced to nowrap
+ *   • box-sizing: border-box on the container
+ *   • display preserved when currently 'none' (so fxHide is never overridden)
+ *
+ * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
+ */
+const LAYOUT_VALUES = ['row', 'column', 'row-reverse', 'column-reverse'];
+const INLINE = 'inline';
+/** Port of ngx-layout validateWrapValue(). */
+function validateWrapValue(value) {
+    if (value) {
+        switch (value.toLowerCase()) {
+            case 'reverse':
+            case 'wrap-reverse':
+            case 'reverse-wrap':
+                return 'wrap-reverse';
+            case 'no':
+            case 'none':
+            case 'nowrap':
+                return 'nowrap';
+            default:
+                return 'wrap';
+        }
+    }
+    return value;
+}
+/** Port of ngx-layout validateValue(): [direction, wrap, inline]. */
+function validateLayoutValue(value) {
+    value = value?.toLowerCase() ?? '';
+    let [direction, wrap, inline] = value.split(' ');
+    if (!LAYOUT_VALUES.find(x => x === direction))
+        direction = LAYOUT_VALUES[0];
+    if (wrap === INLINE) {
+        wrap = inline !== INLINE ? inline : '';
+        inline = INLINE;
+    }
+    return [direction, validateWrapValue(wrap), !!inline];
+}
+/** Port of ngx-layout buildLayoutCSS(): null values mean "remove the property". */
+function buildLayoutCSS(value) {
+    const [direction, wrap, inline] = validateLayoutValue(value);
+    return {
+        'display': inline ? 'inline-flex' : 'flex',
+        'box-sizing': 'border-box',
+        'flex-direction': direction,
+        'flex-wrap': wrap || null,
+    };
+}
+/**
+ * Resolves the flex flow of the parent container for a flex child.
+ * Prefers the reactive FxLayoutDirective instance when it sits on the DIRECT
+ * parent element (signal read → re-evaluates with the parent); falls back to
+ * getComputedStyle for plain-CSS flex parents; SSR-safe defaults.
+ */
+function resolveParentFlow(host, parentLayout, isBrowser) {
+    if (parentLayout && parentLayout.hostElement === host.parentElement) {
+        return {
+            direction: parentLayout.direction(), // signal: reactive
+            hasWrap: parentLayout.wrap() !== '' && parentLayout.wrap() !== 'nowrap',
+        };
+    }
+    if (isBrowser && host.parentElement) {
+        const cs = getComputedStyle(host.parentElement);
+        return {
+            direction: cs.flexDirection || 'row',
+            hasWrap: !!cs.flexWrap && cs.flexWrap !== 'nowrap',
+        };
+    }
+    return { direction: 'row', hasWrap: false };
+}
+class FxLayoutDirective extends ResponsiveBaseDirective {
+    /** Host element, exposed for direct-parent matching by child directives. */
+    get hostElement() { return this.el.nativeElement; }
+    constructor() {
+        super();
+        this.fxLayout = input('row', { ...(ngDevMode ? { debugName: "fxLayout" } : /* istanbul ignore next */ {}), alias: 'fxLayout' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-down' });
+        this._parsed = computed(() => validateLayoutValue(resolveAll({ default: this.fxLayout(), xs: this.xs(), sm: this.sm(), md: this.md(),
+            lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
+            'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
+            'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
+            'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
+            'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
+            'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
+            'sm-down': this.smDown(), 'md-down': this.mdDown(),
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'row'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+        /** Reactive layout parts — readable by FxFlex / FxLayoutAlign / FxFlexOffset. */
+        this.direction = computed(() => this._parsed()[0], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+        this.wrap = computed(() => this._parsed()[1], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+        this.inline = computed(() => this._parsed()[2], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const [dir, wrap, inline] = this._parsed();
+            // ngx-layout parity: never override display:none set by fxHide
+            // (LayoutStyleBuilder: display === 'none' ? display : css.display)
+            if (this.el.nativeElement.style.display !== 'none') {
+                this.safeSetStyle('display', inline ? 'inline-flex' : 'flex');
+            }
+            this.safeSetStyle('box-sizing', 'border-box');
+            this.safeSetStyle('flex-direction', dir);
+            this.safeSetStyle('flex-wrap', wrap || null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutDirective, isStandalone: true, selector: "\n    [fxLayout],\n    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],\n    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],\n    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],\n    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],\n    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]\n  ", inputs: { fxLayout: { classPropertyName: "fxLayout", publicName: "fxLayout", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayout.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayout.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayout.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayout.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayout.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayout.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayout.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayout.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayout.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayout.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayout.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayout.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayout.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayout.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayout.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayout.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayout.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayout.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayout.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayout.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayout.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayout.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayout.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayout.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayout.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayout],
+    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],
+    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],
+    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],
+    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],
+    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-down", required: false }] }] } });
+class FxLayoutWrapDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxLayoutWrap = input('wrap', { ...(ngDevMode ? { debugName: "fxLayoutWrap" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-down' });
+        this._wrap = computed(() => validateWrapValue(resolveAll({ default: this.fxLayoutWrap(), xs: this.xs(), sm: this.sm(), md: this.md(),
+            lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
+            'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
+            'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
+            'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
+            'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
+            'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
+            'sm-down': this.smDown(), 'md-down': this.mdDown(),
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) || 'wrap'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_wrap" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutWrapDirective, isStandalone: true, selector: "\n    [fxLayoutWrap],\n    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],\n    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],\n    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],\n    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],\n    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]\n  ", inputs: { fxLayoutWrap: { classPropertyName: "fxLayoutWrap", publicName: "fxLayoutWrap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutWrap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutWrap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutWrap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutWrap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutWrap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutWrap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutWrap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutWrap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutWrap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutWrap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutWrap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutWrap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutWrap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutWrap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutWrap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutWrap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutWrap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutWrap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutWrap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutWrap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutWrap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutWrap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutWrap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutWrap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutWrap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayoutWrap],
+    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],
+    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],
+    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],
+    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],
+    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayoutWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-down", required: false }] }] } });
+
 /**
  * @file fx-flex-extras.directives.ts  (Angular 21 — signals)
  *
@@ -1598,13 +1814,13 @@ class FxFlexOrderDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOrderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxFlexOrder],
-    [fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],
-    [fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],
-    [fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],
-    [fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],
-    [fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]
+                    selector: `
+    [fxFlexOrder],
+    [fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],
+    [fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],
+    [fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],
+    [fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],
+    [fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]
   `,
                     standalone: true,
                 }]
@@ -1613,6 +1829,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
 class FxFlexOffsetDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
+        /** Ancestor FxLayout (matched to the direct parent inside resolveParentFlow). */
+        this.parentLayout = inject(FxLayoutDirective, { skipSelf: true, optional: true });
         this.fxFlexOffset = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexOffset" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset' });
         this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xs' });
         this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.sm' });
@@ -1652,17 +1870,11 @@ class FxFlexOffsetDirective extends ResponsiveBaseDirective {
         effect(() => {
             const v = this._offset();
             // ngx-layout parity: when the parent flex container is a column, offset
-            // means push down on the cross axis -> margin-top. Otherwise (row or any
-            // non-flex parent, e.g. plain block) push on the inline axis -> margin-inline-start
-            // (RTL-safe). Detection is done via getComputedStyle so it works both with
-            // [fxLayout] and with plain CSS flex containers.
-            if (!this.isBrowser) {
-                this.safeSetStyle('margin-inline-start', v);
-                return;
-            }
-            const parent = this.el.nativeElement.parentElement;
-            const isColumn = !!parent &&
-                /^column/.test(getComputedStyle(parent).flexDirection || '');
+            // pushes down (margin-top); otherwise it pushes on the inline axis
+            // (margin-inline-start, RTL-safe). Direction comes reactively from the
+            // parent FxLayoutDirective when present, else from getComputedStyle.
+            const { direction } = resolveParentFlow(this.el.nativeElement, this.parentLayout, this.isBrowser);
+            const isColumn = direction.indexOf('column') > -1;
             if (isColumn) {
                 this.safeSetStyle('margin-inline-start', null);
                 this.safeSetStyle('margin-top', v);
@@ -1679,13 +1891,13 @@ class FxFlexOffsetDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOffsetDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxFlexOffset],
-    [fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],
-    [fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],
-    [fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],
-    [fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],
-    [fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]
+                    selector: `
+    [fxFlexOffset],
+    [fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],
+    [fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],
+    [fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],
+    [fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],
+    [fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]
   `,
                     standalone: true,
                 }]
@@ -1746,13 +1958,13 @@ class FxFlexAlignDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexAlignDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxFlexAlign],
-    [fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],
-    [fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],
-    [fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],
-    [fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],
-    [fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]
+                    selector: `
+    [fxFlexAlign],
+    [fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],
+    [fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],
+    [fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],
+    [fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],
+    [fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]
   `,
                     standalone: true,
                 }]
@@ -1834,72 +2046,171 @@ class FxFlexFillDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexFillDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxFlexFill],[fxFill],
-    [fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],
-    [fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],
-    [fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],
-    [fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],
-    [fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]
+                    selector: `
+    [fxFlexFill],[fxFill],
+    [fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],
+    [fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],
+    [fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],
+    [fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],
+    [fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]
   `,
                     standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { fxFlexFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill", required: false }] }], fxFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFill", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-down", required: false }] }] } });
 
 /**
- * @file fx-flex.directive.ts  (Angular 21 — signals)
+ * @file fx-flex.directive.ts  (Angular 22 — signals)
  *
- * [fxFlex]  — flex shorthand on a flex child element.
+ * [fxFlex] — flex shorthand on a flex child element.
  *
- * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • computed() builds the BpValues / NcValues maps reactively
- *   • effect() in constructor writes to the DOM — no lifecycle hooks needed
- *   • resolveAll() is the pure function from responsive-base.directive.ts
+ * The CSS builder is a faithful port of @ngbracket/ngx-layout
+ * FlexStyleBuilder.buildStyles + validateBasis, including:
+ *   • direction-aware min/max (max-width vs max-height by parent flow)
+ *   • percentage basis → flex: G S 100% + max-* capped to the percentage
+ *   • fixed units → flex: G S <px> + min/max-* locks
+ *   • empty basis → '0%' in row, '0.000000001px' in column (useColumnBasisZero)
+ *   • calc() support (flex-grow/shrink/basis split, operator padding)
+ *   • wrap-container basis rewrite (ngx issue 660)
  *
- * Accepted values:
- *   (empty)     → flex: 1 1 0%
- *   "auto"      → flex: 1 1 auto
- *   "none"      → flex: none
- *   "grow"      → flex: 1 1 100%
- *   "nogrow"    → flex: 0 1 auto
- *   "noshrink"  → flex: 1 0 auto
- *   "50%"       → flex: 1 1 50%
- *   "50"        → flex: 1 1 50%  (unitless normalized to %)
- *   "200px"     → flex: 1 1 200px
- *   "0 0 200px" → flex: 0 0 200px  (full shorthand passthrough)
+ * Extensions beyond ngx-layout (documented, opt-in by syntax):
+ *   • fxFlex="*"          → behaves like fxFlex="auto" (1 1 auto)
+ *   • fxFlex="" + a SIBLING with fxFlex="*" → this element gets 0 0 auto
+ *     (static-attribute detection only; property bindings are not seen)
  *
- * Breakpoint suffixes:
- *   Canonical : .xs .sm .md .lg .xl .xxl
- *   lt-*      : .lt-sm .lt-md .lt-lg .lt-xl .lt-xxl
- *   gt-*      : .gt-xs .gt-sm .gt-md .gt-lg .gt-xl
- *   *-up      : .sm-up .md-up .lg-up .xl-up .xxl-up
- *   *-down    : .sm-down .md-down .lg-down .xl-down
+ * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
-function toFlexCss(raw) {
-    if (raw === undefined || raw === '' || raw === '*')
-        return '1 1 auto';
-    if (raw === 'none')
-        return 'none';
-    if (raw === 'auto')
-        return '1 1 auto';
-    if (raw === 'grow')
-        return '1 1 100%';
-    if (raw === 'nogrow')
-        return '0 1 auto';
-    if (raw === 'noshrink')
-        return '1 0 auto';
-    const parts = raw.trim().split(/\s+/);
-    if (parts.length === 3)
-        return raw.trim();
-    let basis = parts[0];
-    if (/^\d+(\.\d+)?$/.test(basis))
-        basis = basis + '%';
-    // Fixed units (px, em, rem, vh, vw…) → 0 0 (no grow/shrink); % → 1 1
-    const fixed = /px|em|rem|vh|vw|vmin|vmax|ch|ex|cm|mm|in|pt|pc/.test(basis);
-    return `${fixed ? '0 0' : '1 1'} ${basis}`;
+// ─── Ports of ngx-layout basis-validator.ts ──────────────────────────────────
+/** Pads calc() operators with whitespace (ngx _validateCalcValue). */
+function validateCalcValue(calc) {
+    return calc.replace(/[\s]/g, '').replace(/[\/\*\+\-]/g, ' $& ');
+}
+/** Port of ngx validateBasis(): returns [grow, shrink, basis]. */
+function validateBasis(basis, grow = '1', shrink = '1') {
+    let parts = [grow, shrink, basis];
+    const j = basis.indexOf('calc');
+    if (j > 0) {
+        parts[2] = validateCalcValue(basis.substring(j).trim());
+        const matches = basis.substring(0, j).trim().split(' ');
+        if (matches.length === 2) {
+            parts[0] = matches[0];
+            parts[1] = matches[1];
+        }
+    }
+    else if (j === 0) {
+        parts[2] = validateCalcValue(basis.trim());
+    }
+    else {
+        const matches = basis.split(' ');
+        parts = matches.length === 3 ? matches : [grow, shrink, basis];
+    }
+    return parts;
+}
+// ─── Port of ngx-layout FlexStyleBuilder.buildStyles ─────────────────────────
+const CLEAR_STYLES = {
+    'max-width': null, 'max-height': null, 'min-width': null, 'min-height': null,
+};
+/**
+ * Builds the complete flex style map for a child, given the raw fxFlex value
+ * and the parent flow. `null` values mean "remove this property".
+ * Matches ngx-layout output exactly (useColumnBasisZero = true, the default).
+ */
+function buildFlexStyles(value, direction, hasWrap) {
+    const isHorizontal = direction.indexOf('row') > -1 || direction.indexOf('column') === -1;
+    const parts = validateBasis(String(value).replace(';', ''));
+    let grow = parts[0];
+    let shrink = parts[1];
+    let basis = parts[2];
+    const max = isHorizontal ? 'max-width' : 'max-height';
+    const min = isHorizontal ? 'min-width' : 'min-height';
+    const hasCalc = String(basis).indexOf('calc') > -1;
+    const usingCalc = hasCalc || basis === 'auto';
+    const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
+    const hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('rem') > -1 ||
+        String(basis).indexOf('em') > -1 || String(basis).indexOf('vw') > -1 ||
+        String(basis).indexOf('vh') > -1;
+    let isValue = hasCalc || hasUnits;
+    // eslint-disable-next-line eqeqeq
+    grow = grow == '0' ? 0 : grow;
+    // eslint-disable-next-line eqeqeq
+    shrink = shrink == '0' ? 0 : shrink;
+    const isFixed = !grow && !shrink;
+    let css = {};
+    switch (basis || '') {
+        case '':
+            // useColumnBasisZero default = true (ngx LAYOUT_CONFIG default)
+            basis = isHorizontal ? '0%' : '0.000000001px';
+            break;
+        case 'initial':
+        case 'nogrow':
+            grow = 0;
+            basis = 'auto';
+            break;
+        case 'grow':
+            basis = '100%';
+            break;
+        case 'noshrink':
+            shrink = 0;
+            basis = 'auto';
+            break;
+        case 'auto':
+            break;
+        case 'none':
+            grow = 0;
+            shrink = 0;
+            basis = 'auto';
+            break;
+        default:
+            if (!isValue && !isPercent && !isNaN(basis)) {
+                basis = basis + '%';
+            }
+            if (basis === '0%')
+                isValue = true; // ngx fix #280
+            if (basis === '0px')
+                basis = '0%';
+            if (hasCalc) { // ngx fix #5345
+                css = { ...CLEAR_STYLES, 'flex-grow': grow, 'flex-shrink': shrink,
+                    'flex-basis': isValue ? basis : '100%' };
+            }
+            else {
+                css = { ...CLEAR_STYLES, flex: `${grow} ${shrink} ${isValue ? basis : '100%'}` };
+            }
+            break;
+    }
+    if (!(css['flex'] || css['flex-grow'])) {
+        if (hasCalc) {
+            css = { ...CLEAR_STYLES, 'flex-grow': grow, 'flex-shrink': shrink, 'flex-basis': basis };
+        }
+        else {
+            css = { ...CLEAR_STYLES, flex: `${grow} ${shrink} ${basis}` };
+        }
+    }
+    // ngx fixes #277 / #534 / #728
+    if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
+        css[min] = isFixed || (isValue && grow) ? basis : null;
+        css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
+    }
+    if (!css[min] && !css[max]) {
+        // ngx fix #528
+        if (hasCalc) {
+            css = { ...CLEAR_STYLES, 'flex-grow': grow, 'flex-shrink': shrink, 'flex-basis': basis };
+        }
+        else {
+            css = { ...CLEAR_STYLES, flex: `${grow} ${shrink} ${basis}` };
+        }
+    }
+    else if (hasWrap) {
+        // ngx fix #660
+        css[hasCalc ? 'flex-basis' : 'flex'] = css[max]
+            ? (hasCalc ? css[max] : `${grow} ${shrink} ${css[max]}`)
+            : (hasCalc ? css[min] : `${grow} ${shrink} ${css[min]}`);
+    }
+    // Normalize numbers to strings for the renderer
+    const out = {};
+    for (const [k, v] of Object.entries(css))
+        out[k] = v === null ? null : String(v);
+    return out;
 }
-/** Returns true if any sibling element in the same parent has fxFlex="*" */
+/** Extension: true when a sibling element declares fxFlex="*" (static attribute). */
 function parentHasStar(el) {
     const parent = el.parentElement;
     if (!parent)
@@ -1909,7 +2220,8 @@ function parentHasStar(el) {
 class FxFlexDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        // ── Canonical signal inputs ───────────────────────────────────────────────
+        /** Direct ancestor FxLayout (any level); matched to the direct parent in the effect. */
+        this.parentLayout = inject(FxLayoutDirective, { skipSelf: true, optional: true });
         this.fxFlex = input(undefined, { ...(ngDevMode ? { debugName: "fxFlex" } : /* istanbul ignore next */ {}), alias: 'fxFlex' });
         this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xs' });
         this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm' });
@@ -1917,32 +2229,25 @@ class FxFlexDirective extends ResponsiveBaseDirective {
         this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg' });
         this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl' });
         this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xxl' });
-        // ── lt-* ─────────────────────────────────────────────────────────────────
         this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-sm' });
         this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-md' });
         this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-lg' });
         this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-xl' });
         this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lt-xxl' });
-        // ── gt-* ─────────────────────────────────────────────────────────────────
         this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-xs' });
         this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-sm' });
         this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-md' });
         this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-lg' });
         this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxFlex.gt-xl' });
-        // ── *-up ─────────────────────────────────────────────────────────────────
         this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-up' });
         this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-up' });
         this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-up' });
         this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl-up' });
         this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xxl-up' });
-        // ── *-down ───────────────────────────────────────────────────────────────
         this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.sm-down' });
         this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md-down' });
         this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.lg-down' });
         this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxFlex.xl-down' });
-        // ── Derived CSS value ──────────────────────────────────────────────────────
-        // Inlined single computed: Angular tracks each input() individually,
-        // so _flexCss only recomputes when a signal it actually reads changes.
         this._rawFlex = computed(() => resolveAll({ default: this.fxFlex(), xs: this.xs(), sm: this.sm(), md: this.md(),
             lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
             'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
@@ -1953,22 +2258,42 @@ class FxFlexDirective extends ResponsiveBaseDirective {
             'sm-down': this.smDown(), 'md-down': this.mdDown(),
             'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_rawFlex" }] : /* istanbul ignore next */ []));
+        /** CSS properties applied on the last effect run (for stale cleanup). */
+        this._applied = new Set();
         effect(() => {
-            const raw = this._rawFlex();
-            // undefined means no rule matched the current breakpoint (e.g. only fxFlex.lt-md="100"
-            // is set and the current bp is lg+). Remove flex entirely so the browser default
-            // (flex: 0 1 auto) applies and justify-content can distribute the remaining space.
+            let raw = this._rawFlex();
+            const el = this.el.nativeElement;
+            // No rule matches the current breakpoint → remove everything we applied
             if (raw === undefined) {
-                this.safeSetStyle('flex', null);
-                this.safeSetStyle('box-sizing', null);
+                for (const prop of this._applied)
+                    this.r2.removeStyle(el, prop);
+                this._applied.clear();
                 return;
             }
-            // empty string / "*" → equal distribution (1 1 auto), unless a star-sibling is present
-            const css = raw === ''
-                ? (parentHasStar(this.el.nativeElement) ? '0 0 auto' : '1 1 auto')
-                : toFlexCss(raw);
-            this.safeSetStyle('flex', css);
-            this.safeSetStyle('box-sizing', 'border-box');
+            // Extensions (non-ngx, documented in the header)
+            if (raw === '*')
+                raw = 'auto';
+            else if (raw === '' && this.isBrowser && parentHasStar(el))
+                raw = 'none'; // 0 0 auto
+            // Parent flow: reactive via FxLayoutDirective signals when it is the
+            // direct parent; getComputedStyle fallback for plain-CSS flex parents.
+            const { direction, hasWrap } = resolveParentFlow(el, this.parentLayout, this.isBrowser);
+            const styles = buildFlexStyles(raw, direction, hasWrap);
+            const nextKeys = new Set();
+            for (const [prop, value] of Object.entries(styles)) {
+                if (value === null) {
+                    this.r2.removeStyle(el, prop);
+                }
+                else {
+                    this.r2.setStyle(el, prop, value);
+                    nextKeys.add(prop);
+                }
+            }
+            for (const prop of this._applied) {
+                if (!nextKeys.has(prop))
+                    this.r2.removeStyle(el, prop);
+            }
+            this._applied = nextKeys;
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2150,13 +2475,13 @@ class FxGridDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxGridDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxGrid],
-    [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],
-    [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],
-    [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],
-    [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],
-    [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]
+                    selector: `
+    [fxGrid],
+    [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],
+    [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],
+    [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],
+    [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],
+    [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]
   `,
                     standalone: true,
                     host: { '[style.display]': '"grid"' },
@@ -2214,13 +2539,13 @@ class FxGridColumnDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxGridColumnDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxGridColumn],
-    [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],
-    [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],
-    [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],
-    [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],
-    [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]
+                    selector: `
+    [fxGridColumn],
+    [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],
+    [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],
+    [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],
+    [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],
+    [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]
   `,
                     standalone: true,
                 }]
@@ -2277,53 +2602,111 @@ class FxGridAreaDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxGridAreaDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxGridArea],
-    [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],
-    [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],
-    [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],
-    [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],
-    [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]
+                    selector: `
+    [fxGridArea],
+    [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],
+    [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],
+    [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],
+    [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],
+    [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]
   `,
                     standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { fxGridArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-down", required: false }] }] } });
 
 /**
- * @file fx-layout-align.directive.ts  (Angular 21 — signals)
+ * @file fx-layout-align.directive.ts  (Angular 22 — signals)
  *
- * [fxLayoutAlign]  — sets justify-content + align-items on a flex container.
+ * [fxLayoutAlign] — sets justify-content + align-items + align-content
+ * on a flex container. Faithful port of @ngbracket LayoutAlignStyleBuilder:
  *
- * Format: "mainAxis crossAxis"
- *   mainAxis  : start | center | end | space-between | space-around | space-evenly
- *   crossAxis : start | center | end | stretch | baseline  (default: stretch)
+ *   • mainAxis : start|flex-start | center | end|flex-end |
+ *                space-between | space-around | space-evenly   (default: flex-start)
+ *   • crossAxis: start|flex-start | center | end|flex-end | baseline |
+ *                space-between | space-around | stretch        (default: stretch)
+ *   • align-content is set alongside align-items (multi-line wrap alignment)
+ *   • crossAxis 'stretch' → max-width:100% (column flow) / max-height:100% (row flow)
+ *   • display flex/inline-flex + box-sizing, preserving display:none (fxHide)
  *
- * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • computed() derives the resolved CSS pair
- *   • effect() in constructor writes to DOM
+ * Direction/inline are read reactively from the FxLayoutDirective on the SAME
+ * host when present (signals), defaulting to row / non-inline otherwise.
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
-const MAIN_MAP = {
-    'start': 'flex-start', 'end': 'flex-end', 'center': 'center',
-    'space-between': 'space-between', 'space-around': 'space-around', 'space-evenly': 'space-evenly',
-};
-const CROSS_MAP = {
-    'start': 'flex-start', 'end': 'flex-end', 'center': 'center',
-    'stretch': 'stretch', 'baseline': 'baseline',
-};
-function parseAlign(raw) {
-    const [main = 'start', cross = 'stretch'] = raw.trim().split(/\s+/);
-    if (isDevMode() && !MAIN_MAP[main])
-        console.warn(`[fxLayoutAlign] Unknown mainAxis: "${main}"`);
-    if (isDevMode() && !CROSS_MAP[cross])
-        console.warn(`[fxLayoutAlign] Unknown crossAxis: "${cross}"`);
-    return [MAIN_MAP[main] ?? 'flex-start', CROSS_MAP[cross] ?? 'stretch'];
+/**
+ * Port of ngx LayoutAlignStyleBuilder.buildStyles.
+ * `null` values mean "remove the property".
+ */
+function buildAlignStyles(align, layoutDirection, inline) {
+    const css = {};
+    const [mainAxis, crossAxis] = align.split(' ');
+    switch (mainAxis) {
+        case 'center':
+            css['justify-content'] = 'center';
+            break;
+        case 'space-around':
+            css['justify-content'] = 'space-around';
+            break;
+        case 'space-between':
+            css['justify-content'] = 'space-between';
+            break;
+        case 'space-evenly':
+            css['justify-content'] = 'space-evenly';
+            break;
+        case 'end':
+        case 'flex-end':
+            css['justify-content'] = 'flex-end';
+            break;
+        case 'start':
+        case 'flex-start':
+        default:
+            css['justify-content'] = 'flex-start';
+            break;
+    }
+    switch (crossAxis) {
+        case 'start':
+        case 'flex-start':
+            css['align-items'] = css['align-content'] = 'flex-start';
+            break;
+        case 'center':
+            css['align-items'] = css['align-content'] = 'center';
+            break;
+        case 'end':
+        case 'flex-end':
+            css['align-items'] = css['align-content'] = 'flex-end';
+            break;
+        case 'space-between':
+            css['align-content'] = 'space-between';
+            css['align-items'] = 'stretch';
+            break;
+        case 'space-around':
+            css['align-content'] = 'space-around';
+            css['align-items'] = 'stretch';
+            break;
+        case 'baseline':
+            css['align-content'] = 'stretch';
+            css['align-items'] = 'baseline';
+            break;
+        case 'stretch':
+        default:
+            css['align-items'] = css['align-content'] = 'stretch';
+            break;
+    }
+    const isHorizontal = layoutDirection.indexOf('row') > -1 || layoutDirection.indexOf('column') === -1;
+    return {
+        ...css,
+        'display': inline ? 'inline-flex' : 'flex',
+        'flex-direction': layoutDirection,
+        'box-sizing': 'border-box',
+        'max-width': crossAxis === 'stretch' ? (!isHorizontal ? '100%' : null) : null,
+        'max-height': crossAxis === 'stretch' ? (isHorizontal ? '100%' : null) : null,
+    };
 }
 class FxLayoutAlignDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
+        /** FxLayout on the same host (optional): direction/inline read reactively. */
+        this.selfLayout = inject(FxLayoutDirective, { self: true, optional: true });
         this.fxLayoutAlign = input(undefined, { ...(ngDevMode ? { debugName: "fxLayoutAlign" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign' });
         this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xs' });
         this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.sm' });
@@ -2350,7 +2733,7 @@ class FxLayoutAlignDirective extends ResponsiveBaseDirective {
         this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.md-down' });
         this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lg-down' });
         this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xl-down' });
-        this._parsed = computed(() => parseAlign(resolveAll({ default: this.fxLayoutAlign(), xs: this.xs(), sm: this.sm(), md: this.md(),
+        this._align = computed(() => resolveAll({ default: this.fxLayoutAlign(), xs: this.xs(), sm: this.sm(), md: this.md(),
             lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
             'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
             'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
@@ -2358,46 +2741,49 @@ class FxLayoutAlignDirective extends ResponsiveBaseDirective {
             'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
             'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
             'sm-down': this.smDown(), 'md-down': this.mdDown(),
-            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'start stretch'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'start stretch', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_align" }] : /* istanbul ignore next */ []));
         effect(() => {
-            const [jc, ai] = this._parsed();
-            this.safeSetStyle('justify-content', jc);
-            this.safeSetStyle('align-items', ai);
+            const direction = this.selfLayout?.direction() ?? 'row';
+            const inline = this.selfLayout?.inline() ?? false;
+            const styles = buildAlignStyles(this._align(), direction, inline);
+            const el = this.el.nativeElement;
+            for (const [prop, value] of Object.entries(styles)) {
+                // ngx parity: never override display:none set by fxHide
+                if (prop === 'display' && el.style.display === 'none')
+                    continue;
+                this.safeSetStyle(prop, value);
+            }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutAlignDirective, isStandalone: true, selector: "\n    [fxLayoutAlign],\n    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],\n    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],\n    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],\n    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],\n    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]\n  ", inputs: { fxLayoutAlign: { classPropertyName: "fxLayoutAlign", publicName: "fxLayoutAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"flex\"" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutAlignDirective, isStandalone: true, selector: "\n    [fxLayoutAlign],\n    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],\n    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],\n    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],\n    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],\n    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]\n  ", inputs: { fxLayoutAlign: { classPropertyName: "fxLayoutAlign", publicName: "fxLayoutAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutAlignDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxLayoutAlign],
-    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],
-    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],
-    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],
-    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],
-    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]
+                    selector: `
+    [fxLayoutAlign],
+    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],
+    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],
+    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],
+    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],
+    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]
   `,
                     standalone: true,
-                    // fxLayoutAlign implies a flex container. The host binding makes this SSR-safe
-                    // and avoids racing with fxLayout (which also sets display:flex via host binding):
-                    // when both directives are on the same element Angular sets the property once.
-                    host: { '[style.display]': '"flex"' },
                 }]
         }], ctorParameters: () => [], propDecorators: { fxLayoutAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-down", required: false }] }] } });
 
 /**
- * @file fx-layout-gap.directive.ts  (Angular 21 — signals)
+ * @file fx-layout-gap.directive.ts  (Angular 21 — signals)
  *
- * [fxLayoutGap]  — sets gap on a flex or grid container.
- * Unitless numbers are normalized to px (e.g. "16" → "16px").
+ * [fxLayoutGap]  — sets gap on a flex or grid container.
+ * Unitless numbers are normalized to px (e.g. "16" → "16px").
  *
  * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • computed() derives the normalized gap value
- *   • effect() in constructor writes to DOM
+ *   • All @Input setters replaced by input() signals
+ *   • computed() derives the normalized gap value
+ *   • effect() in constructor writes to DOM
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
@@ -2451,170 +2837,19 @@ class FxLayoutGapDirective extends ResponsiveBaseDirective {
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutGapDirective, isStandalone: true, selector: "\n    [fxLayoutGap],\n    [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],\n    [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],\n    [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],\n    [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],\n    [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]\n  ", inputs: { fxLayoutGap: { classPropertyName: "fxLayoutGap", publicName: "fxLayoutGap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutGap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutGap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutGap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutGap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutGap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutGapDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `
-    [fxLayoutGap],
-    [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],
-    [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],
-    [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],
-    [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],
-    [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxLayoutGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-down", required: false }] }] } });
-
-/**
- * @file fx-layout.directive.ts  (Angular 21 - signals)
- *
- * [fxLayout]     -- sets flex-direction (and optionally flex-wrap) on the host.
- * [fxLayoutWrap] -- dedicated alias for flex-wrap (original ngx-layout compat).
- *
- * Angular 21 changes:
- *   - All @Input setters replaced by input() signals
- *   - computed() builds reactive BP maps and derives CSS values
- *   - effect() in constructor writes to DOM -- no lifecycle hooks
- *
- * Breakpoint suffixes:
- *   Canonical : .xs .sm .md .lg .xl .xxl
- *   lt-*      : .lt-sm .lt-md .lt-lg .lt-xl .lt-xxl
- *   gt-*      : .gt-xs .gt-sm .gt-md .gt-lg .gt-xl
- *   *-up      : .sm-up .md-up .lg-up .xl-up .xxl-up
- *   *-down    : .sm-down .md-down .lg-down .xl-down
- */
-const VALID_DIRECTIONS = new Set(['row', 'column', 'row-reverse', 'column-reverse']);
-const VALID_WRAPS = new Set(['wrap', 'wrap-reverse', 'nowrap']);
-function parseLayout(raw) {
-    const parts = raw.trim().split(/\s+/);
-    const dir = VALID_DIRECTIONS.has(parts[0]) ? parts[0] : 'row';
-    const wrap = VALID_WRAPS.has(parts[1]) ? parts[1] : 'nowrap';
-    return [dir, wrap];
-}
-class FxLayoutDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        this.fxLayout = input('row', { ...(ngDevMode ? { debugName: "fxLayout" } : /* istanbul ignore next */ {}), alias: 'fxLayout' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-down' });
-        this._parsed = computed(() => parseLayout(resolveAll({ default: this.fxLayout(), xs: this.xs(), sm: this.sm(), md: this.md(),
-            lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
-            'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
-            'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
-            'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
-            'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
-            'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
-            'sm-down': this.smDown(), 'md-down': this.mdDown(),
-            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'row'), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const [dir, wrap] = this._parsed();
-            this.safeSetStyle('flex-direction', dir);
-            this.safeSetStyle('flex-wrap', wrap);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutDirective, isStandalone: true, selector: "\n    [fxLayout],\n    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],\n    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],\n    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],\n    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],\n    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]\n  ", inputs: { fxLayout: { classPropertyName: "fxLayout", publicName: "fxLayout", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayout.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayout.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayout.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayout.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayout.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayout.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayout.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayout.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayout.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayout.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayout.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayout.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayout.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayout.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayout.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayout.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayout.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayout.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayout.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayout.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayout.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayout.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayout.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayout.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayout.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"flex\"" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `
-    [fxLayout],
-    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],
-    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],
-    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],
-    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],
-    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]
+    [fxLayoutGap],
+    [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],
+    [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],
+    [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],
+    [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],
+    [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]
   `,
                     standalone: true,
-                    host: { '[style.display]': '"flex"' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { fxLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-down", required: false }] }] } });
-class FxLayoutWrapDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        this.fxLayoutWrap = input('wrap', { ...(ngDevMode ? { debugName: "fxLayoutWrap" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-down' });
-        this._wrap = computed(() => {
-            const w = resolveAll({ default: this.fxLayoutWrap(), xs: this.xs(), sm: this.sm(), md: this.md(),
-                lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
-                'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
-                'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
-                'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
-                'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
-                'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
-                'sm-down': this.smDown(), 'md-down': this.mdDown(),
-                'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'wrap';
-            return VALID_WRAPS.has(w) ? w : 'wrap';
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_wrap" }] : /* istanbul ignore next */ []));
-        effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutWrapDirective, isStandalone: true, selector: "\n    [fxLayoutWrap],\n    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],\n    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],\n    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],\n    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],\n    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]\n  ", inputs: { fxLayoutWrap: { classPropertyName: "fxLayoutWrap", publicName: "fxLayoutWrap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutWrap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutWrap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutWrap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutWrap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutWrap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutWrap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutWrap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutWrap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutWrap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutWrap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutWrap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutWrap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutWrap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutWrap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutWrap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutWrap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutWrap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutWrap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutWrap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutWrap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutWrap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutWrap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutWrap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutWrap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutWrap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `
-    [fxLayoutWrap],
-    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],
-    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],
-    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],
-    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],
-    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxLayoutWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-down", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fxLayoutGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-down", required: false }] }] } });
 
 /**
  * @file fx-show-hide.directives.ts  (Angular 21 — signals)
@@ -2639,6 +2874,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
+/**
+ * Pure visibility transition (exported for tests).
+ * Captures the inline display before hiding and restores it when shown again,
+ * so display:flex|grid written by FxLayout/FxGrid effects is never lost.
+ * @returns the new "previous display" state to carry to the next transition
+ */
+function applyVisibility(el, setStyle, removeStyle, visible, prevDisplay) {
+    if (!visible) {
+        const current = el.style.display;
+        if (current !== 'none')
+            prevDisplay = current || null;
+        setStyle('display', 'none');
+        return prevDisplay;
+    }
+    // Visible: touch the DOM only if we are the ones who hid it
+    if (el.style.display === 'none') {
+        if (prevDisplay)
+            setStyle('display', prevDisplay);
+        else
+            removeStyle('display');
+    }
+    return prevDisplay;
+}
 function toBool(v) {
     if (v === undefined || v === null)
         return undefined;
@@ -2769,10 +3027,10 @@ class FxShowHideDirective extends ResponsiveBaseDirective {
             return true;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+        /** Inline display captured before the last hide — restored on show. */
+        this._prevDisplay = null;
         effect(() => {
-            this._visible()
-                ? this.r2.removeStyle(this.el.nativeElement, 'display')
-                : this.r2.setStyle(this.el.nativeElement, 'display', 'none');
+            this._prevDisplay = applyVisibility(this.el.nativeElement, (p, v) => this.r2.setStyle(this.el.nativeElement, p, v), p => this.r2.removeStyle(this.el.nativeElement, p), this._visible(), this._prevDisplay);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxShowHideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -2781,18 +3039,18 @@ class FxShowHideDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxShowHideDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxShow],[fxHide],
-    [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],
-    [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],
-    [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],
-    [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],
-    [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down],
-    [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],
-    [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],
-    [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],
-    [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],
-    [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]
+                    selector: `
+    [fxShow],[fxHide],
+    [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],
+    [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],
+    [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],
+    [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],
+    [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down],
+    [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],
+    [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],
+    [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],
+    [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],
+    [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]
   `,
                     standalone: true,
                 }]
@@ -2878,13 +3136,13 @@ class FxStyleDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxStyleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxStyle],
-    [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],
-    [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],
-    [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],
-    [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],
-    [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]
+                    selector: `
+    [fxStyle],
+    [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],
+    [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],
+    [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],
+    [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],
+    [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]
   `,
                     standalone: true,
                 }]
@@ -2959,13 +3217,13 @@ class FxClassDirective extends ResponsiveBaseDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxClassDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `
-    [fxClass],
-    [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],
-    [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],
-    [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],
-    [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],
-    [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]
+                    selector: `
+    [fxClass],
+    [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],
+    [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],
+    [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],
+    [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],
+    [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]
   `,
                     standalone: true,
                 }]
@@ -3056,5 +3314,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, resolve, resolveAll, resolveNonCanonical };
+export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, LAYOUT_VALUES, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, applyVisibility, buildAlignStyles, buildFlexStyles, buildLayoutCSS, resolve, resolveAll, resolveNonCanonical, resolveParentFlow, validateBasis, validateLayoutValue, validateWrapValue };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.mjs.map