@arsedizioni/ars-utils 21.2.220 → 21.2.222

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

@@ -1816,67 +1816,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
         }], 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-layout-align.directive.ts  (Angular 21 — signals)
- *
- * [fxLayoutAlign]  — sets justify-content + align-items on a flex container.
+ * @file fx-flex.directive.ts  (Angular 21 — signals)
  *
- * Format: "mainAxis crossAxis"
- *   mainAxis  : start | center | end | space-between | space-around | space-evenly
- *   crossAxis : start | center | end | stretch | baseline  (default: stretch)
+ * [fxFlex]  — flex shorthand on a flex child element.
  *
  * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • computed() derives the resolved CSS pair
- *   • effect() in constructor writes to DOM
+ *   • 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
  *
- * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
+ * 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)
+ *
+ * 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 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'];
+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}`;
 }
-class FxLayoutAlignDirective extends ResponsiveBaseDirective {
+/** Returns true if any sibling element in the same parent has fxFlex="*" */
+function parentHasStar(el) {
+    const parent = el.parentElement;
+    if (!parent)
+        return false;
+    return Array.from(parent.children).some(c => c !== el && (c.getAttribute('fxflex') === '*' || c.getAttribute('fxFlex') === '*'));
+}
+class FxFlexDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        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' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.sm-down' });
-        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(),
+        // ── Canonical signal inputs ───────────────────────────────────────────────
+        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' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md' });
+        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(),
             'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
@@ -1884,313 +1920,714 @@ 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'), ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_rawFlex" }] : /* istanbul ignore next */ []));
         effect(() => {
-            const [jc, ai] = this._parsed();
-            // fxLayoutAlign implies a flex container — set display:flex if not already
-            // set by fxLayout (which uses host binding). This makes fxLayoutAlign work
-            // standalone (e.g. <div fxFlex="*" fxLayoutAlign="end">).
-            this.r2.setStyle(this.el.nativeElement, 'display', 'flex');
-            this.safeSetStyle('justify-content', jc);
-            this.safeSetStyle('align-items', ai);
+            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.
+            if (raw === undefined) {
+                this.safeSetStyle('flex', null);
+                this.safeSetStyle('box-sizing', null);
+                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');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxFlexDirective, isStandalone: true, selector: "\n    [fxFlex],\n    [fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],\n    [fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],\n    [fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],\n    [fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],\n    [fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]\n  ", inputs: { fxFlex: { classPropertyName: "fxFlex", publicName: "fxFlex", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlex.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlex.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlex.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlex.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlex.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlex.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlex.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlex.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlex.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlex.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlex.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlex.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlex.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlex.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlex.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlex.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlex.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlex.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlex.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlex.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlex.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlex.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlex.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlex.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlex.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutAlignDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxFlexDirective, 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: `
+    [fxFlex],
+    [fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],
+    [fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],
+    [fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],
+    [fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],
+    [fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]
   `,
                     standalone: true,
                 }]
-        }], 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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fxFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-down", required: false }] }] } });
 
 /**
- * @file fx-layout-gap.directive.ts  (Angular 21 — signals)
+ * @file fx-grid.directives.ts  (Angular 21 — signals)
  *
- * [fxLayoutGap]  — sets gap on a flex or grid container.
- * Unitless numbers are normalized to px (e.g. "16" → "16px").
+ * CSS Grid responsive directives.
+ *
+ *  [fxGrid]        — display:grid + responsive grid-template-columns.
+ *                    Accepts [fxGridRows] and [fxGridGap] inputs on same host.
+ *  [fxGridColumn]  — grid-column on a child
+ *  [fxGridArea]    — grid-area on a child
  *
  * 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
+ *   • FxGridDirective uses 3 pairs of computed() for cols/rows/gap maps
+ *   • Single effect() in constructor writes all 3 CSS props
+ *   • Null/undefined props are removed (no style leak)
+ *
+ * Unitless numeric gap values are normalized to px ("16" → "16px").
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
 function normalizeGap$1(raw) {
+    if (!raw)
+        return undefined;
     return raw.trim().split(/\s+/)
         .map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
         .join(' ');
 }
-class FxLayoutGapDirective extends ResponsiveBaseDirective {
+// ─── fxGrid (container) ──────────────────────────────────────────────────────
+class FxGridDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        this.fxLayoutGap = input(undefined, { ...(ngDevMode ? { debugName: "fxLayoutGap" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl-down' });
-        this._gap = computed(() => normalizeGap$1(resolveAll({ default: this.fxLayoutGap(), 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)) ?? '0'), ...(ngDevMode ? [{ debugName: "_gap" }] : /* istanbul ignore next */ []));
-        effect(() => { this.safeSetStyle('gap', this._gap()); });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.10", 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]
+        // ── grid-template-columns ──────────────────────────────────────────────────
+        this.fxGrid = input(undefined, { ...(ngDevMode ? { debugName: "fxGrid" } : /* istanbul ignore next */ {}), alias: 'fxGrid' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl-down' });
+        // ── grid-template-rows ────────────────────────────────────────────────────
+        this.fxGridRows = input(undefined, { ...(ngDevMode ? { debugName: "fxGridRows" } : /* istanbul ignore next */ {}), alias: 'fxGridRows' });
+        this.rowsXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsXs" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xs' });
+        this.rowsSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm' });
+        this.rowsMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md' });
+        this.rowsLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg' });
+        this.rowsXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl' });
+        this.rowsXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xxl' });
+        this.rowsLtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-sm' });
+        this.rowsLtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-md' });
+        this.rowsLtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-lg' });
+        this.rowsLtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-xl' });
+        this.rowsLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-xxl' });
+        this.rowsGtXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-xs' });
+        this.rowsGtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-sm' });
+        this.rowsGtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-md' });
+        this.rowsGtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-lg' });
+        this.rowsGtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-xl' });
+        this.rowsSmUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm-up' });
+        this.rowsMdUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md-up' });
+        this.rowsLgUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg-up' });
+        this.rowsXlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl-up' });
+        this.rowsXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xxl-up' });
+        this.rowsSmDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm-down' });
+        this.rowsMdDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md-down' });
+        this.rowsLgDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg-down' });
+        this.rowsXlDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl-down' });
+        // ── gap ───────────────────────────────────────────────────────────────────
+        this.fxGridGap = input(undefined, { ...(ngDevMode ? { debugName: "fxGridGap" } : /* istanbul ignore next */ {}), alias: 'fxGridGap' });
+        this.gapXs = input(undefined, { ...(ngDevMode ? { debugName: "gapXs" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xs' });
+        this.gapSm = input(undefined, { ...(ngDevMode ? { debugName: "gapSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm' });
+        this.gapMd = input(undefined, { ...(ngDevMode ? { debugName: "gapMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md' });
+        this.gapLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg' });
+        this.gapXl = input(undefined, { ...(ngDevMode ? { debugName: "gapXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl' });
+        this.gapXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xxl' });
+        this.gapLtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapLtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-sm' });
+        this.gapLtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapLtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-md' });
+        this.gapLtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-lg' });
+        this.gapLtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-xl' });
+        this.gapLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-xxl' });
+        this.gapGtXs = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-xs' });
+        this.gapGtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapGtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-sm' });
+        this.gapGtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapGtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-md' });
+        this.gapGtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapGtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-lg' });
+        this.gapGtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-xl' });
+        this.gapSmUp = input(undefined, { ...(ngDevMode ? { debugName: "gapSmUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm-up' });
+        this.gapMdUp = input(undefined, { ...(ngDevMode ? { debugName: "gapMdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md-up' });
+        this.gapLgUp = input(undefined, { ...(ngDevMode ? { debugName: "gapLgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg-up' });
+        this.gapXlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl-up' });
+        this.gapXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xxl-up' });
+        this.gapSmDown = input(undefined, { ...(ngDevMode ? { debugName: "gapSmDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm-down' });
+        this.gapMdDown = input(undefined, { ...(ngDevMode ? { debugName: "gapMdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md-down' });
+        this.gapLgDown = input(undefined, { ...(ngDevMode ? { debugName: "gapLgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg-down' });
+        this.gapXlDown = input(undefined, { ...(ngDevMode ? { debugName: "gapXlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl-down' });
+        // ── resolved values (flat computed — no intermediate object computed) ──────
+        this._cols = computed(() => resolveAll({ default: this.fxGrid(), 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)), ...(ngDevMode ? [{ debugName: "_cols" }] : /* istanbul ignore next */ []));
+        this._rows = computed(() => resolveAll({ default: this.fxGridRows(), xs: this.rowsXs(), sm: this.rowsSm(),
+            md: this.rowsMd(), lg: this.rowsLg(), xl: this.rowsXl(), xxl: this.rowsXxl() }, { 'lt-sm': this.rowsLtSm(), 'lt-md': this.rowsLtMd(), 'lt-lg': this.rowsLtLg(),
+            'lt-xl': this.rowsLtXl(), 'lt-xxl': this.rowsLtXxl(),
+            'gt-xs': this.rowsGtXs(), 'gt-sm': this.rowsGtSm(), 'gt-md': this.rowsGtMd(),
+            'gt-lg': this.rowsGtLg(), 'gt-xl': this.rowsGtXl(),
+            'sm-up': this.rowsSmUp(), 'md-up': this.rowsMdUp(), 'lg-up': this.rowsLgUp(),
+            'xl-up': this.rowsXlUp(), 'xxl-up': this.rowsXxlUp(),
+            'sm-down': this.rowsSmDown(), 'md-down': this.rowsMdDown(),
+            'lg-down': this.rowsLgDown(), 'xl-down': this.rowsXlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+        this._gap = computed(() => normalizeGap$1(resolveAll({ default: this.fxGridGap(), xs: this.gapXs(), sm: this.gapSm(),
+            md: this.gapMd(), lg: this.gapLg(), xl: this.gapXl(), xxl: this.gapXxl() }, { 'lt-sm': this.gapLtSm(), 'lt-md': this.gapLtMd(), 'lt-lg': this.gapLtLg(),
+            'lt-xl': this.gapLtXl(), 'lt-xxl': this.gapLtXxl(),
+            'gt-xs': this.gapGtXs(), 'gt-sm': this.gapGtSm(), 'gt-md': this.gapGtMd(),
+            'gt-lg': this.gapGtLg(), 'gt-xl': this.gapGtXl(),
+            'sm-up': this.gapSmUp(), 'md-up': this.gapMdUp(), 'lg-up': this.gapLgUp(),
+            'xl-up': this.gapXlUp(), 'xxl-up': this.gapXxlUp(),
+            'sm-down': this.gapSmDown(), 'md-down': this.gapMdDown(),
+            'lg-down': this.gapLgDown(), 'xl-down': this.gapXlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_gap" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const cols = this._cols();
+            const rows = this._rows();
+            const gap = this._gap();
+            cols ? this.safeSetStyle('grid-template-columns', cols)
+                : this.r2.removeStyle(this.el.nativeElement, 'grid-template-columns');
+            rows ? this.safeSetStyle('grid-template-rows', rows)
+                : this.r2.removeStyle(this.el.nativeElement, 'grid-template-rows');
+            gap ? this.safeSetStyle('gap', gap)
+                : this.r2.removeStyle(this.el.nativeElement, 'gap');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridDirective, isStandalone: true, selector: "\n    [fxGrid],\n    [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],\n    [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],\n    [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],\n    [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],\n    [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]\n  ", inputs: { fxGrid: { classPropertyName: "fxGrid", publicName: "fxGrid", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGrid.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGrid.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGrid.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGrid.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGrid.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGrid.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGrid.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGrid.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGrid.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGrid.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGrid.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGrid.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGrid.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGrid.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGrid.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGrid.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGrid.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGrid.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGrid.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGrid.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGrid.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGrid.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGrid.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGrid.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGrid.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridRows: { classPropertyName: "fxGridRows", publicName: "fxGridRows", isSignal: true, isRequired: false, transformFunction: null }, rowsXs: { classPropertyName: "rowsXs", publicName: "fxGridRows.xs", isSignal: true, isRequired: false, transformFunction: null }, rowsSm: { classPropertyName: "rowsSm", publicName: "fxGridRows.sm", isSignal: true, isRequired: false, transformFunction: null }, rowsMd: { classPropertyName: "rowsMd", publicName: "fxGridRows.md", isSignal: true, isRequired: false, transformFunction: null }, rowsLg: { classPropertyName: "rowsLg", publicName: "fxGridRows.lg", isSignal: true, isRequired: false, transformFunction: null }, rowsXl: { classPropertyName: "rowsXl", publicName: "fxGridRows.xl", isSignal: true, isRequired: false, transformFunction: null }, rowsXxl: { classPropertyName: "rowsXxl", publicName: "fxGridRows.xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtSm: { classPropertyName: "rowsLtSm", publicName: "fxGridRows.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsLtMd: { classPropertyName: "rowsLtMd", publicName: "fxGridRows.lt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsLtLg: { classPropertyName: "rowsLtLg", publicName: "fxGridRows.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXl: { classPropertyName: "rowsLtXl", publicName: "fxGridRows.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXxl: { classPropertyName: "rowsLtXxl", publicName: "fxGridRows.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXs: { classPropertyName: "rowsGtXs", publicName: "fxGridRows.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, rowsGtSm: { classPropertyName: "rowsGtSm", publicName: "fxGridRows.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsGtMd: { classPropertyName: "rowsGtMd", publicName: "fxGridRows.gt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsGtLg: { classPropertyName: "rowsGtLg", publicName: "fxGridRows.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXl: { classPropertyName: "rowsGtXl", publicName: "fxGridRows.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsSmUp: { classPropertyName: "rowsSmUp", publicName: "fxGridRows.sm-up", isSignal: true, isRequired: false, transformFunction: null }, rowsMdUp: { classPropertyName: "rowsMdUp", publicName: "fxGridRows.md-up", isSignal: true, isRequired: false, transformFunction: null }, rowsLgUp: { classPropertyName: "rowsLgUp", publicName: "fxGridRows.lg-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXlUp: { classPropertyName: "rowsXlUp", publicName: "fxGridRows.xl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXxlUp: { classPropertyName: "rowsXxlUp", publicName: "fxGridRows.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsSmDown: { classPropertyName: "rowsSmDown", publicName: "fxGridRows.sm-down", isSignal: true, isRequired: false, transformFunction: null }, rowsMdDown: { classPropertyName: "rowsMdDown", publicName: "fxGridRows.md-down", isSignal: true, isRequired: false, transformFunction: null }, rowsLgDown: { classPropertyName: "rowsLgDown", publicName: "fxGridRows.lg-down", isSignal: true, isRequired: false, transformFunction: null }, rowsXlDown: { classPropertyName: "rowsXlDown", publicName: "fxGridRows.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridGap: { classPropertyName: "fxGridGap", publicName: "fxGridGap", isSignal: true, isRequired: false, transformFunction: null }, gapXs: { classPropertyName: "gapXs", publicName: "fxGridGap.xs", isSignal: true, isRequired: false, transformFunction: null }, gapSm: { classPropertyName: "gapSm", publicName: "fxGridGap.sm", isSignal: true, isRequired: false, transformFunction: null }, gapMd: { classPropertyName: "gapMd", publicName: "fxGridGap.md", isSignal: true, isRequired: false, transformFunction: null }, gapLg: { classPropertyName: "gapLg", publicName: "fxGridGap.lg", isSignal: true, isRequired: false, transformFunction: null }, gapXl: { classPropertyName: "gapXl", publicName: "fxGridGap.xl", isSignal: true, isRequired: false, transformFunction: null }, gapXxl: { classPropertyName: "gapXxl", publicName: "fxGridGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, gapLtSm: { classPropertyName: "gapLtSm", publicName: "fxGridGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapLtMd: { classPropertyName: "gapLtMd", publicName: "fxGridGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, gapLtLg: { classPropertyName: "gapLtLg", publicName: "fxGridGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapLtXl: { classPropertyName: "gapLtXl", publicName: "fxGridGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapLtXxl: { classPropertyName: "gapLtXxl", publicName: "fxGridGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gapGtXs: { classPropertyName: "gapGtXs", publicName: "fxGridGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gapGtSm: { classPropertyName: "gapGtSm", publicName: "fxGridGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapGtMd: { classPropertyName: "gapGtMd", publicName: "fxGridGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gapGtLg: { classPropertyName: "gapGtLg", publicName: "fxGridGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapGtXl: { classPropertyName: "gapGtXl", publicName: "fxGridGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapSmUp: { classPropertyName: "gapSmUp", publicName: "fxGridGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, gapMdUp: { classPropertyName: "gapMdUp", publicName: "fxGridGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, gapLgUp: { classPropertyName: "gapLgUp", publicName: "fxGridGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, gapXlUp: { classPropertyName: "gapXlUp", publicName: "fxGridGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, gapXxlUp: { classPropertyName: "gapXxlUp", publicName: "fxGridGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, gapSmDown: { classPropertyName: "gapSmDown", publicName: "fxGridGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, gapMdDown: { classPropertyName: "gapMdDown", publicName: "fxGridGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, gapLgDown: { classPropertyName: "gapLgDown", publicName: "fxGridGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, gapXlDown: { classPropertyName: "gapXlDown", publicName: "fxGridGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"grid\"" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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]
   `,
                     standalone: true,
+                    host: { '[style.display]': '"grid"' },
                 }]
-        }], 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 {
+        }], ctorParameters: () => [], propDecorators: { fxGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-down", required: false }] }], fxGridRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows", required: false }] }], rowsXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xs", required: false }] }], rowsSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm", required: false }] }], rowsMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md", required: false }] }], rowsLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg", required: false }] }], rowsXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl", required: false }] }], rowsXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl", required: false }] }], rowsLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-sm", required: false }] }], rowsLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-md", required: false }] }], rowsLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-lg", required: false }] }], rowsLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xl", required: false }] }], rowsLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xxl", required: false }] }], rowsGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xs", required: false }] }], rowsGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-sm", required: false }] }], rowsGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-md", required: false }] }], rowsGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-lg", required: false }] }], rowsGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xl", required: false }] }], rowsSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-up", required: false }] }], rowsMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-up", required: false }] }], rowsLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-up", required: false }] }], rowsXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-up", required: false }] }], rowsXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl-up", required: false }] }], rowsSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-down", required: false }] }], rowsMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-down", required: false }] }], rowsLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-down", required: false }] }], rowsXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-down", required: false }] }], fxGridGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap", required: false }] }], gapXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xs", required: false }] }], gapSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm", required: false }] }], gapMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md", required: false }] }], gapLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg", required: false }] }], gapXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl", required: false }] }], gapXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl", required: false }] }], gapLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-sm", required: false }] }], gapLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-md", required: false }] }], gapLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-lg", required: false }] }], gapLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xl", required: false }] }], gapLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xxl", required: false }] }], gapGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xs", required: false }] }], gapGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-sm", required: false }] }], gapGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-md", required: false }] }], gapGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-lg", required: false }] }], gapGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xl", required: false }] }], gapSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-up", required: false }] }], gapMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-up", required: false }] }], gapLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-up", required: false }] }], gapXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-up", required: false }] }], gapXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl-up", required: false }] }], gapSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-down", required: false }] }], gapMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-down", required: false }] }], gapLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-down", required: false }] }], gapXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-down", required: false }] }] } });
+// ─── fxGridColumn ─────────────────────────────────────────────────────────────
+class FxGridColumnDirective 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(),
+        this.fxGridColumn = input(undefined, { ...(ngDevMode ? { debugName: "fxGridColumn" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl-down' });
+        this._resolved = computed(() => resolveAll({ default: this.fxGridColumn(), 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'), ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
         effect(() => {
-            const [dir, wrap] = this._parsed();
-            this.safeSetStyle('flex-direction', dir);
-            this.safeSetStyle('flex-wrap', wrap);
+            const v = this._resolved();
+            v ? this.safeSetStyle('grid-column', v)
+                : this.r2.removeStyle(this.el.nativeElement, 'grid-column');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridColumnDirective, isStandalone: true, selector: "\n    [fxGridColumn],\n    [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],\n    [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],\n    [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],\n    [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],\n    [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]\n  ", inputs: { fxGridColumn: { classPropertyName: "fxGridColumn", publicName: "fxGridColumn", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridColumn.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridColumn.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridColumn.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridColumn.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridColumn.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridColumn.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridColumn.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridColumn.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridColumn.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridColumn.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridColumn.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridColumn.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridColumn.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridColumn.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridColumn.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridColumn.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridColumn.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridColumn.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridColumn.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridColumn.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridColumn.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridColumn.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridColumn.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridColumn.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridColumn.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridColumnDirective, 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]
+                    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,
-                    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 {
+        }], ctorParameters: () => [], propDecorators: { fxGridColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-down", required: false }] }] } });
+// ─── fxGridArea ───────────────────────────────────────────────────────────────
+class FxGridAreaDirective 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';
-        }, ...(ngDevMode ? [{ debugName: "_wrap" }] : /* istanbul ignore next */ []));
-        effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
+        this.fxGridArea = input(undefined, { ...(ngDevMode ? { debugName: "fxGridArea" } : /* istanbul ignore next */ {}), alias: 'fxGridArea' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl-down' });
+        this._resolved = computed(() => resolveAll({ default: this.fxGridArea(), 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)), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const v = this._resolved();
+            v ? this.safeSetStyle('grid-area', v)
+                : this.r2.removeStyle(this.el.nativeElement, 'grid-area');
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridAreaDirective, isStandalone: true, selector: "\n    [fxGridArea],\n    [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],\n    [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],\n    [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],\n    [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],\n    [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]\n  ", inputs: { fxGridArea: { classPropertyName: "fxGridArea", publicName: "fxGridArea", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridArea.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridArea.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridArea.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridArea.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridArea.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridArea.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridArea.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridArea.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridArea.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridArea.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridArea.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridArea.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridArea.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridArea.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridArea.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridArea.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridArea.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridArea.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridArea.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridArea.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridArea.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridArea.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridArea.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridArea.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridArea.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutWrapDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridAreaDirective, 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]
+                    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: { 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: { 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-show-hide.directives.ts  (Angular 21 — signals)
+ * @file fx-layout-align.directive.ts  (Angular 21 — signals)
  *
- * [fxShow] / [fxHide]  — responsive visibility via display:none.
- * Elements stay in the DOM (unlike *ifBp which removes them).
+ * [fxLayoutAlign]  — sets justify-content + align-items on a flex container.
  *
- * IMPORTANT: fxShow and fxHide are implemented as a SINGLE directive class
- * (FxShowHideDirective) so that mixed patterns like
- *   <div fxHide fxShow.xs>          ← hidden everywhere, shown on xs
- *   <div fxShow fxHide.lt-lg>       ← shown everywhere, hidden below lg
- * work correctly.
+ * Format: "mainAxis crossAxis"
+ *   mainAxis  : start | center | end | space-between | space-around | space-evenly
+ *   crossAxis : start | center | end | stretch | baseline  (default: stretch)
  *
- * Resolution algorithm (no mobile-first cascade — semantics for show/hide
- * are point-in-time, not cumulative):
- *   1. Non-canonical (lt-*, gt-*, *-up, *-down) isActive checks — most specific first
- *   2. Exact canonical match for current bp
- *   3. Default values (fxShow / fxHide without suffix)
- *   4. Fallback: visible (true)
+ * Angular 21 changes:
+ *   • All @Input setters replaced by input() signals
+ *   • computed() derives the resolved CSS pair
+ *   • effect() in constructor writes to DOM
  *
- * When both show and hide match at the same priority level, show wins.
+ * 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'];
+}
+class FxLayoutAlignDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        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' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutAlign.sm-down' });
+        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(),
+            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)) ?? 'start stretch'), ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const [jc, ai] = this._parsed();
+            // fxLayoutAlign implies a flex container — set display:flex if not already
+            // set by fxLayout (which uses host binding). This makes fxLayoutAlign work
+            // standalone (e.g. <div fxFlex="*" fxLayoutAlign="end">).
+            this.r2.setStyle(this.el.nativeElement, 'display', 'flex');
+            this.safeSetStyle('justify-content', jc);
+            this.safeSetStyle('align-items', ai);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.10", 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]
+  `,
+                    standalone: true,
+                }]
+        }], 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)
+ *
+ * [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
  *
  * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
  */
-function toBool(v) {
-    if (v === undefined || v === null)
-        return undefined;
-    if (typeof v === 'boolean')
-        return v;
-    if (v === '')
-        return true;
-    if (v === 'false' || v === '0')
-        return false;
-    return true;
+function normalizeGap(raw) {
+    return raw.trim().split(/\s+/)
+        .map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
+        .join(' ');
 }
-// ─── Unified fxShow + fxHide ─────────────────────────────────────────────────
-class FxShowHideDirective extends ResponsiveBaseDirective {
+class FxLayoutGapDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        // ── fxShow inputs ─────────────────────────────────────────────────────────
-        this.fxShow = input(undefined, { ...(ngDevMode ? { debugName: "fxShow" } : /* istanbul ignore next */ {}), alias: 'fxShow', transform: toBool });
-        this.showXs = input(undefined, { ...(ngDevMode ? { debugName: "showXs" } : /* istanbul ignore next */ {}), alias: 'fxShow.xs', transform: toBool });
-        this.showSm = input(undefined, { ...(ngDevMode ? { debugName: "showSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.sm', transform: toBool });
-        this.showMd = input(undefined, { ...(ngDevMode ? { debugName: "showMd" } : /* istanbul ignore next */ {}), alias: 'fxShow.md', transform: toBool });
-        this.showLg = input(undefined, { ...(ngDevMode ? { debugName: "showLg" } : /* istanbul ignore next */ {}), alias: 'fxShow.lg', transform: toBool });
-        this.showXl = input(undefined, { ...(ngDevMode ? { debugName: "showXl" } : /* istanbul ignore next */ {}), alias: 'fxShow.xl', transform: toBool });
-        this.showXxl = input(undefined, { ...(ngDevMode ? { debugName: "showXxl" } : /* istanbul ignore next */ {}), alias: 'fxShow.xxl', transform: toBool });
-        this.showLtSm = input(undefined, { ...(ngDevMode ? { debugName: "showLtSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-sm', transform: toBool });
-        this.showLtMd = input(undefined, { ...(ngDevMode ? { debugName: "showLtMd" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-md', transform: toBool });
-        this.showLtLg = input(undefined, { ...(ngDevMode ? { debugName: "showLtLg" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-lg', transform: toBool });
-        this.showLtXl = input(undefined, { ...(ngDevMode ? { debugName: "showLtXl" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-xl', transform: toBool });
-        this.showLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "showLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-xxl', transform: toBool });
-        this.showGtXs = input(undefined, { ...(ngDevMode ? { debugName: "showGtXs" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-xs', transform: toBool });
-        this.showGtSm = input(undefined, { ...(ngDevMode ? { debugName: "showGtSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-sm', transform: toBool });
+        this.fxLayoutGap = input(undefined, { ...(ngDevMode ? { debugName: "fxLayoutGap" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutGap.xl-down' });
+        this._gap = computed(() => normalizeGap(resolveAll({ default: this.fxLayoutGap(), 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)) ?? '0'), ...(ngDevMode ? [{ debugName: "_gap" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('gap', this._gap()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.10", 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'), ...(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: "21.2.10", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.10", 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,
+                    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';
+        }, ...(ngDevMode ? [{ debugName: "_wrap" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", 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: "21.2.10", 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-show-hide.directives.ts  (Angular 21 — signals)
+ *
+ * [fxShow] / [fxHide]  — responsive visibility via display:none.
+ * Elements stay in the DOM (unlike *ifBp which removes them).
+ *
+ * IMPORTANT: fxShow and fxHide are implemented as a SINGLE directive class
+ * (FxShowHideDirective) so that mixed patterns like
+ *   <div fxHide fxShow.xs>          ← hidden everywhere, shown on xs
+ *   <div fxShow fxHide.lt-lg>       ← shown everywhere, hidden below lg
+ * work correctly.
+ *
+ * Resolution algorithm (no mobile-first cascade — semantics for show/hide
+ * are point-in-time, not cumulative):
+ *   1. Non-canonical (lt-*, gt-*, *-up, *-down) isActive checks — most specific first
+ *   2. Exact canonical match for current bp
+ *   3. Default values (fxShow / fxHide without suffix)
+ *   4. Fallback: visible (true)
+ *
+ * When both show and hide match at the same priority level, show wins.
+ *
+ * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
+ */
+function toBool(v) {
+    if (v === undefined || v === null)
+        return undefined;
+    if (typeof v === 'boolean')
+        return v;
+    if (v === '')
+        return true;
+    if (v === 'false' || v === '0')
+        return false;
+    return true;
+}
+// ─── Unified fxShow + fxHide ─────────────────────────────────────────────────
+class FxShowHideDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        // ── fxShow inputs ─────────────────────────────────────────────────────────
+        this.fxShow = input(undefined, { ...(ngDevMode ? { debugName: "fxShow" } : /* istanbul ignore next */ {}), alias: 'fxShow', transform: toBool });
+        this.showXs = input(undefined, { ...(ngDevMode ? { debugName: "showXs" } : /* istanbul ignore next */ {}), alias: 'fxShow.xs', transform: toBool });
+        this.showSm = input(undefined, { ...(ngDevMode ? { debugName: "showSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.sm', transform: toBool });
+        this.showMd = input(undefined, { ...(ngDevMode ? { debugName: "showMd" } : /* istanbul ignore next */ {}), alias: 'fxShow.md', transform: toBool });
+        this.showLg = input(undefined, { ...(ngDevMode ? { debugName: "showLg" } : /* istanbul ignore next */ {}), alias: 'fxShow.lg', transform: toBool });
+        this.showXl = input(undefined, { ...(ngDevMode ? { debugName: "showXl" } : /* istanbul ignore next */ {}), alias: 'fxShow.xl', transform: toBool });
+        this.showXxl = input(undefined, { ...(ngDevMode ? { debugName: "showXxl" } : /* istanbul ignore next */ {}), alias: 'fxShow.xxl', transform: toBool });
+        this.showLtSm = input(undefined, { ...(ngDevMode ? { debugName: "showLtSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-sm', transform: toBool });
+        this.showLtMd = input(undefined, { ...(ngDevMode ? { debugName: "showLtMd" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-md', transform: toBool });
+        this.showLtLg = input(undefined, { ...(ngDevMode ? { debugName: "showLtLg" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-lg', transform: toBool });
+        this.showLtXl = input(undefined, { ...(ngDevMode ? { debugName: "showLtXl" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-xl', transform: toBool });
+        this.showLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "showLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxShow.lt-xxl', transform: toBool });
+        this.showGtXs = input(undefined, { ...(ngDevMode ? { debugName: "showGtXs" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-xs', transform: toBool });
+        this.showGtSm = input(undefined, { ...(ngDevMode ? { debugName: "showGtSm" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-sm', transform: toBool });
         this.showGtMd = input(undefined, { ...(ngDevMode ? { debugName: "showGtMd" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-md', transform: toBool });
         this.showGtLg = input(undefined, { ...(ngDevMode ? { debugName: "showGtLg" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-lg', transform: toBool });
         this.showGtXl = input(undefined, { ...(ngDevMode ? { debugName: "showGtXl" } : /* istanbul ignore next */ {}), alias: 'fxShow.gt-xl', transform: toBool });
@@ -2283,556 +2720,90 @@ class FxShowHideDirective extends ResponsiveBaseDirective {
             // 3. Default values (fxShow / fxHide without suffix)
             const showDef = this.fxShow();
             const hideDef = this.fxHide();
-            if (showDef !== undefined)
-                return showDef;
-            if (hideDef !== undefined)
-                return !hideDef;
-            // 4. Neither directive active → visible
-            return true;
-        }, ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            this._visible()
-                ? this.r2.removeStyle(this.el.nativeElement, 'display')
-                : this.r2.setStyle(this.el.nativeElement, 'display', 'none');
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxShowHideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxShowHideDirective, isStandalone: true, selector: "\n    [fxShow],[fxHide],\n    [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],\n    [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],\n    [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],\n    [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],\n    [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down],\n    [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],\n    [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],\n    [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],\n    [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],\n    [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]\n  ", inputs: { fxShow: { classPropertyName: "fxShow", publicName: "fxShow", isSignal: true, isRequired: false, transformFunction: null }, showXs: { classPropertyName: "showXs", publicName: "fxShow.xs", isSignal: true, isRequired: false, transformFunction: null }, showSm: { classPropertyName: "showSm", publicName: "fxShow.sm", isSignal: true, isRequired: false, transformFunction: null }, showMd: { classPropertyName: "showMd", publicName: "fxShow.md", isSignal: true, isRequired: false, transformFunction: null }, showLg: { classPropertyName: "showLg", publicName: "fxShow.lg", isSignal: true, isRequired: false, transformFunction: null }, showXl: { classPropertyName: "showXl", publicName: "fxShow.xl", isSignal: true, isRequired: false, transformFunction: null }, showXxl: { classPropertyName: "showXxl", publicName: "fxShow.xxl", isSignal: true, isRequired: false, transformFunction: null }, showLtSm: { classPropertyName: "showLtSm", publicName: "fxShow.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, showLtMd: { classPropertyName: "showLtMd", publicName: "fxShow.lt-md", isSignal: true, isRequired: false, transformFunction: null }, showLtLg: { classPropertyName: "showLtLg", publicName: "fxShow.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, showLtXl: { classPropertyName: "showLtXl", publicName: "fxShow.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, showLtXxl: { classPropertyName: "showLtXxl", publicName: "fxShow.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, showGtXs: { classPropertyName: "showGtXs", publicName: "fxShow.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, showGtSm: { classPropertyName: "showGtSm", publicName: "fxShow.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, showGtMd: { classPropertyName: "showGtMd", publicName: "fxShow.gt-md", isSignal: true, isRequired: false, transformFunction: null }, showGtLg: { classPropertyName: "showGtLg", publicName: "fxShow.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, showGtXl: { classPropertyName: "showGtXl", publicName: "fxShow.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, showSmUp: { classPropertyName: "showSmUp", publicName: "fxShow.sm-up", isSignal: true, isRequired: false, transformFunction: null }, showMdUp: { classPropertyName: "showMdUp", publicName: "fxShow.md-up", isSignal: true, isRequired: false, transformFunction: null }, showLgUp: { classPropertyName: "showLgUp", publicName: "fxShow.lg-up", isSignal: true, isRequired: false, transformFunction: null }, showXlUp: { classPropertyName: "showXlUp", publicName: "fxShow.xl-up", isSignal: true, isRequired: false, transformFunction: null }, showXxlUp: { classPropertyName: "showXxlUp", publicName: "fxShow.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, showSmDown: { classPropertyName: "showSmDown", publicName: "fxShow.sm-down", isSignal: true, isRequired: false, transformFunction: null }, showMdDown: { classPropertyName: "showMdDown", publicName: "fxShow.md-down", isSignal: true, isRequired: false, transformFunction: null }, showLgDown: { classPropertyName: "showLgDown", publicName: "fxShow.lg-down", isSignal: true, isRequired: false, transformFunction: null }, showXlDown: { classPropertyName: "showXlDown", publicName: "fxShow.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxHide: { classPropertyName: "fxHide", publicName: "fxHide", isSignal: true, isRequired: false, transformFunction: null }, hideXs: { classPropertyName: "hideXs", publicName: "fxHide.xs", isSignal: true, isRequired: false, transformFunction: null }, hideSm: { classPropertyName: "hideSm", publicName: "fxHide.sm", isSignal: true, isRequired: false, transformFunction: null }, hideMd: { classPropertyName: "hideMd", publicName: "fxHide.md", isSignal: true, isRequired: false, transformFunction: null }, hideLg: { classPropertyName: "hideLg", publicName: "fxHide.lg", isSignal: true, isRequired: false, transformFunction: null }, hideXl: { classPropertyName: "hideXl", publicName: "fxHide.xl", isSignal: true, isRequired: false, transformFunction: null }, hideXxl: { classPropertyName: "hideXxl", publicName: "fxHide.xxl", isSignal: true, isRequired: false, transformFunction: null }, hideLtSm: { classPropertyName: "hideLtSm", publicName: "fxHide.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, hideLtMd: { classPropertyName: "hideLtMd", publicName: "fxHide.lt-md", isSignal: true, isRequired: false, transformFunction: null }, hideLtLg: { classPropertyName: "hideLtLg", publicName: "fxHide.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, hideLtXl: { classPropertyName: "hideLtXl", publicName: "fxHide.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, hideLtXxl: { classPropertyName: "hideLtXxl", publicName: "fxHide.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, hideGtXs: { classPropertyName: "hideGtXs", publicName: "fxHide.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, hideGtSm: { classPropertyName: "hideGtSm", publicName: "fxHide.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, hideGtMd: { classPropertyName: "hideGtMd", publicName: "fxHide.gt-md", isSignal: true, isRequired: false, transformFunction: null }, hideGtLg: { classPropertyName: "hideGtLg", publicName: "fxHide.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, hideGtXl: { classPropertyName: "hideGtXl", publicName: "fxHide.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, hideSmUp: { classPropertyName: "hideSmUp", publicName: "fxHide.sm-up", isSignal: true, isRequired: false, transformFunction: null }, hideMdUp: { classPropertyName: "hideMdUp", publicName: "fxHide.md-up", isSignal: true, isRequired: false, transformFunction: null }, hideLgUp: { classPropertyName: "hideLgUp", publicName: "fxHide.lg-up", isSignal: true, isRequired: false, transformFunction: null }, hideXlUp: { classPropertyName: "hideXlUp", publicName: "fxHide.xl-up", isSignal: true, isRequired: false, transformFunction: null }, hideXxlUp: { classPropertyName: "hideXxlUp", publicName: "fxHide.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, hideSmDown: { classPropertyName: "hideSmDown", publicName: "fxHide.sm-down", isSignal: true, isRequired: false, transformFunction: null }, hideMdDown: { classPropertyName: "hideMdDown", publicName: "fxHide.md-down", isSignal: true, isRequired: false, transformFunction: null }, hideLgDown: { classPropertyName: "hideLgDown", publicName: "fxHide.lg-down", isSignal: true, isRequired: false, transformFunction: null }, hideXlDown: { classPropertyName: "hideXlDown", publicName: "fxHide.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow", required: false }] }], showXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xs", required: false }] }], showSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm", required: false }] }], showMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md", required: false }] }], showLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg", required: false }] }], showXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl", required: false }] }], showXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl", required: false }] }], showLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-sm", required: false }] }], showLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-md", required: false }] }], showLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-lg", required: false }] }], showLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xl", required: false }] }], showLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xxl", required: false }] }], showGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xs", required: false }] }], showGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-sm", required: false }] }], showGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-md", required: false }] }], showGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-lg", required: false }] }], showGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xl", required: false }] }], showSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-up", required: false }] }], showMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-up", required: false }] }], showLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-up", required: false }] }], showXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-up", required: false }] }], showXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl-up", required: false }] }], showSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-down", required: false }] }], showMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-down", required: false }] }], showLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-down", required: false }] }], showXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-down", required: false }] }], fxHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide", required: false }] }], hideXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xs", required: false }] }], hideSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm", required: false }] }], hideMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md", required: false }] }], hideLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg", required: false }] }], hideXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl", required: false }] }], hideXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl", required: false }] }], hideLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-sm", required: false }] }], hideLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-md", required: false }] }], hideLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-lg", required: false }] }], hideLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xl", required: false }] }], hideLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xxl", required: false }] }], hideGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xs", required: false }] }], hideGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-sm", required: false }] }], hideGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-md", required: false }] }], hideGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-lg", required: false }] }], hideGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xl", required: false }] }], hideSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-up", required: false }] }], hideMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-up", required: false }] }], hideLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-up", required: false }] }], hideXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-up", required: false }] }], hideXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl-up", required: false }] }], hideSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-down", required: false }] }], hideMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-down", required: false }] }], hideLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-down", required: false }] }], hideXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-down", required: false }] }] } });
-
-/**
- * @file fx-style-class.directives.ts  (Angular 21 — signals)
- *
- * [fxStyle]  — responsive inline style binding (Record<string,string>)
- * [fxClass]  — responsive CSS class binding (string | string[] | Record<string,boolean>)
- *
- * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • computed() derives resolved StyleMap / ClassInput value
- *   • effect() in constructor handles DOM writes with diff
- *
- * Style/class leak prevention:
- *   _appliedProps / _appliedClasses are regular Set<string> fields
- *   (NOT signals) — they track what was actively applied so the
- *   effect can remove stale properties/classes on the next run.
- *
- * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
- */
-class FxStyleDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        this.fxStyle = input(undefined, { ...(ngDevMode ? { debugName: "fxStyle" } : /* istanbul ignore next */ {}), alias: 'fxStyle' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl-down' });
-        this._resolved = computed(() => (resolveAll({ default: this.fxStyle(), 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)) ?? {}), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
-        /** Tracks which CSS properties were last applied — plain field, not a signal. */
-        this._appliedProps = new Set();
-        effect(() => {
-            if (!this.isBrowser)
-                return;
-            const next = this._resolved();
-            const nextKeys = new Set(Object.keys(next));
-            for (const prop of this._appliedProps) {
-                if (!nextKeys.has(prop))
-                    this.r2.removeStyle(this.el.nativeElement, prop);
-            }
-            for (const [prop, value] of Object.entries(next)) {
-                this.r2.setStyle(this.el.nativeElement, prop, value);
-            }
-            this._appliedProps = nextKeys;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxStyleDirective, isStandalone: true, selector: "\n    [fxStyle],\n    [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],\n    [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],\n    [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],\n    [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],\n    [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]\n  ", inputs: { fxStyle: { classPropertyName: "fxStyle", publicName: "fxStyle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxStyle.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxStyle.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxStyle.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxStyle.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxStyle.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxStyle.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxStyle.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxStyle.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxStyle.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxStyle.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxStyle.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxStyle.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxStyle.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxStyle.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxStyle.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxStyle.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxStyle.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxStyle.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxStyle.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxStyle.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxStyle.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxStyle.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxStyle.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxStyle.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxStyle.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-down", required: false }] }] } });
-function toClassSet(v) {
-    if (!v)
-        return new Set();
-    if (typeof v === 'string')
-        return new Set(v.split(/\s+/).filter(Boolean));
-    if (Array.isArray(v))
-        return new Set(v.filter(Boolean));
-    return new Set(Object.entries(v).filter(([, on]) => on).map(([cls]) => cls));
-}
-class FxClassDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        this.fxClass = input(undefined, { ...(ngDevMode ? { debugName: "fxClass" } : /* istanbul ignore next */ {}), alias: 'fxClass' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxClass.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxClass.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxClass.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl-down' });
-        this._resolved = computed(() => toClassSet(resolveAll({ default: this.fxClass(), 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))), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
-        /** Tracks which CSS classes were last applied — plain field, not a signal. */
-        this._appliedClasses = new Set();
-        effect(() => {
-            if (!this.isBrowser)
-                return;
-            const next = this._resolved();
-            for (const cls of this._appliedClasses) {
-                if (!next.has(cls))
-                    this.r2.removeClass(this.el.nativeElement, cls);
-            }
-            for (const cls of next) {
-                this.r2.addClass(this.el.nativeElement, cls);
-            }
-            this._appliedClasses = next;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxClassDirective, isStandalone: true, selector: "\n    [fxClass],\n    [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],\n    [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],\n    [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],\n    [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],\n    [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]\n  ", inputs: { fxClass: { classPropertyName: "fxClass", publicName: "fxClass", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxClass.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxClass.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxClass.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxClass.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxClass.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxClass.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxClass.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxClass.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxClass.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxClass.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxClass.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxClass.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxClass.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxClass.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxClass.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxClass.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxClass.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxClass.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxClass.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxClass.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxClass.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxClass.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxClass.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxClass.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxClass.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-down", required: false }] }] } });
-
-/**
- * @file fx-flex.directive.ts  (Angular 21 — signals)
- *
- * [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
- *
- * 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)
- *
- * 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
- */
-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}`;
-}
-/** Returns true if any sibling element in the same parent has fxFlex="*" */
-function parentHasStar(el) {
-    const parent = el.parentElement;
-    if (!parent)
-        return false;
-    return Array.from(parent.children).some(c => c !== el && (c.getAttribute('fxflex') === '*' || c.getAttribute('fxFlex') === '*'));
-}
-class FxFlexDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        // ── Canonical signal inputs ───────────────────────────────────────────────
-        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' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlex.md' });
-        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(),
-            '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)), ...(ngDevMode ? [{ debugName: "_rawFlex" }] : /* istanbul ignore next */ []));
-        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.
-            if (raw === undefined) {
-                this.safeSetStyle('flex', null);
-                this.safeSetStyle('box-sizing', null);
-                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');
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxFlexDirective, isStandalone: true, selector: "\n    [fxFlex],\n    [fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],\n    [fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],\n    [fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],\n    [fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],\n    [fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]\n  ", inputs: { fxFlex: { classPropertyName: "fxFlex", publicName: "fxFlex", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlex.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlex.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlex.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlex.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlex.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlex.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlex.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlex.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlex.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlex.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlex.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlex.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlex.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlex.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlex.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlex.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlex.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlex.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlex.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlex.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlex.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlex.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlex.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlex.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlex.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxFlexDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: `
-    [fxFlex],
-    [fxFlex.xs],[fxFlex.sm],[fxFlex.md],[fxFlex.lg],[fxFlex.xl],[fxFlex.xxl],
-    [fxFlex.lt-sm],[fxFlex.lt-md],[fxFlex.lt-lg],[fxFlex.lt-xl],[fxFlex.lt-xxl],
-    [fxFlex.gt-xs],[fxFlex.gt-sm],[fxFlex.gt-md],[fxFlex.gt-lg],[fxFlex.gt-xl],
-    [fxFlex.sm-up],[fxFlex.md-up],[fxFlex.lg-up],[fxFlex.xl-up],[fxFlex.xxl-up],
-    [fxFlex.sm-down],[fxFlex.md-down],[fxFlex.lg-down],[fxFlex.xl-down]
-  `,
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [], propDecorators: { fxFlex: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlex.xl-down", required: false }] }] } });
-
-/**
- * @file fx-grid.directives.ts  (Angular 21 — signals)
- *
- * CSS Grid responsive directives.
- *
- *  [fxGrid]        — display:grid + responsive grid-template-columns.
- *                    Accepts [fxGridRows] and [fxGridGap] inputs on same host.
- *  [fxGridColumn]  — grid-column on a child
- *  [fxGridArea]    — grid-area on a child
- *
- * Angular 21 changes:
- *   • All @Input setters replaced by input() signals
- *   • FxGridDirective uses 3 pairs of computed() for cols/rows/gap maps
- *   • Single effect() in constructor writes all 3 CSS props
- *   • Null/undefined props are removed (no style leak)
- *
- * Unitless numeric gap values are normalized to px ("16" → "16px").
- *
- * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
- */
-function normalizeGap(raw) {
-    if (!raw)
-        return undefined;
-    return raw.trim().split(/\s+/)
-        .map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
-        .join(' ');
-}
-// ─── fxGrid (container) ──────────────────────────────────────────────────────
-class FxGridDirective extends ResponsiveBaseDirective {
-    constructor() {
-        super();
-        // ── grid-template-columns ──────────────────────────────────────────────────
-        this.fxGrid = input(undefined, { ...(ngDevMode ? { debugName: "fxGrid" } : /* istanbul ignore next */ {}), alias: 'fxGrid' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGrid.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGrid.xl-down' });
-        // ── grid-template-rows ────────────────────────────────────────────────────
-        this.fxGridRows = input(undefined, { ...(ngDevMode ? { debugName: "fxGridRows" } : /* istanbul ignore next */ {}), alias: 'fxGridRows' });
-        this.rowsXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsXs" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xs' });
-        this.rowsSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm' });
-        this.rowsMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md' });
-        this.rowsLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg' });
-        this.rowsXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl' });
-        this.rowsXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xxl' });
-        this.rowsLtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-sm' });
-        this.rowsLtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-md' });
-        this.rowsLtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-lg' });
-        this.rowsLtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-xl' });
-        this.rowsLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "rowsLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lt-xxl' });
-        this.rowsGtXs = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-xs' });
-        this.rowsGtSm = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-sm' });
-        this.rowsGtMd = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-md' });
-        this.rowsGtLg = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-lg' });
-        this.rowsGtXl = input(undefined, { ...(ngDevMode ? { debugName: "rowsGtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.gt-xl' });
-        this.rowsSmUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm-up' });
-        this.rowsMdUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md-up' });
-        this.rowsLgUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg-up' });
-        this.rowsXlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl-up' });
-        this.rowsXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "rowsXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xxl-up' });
-        this.rowsSmDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsSmDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.sm-down' });
-        this.rowsMdDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsMdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.md-down' });
-        this.rowsLgDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsLgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.lg-down' });
-        this.rowsXlDown = input(undefined, { ...(ngDevMode ? { debugName: "rowsXlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridRows.xl-down' });
-        // ── gap ───────────────────────────────────────────────────────────────────
-        this.fxGridGap = input(undefined, { ...(ngDevMode ? { debugName: "fxGridGap" } : /* istanbul ignore next */ {}), alias: 'fxGridGap' });
-        this.gapXs = input(undefined, { ...(ngDevMode ? { debugName: "gapXs" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xs' });
-        this.gapSm = input(undefined, { ...(ngDevMode ? { debugName: "gapSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm' });
-        this.gapMd = input(undefined, { ...(ngDevMode ? { debugName: "gapMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md' });
-        this.gapLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg' });
-        this.gapXl = input(undefined, { ...(ngDevMode ? { debugName: "gapXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl' });
-        this.gapXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xxl' });
-        this.gapLtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapLtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-sm' });
-        this.gapLtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapLtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-md' });
-        this.gapLtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapLtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-lg' });
-        this.gapLtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-xl' });
-        this.gapLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "gapLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lt-xxl' });
-        this.gapGtXs = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-xs' });
-        this.gapGtSm = input(undefined, { ...(ngDevMode ? { debugName: "gapGtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-sm' });
-        this.gapGtMd = input(undefined, { ...(ngDevMode ? { debugName: "gapGtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-md' });
-        this.gapGtLg = input(undefined, { ...(ngDevMode ? { debugName: "gapGtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-lg' });
-        this.gapGtXl = input(undefined, { ...(ngDevMode ? { debugName: "gapGtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.gt-xl' });
-        this.gapSmUp = input(undefined, { ...(ngDevMode ? { debugName: "gapSmUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm-up' });
-        this.gapMdUp = input(undefined, { ...(ngDevMode ? { debugName: "gapMdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md-up' });
-        this.gapLgUp = input(undefined, { ...(ngDevMode ? { debugName: "gapLgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg-up' });
-        this.gapXlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl-up' });
-        this.gapXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "gapXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xxl-up' });
-        this.gapSmDown = input(undefined, { ...(ngDevMode ? { debugName: "gapSmDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.sm-down' });
-        this.gapMdDown = input(undefined, { ...(ngDevMode ? { debugName: "gapMdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.md-down' });
-        this.gapLgDown = input(undefined, { ...(ngDevMode ? { debugName: "gapLgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.lg-down' });
-        this.gapXlDown = input(undefined, { ...(ngDevMode ? { debugName: "gapXlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridGap.xl-down' });
-        // ── resolved values (flat computed — no intermediate object computed) ──────
-        this._cols = computed(() => resolveAll({ default: this.fxGrid(), 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)), ...(ngDevMode ? [{ debugName: "_cols" }] : /* istanbul ignore next */ []));
-        this._rows = computed(() => resolveAll({ default: this.fxGridRows(), xs: this.rowsXs(), sm: this.rowsSm(),
-            md: this.rowsMd(), lg: this.rowsLg(), xl: this.rowsXl(), xxl: this.rowsXxl() }, { 'lt-sm': this.rowsLtSm(), 'lt-md': this.rowsLtMd(), 'lt-lg': this.rowsLtLg(),
-            'lt-xl': this.rowsLtXl(), 'lt-xxl': this.rowsLtXxl(),
-            'gt-xs': this.rowsGtXs(), 'gt-sm': this.rowsGtSm(), 'gt-md': this.rowsGtMd(),
-            'gt-lg': this.rowsGtLg(), 'gt-xl': this.rowsGtXl(),
-            'sm-up': this.rowsSmUp(), 'md-up': this.rowsMdUp(), 'lg-up': this.rowsLgUp(),
-            'xl-up': this.rowsXlUp(), 'xxl-up': this.rowsXxlUp(),
-            'sm-down': this.rowsSmDown(), 'md-down': this.rowsMdDown(),
-            'lg-down': this.rowsLgDown(), 'xl-down': this.rowsXlDown() }, this.media.currentBp(), a => this.media.isActive(a)), ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
-        this._gap = computed(() => normalizeGap(resolveAll({ default: this.fxGridGap(), xs: this.gapXs(), sm: this.gapSm(),
-            md: this.gapMd(), lg: this.gapLg(), xl: this.gapXl(), xxl: this.gapXxl() }, { 'lt-sm': this.gapLtSm(), 'lt-md': this.gapLtMd(), 'lt-lg': this.gapLtLg(),
-            'lt-xl': this.gapLtXl(), 'lt-xxl': this.gapLtXxl(),
-            'gt-xs': this.gapGtXs(), 'gt-sm': this.gapGtSm(), 'gt-md': this.gapGtMd(),
-            'gt-lg': this.gapGtLg(), 'gt-xl': this.gapGtXl(),
-            'sm-up': this.gapSmUp(), 'md-up': this.gapMdUp(), 'lg-up': this.gapLgUp(),
-            'xl-up': this.gapXlUp(), 'xxl-up': this.gapXxlUp(),
-            'sm-down': this.gapSmDown(), 'md-down': this.gapMdDown(),
-            'lg-down': this.gapLgDown(), 'xl-down': this.gapXlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_gap" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            const cols = this._cols();
-            const rows = this._rows();
-            const gap = this._gap();
-            cols ? this.safeSetStyle('grid-template-columns', cols)
-                : this.r2.removeStyle(this.el.nativeElement, 'grid-template-columns');
-            rows ? this.safeSetStyle('grid-template-rows', rows)
-                : this.r2.removeStyle(this.el.nativeElement, 'grid-template-rows');
-            gap ? this.safeSetStyle('gap', gap)
-                : this.r2.removeStyle(this.el.nativeElement, 'gap');
+            if (showDef !== undefined)
+                return showDef;
+            if (hideDef !== undefined)
+                return !hideDef;
+            // 4. Neither directive active → visible
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "_visible" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this._visible()
+                ? this.r2.removeStyle(this.el.nativeElement, 'display')
+                : this.r2.setStyle(this.el.nativeElement, 'display', 'none');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridDirective, isStandalone: true, selector: "\n    [fxGrid],\n    [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],\n    [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],\n    [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],\n    [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],\n    [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]\n  ", inputs: { fxGrid: { classPropertyName: "fxGrid", publicName: "fxGrid", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGrid.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGrid.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGrid.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGrid.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGrid.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGrid.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGrid.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGrid.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGrid.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGrid.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGrid.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGrid.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGrid.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGrid.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGrid.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGrid.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGrid.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGrid.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGrid.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGrid.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGrid.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGrid.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGrid.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGrid.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGrid.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridRows: { classPropertyName: "fxGridRows", publicName: "fxGridRows", isSignal: true, isRequired: false, transformFunction: null }, rowsXs: { classPropertyName: "rowsXs", publicName: "fxGridRows.xs", isSignal: true, isRequired: false, transformFunction: null }, rowsSm: { classPropertyName: "rowsSm", publicName: "fxGridRows.sm", isSignal: true, isRequired: false, transformFunction: null }, rowsMd: { classPropertyName: "rowsMd", publicName: "fxGridRows.md", isSignal: true, isRequired: false, transformFunction: null }, rowsLg: { classPropertyName: "rowsLg", publicName: "fxGridRows.lg", isSignal: true, isRequired: false, transformFunction: null }, rowsXl: { classPropertyName: "rowsXl", publicName: "fxGridRows.xl", isSignal: true, isRequired: false, transformFunction: null }, rowsXxl: { classPropertyName: "rowsXxl", publicName: "fxGridRows.xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtSm: { classPropertyName: "rowsLtSm", publicName: "fxGridRows.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsLtMd: { classPropertyName: "rowsLtMd", publicName: "fxGridRows.lt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsLtLg: { classPropertyName: "rowsLtLg", publicName: "fxGridRows.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXl: { classPropertyName: "rowsLtXl", publicName: "fxGridRows.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsLtXxl: { classPropertyName: "rowsLtXxl", publicName: "fxGridRows.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXs: { classPropertyName: "rowsGtXs", publicName: "fxGridRows.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, rowsGtSm: { classPropertyName: "rowsGtSm", publicName: "fxGridRows.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, rowsGtMd: { classPropertyName: "rowsGtMd", publicName: "fxGridRows.gt-md", isSignal: true, isRequired: false, transformFunction: null }, rowsGtLg: { classPropertyName: "rowsGtLg", publicName: "fxGridRows.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, rowsGtXl: { classPropertyName: "rowsGtXl", publicName: "fxGridRows.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, rowsSmUp: { classPropertyName: "rowsSmUp", publicName: "fxGridRows.sm-up", isSignal: true, isRequired: false, transformFunction: null }, rowsMdUp: { classPropertyName: "rowsMdUp", publicName: "fxGridRows.md-up", isSignal: true, isRequired: false, transformFunction: null }, rowsLgUp: { classPropertyName: "rowsLgUp", publicName: "fxGridRows.lg-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXlUp: { classPropertyName: "rowsXlUp", publicName: "fxGridRows.xl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsXxlUp: { classPropertyName: "rowsXxlUp", publicName: "fxGridRows.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, rowsSmDown: { classPropertyName: "rowsSmDown", publicName: "fxGridRows.sm-down", isSignal: true, isRequired: false, transformFunction: null }, rowsMdDown: { classPropertyName: "rowsMdDown", publicName: "fxGridRows.md-down", isSignal: true, isRequired: false, transformFunction: null }, rowsLgDown: { classPropertyName: "rowsLgDown", publicName: "fxGridRows.lg-down", isSignal: true, isRequired: false, transformFunction: null }, rowsXlDown: { classPropertyName: "rowsXlDown", publicName: "fxGridRows.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxGridGap: { classPropertyName: "fxGridGap", publicName: "fxGridGap", isSignal: true, isRequired: false, transformFunction: null }, gapXs: { classPropertyName: "gapXs", publicName: "fxGridGap.xs", isSignal: true, isRequired: false, transformFunction: null }, gapSm: { classPropertyName: "gapSm", publicName: "fxGridGap.sm", isSignal: true, isRequired: false, transformFunction: null }, gapMd: { classPropertyName: "gapMd", publicName: "fxGridGap.md", isSignal: true, isRequired: false, transformFunction: null }, gapLg: { classPropertyName: "gapLg", publicName: "fxGridGap.lg", isSignal: true, isRequired: false, transformFunction: null }, gapXl: { classPropertyName: "gapXl", publicName: "fxGridGap.xl", isSignal: true, isRequired: false, transformFunction: null }, gapXxl: { classPropertyName: "gapXxl", publicName: "fxGridGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, gapLtSm: { classPropertyName: "gapLtSm", publicName: "fxGridGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapLtMd: { classPropertyName: "gapLtMd", publicName: "fxGridGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, gapLtLg: { classPropertyName: "gapLtLg", publicName: "fxGridGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapLtXl: { classPropertyName: "gapLtXl", publicName: "fxGridGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapLtXxl: { classPropertyName: "gapLtXxl", publicName: "fxGridGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gapGtXs: { classPropertyName: "gapGtXs", publicName: "fxGridGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gapGtSm: { classPropertyName: "gapGtSm", publicName: "fxGridGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gapGtMd: { classPropertyName: "gapGtMd", publicName: "fxGridGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gapGtLg: { classPropertyName: "gapGtLg", publicName: "fxGridGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gapGtXl: { classPropertyName: "gapGtXl", publicName: "fxGridGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, gapSmUp: { classPropertyName: "gapSmUp", publicName: "fxGridGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, gapMdUp: { classPropertyName: "gapMdUp", publicName: "fxGridGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, gapLgUp: { classPropertyName: "gapLgUp", publicName: "fxGridGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, gapXlUp: { classPropertyName: "gapXlUp", publicName: "fxGridGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, gapXxlUp: { classPropertyName: "gapXxlUp", publicName: "fxGridGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, gapSmDown: { classPropertyName: "gapSmDown", publicName: "fxGridGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, gapMdDown: { classPropertyName: "gapMdDown", publicName: "fxGridGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, gapLgDown: { classPropertyName: "gapLgDown", publicName: "fxGridGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, gapXlDown: { classPropertyName: "gapXlDown", publicName: "fxGridGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"grid\"" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxShowHideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxShowHideDirective, isStandalone: true, selector: "\n    [fxShow],[fxHide],\n    [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],\n    [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],\n    [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],\n    [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],\n    [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down],\n    [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],\n    [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],\n    [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],\n    [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],\n    [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]\n  ", inputs: { fxShow: { classPropertyName: "fxShow", publicName: "fxShow", isSignal: true, isRequired: false, transformFunction: null }, showXs: { classPropertyName: "showXs", publicName: "fxShow.xs", isSignal: true, isRequired: false, transformFunction: null }, showSm: { classPropertyName: "showSm", publicName: "fxShow.sm", isSignal: true, isRequired: false, transformFunction: null }, showMd: { classPropertyName: "showMd", publicName: "fxShow.md", isSignal: true, isRequired: false, transformFunction: null }, showLg: { classPropertyName: "showLg", publicName: "fxShow.lg", isSignal: true, isRequired: false, transformFunction: null }, showXl: { classPropertyName: "showXl", publicName: "fxShow.xl", isSignal: true, isRequired: false, transformFunction: null }, showXxl: { classPropertyName: "showXxl", publicName: "fxShow.xxl", isSignal: true, isRequired: false, transformFunction: null }, showLtSm: { classPropertyName: "showLtSm", publicName: "fxShow.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, showLtMd: { classPropertyName: "showLtMd", publicName: "fxShow.lt-md", isSignal: true, isRequired: false, transformFunction: null }, showLtLg: { classPropertyName: "showLtLg", publicName: "fxShow.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, showLtXl: { classPropertyName: "showLtXl", publicName: "fxShow.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, showLtXxl: { classPropertyName: "showLtXxl", publicName: "fxShow.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, showGtXs: { classPropertyName: "showGtXs", publicName: "fxShow.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, showGtSm: { classPropertyName: "showGtSm", publicName: "fxShow.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, showGtMd: { classPropertyName: "showGtMd", publicName: "fxShow.gt-md", isSignal: true, isRequired: false, transformFunction: null }, showGtLg: { classPropertyName: "showGtLg", publicName: "fxShow.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, showGtXl: { classPropertyName: "showGtXl", publicName: "fxShow.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, showSmUp: { classPropertyName: "showSmUp", publicName: "fxShow.sm-up", isSignal: true, isRequired: false, transformFunction: null }, showMdUp: { classPropertyName: "showMdUp", publicName: "fxShow.md-up", isSignal: true, isRequired: false, transformFunction: null }, showLgUp: { classPropertyName: "showLgUp", publicName: "fxShow.lg-up", isSignal: true, isRequired: false, transformFunction: null }, showXlUp: { classPropertyName: "showXlUp", publicName: "fxShow.xl-up", isSignal: true, isRequired: false, transformFunction: null }, showXxlUp: { classPropertyName: "showXxlUp", publicName: "fxShow.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, showSmDown: { classPropertyName: "showSmDown", publicName: "fxShow.sm-down", isSignal: true, isRequired: false, transformFunction: null }, showMdDown: { classPropertyName: "showMdDown", publicName: "fxShow.md-down", isSignal: true, isRequired: false, transformFunction: null }, showLgDown: { classPropertyName: "showLgDown", publicName: "fxShow.lg-down", isSignal: true, isRequired: false, transformFunction: null }, showXlDown: { classPropertyName: "showXlDown", publicName: "fxShow.xl-down", isSignal: true, isRequired: false, transformFunction: null }, fxHide: { classPropertyName: "fxHide", publicName: "fxHide", isSignal: true, isRequired: false, transformFunction: null }, hideXs: { classPropertyName: "hideXs", publicName: "fxHide.xs", isSignal: true, isRequired: false, transformFunction: null }, hideSm: { classPropertyName: "hideSm", publicName: "fxHide.sm", isSignal: true, isRequired: false, transformFunction: null }, hideMd: { classPropertyName: "hideMd", publicName: "fxHide.md", isSignal: true, isRequired: false, transformFunction: null }, hideLg: { classPropertyName: "hideLg", publicName: "fxHide.lg", isSignal: true, isRequired: false, transformFunction: null }, hideXl: { classPropertyName: "hideXl", publicName: "fxHide.xl", isSignal: true, isRequired: false, transformFunction: null }, hideXxl: { classPropertyName: "hideXxl", publicName: "fxHide.xxl", isSignal: true, isRequired: false, transformFunction: null }, hideLtSm: { classPropertyName: "hideLtSm", publicName: "fxHide.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, hideLtMd: { classPropertyName: "hideLtMd", publicName: "fxHide.lt-md", isSignal: true, isRequired: false, transformFunction: null }, hideLtLg: { classPropertyName: "hideLtLg", publicName: "fxHide.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, hideLtXl: { classPropertyName: "hideLtXl", publicName: "fxHide.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, hideLtXxl: { classPropertyName: "hideLtXxl", publicName: "fxHide.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, hideGtXs: { classPropertyName: "hideGtXs", publicName: "fxHide.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, hideGtSm: { classPropertyName: "hideGtSm", publicName: "fxHide.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, hideGtMd: { classPropertyName: "hideGtMd", publicName: "fxHide.gt-md", isSignal: true, isRequired: false, transformFunction: null }, hideGtLg: { classPropertyName: "hideGtLg", publicName: "fxHide.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, hideGtXl: { classPropertyName: "hideGtXl", publicName: "fxHide.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, hideSmUp: { classPropertyName: "hideSmUp", publicName: "fxHide.sm-up", isSignal: true, isRequired: false, transformFunction: null }, hideMdUp: { classPropertyName: "hideMdUp", publicName: "fxHide.md-up", isSignal: true, isRequired: false, transformFunction: null }, hideLgUp: { classPropertyName: "hideLgUp", publicName: "fxHide.lg-up", isSignal: true, isRequired: false, transformFunction: null }, hideXlUp: { classPropertyName: "hideXlUp", publicName: "fxHide.xl-up", isSignal: true, isRequired: false, transformFunction: null }, hideXxlUp: { classPropertyName: "hideXxlUp", publicName: "fxHide.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, hideSmDown: { classPropertyName: "hideSmDown", publicName: "fxHide.sm-down", isSignal: true, isRequired: false, transformFunction: null }, hideMdDown: { classPropertyName: "hideMdDown", publicName: "fxHide.md-down", isSignal: true, isRequired: false, transformFunction: null }, hideLgDown: { classPropertyName: "hideLgDown", publicName: "fxHide.lg-down", isSignal: true, isRequired: false, transformFunction: null }, hideXlDown: { classPropertyName: "hideXlDown", publicName: "fxHide.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxShowHideDirective, 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]
+    [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,
-                    host: { '[style.display]': '"grid"' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { fxGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGrid.xl-down", required: false }] }], fxGridRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows", required: false }] }], rowsXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xs", required: false }] }], rowsSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm", required: false }] }], rowsMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md", required: false }] }], rowsLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg", required: false }] }], rowsXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl", required: false }] }], rowsXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl", required: false }] }], rowsLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-sm", required: false }] }], rowsLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-md", required: false }] }], rowsLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-lg", required: false }] }], rowsLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xl", required: false }] }], rowsLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lt-xxl", required: false }] }], rowsGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xs", required: false }] }], rowsGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-sm", required: false }] }], rowsGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-md", required: false }] }], rowsGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-lg", required: false }] }], rowsGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.gt-xl", required: false }] }], rowsSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-up", required: false }] }], rowsMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-up", required: false }] }], rowsLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-up", required: false }] }], rowsXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-up", required: false }] }], rowsXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xxl-up", required: false }] }], rowsSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.sm-down", required: false }] }], rowsMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.md-down", required: false }] }], rowsLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.lg-down", required: false }] }], rowsXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridRows.xl-down", required: false }] }], fxGridGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap", required: false }] }], gapXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xs", required: false }] }], gapSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm", required: false }] }], gapMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md", required: false }] }], gapLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg", required: false }] }], gapXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl", required: false }] }], gapXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl", required: false }] }], gapLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-sm", required: false }] }], gapLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-md", required: false }] }], gapLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-lg", required: false }] }], gapLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xl", required: false }] }], gapLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lt-xxl", required: false }] }], gapGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xs", required: false }] }], gapGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-sm", required: false }] }], gapGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-md", required: false }] }], gapGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-lg", required: false }] }], gapGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.gt-xl", required: false }] }], gapSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-up", required: false }] }], gapMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-up", required: false }] }], gapLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-up", required: false }] }], gapXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-up", required: false }] }], gapXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xxl-up", required: false }] }], gapSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.sm-down", required: false }] }], gapMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.md-down", required: false }] }], gapLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.lg-down", required: false }] }], gapXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridGap.xl-down", required: false }] }] } });
-// ─── fxGridColumn ─────────────────────────────────────────────────────────────
-class FxGridColumnDirective extends ResponsiveBaseDirective {
+        }], ctorParameters: () => [], propDecorators: { fxShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow", required: false }] }], showXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xs", required: false }] }], showSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm", required: false }] }], showMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md", required: false }] }], showLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg", required: false }] }], showXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl", required: false }] }], showXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl", required: false }] }], showLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-sm", required: false }] }], showLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-md", required: false }] }], showLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-lg", required: false }] }], showLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xl", required: false }] }], showLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lt-xxl", required: false }] }], showGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xs", required: false }] }], showGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-sm", required: false }] }], showGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-md", required: false }] }], showGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-lg", required: false }] }], showGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.gt-xl", required: false }] }], showSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-up", required: false }] }], showMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-up", required: false }] }], showLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-up", required: false }] }], showXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-up", required: false }] }], showXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xxl-up", required: false }] }], showSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.sm-down", required: false }] }], showMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.md-down", required: false }] }], showLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.lg-down", required: false }] }], showXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxShow.xl-down", required: false }] }], fxHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide", required: false }] }], hideXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xs", required: false }] }], hideSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm", required: false }] }], hideMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md", required: false }] }], hideLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg", required: false }] }], hideXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl", required: false }] }], hideXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl", required: false }] }], hideLtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-sm", required: false }] }], hideLtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-md", required: false }] }], hideLtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-lg", required: false }] }], hideLtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xl", required: false }] }], hideLtXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lt-xxl", required: false }] }], hideGtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xs", required: false }] }], hideGtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-sm", required: false }] }], hideGtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-md", required: false }] }], hideGtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-lg", required: false }] }], hideGtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.gt-xl", required: false }] }], hideSmUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-up", required: false }] }], hideMdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-up", required: false }] }], hideLgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-up", required: false }] }], hideXlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-up", required: false }] }], hideXxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xxl-up", required: false }] }], hideSmDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.sm-down", required: false }] }], hideMdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.md-down", required: false }] }], hideLgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.lg-down", required: false }] }], hideXlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxHide.xl-down", required: false }] }] } });
+
+/**
+ * @file fx-style-class.directives.ts  (Angular 21 — signals)
+ *
+ * [fxStyle]  — responsive inline style binding (Record<string,string>)
+ * [fxClass]  — responsive CSS class binding (string | string[] | Record<string,boolean>)
+ *
+ * Angular 21 changes:
+ *   • All @Input setters replaced by input() signals
+ *   • computed() derives resolved StyleMap / ClassInput value
+ *   • effect() in constructor handles DOM writes with diff
+ *
+ * Style/class leak prevention:
+ *   _appliedProps / _appliedClasses are regular Set<string> fields
+ *   (NOT signals) — they track what was actively applied so the
+ *   effect can remove stale properties/classes on the next run.
+ *
+ * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
+ */
+class FxStyleDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        this.fxGridColumn = input(undefined, { ...(ngDevMode ? { debugName: "fxGridColumn" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridColumn.xl-down' });
-        this._resolved = computed(() => resolveAll({ default: this.fxGridColumn(), xs: this.xs(), sm: this.sm(),
+        this.fxStyle = input(undefined, { ...(ngDevMode ? { debugName: "fxStyle" } : /* istanbul ignore next */ {}), alias: 'fxStyle' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxStyle.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxStyle.xl-down' });
+        this._resolved = computed(() => (resolveAll({ default: this.fxStyle(), 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(),
@@ -2840,61 +2811,80 @@ class FxGridColumnDirective 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)), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? {}), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        /** Tracks which CSS properties were last applied — plain field, not a signal. */
+        this._appliedProps = new Set();
         effect(() => {
-            const v = this._resolved();
-            v ? this.safeSetStyle('grid-column', v)
-                : this.r2.removeStyle(this.el.nativeElement, 'grid-column');
+            if (!this.isBrowser)
+                return;
+            const next = this._resolved();
+            const nextKeys = new Set(Object.keys(next));
+            for (const prop of this._appliedProps) {
+                if (!nextKeys.has(prop))
+                    this.r2.removeStyle(this.el.nativeElement, prop);
+            }
+            for (const [prop, value] of Object.entries(next)) {
+                this.r2.setStyle(this.el.nativeElement, prop, value);
+            }
+            this._appliedProps = nextKeys;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridColumnDirective, isStandalone: true, selector: "\n    [fxGridColumn],\n    [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],\n    [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],\n    [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],\n    [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],\n    [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]\n  ", inputs: { fxGridColumn: { classPropertyName: "fxGridColumn", publicName: "fxGridColumn", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridColumn.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridColumn.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridColumn.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridColumn.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridColumn.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridColumn.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridColumn.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridColumn.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridColumn.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridColumn.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridColumn.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridColumn.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridColumn.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridColumn.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridColumn.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridColumn.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridColumn.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridColumn.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridColumn.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridColumn.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridColumn.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridColumn.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridColumn.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridColumn.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridColumn.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxStyleDirective, isStandalone: true, selector: "\n    [fxStyle],\n    [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],\n    [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],\n    [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],\n    [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],\n    [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]\n  ", inputs: { fxStyle: { classPropertyName: "fxStyle", publicName: "fxStyle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxStyle.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxStyle.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxStyle.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxStyle.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxStyle.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxStyle.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxStyle.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxStyle.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxStyle.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxStyle.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxStyle.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxStyle.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxStyle.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxStyle.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxStyle.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxStyle.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxStyle.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxStyle.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxStyle.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxStyle.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxStyle.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxStyle.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxStyle.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxStyle.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxStyle.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxStyleDirective, 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]
+    [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,
                 }]
-        }], ctorParameters: () => [], propDecorators: { fxGridColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridColumn.xl-down", required: false }] }] } });
-// ─── fxGridArea ───────────────────────────────────────────────────────────────
-class FxGridAreaDirective extends ResponsiveBaseDirective {
+        }], ctorParameters: () => [], propDecorators: { fxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxStyle.xl-down", required: false }] }] } });
+function toClassSet(v) {
+    if (!v)
+        return new Set();
+    if (typeof v === 'string')
+        return new Set(v.split(/\s+/).filter(Boolean));
+    if (Array.isArray(v))
+        return new Set(v.filter(Boolean));
+    return new Set(Object.entries(v).filter(([, on]) => on).map(([cls]) => cls));
+}
+class FxClassDirective extends ResponsiveBaseDirective {
     constructor() {
         super();
-        this.fxGridArea = input(undefined, { ...(ngDevMode ? { debugName: "fxGridArea" } : /* istanbul ignore next */ {}), alias: 'fxGridArea' });
-        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xs' });
-        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm' });
-        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md' });
-        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg' });
-        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl' });
-        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xxl' });
-        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-sm' });
-        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-md' });
-        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-lg' });
-        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-xl' });
-        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lt-xxl' });
-        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-xs' });
-        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-sm' });
-        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-md' });
-        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-lg' });
-        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.gt-xl' });
-        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm-up' });
-        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md-up' });
-        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg-up' });
-        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl-up' });
-        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xxl-up' });
-        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.sm-down' });
-        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.md-down' });
-        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.lg-down' });
-        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxGridArea.xl-down' });
-        this._resolved = computed(() => resolveAll({ default: this.fxGridArea(), xs: this.xs(), sm: this.sm(),
+        this.fxClass = input(undefined, { ...(ngDevMode ? { debugName: "fxClass" } : /* istanbul ignore next */ {}), alias: 'fxClass' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxClass.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxClass.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxClass.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxClass.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxClass.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxClass.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxClass.xl-down' });
+        this._resolved = computed(() => toClassSet(resolveAll({ default: this.fxClass(), 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(),
@@ -2902,30 +2892,40 @@ class FxGridAreaDirective 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)), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a))), ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        /** Tracks which CSS classes were last applied — plain field, not a signal. */
+        this._appliedClasses = new Set();
         effect(() => {
-            const v = this._resolved();
-            v ? this.safeSetStyle('grid-area', v)
-                : this.r2.removeStyle(this.el.nativeElement, 'grid-area');
+            if (!this.isBrowser)
+                return;
+            const next = this._resolved();
+            for (const cls of this._appliedClasses) {
+                if (!next.has(cls))
+                    this.r2.removeClass(this.el.nativeElement, cls);
+            }
+            for (const cls of next) {
+                this.r2.addClass(this.el.nativeElement, cls);
+            }
+            this._appliedClasses = next;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxGridAreaDirective, isStandalone: true, selector: "\n    [fxGridArea],\n    [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],\n    [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],\n    [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],\n    [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],\n    [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]\n  ", inputs: { fxGridArea: { classPropertyName: "fxGridArea", publicName: "fxGridArea", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxGridArea.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxGridArea.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxGridArea.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxGridArea.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxGridArea.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxGridArea.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxGridArea.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxGridArea.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxGridArea.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxGridArea.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxGridArea.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxGridArea.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxGridArea.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxGridArea.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxGridArea.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxGridArea.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxGridArea.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxGridArea.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxGridArea.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxGridArea.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxGridArea.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxGridArea.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxGridArea.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxGridArea.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxGridArea.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: FxClassDirective, isStandalone: true, selector: "\n    [fxClass],\n    [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],\n    [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],\n    [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],\n    [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],\n    [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]\n  ", inputs: { fxClass: { classPropertyName: "fxClass", publicName: "fxClass", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxClass.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxClass.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxClass.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxClass.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxClass.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxClass.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxClass.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxClass.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxClass.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxClass.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxClass.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxClass.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxClass.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxClass.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxClass.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxClass.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxClass.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxClass.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxClass.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxClass.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxClass.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxClass.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxClass.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxClass.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxClass.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxGridAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FxClassDirective, 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]
+    [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,
                 }]
-        }], 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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxClass.xl-down", required: false }] }] } });
 
 /*
  * Public API Surface of ars-utils