@sixbell-telco/sdk/directives/auto-focus/src/auto-focus.directive.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
import * as i0 from "@angular/core";
/**
 * Directive that automatically focuses an element when it becomes visible.
 *
 * This directive uses multiple strategies to detect when an element becomes visible:
 * - IntersectionObserver to detect when the element enters the viewport
 * - MutationObserver to detect DOM changes that might affect visibility
 * - Polling at regular intervals as a fallback mechanism
 *
 * The directive works reliably with modals, dialogs, accordions, and other UI components
 * that dynamically show and hide content.
 *
 * @example
 * ```html
 * <!-- Basic usage -->
 * <input [stAutofocus]="true" />
 *
 * <!-- Conditional autofocus -->
 * <input [stAutofocus]="shouldFocus" />
 *
 * <!-- In a form inside a dialog -->
 * <st-dialog>
 *   <input [stAutofocus]="true" />
 * </st-dialog>
 * ```
 *
 * @usageNotes
 * The directive takes a boolean input that determines whether autofocus should be applied.
 * When this value is true, the directive will attempt to focus the element once it becomes visible,
 * and will continue to monitor the element's visibility state in case it changes.
 *
 * This is particularly useful for:
 * - Elements in modals that need focus when opened
 * - Elements in accordions/collapsible sections that should receive focus when expanded
 * - Elements that are conditionally rendered and need focus when they appear
 *
 * @publicApi
 */
export declare class AutofocusDirective implements AfterViewInit, OnDestroy {
    private readonly elementRef;
    /**
     * Controls whether autofocus should be applied to the element.
     * Set to true to enable autofocus.
     */
    focus: import("@angular/core").InputSignal<boolean>;
    /** Tracks the current visibility state of the element */
    private readonly isVisible;
    /** Keeps a reference so the afterRenderEffect can be destroyed with the directive */
    private readonly focusAfterRenderRef;
    /** Collection of observers for cleanup */
    private observers;
    /** Interval used for polling visibility */
    private pollingInterval;
    /** Flag to prevent concurrent visibility checks */
    private checkingVisibility;
    constructor(elementRef: ElementRef);
    /**
     * Sets up visibility observers after the view is initialized
     */
    ngAfterViewInit(): void;
    /**
     * Cleans up all observers and timers to prevent memory leaks
     */
    ngOnDestroy(): void;
    /**
     * Sets up the IntersectionObserver to detect when the element enters or leaves the viewport
     * @private
     */
    private setupIntersectionObserver;
    /**
     * Sets up MutationObserver to detect style/class changes that might affect visibility
     * Also monitors parent elements to detect when containers like modals appear/disappear
     * @private
     */
    private setupMutationObserver;
    /**
     * Checks if the element is truly visible by examining computed style and dimensions
     * @param force Whether to force a check even if one is already in progress
     * @private
     */
    private checkVisibility;
    /**
     * Updates the visibility signal that drives the autofocus effect
     * @param visible The new visibility state
     * @private
     */
    private updateVisibility;
    static ɵfac: i0.ɵɵFactoryDeclaration<AutofocusDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<AutofocusDirective, "[stAutofocus]", never, { "focus": { "alias": "focus"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}