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

Angular Material Extensions

import * as i0 from '@angular/core';
import { OnDestroy, TemplateRef, ApplicationRef, Injector, ViewContainerRef, ChangeDetectorRef, InjectionToken, EventEmitter, OnInit, ElementRef, AfterContentInit } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/cdk/overlay';
import { ScrollStrategy } from '@angular/cdk/overlay';
import * as i3 from '@angular/cdk/a11y';
import { FocusOrigin } from '@angular/cdk/a11y';
import { Direction } from '@angular/cdk/bidi';
import { Subject } from 'rxjs';

/**
 * Injection token that can be used to reference instances of `MtxPopoverContent`. It serves
 * as alternative token to the actual `MtxPopoverContent` class which could cause unnecessary
 * retention of the class and its directive metadata.
 */
declare const MTX_POPOVER_CONTENT: InjectionToken<MtxPopoverContent>;
declare abstract class _MtxPopoverContentBase implements OnDestroy {
    private _template;
    private _appRef;
    private _injector;
    private _viewContainerRef;
    private _document;
    private _changeDetectorRef?;
    private _portal;
    private _outlet;
    /** Emits when the popover content has been attached. */
    readonly _attached: Subject<void>;
    constructor(_template: TemplateRef<any>, _appRef: ApplicationRef, _injector: Injector, _viewContainerRef: ViewContainerRef, _document: any, _changeDetectorRef?: ChangeDetectorRef | undefined);
    /**
     * Attaches the content with a particular context.
     * @docs-private
     */
    attach(context?: any): void;
    /**
     * Detaches the content.
     * @docs-private
     */
    detach(): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<_MtxPopoverContentBase, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<_MtxPopoverContentBase, never, never, {}, {}, never, never, true, never>;
}
/**
 * Popover content that will be rendered lazily once the popover is opened.
 */
declare class MtxPopoverContent extends _MtxPopoverContentBase {
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverContent, "ng-template[mtxPopoverContent]", never, {}, {}, never, never, true, never>;
}

/** First value of popover's position. */
type MtxPopoverPositionStart = 'above' | 'below' | 'before' | 'after';
/** Second value of popover's position. */
type MtxPopoverPositionEnd = MtxPopoverPositionStart | 'center';
/** Popover's position. */
type MtxPopoverPosition = [MtxPopoverPositionStart, MtxPopoverPositionEnd];
/** Popover's trigger event. */
type MtxPopoverTriggerEvent = 'click' | 'hover' | 'none';
/** Reason why the popover was closed. */
type PopoverCloseReason = void | 'click' | 'keydown' | 'tab';

/**
 * Interface for a custom popover panel that can be used with `mtxPopoverTriggerFor`.
 * @docs-private
 */
interface MtxPopoverPanel {
    triggerEvent: MtxPopoverTriggerEvent;
    enterDelay: number;
    leaveDelay: number;
    position: MtxPopoverPosition;
    xOffset: number;
    yOffset: number;
    closeOnPanelClick: boolean;
    closeOnBackdropClick: boolean;
    closeDisabled: boolean;
    backdropClass?: string;
    overlayPanelClass?: string | string[];
    hasBackdrop?: boolean;
    templateRef: TemplateRef<any>;
    lazyContent?: any;
    direction?: Direction;
    readonly panelId?: string;
    readonly closed: EventEmitter<PopoverCloseReason>;
    setCurrentStyles: (pos?: MtxPopoverPosition) => void;
    setPositionClasses: (pos?: MtxPopoverPosition) => void;
    setElevation: () => void;
}
/** Default `mtx-popover` options that can be overridden. */
interface MtxPopoverDefaultOptions {
    triggerEvent?: MtxPopoverTriggerEvent;
    enterDelay?: number;
    leaveDelay?: number;
    position?: MtxPopoverPosition;
    xOffset?: number;
    yOffset?: number;
    arrowWidth?: number;
    arrowHeight?: number;
    arrowOffsetX?: number;
    arrowOffsetY?: number;
    hideArrow?: boolean;
    closeOnPanelClick?: boolean;
    closeOnBackdropClick?: boolean;
    overlayPanelClass?: string;
    backdropClass?: string;
    hasBackdrop?: boolean;
    focusTrapEnabled?: boolean;
    focusTrapAutoCaptureEnabled?: boolean;
}

/** Injection token to be used to override the default options for `mtx-popover`. */
declare const MTX_POPOVER_DEFAULT_OPTIONS: InjectionToken<MtxPopoverDefaultOptions>;
declare class MtxPopover implements MtxPopoverPanel, OnInit, OnDestroy {
    private _changeDetectorRef;
    private _elementRef;
    private _unusedNgZone;
    private _defaultOptions;
    private _previousElevation?;
    private _elevationPrefix;
    private _baseElevation;
    private _exitFallbackTimeout;
    /** Whether animations are currently disabled. */
    protected _animationsDisabled: boolean;
    /** Config object to be passed into the popover's class. */
    _classList: {
        [key: string]: boolean;
    };
    /** Current state of the panel animation. */
    _panelAnimationState: 'void' | 'enter';
    /** Emits whenever an animation on the popover completes. */
    readonly _animationDone: Subject<"void" | "enter">;
    /** Whether the popover is animating. */
    _isAnimating: boolean;
    /** Closing disabled on popover */
    closeDisabled: boolean;
    /** Config object to be passed into the popover's arrow style */
    arrowStyles?: Record<string, unknown>;
    /** Layout direction of the popover. */
    direction?: Direction;
    /** Class or list of classes to be added to the overlay panel. */
    overlayPanelClass: string | string[];
    /** Class to be added to the backdrop element. */
    backdropClass: string | undefined;
    /** aria-label for the popover panel. */
    ariaLabel?: string;
    /** aria-labelledby for the popover panel. */
    ariaLabelledby?: string;
    /** aria-describedby for the popover panel. */
    ariaDescribedby?: string;
    /** Popover's trigger event. */
    triggerEvent: MtxPopoverTriggerEvent;
    /** Popover's enter delay. */
    enterDelay: number;
    /** Popover's leave delay. */
    leaveDelay: number;
    /** Popover's position. */
    get position(): MtxPopoverPosition;
    set position(value: MtxPopoverPosition);
    private _position;
    /** Popover-panel's X offset. */
    xOffset: number;
    /** Popover-panel's Y offset. */
    yOffset: number;
    /** Popover-arrow's width. */
    arrowWidth: number;
    /** Popover-arrow's height. */
    arrowHeight: number;
    /** Popover-arrow's X offset. */
    arrowOffsetX: number;
    /** Popover-arrow's Y offset. */
    arrowOffsetY: number;
    /** Whether the popover arrow should be hidden. */
    hideArrow: boolean;
    /** Whether popover can be closed when click the popover-panel. */
    closeOnPanelClick: boolean;
    /** Whether popover can be closed when click the backdrop. */
    closeOnBackdropClick: boolean;
    /** Whether enable focus trap using `cdkTrapFocus`. */
    focusTrapEnabled: boolean;
    /** Whether enable focus trap auto capture using `cdkTrapFocusAutoCapture`. */
    focusTrapAutoCaptureEnabled: boolean;
    /** Whether the popover has a backdrop. It will always be false if the trigger event is hover. */
    hasBackdrop: boolean | undefined;
    /**
     * This method takes classes set on the host mtx-popover element and applies them on the
     * popover template that displays in the overlay container. Otherwise, it's difficult
     * to style the containing popover from outside the component.
     * @param classes list of class names
     */
    set panelClass(classes: string);
    private _previousPanelClass?;
    /**
     * This method takes classes set on the host mtx-popover element and applies them on the
     * popover template that displays in the overlay container. Otherwise, it's difficult
     * to style the containing popover from outside the component.
     * @deprecated Use `panelClass` instead.
     * @breaking-change 8.0.0
     */
    get classList(): string;
    set classList(classes: string);
    /** Event emitted when the popover is closed. */
    closed: EventEmitter<PopoverCloseReason>;
    /** @docs-private */
    templateRef: TemplateRef<any>;
    /**
     * Popover content that will be rendered lazily.
     * @docs-private
     */
    lazyContent?: MtxPopoverContent;
    readonly panelId: string;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /** Handle a keyboard event from the popover, delegating to the appropriate action. */
    _handleKeydown(event: KeyboardEvent): void;
    /** Close popover on click if `closeOnPanelClick` is true. */
    _handleClick(): void;
    /** Disables close of popover when leaving trigger element and mouse over the popover. */
    _handleMouseOver(): void;
    /** Enables close of popover when mouse leaving popover element. */
    _handleMouseLeave(): void;
    /** Sets the current styles for the popover to allow for dynamically changing settings. */
    setCurrentStyles(pos?: MtxPopoverPosition): void;
    /**
     * It's necessary to set position-based classes to ensure the popover panel animation
     * folds out from the correct direction.
     */
    setPositionClasses(pos?: MtxPopoverPosition): void;
    /** Sets the popover-panel's elevation. */
    setElevation(): void;
    /** Callback that is invoked when the panel animation completes. */
    protected _onAnimationDone(state: string): void;
    protected _onAnimationStart(state: string): void;
    _setIsOpen(isOpen: boolean): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopover, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<MtxPopover, "mtx-popover", ["mtxPopover"], { "backdropClass": { "alias": "backdropClass"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "triggerEvent": { "alias": "triggerEvent"; "required": false; }; "enterDelay": { "alias": "enterDelay"; "required": false; }; "leaveDelay": { "alias": "leaveDelay"; "required": false; }; "position": { "alias": "position"; "required": false; }; "xOffset": { "alias": "xOffset"; "required": false; }; "yOffset": { "alias": "yOffset"; "required": false; }; "arrowWidth": { "alias": "arrowWidth"; "required": false; }; "arrowHeight": { "alias": "arrowHeight"; "required": false; }; "arrowOffsetX": { "alias": "arrowOffsetX"; "required": false; }; "arrowOffsetY": { "alias": "arrowOffsetY"; "required": false; }; "hideArrow": { "alias": "hideArrow"; "required": false; }; "closeOnPanelClick": { "alias": "closeOnPanelClick"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "focusTrapEnabled": { "alias": "focusTrapEnabled"; "required": false; }; "focusTrapAutoCaptureEnabled": { "alias": "focusTrapAutoCaptureEnabled"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelClass": { "alias": "class"; "required": false; }; "classList": { "alias": "classList"; "required": false; }; }, { "closed": "closed"; }, ["lazyContent"], ["*"], true, never>;
    static ngAcceptInputType_hideArrow: unknown;
    static ngAcceptInputType_closeOnPanelClick: unknown;
    static ngAcceptInputType_closeOnBackdropClick: unknown;
    static ngAcceptInputType_focusTrapEnabled: unknown;
    static ngAcceptInputType_focusTrapAutoCaptureEnabled: unknown;
    static ngAcceptInputType_hasBackdrop: unknown;
}

declare class MtxPopoverTarget {
    elementRef: ElementRef<any>;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverTarget, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverTarget, "mtx-popover-target, [mtxPopoverTarget]", ["mtxPopoverTarget"], {}, {}, never, never, true, never>;
}

/** Injection token that determines the scroll handling while the popover is open. */
declare const MTX_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
/**
 * This directive is intended to be used in conjunction with an `mtx-popover` tag. It is
 * responsible for toggling the display of the provided popover instance.
 */
declare class MtxPopoverTrigger implements AfterContentInit, OnDestroy {
    private _overlay;
    private _elementRef;
    private _viewContainerRef;
    private _dir;
    private _changeDetectorRef;
    private _focusMonitor;
    private _portal?;
    private _overlayRef;
    private _popoverOpen;
    private _halt;
    private _positionSubscription;
    private _popoverCloseSubscription;
    private _pendingRemoval;
    private _closingActionsSubscription;
    private _scrollStrategy;
    private _mouseoverTimer;
    _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
    /** References the popover instance that the trigger is associated with. */
    get popover(): MtxPopoverPanel;
    set popover(popover: MtxPopoverPanel);
    private _popover;
    /** Data to be passed along to any lazily-rendered content. */
    popoverData: any;
    /** References the popover target instance that the trigger is associated with. */
    targetElement?: MtxPopoverTarget;
    /** Popover trigger event */
    triggerEvent?: MtxPopoverTriggerEvent;
    /** Event emitted when the associated popover is opened. */
    popoverOpened: EventEmitter<void>;
    /** Event emitted when the associated popover is closed. */
    popoverClosed: EventEmitter<void>;
    ngAfterContentInit(): void;
    ngOnDestroy(): void;
    private _setCurrentConfig;
    /** Whether the popover is open. */
    get popoverOpen(): boolean;
    /** The text direction of the containing app. */
    get dir(): Direction;
    /** Handles mouse click on the trigger. */
    _handleClick(event: MouseEvent): void;
    /** Handles mouse enter on the trigger. */
    _handleMouseEnter(event: MouseEvent): void;
    /** Handles mouse leave on the trigger. */
    _handleMouseLeave(event: MouseEvent): void;
    /** Handles mouse presses on the trigger. */
    _handleMousedown(event: MouseEvent): void;
    /** Handles key presses on the trigger. */
    _handleKeydown(event: KeyboardEvent): void;
    /** Toggles the popover between the open and closed states. */
    togglePopover(): void;
    /** Opens the popover. */
    openPopover(): void;
    /** Closes the popover. */
    closePopover(): void;
    /**
     * Focuses the popover trigger.
     * @param origin Source of the popover trigger's focus.
     */
    focus(origin?: FocusOrigin, options?: FocusOptions): void;
    /** Removes the popover from the DOM. */
    private _destroyPopover;
    /**
     * This method sets the popover state to open.
     */
    private _initPopover;
    private _setIsPopoverOpen;
    /**
     * This method checks that a valid instance of MdPopover has been passed into
     * `mtxPopoverTriggerFor`. If not, an exception is thrown.
     */
    private _checkPopover;
    /**
     * This method creates the overlay from the provided popover's template and saves its
     * OverlayRef so that it can be attached to the DOM when openPopover is called.
     */
    private _createOverlay;
    /**
     * This method builds the configuration object needed to create the overlay, the OverlayConfig.
     * @returns OverlayConfig
     */
    private _getOverlayConfig;
    private _getTargetElement;
    /**
     * Listens to changes in the position of the overlay and sets the correct classes
     * on the popover based on the new position. This ensures the animation origin is always
     * correct, even if a fallback position is used for the overlay.
     */
    private _subscribeToPositions;
    /**
     * Sets the appropriate positions on a position strategy
     * so the overlay connects with the trigger correctly.
     * @param positionStrategy Strategy whose position to update.
     */
    private _setPosition;
    /** Returns a stream that emits whenever an action that should close the popover occurs. */
    private _popoverClosingActions;
    /** Gets the portal that should be attached to the overlay. */
    private _getPortal;
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverTrigger, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxPopoverTrigger, "[mtx-popover-trigger-for], [mtxPopoverTriggerFor]", ["mtxPopoverTrigger"], { "popover": { "alias": "mtxPopoverTriggerFor"; "required": false; }; "popoverData": { "alias": "mtxPopoverTriggerData"; "required": false; }; "targetElement": { "alias": "mtxPopoverTargetAt"; "required": false; }; "triggerEvent": { "alias": "mtxPopoverTriggerOn"; "required": false; }; }, { "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
}

declare class MtxPopoverModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<MtxPopoverModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxPopoverModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof MtxPopover, typeof MtxPopoverTrigger, typeof MtxPopoverTarget, typeof MtxPopoverContent], [typeof MtxPopover, typeof MtxPopoverTrigger, typeof MtxPopoverTarget, typeof MtxPopoverContent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<MtxPopoverModule>;
}

export { MTX_POPOVER_CONTENT, MTX_POPOVER_DEFAULT_OPTIONS, MTX_POPOVER_SCROLL_STRATEGY, MtxPopover, MtxPopoverContent, MtxPopoverModule, MtxPopoverTarget, MtxPopoverTrigger, _MtxPopoverContentBase };
export type { MtxPopoverDefaultOptions, MtxPopoverPanel, MtxPopoverPosition, MtxPopoverPositionEnd, MtxPopoverPositionStart, MtxPopoverTriggerEvent, PopoverCloseReason };