import * as i2 from '@angular/cdk/overlay'; import { ScrollStrategy, OverlayRef, Overlay, OverlayContainer } from '@angular/cdk/overlay'; import * as i3 from '@angular/cdk/portal'; import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal, DomPortal, ComponentType } from '@angular/cdk/portal'; import * as i0 from '@angular/core'; import { ViewContainerRef, ComponentFactoryResolver, AfterViewInit, OnDestroy, OnInit, NgZone, ElementRef, EventEmitter, ChangeDetectorRef, ComponentRef, EmbeddedViewRef, InjectionToken, Injector, TemplateRef, OnChanges, SimpleChanges, ModuleWithProviders } from '@angular/core'; import { Subject, Observable } from 'rxjs'; import { Direction } from '@angular/cdk/bidi'; import { AnimationEvent, AnimationTriggerMetadata } from '@angular/animations'; import * as i1 from '@angular/cdk/a11y'; import { FocusTrapFactory, FocusMonitor, InteractivityChecker } from '@angular/cdk/a11y'; import { EventManager } from '@angular/platform-browser'; import * as i5 from '@aposin/ng-aquila/icon'; import { NxStatusIconType } from '@aposin/ng-aquila/icon'; import * as i4 from '@angular/common'; import { NxButtonBase } from '@aposin/ng-aquila/button'; /** Valid ARIA roles for a modal element. */ type NxModalRole = 'dialog' | 'alertdialog'; type NxModalAppearance = 'expert' | 'default'; type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading'; /** Possible overrides for a modal's position. */ interface NxDialogPosition { /** Override for the modal's top position. */ top?: string; /** Override for the modal's bottom position. */ bottom?: string; /** Override for the modal's left position. */ left?: string; /** Override for the modal's right position. */ right?: string; } /** * Configuration for opening a modal with the NxDialogService. */ declare class NxModalConfig { /** * Where the attached component should live in Angular's *logical* component tree. * This affects what is available for injection and the change detection order for the * component instantiated inside of the modal. This does not affect where the modal * content will be rendered. */ viewContainerRef?: ViewContainerRef; /** ID for the modal. If omitted, a unique one will be generated. */ id?: string; /** The ARIA role of the modal element. */ role?: NxModalRole; /** * The appearance of the modal. * * Default: `'default'`. */ appearance?: NxModalAppearance; /** Custom class for the overlay pane. */ panelClass?: string | string[]; /** Whether the modal has a backdrop. */ hasBackdrop?: boolean; /** Custom class for the backdrop. */ backdropClass?: string; /** Whether the user can use escape or clicking on the backdrop to close the modal. */ disableClose?: boolean; /** Whether the modal is to be shown in fullscreen. When set to true, the width, height, maxWidth and maxHeight are overwritten */ fullscreen?: boolean; /** Width of the modal. */ width?: string; /** Height of the modal. */ height?: string; /** Min-width of the modal. If a number is provided, assumes pixel units. */ minWidth?: number | string; /** Min-height of the modal. If a number is provided, assumes pixel units. */ minHeight?: number | string; /** Max-width of the modal. If a number is provided, assumes pixel units. Defaults to '736px'. */ maxWidth?: number | string; /** Max-height of the modal. If a number is provided, assumes pixel units. Defaults to '65vh'. */ maxHeight?: number | string; /** Position overrides. */ position?: NxDialogPosition; /** Data being injected into the child component. */ data?: D | null; /** ID of the element that describes the modal. */ ariaDescribedBy?: string | null; /** ID of the element that labels the modal. */ ariaLabelledBy?: string | null; /** Aria label to assign to the modal element. */ ariaLabel?: string | null; /** Whether the modal should focus the first focusable element on open. */ autoFocus?: boolean | AutoFocusTarget | string; /** * Whether the modal should restore focus to the * previously-focused element, after it's closed. */ restoreFocus?: boolean; /** Scroll strategy to be used for the modal. */ scrollStrategy?: ScrollStrategy; /** * Whether the modal 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; /** * Alternate `ComponentFactoryResolver` to use when resolving the associated component. * @deprecated No longer used. */ componentFactoryResolver?: ComponentFactoryResolver; /** * Whether a close button with icon should be displayed in the top right corner of the modal. * * Default: `false`. */ showCloseIcon?: boolean; /** * Sets the 'aria-label' of the modal close button needed for accessibility. * * Default: `'Close dialog'`. */ closeIconButtonLabel?: string; /** * Sets locale direction for the modal. * * Default: `'ltr'`. */ direction?: Direction; /** Define custom function to determine whether a modal can be closed */ shouldClose?: (modalResult?: any) => boolean; } /** * Throws an exception for the case when a ComponentPortal is * attached to a DomPortalOutlet without an origin. * @docs-private */ declare function throwNxDialogContentAlreadyAttachedError(): void; /** * Internal component that wraps user-provided modal content. * Animation is based on https://material.io/guidelines/motion/choreography.html. * @docs-private */ declare class NxModalContainer extends BasePortalOutlet implements AfterViewInit, OnDestroy, OnInit { private readonly _elementRef; private readonly _focusTrapFactory; private readonly _cdr; private readonly _document; /** The modal configuration. */ readonly _config: NxModalConfig; private readonly _focusMonitor; private readonly _interactivityChecker; protected _ngZone: NgZone; /** The portal outlet inside of this container into which the modal content will be loaded. */ _portalOutlet: CdkPortalOutlet; _closeButton: ElementRef; /** The class that traps and manages focus within the modal. */ private _focusTrap; /** Element that was focused before the modal was opened. Save this to restore upon close. */ private _elementFocusedBeforeDialogWasOpened; /** State of the modal animation. */ _state: 'void' | 'enter' | 'exit'; /** Emits when an animation state changes. */ readonly _animationStateChanged: EventEmitter; /** Emits when the close button (X) is clicked. */ readonly _closeButtonClicked: EventEmitter; /** ID of the element that should be considered as the modal's label. */ _ariaLabelledBy: string | null; /** ID for the container DOM element. */ _id: string; /** for appearance of modal */ _isExpert: boolean; constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _cdr: ChangeDetectorRef, _document: Document | null, /** The modal configuration. */ _config: NxModalConfig, _focusMonitor: FocusMonitor, _interactivityChecker: InteractivityChecker, _ngZone: NgZone); ngAfterViewInit(): void; ngOnInit(): void; ngOnDestroy(): void; /** * Attach a ComponentPortal as content to this modal container. * @param portal Portal to be attached as the modal content. */ attachComponentPortal(portal: ComponentPortal): ComponentRef; /** * Attach a TemplatePortal as content to this modal container. * @param portal Portal to be attached as the modal content. */ attachTemplatePortal(portal: TemplatePortal): EmbeddedViewRef; /** * Attaches a DOM portal to the modal container. * @param portal Portal to be attached. * @deprecated To be turned into a method when changed in the CDK. */ attachDomPortal: (portal: DomPortal) => void; /** Moves the focus inside the focus trap. */ private _trapFocus; private _focusByCssSelector; private _forceFocus; /** Restores focus to the element that was focused before the modal opened. */ private _restoreFocus; /** Saves a reference to the element that was focused before the modal was opened. */ private _savePreviouslyFocusedElement; /** Callback, invoked whenever an animation on the host completes. */ _onAnimationDone(event: AnimationEvent): void; /** Callback, invoked when an animation on the host starts. */ _onAnimationStart(event: AnimationEvent): void; /** Starts the modal exit animation. */ _startExitAnimation(): void; _closeButtonClick(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Possible states of the lifecycle of a modal. */ declare enum NxModalState { OPEN = 0, CLOSING = 1, CLOSED = 2 } /** * Reference to a modal opened via the NxDialogService. */ declare class NxModalRef { private readonly _overlayRef; readonly _containerInstance: NxModalContainer; readonly id: string; /** The instance of component opened into the modal. */ componentInstance: T; /** Whether the user is allowed to close the modal. */ disableClose?: boolean; /** Define custom function to determine whether a modal can be closed */ private shouldClose; /** Stream that emits when closing modal has been denied */ readonly closeDenied: Subject; /** Subject for notifying the user that the modal has finished opening. */ private readonly _afterOpened; /** Subject for notifying the user that the modal has finished closing. */ private readonly _afterClosed; /** Subject for notifying the user that the modal has started closing. */ private readonly _beforeClosed; /** Result to be passed to afterClosed. */ private _result?; /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */ private _closeFallbackTimeout; /** Current state of the modal. */ private _state; constructor(_overlayRef: OverlayRef, _containerInstance: NxModalContainer, id?: string); /** * Close the modal. * @param modalResult Optional result to return to the modal opener. */ close(modalResult?: R): void; /** * Gets an observable that is notified when the modal is finished opening. */ afterOpened(): Observable; /** * Gets an observable that is notified when the modal is finished closing. */ afterClosed(): Observable; /** * Gets an observable that is notified when the modal has started closing. */ beforeClosed(): Observable; /** * Gets an observable that emits when the overlay's backdrop has been clicked. */ backdropClick(): Observable; /** * Gets an observable that emits when keydown events are targeted on the overlay. */ keydownEvents(): Observable; /** * Updates the modal's position. * @param position New modal position. */ updatePosition(position?: NxDialogPosition): this; /** * Updates the modal's width and height. * @param width New width of the modal. * @param height New height of the modal. */ updateSize(width?: string, height?: string): this; /** Add a CSS class or an array of classes to the overlay pane. */ addPanelClass(classes: string | string[]): this; /** Remove a CSS class or an array of classes from the overlay pane. */ removePanelClass(classes: string | string[]): this; /** Gets the current state of the modal's lifecycle. */ getState(): NxModalState; /** Fetches the position strategy object from the overlay ref. */ private _getPositionStrategy; } /** Injection token that can be used to access the data that was passed in to a modal. */ declare const NX_MODAL_DATA: InjectionToken; /** Injection token that can be used to specify default modal options. */ declare const NX_MODAL_DEFAULT_OPTIONS: InjectionToken>; /** Injection token that determines the scroll handling while a modal is open. */ declare const NX_MODAL_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>; declare const INERT_EXCEPTION_SELECTORS: InjectionToken; /** * @docs-private */ declare function NX_MODAL_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy; /** * @docs-private */ declare const NX_MODAL_SCROLL_STRATEGY_PROVIDER: { provide: InjectionToken<() => ScrollStrategy>; useFactory: typeof NX_MODAL_SCROLL_STRATEGY_PROVIDER_FACTORY; deps: (typeof Overlay)[]; }; /** * Service to open Material Design modal modals. */ declare class NxDialogService implements OnDestroy { private readonly _overlay; private readonly _injector; private readonly _defaultOptions; private readonly _parentDialogService; private readonly _overlayContainer; private readonly _defaultScrollStrategyFactory; private readonly _inertSelectors; private readonly _openModalsAtThisLevel; private readonly _afterAllClosedAtThisLevel; private readonly _afterOpenedAtThisLevel; private readonly _ariaHiddenElements; /** Keeps track of the currently-open modals. */ get openModals(): NxModalRef[]; /** Keeps track of the currently aria-hidden elements. */ get ariaHiddenElements(): Map; /** Stream that emits when a modal has been opened. */ get afterOpened(): Subject>; get _afterAllClosed(): Subject; /** * Stream that emits when all open modal have finished closing. * Will emit on subscribe if there are no open modals to begin with. */ readonly afterAllClosed: Observable; private readonly _destroyed; /** Strategy factory that will be used to handle scrolling while the modal panel is open. */ private readonly _scrollStrategyFactory; constructor(_overlay: Overlay, _injector: Injector, _defaultOptions: NxModalConfig | null, _parentDialogService: NxDialogService | null, _overlayContainer: OverlayContainer, _defaultScrollStrategyFactory: () => ScrollStrategy, _inertSelectors: string[]); /** * Opens a modal modal containing the given component. * @param componentOrTemplateRef Type of the component to load into the dialog, or a TemplateRef to instantiate as the modal content. * @param config Extra configuration options. * @returns Reference to the newly-opened modal. */ open(componentOrTemplateRef: ComponentType | TemplateRef, config?: NxModalConfig): NxModalRef; /** * Closes all of the currently-open modals. */ closeAll(): void; /** * Finds an open modal by its id. * @param id ID to use when looking up the modal. */ getModalById(id: string): NxModalRef | undefined; ngOnDestroy(): void; /** * Creates the overlay into which the modal will be loaded. * @param config The modal configuration. * @returns A promise resolving to the OverlayRef for the created overlay. */ private _createOverlay; /** * Creates an overlay config from a modal config. * @param modalConfig The modal configuration. * @returns The overlay configuration. */ private _getOverlayConfig; /** * Attaches an NxModalContainer to a dialog's already-created overlay. * @param overlay Reference to the dialog's underlying overlay. * @param config The modal configuration. * @returns A promise resolving to a ComponentRef for the attached container. */ private _attachModalContainer; /** * Attaches the user-provided component to the already-created NxModalContainer. * @param componentOrTemplateRef The type of component being loaded into the dialog, or a TemplateRef to instantiate as the content. * @param modalContainer Reference to the wrapping NxModalContainer. * @param overlayRef Reference to the overlay in which the modal resides. * @param config The modal configuration. * @returns A promise resolving to the NxModalRef that should be returned to the user. */ private _attachModalContent; /** * Creates a custom injector to be used inside the modal. This allows a component loaded inside * of a modal to close itself and, optionally, to return a value. * @param config Config object that is used to construct the modal. * @param modalRef Reference to the modal. * @param modalContainer Modal container element that wraps all of the contents. * @returns The custom injector that can be used inside the modal. */ private _createInjector; /** * Removes a modal from the array of open modals. * @param modalRef Modal to be removed. */ private _removeOpenModal; /** * Hides all of the content that isn't an overlay from assistive technology. */ private _hideNonModalContentFromAssistiveTechnology; /** Closes all of the modals in an array. */ private _closeModals; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Animations used by the `NxModalContainer`. * @docs-private */ declare const NxModalAnimations: { readonly modalContainer: AnimationTriggerMetadata; readonly modalContainerFullscreen: AnimationTriggerMetadata; }; /** * Button that will close the current modal. */ declare class NxModalCloseDirective implements OnInit, OnChanges { modalRef: NxModalRef | null; private readonly _elementRef; private readonly _dialogService; /** Screenreader label for the button. */ ariaLabel: string; /** Defaults to `'button'` to prevents accidental form submits. */ type: 'submit' | 'button' | 'reset'; /** Dialog close input. */ modalResult: any; constructor(modalRef: NxModalRef | null, _elementRef: ElementRef, _dialogService: NxDialogService); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** @docs-private */ declare class NxModalService { private readonly subject; close$: Observable; close(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** Container for the action buttons in a modal. Has a fixed position at the bottom of the modal on scroll. */ declare class NxModalActionsDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Scrollable container for the content of a modal. */ declare class NxModalContentDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Title of a modal. */ declare class NxModalTitleComponent { /** * Show icon based on status type. * * Default: `undefined`. */ status?: NxStatusIconType; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class NxModalComponent implements OnInit, AfterViewInit, OnDestroy { private readonly modalService; private readonly eventManager; private readonly _cdr; private readonly _focusMonitor; private _closeButtonLabel; _closeButton: ElementRef; /** * Sets the 'aria-label' of the modal close button needed for accessibility. * * Default: `'Close dialog'`. */ set closeButtonLabel(value: string); get closeButtonLabel(): string; /** * A template reference variable pointing to the template * which contains the content of the modal view. */ body: TemplateRef; /** * Whether the modal view should close when the user hits the escape key. * Default: `true`. */ hideOnEsc: boolean; /** * Whether the modal view should close when the user clicks on the backdrop. * Default: `true`. */ hideOnClickOutside: boolean; /** * Whether the modal view should have a close icon in the upper right corner. * Default: `true`. */ showCloseIcon: boolean; /** * Controls the width of the dialog. * On `auto` the width is controlled by the content width, * on `fixed` the dialog gets a fixed width of 736px if the viewport is big enough. */ size: 'fixed' | 'auto'; /** * An event emitted when the user clicks on the backdrop or uses the built-in close button. * This event can be applied in conjunction with the custom open state handling * of a modal to close it when requested by the user. */ readonly closeEvent: EventEmitter; private readonly _destroyed; private removeEventListener; constructor(modalService: NxModalService, eventManager: EventManager, _cdr: ChangeDetectorRef, _focusMonitor: FocusMonitor); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; /** @docs-private */ clickOutsideModal(): void; /** @docs-private */ closeButtonClick(): void; /** @docs-private */ cancelClick(evt: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class NxOpenModalOnClickDirective implements OnInit, OnDestroy { private readonly templateRef; private readonly viewContainer; private readonly modalService; /** * One or multiple template reference variables pointing to elements * which should trigger opening the modal on click. * * Value: A single template reference variable or an array of template reference variables. */ set nxOpenModalOnClick(elements: NxButtonBase | NxButtonBase[]); /** @docs-private */ elements: any[]; private readonly _destroyed; constructor(templateRef: TemplateRef, viewContainer: ViewContainerRef, modalService: NxModalService); ngOnInit(): void; ngOnDestroy(): void; /** @docs-private */ clickHandler: (event: Event) => void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class NxModalModule { static forRoot(): ModuleWithProviders; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { INERT_EXCEPTION_SELECTORS, NX_MODAL_DATA, NX_MODAL_DEFAULT_OPTIONS, NX_MODAL_SCROLL_STRATEGY, NX_MODAL_SCROLL_STRATEGY_PROVIDER, NX_MODAL_SCROLL_STRATEGY_PROVIDER_FACTORY, NxDialogService, NxModalActionsDirective, NxModalAnimations, NxModalCloseDirective, NxModalComponent, NxModalConfig, NxModalContainer, NxModalContentDirective, NxModalModule, NxModalRef, NxModalService, NxModalState, NxModalTitleComponent, NxOpenModalOnClickDirective, throwNxDialogContentAlreadyAttachedError }; export type { AutoFocusTarget, NxDialogPosition, NxModalAppearance, NxModalRole };