@ncstate/sat-popover
Version:
Popover component for Angular
305 lines (297 loc) • 16.2 kB
TypeScript
import * as i0 from '@angular/core';
import { OnDestroy, NgZone, ViewContainerRef, ElementRef, OnInit, AfterViewInit, EventEmitter, TemplateRef, InjectionToken } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/cdk/overlay';
import { OverlayRef, Overlay } from '@angular/cdk/overlay';
import * as i3 from '@angular/cdk/a11y';
import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import * as i4 from '@angular/cdk/bidi';
import { Directionality } from '@angular/cdk/bidi';
import { AnimationEvent } from '@angular/animations';
import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
import { Subject } from 'rxjs';
type SatPopoverScrollStrategy = 'noop' | 'block' | 'reposition' | 'close';
type SatPopoverHorizontalAlign = 'before' | 'start' | 'center' | 'end' | 'after';
type SatPopoverVerticalAlign = 'above' | 'start' | 'center' | 'end' | 'below';
interface SatPopoverOpenOptions {
/**
* Whether the popover should return focus to the previously focused element after
* closing. Defaults to true.
*/
restoreFocus?: boolean;
/** Whether the first focusable element should be focused on open. Defaults to true. */
autoFocus?: boolean;
}
declare class SatPopoverAnchoringService implements OnDestroy {
private _overlay;
private _ngZone;
private _dir;
/** Emits when the popover is opened. */
popoverOpened: Subject<void>;
/** Emits when the popover is closed. */
popoverClosed: Subject<unknown>;
/** Reference to the overlay containing the popover component. */
_overlayRef: OverlayRef;
/** Reference to the target popover. */
private _popover;
/** Reference to the view container for the popover template. */
private _viewContainerRef;
/** Reference to the anchor element. */
private _anchor;
/** Reference to a template portal where the overlay will be attached. */
private _portal;
/** Single subscription to notifications service events. */
private _notificationsSubscription;
/** Single subscription to position changes. */
private _positionChangeSubscription;
/** Whether the popover is presently open. */
private _popoverOpen;
/** Emits when the service is destroyed. */
private _onDestroy;
constructor(_overlay: Overlay, _ngZone: NgZone, _dir: Directionality);
ngOnDestroy(): void;
/** Anchor a popover instance to a view and connection element. */
anchor(popover: SatPopoverComponent, viewContainerRef: ViewContainerRef, anchor: ElementRef | HTMLElement): void;
/** Gets whether the popover is presently open. */
isPopoverOpen(): boolean;
/** Toggles the popover between the open and closed states. */
togglePopover(): void;
/** Opens the popover. */
openPopover(options?: SatPopoverOpenOptions): void;
/** Closes the popover. */
closePopover(value?: unknown): void;
/** TODO: implement when the overlay's position can be dynamically changed */
repositionPopover(): void;
/** TODO: when the overlay's position can be dynamically changed, do not destroy */
updatePopoverConfig(): void;
/** Realign the popover to the anchor. */
realignPopoverToAnchor(): void;
/** Get a reference to the anchor element. */
getAnchorElement(): HTMLElement;
/** Apply behavior properties on the popover based on the open options. */
private _applyOpenOptions;
/** Create an overlay to be attached to the portal. */
private _createOverlay;
/** Removes the popover from the DOM. Does NOT update open state. */
private _destroyPopover;
/**
* Destroys the popover immediately if it is closed, or waits until it
* has been closed to destroy it.
*/
private _destroyPopoverOnceClosed;
/** Close popover when backdrop is clicked. */
private _subscribeToBackdrop;
/** Close popover when escape keydown event occurs. */
private _subscribeToEscape;
/** Set state back to closed when detached. */
private _subscribeToDetachments;
/** Save the opened state of the popover and emit. */
private _saveOpenedState;
/** Save the closed state of the popover and emit. */
private _saveClosedState;
/** Gets the text direction of the containing app. */
private _getDirection;
/** Create and return a config for creating the overlay. */
private _getOverlayConfig;
/**
* Listen to changes in the position of the overlay and set the correct alignment classes,
* ensuring that the animation origin is correct, even with a fallback position.
*/
private _subscribeToPositionChanges;
/** Map a scroll strategy string type to an instance of a scroll strategy. */
private _getScrollStrategyInstance;
/** Create and return a position strategy based on config provided to the component instance. */
private _getPositionStrategy;
/** Get fallback positions based around target alignments. */
private _getFallbacks;
static ɵfac: i0.ɵɵFactoryDeclaration<SatPopoverAnchoringService, [null, null, { optional: true; }]>;
static ɵprov: i0.ɵɵInjectableDeclaration<SatPopoverAnchoringService>;
}
declare class SatPopoverAnchorDirective implements AfterViewInit {
elementRef: ElementRef;
viewContainerRef: ViewContainerRef;
get popover(): SatPopoverComponent;
set popover(val: SatPopoverComponent);
constructor(elementRef: ElementRef, viewContainerRef: ViewContainerRef);
ngAfterViewInit(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SatPopoverAnchorDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SatPopoverAnchorDirective, "[satPopoverAnchor]", ["satPopoverAnchor"], { "popover": { "alias": "satPopoverAnchor"; "required": false; }; }, {}, never, never, true, never>;
}
declare class SatPopoverComponent implements OnInit {
private _focusTrapFactory;
private _viewContainerRef;
private _defaultTransition;
private _document;
/** Anchor element. */
get anchor(): SatPopoverAnchorDirective | ElementRef<HTMLElement> | HTMLElement;
set anchor(val: SatPopoverAnchorDirective | ElementRef<HTMLElement> | HTMLElement);
private _anchor;
/** Alignment of the popover on the horizontal axis. */
get horizontalAlign(): SatPopoverHorizontalAlign;
set horizontalAlign(val: SatPopoverHorizontalAlign);
private _horizontalAlign;
/** Alignment of the popover on the x axis. Alias for `horizontalAlign`. */
get xAlign(): SatPopoverHorizontalAlign;
set xAlign(val: SatPopoverHorizontalAlign);
/** Alignment of the popover on the vertical axis. */
get verticalAlign(): SatPopoverVerticalAlign;
set verticalAlign(val: SatPopoverVerticalAlign);
private _verticalAlign;
/** Alignment of the popover on the y axis. Alias for `verticalAlign`. */
get yAlign(): SatPopoverVerticalAlign;
set yAlign(val: SatPopoverVerticalAlign);
/** Whether the popover always opens with the specified alignment. */
get forceAlignment(): BooleanInput;
set forceAlignment(val: BooleanInput);
private _forceAlignment;
/**
* Whether the popover's alignment is locked after opening. This prevents the popover
* from changing its alignement when scrolling or changing the size of the viewport.
*/
get lockAlignment(): BooleanInput;
set lockAlignment(val: BooleanInput);
private _lockAlignment;
/** Whether the first focusable element should be focused on open. */
get autoFocus(): BooleanInput;
set autoFocus(val: BooleanInput);
private _autoFocus;
_autoFocusOverride: boolean;
/** Whether the popover should return focus to the previously focused element after closing. */
get restoreFocus(): BooleanInput;
set restoreFocus(val: BooleanInput);
private _restoreFocus;
_restoreFocusOverride: boolean;
/** How the popover should handle scrolling. */
get scrollStrategy(): SatPopoverScrollStrategy;
set scrollStrategy(val: SatPopoverScrollStrategy);
private _scrollStrategy;
/** Whether the popover should have a backdrop (includes closing on click). */
get hasBackdrop(): BooleanInput;
set hasBackdrop(val: BooleanInput);
private _hasBackdrop;
/** Whether the popover should close when the user clicks the backdrop or presses ESC. */
get interactiveClose(): boolean;
set interactiveClose(val: BooleanInput);
private _interactiveClose;
/** Custom transition to use while opening. */
get openTransition(): string;
set openTransition(val: string);
private _openTransition;
/** Custom transition to use while closing. */
get closeTransition(): string;
set closeTransition(val: string);
private _closeTransition;
/** Scale value at the start of the :enter animation. */
get openAnimationStartAtScale(): NumberInput;
set openAnimationStartAtScale(val: NumberInput);
private _openAnimationStartAtScale;
/** Scale value at the end of the :leave animation */
get closeAnimationEndAtScale(): NumberInput;
set closeAnimationEndAtScale(val: NumberInput);
private _closeAnimationEndAtScale;
/** Optional backdrop class. */
backdropClass: string;
/** Optional custom class to add to the overlay pane. */
panelClass: string | string[];
/** Emits when the popover is opened. */
opened: EventEmitter<void>;
/** Emits when the popover is closed. */
closed: EventEmitter<unknown>;
/** Emits when the popover has finished opening. */
afterOpen: EventEmitter<void>;
/** Emits when the popover has finished closing. */
afterClose: EventEmitter<void>;
/** Emits when the backdrop is clicked. */
backdropClicked: EventEmitter<void>;
/** Emits when a keydown event is targeted to this popover's overlay. */
overlayKeydown: EventEmitter<KeyboardEvent>;
/** Reference to template so it can be placed within a portal. */
_templateRef: TemplateRef<unknown>;
/** Classes to be added to the popover for setting the correct transform origin. */
_classList: {
[]: boolean;
};
/** Whether the popover is presently open. */
_open: boolean;
_state: 'enter' | 'void' | 'exit';
/** Reference to the element to build a focus trap around. */
private _focusTrapElement;
/** Reference to the element that was focused before opening. */
private _previouslyFocusedElement;
/** Reference to a focus trap around the popover. */
private _focusTrap;
constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _anchoringService: SatPopoverAnchoringService, _viewContainerRef: ViewContainerRef, _defaultTransition: string, _document?: Document);
ngOnInit(): void;
/** Open this popover. */
open(options?: SatPopoverOpenOptions): void;
/** Close this popover. */
close(value?: unknown): void;
/** Toggle this popover open or closed. */
toggle(): void;
/** Realign the popover to the anchor. */
realign(): void;
/** Gets whether the popover is presently open. */
isOpen(): boolean;
/** Allows programmatically setting a custom anchor. */
setCustomAnchor(viewContainer: ViewContainerRef, el: ElementRef<HTMLElement> | HTMLElement): void;
/** Gets an animation config with customized (or default) transition values. */
get state(): "enter" | "void" | "exit";
get params(): {
openTransition: string;
closeTransition: string;
startAtScale: NumberInput;
endAtScale: NumberInput;
};
/** Callback for when the popover is finished animating in or out. */
_onAnimationDone({ toState }: AnimationEvent): void;
/** Starts the dialog exit animation. */
_startExitAnimation(): void;
/** Apply alignment classes based on alignment inputs. */
_setAlignmentClasses(horizAlign?: SatPopoverHorizontalAlign, vertAlign?: SatPopoverVerticalAlign): void;
/** Move the focus inside the focus trap and remember where to return later. */
private _trapFocus;
/** Restore focus to the element focused before the popover opened. Also destroy trap. */
private _restoreFocusAndDestroyTrap;
/** Save a reference to the element focused before the popover was opened. */
private _savePreviouslyFocusedElement;
/** Throws an error if the alignment is not a valid horizontalAlign. */
private _validateHorizontalAlign;
/** Throws an error if the alignment is not a valid verticalAlign. */
private _validateVerticalAlign;
/** Throws an error if the scroll strategy is not a valid strategy. */
private _validateScrollStrategy;
static ɵfac: i0.ɵɵFactoryDeclaration<SatPopoverComponent, [null, null, null, null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<SatPopoverComponent, "sat-popover", never, { "anchor": { "alias": "anchor"; "required": false; }; "horizontalAlign": { "alias": "horizontalAlign"; "required": false; }; "xAlign": { "alias": "xAlign"; "required": false; }; "verticalAlign": { "alias": "verticalAlign"; "required": false; }; "yAlign": { "alias": "yAlign"; "required": false; }; "forceAlignment": { "alias": "forceAlignment"; "required": false; }; "lockAlignment": { "alias": "lockAlignment"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "scrollStrategy": { "alias": "scrollStrategy"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "interactiveClose": { "alias": "interactiveClose"; "required": false; }; "openTransition": { "alias": "openTransition"; "required": false; }; "closeTransition": { "alias": "closeTransition"; "required": false; }; "openAnimationStartAtScale": { "alias": "openAnimationStartAtScale"; "required": false; }; "closeAnimationEndAtScale": { "alias": "closeAnimationEndAtScale"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; "afterOpen": "afterOpen"; "afterClose": "afterClose"; "backdropClicked": "backdropClicked"; "overlayKeydown": "overlayKeydown"; }, never, ["*"], true, never>;
}
declare class SatPopoverHoverDirective implements AfterViewInit, OnDestroy {
anchor: SatPopoverAnchorDirective;
/**
* Amount of time to delay (ms) after hovering starts before
* the popover opens. Defaults to 0ms.
*/
get satPopoverHover(): NumberInput;
set satPopoverHover(val: NumberInput);
private _satPopoverHover;
/** Emits when the directive is destroyed. */
private _onDestroy;
/** Emits when the user's mouse enters the element. */
private _onMouseEnter;
/** Emits when the user's mouse leaves the element. */
private _onMouseLeave;
constructor(anchor: SatPopoverAnchorDirective);
ngAfterViewInit(): void;
ngOnDestroy(): void;
showPopover(): void;
closePopover(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SatPopoverHoverDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<SatPopoverHoverDirective, "[satPopoverHover]", never, { "satPopoverHover": { "alias": "satPopoverHover"; "required": false; }; }, {}, never, never, true, never>;
}
declare class SatPopoverModule {
static ɵfac: i0.ɵɵFactoryDeclaration<SatPopoverModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<SatPopoverModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.BidiModule, typeof SatPopoverComponent, typeof SatPopoverAnchorDirective, typeof SatPopoverHoverDirective], [typeof SatPopoverComponent, typeof SatPopoverAnchorDirective, typeof SatPopoverHoverDirective, typeof i4.BidiModule]>;
static ɵinj: i0.ɵɵInjectorDeclaration<SatPopoverModule>;
}
declare const DEFAULT_TRANSITION: InjectionToken<unknown>;
export { DEFAULT_TRANSITION, SatPopoverAnchorDirective, SatPopoverAnchoringService, SatPopoverComponent, SatPopoverHoverDirective, SatPopoverModule };
export type { SatPopoverHorizontalAlign, SatPopoverOpenOptions, SatPopoverScrollStrategy, SatPopoverVerticalAlign };
//# sourceMappingURL=index.d.ts.map