@fabio.buscaroli/scm-utils 22.0.1

package/types/fabio.buscaroli-scm-utils-ui.d.ts

@@ -0,0 +1,1393 @@
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef, InjectionToken, Signal, Renderer2 } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarRef } from '@angular/material/snack-bar';
+import { Observable } from 'rxjs';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { ControlValueAccessor } from '@angular/forms';
+import { PasswordStrength } from '@fabio.buscaroli/scm-utils/core';
+
+interface DialogResult {
+    result?: 'ok' | 'cancel' | 'other';
+    value?: unknown;
+    options?: DialogOption[];
+}
+interface DialogOption {
+    value: unknown;
+    description: string;
+    selected?: boolean;
+}
+interface RecoverPasswordDialogResult {
+    email?: string;
+    recaptcha?: boolean;
+}
+interface ResetPasswordDialogResult {
+    userId?: number;
+    userEmail?: string;
+    oldPassword?: string;
+    password?: string;
+    password2?: string;
+}
+interface CredentialsDialogResult {
+    user?: string;
+    password?: string;
+    rememberMe?: boolean;
+    code?: string;
+}
+
+/** Italian localisation for the Material paginator labels. */
+declare class PaginatorIntl extends MatPaginatorIntl {
+    itemsPerPageLabel: string;
+    nextPageLabel: string;
+    previousPageLabel: string;
+    lastPageLabel: string;
+    firstPageLabel: string;
+    /**
+     * 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"`.
+     */
+    getRangeLabel: (page: number, pageSize: number, length: number) => string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginatorIntl, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<PaginatorIntl>;
+}
+
+interface ConfirmDialogOption extends DialogOption {
+}
+interface ConfirmDialogData {
+    title?: string;
+    message: string;
+    okCaption?: string;
+    cancelCaption?: string;
+    otherCaption?: string;
+    options?: ConfirmDialogOption[];
+    details?: string;
+}
+declare class ConfirmDialogComponent {
+    /** Emitted when the user makes a choice. Carries the selected result and any option state. */
+    readonly choosen: _angular_core.OutputEmitterRef<DialogResult>;
+    private readonly dialogRef;
+    /** Dialog configuration, with sensible defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<ConfirmDialogData>;
+    constructor();
+    /**
+     * Confirms the dialog, emitting `'ok'` together with the current option selections.
+     */
+    ok(): void;
+    /**
+     * Cancels the dialog, emitting `'cancel'`.
+     */
+    cancel(): void;
+    /**
+     * Triggers the tertiary action, emitting `'other'`.
+     */
+    other(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmDialogComponent, "ng-component", never, {}, { "choosen": "choosen"; }, never, never, true, never>;
+}
+
+interface InfoDialogData {
+    title?: string;
+    message: string;
+    details?: string;
+    okCaption?: string;
+    dismissAfter?: number;
+    onNavigate?: (url: string) => void;
+}
+declare class InfoDialogComponent {
+    private readonly dialogService;
+    private readonly dialogRef;
+    /** Dialog configuration with defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<InfoDialogData>;
+    constructor();
+    /**
+     * 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: InfoDialogData): void;
+    /**
+     * Invokes the optional navigation callback provided by the caller.
+     * @param url - The URL to navigate to.
+     */
+    protected navigate(url: string): void;
+    /**
+     * Copy to clipboard
+     */
+    protected copy(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InfoDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InfoDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
+interface ToastData {
+    message: string;
+    icon?: string;
+    actionCaption?: string;
+}
+declare class ToastComponent {
+    /** Emitted when the user clicks the optional action button. */
+    readonly action: _angular_core.OutputEmitterRef<void>;
+    /** Snack-bar payload with a safe fallback to an empty message when no data is injected. */
+    protected readonly dialogData: _angular_core.WritableSignal<ToastData>;
+    /**
+     * Emits the `action` event to notify the caller that the action button was clicked.
+     */
+    protected do(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastComponent, "ng-component", never, {}, { "action": "action"; }, never, never, true, never>;
+}
+
+declare class UIService {
+    /**
+     * The default Material form-field appearance used across dialogs and forms.
+     * Defaults to `'fill'`.
+     */
+    readonly appearance: _angular_core.WritableSignal<"fill" | "outline">;
+    /**
+     * Updates the global form-field appearance.
+     * @param value - The new appearance value. Falls back to `'fill'` when `undefined` is passed.
+     */
+    setAppearance(value: 'fill' | 'outline' | undefined): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UIService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<UIService>;
+}
+
+declare enum DeleteDialogConfirmMode {
+    None = 0,
+    Simple = 1,
+    Strong = 2
+}
+interface DeleteDialogData {
+    title?: string;
+    message: string;
+    confirmMode: DeleteDialogConfirmMode;
+    okCaption?: string;
+    cancelCaption?: string;
+    details?: string;
+    appearance?: MatFormFieldAppearance;
+}
+declare class DeleteDialogComponent {
+    /** Emitted when the user makes a choice. Carries the selected result. */
+    readonly choosen: _angular_core.OutputEmitterRef<DialogResult>;
+    private readonly dialogRef;
+    /** Dialog configuration with defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<DeleteDialogData>;
+    /**
+     * Whether the user has confirmed the deletion.
+     * Starts as `true` for all modes except `Simple`, which requires explicit checkbox confirmation.
+     */
+    protected readonly confirmed: _angular_core.WritableSignal<boolean>;
+    /** Current value typed into the strong-confirmation text field. */
+    protected confirmValue?: string;
+    /**
+     * Confirms the deletion, emitting `'ok'` and closing the dialog.
+     */
+    ok(): void;
+    /**
+     * Cancels the operation, emitting `'cancel'` and closing the dialog.
+     */
+    cancel(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DeleteDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DeleteDialogComponent, "ng-component", never, {}, { "choosen": "choosen"; }, never, never, true, never>;
+}
+
+interface IDialogService {
+}
+declare class BusyTimer {
+    private readonly dialogService;
+    private readonly subscription;
+    constructor(dialogService: DialogService, due?: number, message?: string);
+    /** Dispose object */
+    clear(): void;
+}
+declare class DialogService extends UIService {
+    private readonly dialog;
+    private readonly overlay;
+    private readonly snackBar;
+    private readonly location;
+    private busyDialogRef?;
+    private busyComponentRef?;
+    private errorDialogRef?;
+    private readonly popHistory;
+    private popState;
+    private poppingState;
+    constructor();
+    /**
+     * 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?: boolean): void;
+    /**
+     * Close all dialogs
+     */
+    closeAll(): void;
+    /**
+     * 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<T>(component: ComponentType<T>, config: MatDialogConfig<unknown>): MatDialogRef<T> | null;
+    /**
+     * 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.
+     */
+    private openDialog;
+    /**
+     * Returns the element height including margins
+     * @param element - element
+     * @returns the height
+     */
+    private outerHeight;
+    /**
+     * Return current dialog height
+     */
+    getCurrentDialogHeight(): number;
+    /**
+     * 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: string[], minimalHeight: number): number;
+    /**
+     * Push a dialog into the browser history
+     */
+    private pushDialog;
+    /**
+     * Pop a dialog from the history
+     */
+    private popDialog;
+    /**
+     * Creates the CDK overlay used to host the busy indicator.
+     * @returns The new `OverlayRef`.
+     */
+    private createBusy;
+    /**
+     * Clear busy dialog
+     */
+    clearBusy(): void;
+    /**
+     * 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: string, progress?: number, progressMode?: 'determinate' | 'indeterminate', type?: 'bar' | 'spinner' | 'wait' | 'hourglass', action?: Observable<unknown>): boolean;
+    /**
+     * 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: string, progress?: number, progressMode?: 'determinate' | 'indeterminate', action?: Observable<unknown>): boolean;
+    /**
+     * 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?: string, due?: number): BusyTimer;
+    /**
+     * 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: string, action?: Observable<unknown>): boolean;
+    /**
+     * 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: string, progress?: number, progressMode?: 'determinate' | 'indeterminate', action?: Observable<unknown>): boolean;
+    /**
+     * 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?: Observable<unknown>): boolean;
+    /**
+     * 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: string, title?: string, okCaption?: string, width?: number, dismissAfter?: number, details?: string, onNavigate?: (url: string) => void): MatDialogRef<InfoDialogComponent> | null;
+    /**
+     * 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: string, log?: string, title?: string, okCaption?: string, width?: number, dismissAfter?: number): MatDialogRef<InfoDialogComponent> | null;
+    /**
+     * 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: string, duration?: number, icon?: string, actionCaption?: string): MatSnackBarRef<ToastComponent>;
+    /**
+     * 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: string, title?: string, okCaption?: string, cancelCaption?: string, otherCaption?: string, options?: ConfirmDialogOption[], width?: number, details?: string): MatDialogRef<ConfirmDialogComponent> | null;
+    /**
+     * 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: string, title?: string, confirmMode?: DeleteDialogConfirmMode, okCaption?: string, cancelCaption?: string, width?: number, details?: string): MatDialogRef<DeleteDialogComponent> | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DialogService>;
+}
+
+/**
+ * Overlay dialog that blocks interaction while a background operation is in progress.
+ * Supports four visual styles: progress bar, spinner, hourglass, and wait icon.
+ */
+declare class BusyDialogComponent {
+    /** Visual style of the busy indicator. */
+    readonly type: _angular_core.WritableSignal<"bar" | "spinner" | "wait" | "hourglass">;
+    /** Current progress value (0–100). Used when `progressMode` is `'determinate'`. */
+    readonly progress: _angular_core.WritableSignal<number>;
+    /** Progress mode passed to the Material progress components. */
+    readonly progressMode: _angular_core.WritableSignal<"indeterminate" | "determinate">;
+    /** Message displayed above the progress indicator. */
+    readonly message: _angular_core.WritableSignal<string>;
+    /**
+     * 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: string, progress: number, progressMode?: 'determinate' | 'indeterminate', type?: 'bar' | 'spinner' | 'wait' | 'hourglass'): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BusyDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BusyDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}
+
+interface CredentialsDialogData {
+    title?: string;
+    message?: string;
+    remember?: boolean;
+    recoverPassword?: boolean;
+    recoverPasswordUrl?: string;
+    user?: string;
+    okCaption?: string;
+    mode?: 'email' | 'user' | 'otp';
+    appearance?: MatFormFieldAppearance;
+}
+declare class CredentialsDialogComponent {
+    /** Emitted when the user submits the form. Carries the entered credentials. */
+    readonly done: _angular_core.OutputEmitterRef<CredentialsDialogResult>;
+    /** Emitted when the user requests a password-recovery flow. */
+    readonly recoveringPassword: _angular_core.OutputEmitterRef<CredentialsDialogResult>;
+    /** Dialog configuration with defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<CredentialsDialogData>;
+    /** Current form model, pre-filled with the user name from dialog data when provided. */
+    protected item: CredentialsDialogResult;
+    /** Whether the password field is currently shown as plain text. */
+    protected readonly showPassword: _angular_core.WritableSignal<boolean>;
+    /**
+     * 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: 'email' | 'user' | 'otp', message?: string): void;
+    /**
+     * Emits the current form result and closes the dialog.
+     */
+    protected ok(): void;
+    /**
+     * Emits the current form result for the password-recovery flow and optionally
+     * opens the recovery URL in a new tab.
+     */
+    protected recoverPassword(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CredentialsDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CredentialsDialogComponent, "ng-component", never, {}, { "done": "done"; "recoveringPassword": "recoveringPassword"; }, never, never, true, never>;
+}
+
+interface RecoverPasswordDialogData {
+    appearance?: MatFormFieldAppearance;
+}
+declare class RecoverPasswordDialogComponent {
+    /** Emitted when the user submits the recovery request. Carries the entered email and recaptcha state. */
+    readonly done: _angular_core.OutputEmitterRef<RecoverPasswordDialogResult>;
+    /** Dialog configuration with defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<RecoverPasswordDialogData>;
+    /** Current form model bound to the template inputs. */
+    protected item: RecoverPasswordDialogResult;
+    /**
+     * Emits the current form result to trigger the password-recovery flow.
+     */
+    protected ok(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RecoverPasswordDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RecoverPasswordDialogComponent, "ng-component", never, {}, { "done": "done"; }, never, never, true, never>;
+}
+
+type ResetPasswordDialogMode = 'admin' | 'change' | 'forgot';
+interface ResetPasswordDialogData {
+    mode: ResetPasswordDialogMode;
+    userId?: number;
+    userEmail?: string;
+    appearance?: MatFormFieldAppearance;
+}
+declare class ResetPasswordDialogComponent {
+    /** Emitted when the user submits the new password. Carries the entered password data. */
+    readonly done: _angular_core.OutputEmitterRef<ResetPasswordDialogResult>;
+    private readonly dialogService;
+    private readonly dialogRef;
+    /** Dialog configuration with defaults applied at construction time. */
+    protected readonly dialogData: _angular_core.WritableSignal<ResetPasswordDialogData>;
+    /** Current form model bound to the template inputs. */
+    protected item: ResetPasswordDialogResult;
+    /** Whether the old-password field is currently shown as plain text. */
+    protected readonly showOldPassword: _angular_core.WritableSignal<boolean>;
+    /** Whether the new-password field is currently shown as plain text. */
+    protected readonly showPassword: _angular_core.WritableSignal<boolean>;
+    /** Whether the confirm-password field is currently shown as plain text. */
+    protected readonly showPassword2: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /**
+     * Emits the current form result to trigger the password-reset flow.
+     */
+    protected ok(): void;
+    /**
+     * Generates a random password and populates both password fields with it.
+     */
+    protected generatePassword(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResetPasswordDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ResetPasswordDialogComponent, "ng-component", never, {}, { "done": "done"; }, never, never, true, never>;
+}
+
+declare class OtpInputComponent implements ControlValueAccessor {
+    /** Signal-based query for all individual OTP digit input elements. */
+    readonly otpFields: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
+    /** `true` when every digit slot contains a valid single decimal digit. */
+    readonly isValid: _angular_core.Signal<boolean>;
+    /** Array of per-digit values backing the OTP display. */
+    readonly otpArray: _angular_core.WritableSignal<string[]>;
+    /** Whether the control is currently disabled. */
+    readonly disabled: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    /**
+     * 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: string): void;
+    /**
+     * Registers the callback invoked when the control value changes.
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (val: string) => void): void;
+    /**
+     * Registers the callback invoked when the control is touched.
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Enables or disables the control.
+     * @param isDisabled - `true` to disable all OTP inputs.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Blocks non-digit characters before they are inserted.
+     * @param event - The `beforeinput` event from the input element.
+     */
+    onBeforeInput(event: InputEvent): void;
+    /**
+     * 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: Event, index: number): void;
+    /**
+     * 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: KeyboardEvent, index: number): void;
+    /**
+     * 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: ClipboardEvent): void;
+    /**
+     * Moves focus to the OTP field at the given index.
+     * @param index - Zero-based index of the target field.
+     */
+    private focusField;
+    /**
+     * Notifies the form model of the current OTP value and marks the control as touched.
+     */
+    private updateModel;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "otp-input", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Displays a password-strength indicator for the provided password string.
+ * Uses `SystemUtils.calculatePasswordStrength` to derive the score and label.
+ */
+declare class PasswordStrengthComponent {
+    /** The password to evaluate. An empty string renders the default (score 0) state. */
+    readonly password: _angular_core.InputSignal<string>;
+    /**
+     * Computed strength result for the current password.
+     * Falls back to `DEFAULT_STRENGTH` when the password is empty.
+     */
+    protected readonly strength: _angular_core.Signal<PasswordStrength>;
+    /**
+     * CSS class applied to the label element based on the numeric score (1–6 bands).
+     * Scores ≤ 2 → `'score-2'`, ≤ 3 → `'score-3'`, etc.
+     */
+    protected readonly scoreClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PasswordStrengthComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PasswordStrengthComponent, "password-strength", never, { "password": { "alias": "password"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class IfBpDirective {
+    private readonly tpl;
+    private readonly vcr;
+    private readonly media;
+    /** Space-separated list of breakpoint aliases, e.g. `'lg xl xxl-up'` */
+    readonly ifBp: _angular_core.InputSignal<string>;
+    /** Optional else-template shown when no alias is active */
+    readonly ifBpElse: _angular_core.InputSignal<TemplateRef<unknown>>;
+    private readonly _aliases;
+    private readonly _isActive;
+    /** Tracks whether the main view is currently embedded — plain field, not a signal. */
+    private _hasView;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<IfBpDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IfBpDirective, "[ifBp]", never, { "ifBp": { "alias": "ifBp"; "required": true; "isSignal": true; }; "ifBpElse": { "alias": "ifBpElse"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @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.
+ */
+
+declare const BS5_BREAKPOINTS: Record<string, string>;
+/** InjectionToken — override to customise or extend breakpoints */
+declare const LAYOUT_BREAKPOINTS: InjectionToken<Record<string, string>>;
+/** Ordered canonical aliases, smallest → largest (used for mobile-first cascade) */
+declare const CANONICAL_ALIASES: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+type BreakpointAlias = typeof CANONICAL_ALIASES[number];
+/**
+ * All non-canonical alias families.
+ * Used by ResponsiveBaseDirective.resolveNonCanonical() to handle lt-* / gt-* / *-up / *-down
+ * inputs without polluting the mobile-first cascade logic.
+ */
+declare const ALIAS_FAMILIES: {
+    readonly up: readonly ["sm-up", "md-up", "lg-up", "xl-up", "xxl-up"];
+    readonly down: readonly ["sm-down", "md-down", "lg-down", "xl-down"];
+    readonly gt: readonly ["gt-xs", "gt-sm", "gt-md", "gt-lg", "gt-xl"];
+    readonly lt: readonly ["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.
+ */
+
+declare class MediaObserver {
+    private readonly bo;
+    private readonly bp;
+    /**
+     * 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.
+     */
+    readonly currentBp$: Observable<BreakpointAlias>;
+    /**
+     * Signal derived from currentBp$.
+     * Directives read it via effect() — zero manual subscriptions.
+     * providedIn: 'root' ensures the Signal is a singleton.
+     */
+    readonly currentBp: Signal<BreakpointAlias>;
+    /**
+     * 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: string): boolean;
+    /**
+     * Observable true/false for a specific alias.
+     * Reuses currentBp$ instead of opening a new bo.observe():
+     * no additional MediaQueryList listener is created.
+     */
+    isActive$(alias: string): Observable<boolean>;
+    /** Resolves the active canonical alias (from xxl down to xs, mobile-first) */
+    private _resolve;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MediaObserver, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MediaObserver>;
+}
+
+/**
+ * @file responsive-inputs.mixin.ts
+ *
+ * Shared type helpers for the full set of breakpoint @Input keys.
+ *
+ * Every responsive directive stores values in two maps:
+ *   _v  — canonical aliases (xs … xxl) + 'default'
+ *   _nc — non-canonical aliases (lt-*, gt-*, *-up, *-down)
+ *
+ * This file exports the key union types so directives stay type-safe
+ * without repeating the string literals everywhere.
+ */
+type CanonicalKey = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+type NonCanonicalKey = 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'lt-xxl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg' | 'gt-xl' | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'sm-up' | 'md-up' | 'lg-up' | 'xl-up' | 'xxl-up';
+type BpValues<T> = Partial<Record<CanonicalKey, T>>;
+type NcValues<T> = Partial<Record<NonCanonicalKey, T>>;
+
+/**
+ * @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()
+ */
+
+declare const ALIAS_INDEX: Map<string, number>;
+/**
+ * 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.
+ */
+declare const NON_CANONICAL_PRIORITY: readonly ["lt-sm", "lt-md", "lt-lg", "lt-xl", "lt-xxl", "gt-xs", "gt-sm", "gt-md", "gt-lg", "gt-xl", "sm-down", "md-down", "lg-down", "xl-down", "sm-up", "md-up", "lg-up", "xl-up", "xxl-up"];
+/**
+ * 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.
+ */
+declare function resolve<T>(values: BpValues<T>, currentBp: BreakpointAlias): T | undefined;
+/**
+ * Non-canonical point-in-time check: iterates NON_CANONICAL_PRIORITY and
+ * returns the value for the first alias that isActive().
+ */
+declare function resolveNonCanonical<T>(nc: NcValues<T>, isActive: (alias: string) => boolean): T | 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))
+ *   );
+ */
+declare function resolveAll<T>(canonical: BpValues<T>, nonCanonical: NcValues<T>, currentBp: BreakpointAlias, isActive: (alias: string) => boolean): T | undefined;
+declare abstract class ResponsiveBaseDirective {
+    protected readonly el: ElementRef<any>;
+    protected readonly r2: Renderer2;
+    protected readonly media: MediaObserver;
+    /** true in browser, false in SSR */
+    protected readonly isBrowser: boolean;
+    /** SSR-safe style setter. Pass null/empty string to remove the property. */
+    protected safeSetStyle(prop: string, value: string | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ResponsiveBaseDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ResponsiveBaseDirective, never, never, {}, {}, never, never, true, never>;
+}
+
+declare class FxFlexOrderDirective extends ResponsiveBaseDirective {
+    readonly fxFlexOrder: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _order;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOrderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOrderDirective, "    [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]  ", never, { "fxFlexOrder": { "alias": "fxFlexOrder"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOrder.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOrder.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOrder.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOrder.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOrder.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxFlexOrder.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOrder.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOrder.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOrder.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOrder.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxFlexOrder.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOrder.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOrder.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOrder.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOrder.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxFlexOrder.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxFlexOrder.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxFlexOrder.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxFlexOrder.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxFlexOrder.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxFlexOrder.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxFlexOrder.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxFlexOrder.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxFlexOrder.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxFlexOrder.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class FxFlexOffsetDirective extends ResponsiveBaseDirective {
+    readonly fxFlexOffset: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _offset;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexOffsetDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexOffsetDirective, "    [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]  ", never, { "fxFlexOffset": { "alias": "fxFlexOffset"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexOffset.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexOffset.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexOffset.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexOffset.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexOffset.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxFlexOffset.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexOffset.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexOffset.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexOffset.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexOffset.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxFlexOffset.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexOffset.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexOffset.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexOffset.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexOffset.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxFlexOffset.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxFlexOffset.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxFlexOffset.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxFlexOffset.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxFlexOffset.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxFlexOffset.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxFlexOffset.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxFlexOffset.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxFlexOffset.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxFlexOffset.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+declare class FxFlexAlignDirective extends ResponsiveBaseDirective {
+    readonly fxFlexAlign: _angular_core.InputSignal<AlignSelf>;
+    readonly xs: _angular_core.InputSignal<AlignSelf>;
+    readonly sm: _angular_core.InputSignal<AlignSelf>;
+    readonly md: _angular_core.InputSignal<AlignSelf>;
+    readonly lg: _angular_core.InputSignal<AlignSelf>;
+    readonly xl: _angular_core.InputSignal<AlignSelf>;
+    readonly xxl: _angular_core.InputSignal<AlignSelf>;
+    readonly ltSm: _angular_core.InputSignal<AlignSelf>;
+    readonly ltMd: _angular_core.InputSignal<AlignSelf>;
+    readonly ltLg: _angular_core.InputSignal<AlignSelf>;
+    readonly ltXl: _angular_core.InputSignal<AlignSelf>;
+    readonly ltXxl: _angular_core.InputSignal<AlignSelf>;
+    readonly gtXs: _angular_core.InputSignal<AlignSelf>;
+    readonly gtSm: _angular_core.InputSignal<AlignSelf>;
+    readonly gtMd: _angular_core.InputSignal<AlignSelf>;
+    readonly gtLg: _angular_core.InputSignal<AlignSelf>;
+    readonly gtXl: _angular_core.InputSignal<AlignSelf>;
+    readonly smUp: _angular_core.InputSignal<AlignSelf>;
+    readonly mdUp: _angular_core.InputSignal<AlignSelf>;
+    readonly lgUp: _angular_core.InputSignal<AlignSelf>;
+    readonly xlUp: _angular_core.InputSignal<AlignSelf>;
+    readonly xxlUp: _angular_core.InputSignal<AlignSelf>;
+    readonly smDown: _angular_core.InputSignal<AlignSelf>;
+    readonly mdDown: _angular_core.InputSignal<AlignSelf>;
+    readonly lgDown: _angular_core.InputSignal<AlignSelf>;
+    readonly xlDown: _angular_core.InputSignal<AlignSelf>;
+    private readonly _alignSelf;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexAlignDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexAlignDirective, "    [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]  ", never, { "fxFlexAlign": { "alias": "fxFlexAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexAlign.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxFlexAlign.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexAlign.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxFlexAlign.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexAlign.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxFlexAlign.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxFlexAlign.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxFlexAlign.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxFlexAlign.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxFlexAlign.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxFlexAlign.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxFlexAlign.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxFlexAlign.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxFlexAlign.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxFlexAlign.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type FillValue = 'fill' | 'none' | '' | boolean;
+declare class FxFlexFillDirective extends ResponsiveBaseDirective {
+    readonly fxFlexFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly fxFill: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly sm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly md: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly lg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xxl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltXl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly ltXxl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtXs: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtSm: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtMd: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtLg: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly gtXl: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly smUp: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly mdUp: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly lgUp: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xlUp: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xxlUp: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly smDown: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly mdDown: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly lgDown: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    readonly xlDown: _angular_core.InputSignalWithTransform<boolean, FillValue>;
+    private readonly _active;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexFillDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexFillDirective, "    [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]  ", never, { "fxFlexFill": { "alias": "fxFlexFill"; "required": false; "isSignal": true; }; "fxFill": { "alias": "fxFill"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlexFill.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlexFill.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlexFill.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlexFill.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlexFill.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxFlexFill.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlexFill.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlexFill.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlexFill.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlexFill.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxFlexFill.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlexFill.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlexFill.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlexFill.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlexFill.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxFlexFill.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxFlexFill.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxFlexFill.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxFlexFill.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxFlexFill.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxFlexFill.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxFlexFill.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxFlexFill.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxFlexFill.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxFlexFill.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxFlexDirective extends ResponsiveBaseDirective {
+    readonly fxFlex: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _rawFlex;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxFlexDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxFlexDirective, "    [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]  ", never, { "fxFlex": { "alias": "fxFlex"; "required": false; "isSignal": true; }; "xs": { "alias": "fxFlex.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxFlex.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxFlex.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxFlex.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxFlex.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxFlex.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxFlex.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxFlex.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxFlex.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxFlex.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxFlex.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxFlex.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxFlex.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxFlex.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxFlex.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxFlex.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxFlex.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxFlex.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxFlex.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxFlex.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxFlex.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxFlex.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxFlex.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxFlex.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxFlex.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxGridDirective extends ResponsiveBaseDirective {
+    readonly fxGrid: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    readonly fxGridRows: _angular_core.InputSignal<string>;
+    readonly rowsXs: _angular_core.InputSignal<string>;
+    readonly rowsSm: _angular_core.InputSignal<string>;
+    readonly rowsMd: _angular_core.InputSignal<string>;
+    readonly rowsLg: _angular_core.InputSignal<string>;
+    readonly rowsXl: _angular_core.InputSignal<string>;
+    readonly rowsXxl: _angular_core.InputSignal<string>;
+    readonly rowsLtSm: _angular_core.InputSignal<string>;
+    readonly rowsLtMd: _angular_core.InputSignal<string>;
+    readonly rowsLtLg: _angular_core.InputSignal<string>;
+    readonly rowsLtXl: _angular_core.InputSignal<string>;
+    readonly rowsLtXxl: _angular_core.InputSignal<string>;
+    readonly rowsGtXs: _angular_core.InputSignal<string>;
+    readonly rowsGtSm: _angular_core.InputSignal<string>;
+    readonly rowsGtMd: _angular_core.InputSignal<string>;
+    readonly rowsGtLg: _angular_core.InputSignal<string>;
+    readonly rowsGtXl: _angular_core.InputSignal<string>;
+    readonly rowsSmUp: _angular_core.InputSignal<string>;
+    readonly rowsMdUp: _angular_core.InputSignal<string>;
+    readonly rowsLgUp: _angular_core.InputSignal<string>;
+    readonly rowsXlUp: _angular_core.InputSignal<string>;
+    readonly rowsXxlUp: _angular_core.InputSignal<string>;
+    readonly rowsSmDown: _angular_core.InputSignal<string>;
+    readonly rowsMdDown: _angular_core.InputSignal<string>;
+    readonly rowsLgDown: _angular_core.InputSignal<string>;
+    readonly rowsXlDown: _angular_core.InputSignal<string>;
+    readonly fxGridGap: _angular_core.InputSignal<string>;
+    readonly gapXs: _angular_core.InputSignal<string>;
+    readonly gapSm: _angular_core.InputSignal<string>;
+    readonly gapMd: _angular_core.InputSignal<string>;
+    readonly gapLg: _angular_core.InputSignal<string>;
+    readonly gapXl: _angular_core.InputSignal<string>;
+    readonly gapXxl: _angular_core.InputSignal<string>;
+    readonly gapLtSm: _angular_core.InputSignal<string>;
+    readonly gapLtMd: _angular_core.InputSignal<string>;
+    readonly gapLtLg: _angular_core.InputSignal<string>;
+    readonly gapLtXl: _angular_core.InputSignal<string>;
+    readonly gapLtXxl: _angular_core.InputSignal<string>;
+    readonly gapGtXs: _angular_core.InputSignal<string>;
+    readonly gapGtSm: _angular_core.InputSignal<string>;
+    readonly gapGtMd: _angular_core.InputSignal<string>;
+    readonly gapGtLg: _angular_core.InputSignal<string>;
+    readonly gapGtXl: _angular_core.InputSignal<string>;
+    readonly gapSmUp: _angular_core.InputSignal<string>;
+    readonly gapMdUp: _angular_core.InputSignal<string>;
+    readonly gapLgUp: _angular_core.InputSignal<string>;
+    readonly gapXlUp: _angular_core.InputSignal<string>;
+    readonly gapXxlUp: _angular_core.InputSignal<string>;
+    readonly gapSmDown: _angular_core.InputSignal<string>;
+    readonly gapMdDown: _angular_core.InputSignal<string>;
+    readonly gapLgDown: _angular_core.InputSignal<string>;
+    readonly gapXlDown: _angular_core.InputSignal<string>;
+    private readonly _cols;
+    private readonly _rows;
+    private readonly _gap;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridDirective, "    [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]  ", never, { "fxGrid": { "alias": "fxGrid"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGrid.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGrid.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGrid.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGrid.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGrid.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxGrid.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGrid.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGrid.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGrid.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGrid.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxGrid.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGrid.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGrid.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGrid.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGrid.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxGrid.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxGrid.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxGrid.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxGrid.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxGrid.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxGrid.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxGrid.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxGrid.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxGrid.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxGrid.xl-down"; "required": false; "isSignal": true; }; "fxGridRows": { "alias": "fxGridRows"; "required": false; "isSignal": true; }; "rowsXs": { "alias": "fxGridRows.xs"; "required": false; "isSignal": true; }; "rowsSm": { "alias": "fxGridRows.sm"; "required": false; "isSignal": true; }; "rowsMd": { "alias": "fxGridRows.md"; "required": false; "isSignal": true; }; "rowsLg": { "alias": "fxGridRows.lg"; "required": false; "isSignal": true; }; "rowsXl": { "alias": "fxGridRows.xl"; "required": false; "isSignal": true; }; "rowsXxl": { "alias": "fxGridRows.xxl"; "required": false; "isSignal": true; }; "rowsLtSm": { "alias": "fxGridRows.lt-sm"; "required": false; "isSignal": true; }; "rowsLtMd": { "alias": "fxGridRows.lt-md"; "required": false; "isSignal": true; }; "rowsLtLg": { "alias": "fxGridRows.lt-lg"; "required": false; "isSignal": true; }; "rowsLtXl": { "alias": "fxGridRows.lt-xl"; "required": false; "isSignal": true; }; "rowsLtXxl": { "alias": "fxGridRows.lt-xxl"; "required": false; "isSignal": true; }; "rowsGtXs": { "alias": "fxGridRows.gt-xs"; "required": false; "isSignal": true; }; "rowsGtSm": { "alias": "fxGridRows.gt-sm"; "required": false; "isSignal": true; }; "rowsGtMd": { "alias": "fxGridRows.gt-md"; "required": false; "isSignal": true; }; "rowsGtLg": { "alias": "fxGridRows.gt-lg"; "required": false; "isSignal": true; }; "rowsGtXl": { "alias": "fxGridRows.gt-xl"; "required": false; "isSignal": true; }; "rowsSmUp": { "alias": "fxGridRows.sm-up"; "required": false; "isSignal": true; }; "rowsMdUp": { "alias": "fxGridRows.md-up"; "required": false; "isSignal": true; }; "rowsLgUp": { "alias": "fxGridRows.lg-up"; "required": false; "isSignal": true; }; "rowsXlUp": { "alias": "fxGridRows.xl-up"; "required": false; "isSignal": true; }; "rowsXxlUp": { "alias": "fxGridRows.xxl-up"; "required": false; "isSignal": true; }; "rowsSmDown": { "alias": "fxGridRows.sm-down"; "required": false; "isSignal": true; }; "rowsMdDown": { "alias": "fxGridRows.md-down"; "required": false; "isSignal": true; }; "rowsLgDown": { "alias": "fxGridRows.lg-down"; "required": false; "isSignal": true; }; "rowsXlDown": { "alias": "fxGridRows.xl-down"; "required": false; "isSignal": true; }; "fxGridGap": { "alias": "fxGridGap"; "required": false; "isSignal": true; }; "gapXs": { "alias": "fxGridGap.xs"; "required": false; "isSignal": true; }; "gapSm": { "alias": "fxGridGap.sm"; "required": false; "isSignal": true; }; "gapMd": { "alias": "fxGridGap.md"; "required": false; "isSignal": true; }; "gapLg": { "alias": "fxGridGap.lg"; "required": false; "isSignal": true; }; "gapXl": { "alias": "fxGridGap.xl"; "required": false; "isSignal": true; }; "gapXxl": { "alias": "fxGridGap.xxl"; "required": false; "isSignal": true; }; "gapLtSm": { "alias": "fxGridGap.lt-sm"; "required": false; "isSignal": true; }; "gapLtMd": { "alias": "fxGridGap.lt-md"; "required": false; "isSignal": true; }; "gapLtLg": { "alias": "fxGridGap.lt-lg"; "required": false; "isSignal": true; }; "gapLtXl": { "alias": "fxGridGap.lt-xl"; "required": false; "isSignal": true; }; "gapLtXxl": { "alias": "fxGridGap.lt-xxl"; "required": false; "isSignal": true; }; "gapGtXs": { "alias": "fxGridGap.gt-xs"; "required": false; "isSignal": true; }; "gapGtSm": { "alias": "fxGridGap.gt-sm"; "required": false; "isSignal": true; }; "gapGtMd": { "alias": "fxGridGap.gt-md"; "required": false; "isSignal": true; }; "gapGtLg": { "alias": "fxGridGap.gt-lg"; "required": false; "isSignal": true; }; "gapGtXl": { "alias": "fxGridGap.gt-xl"; "required": false; "isSignal": true; }; "gapSmUp": { "alias": "fxGridGap.sm-up"; "required": false; "isSignal": true; }; "gapMdUp": { "alias": "fxGridGap.md-up"; "required": false; "isSignal": true; }; "gapLgUp": { "alias": "fxGridGap.lg-up"; "required": false; "isSignal": true; }; "gapXlUp": { "alias": "fxGridGap.xl-up"; "required": false; "isSignal": true; }; "gapXxlUp": { "alias": "fxGridGap.xxl-up"; "required": false; "isSignal": true; }; "gapSmDown": { "alias": "fxGridGap.sm-down"; "required": false; "isSignal": true; }; "gapMdDown": { "alias": "fxGridGap.md-down"; "required": false; "isSignal": true; }; "gapLgDown": { "alias": "fxGridGap.lg-down"; "required": false; "isSignal": true; }; "gapXlDown": { "alias": "fxGridGap.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class FxGridColumnDirective extends ResponsiveBaseDirective {
+    readonly fxGridColumn: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _resolved;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridColumnDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridColumnDirective, "    [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]  ", never, { "fxGridColumn": { "alias": "fxGridColumn"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridColumn.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridColumn.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridColumn.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridColumn.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridColumn.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxGridColumn.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridColumn.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridColumn.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridColumn.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridColumn.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxGridColumn.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridColumn.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridColumn.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridColumn.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridColumn.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxGridColumn.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxGridColumn.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxGridColumn.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxGridColumn.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxGridColumn.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxGridColumn.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxGridColumn.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxGridColumn.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxGridColumn.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxGridColumn.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class FxGridAreaDirective extends ResponsiveBaseDirective {
+    readonly fxGridArea: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _resolved;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxGridAreaDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxGridAreaDirective, "    [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]  ", never, { "fxGridArea": { "alias": "fxGridArea"; "required": false; "isSignal": true; }; "xs": { "alias": "fxGridArea.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxGridArea.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxGridArea.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxGridArea.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxGridArea.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxGridArea.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxGridArea.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxGridArea.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxGridArea.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxGridArea.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxGridArea.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxGridArea.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxGridArea.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxGridArea.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxGridArea.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxGridArea.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxGridArea.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxGridArea.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxGridArea.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxGridArea.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxGridArea.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxGridArea.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxGridArea.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxGridArea.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxGridArea.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxLayoutAlignDirective extends ResponsiveBaseDirective {
+    readonly fxLayoutAlign: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _parsed;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutAlignDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutAlignDirective, "    [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]  ", never, { "fxLayoutAlign": { "alias": "fxLayoutAlign"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutAlign.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutAlign.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutAlign.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutAlign.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutAlign.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxLayoutAlign.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutAlign.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutAlign.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutAlign.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutAlign.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxLayoutAlign.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutAlign.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutAlign.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutAlign.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutAlign.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxLayoutAlign.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxLayoutAlign.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxLayoutAlign.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxLayoutAlign.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxLayoutAlign.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxLayoutAlign.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxLayoutAlign.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxLayoutAlign.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxLayoutAlign.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxLayoutAlign.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxLayoutGapDirective extends ResponsiveBaseDirective {
+    readonly fxLayoutGap: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _gap;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutGapDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutGapDirective, "    [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]  ", never, { "fxLayoutGap": { "alias": "fxLayoutGap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutGap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutGap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutGap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutGap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutGap.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxLayoutGap.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutGap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutGap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutGap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutGap.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxLayoutGap.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutGap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutGap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutGap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutGap.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxLayoutGap.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxLayoutGap.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxLayoutGap.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxLayoutGap.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxLayoutGap.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxLayoutGap.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxLayoutGap.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxLayoutGap.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxLayoutGap.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxLayoutGap.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxLayoutDirective extends ResponsiveBaseDirective {
+    readonly fxLayout: _angular_core.InputSignal<string>;
+    readonly xs: _angular_core.InputSignal<string>;
+    readonly sm: _angular_core.InputSignal<string>;
+    readonly md: _angular_core.InputSignal<string>;
+    readonly lg: _angular_core.InputSignal<string>;
+    readonly xl: _angular_core.InputSignal<string>;
+    readonly xxl: _angular_core.InputSignal<string>;
+    readonly ltSm: _angular_core.InputSignal<string>;
+    readonly ltMd: _angular_core.InputSignal<string>;
+    readonly ltLg: _angular_core.InputSignal<string>;
+    readonly ltXl: _angular_core.InputSignal<string>;
+    readonly ltXxl: _angular_core.InputSignal<string>;
+    readonly gtXs: _angular_core.InputSignal<string>;
+    readonly gtSm: _angular_core.InputSignal<string>;
+    readonly gtMd: _angular_core.InputSignal<string>;
+    readonly gtLg: _angular_core.InputSignal<string>;
+    readonly gtXl: _angular_core.InputSignal<string>;
+    readonly smUp: _angular_core.InputSignal<string>;
+    readonly mdUp: _angular_core.InputSignal<string>;
+    readonly lgUp: _angular_core.InputSignal<string>;
+    readonly xlUp: _angular_core.InputSignal<string>;
+    readonly xxlUp: _angular_core.InputSignal<string>;
+    readonly smDown: _angular_core.InputSignal<string>;
+    readonly mdDown: _angular_core.InputSignal<string>;
+    readonly lgDown: _angular_core.InputSignal<string>;
+    readonly xlDown: _angular_core.InputSignal<string>;
+    private readonly _parsed;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutDirective, "    [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]  ", never, { "fxLayout": { "alias": "fxLayout"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayout.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayout.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayout.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayout.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayout.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxLayout.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayout.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayout.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayout.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayout.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxLayout.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayout.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayout.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayout.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayout.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxLayout.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxLayout.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxLayout.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxLayout.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxLayout.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxLayout.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxLayout.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxLayout.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxLayout.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxLayout.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
+declare class FxLayoutWrapDirective extends ResponsiveBaseDirective {
+    readonly fxLayoutWrap: _angular_core.InputSignal<FlexWrap>;
+    readonly xs: _angular_core.InputSignal<FlexWrap>;
+    readonly sm: _angular_core.InputSignal<FlexWrap>;
+    readonly md: _angular_core.InputSignal<FlexWrap>;
+    readonly lg: _angular_core.InputSignal<FlexWrap>;
+    readonly xl: _angular_core.InputSignal<FlexWrap>;
+    readonly xxl: _angular_core.InputSignal<FlexWrap>;
+    readonly ltSm: _angular_core.InputSignal<FlexWrap>;
+    readonly ltMd: _angular_core.InputSignal<FlexWrap>;
+    readonly ltLg: _angular_core.InputSignal<FlexWrap>;
+    readonly ltXl: _angular_core.InputSignal<FlexWrap>;
+    readonly ltXxl: _angular_core.InputSignal<FlexWrap>;
+    readonly gtXs: _angular_core.InputSignal<FlexWrap>;
+    readonly gtSm: _angular_core.InputSignal<FlexWrap>;
+    readonly gtMd: _angular_core.InputSignal<FlexWrap>;
+    readonly gtLg: _angular_core.InputSignal<FlexWrap>;
+    readonly gtXl: _angular_core.InputSignal<FlexWrap>;
+    readonly smUp: _angular_core.InputSignal<FlexWrap>;
+    readonly mdUp: _angular_core.InputSignal<FlexWrap>;
+    readonly lgUp: _angular_core.InputSignal<FlexWrap>;
+    readonly xlUp: _angular_core.InputSignal<FlexWrap>;
+    readonly xxlUp: _angular_core.InputSignal<FlexWrap>;
+    readonly smDown: _angular_core.InputSignal<FlexWrap>;
+    readonly mdDown: _angular_core.InputSignal<FlexWrap>;
+    readonly lgDown: _angular_core.InputSignal<FlexWrap>;
+    readonly xlDown: _angular_core.InputSignal<FlexWrap>;
+    private readonly _wrap;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxLayoutWrapDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxLayoutWrapDirective, "    [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]  ", never, { "fxLayoutWrap": { "alias": "fxLayoutWrap"; "required": false; "isSignal": true; }; "xs": { "alias": "fxLayoutWrap.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxLayoutWrap.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxLayoutWrap.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxLayoutWrap.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxLayoutWrap.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxLayoutWrap.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxLayoutWrap.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxLayoutWrap.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxLayoutWrap.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxLayoutWrap.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxLayoutWrap.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxLayoutWrap.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxLayoutWrap.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxLayoutWrap.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxLayoutWrap.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxLayoutWrap.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxLayoutWrap.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxLayoutWrap.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxLayoutWrap.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxLayoutWrap.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxLayoutWrap.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxLayoutWrap.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxLayoutWrap.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxLayoutWrap.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxLayoutWrap.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class FxShowHideDirective extends ResponsiveBaseDirective {
+    readonly fxShow: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXs: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXxl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLtSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLtMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLtLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLtXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLtXxl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showGtXs: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showGtSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showGtMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showGtLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showGtXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showSmUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showMdUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLgUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXlUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXxlUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showSmDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showMdDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showLgDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly showXlDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly fxHide: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXs: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXxl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLtSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLtMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLtLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLtXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLtXxl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideGtXs: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideGtSm: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideGtMd: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideGtLg: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideGtXl: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideSmUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideMdUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLgUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXlUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXxlUp: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideSmDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideMdDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideLgDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    readonly hideXlDown: _angular_core.InputSignalWithTransform<boolean, string | boolean>;
+    private readonly _visible;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxShowHideDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxShowHideDirective, "    [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]  ", never, { "fxShow": { "alias": "fxShow"; "required": false; "isSignal": true; }; "showXs": { "alias": "fxShow.xs"; "required": false; "isSignal": true; }; "showSm": { "alias": "fxShow.sm"; "required": false; "isSignal": true; }; "showMd": { "alias": "fxShow.md"; "required": false; "isSignal": true; }; "showLg": { "alias": "fxShow.lg"; "required": false; "isSignal": true; }; "showXl": { "alias": "fxShow.xl"; "required": false; "isSignal": true; }; "showXxl": { "alias": "fxShow.xxl"; "required": false; "isSignal": true; }; "showLtSm": { "alias": "fxShow.lt-sm"; "required": false; "isSignal": true; }; "showLtMd": { "alias": "fxShow.lt-md"; "required": false; "isSignal": true; }; "showLtLg": { "alias": "fxShow.lt-lg"; "required": false; "isSignal": true; }; "showLtXl": { "alias": "fxShow.lt-xl"; "required": false; "isSignal": true; }; "showLtXxl": { "alias": "fxShow.lt-xxl"; "required": false; "isSignal": true; }; "showGtXs": { "alias": "fxShow.gt-xs"; "required": false; "isSignal": true; }; "showGtSm": { "alias": "fxShow.gt-sm"; "required": false; "isSignal": true; }; "showGtMd": { "alias": "fxShow.gt-md"; "required": false; "isSignal": true; }; "showGtLg": { "alias": "fxShow.gt-lg"; "required": false; "isSignal": true; }; "showGtXl": { "alias": "fxShow.gt-xl"; "required": false; "isSignal": true; }; "showSmUp": { "alias": "fxShow.sm-up"; "required": false; "isSignal": true; }; "showMdUp": { "alias": "fxShow.md-up"; "required": false; "isSignal": true; }; "showLgUp": { "alias": "fxShow.lg-up"; "required": false; "isSignal": true; }; "showXlUp": { "alias": "fxShow.xl-up"; "required": false; "isSignal": true; }; "showXxlUp": { "alias": "fxShow.xxl-up"; "required": false; "isSignal": true; }; "showSmDown": { "alias": "fxShow.sm-down"; "required": false; "isSignal": true; }; "showMdDown": { "alias": "fxShow.md-down"; "required": false; "isSignal": true; }; "showLgDown": { "alias": "fxShow.lg-down"; "required": false; "isSignal": true; }; "showXlDown": { "alias": "fxShow.xl-down"; "required": false; "isSignal": true; }; "fxHide": { "alias": "fxHide"; "required": false; "isSignal": true; }; "hideXs": { "alias": "fxHide.xs"; "required": false; "isSignal": true; }; "hideSm": { "alias": "fxHide.sm"; "required": false; "isSignal": true; }; "hideMd": { "alias": "fxHide.md"; "required": false; "isSignal": true; }; "hideLg": { "alias": "fxHide.lg"; "required": false; "isSignal": true; }; "hideXl": { "alias": "fxHide.xl"; "required": false; "isSignal": true; }; "hideXxl": { "alias": "fxHide.xxl"; "required": false; "isSignal": true; }; "hideLtSm": { "alias": "fxHide.lt-sm"; "required": false; "isSignal": true; }; "hideLtMd": { "alias": "fxHide.lt-md"; "required": false; "isSignal": true; }; "hideLtLg": { "alias": "fxHide.lt-lg"; "required": false; "isSignal": true; }; "hideLtXl": { "alias": "fxHide.lt-xl"; "required": false; "isSignal": true; }; "hideLtXxl": { "alias": "fxHide.lt-xxl"; "required": false; "isSignal": true; }; "hideGtXs": { "alias": "fxHide.gt-xs"; "required": false; "isSignal": true; }; "hideGtSm": { "alias": "fxHide.gt-sm"; "required": false; "isSignal": true; }; "hideGtMd": { "alias": "fxHide.gt-md"; "required": false; "isSignal": true; }; "hideGtLg": { "alias": "fxHide.gt-lg"; "required": false; "isSignal": true; }; "hideGtXl": { "alias": "fxHide.gt-xl"; "required": false; "isSignal": true; }; "hideSmUp": { "alias": "fxHide.sm-up"; "required": false; "isSignal": true; }; "hideMdUp": { "alias": "fxHide.md-up"; "required": false; "isSignal": true; }; "hideLgUp": { "alias": "fxHide.lg-up"; "required": false; "isSignal": true; }; "hideXlUp": { "alias": "fxHide.xl-up"; "required": false; "isSignal": true; }; "hideXxlUp": { "alias": "fxHide.xxl-up"; "required": false; "isSignal": true; }; "hideSmDown": { "alias": "fxHide.sm-down"; "required": false; "isSignal": true; }; "hideMdDown": { "alias": "fxHide.md-down"; "required": false; "isSignal": true; }; "hideLgDown": { "alias": "fxHide.lg-down"; "required": false; "isSignal": true; }; "hideXlDown": { "alias": "fxHide.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type StyleMap = Record<string, string>;
+declare class FxStyleDirective extends ResponsiveBaseDirective {
+    readonly fxStyle: _angular_core.InputSignal<StyleMap>;
+    readonly xs: _angular_core.InputSignal<StyleMap>;
+    readonly sm: _angular_core.InputSignal<StyleMap>;
+    readonly md: _angular_core.InputSignal<StyleMap>;
+    readonly lg: _angular_core.InputSignal<StyleMap>;
+    readonly xl: _angular_core.InputSignal<StyleMap>;
+    readonly xxl: _angular_core.InputSignal<StyleMap>;
+    readonly ltSm: _angular_core.InputSignal<StyleMap>;
+    readonly ltMd: _angular_core.InputSignal<StyleMap>;
+    readonly ltLg: _angular_core.InputSignal<StyleMap>;
+    readonly ltXl: _angular_core.InputSignal<StyleMap>;
+    readonly ltXxl: _angular_core.InputSignal<StyleMap>;
+    readonly gtXs: _angular_core.InputSignal<StyleMap>;
+    readonly gtSm: _angular_core.InputSignal<StyleMap>;
+    readonly gtMd: _angular_core.InputSignal<StyleMap>;
+    readonly gtLg: _angular_core.InputSignal<StyleMap>;
+    readonly gtXl: _angular_core.InputSignal<StyleMap>;
+    readonly smUp: _angular_core.InputSignal<StyleMap>;
+    readonly mdUp: _angular_core.InputSignal<StyleMap>;
+    readonly lgUp: _angular_core.InputSignal<StyleMap>;
+    readonly xlUp: _angular_core.InputSignal<StyleMap>;
+    readonly xxlUp: _angular_core.InputSignal<StyleMap>;
+    readonly smDown: _angular_core.InputSignal<StyleMap>;
+    readonly mdDown: _angular_core.InputSignal<StyleMap>;
+    readonly lgDown: _angular_core.InputSignal<StyleMap>;
+    readonly xlDown: _angular_core.InputSignal<StyleMap>;
+    private readonly _resolved;
+    /** Tracks which CSS properties were last applied — plain field, not a signal. */
+    private _appliedProps;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxStyleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxStyleDirective, "    [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]  ", never, { "fxStyle": { "alias": "fxStyle"; "required": false; "isSignal": true; }; "xs": { "alias": "fxStyle.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxStyle.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxStyle.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxStyle.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxStyle.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxStyle.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxStyle.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxStyle.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxStyle.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxStyle.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxStyle.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxStyle.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxStyle.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxStyle.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxStyle.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxStyle.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxStyle.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxStyle.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxStyle.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxStyle.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxStyle.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxStyle.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxStyle.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxStyle.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxStyle.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+type ClassInput = string | string[] | Record<string, boolean>;
+declare class FxClassDirective extends ResponsiveBaseDirective {
+    readonly fxClass: _angular_core.InputSignal<ClassInput>;
+    readonly xs: _angular_core.InputSignal<ClassInput>;
+    readonly sm: _angular_core.InputSignal<ClassInput>;
+    readonly md: _angular_core.InputSignal<ClassInput>;
+    readonly lg: _angular_core.InputSignal<ClassInput>;
+    readonly xl: _angular_core.InputSignal<ClassInput>;
+    readonly xxl: _angular_core.InputSignal<ClassInput>;
+    readonly ltSm: _angular_core.InputSignal<ClassInput>;
+    readonly ltMd: _angular_core.InputSignal<ClassInput>;
+    readonly ltLg: _angular_core.InputSignal<ClassInput>;
+    readonly ltXl: _angular_core.InputSignal<ClassInput>;
+    readonly ltXxl: _angular_core.InputSignal<ClassInput>;
+    readonly gtXs: _angular_core.InputSignal<ClassInput>;
+    readonly gtSm: _angular_core.InputSignal<ClassInput>;
+    readonly gtMd: _angular_core.InputSignal<ClassInput>;
+    readonly gtLg: _angular_core.InputSignal<ClassInput>;
+    readonly gtXl: _angular_core.InputSignal<ClassInput>;
+    readonly smUp: _angular_core.InputSignal<ClassInput>;
+    readonly mdUp: _angular_core.InputSignal<ClassInput>;
+    readonly lgUp: _angular_core.InputSignal<ClassInput>;
+    readonly xlUp: _angular_core.InputSignal<ClassInput>;
+    readonly xxlUp: _angular_core.InputSignal<ClassInput>;
+    readonly smDown: _angular_core.InputSignal<ClassInput>;
+    readonly mdDown: _angular_core.InputSignal<ClassInput>;
+    readonly lgDown: _angular_core.InputSignal<ClassInput>;
+    readonly xlDown: _angular_core.InputSignal<ClassInput>;
+    private readonly _resolved;
+    /** Tracks which CSS classes were last applied — plain field, not a signal. */
+    private _appliedClasses;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FxClassDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FxClassDirective, "    [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]  ", never, { "fxClass": { "alias": "fxClass"; "required": false; "isSignal": true; }; "xs": { "alias": "fxClass.xs"; "required": false; "isSignal": true; }; "sm": { "alias": "fxClass.sm"; "required": false; "isSignal": true; }; "md": { "alias": "fxClass.md"; "required": false; "isSignal": true; }; "lg": { "alias": "fxClass.lg"; "required": false; "isSignal": true; }; "xl": { "alias": "fxClass.xl"; "required": false; "isSignal": true; }; "xxl": { "alias": "fxClass.xxl"; "required": false; "isSignal": true; }; "ltSm": { "alias": "fxClass.lt-sm"; "required": false; "isSignal": true; }; "ltMd": { "alias": "fxClass.lt-md"; "required": false; "isSignal": true; }; "ltLg": { "alias": "fxClass.lt-lg"; "required": false; "isSignal": true; }; "ltXl": { "alias": "fxClass.lt-xl"; "required": false; "isSignal": true; }; "ltXxl": { "alias": "fxClass.lt-xxl"; "required": false; "isSignal": true; }; "gtXs": { "alias": "fxClass.gt-xs"; "required": false; "isSignal": true; }; "gtSm": { "alias": "fxClass.gt-sm"; "required": false; "isSignal": true; }; "gtMd": { "alias": "fxClass.gt-md"; "required": false; "isSignal": true; }; "gtLg": { "alias": "fxClass.gt-lg"; "required": false; "isSignal": true; }; "gtXl": { "alias": "fxClass.gt-xl"; "required": false; "isSignal": true; }; "smUp": { "alias": "fxClass.sm-up"; "required": false; "isSignal": true; }; "mdUp": { "alias": "fxClass.md-up"; "required": false; "isSignal": true; }; "lgUp": { "alias": "fxClass.lg-up"; "required": false; "isSignal": true; }; "xlUp": { "alias": "fxClass.xl-up"; "required": false; "isSignal": true; }; "xxlUp": { "alias": "fxClass.xxl-up"; "required": false; "isSignal": true; }; "smDown": { "alias": "fxClass.sm-down"; "required": false; "isSignal": true; }; "mdDown": { "alias": "fxClass.md-down"; "required": false; "isSignal": true; }; "lgDown": { "alias": "fxClass.lg-down"; "required": false; "isSignal": true; }; "xlDown": { "alias": "fxClass.xl-down"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ArsUIFlexModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ArsUIFlexModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ArsUIFlexModule, never, [typeof FxLayoutDirective, typeof FxLayoutWrapDirective, typeof FxFlexDirective, typeof FxShowHideDirective, typeof FxLayoutAlignDirective, typeof FxLayoutGapDirective, typeof FxFlexOrderDirective, typeof FxFlexOffsetDirective, typeof FxFlexAlignDirective, typeof FxFlexFillDirective, typeof FxStyleDirective, typeof FxClassDirective, typeof FxGridDirective, typeof FxGridColumnDirective, typeof FxGridAreaDirective, typeof IfBpDirective], [typeof FxLayoutDirective, typeof FxLayoutWrapDirective, typeof FxFlexDirective, typeof FxShowHideDirective, typeof FxLayoutAlignDirective, typeof FxLayoutGapDirective, typeof FxFlexOrderDirective, typeof FxFlexOffsetDirective, typeof FxFlexAlignDirective, typeof FxFlexFillDirective, typeof FxStyleDirective, typeof FxClassDirective, typeof FxGridDirective, typeof FxGridColumnDirective, typeof FxGridAreaDirective, typeof IfBpDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<ArsUIFlexModule>;
+}
+
+export { ALIAS_FAMILIES, ALIAS_INDEX, ArsUIFlexModule, BS5_BREAKPOINTS, BusyDialogComponent, BusyTimer, CANONICAL_ALIASES, ConfirmDialogComponent, CredentialsDialogComponent, DeleteDialogComponent, DeleteDialogConfirmMode, DialogService, FxClassDirective, FxFlexAlignDirective, FxFlexDirective, FxFlexFillDirective, FxFlexOffsetDirective, FxFlexOrderDirective, FxGridAreaDirective, FxGridColumnDirective, FxGridDirective, FxLayoutAlignDirective, FxLayoutDirective, FxLayoutGapDirective, FxLayoutWrapDirective, FxShowHideDirective, FxStyleDirective, IfBpDirective, InfoDialogComponent, LAYOUT_BREAKPOINTS, MediaObserver, NON_CANONICAL_PRIORITY, OtpInputComponent, PaginatorIntl, PasswordStrengthComponent, RecoverPasswordDialogComponent, ResetPasswordDialogComponent, ResponsiveBaseDirective, ToastComponent, UIService, resolve, resolveAll, resolveNonCanonical };
+export type { BpValues, BreakpointAlias, CanonicalKey, ConfirmDialogData, ConfirmDialogOption, CredentialsDialogData, CredentialsDialogResult, DeleteDialogData, DialogOption, DialogResult, IDialogService, InfoDialogData, NcValues, NonCanonicalKey, RecoverPasswordDialogData, RecoverPasswordDialogResult, ResetPasswordDialogData, ResetPasswordDialogMode, ResetPasswordDialogResult, ToastData };