@ng-matero/extensions/types/mtxDrawer.d.ts

Angular Material Extensions

import * as i0 from '@angular/core';
import { ViewContainerRef, OnDestroy, EventEmitter, ComponentRef, InjectionToken, TemplateRef } from '@angular/core';
import * as i1 from '@angular/cdk/dialog';
import { DialogRole, CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
import * as i2 from '@angular/cdk/portal';
import { CdkPortalOutlet, ComponentType } from '@angular/cdk/portal';
import * as i4 from '@angular/cdk/bidi';
import { Direction } from '@angular/cdk/bidi';
import { ScrollStrategy } from '@angular/cdk/overlay';
import { Observable, Subject } from 'rxjs';

/** Options for where to set focus to automatically on dialog open. */
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
/** Possible overrides for a drawer's position. */
type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
/**
 * Configuration used when opening a drawer.
 */
declare class MtxDrawerConfig<D = any> {
    /** The view container to place the overlay for the drawer into. */
    viewContainerRef?: ViewContainerRef;
    /** ID for the drawer. If omitted, a unique one will be generated. */
    id?: string;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Extra CSS classes to be added to the drawer container. */
    panelClass?: string | string[];
    /** Text layout direction for the drawer. */
    direction?: Direction;
    /** Data being injected into the child component. */
    data?: D | null;
    /** Whether the drawer has a backdrop. */
    hasBackdrop?: boolean;
    /** Custom class for the backdrop. */
    backdropClass?: string;
    /** Whether the user can use escape or clicking outside to close the drawer. */
    disableClose?: boolean;
    /** Aria label to assign to the drawer element. */
    ariaLabel?: string | null;
    /**
     * Whether this is a modal dialog. Used to set the `aria-modal` attribute. Off by default,
     * because it can interfere with other overlay-based components (e.g. `mat-select`) and because
     * it is redundant since the dialog marks all outside content as `aria-hidden` anyway.
     */
    ariaModal?: boolean;
    /**
     * Whether the drawer should close when the user goes backwards/forwards in history.
     * Note that this usually doesn't include clicking on links (unless the user is using
     * the `HashLocationStrategy`).
     */
    closeOnNavigation?: boolean;
    /**
     * Where the drawer should focus on open.
     * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
     * AutoFocusTarget instead.
     */
    autoFocus?: AutoFocusTarget | string | boolean;
    /**
     * Whether the drawer should restore focus to the
     * previously-focused element, after it's closed.
     */
    restoreFocus?: boolean;
    /** Scroll strategy to be used for the drawer. */
    scrollStrategy?: ScrollStrategy;
    /** Position of the drawer. */
    position?: DrawerPosition;
    /** Width of the drawer. */
    width?: string;
    /** Height of the drawer. */
    height?: string;
    /** Min-width of the drawer. If a number is provided, assumes pixel units. */
    minWidth?: number | string;
    /** Min-height of the drawer. If a number is provided, assumes pixel units. */
    minHeight?: number | string;
    /** Max-width of the drawer. If a number is provided, assumes pixel units. */
    maxWidth?: number | string;
    /** Max-height of the drawer. If a number is provided, assumes pixel units. */
    maxHeight?: number | string;
}

/**
 * Internal component that wraps user-provided drawer content.
 * @docs-private
 */
declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConfig> implements OnDestroy {
    /** The portal outlet inside of this container into which the content will be loaded. */
    _portalOutlet: CdkPortalOutlet;
    protected _animationsDisabled: boolean;
    /** The state of the drawer animations. */
    _animationState: 'void' | 'visible' | 'hidden';
    /** Emits whenever the state of the animation changes. */
    _animationStateChanged: EventEmitter<{
        toState: "visible" | "hidden";
        phase: "start" | "done";
    }>;
    /** Whether the component has been destroyed. */
    private _destroyed;
    get _drawerPosition(): string;
    protected _contentAttached(): void;
    /** Begin animation of bottom sheet entrance into view. */
    enter(): void;
    /** Begin animation of the bottom sheet exiting from view. */
    exit(): void;
    ngOnDestroy(): void;
    private _simulateAnimation;
    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
    protected _captureInitialFocus(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never, true, never>;
}

declare class MtxDrawerModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDrawerModule, never, [typeof i1.DialogModule, typeof i2.PortalModule, typeof MtxDrawerContainer], [typeof MtxDrawerContainer, typeof i4.BidiModule]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<MtxDrawerModule>;
}

/**
 * Reference to a drawer dispatched from the drawer service.
 */
declare class MtxDrawerRef<T = any, R = any> {
    private _ref;
    /** Instance of the component making up the content of the drawer. */
    get instance(): T;
    /**
     * `ComponentRef` of the component opened into the drawer. Will be
     * null when the drawer is opened using a `TemplateRef`.
     */
    get componentRef(): ComponentRef<T> | null;
    /**
     * Instance of the component into which the drawer content is projected.
     * @docs-private
     */
    containerInstance: MtxDrawerContainer;
    /** Whether the user is allowed to close the drawer. */
    disableClose: boolean | undefined;
    /** Unique ID for the drawer. */
    id: string;
    /** Subject for notifying the user that the drawer has been dismissed. */
    private readonly _afterDismissed;
    /** Subject for notifying the user that the drawer has opened and appeared. */
    private readonly _afterOpened;
    /** Result to be passed down to the `afterDismissed` stream. */
    private _result;
    /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
    private _closeFallbackTimeout;
    constructor(_ref: DialogRef<R, T>, config: MtxDrawerConfig, containerInstance: MtxDrawerContainer);
    /**
     * Dismisses the drawer.
     * @param result Data to be passed back to the drawer opener.
     */
    dismiss(result?: R): void;
    /** Gets an observable that is notified when the drawer is finished closing. */
    afterDismissed(): Observable<R | undefined>;
    /** Gets an observable that is notified when the drawer has opened and appeared. */
    afterOpened(): Observable<void>;
    /**
     * Gets an observable that emits when the overlay's backdrop has been clicked.
     */
    backdropClick(): Observable<MouseEvent>;
    /**
     * Gets an observable that emits when keydown events are targeted on the overlay.
     */
    keydownEvents(): Observable<KeyboardEvent>;
}

/** Injection token that can be used to access the data that was passed in to a drawer. */
declare const MTX_DRAWER_DATA: InjectionToken<any>;
/** Injection token that can be used to specify default drawer options. */
declare const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig<any>>;
/**
 * Service to trigger Material Design bottom sheets.
 */
declare class MtxDrawer implements OnDestroy {
    private _overlay;
    private _parentDrawer;
    private _defaultOptions;
    private readonly _openDrawersAtThisLevel;
    private readonly _afterAllDismissedAtThisLevel;
    private readonly _afterOpenedAtThisLevel;
    private _dialog;
    /** Keeps track of the currently-open dialogs. */
    get openDrawers(): MtxDrawerRef<any>[];
    /** Stream that emits when a drawer has been opened. */
    get afterOpened(): Subject<MtxDrawerRef<any>>;
    private _getAfterAllDismissed;
    /**
     * Stream that emits when all open drawer have finished closing.
     * Will emit on subscribe if there are no open drawers to begin with.
     */
    readonly afterAllDismissed: Observable<void>;
    /**
     * Opens a drawer containing the given component.
     * @param component Type of the component to load into the drawer.
     * @param config Extra configuration options.
     * @returns Reference to the newly-opened drawer.
     */
    open<T, D = any, R = any>(component: ComponentType<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
    /**
     * Opens a drawer containing the given template.
     * @param template TemplateRef to instantiate as the drawer content.
     * @param config Extra configuration options.
     * @returns Reference to the newly-opened drawer.
     */
    open<T, D = any, R = any>(template: TemplateRef<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
    /**
     * Dismisses all of the currently-open drawers.
     */
    dismissAll(): void;
    /**
     * Finds an open drawer by its id.
     * @param id ID to use when looking up the drawer.
     */
    getDrawerById(id: string): MtxDrawerRef<any> | undefined;
    ngOnDestroy(): void;
    private _dismissDrawers;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDrawer>;
}

export { MTX_DRAWER_DATA, MTX_DRAWER_DEFAULT_OPTIONS, MtxDrawer, MtxDrawerConfig, MtxDrawerContainer, MtxDrawerModule, MtxDrawerRef };
export type { AutoFocusTarget, DrawerPosition };