@fabio.buscaroli/scm-utils 22.0.1

package/fesm2022/abv-scm-utils-ui.mjs

@@ -0,0 +1,3060 @@
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import * as i0 from '@angular/core';
+import { Injectable, signal, ChangeDetectionStrategy, Component, output, inject, Service, input, computed, viewChildren, forwardRef, InjectionToken, TemplateRef, ViewContainerRef, effect, Directive, ElementRef, Renderer2, PLATFORM_ID, isDevMode, NgModule } from '@angular/core';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { PlatformLocation, isPlatformBrowser } from '@angular/common';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions, MatDialog } from '@angular/material/dialog';
+import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
+import { SafeHtmlPipe, SystemUtils, PasswordValidatorDirective, EqualsValidatorDirective } from '@abv/scm-utils/core';
+import { timer, map, distinctUntilChanged, shareReplay } from 'rxjs';
+import { tap, first } from 'rxjs/operators';
+import * as i3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1 from '@ngbracket/ngx-layout/flex';
+import { FlexModule } from '@ngbracket/ngx-layout/flex';
+import * as i3$1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i2$2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+/** Italian localisation for the Material paginator labels. */
+class PaginatorIntl extends MatPaginatorIntl {
+    constructor() {
+        super(...arguments);
+        this.itemsPerPageLabel = 'Elementi per pagina';
+        this.nextPageLabel = 'Prossima pagina';
+        this.previousPageLabel = 'Pagina precedente';
+        this.lastPageLabel = 'Ultima pagina';
+        this.firstPageLabel = 'Prima pagina';
+        /**
+         * Returns the human-readable range label shown inside the paginator.
+         * @param page     - Zero-based index of the current page.
+         * @param pageSize - Number of items displayed per page.
+         * @param length   - Total number of items, or `-1` when the total is still being calculated.
+         * @returns A formatted string such as `"1 - 25 di 100"`.
+         */
+        this.getRangeLabel = (page, pageSize, length) => {
+            if (length === -1) {
+                return '0 di calcolo...';
+            }
+            if (length === 0 || pageSize === 0) {
+                return `0 di ${length}`;
+            }
+            const totalLength = Math.max(length, 0);
+            const startIndex = page * pageSize;
+            // If the start index exceeds the list length, do not try to fix the end index.
+            const endIndex = startIndex < totalLength
+                ? Math.min(startIndex + pageSize, totalLength)
+                : startIndex + pageSize;
+            return `${startIndex + 1} - ${endIndex} di ${totalLength}`;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorIntl }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PaginatorIntl, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Overlay dialog that blocks interaction while a background operation is in progress.
+ * Supports four visual styles: progress bar, spinner, hourglass, and wait icon.
+ */
+class BusyDialogComponent {
+    constructor() {
+        /** Visual style of the busy indicator. */
+        this.type = signal('bar', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Current progress value (0–100). Used when `progressMode` is `'determinate'`. */
+        this.progress = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        /** Progress mode passed to the Material progress components. */
+        this.progressMode = signal('indeterminate', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressMode" }] : /* istanbul ignore next */ []));
+        /** Message displayed above the progress indicator. */
+        this.message = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Updates the busy dialog state.
+     * @param message      - New message to display. Ignored when empty, preserving the previous text.
+     * @param progress     - Current progress value (0–100). A value > 0 forces `'determinate'` mode.
+     * @param progressMode - Progress bar/spinner mode (default: `'indeterminate'`).
+     * @param type         - Visual style to use (default: `'bar'`).
+     */
+    set(message, progress, progressMode = 'indeterminate', type = 'bar') {
+        if (message) {
+            this.message.set(message);
+        }
+        if (type) {
+            this.type.set(type);
+        }
+        this.progress.set(progress);
+        this.progressMode.set(progress > 0 ? 'determinate' : progressMode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BusyDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BusyDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "@if(type() === 'hourglass') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n  @if (message()) {\r\n  <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n  }\r\n</div>\r\n} @else if (type() === 'wait') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n</div>\r\n} @else {\r\n<div class=\"busy-panel\">\r\n  <div fxLayout=\"column\" fxFill>\r\n    @if (message()) {\r\n    <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n    }\r\n    @if (type() === 'bar') {\r\n    <div>\r\n      <mat-progress-bar [mode]=\"progressMode()\" [value]=\"progress()\"\r\n        style=\"margin:15px auto 0 auto; max-width: 350px;\"></mat-progress-bar>\r\n    </div>\r\n    } @else if (type() === 'spinner') {\r\n    <div>\r\n      <mat-progress-spinner [mode]=\"progressMode()\" diameter=\"70\" [value]=\"progress()\"\r\n        style=\"margin:15px auto 0 auto;\"></mat-progress-spinner>\r\n    </div>\r\n    }\r\n    @if (progress() > 0) {\r\n    <div>\r\n      <span style=\"font-size: smaller;\"><b>{{progress()}}%</b></span>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.busy-message{font-size:larger;font-weight:600;padding-top:15px;padding-bottom:15px;text-align:center}.busy-panel{background-color:var(--mat-dialog-container-color);border-radius:var(--mat-dialog-container-shape, 24px);box-shadow:0 4px 8px #0003,0 6px 20px #00000030;padding:24px;min-width:250px;margin:12px}.busy-panel .busy-message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.busy-backdrop{background-color:#0000006b!important}.mat-icon-spinner{animation:matIconSpinnerKeyFrames 3s linear infinite;font-size:5em;width:1em;height:1em}@keyframes matIconSpinnerKeyFrames{0%{transform:rotate(360deg)}to{transform:rotate(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BusyDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexModule, MatProgressBarModule, MatProgressSpinnerModule, MatIcon, SafeHtmlPipe], template: "@if(type() === 'hourglass') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n  @if (message()) {\r\n  <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n  }\r\n</div>\r\n} @else if (type() === 'wait') {\r\n<div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\r\n  <div><mat-icon class=\"mat-icon-spinner\">hourglass</mat-icon></div>\r\n</div>\r\n} @else {\r\n<div class=\"busy-panel\">\r\n  <div fxLayout=\"column\" fxFill>\r\n    @if (message()) {\r\n    <div [innerHTML]=\"message() | safeHtml\" class=\"busy-message\"></div>\r\n    }\r\n    @if (type() === 'bar') {\r\n    <div>\r\n      <mat-progress-bar [mode]=\"progressMode()\" [value]=\"progress()\"\r\n        style=\"margin:15px auto 0 auto; max-width: 350px;\"></mat-progress-bar>\r\n    </div>\r\n    } @else if (type() === 'spinner') {\r\n    <div>\r\n      <mat-progress-spinner [mode]=\"progressMode()\" diameter=\"70\" [value]=\"progress()\"\r\n        style=\"margin:15px auto 0 auto;\"></mat-progress-spinner>\r\n    </div>\r\n    }\r\n    @if (progress() > 0) {\r\n    <div>\r\n      <span style=\"font-size: smaller;\"><b>{{progress()}}%</b></span>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.busy-message{font-size:larger;font-weight:600;padding-top:15px;padding-bottom:15px;text-align:center}.busy-panel{background-color:var(--mat-dialog-container-color);border-radius:var(--mat-dialog-container-shape, 24px);box-shadow:0 4px 8px #0003,0 6px 20px #00000030;padding:24px;min-width:250px;margin:12px}.busy-panel .busy-message{font-size:larger;font-weight:600;padding-bottom:15px;text-align:center}.busy-backdrop{background-color:#0000006b!important}.mat-icon-spinner{animation:matIconSpinnerKeyFrames 3s linear infinite;font-size:5em;width:1em;height:1em}@keyframes matIconSpinnerKeyFrames{0%{transform:rotate(360deg)}to{transform:rotate(0)}}\n"] }]
+        }] });
+
+class ConfirmDialogComponent {
+    constructor() {
+        /** Emitted when the user makes a choice. Carries the selected result and any option state. */
+        this.choosen = output();
+        this.dialogRef = inject((MatDialogRef));
+        /** Dialog configuration, with sensible defaults applied at construction time. */
+        this.dialogData = signal({
+            title: 'Conferma',
+            okCaption: 'Si',
+            cancelCaption: 'No',
+            message: '',
+            ...(inject(MAT_DIALOG_DATA) ?? {}),
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        // Ensure optional captions always have a value even when the caller omits them
+        this.dialogData.update(d => ({
+            ...d,
+            title: d.title ?? 'Conferma',
+            okCaption: d.okCaption ?? 'Si',
+            cancelCaption: d.cancelCaption ?? 'No',
+        }));
+    }
+    /**
+     * Confirms the dialog, emitting `'ok'` together with the current option selections.
+     */
+    ok() {
+        this.choosen.emit({ result: 'ok', options: this.dialogData().options });
+        this.dialogRef.close();
+    }
+    /**
+     * Cancels the dialog, emitting `'cancel'`.
+     */
+    cancel() {
+        this.choosen.emit({ result: 'cancel' });
+        this.dialogRef.close();
+    }
+    /**
+     * Triggers the tertiary action, emitting `'other'`.
+     */
+    other() {
+        this.choosen.emit({ result: 'other' });
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ConfirmDialogComponent, isStandalone: true, selector: "ng-component", outputs: { choosen: "choosen" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n    <div fxFlex=\"*\">\r\n      @if (dialogData().message) {\r\n      <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n      }\r\n    </div>\r\n    @if (dialogData().details) {\r\n      <div class=\"details-box\">\r\n      <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n      <div class=\"small details\">\r\n        <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n      </div>\r\n    </div>\r\n    }\r\n    @if (dialogData().options) {\r\n    <div>\r\n      @for (o of dialogData().options; track o; let i = $index) {\r\n      <div>\r\n        <mat-checkbox (change)=\"o.selected = $event.checked\" [checked]=\"o.selected === true\"  name=\"opt_{{i}}\"  >\r\n          {{o.description}}\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <br>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().otherCaption) {\r\n      <button mat-flat-button (click)=\"other()\"\r\n        [mat-dialog-close]=\"true\">{{dialogData().otherCaption}}</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button (click)=\"ok()\"\r\n        [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\" (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogClose, FlexModule, MatCheckboxModule, FormsModule,
+                        MatDialogActions, MatButtonModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n    <div fxFlex=\"*\">\r\n      @if (dialogData().message) {\r\n      <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n      }\r\n    </div>\r\n    @if (dialogData().details) {\r\n      <div class=\"details-box\">\r\n      <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n      <div class=\"small details\">\r\n        <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n      </div>\r\n    </div>\r\n    }\r\n    @if (dialogData().options) {\r\n    <div>\r\n      @for (o of dialogData().options; track o; let i = $index) {\r\n      <div>\r\n        <mat-checkbox (change)=\"o.selected = $event.checked\" [checked]=\"o.selected === true\"  name=\"opt_{{i}}\"  >\r\n          {{o.description}}\r\n        </mat-checkbox>\r\n      </div>\r\n      }\r\n    </div>\r\n    }\r\n    <br>\r\n  </div>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().otherCaption) {\r\n      <button mat-flat-button (click)=\"other()\"\r\n        [mat-dialog-close]=\"true\">{{dialogData().otherCaption}}</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button (click)=\"ok()\"\r\n        [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\" (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { choosen: [{ type: i0.Output, args: ["choosen"] }] } });
+
+class InfoDialogComponent {
+    constructor() {
+        this.dialogService = inject(DialogService);
+        this.dialogRef = inject((MatDialogRef));
+        /** Dialog configuration with defaults applied at construction time. */
+        this.dialogData = signal((() => {
+            const raw = inject(MAT_DIALOG_DATA) ?? { message: '' };
+            return { title: 'Informazioni', ...raw };
+        })(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        // Schedule auto-dismiss if configured
+        const dismissAfter = this.dialogData().dismissAfter;
+        if (dismissAfter) {
+            setTimeout(() => this.dialogRef.close(), dismissAfter);
+        }
+    }
+    /**
+     * Replaces the dialog data at runtime (e.g. after an async operation resolves).
+     * Also re-schedules the auto-dismiss timer if `dismissAfter` is set.
+     * @param data - The new dialog data to display.
+     */
+    setData(data) {
+        this.dialogData.set({ title: 'Informazioni', ...data });
+        if (data.dismissAfter) {
+            setTimeout(() => this.dialogRef.close(), data.dismissAfter);
+        }
+    }
+    /**
+     * Invokes the optional navigation callback provided by the caller.
+     * @param url - The URL to navigate to.
+     */
+    navigate(url) {
+        this.dialogData().onNavigate?.(url);
+    }
+    /**
+     * Copy to clipboard
+     */
+    async copy() {
+        const elem = document.getElementById('info-dialog-content');
+        if (!elem)
+            return;
+        const htmlBlob = new Blob([elem.innerHTML], { type: 'text/html' });
+        const textBlob = new Blob([elem.innerText], { type: 'text/plain' });
+        try {
+            const data = [
+                new ClipboardItem({
+                    'text/html': htmlBlob,
+                    'text/plain': textBlob
+                })
+            ];
+            setTimeout(async () => {
+                window.focus();
+                await navigator.clipboard.write(data);
+            }, 0);
+            this.dialogService.toast('Copiato negli appunti.');
+        }
+        catch (err) {
+            this.dialogService.toast(`Errore copiando negli appunti: ${err}`);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: InfoDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: InfoDialogComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill id=\"info-dialog-content\">\r\n    <div fxFlex=\"*\">\r\n      @if (dialogData().message) {\r\n      <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n      }\r\n    </div>\r\n    @if (dialogData().details) {\r\n    <div class=\"details-box\">\r\n      <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n      <div class=\"small details\">\r\n        <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  <br>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFill>\r\n    <button mat-icon-button (click)=\"copy()\" matTooltip=\"Copia negli appunti\"><mat-icon>content_copy</mat-icon></button>\r\n    <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial>{{dialogData().okCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: InfoDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogActions, FlexModule,
+                        MatButtonModule, MatIconModule, MatDialogClose, MatTooltipModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill id=\"info-dialog-content\">\r\n    <div fxFlex=\"*\">\r\n      @if (dialogData().message) {\r\n      <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n      }\r\n    </div>\r\n    @if (dialogData().details) {\r\n    <div class=\"details-box\">\r\n      <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n      <div class=\"small details\">\r\n        <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  <br>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" fxFill>\r\n    <button mat-icon-button (click)=\"copy()\" matTooltip=\"Copia negli appunti\"><mat-icon>content_copy</mat-icon></button>\r\n    <button mat-flat-button [mat-dialog-close]=\"true\" cdkFocusInitial>{{dialogData().okCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class ToastComponent {
+    constructor() {
+        /** Emitted when the user clicks the optional action button. */
+        this.action = output();
+        /** Snack-bar payload with a safe fallback to an empty message when no data is injected. */
+        this.dialogData = signal(inject(MAT_SNACK_BAR_DATA) ?? { message: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Emits the `action` event to notify the caller that the action button was clicked.
+     */
+    do() {
+        this.action.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastComponent, isStandalone: true, selector: "ng-component", outputs: { action: "action" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n  @if (dialogData().icon) {\r\n  <div fxFlex='30px' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n    <mat-icon>{{dialogData().icon}}</mat-icon>\r\n  </div>\r\n  }\r\n  <div fxFlex='*' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n    @if (dialogData().message) {\r\n    <span [innerHTML]=\"dialogData().message | safeHtml\"></span>\r\n    }\r\n  </div>\r\n  @if (dialogData().actionCaption) {\r\n  <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n    <div style=\"padding-left: 20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"do()\"\r\n        [innerHTML]=\"dialogData().actionCaption\"></button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FlexModule, MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div fxLayout=\"row\" fxLayoutGap=\"10px\">\r\n  @if (dialogData().icon) {\r\n  <div fxFlex='30px' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n    <mat-icon>{{dialogData().icon}}</mat-icon>\r\n  </div>\r\n  }\r\n  <div fxFlex='*' fxLayoutAlign=\"start\" fxFlexAlign=\"center\">\r\n    @if (dialogData().message) {\r\n    <span [innerHTML]=\"dialogData().message | safeHtml\"></span>\r\n    }\r\n  </div>\r\n  @if (dialogData().actionCaption) {\r\n  <div fxLayoutAlign=\"end\" fxFlexAlign=\"center\">\r\n    <div style=\"padding-left: 20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"do()\"\r\n        [innerHTML]=\"dialogData().actionCaption\"></button>\r\n    </div>\r\n  </div>\r\n  }\r\n</div>" }]
+        }], propDecorators: { action: [{ type: i0.Output, args: ["action"] }] } });
+
+class UIService {
+    constructor() {
+        /**
+         * The default Material form-field appearance used across dialogs and forms.
+         * Defaults to `'fill'`.
+         */
+        this.appearance = signal('fill', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Updates the global form-field appearance.
+     * @param value - The new appearance value. Falls back to `'fill'` when `undefined` is passed.
+     */
+    setAppearance(value) {
+        this.appearance.set(value ?? 'fill');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UIService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: UIService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: UIService, decorators: [{
+            type: Service
+        }] });
+
+var DeleteDialogConfirmMode;
+(function (DeleteDialogConfirmMode) {
+    DeleteDialogConfirmMode[DeleteDialogConfirmMode["None"] = 0] = "None";
+    DeleteDialogConfirmMode[DeleteDialogConfirmMode["Simple"] = 1] = "Simple";
+    DeleteDialogConfirmMode[DeleteDialogConfirmMode["Strong"] = 2] = "Strong";
+})(DeleteDialogConfirmMode || (DeleteDialogConfirmMode = {}));
+class DeleteDialogComponent {
+    constructor() {
+        /** Emitted when the user makes a choice. Carries the selected result. */
+        this.choosen = output();
+        this.dialogRef = inject((MatDialogRef));
+        /** Dialog configuration with defaults applied at construction time. */
+        this.dialogData = signal((() => {
+            const raw = inject(MAT_DIALOG_DATA) ?? {};
+            return {
+                title: 'Attenzione',
+                okCaption: 'Si',
+                cancelCaption: 'No',
+                confirmMode: DeleteDialogConfirmMode.None,
+                message: '',
+                ...raw,
+            };
+        })(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the user has confirmed the deletion.
+         * Starts as `true` for all modes except `Simple`, which requires explicit checkbox confirmation.
+         */
+        this.confirmed = signal(this.dialogData().confirmMode !== DeleteDialogConfirmMode.Simple, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmed" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Confirms the deletion, emitting `'ok'` and closing the dialog.
+     */
+    ok() {
+        this.choosen.emit({ result: 'ok' });
+        this.dialogRef.close();
+    }
+    /**
+     * Cancels the operation, emitting `'cancel'` and closing the dialog.
+     */
+    cancel() {
+        this.choosen.emit({ result: 'cancel' });
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: DeleteDialogComponent, isStandalone: true, selector: "ng-component", outputs: { choosen: "choosen" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n      <div fxFlex=\"*\">\r\n        @if (dialogData().message) {\r\n        <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n        }\r\n      </div>\r\n      @if (dialogData().details) {\r\n      <div class=\"details-box\">\r\n        <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n        <div class=\"small details\">\r\n          <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (dialogData().confirmMode === 1) {\r\n      <div>\r\n        <mat-checkbox (change)=\"confirmed.set($event.checked)\" [checked]=\"confirmed()\">\r\n          Confermo la cancellazione\r\n        </mat-checkbox>\r\n      </div>\r\n      } @else if (dialogData().confirmMode === 2) {\r\n      <p>Per confermare la cancellazione digita la parola <i><b>elimina</b></i>.</p>\r\n      <mat-form-field style=\"width: 200px\" [appearance]=\"dialogData().appearance\">\r\n        <mat-label>Conferma</mat-label>\r\n        <input matInput #field_confirm=\"ngModel\" [(ngModel)]=\"confirmValue\" name=\"field_confirm\" required\r\n          [attr.aria-label]=\"'Digita la parola -elimina-'\">\r\n        @if (field_confirm.invalid) {\r\n        <mat-error>Digita la parola \"elimina\"</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      }\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end center\" fxFill>\r\n    <button mat-flat-button (click)=\"ok()\"\r\n      [disabled]=\"f.form.invalid || (confirmValue && confirmValue.toLowerCase() !== 'elimina') || !confirmed()\"\r\n      [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\"\r\n      (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DeleteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, MatDialogClose, FlexModule, MatCheckboxModule, FormsModule,
+                        MatDialogActions, MatButtonModule, MatFormFieldModule, MatInputModule, SafeHtmlPipe], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"24px\" fxFill>\r\n      <div fxFlex=\"*\">\r\n        @if (dialogData().message) {\r\n        <div [innerHtml]=\"dialogData().message | safeHtml\"></div>\r\n        }\r\n      </div>\r\n      @if (dialogData().details) {\r\n      <div class=\"details-box\">\r\n        <p class=\"x-small uppercase secondary\">Dettaglio:</p>\r\n        <div class=\"small details\">\r\n          <div [innerHtml]=\"dialogData().details | safeHtml\"></div>\r\n        </div>\r\n      </div>\r\n      }\r\n      @if (dialogData().confirmMode === 1) {\r\n      <div>\r\n        <mat-checkbox (change)=\"confirmed.set($event.checked)\" [checked]=\"confirmed()\">\r\n          Confermo la cancellazione\r\n        </mat-checkbox>\r\n      </div>\r\n      } @else if (dialogData().confirmMode === 2) {\r\n      <p>Per confermare la cancellazione digita la parola <i><b>elimina</b></i>.</p>\r\n      <mat-form-field style=\"width: 200px\" [appearance]=\"dialogData().appearance\">\r\n        <mat-label>Conferma</mat-label>\r\n        <input matInput #field_confirm=\"ngModel\" [(ngModel)]=\"confirmValue\" name=\"field_confirm\" required\r\n          [attr.aria-label]=\"'Digita la parola -elimina-'\">\r\n        @if (field_confirm.invalid) {\r\n        <mat-error>Digita la parola \"elimina\"</mat-error>\r\n        }\r\n      </mat-form-field>\r\n      }\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"end center\" fxFill>\r\n    <button mat-flat-button (click)=\"ok()\"\r\n      [disabled]=\"f.form.invalid || (confirmValue && confirmValue.toLowerCase() !== 'elimina') || !confirmed()\"\r\n      [mat-dialog-close]=\"true\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\"\r\n      (click)=\"cancel()\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}.details-box{border-top:1px solid var(--ars-color-divider, #757d87)}.details{background-color:var(--ars-item-hover-background-color, #eaecef);border-radius:5px;max-height:350px;padding:8px 12px;overflow:auto}\n"] }]
+        }], propDecorators: { choosen: [{ type: i0.Output, args: ["choosen"] }] } });
+
+class BusyTimer {
+    constructor(dialogService, due = 100, message = 'Operazione in corso...') {
+        this.dialogService = dialogService;
+        this.subscription = timer(due).pipe(tap(() => this.dialogService.busy(message))).subscribe();
+    }
+    /** Dispose object */
+    clear() {
+        this.subscription.unsubscribe();
+        this.dialogService.clearBusy();
+    }
+}
+class DialogService extends UIService {
+    constructor() {
+        super();
+        this.dialog = inject(MatDialog);
+        this.overlay = inject(Overlay);
+        this.snackBar = inject(MatSnackBar);
+        this.location = inject(PlatformLocation);
+        this.popHistory = [];
+        this.popState = true;
+        this.poppingState = false;
+        // Handle dialog close when back button is clicked
+        this.location.onPopState(() => {
+            if (!this.poppingState) {
+                const count = this.dialog.openDialogs.length;
+                if (count > 0) {
+                    // Disable pop state if needed
+                    this.popState = false;
+                    // Close dialog
+                    this.dialog.openDialogs[count - 1].close();
+                }
+            }
+            else {
+                this.poppingState = false;
+            }
+        });
+    }
+    /**
+     * Removes trailing `#` characters from the current URL (e.g. after a page reload).
+     * @param resetPoppingState - When `true`, resets the internal popping-state flag.
+     */
+    clearUrl(resetPoppingState = false) {
+        const url = location.href;
+        let l = url.length;
+        while (l >= 0 && url[l - 1] === '#')
+            l--;
+        if (l < url.length)
+            history.replaceState({}, '', url.substring(0, l));
+        if (resetPoppingState)
+            this.poppingState = false;
+    }
+    /**
+     * Close all dialogs
+     */
+    closeAll() {
+        this.dialog.closeAll();
+    }
+    /**
+     * Opens a Material dialog. Returns `null` when not running in a browser.
+     * @param component - The component to open as a dialog.
+     * @param config   - The dialog configuration.
+     * @returns The dialog reference, or `null` outside the browser.
+     */
+    open(component, config) {
+        if (!SystemUtils.isBrowser())
+            return null;
+        this.clearBusy();
+        return this.openDialog(component, config);
+    }
+    /**
+     * Internal helper that wraps `MatDialog.open`, subscribes to lifecycle hooks
+     * and manages browser-history push/pop entries.
+     * @param component - The component to open.
+     * @param config   - The dialog configuration.
+     * @returns The dialog reference.
+     */
+    openDialog(component, config) {
+        // We will take care of navigation
+        config.closeOnNavigation = false;
+        const d = this.dialog.open(component, config);
+        d.afterOpened().pipe(first()).subscribe(() => this.pushDialog(d.id));
+        d.beforeClosed().pipe(first()).subscribe(() => this.popDialog(d.id));
+        d.afterClosed().pipe(first()).subscribe(() => {
+            // Final cleanup of middle objects
+            this.errorDialogRef = undefined;
+        });
+        return d;
+    }
+    /**
+     * Returns the element height including margins
+     * @param element - element
+     * @returns the height
+     */
+    outerHeight(element) {
+        if (!SystemUtils.isBrowser())
+            return 0;
+        const height = element.offsetHeight;
+        const style = window.getComputedStyle(element);
+        return ['top', 'bottom']
+            .map(side => parseInt(style.getPropertyValue(`margin-${side}`), 10))
+            .reduce((total, margin) => total + margin, height);
+    }
+    /**
+     * Return current dialog height
+     */
+    getCurrentDialogHeight() {
+        if (!SystemUtils.isBrowser())
+            return 0;
+        const count = this.popHistory.length;
+        if (count > 0) {
+            let id = this.popHistory[count - 1].id;
+            let elem = document.getElementById(id);
+            if (elem && elem.clientHeight > 0)
+                return elem.clientHeight;
+        }
+        return 0;
+    }
+    /**
+     * Returns the scrollable content area height for the topmost open dialog.
+     * @param fixedPartsClassName - CSS class names of fixed (non-scrollable) elements whose heights are subtracted.
+     * @param minimalHeight       - Minimum height floor to use when the dialog height is smaller.
+     * @returns The computed scrollable height in pixels.
+     */
+    getCurrentDialogScrollableHeight(fixedPartsClassName, minimalHeight) {
+        if (!SystemUtils.isBrowser())
+            return 0;
+        let h = Math.max(this.getCurrentDialogHeight(), minimalHeight);
+        if (fixedPartsClassName) {
+            fixedPartsClassName.forEach(n => {
+                const elems = document.getElementsByClassName(n);
+                if (elems) {
+                    for (let i = 0; i < elems.length; i++) {
+                        h -= this.outerHeight(elems[i]);
+                    }
+                }
+            });
+        }
+        return h;
+    }
+    /**
+     * Push a dialog into the browser history
+     */
+    pushDialog(id) {
+        if (!SystemUtils.isBrowser())
+            return;
+        const index = history.length;
+        history.pushState({ index }, '', location.href + '#');
+        this.popHistory.push({ id, value: index });
+    }
+    /**
+     * Pop a dialog from the history
+     */
+    popDialog(id) {
+        if (!SystemUtils.isBrowser())
+            return;
+        if (this.popState) {
+            this.poppingState = true;
+            let popped = 1;
+            if (id) {
+                const p = this.popHistory.findIndex(n => n.id === id);
+                if (p !== -1) {
+                    popped = this.popHistory[p].value - (history.state?.index ?? 0);
+                    popped = popped ? popped + 1 : 1;
+                    this.popHistory.splice(p, 1);
+                }
+                const url = location.href;
+                let l = url.length;
+                while (l >= 0 && url[l - 1] === '#' && popped > 0) {
+                    l--;
+                    popped--;
+                }
+                if (l < url.length)
+                    history.replaceState({}, '', url.substring(0, l));
+            }
+        }
+        this.popState = true;
+    }
+    /**
+     * Creates the CDK overlay used to host the busy indicator.
+     * @returns The new `OverlayRef`.
+     */
+    createBusy() {
+        return this.overlay.create({
+            hasBackdrop: true,
+            backdropClass: 'busy-backdrop',
+            positionStrategy: this.overlay.position()
+                .global()
+                .centerHorizontally()
+                .centerVertically()
+        });
+    }
+    /**
+     * Clear busy dialog
+     */
+    clearBusy() {
+        setTimeout(() => {
+            this.busyDialogRef?.detach();
+            this.busyComponentRef?.destroy();
+        }, 500);
+    }
+    /**
+     * Shows or updates the busy overlay.
+     * @param message      - Text to display inside the overlay.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress bar mode. Defaults to `'indeterminate'`.
+     * @param type         - Visual style of the overlay. Defaults to `'bar'`.
+     * @param action       - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if a new overlay was created, `false` if an existing one was updated.
+     */
+    setBusy(message, progress = -1, progressMode = 'indeterminate', type = 'bar', action) {
+        const exists = this.busyDialogRef?.hasAttached();
+        if (exists) {
+            this.busyComponentRef?.instance.set(message, progress, progressMode, type); // update existing
+        }
+        else {
+            // Open new
+            if (!this.busyDialogRef) {
+                this.busyDialogRef = this.createBusy();
+            }
+            this.busyComponentRef = this.busyDialogRef.attach(new ComponentPortal(BusyDialogComponent));
+            this.busyComponentRef.instance.set(message, progress, progressMode, type);
+            if (action) {
+                action
+                    .pipe(first())
+                    .subscribe(() => {
+                    this.clearBusy();
+                });
+            }
+        }
+        return !exists;
+    }
+    /**
+     * Shows or updates the busy overlay using the progress-bar style.
+     * @param message      - Text to display inside the overlay.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress bar mode. Defaults to `'indeterminate'`.
+     * @param action       - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if a new overlay was created.
+     */
+    busy(message, progress = -1, progressMode = 'indeterminate', action) {
+        return this.setBusy(message, progress, progressMode, 'bar', action);
+    }
+    /**
+     * Returns a `BusyTimer` that shows the busy overlay after a debounce delay.
+     * @param message - Text to display. Defaults to `'Operazione in corso...'`.
+     * @param due     - Delay in milliseconds before the overlay appears. Defaults to `100`.
+     * @returns A `BusyTimer` that must be disposed with `clear()` when the operation ends.
+     */
+    busyTimer(message = "Operazione in corso...", due = 100) {
+        return new BusyTimer(this, due, message);
+    }
+    /**
+     * Shows or updates the busy overlay using the hourglass style.
+     * @param message - Text to display inside the overlay.
+     * @param action  - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if a new overlay was created.
+     */
+    busyHourglass(message, action) {
+        return this.setBusy(message, -1, 'indeterminate', 'hourglass', action);
+    }
+    /**
+     * Shows or updates the busy overlay using the spinner style.
+     * @param message      - Text to display inside the overlay.
+     * @param progress     - Progress value (`-1` = indeterminate). Defaults to `-1`.
+     * @param progressMode - Progress mode. Defaults to `'indeterminate'`.
+     * @param action       - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if a new overlay was created.
+     */
+    busySpinner(message, progress = -1, progressMode = 'indeterminate', action) {
+        return this.setBusy(message, progress, progressMode, 'spinner', action);
+    }
+    /**
+     * Shows a minimal wait spinner overlay.
+     * @param action - Optional observable; the overlay is dismissed when it emits.
+     * @returns `true` if a new overlay was created.
+     */
+    wait(action) {
+        return this.setBusy('', -1, 'indeterminate', 'wait', action);
+    }
+    /**
+     * Opens an informational dialog.
+     * @param message      - HTML message to display.
+     * @param title        - Dialog title. Defaults to `'Informazioni'`.
+     * @param okCaption    - Confirmation button label. Defaults to `'Ok'`.
+     * @param width        - Maximum dialog width in pixels. Defaults to `500`.
+     * @param dismissAfter - Auto-close delay in milliseconds (optional).
+     * @param details      - Optional secondary details text.
+     * @param onNavigate   - Optional navigation callback invoked when the user clicks a link.
+     * @returns The dialog reference, or `null` outside the browser.
+     */
+    info(message, title = 'Informazioni', okCaption = 'Ok', width = 500, dismissAfter, details, onNavigate) {
+        this.clearBusy();
+        return this.open(InfoDialogComponent, {
+            ariaLabel: 'informazioni',
+            autoFocus: 'dialog',
+            restoreFocus: false,
+            data: {
+                message,
+                title,
+                okCaption,
+                dismissAfter,
+                details,
+                onNavigate,
+                appearance: 'fill'
+            },
+            closeOnNavigation: false,
+            minWidth: '375px',
+            maxWidth: `${width}px`,
+            width: '100%'
+        });
+    }
+    /**
+     * Opens an error dialog. If one is already open, its content is updated in place.
+     * @param message      - HTML error message to display.
+     * @param log          - Optional technical log / stack trace shown in the details panel.
+     * @param title        - Dialog title. Defaults to `'Errore'`.
+     * @param okCaption    - Confirmation button label. Defaults to `'Ok'`.
+     * @param width        - Maximum dialog width in pixels. Defaults to `500`.
+     * @param dismissAfter - Auto-close delay in milliseconds (optional).
+     * @returns The dialog reference, or `null` outside the browser.
+     */
+    error(message, log, title = 'Errore', okCaption = 'Ok', width = 500, dismissAfter) {
+        this.clearBusy();
+        if (this.errorDialogRef) {
+            // Just change current error
+            this.errorDialogRef.componentInstance.setData({
+                message,
+                title,
+                details: log,
+                okCaption,
+                dismissAfter
+            });
+            return this.errorDialogRef;
+        }
+        const ref = this.open(InfoDialogComponent, {
+            ariaLabel: 'errore',
+            autoFocus: 'dialog',
+            restoreFocus: false,
+            data: {
+                message,
+                title,
+                details: log,
+                okCaption,
+                dismissAfter,
+                appearance: 'fill'
+            },
+            closeOnNavigation: false,
+            minWidth: '375px',
+            maxWidth: `${width}px`,
+            width: '100%'
+        });
+        this.errorDialogRef = ref ?? undefined;
+        return ref;
+    }
+    /**
+     * Shows a snack-bar toast notification.
+     * @param message       - HTML message to display.
+     * @param duration      - Visible duration in milliseconds. Defaults to `2000`.
+     * @param icon          - Material icon name shown beside the message. Defaults to `'check'`.
+     * @param actionCaption - Optional label for the action button.
+     * @returns The snack-bar reference.
+     */
+    toast(message, duration = 2000, icon = 'check', actionCaption) {
+        this.clearBusy();
+        if (duration === -1)
+            duration = 2000; // default
+        const toastRef = this.snackBar.openFromComponent(ToastComponent, {
+            duration,
+            data: { message, icon, actionCaption }
+        });
+        toastRef.instance.action.subscribe(() => toastRef.dismiss());
+        return toastRef;
+    }
+    /**
+     * Opens a confirmation dialog.
+     * @param message       - HTML message to display.
+     * @param title         - Dialog title. Defaults to `'Conferma'`.
+     * @param okCaption     - Primary action button label. Defaults to `'Si'`.
+     * @param cancelCaption - Cancel button label. Defaults to `'No'`.
+     * @param otherCaption  - Optional tertiary action button label.
+     * @param options       - Optional list of checkbox options shown to the user.
+     * @param width         - Maximum dialog width in pixels. Defaults to `500`.
+     * @param details       - Optional secondary details text.
+     * @returns The dialog reference, or `null` outside the browser.
+     */
+    confirm(message, title = 'Conferma', okCaption = 'Si', cancelCaption = 'No', otherCaption, options, width = 500, details) {
+        return this.open(ConfirmDialogComponent, {
+            ariaLabel: 'conferma',
+            autoFocus: 'dialog',
+            restoreFocus: false,
+            data: {
+                message,
+                title,
+                okCaption,
+                cancelCaption,
+                otherCaption,
+                options,
+                details,
+                appearance: 'fill'
+            },
+            closeOnNavigation: false,
+            disableClose: true,
+            minWidth: '375px',
+            maxWidth: `${width}px`,
+            width: '100%'
+        });
+    }
+    /**
+     * Opens a deletion-confirmation dialog.
+     * @param message       - HTML message to display.
+     * @param title         - Dialog title. Defaults to `'Attenzione'`.
+     * @param confirmMode   - Confirmation mode (none / checkbox / type-to-confirm). Defaults to `None`.
+     * @param okCaption     - Primary action button label. Defaults to `'Si'`.
+     * @param cancelCaption - Cancel button label. Defaults to `'No'`.
+     * @param width         - Maximum dialog width in pixels. Defaults to `500`.
+     * @param details       - Optional secondary details text.
+     * @returns The dialog reference, or `null` outside the browser.
+     */
+    delete(message, title = 'Attenzione', confirmMode = DeleteDialogConfirmMode.None, okCaption = 'Si', cancelCaption = 'No', width = 500, details) {
+        return this.open(DeleteDialogComponent, {
+            ariaLabel: 'attenzione',
+            autoFocus: 'dialog',
+            restoreFocus: false,
+            data: {
+                message,
+                title,
+                confirmMode,
+                okCaption,
+                cancelCaption,
+                details,
+                appearance: 'fill'
+            },
+            closeOnNavigation: false,
+            disableClose: true,
+            minWidth: '375px',
+            maxWidth: `${width}px`,
+            width: '100%'
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: DialogService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DialogService, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
+const DEFAULT_STRENGTH = { score: 0, label: '', color: '', suggestions: [], isValid: false };
+/**
+ * Displays a password-strength indicator for the provided password string.
+ * Uses `SystemUtils.calculatePasswordStrength` to derive the score and label.
+ */
+class PasswordStrengthComponent {
+    constructor() {
+        /** The password to evaluate. An empty string renders the default (score 0) state. */
+        this.password = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
+        /**
+         * Computed strength result for the current password.
+         * Falls back to `DEFAULT_STRENGTH` when the password is empty.
+         */
+        this.strength = computed(() => {
+            const pwd = this.password();
+            return pwd ? SystemUtils.calculatePasswordStrength(pwd) : DEFAULT_STRENGTH;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+        /**
+         * CSS class applied to the label element based on the numeric score (1–6 bands).
+         * Scores ≤ 2 → `'score-2'`, ≤ 3 → `'score-3'`, etc.
+         */
+        this.scoreClass = computed(() => {
+            const score = this.strength().score;
+            if (score <= 2)
+                return 'score-2';
+            if (score <= 3)
+                return 'score-3';
+            if (score <= 4)
+                return 'score-4';
+            if (score <= 5)
+                return 'score-5';
+            return 'score-6';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scoreClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: PasswordStrengthComponent, isStandalone: true, selector: "password-strength", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wide x-small bold\" style=\"white-space: nowrap; padding-top:4px\" [matTooltip]=\"strength().suggestions?.join('\\n ')\">\r\n    <span [class]=\"scoreClass()\">{{strength().label}}</span>\r\n</div>", styles: [".score-2{color:#f44336!important;font-weight:700}.score-3{color:#ff9800!important;font-weight:700}.score-4{color:#ffc107!important;font-weight:700}.score-5{color:#8bc34a!important;font-weight:700}.score-6{color:#4caf50!important;font-weight:700}.x-small{font-size:x-small}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'password-strength', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltipModule], template: "<div class=\"wide x-small bold\" style=\"white-space: nowrap; padding-top:4px\" [matTooltip]=\"strength().suggestions?.join('\\n ')\">\r\n    <span [class]=\"scoreClass()\">{{strength().label}}</span>\r\n</div>", styles: [".score-2{color:#f44336!important;font-weight:700}.score-3{color:#ff9800!important;font-weight:700}.score-4{color:#ffc107!important;font-weight:700}.score-5{color:#8bc34a!important;font-weight:700}.score-6{color:#4caf50!important;font-weight:700}.x-small{font-size:x-small}\n"] }]
+        }], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }] } });
+
+class OtpInputComponent {
+    constructor() {
+        /** Signal-based query for all individual OTP digit input elements. */
+        this.otpFields = viewChildren('otpField', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "otpFields" }] : /* istanbul ignore next */ []));
+        /** `true` when every digit slot contains a valid single decimal digit. */
+        this.isValid = computed(() => this.otpArray().every(d => /^\d$/.test(d)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        /** Array of per-digit values backing the OTP display. */
+        this.otpArray = signal(Array(6).fill(''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "otpArray" }] : /* istanbul ignore next */ []));
+        /** Whether the control is currently disabled. */
+        this.disabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    // ── ControlValueAccessor ───────────────────────────────────────────────────
+    /**
+     * Writes a new value into the control from the model.
+     * @param value - A string of up to 6 digits to pre-fill the OTP fields.
+     */
+    writeValue(value) {
+        const arr = Array(6).fill('');
+        if (value) {
+            value.split('').forEach((c, i) => {
+                if (i < 6)
+                    arr[i] = c;
+            });
+        }
+        this.otpArray.set(arr);
+    }
+    /**
+     * Registers the callback invoked when the control value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Registers the callback invoked when the control is touched.
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Enables or disables the control.
+     * @param isDisabled - `true` to disable all OTP inputs.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // ── Event handlers ─────────────────────────────────────────────────────────
+    /**
+     * Blocks non-digit characters before they are inserted.
+     * @param event - The `beforeinput` event from the input element.
+     */
+    onBeforeInput(event) {
+        if (event.data && !/^\d$/.test(event.data)) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Handles digit input, updates the OTP array, and advances focus.
+     * @param event - The `input` event from the digit field.
+     * @param index - Zero-based index of the field that received input.
+     */
+    onInput(event, index) {
+        let val = event.target.value;
+        val = val.replace(/\D/g, '').slice(-1);
+        const arr = [...this.otpArray()];
+        arr[index] = val;
+        this.otpArray.set(arr);
+        this.updateModel();
+        if (val && index < 5) {
+            this.focusField(index + 1);
+        }
+    }
+    /**
+     * Handles the Backspace key by moving focus to the previous field when the current one is empty.
+     * @param event - The `keydown` event.
+     * @param index - Zero-based index of the field that received the keydown.
+     */
+    onKeyDown(event, index) {
+        if (event.key === 'Backspace' && !this.otpArray()[index] && index > 0) {
+            this.focusField(index - 1);
+        }
+    }
+    /**
+     * Handles paste events by extracting up to 6 digits and distributing them across the OTP fields.
+     * @param event - The `ClipboardEvent` from the paste action.
+     */
+    onPaste(event) {
+        event.preventDefault();
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        const digits = pasted.replace(/\D/g, '').slice(0, 6).split('');
+        if (digits.length > 0) {
+            const arr = Array(6).fill('');
+            digits.forEach((d, i) => (arr[i] = d));
+            this.otpArray.set(arr);
+            this.updateModel();
+            this.focusField(Math.min(digits.length, 5));
+        }
+    }
+    /**
+     * Moves focus to the OTP field at the given index.
+     * @param index - Zero-based index of the target field.
+     */
+    focusField(index) {
+        const field = this.otpFields()[index];
+        field?.nativeElement.focus();
+        field?.nativeElement.select();
+    }
+    /**
+     * Notifies the form model of the current OTP value and marks the control as touched.
+     */
+    updateModel() {
+        const code = this.otpArray().join('');
+        this.onChange(code);
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: OtpInputComponent, isStandalone: true, selector: "otp-input", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => OtpInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "otpFields", predicate: ["otpField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"otp-container\">\r\n  @for (digit of otpArray(); track $index) {\r\n    <input\r\n      #otpField\r\n      type=\"text\"\r\n      maxlength=\"1\"\r\n      inputmode=\"numeric\"\r\n      pattern=\"[0-9]*\"\r\n      class=\"otp-box\"\r\n      [value]=\"digit\"\r\n      (beforeinput)=\"onBeforeInput($event)\"\r\n      (input)=\"onInput($event, $index)\"\r\n      (keydown)=\"onKeyDown($event, $index)\"\r\n      (paste)=\"onPaste($event)\"\r\n      [disabled]=\"disabled()\"\r\n      required\r\n    />\r\n  }\r\n</div>\r\n\r\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: OtpInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'otp-input', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => OtpInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"otp-container\">\r\n  @for (digit of otpArray(); track $index) {\r\n    <input\r\n      #otpField\r\n      type=\"text\"\r\n      maxlength=\"1\"\r\n      inputmode=\"numeric\"\r\n      pattern=\"[0-9]*\"\r\n      class=\"otp-box\"\r\n      [value]=\"digit\"\r\n      (beforeinput)=\"onBeforeInput($event)\"\r\n      (input)=\"onInput($event, $index)\"\r\n      (keydown)=\"onKeyDown($event, $index)\"\r\n      (paste)=\"onPaste($event)\"\r\n      [disabled]=\"disabled()\"\r\n      required\r\n    />\r\n  }\r\n</div>\r\n\r\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"] }]
+        }], propDecorators: { otpFields: [{ type: i0.ViewChildren, args: ['otpField', { isSignal: true }] }] } });
+
+class CredentialsDialogComponent {
+    constructor() {
+        /** Emitted when the user submits the form. Carries the entered credentials. */
+        this.done = output();
+        /** Emitted when the user requests a password-recovery flow. */
+        this.recoveringPassword = output();
+        /** Dialog configuration with defaults applied at construction time. */
+        this.dialogData = signal((() => {
+            const raw = inject(MAT_DIALOG_DATA) ?? {};
+            const data = {
+                appearance: 'fill',
+                title: 'Informazioni',
+                okCaption: 'Salva',
+                mode: 'email',
+                ...raw,
+            };
+            data.appearance ??= 'fill';
+            data.title ??= 'Informazioni';
+            data.okCaption ??= 'Salva';
+            data.mode ??= 'email';
+            if (data.mode === 'otp' && !data.message) {
+                data.message = '<div class="small">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per email<br><span class="x-small">(controlla anche la posta indesiderata)</span>.</div>';
+            }
+            return data;
+        })(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        /** Current form model, pre-filled with the user name from dialog data when provided. */
+        this.item = {
+            user: inject(MAT_DIALOG_DATA)?.user,
+        };
+        /** Whether the password field is currently shown as plain text. */
+        this.showPassword = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Switches the input mode of the dialog at runtime (e.g. from login to OTP).
+     * Intended to be called from outside via the dialog component reference.
+     * @param mode    - The new input mode (`'email'`, `'user'`, or `'otp'`).
+     * @param message - Optional new message to display above the form.
+     */
+    changeMode(mode, message) {
+        this.dialogData.update(d => ({
+            ...d,
+            mode,
+            message: message ?? d.message,
+        }));
+    }
+    /**
+     * Emits the current form result and closes the dialog.
+     */
+    ok() {
+        this.done.emit(this.item);
+    }
+    /**
+     * Emits the current form result for the password-recovery flow and optionally
+     * opens the recovery URL in a new tab.
+     */
+    recoverPassword() {
+        this.recoveringPassword.emit(this.item);
+        const url = this.dialogData().recoverPasswordUrl;
+        if (url) {
+            window.open(url, '_blank');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: CredentialsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: CredentialsDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", recoveringPassword: "recoveringPassword" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content>\r\n  @if (dialogData().message) {\r\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n    @if(dialogData().mode !== 'otp') {\r\n    @if (dialogData().mode === 'email') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email'\">\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'user') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Utente</mat-label>\r\n      <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\r\n      @if (user.invalid) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>La tua password abilitata</mat-label>\r\n      <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\r\n        [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\r\n      @if (password.invalid) {\r\n      <mat-error>Password non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    @if (dialogData().remember || dialogData().recoverPassword) {\r\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\r\n      <div>\r\n        @if (dialogData().remember) {\r\n        <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\r\n        }\r\n      </div>\r\n      <div fxLayoutAlign=\"end\">\r\n        @if (dialogData().recoverPassword) {\r\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\r\n          >Non riesco ad accedere</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: CredentialsDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatDialogActions,
+                        FlexModule,
+                        MatButtonModule,
+                        MatDialogClose,
+                        PasswordStrengthComponent,
+                        OtpInputComponent,
+                        SafeHtmlPipe,
+                    ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content>\r\n  @if (dialogData().message) {\r\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n    @if(dialogData().mode !== 'otp') {\r\n    @if (dialogData().mode === 'email') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email'\">\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'user') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Utente</mat-label>\r\n      <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\r\n      @if (user.invalid) {\r\n      <mat-error>Obbligatorio.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>La tua password abilitata</mat-label>\r\n      <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\r\n        [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\r\n      @if (password.invalid) {\r\n      <mat-error>Password non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    @if (dialogData().remember || dialogData().recoverPassword) {\r\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\r\n      <div>\r\n        @if (dialogData().remember) {\r\n        <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\r\n        }\r\n      </div>\r\n      <div fxLayoutAlign=\"end\">\r\n        @if (dialogData().recoverPassword) {\r\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\r\n          >Non riesco ad accedere</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n    }\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}\n"] }]
+        }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }], recoveringPassword: [{ type: i0.Output, args: ["recoveringPassword"] }] } });
+
+class RecoverPasswordDialogComponent {
+    constructor() {
+        /** Emitted when the user submits the recovery request. Carries the entered email and recaptcha state. */
+        this.done = output();
+        /** Dialog configuration with defaults applied at construction time. */
+        this.dialogData = signal({
+            appearance: 'fill',
+            ...(inject(MAT_DIALOG_DATA) ?? {}),
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        /** Current form model bound to the template inputs. */
+        this.item = {
+            email: '',
+            recaptcha: false,
+        };
+    }
+    /**
+     * Emits the current form result to trigger the password-recovery flow.
+     */
+    ok() {
+        this.done.emit(this.item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: RecoverPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: RecoverPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content>\r\n\r\n  <b>1. Ho dimenticato la password</b>\r\n  <p>\r\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n    aziendali (non collegate ad un email).</p>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email con cui ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n        maxlength=\"200\" />\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"f.form.invalid\"\r\n        aria-label=\"Recupera password\">Recupera password</button>\r\n    </div>\r\n  </form>\r\n  <p></p>\r\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n  <p>\r\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n  </p>\r\n  <p></p>\r\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n  <p>\r\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n    ARS Edizioni Informatiche.\r\n  </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: RecoverPasswordDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatDialogActions,
+                        FlexModule,
+                        MatDialogClose,
+                    ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content>\r\n\r\n  <b>1. Ho dimenticato la password</b>\r\n  <p>\r\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n    aziendali (non collegate ad un email).</p>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email con cui ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n        maxlength=\"200\" />\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"f.form.invalid\"\r\n        aria-label=\"Recupera password\">Recupera password</button>\r\n    </div>\r\n  </form>\r\n  <p></p>\r\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n  <p>\r\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n  </p>\r\n  <p></p>\r\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n  <p>\r\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n    ARS Edizioni Informatiche.\r\n  </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}\n"] }]
+        }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
+
+class ResetPasswordDialogComponent {
+    constructor() {
+        /** Emitted when the user submits the new password. Carries the entered password data. */
+        this.done = output();
+        this.dialogService = inject(DialogService);
+        this.dialogRef = inject((MatDialogRef));
+        /** Dialog configuration with defaults applied at construction time. */
+        this.dialogData = signal((() => {
+            const raw = inject(MAT_DIALOG_DATA);
+            return { mode: 'admin', appearance: 'fill', ...raw };
+        })(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        /** Current form model bound to the template inputs. */
+        this.item = {};
+        /** Whether the old-password field is currently shown as plain text. */
+        this.showOldPassword = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showOldPassword" }] : /* istanbul ignore next */ []));
+        /** Whether the new-password field is currently shown as plain text. */
+        this.showPassword = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        /** Whether the confirm-password field is currently shown as plain text. */
+        this.showPassword2 = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPassword2" }] : /* istanbul ignore next */ []));
+        const data = this.dialogData();
+        if (data.mode !== 'forgot' && !data.userId) {
+            this.dialogRef.close();
+            this.dialogService.error('Utente non specificato.');
+            return;
+        }
+        if (data.mode === 'forgot' && !data.userEmail) {
+            this.dialogRef.close();
+            this.dialogService.error('Email utente non specificata.');
+            return;
+        }
+        this.item.userEmail = data.userEmail;
+        this.item.userId = data.userId;
+    }
+    /**
+     * Emits the current form result to trigger the password-reset flow.
+     */
+    ok() {
+        this.done.emit(this.item);
+    }
+    /**
+     * Generates a random password and populates both password fields with it.
+     */
+    generatePassword() {
+        const password = SystemUtils.generatePassword();
+        this.item.password = password;
+        this.item.password2 = password;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResetPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ResetPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, host: { attributes: { "Bind": SystemUtils.generateUUID() } }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content>\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (userEmail.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    @if (dialogData().mode !== 'admin') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n        [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.oldPassword) {\r\n      <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n      }\r\n      @if (oldPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n        password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n        [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\" #newPwd2=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.password2) {\r\n      <password-strength [password]=\"item.password2\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd2.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FlexModule }, { kind: "directive", type: i1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: PasswordValidatorDirective, selector: "[password]" }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "directive", type: EqualsValidatorDirective, selector: "[equals]", inputs: ["equals"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResetPasswordDialogComponent, decorators: [{
+            type: Component,
+            args: [{ host: { 'Bind': SystemUtils.generateUUID() }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatDialogTitle,
+                        MatDialogContent,
+                        FormsModule,
+                        FlexModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        PasswordValidatorDirective,
+                        PasswordStrengthComponent,
+                        EqualsValidatorDirective,
+                        MatIconModule,
+                        MatDialogActions,
+                        MatButtonModule,
+                        MatDialogClose,
+                    ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content>\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (userEmail.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    @if (dialogData().mode !== 'admin') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n        [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.oldPassword) {\r\n      <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n      }\r\n      @if (oldPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n        password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n        [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\" #newPwd2=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.password2) {\r\n      <password-strength [password]=\"item.password2\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd2.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.fill{min-width:100%!important;max-width:100%!important;width:100%!important;min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important}.smaller{font-size:smaller!important}.small{font-size:small!important;line-height:16px!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:14px!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer-small .title-container{padding:20px 5px 20px 0}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding:14px 5px 20px 0}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
+
+/**
+ * @file breakpoints.ts
+ * Bootstrap 5 breakpoint definitions as CDK-compatible MediaQuery strings.
+ *
+ * CDK's BreakpointObserver already handles the actual matching — we only define aliases.
+ *
+ * Bootstrap 5 grid tiers:
+ *   xs   <  576px
+ *   sm   >= 576px
+ *   md   >= 768px
+ *   lg   >= 992px
+ *   xl   >= 1200px
+ *   xxl  >= 1400px
+ *
+ * Supported alias families:
+ *
+ *  Canonical ranges  xs | sm | md | lg | xl | xxl
+ *  "and up"          sm-up | md-up | lg-up | xl-up | xxl-up
+ *                    gt-xs | gt-sm | gt-md | gt-lg | gt-xl     (ngx-layout compat)
+ *  "and down"        sm-down | md-down | lg-down | xl-down
+ *                    lt-sm | lt-md | lt-lg | lt-xl | lt-xxl    (ngx-layout compat)
+ *
+ * The lt-* / gt-* aliases are exact mirrors of the -down / -up aliases.
+ * They share the same media query string so CDK deduplicates them internally.
+ */
+const BS5_BREAKPOINTS = {
+    // ── Canonical ranges ────────────────────────────────────────────────────────
+    'xs': '(max-width: 575.98px)',
+    'sm': '(min-width: 576px) and (max-width: 767.98px)',
+    'md': '(min-width: 768px) and (max-width: 991.98px)',
+    'lg': '(min-width: 992px) and (max-width: 1199.98px)',
+    'xl': '(min-width: 1200px) and (max-width: 1399.98px)',
+    'xxl': '(min-width: 1400px)',
+    // ── "and up" — Bootstrap style ───────────────────────────────────────────────
+    'sm-up': '(min-width: 576px)',
+    'md-up': '(min-width: 768px)',
+    'lg-up': '(min-width: 992px)',
+    'xl-up': '(min-width: 1200px)',
+    'xxl-up': '(min-width: 1400px)',
+    // ── "and up" — ngx-layout gt-* style ────────────────────────────────────────
+    'gt-xs': '(min-width: 576px)',
+    'gt-sm': '(min-width: 768px)',
+    'gt-md': '(min-width: 992px)',
+    'gt-lg': '(min-width: 1200px)',
+    'gt-xl': '(min-width: 1400px)',
+    // ── "and down" — Bootstrap style ─────────────────────────────────────────────
+    'sm-down': '(max-width: 767.98px)',
+    'md-down': '(max-width: 991.98px)',
+    'lg-down': '(max-width: 1199.98px)',
+    'xl-down': '(max-width: 1399.98px)',
+    // ── "and down" — ngx-layout lt-* style ──────────────────────────────────────
+    // lt-sm  = everything below sm  = xs only
+    'lt-sm': '(max-width: 575.98px)',
+    // lt-md  = everything below md  = xs + sm
+    'lt-md': '(max-width: 767.98px)',
+    // lt-lg  = everything below lg  = xs + sm + md
+    'lt-lg': '(max-width: 991.98px)',
+    // lt-xl  = everything below xl  = xs + sm + md + lg
+    'lt-xl': '(max-width: 1199.98px)',
+    // lt-xxl = everything below xxl = xs through xl
+    'lt-xxl': '(max-width: 1399.98px)',
+};
+/** InjectionToken — override to customise or extend breakpoints */
+const LAYOUT_BREAKPOINTS = new InjectionToken('LAYOUT_BREAKPOINTS', { providedIn: 'root', factory: () => BS5_BREAKPOINTS });
+/** Ordered canonical aliases, smallest → largest (used for mobile-first cascade) */
+const CANONICAL_ALIASES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+/**
+ * All non-canonical alias families.
+ * Used by ResponsiveBaseDirective.resolveNonCanonical() to handle lt-* / gt-* / *-up / *-down
+ * inputs without polluting the mobile-first cascade logic.
+ */
+const ALIAS_FAMILIES = {
+    up: ['sm-up', 'md-up', 'lg-up', 'xl-up', 'xxl-up'],
+    down: ['sm-down', 'md-down', 'lg-down', 'xl-down'],
+    gt: ['gt-xs', 'gt-sm', 'gt-md', 'gt-lg', 'gt-xl'],
+    lt: ['lt-sm', 'lt-md', 'lt-lg', 'lt-xl', 'lt-xxl'],
+};
+
+/**
+ * @file media-observer.service.ts  (v2 — optimized)
+ *
+ * ── Optimizations over v1 ─────────────────────────────────────────────────
+ *
+ * ✅ Single bo.observe() call for all 6 canonical breakpoints.
+ *    CDK internally uses one MediaQueryList listener per query string.
+ *    Calling observe() N times creates N listeners — here we create only one.
+ *
+ * ✅ currentBp$ is shared (shareReplay(1)): all subscribers (effects in
+ *    directives) receive the same value without redundant re-computations.
+ *
+ * ✅ The currentBp Signal is derived from the Observable via toSignal():
+ *    Angular manages the subscription internally and tears it down with root.
+ *
+ * ✅ isActive() delegates to bo.isMatched() — synchronous, O(1), no extra observer.
+ *
+ * ✅ isActive$() reuses the shared currentBp$ stream instead of opening
+ *    a new bo.observe() for every requested alias.
+ */
+class MediaObserver {
+    constructor() {
+        this.bo = inject(BreakpointObserver);
+        this.bp = inject(LAYOUT_BREAKPOINTS);
+        /**
+         * A SINGLE CDK observation for all 6 canonical breakpoints.
+         * Each breakpoint change emits → we resolve the current alias → shared.
+         *
+         * shareReplay(1): all subscribers (N directives in the DOM) receive
+         * the same value without N separate recomputations.
+         */
+        this.currentBp$ = this.bo
+            .observe(CANONICAL_ALIASES.map(a => this.bp[a]))
+            .pipe(map(() => this._resolve()), distinctUntilChanged(), // does not emit if the breakpoint hasn't actually changed
+        shareReplay(1) // multicast: N directives, 1 single execution
+        );
+        /**
+         * Signal derived from currentBp$.
+         * Directives read it via effect() — zero manual subscriptions.
+         * providedIn: 'root' ensures the Signal is a singleton.
+         */
+        this.currentBp = toSignal(this.currentBp$, {
+            initialValue: this._resolve(),
+        });
+    }
+    /**
+     * Returns true if the given alias (or raw media query) is currently active.
+     * Delegates to bo.isMatched() — synchronous, O(1), no extra observer created.
+     *
+     * @example
+     * media.isActive('md')      // true on 768–991px screens
+     * media.isActive('lg-up')   // true on 992px+
+     */
+    isActive(alias) {
+        const query = this.bp[alias] ?? alias; // fallback: treat as raw media query
+        return this.bo.isMatched(query);
+    }
+    /**
+     * Observable true/false for a specific alias.
+     * Reuses currentBp$ instead of opening a new bo.observe():
+     * no additional MediaQueryList listener is created.
+     */
+    isActive$(alias) {
+        return this.currentBp$.pipe(map(() => this.isActive(alias)), distinctUntilChanged());
+    }
+    /** Resolves the active canonical alias (from xxl down to xs, mobile-first) */
+    _resolve() {
+        for (let i = CANONICAL_ALIASES.length - 1; i >= 0; i--) {
+            if (this.bo.isMatched(this.bp[CANONICAL_ALIASES[i]])) {
+                return CANONICAL_ALIASES[i];
+            }
+        }
+        return 'xs';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MediaObserver, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: MediaObserver }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: MediaObserver, decorators: [{
+            type: Service
+        }] });
+
+/**
+ * @file if-bp.directive.ts  (Angular 21 — signals)
+ *
+ * *ifBp  — structural directive that adds/removes an element from the DOM
+ *          based on the active Bootstrap 5 breakpoint.
+ *
+ * Unlike [fxShow]/[fxHide] (which use display:none), *ifBp actually adds and
+ * removes the element from the DOM — ideal for heavy components like mat-sidenav.
+ *
+ * Angular 21 changes:
+ *   • @Input setters replaced by input() / input.required()
+ *   • computed() derives alias list and active state reactively
+ *   • effect() in constructor handles DOM add/remove (no OnInit/OnChanges)
+ *   • No Injector, EffectRef, _initialized guard or manual subscriptions
+ *
+ * Usage:
+ *   <mat-sidenav *ifBp="'lg-up'">             only rendered on lg and above
+ *   <div *ifBp="'xs'">Mobile only</div>
+ *   <div *ifBp="'sm md'">sm and md only (space-separated list of aliases)</div>
+ *   <div *ifBp="'lg-up'; else mobileRef">Desktop view</div>
+ *   <ng-template #mobileRef>Mobile fallback</ng-template>
+ *
+ * Accepted alias values:
+ *   xs | sm | md | lg | xl | xxl
+ *   sm-up | md-up | lg-up | xl-up | xxl-up
+ *   sm-down | md-down | lg-down | xl-down
+ *   Space-separated list of any of the above
+ */
+class IfBpDirective {
+    constructor() {
+        this.tpl = inject((TemplateRef));
+        this.vcr = inject(ViewContainerRef);
+        this.media = inject(MediaObserver);
+        /** Space-separated list of breakpoint aliases, e.g. `'lg xl xxl-up'` */
+        this.ifBp = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ifBp" }] : /* istanbul ignore next */ []));
+        /** Optional else-template shown when no alias is active */
+        this.ifBpElse = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "ifBpElse" }] : /* istanbul ignore next */ []));
+        this._aliases = computed(() => this.ifBp().trim().split(/\s+/), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_aliases" }] : /* istanbul ignore next */ []));
+        this._isActive = computed(() => {
+            this.media.currentBp(); // reactive dependency — re-evaluates on breakpoint change
+            return this._aliases().some(alias => this.media.isActive(alias));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
+        /** Tracks whether the main view is currently embedded — plain field, not a signal. */
+        this._hasView = false;
+        effect(() => {
+            const active = this._isActive();
+            const elseTpl = this.ifBpElse();
+            if (active === this._hasView)
+                return; // dirty-check
+            this.vcr.clear();
+            if (active) {
+                this.vcr.createEmbeddedView(this.tpl);
+            }
+            else if (elseTpl) {
+                this.vcr.createEmbeddedView(elseTpl);
+            }
+            this._hasView = active;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IfBpDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: IfBpDirective, isStandalone: true, selector: "[ifBp]", inputs: { ifBp: { classPropertyName: "ifBp", publicName: "ifBp", isSignal: true, isRequired: true, transformFunction: null }, ifBpElse: { classPropertyName: "ifBpElse", publicName: "ifBpElse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: IfBpDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ifBp]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { ifBp: [{ type: i0.Input, args: [{ isSignal: true, alias: "ifBp", required: true }] }], ifBpElse: [{ type: i0.Input, args: [{ isSignal: true, alias: "ifBpElse", required: false }] }] } });
+
+/**
+ * @file responsive-base.directive.ts  (v5 — Angular 21 signals)
+ *
+ * ── What changed in v5 ────────────────────────────────────────────────────
+ *
+ * Full Angular 21 signals refactor:
+ *
+ *   • resolve(), resolveNonCanonical(), resolveAll() are now PURE EXPORTED
+ *     FUNCTIONS that accept currentBp and isActive as parameters.
+ *     Directives call them from computed() or effect() with no "this" binding.
+ *
+ *   • ResponsiveBaseDirective is now a thin utility base:
+ *     – Only injects ElementRef, Renderer2, MediaObserver, PLATFORM_ID.
+ *     – Exposes safeSetStyle() helper.
+ *     – No lifecycle hooks, no Injector, no EffectRef, no abstract apply().
+ *
+ *   • Each concrete directive uses:
+ *     – input()      for every @Input (signals, no more setters + _v/_nc maps)
+ *     – computed()   to build BpValues / NcValues maps and derive resolved CSS
+ *     – effect()     in the constructor to write to the DOM
+ *
+ *   Benefits vs v4:
+ *     ✅ Zero manual lifecycle/subscription management (no OnInit/OnChanges/EffectRef)
+ *     ✅ Angular's reactive graph provides built-in dirty-checking and memoization
+ *     ✅ DOM writes happen only when the resolved CSS value actually changes
+ *     ✅ No more Injector injection just to create effects
+ *
+ * ── Resolution strategy (unchanged) ──────────────────────────────────────
+ *
+ * Canonical aliases (xs … xxl)  → mobile-first cascade via resolve()
+ * Non-canonical (lt-*, gt-*, *-up, *-down) → point-in-time isActive() checks
+ * Final order: resolveNonCanonical() wins over resolve()
+ */
+// ── O(1) alias → index lookup (module-level constant, shared across instances) ──
+const ALIAS_INDEX = new Map(CANONICAL_ALIASES.map((a, i) => [a, i]));
+/**
+ * All non-canonical alias keys in priority order (most specific first).
+ * lt-sm is "below sm" (= xs only), lt-md is "below md" (= xs+sm), etc.
+ * Narrower range = higher priority = checked first.
+ */
+const NON_CANONICAL_PRIORITY = [
+    // lt-* from narrowest to widest
+    'lt-sm', 'lt-md', 'lt-lg', 'lt-xl', 'lt-xxl',
+    // gt-* from widest to narrowest
+    'gt-xs', 'gt-sm', 'gt-md', 'gt-lg', 'gt-xl',
+    // Bootstrap *-down from narrowest to widest
+    'sm-down', 'md-down', 'lg-down', 'xl-down',
+    // Bootstrap *-up from widest to narrowest
+    'sm-up', 'md-up', 'lg-up', 'xl-up', 'xxl-up',
+];
+// ── Pure resolution functions ─────────────────────────────────────────────────
+// These are standalone functions (not class methods) so they can be called
+// from computed() closures without capturing `this`.
+/**
+ * Resolution with three-tier priority:
+ *
+ * 1. Exact breakpoint match  (e.g. currentBp='sm' → values['sm'])
+ * 2. Generic `default` value (e.g. [fxFlex]="49" — applies to all unspecified bps)
+ * 3. Mobile-first cascade down (e.g. [fxFlex.xs]="X" [fxFlex.md]="Y" → lg cascades to md)
+ *
+ * This ensures [fxFlex]="49" [fxFlex.xs]="100" gives xs→100 and sm+→49,
+ * instead of `xs` cascading up and shadowing the default on sm/md/lg.
+ */
+function resolve(values, currentBp) {
+    // 1. Exact match
+    const exact = values[currentBp];
+    if (exact !== undefined)
+        return exact;
+    // 2. Generic default (wins over cascade — it's the "applies everywhere" value)
+    const def = values['default'];
+    if (def !== undefined)
+        return def;
+    // 3. Mobile-first cascade (only when no default — e.g. [fxFlex.xs]="X" [fxFlex.md]="Y")
+    const idx = ALIAS_INDEX.get(currentBp) ?? 0;
+    for (let i = idx - 1; i >= 0; i--) {
+        const v = values[CANONICAL_ALIASES[i]];
+        if (v !== undefined)
+            return v;
+    }
+    return undefined;
+}
+/**
+ * Non-canonical point-in-time check: iterates NON_CANONICAL_PRIORITY and
+ * returns the value for the first alias that isActive().
+ */
+function resolveNonCanonical(nc, isActive) {
+    for (const alias of NON_CANONICAL_PRIORITY) {
+        const v = nc[alias];
+        if (v !== undefined && isActive(alias))
+            return v;
+    }
+    return undefined;
+}
+/**
+ * Full resolution: non-canonical overrides win over the canonical cascade.
+ *
+ * Usage inside computed():
+ *   const resolved = computed(() =>
+ *     resolveAll(this._v(), this._nc(), this.media.currentBp(), a => this.media.isActive(a))
+ *   );
+ */
+function resolveAll(canonical, nonCanonical, currentBp, isActive) {
+    return resolveNonCanonical(nonCanonical, isActive) ?? resolve(canonical, currentBp);
+}
+// ── Base directive ─────────────────────────────────────────────────────────────
+class ResponsiveBaseDirective {
+    constructor() {
+        this.el = inject((ElementRef));
+        this.r2 = inject(Renderer2);
+        this.media = inject(MediaObserver);
+        /** true in browser, false in SSR */
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    }
+    /** SSR-safe style setter. Pass null/empty string to remove the property. */
+    safeSetStyle(prop, value) {
+        if (value === null || value === '') {
+            this.r2.removeStyle(this.el.nativeElement, prop);
+        }
+        else {
+            this.r2.setStyle(this.el.nativeElement, prop, value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResponsiveBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: ResponsiveBaseDirective, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ResponsiveBaseDirective, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * @file fx-flex-extras.directives.ts  (Angular 21 — signals)
+ *
+ * Flex child helper directives:
+ *   [fxFlexOrder]   — CSS order
+ *   [fxFlexOffset]  — margin-inline-start (RTL-safe)
+ *   [fxFlexAlign]   — align-self override
+ *   [fxFlexFill]    — fills the container (width/height 100%)
+ *
+ * Angular 21 changes:
+ *   • All @Input setters replaced by input() signals
+ *   • computed() derives the resolved CSS values
+ *   • effect() in constructor writes to DOM — no lifecycle hooks
+ *
+ * Breakpoint suffixes: canonical + lt-* + gt-* + *-up + *-down
+ */
+class FxFlexOrderDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxFlexOrder = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexOrder" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOrder.xl-down' });
+        this._order = computed(() => resolveAll({ default: this.fxFlexOrder(), 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', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_order" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const v = this._order();
+            if (isDevMode() && isNaN(Number(v)))
+                console.warn(`[fxFlexOrder] Non-numeric value: "${v}"`);
+            this.safeSetStyle('order', v);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOrderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxFlexOrderDirective, isStandalone: true, selector: "\n    [fxFlexOrder],\n    [fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],\n    [fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],\n    [fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],\n    [fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],\n    [fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]\n  ", inputs: { fxFlexOrder: { classPropertyName: "fxFlexOrder", publicName: "fxFlexOrder", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexOrder.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexOrder.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexOrder.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexOrder.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexOrder.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexOrder.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexOrder.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexOrder.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexOrder.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexOrder.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexOrder.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexOrder.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexOrder.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexOrder.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexOrder.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexOrder.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexOrder.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexOrder.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexOrder.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexOrder.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexOrder.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexOrder.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexOrder.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexOrder.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexOrder.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOrderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxFlexOrder],
+    [fxFlexOrder.xs],[fxFlexOrder.sm],[fxFlexOrder.md],[fxFlexOrder.lg],[fxFlexOrder.xl],[fxFlexOrder.xxl],
+    [fxFlexOrder.lt-sm],[fxFlexOrder.lt-md],[fxFlexOrder.lt-lg],[fxFlexOrder.lt-xl],[fxFlexOrder.lt-xxl],
+    [fxFlexOrder.gt-xs],[fxFlexOrder.gt-sm],[fxFlexOrder.gt-md],[fxFlexOrder.gt-lg],[fxFlexOrder.gt-xl],
+    [fxFlexOrder.sm-up],[fxFlexOrder.md-up],[fxFlexOrder.lg-up],[fxFlexOrder.xl-up],[fxFlexOrder.xxl-up],
+    [fxFlexOrder.sm-down],[fxFlexOrder.md-down],[fxFlexOrder.lg-down],[fxFlexOrder.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxFlexOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOrder.xl-down", required: false }] }] } });
+// ─── fxFlexOffset ────────────────────────────────────────────────────────────
+class FxFlexOffsetDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxFlexOffset = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexOffset" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexOffset.xl-down' });
+        this._offset = computed(() => resolveAll({ default: this.fxFlexOffset(), 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', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_offset" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const v = this._offset();
+            // ngx-layout parity: when the parent flex container is a column, offset
+            // means push down on the cross axis -> margin-top. Otherwise (row or any
+            // non-flex parent, e.g. plain block) push on the inline axis -> margin-inline-start
+            // (RTL-safe). Detection is done via getComputedStyle so it works both with
+            // [fxLayout] and with plain CSS flex containers.
+            if (!this.isBrowser) {
+                this.safeSetStyle('margin-inline-start', v);
+                return;
+            }
+            const parent = this.el.nativeElement.parentElement;
+            const isColumn = !!parent &&
+                /^column/.test(getComputedStyle(parent).flexDirection || '');
+            if (isColumn) {
+                this.safeSetStyle('margin-inline-start', null);
+                this.safeSetStyle('margin-top', v);
+            }
+            else {
+                this.safeSetStyle('margin-top', null);
+                this.safeSetStyle('margin-inline-start', v);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOffsetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxFlexOffsetDirective, isStandalone: true, selector: "\n    [fxFlexOffset],\n    [fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],\n    [fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],\n    [fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],\n    [fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],\n    [fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]\n  ", inputs: { fxFlexOffset: { classPropertyName: "fxFlexOffset", publicName: "fxFlexOffset", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexOffset.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexOffset.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexOffset.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexOffset.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexOffset.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexOffset.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexOffset.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexOffset.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexOffset.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexOffset.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexOffset.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexOffset.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexOffset.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexOffset.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexOffset.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexOffset.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexOffset.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexOffset.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexOffset.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexOffset.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexOffset.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexOffset.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexOffset.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexOffset.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexOffset.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexOffsetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxFlexOffset],
+    [fxFlexOffset.xs],[fxFlexOffset.sm],[fxFlexOffset.md],[fxFlexOffset.lg],[fxFlexOffset.xl],[fxFlexOffset.xxl],
+    [fxFlexOffset.lt-sm],[fxFlexOffset.lt-md],[fxFlexOffset.lt-lg],[fxFlexOffset.lt-xl],[fxFlexOffset.lt-xxl],
+    [fxFlexOffset.gt-xs],[fxFlexOffset.gt-sm],[fxFlexOffset.gt-md],[fxFlexOffset.gt-lg],[fxFlexOffset.gt-xl],
+    [fxFlexOffset.sm-up],[fxFlexOffset.md-up],[fxFlexOffset.lg-up],[fxFlexOffset.xl-up],[fxFlexOffset.xxl-up],
+    [fxFlexOffset.sm-down],[fxFlexOffset.md-down],[fxFlexOffset.lg-down],[fxFlexOffset.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxFlexOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexOffset.xl-down", required: false }] }] } });
+const ALIGN_SELF_MAP = {
+    start: 'flex-start', end: 'flex-end', center: 'center',
+    stretch: 'stretch', baseline: 'baseline', auto: 'auto',
+};
+class FxFlexAlignDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxFlexAlign = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexAlign" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexAlign.xl-down' });
+        this._alignSelf = computed(() => {
+            const v = resolveAll({ default: this.fxFlexAlign(), 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)) ?? 'stretch';
+            if (isDevMode() && !ALIGN_SELF_MAP[v])
+                console.warn(`[fxFlexAlign] Unknown value: "${v}". Valid: ${Object.keys(ALIGN_SELF_MAP).join(', ')}`);
+            return ALIGN_SELF_MAP[v] ?? v;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_alignSelf" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('align-self', this._alignSelf()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxFlexAlignDirective, isStandalone: true, selector: "\n    [fxFlexAlign],\n    [fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],\n    [fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],\n    [fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],\n    [fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],\n    [fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]\n  ", inputs: { fxFlexAlign: { classPropertyName: "fxFlexAlign", publicName: "fxFlexAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxFlexAlign],
+    [fxFlexAlign.xs],[fxFlexAlign.sm],[fxFlexAlign.md],[fxFlexAlign.lg],[fxFlexAlign.xl],[fxFlexAlign.xxl],
+    [fxFlexAlign.lt-sm],[fxFlexAlign.lt-md],[fxFlexAlign.lt-lg],[fxFlexAlign.lt-xl],[fxFlexAlign.lt-xxl],
+    [fxFlexAlign.gt-xs],[fxFlexAlign.gt-sm],[fxFlexAlign.gt-md],[fxFlexAlign.gt-lg],[fxFlexAlign.gt-xl],
+    [fxFlexAlign.sm-up],[fxFlexAlign.md-up],[fxFlexAlign.lg-up],[fxFlexAlign.xl-up],[fxFlexAlign.xxl-up],
+    [fxFlexAlign.sm-down],[fxFlexAlign.md-down],[fxFlexAlign.lg-down],[fxFlexAlign.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxFlexAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexAlign.xl-down", required: false }] }] } });
+function toBool$1(v) {
+    if (v === undefined)
+        return undefined;
+    if (typeof v === 'boolean')
+        return v;
+    if (v === '')
+        return true;
+    return v !== 'none';
+}
+class FxFlexFillDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxFlexFill = input(undefined, { ...(ngDevMode ? { debugName: "fxFlexFill" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill', transform: toBool$1 });
+        this.fxFill = input(undefined, { ...(ngDevMode ? { debugName: "fxFill" } : /* istanbul ignore next */ {}), alias: 'fxFill', transform: toBool$1 });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xs', transform: toBool$1 });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.sm', transform: toBool$1 });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.md', transform: toBool$1 });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lg', transform: toBool$1 });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xl', transform: toBool$1 });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xxl', transform: toBool$1 });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lt-sm', transform: toBool$1 });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lt-md', transform: toBool$1 });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lt-lg', transform: toBool$1 });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lt-xl', transform: toBool$1 });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lt-xxl', transform: toBool$1 });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.gt-xs', transform: toBool$1 });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.gt-sm', transform: toBool$1 });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.gt-md', transform: toBool$1 });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.gt-lg', transform: toBool$1 });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.gt-xl', transform: toBool$1 });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.sm-up', transform: toBool$1 });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.md-up', transform: toBool$1 });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lg-up', transform: toBool$1 });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xl-up', transform: toBool$1 });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xxl-up', transform: toBool$1 });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.sm-down', transform: toBool$1 });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.md-down', transform: toBool$1 });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.lg-down', transform: toBool$1 });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxFlexFill.xl-down', transform: toBool$1 });
+        this._active = computed(() => resolveAll(
+        // fxFill is a shorthand alias for the default; fxFlexFill wins if both set
+        { default: this.fxFlexFill() ?? this.fxFill(),
+            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)) ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const active = this._active();
+            const v = active ? '100%' : null;
+            this.safeSetStyle('margin', active ? '0' : null);
+            // align-self: stretch ensures this element fills the parent's cross axis even
+            // when the parent flex container has align-items: center (e.g. mat-toolbar).
+            // Without this, height: 100% collapses to content height and align-items on
+            // this container has no visible centering space.
+            this.safeSetStyle('align-self', active ? 'stretch' : null);
+            this.safeSetStyle('width', v);
+            this.safeSetStyle('height', v);
+            this.safeSetStyle('min-width', v);
+            this.safeSetStyle('min-height', v);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexFillDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxFlexFillDirective, isStandalone: true, selector: "\n    [fxFlexFill],[fxFill],\n    [fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],\n    [fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],\n    [fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],\n    [fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],\n    [fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]\n  ", inputs: { fxFlexFill: { classPropertyName: "fxFlexFill", publicName: "fxFlexFill", isSignal: true, isRequired: false, transformFunction: null }, fxFill: { classPropertyName: "fxFill", publicName: "fxFill", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxFlexFill.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxFlexFill.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxFlexFill.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxFlexFill.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxFlexFill.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxFlexFill.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxFlexFill.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxFlexFill.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxFlexFill.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxFlexFill.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxFlexFill.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxFlexFill.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxFlexFill.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxFlexFill.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxFlexFill.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxFlexFill.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxFlexFill.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxFlexFill.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxFlexFill.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxFlexFill.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxFlexFill.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxFlexFill.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxFlexFill.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxFlexFill.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxFlexFill.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxFlexFillDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxFlexFill],[fxFill],
+    [fxFlexFill.xs],[fxFlexFill.sm],[fxFlexFill.md],[fxFlexFill.lg],[fxFlexFill.xl],[fxFlexFill.xxl],
+    [fxFlexFill.lt-sm],[fxFlexFill.lt-md],[fxFlexFill.lt-lg],[fxFlexFill.lt-xl],[fxFlexFill.lt-xxl],
+    [fxFlexFill.gt-xs],[fxFlexFill.gt-sm],[fxFlexFill.gt-md],[fxFlexFill.gt-lg],[fxFlexFill.gt-xl],
+    [fxFlexFill.sm-up],[fxFlexFill.md-up],[fxFlexFill.lg-up],[fxFlexFill.xl-up],[fxFlexFill.xxl-up],
+    [fxFlexFill.sm-down],[fxFlexFill.md-down],[fxFlexFill.lg-down],[fxFlexFill.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxFlexFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill", required: false }] }], fxFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFill", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxFlexFill.xl-down", required: false }] }] } });
+
+/**
+ * @file fx-flex.directive.ts  (Angular 21 — signals)
+ *
+ * [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)), /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", 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$1(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)), /* @ts-ignore */
+        ...(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)), /* @ts-ignore */
+        ...(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))), /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxGridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxGrid],
+    [fxGrid.xs],[fxGrid.sm],[fxGrid.md],[fxGrid.lg],[fxGrid.xl],[fxGrid.xxl],
+    [fxGrid.lt-sm],[fxGrid.lt-md],[fxGrid.lt-lg],[fxGrid.lt-xl],[fxGrid.lt-xxl],
+    [fxGrid.gt-xs],[fxGrid.gt-sm],[fxGrid.gt-md],[fxGrid.gt-lg],[fxGrid.gt-xl],
+    [fxGrid.sm-up],[fxGrid.md-up],[fxGrid.lg-up],[fxGrid.xl-up],[fxGrid.xxl-up],
+    [fxGrid.sm-down],[fxGrid.md-down],[fxGrid.lg-down],[fxGrid.xl-down]
+  `,
+                    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 {
+    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(),
+            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)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            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: "22.0.1", ngImport: i0, type: FxGridColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxGridColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxGridColumn],
+    [fxGridColumn.xs],[fxGridColumn.sm],[fxGridColumn.md],[fxGridColumn.lg],[fxGridColumn.xl],[fxGridColumn.xxl],
+    [fxGridColumn.lt-sm],[fxGridColumn.lt-md],[fxGridColumn.lt-lg],[fxGridColumn.lt-xl],[fxGridColumn.lt-xxl],
+    [fxGridColumn.gt-xs],[fxGridColumn.gt-sm],[fxGridColumn.gt-md],[fxGridColumn.gt-lg],[fxGridColumn.gt-xl],
+    [fxGridColumn.sm-up],[fxGridColumn.md-up],[fxGridColumn.lg-up],[fxGridColumn.xl-up],[fxGridColumn.xxl-up],
+    [fxGridColumn.sm-down],[fxGridColumn.md-down],[fxGridColumn.lg-down],[fxGridColumn.xl-down]
+  `,
+                    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 {
+    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(),
+            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)), /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxGridAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxGridAreaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxGridArea],
+    [fxGridArea.xs],[fxGridArea.sm],[fxGridArea.md],[fxGridArea.lg],[fxGridArea.xl],[fxGridArea.xxl],
+    [fxGridArea.lt-sm],[fxGridArea.lt-md],[fxGridArea.lt-lg],[fxGridArea.lt-xl],[fxGridArea.lt-xxl],
+    [fxGridArea.gt-xs],[fxGridArea.gt-sm],[fxGridArea.gt-md],[fxGridArea.gt-lg],[fxGridArea.gt-xl],
+    [fxGridArea.sm-up],[fxGridArea.md-up],[fxGridArea.lg-up],[fxGridArea.xl-up],[fxGridArea.xxl-up],
+    [fxGridArea.sm-down],[fxGridArea.md-down],[fxGridArea.lg-down],[fxGridArea.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxGridArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxGridArea.xl-down", required: false }] }] } });
+
+/**
+ * @file fx-layout-align.directive.ts  (Angular 21 — signals)
+ *
+ * [fxLayoutAlign]  — sets justify-content + align-items on a flex container.
+ *
+ * Format: "mainAxis crossAxis"
+ *   mainAxis  : start | center | end | space-between | space-around | space-evenly
+ *   crossAxis : start | center | end | stretch | baseline  (default: stretch)
+ *
+ * Angular 21 changes:
+ *   • All @Input setters replaced by input() signals
+ *   • computed() derives the resolved CSS pair
+ *   • effect() in constructor writes to DOM
+ *
+ * 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'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const [jc, ai] = this._parsed();
+            this.safeSetStyle('justify-content', jc);
+            this.safeSetStyle('align-items', ai);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutAlignDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutAlignDirective, isStandalone: true, selector: "\n    [fxLayoutAlign],\n    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],\n    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],\n    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],\n    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],\n    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]\n  ", inputs: { fxLayoutAlign: { classPropertyName: "fxLayoutAlign", publicName: "fxLayoutAlign", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutAlign.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutAlign.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutAlign.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutAlign.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutAlign.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutAlign.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutAlign.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutAlign.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutAlign.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutAlign.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutAlign.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutAlign.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutAlign.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutAlign.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutAlign.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutAlign.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutAlign.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutAlign.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutAlign.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutAlign.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutAlign.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutAlign.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutAlign.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutAlign.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutAlign.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"flex\"" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayoutAlign],
+    [fxLayoutAlign.xs],[fxLayoutAlign.sm],[fxLayoutAlign.md],[fxLayoutAlign.lg],[fxLayoutAlign.xl],[fxLayoutAlign.xxl],
+    [fxLayoutAlign.lt-sm],[fxLayoutAlign.lt-md],[fxLayoutAlign.lt-lg],[fxLayoutAlign.lt-xl],[fxLayoutAlign.lt-xxl],
+    [fxLayoutAlign.gt-xs],[fxLayoutAlign.gt-sm],[fxLayoutAlign.gt-md],[fxLayoutAlign.gt-lg],[fxLayoutAlign.gt-xl],
+    [fxLayoutAlign.sm-up],[fxLayoutAlign.md-up],[fxLayoutAlign.lg-up],[fxLayoutAlign.xl-up],[fxLayoutAlign.xxl-up],
+    [fxLayoutAlign.sm-down],[fxLayoutAlign.md-down],[fxLayoutAlign.lg-down],[fxLayoutAlign.xl-down]
+  `,
+                    standalone: true,
+                    // fxLayoutAlign implies a flex container. The host binding makes this SSR-safe
+                    // and avoids racing with fxLayout (which also sets display:flex via host binding):
+                    // when both directives are on the same element Angular sets the property once.
+                    host: { '[style.display]': '"flex"' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayoutAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutAlign.xl-down", required: false }] }] } });
+
+/**
+ * @file fx-layout-gap.directive.ts  (Angular 21 — signals)
+ *
+ * [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 normalizeGap(raw) {
+    return raw.trim().split(/\s+/)
+        .map(v => /^\d+(\.\d+)?$/.test(v) ? `${v}px` : v)
+        .join(' ');
+}
+class FxLayoutGapDirective 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(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'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_gap" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('gap', this._gap()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutGapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutGapDirective, isStandalone: true, selector: "\n    [fxLayoutGap],\n    [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],\n    [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],\n    [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],\n    [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],\n    [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]\n  ", inputs: { fxLayoutGap: { classPropertyName: "fxLayoutGap", publicName: "fxLayoutGap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutGap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutGap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutGap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutGap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutGap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutGap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutGap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutGap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutGap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutGap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutGap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutGap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutGap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutGap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutGap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutGap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutGap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutGap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutGap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutGap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutGap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutGap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutGap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutGap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutGap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutGapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayoutGap],
+    [fxLayoutGap.xs],[fxLayoutGap.sm],[fxLayoutGap.md],[fxLayoutGap.lg],[fxLayoutGap.xl],[fxLayoutGap.xxl],
+    [fxLayoutGap.lt-sm],[fxLayoutGap.lt-md],[fxLayoutGap.lt-lg],[fxLayoutGap.lt-xl],[fxLayoutGap.lt-xxl],
+    [fxLayoutGap.gt-xs],[fxLayoutGap.gt-sm],[fxLayoutGap.gt-md],[fxLayoutGap.gt-lg],[fxLayoutGap.gt-xl],
+    [fxLayoutGap.sm-up],[fxLayoutGap.md-up],[fxLayoutGap.lg-up],[fxLayoutGap.xl-up],[fxLayoutGap.xxl-up],
+    [fxLayoutGap.sm-down],[fxLayoutGap.md-down],[fxLayoutGap.lg-down],[fxLayoutGap.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayoutGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutGap.xl-down", required: false }] }] } });
+
+/**
+ * @file fx-layout.directive.ts  (Angular 21 - signals)
+ *
+ * [fxLayout]     -- sets flex-direction (and optionally flex-wrap) on the host.
+ * [fxLayoutWrap] -- dedicated alias for flex-wrap (original ngx-layout compat).
+ *
+ * Angular 21 changes:
+ *   - All @Input setters replaced by input() signals
+ *   - computed() builds reactive BP maps and derives CSS values
+ *   - effect() in constructor writes to DOM -- no lifecycle hooks
+ *
+ * Breakpoint suffixes:
+ *   Canonical : .xs .sm .md .lg .xl .xxl
+ *   lt-*      : .lt-sm .lt-md .lt-lg .lt-xl .lt-xxl
+ *   gt-*      : .gt-xs .gt-sm .gt-md .gt-lg .gt-xl
+ *   *-up      : .sm-up .md-up .lg-up .xl-up .xxl-up
+ *   *-down    : .sm-down .md-down .lg-down .xl-down
+ */
+const VALID_DIRECTIONS = new Set(['row', 'column', 'row-reverse', 'column-reverse']);
+const VALID_WRAPS = new Set(['wrap', 'wrap-reverse', 'nowrap']);
+function parseLayout(raw) {
+    const parts = raw.trim().split(/\s+/);
+    const dir = VALID_DIRECTIONS.has(parts[0]) ? parts[0] : 'row';
+    const wrap = VALID_WRAPS.has(parts[1]) ? parts[1] : 'nowrap';
+    return [dir, wrap];
+}
+class FxLayoutDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxLayout = input('row', { ...(ngDevMode ? { debugName: "fxLayout" } : /* istanbul ignore next */ {}), alias: 'fxLayout' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayout.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayout.xl-down' });
+        this._parsed = computed(() => parseLayout(resolveAll({ default: this.fxLayout(), xs: this.xs(), sm: this.sm(), md: this.md(),
+            lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
+            'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
+            'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
+            'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
+            'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
+            'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
+            'sm-down': this.smDown(), 'md-down': this.mdDown(),
+            'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'row'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_parsed" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const [dir, wrap] = this._parsed();
+            this.safeSetStyle('flex-direction', dir);
+            this.safeSetStyle('flex-wrap', wrap);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutDirective, isStandalone: true, selector: "\n    [fxLayout],\n    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],\n    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],\n    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],\n    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],\n    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]\n  ", inputs: { fxLayout: { classPropertyName: "fxLayout", publicName: "fxLayout", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayout.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayout.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayout.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayout.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayout.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayout.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayout.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayout.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayout.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayout.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayout.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayout.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayout.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayout.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayout.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayout.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayout.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayout.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayout.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayout.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayout.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayout.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayout.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayout.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayout.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"flex\"" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayout],
+    [fxLayout.xs],[fxLayout.sm],[fxLayout.md],[fxLayout.lg],[fxLayout.xl],[fxLayout.xxl],
+    [fxLayout.lt-sm],[fxLayout.lt-md],[fxLayout.lt-lg],[fxLayout.lt-xl],[fxLayout.lt-xxl],
+    [fxLayout.gt-xs],[fxLayout.gt-sm],[fxLayout.gt-md],[fxLayout.gt-lg],[fxLayout.gt-xl],
+    [fxLayout.sm-up],[fxLayout.md-up],[fxLayout.lg-up],[fxLayout.xl-up],[fxLayout.xxl-up],
+    [fxLayout.sm-down],[fxLayout.md-down],[fxLayout.lg-down],[fxLayout.xl-down]
+  `,
+                    standalone: true,
+                    host: { '[style.display]': '"flex"' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayout.xl-down", required: false }] }] } });
+class FxLayoutWrapDirective extends ResponsiveBaseDirective {
+    constructor() {
+        super();
+        this.fxLayoutWrap = input('wrap', { ...(ngDevMode ? { debugName: "fxLayoutWrap" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap' });
+        this.xs = input(undefined, { ...(ngDevMode ? { debugName: "xs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xs' });
+        this.sm = input(undefined, { ...(ngDevMode ? { debugName: "sm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm' });
+        this.md = input(undefined, { ...(ngDevMode ? { debugName: "md" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md' });
+        this.lg = input(undefined, { ...(ngDevMode ? { debugName: "lg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg' });
+        this.xl = input(undefined, { ...(ngDevMode ? { debugName: "xl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl' });
+        this.xxl = input(undefined, { ...(ngDevMode ? { debugName: "xxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl' });
+        this.ltSm = input(undefined, { ...(ngDevMode ? { debugName: "ltSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-sm' });
+        this.ltMd = input(undefined, { ...(ngDevMode ? { debugName: "ltMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-md' });
+        this.ltLg = input(undefined, { ...(ngDevMode ? { debugName: "ltLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-lg' });
+        this.ltXl = input(undefined, { ...(ngDevMode ? { debugName: "ltXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xl' });
+        this.ltXxl = input(undefined, { ...(ngDevMode ? { debugName: "ltXxl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lt-xxl' });
+        this.gtXs = input(undefined, { ...(ngDevMode ? { debugName: "gtXs" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xs' });
+        this.gtSm = input(undefined, { ...(ngDevMode ? { debugName: "gtSm" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-sm' });
+        this.gtMd = input(undefined, { ...(ngDevMode ? { debugName: "gtMd" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-md' });
+        this.gtLg = input(undefined, { ...(ngDevMode ? { debugName: "gtLg" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-lg' });
+        this.gtXl = input(undefined, { ...(ngDevMode ? { debugName: "gtXl" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.gt-xl' });
+        this.smUp = input(undefined, { ...(ngDevMode ? { debugName: "smUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-up' });
+        this.mdUp = input(undefined, { ...(ngDevMode ? { debugName: "mdUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-up' });
+        this.lgUp = input(undefined, { ...(ngDevMode ? { debugName: "lgUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-up' });
+        this.xlUp = input(undefined, { ...(ngDevMode ? { debugName: "xlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-up' });
+        this.xxlUp = input(undefined, { ...(ngDevMode ? { debugName: "xxlUp" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xxl-up' });
+        this.smDown = input(undefined, { ...(ngDevMode ? { debugName: "smDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.sm-down' });
+        this.mdDown = input(undefined, { ...(ngDevMode ? { debugName: "mdDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.md-down' });
+        this.lgDown = input(undefined, { ...(ngDevMode ? { debugName: "lgDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.lg-down' });
+        this.xlDown = input(undefined, { ...(ngDevMode ? { debugName: "xlDown" } : /* istanbul ignore next */ {}), alias: 'fxLayoutWrap.xl-down' });
+        this._wrap = computed(() => {
+            const w = resolveAll({ default: this.fxLayoutWrap(), xs: this.xs(), sm: this.sm(), md: this.md(),
+                lg: this.lg(), xl: this.xl(), xxl: this.xxl() }, { 'lt-sm': this.ltSm(), 'lt-md': this.ltMd(), 'lt-lg': this.ltLg(),
+                'lt-xl': this.ltXl(), 'lt-xxl': this.ltXxl(),
+                'gt-xs': this.gtXs(), 'gt-sm': this.gtSm(), 'gt-md': this.gtMd(),
+                'gt-lg': this.gtLg(), 'gt-xl': this.gtXl(),
+                'sm-up': this.smUp(), 'md-up': this.mdUp(), 'lg-up': this.lgUp(),
+                'xl-up': this.xlUp(), 'xxl-up': this.xxlUp(),
+                'sm-down': this.smDown(), 'md-down': this.mdDown(),
+                'lg-down': this.lgDown(), 'xl-down': this.xlDown() }, this.media.currentBp(), a => this.media.isActive(a)) ?? 'wrap';
+            return VALID_WRAPS.has(w) ? w : 'wrap';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_wrap" }] : /* istanbul ignore next */ []));
+        effect(() => { this.safeSetStyle('flex-wrap', this._wrap()); });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: FxLayoutWrapDirective, isStandalone: true, selector: "\n    [fxLayoutWrap],\n    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],\n    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],\n    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],\n    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],\n    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]\n  ", inputs: { fxLayoutWrap: { classPropertyName: "fxLayoutWrap", publicName: "fxLayoutWrap", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "fxLayoutWrap.xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "fxLayoutWrap.sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "fxLayoutWrap.md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "fxLayoutWrap.lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "fxLayoutWrap.xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "fxLayoutWrap.xxl", isSignal: true, isRequired: false, transformFunction: null }, ltSm: { classPropertyName: "ltSm", publicName: "fxLayoutWrap.lt-sm", isSignal: true, isRequired: false, transformFunction: null }, ltMd: { classPropertyName: "ltMd", publicName: "fxLayoutWrap.lt-md", isSignal: true, isRequired: false, transformFunction: null }, ltLg: { classPropertyName: "ltLg", publicName: "fxLayoutWrap.lt-lg", isSignal: true, isRequired: false, transformFunction: null }, ltXl: { classPropertyName: "ltXl", publicName: "fxLayoutWrap.lt-xl", isSignal: true, isRequired: false, transformFunction: null }, ltXxl: { classPropertyName: "ltXxl", publicName: "fxLayoutWrap.lt-xxl", isSignal: true, isRequired: false, transformFunction: null }, gtXs: { classPropertyName: "gtXs", publicName: "fxLayoutWrap.gt-xs", isSignal: true, isRequired: false, transformFunction: null }, gtSm: { classPropertyName: "gtSm", publicName: "fxLayoutWrap.gt-sm", isSignal: true, isRequired: false, transformFunction: null }, gtMd: { classPropertyName: "gtMd", publicName: "fxLayoutWrap.gt-md", isSignal: true, isRequired: false, transformFunction: null }, gtLg: { classPropertyName: "gtLg", publicName: "fxLayoutWrap.gt-lg", isSignal: true, isRequired: false, transformFunction: null }, gtXl: { classPropertyName: "gtXl", publicName: "fxLayoutWrap.gt-xl", isSignal: true, isRequired: false, transformFunction: null }, smUp: { classPropertyName: "smUp", publicName: "fxLayoutWrap.sm-up", isSignal: true, isRequired: false, transformFunction: null }, mdUp: { classPropertyName: "mdUp", publicName: "fxLayoutWrap.md-up", isSignal: true, isRequired: false, transformFunction: null }, lgUp: { classPropertyName: "lgUp", publicName: "fxLayoutWrap.lg-up", isSignal: true, isRequired: false, transformFunction: null }, xlUp: { classPropertyName: "xlUp", publicName: "fxLayoutWrap.xl-up", isSignal: true, isRequired: false, transformFunction: null }, xxlUp: { classPropertyName: "xxlUp", publicName: "fxLayoutWrap.xxl-up", isSignal: true, isRequired: false, transformFunction: null }, smDown: { classPropertyName: "smDown", publicName: "fxLayoutWrap.sm-down", isSignal: true, isRequired: false, transformFunction: null }, mdDown: { classPropertyName: "mdDown", publicName: "fxLayoutWrap.md-down", isSignal: true, isRequired: false, transformFunction: null }, lgDown: { classPropertyName: "lgDown", publicName: "fxLayoutWrap.lg-down", isSignal: true, isRequired: false, transformFunction: null }, xlDown: { classPropertyName: "xlDown", publicName: "fxLayoutWrap.xl-down", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: FxLayoutWrapDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxLayoutWrap],
+    [fxLayoutWrap.xs],[fxLayoutWrap.sm],[fxLayoutWrap.md],[fxLayoutWrap.lg],[fxLayoutWrap.xl],[fxLayoutWrap.xxl],
+    [fxLayoutWrap.lt-sm],[fxLayoutWrap.lt-md],[fxLayoutWrap.lt-lg],[fxLayoutWrap.lt-xl],[fxLayoutWrap.lt-xxl],
+    [fxLayoutWrap.gt-xs],[fxLayoutWrap.gt-sm],[fxLayoutWrap.gt-md],[fxLayoutWrap.gt-lg],[fxLayoutWrap.gt-xl],
+    [fxLayoutWrap.sm-up],[fxLayoutWrap.md-up],[fxLayoutWrap.lg-up],[fxLayoutWrap.xl-up],[fxLayoutWrap.xxl-up],
+    [fxLayoutWrap.sm-down],[fxLayoutWrap.md-down],[fxLayoutWrap.lg-down],[fxLayoutWrap.xl-down]
+  `,
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { fxLayoutWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl", required: false }] }], ltSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-sm", required: false }] }], ltMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-md", required: false }] }], ltLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-lg", required: false }] }], ltXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xl", required: false }] }], ltXxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lt-xxl", required: false }] }], gtXs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xs", required: false }] }], gtSm: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-sm", required: false }] }], gtMd: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-md", required: false }] }], gtLg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-lg", required: false }] }], gtXl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.gt-xl", required: false }] }], smUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-up", required: false }] }], mdUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-up", required: false }] }], lgUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-up", required: false }] }], xlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-up", required: false }] }], xxlUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xxl-up", required: false }] }], smDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.sm-down", required: false }] }], mdDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.md-down", required: false }] }], lgDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.lg-down", required: false }] }], xlDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "fxLayoutWrap.xl-down", required: false }] }] } });
+
+/**
+ * @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 });
+        this.showSmUp = input(undefined, { ...(ngDevMode ? { debugName: "showSmUp" } : /* istanbul ignore next */ {}), alias: 'fxShow.sm-up', transform: toBool });
+        this.showMdUp = input(undefined, { ...(ngDevMode ? { debugName: "showMdUp" } : /* istanbul ignore next */ {}), alias: 'fxShow.md-up', transform: toBool });
+        this.showLgUp = input(undefined, { ...(ngDevMode ? { debugName: "showLgUp" } : /* istanbul ignore next */ {}), alias: 'fxShow.lg-up', transform: toBool });
+        this.showXlUp = input(undefined, { ...(ngDevMode ? { debugName: "showXlUp" } : /* istanbul ignore next */ {}), alias: 'fxShow.xl-up', transform: toBool });
+        this.showXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "showXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxShow.xxl-up', transform: toBool });
+        this.showSmDown = input(undefined, { ...(ngDevMode ? { debugName: "showSmDown" } : /* istanbul ignore next */ {}), alias: 'fxShow.sm-down', transform: toBool });
+        this.showMdDown = input(undefined, { ...(ngDevMode ? { debugName: "showMdDown" } : /* istanbul ignore next */ {}), alias: 'fxShow.md-down', transform: toBool });
+        this.showLgDown = input(undefined, { ...(ngDevMode ? { debugName: "showLgDown" } : /* istanbul ignore next */ {}), alias: 'fxShow.lg-down', transform: toBool });
+        this.showXlDown = input(undefined, { ...(ngDevMode ? { debugName: "showXlDown" } : /* istanbul ignore next */ {}), alias: 'fxShow.xl-down', transform: toBool });
+        // ── fxHide inputs ─────────────────────────────────────────────────────────
+        this.fxHide = input(undefined, { ...(ngDevMode ? { debugName: "fxHide" } : /* istanbul ignore next */ {}), alias: 'fxHide', transform: toBool });
+        this.hideXs = input(undefined, { ...(ngDevMode ? { debugName: "hideXs" } : /* istanbul ignore next */ {}), alias: 'fxHide.xs', transform: toBool });
+        this.hideSm = input(undefined, { ...(ngDevMode ? { debugName: "hideSm" } : /* istanbul ignore next */ {}), alias: 'fxHide.sm', transform: toBool });
+        this.hideMd = input(undefined, { ...(ngDevMode ? { debugName: "hideMd" } : /* istanbul ignore next */ {}), alias: 'fxHide.md', transform: toBool });
+        this.hideLg = input(undefined, { ...(ngDevMode ? { debugName: "hideLg" } : /* istanbul ignore next */ {}), alias: 'fxHide.lg', transform: toBool });
+        this.hideXl = input(undefined, { ...(ngDevMode ? { debugName: "hideXl" } : /* istanbul ignore next */ {}), alias: 'fxHide.xl', transform: toBool });
+        this.hideXxl = input(undefined, { ...(ngDevMode ? { debugName: "hideXxl" } : /* istanbul ignore next */ {}), alias: 'fxHide.xxl', transform: toBool });
+        this.hideLtSm = input(undefined, { ...(ngDevMode ? { debugName: "hideLtSm" } : /* istanbul ignore next */ {}), alias: 'fxHide.lt-sm', transform: toBool });
+        this.hideLtMd = input(undefined, { ...(ngDevMode ? { debugName: "hideLtMd" } : /* istanbul ignore next */ {}), alias: 'fxHide.lt-md', transform: toBool });
+        this.hideLtLg = input(undefined, { ...(ngDevMode ? { debugName: "hideLtLg" } : /* istanbul ignore next */ {}), alias: 'fxHide.lt-lg', transform: toBool });
+        this.hideLtXl = input(undefined, { ...(ngDevMode ? { debugName: "hideLtXl" } : /* istanbul ignore next */ {}), alias: 'fxHide.lt-xl', transform: toBool });
+        this.hideLtXxl = input(undefined, { ...(ngDevMode ? { debugName: "hideLtXxl" } : /* istanbul ignore next */ {}), alias: 'fxHide.lt-xxl', transform: toBool });
+        this.hideGtXs = input(undefined, { ...(ngDevMode ? { debugName: "hideGtXs" } : /* istanbul ignore next */ {}), alias: 'fxHide.gt-xs', transform: toBool });
+        this.hideGtSm = input(undefined, { ...(ngDevMode ? { debugName: "hideGtSm" } : /* istanbul ignore next */ {}), alias: 'fxHide.gt-sm', transform: toBool });
+        this.hideGtMd = input(undefined, { ...(ngDevMode ? { debugName: "hideGtMd" } : /* istanbul ignore next */ {}), alias: 'fxHide.gt-md', transform: toBool });
+        this.hideGtLg = input(undefined, { ...(ngDevMode ? { debugName: "hideGtLg" } : /* istanbul ignore next */ {}), alias: 'fxHide.gt-lg', transform: toBool });
+        this.hideGtXl = input(undefined, { ...(ngDevMode ? { debugName: "hideGtXl" } : /* istanbul ignore next */ {}), alias: 'fxHide.gt-xl', transform: toBool });
+        this.hideSmUp = input(undefined, { ...(ngDevMode ? { debugName: "hideSmUp" } : /* istanbul ignore next */ {}), alias: 'fxHide.sm-up', transform: toBool });
+        this.hideMdUp = input(undefined, { ...(ngDevMode ? { debugName: "hideMdUp" } : /* istanbul ignore next */ {}), alias: 'fxHide.md-up', transform: toBool });
+        this.hideLgUp = input(undefined, { ...(ngDevMode ? { debugName: "hideLgUp" } : /* istanbul ignore next */ {}), alias: 'fxHide.lg-up', transform: toBool });
+        this.hideXlUp = input(undefined, { ...(ngDevMode ? { debugName: "hideXlUp" } : /* istanbul ignore next */ {}), alias: 'fxHide.xl-up', transform: toBool });
+        this.hideXxlUp = input(undefined, { ...(ngDevMode ? { debugName: "hideXxlUp" } : /* istanbul ignore next */ {}), alias: 'fxHide.xxl-up', transform: toBool });
+        this.hideSmDown = input(undefined, { ...(ngDevMode ? { debugName: "hideSmDown" } : /* istanbul ignore next */ {}), alias: 'fxHide.sm-down', transform: toBool });
+        this.hideMdDown = input(undefined, { ...(ngDevMode ? { debugName: "hideMdDown" } : /* istanbul ignore next */ {}), alias: 'fxHide.md-down', transform: toBool });
+        this.hideLgDown = input(undefined, { ...(ngDevMode ? { debugName: "hideLgDown" } : /* istanbul ignore next */ {}), alias: 'fxHide.lg-down', transform: toBool });
+        this.hideXlDown = input(undefined, { ...(ngDevMode ? { debugName: "hideXlDown" } : /* istanbul ignore next */ {}), alias: 'fxHide.xl-down', transform: toBool });
+        this._visible = computed(() => {
+            const bp = this.media.currentBp();
+            const isActive = (a) => this.media.isActive(a);
+            // Non-canonical maps (alias → show value / hide value)
+            const showNc = {
+                'lt-sm': this.showLtSm(), 'lt-md': this.showLtMd(), 'lt-lg': this.showLtLg(),
+                'lt-xl': this.showLtXl(), 'lt-xxl': this.showLtXxl(),
+                'gt-xs': this.showGtXs(), 'gt-sm': this.showGtSm(), 'gt-md': this.showGtMd(),
+                'gt-lg': this.showGtLg(), 'gt-xl': this.showGtXl(),
+                'sm-up': this.showSmUp(), 'md-up': this.showMdUp(), 'lg-up': this.showLgUp(),
+                'xl-up': this.showXlUp(), 'xxl-up': this.showXxlUp(),
+                'sm-down': this.showSmDown(), 'md-down': this.showMdDown(),
+                'lg-down': this.showLgDown(), 'xl-down': this.showXlDown(),
+            };
+            const hideNc = {
+                'lt-sm': this.hideLtSm(), 'lt-md': this.hideLtMd(), 'lt-lg': this.hideLtLg(),
+                'lt-xl': this.hideLtXl(), 'lt-xxl': this.hideLtXxl(),
+                'gt-xs': this.hideGtXs(), 'gt-sm': this.hideGtSm(), 'gt-md': this.hideGtMd(),
+                'gt-lg': this.hideGtLg(), 'gt-xl': this.hideGtXl(),
+                'sm-up': this.hideSmUp(), 'md-up': this.hideMdUp(), 'lg-up': this.hideLgUp(),
+                'xl-up': this.hideXlUp(), 'xxl-up': this.hideXxlUp(),
+                'sm-down': this.hideSmDown(), 'md-down': this.hideMdDown(),
+                'lg-down': this.hideLgDown(), 'xl-down': this.hideXlDown(),
+            };
+            // 1. Non-canonical (lt-*, gt-*, *-up, *-down) — most specific first
+            for (const alias of NON_CANONICAL_PRIORITY) {
+                const sv = showNc[alias];
+                const hv = hideNc[alias];
+                if ((sv !== undefined || hv !== undefined) && isActive(alias)) {
+                    if (sv !== undefined)
+                        return sv; // show beats hide at same priority
+                    return !hv;
+                }
+            }
+            // Canonical maps (bp → value) — exact only, NO cascade
+            const showV = {
+                xs: this.showXs(), sm: this.showSm(), md: this.showMd(),
+                lg: this.showLg(), xl: this.showXl(), xxl: this.showXxl(),
+            };
+            const hideV = {
+                xs: this.hideXs(), sm: this.hideSm(), md: this.hideMd(),
+                lg: this.hideLg(), xl: this.hideXl(), xxl: this.hideXxl(),
+            };
+            // 2. Exact canonical match for current bp
+            const showExact = showV[bp];
+            const hideExact = hideV[bp];
+            if (showExact !== undefined)
+                return showExact;
+            if (hideExact !== undefined)
+                return !hideExact;
+            // 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;
+        }, /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxShowHideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxShowHideDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxShow],[fxHide],
+    [fxShow.xs],[fxShow.sm],[fxShow.md],[fxShow.lg],[fxShow.xl],[fxShow.xxl],
+    [fxShow.lt-sm],[fxShow.lt-md],[fxShow.lt-lg],[fxShow.lt-xl],[fxShow.lt-xxl],
+    [fxShow.gt-xs],[fxShow.gt-sm],[fxShow.gt-md],[fxShow.gt-lg],[fxShow.gt-xl],
+    [fxShow.sm-up],[fxShow.md-up],[fxShow.lg-up],[fxShow.xl-up],[fxShow.xxl-up],
+    [fxShow.sm-down],[fxShow.md-down],[fxShow.lg-down],[fxShow.xl-down],
+    [fxHide.xs],[fxHide.sm],[fxHide.md],[fxHide.lg],[fxHide.xl],[fxHide.xxl],
+    [fxHide.lt-sm],[fxHide.lt-md],[fxHide.lt-lg],[fxHide.lt-xl],[fxHide.lt-xxl],
+    [fxHide.gt-xs],[fxHide.gt-sm],[fxHide.gt-md],[fxHide.gt-lg],[fxHide.gt-xl],
+    [fxHide.sm-up],[fxHide.md-up],[fxHide.lg-up],[fxHide.xl-up],[fxHide.xxl-up],
+    [fxHide.sm-down],[fxHide.md-down],[fxHide.lg-down],[fxHide.xl-down]
+  `,
+                    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)) ?? {}), /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxStyleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxStyleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxStyle],
+    [fxStyle.xs],[fxStyle.sm],[fxStyle.md],[fxStyle.lg],[fxStyle.xl],[fxStyle.xxl],
+    [fxStyle.lt-sm],[fxStyle.lt-md],[fxStyle.lt-lg],[fxStyle.lt-xl],[fxStyle.lt-xxl],
+    [fxStyle.gt-xs],[fxStyle.gt-sm],[fxStyle.gt-md],[fxStyle.gt-lg],[fxStyle.gt-xl],
+    [fxStyle.sm-up],[fxStyle.md-up],[fxStyle.lg-up],[fxStyle.xl-up],[fxStyle.xxl-up],
+    [fxStyle.sm-down],[fxStyle.md-down],[fxStyle.lg-down],[fxStyle.xl-down]
+  `,
+                    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))), /* @ts-ignore */
+        ...(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: "22.0.1", ngImport: i0, type: FxClassDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", 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: "22.0.1", ngImport: i0, type: FxClassDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+    [fxClass],
+    [fxClass.xs],[fxClass.sm],[fxClass.md],[fxClass.lg],[fxClass.xl],[fxClass.xxl],
+    [fxClass.lt-sm],[fxClass.lt-md],[fxClass.lt-lg],[fxClass.lt-xl],[fxClass.lt-xxl],
+    [fxClass.gt-xs],[fxClass.gt-sm],[fxClass.gt-md],[fxClass.gt-lg],[fxClass.gt-xl],
+    [fxClass.sm-up],[fxClass.md-up],[fxClass.lg-up],[fxClass.xl-up],[fxClass.xxl-up],
+    [fxClass.sm-down],[fxClass.md-down],[fxClass.lg-down],[fxClass.xl-down]
+  `,
+                    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 }] }] } });
+
+class ArsUIFlexModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArsUIFlexModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: ArsUIFlexModule, imports: [FxLayoutDirective,
+            FxLayoutWrapDirective,
+            FxFlexDirective,
+            FxShowHideDirective,
+            FxLayoutAlignDirective,
+            FxLayoutGapDirective,
+            FxFlexOrderDirective,
+            FxFlexOffsetDirective,
+            FxFlexAlignDirective,
+            FxFlexFillDirective,
+            FxStyleDirective,
+            FxClassDirective,
+            FxGridDirective,
+            FxGridColumnDirective,
+            FxGridAreaDirective,
+            IfBpDirective], exports: [FxLayoutDirective,
+            FxLayoutWrapDirective,
+            FxFlexDirective,
+            FxShowHideDirective,
+            FxLayoutAlignDirective,
+            FxLayoutGapDirective,
+            FxFlexOrderDirective,
+            FxFlexOffsetDirective,
+            FxFlexAlignDirective,
+            FxFlexFillDirective,
+            FxStyleDirective,
+            FxClassDirective,
+            FxGridDirective,
+            FxGridColumnDirective,
+            FxGridAreaDirective,
+            IfBpDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArsUIFlexModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ArsUIFlexModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FxLayoutDirective,
+                        FxLayoutWrapDirective,
+                        FxFlexDirective,
+                        FxShowHideDirective,
+                        FxLayoutAlignDirective,
+                        FxLayoutGapDirective,
+                        FxFlexOrderDirective,
+                        FxFlexOffsetDirective,
+                        FxFlexAlignDirective,
+                        FxFlexFillDirective,
+                        FxStyleDirective,
+                        FxClassDirective,
+                        FxGridDirective,
+                        FxGridColumnDirective,
+                        FxGridAreaDirective,
+                        IfBpDirective,
+                    ],
+                    exports: [
+                        FxLayoutDirective,
+                        FxLayoutWrapDirective,
+                        FxFlexDirective,
+                        FxShowHideDirective,
+                        FxLayoutAlignDirective,
+                        FxLayoutGapDirective,
+                        FxFlexOrderDirective,
+                        FxFlexOffsetDirective,
+                        FxFlexAlignDirective,
+                        FxFlexFillDirective,
+                        FxStyleDirective,
+                        FxClassDirective,
+                        FxGridDirective,
+                        FxGridColumnDirective,
+                        FxGridAreaDirective,
+                        IfBpDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of scm-utils
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, resolve, resolveAll, resolveNonCanonical };
+//# sourceMappingURL=abv-scm-utils-ui.mjs.map