igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
372 lines (371 loc) • 14.4 kB
TypeScript
import { ElementRef, EventEmitter, OnDestroy, OnInit, AfterContentInit } from '@angular/core';
import { Subject } from 'rxjs';
import { IgxNavigationService, IToggleView } from '../core/navigation';
import { IgxButtonType } from '../directives/button/button.directive';
import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
import { OverlaySettings, PositionSettings } from '../services/public_api';
import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
import * as i0 from "@angular/core";
/**
* **Ignite UI for Angular Dialog Window** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)
*
* The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display
* more complicated visuals such as a user sign-in form. It also provides a right and left button
* which can be used for custom actions.
*
* Example:
* ```html
* <button type="button" igxButton (click)="form.open()">Show Dialog</button>
* <igx-dialog #form title="Sign In" rightButtonLabel="OK">
* <div>
* <igx-input-group>
* <input type="text" igxInput/>
* <label igxLabel>Username</label>
* </igx-input-group>
* </div>
* <div>
* <igx-input-group>
* <input type="password" igxInput/>
* <label igxLabel>Password</label>
* </igx-input-group>
* </div>
* </igx-dialog>
* ```
*/
export declare class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit {
private elementRef;
private navService;
private static NEXT_ID;
private static readonly DIALOG_CLASS;
toggleRef: IgxToggleDirective;
/**
* Sets the value of the `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-dialog [id]="'igx-dialog-56'" #alert title="Notification"
* leftButtonLabel="OK" (leftButtonSelect)="alert.close()">
* </igx-dialog>
* ```
*/
id: string;
/**
* Controls whether the dialog should be shown as modal. Defaults to `true`
* ```html
* <igx-dialog [isModal]="false" ></igx-dialog>
* ```
*/
get isModal(): boolean;
set isModal(val: boolean);
/**
* Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`
* ```html
* <igx-dialog [closeOnEscape]="false" ></igx-dialog>
* ```
*/
get closeOnEscape(): boolean;
set closeOnEscape(val: boolean);
/**
* Set whether the Tab key focus is trapped within the dialog when opened.
* Defaults to `true`.
* ```html
* <igx-dialog focusTrap="false""></igx-dialog>
* ```
*/
focusTrap: boolean;
/**
* Sets the title of the dialog.
* ```html
* <igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
title: string;
/**
* Sets the message text of the dialog.
* ```html
* <igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
message: string;
/**
* Sets the `label` of the left button of the dialog.
* ```html
* <igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
leftButtonLabel: string;
/**
* Sets the left button `type`. The types are `flat`, `contained` and `fab`.
* The `flat` type button is a rectangle and doesn't have a shadow. <br>
* The `contained` type button is also a rectangle but has a shadow. <br>
* The `fab` type button is a circle with a shadow. <br>
* The default value is `flat`.
* ```html
* <igx-dialog leftButtonType="contained" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
leftButtonType: IgxButtonType;
/**
* Sets the left button `ripple`. The `ripple` animates a click/tap to a component as a series of fading waves.
* The property accepts all valid CSS color property values.
* ```html
* <igx-dialog leftButtonRipple="green" leftButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
leftButtonRipple: string;
/**
* Sets the `label` of the right button of the dialog.
* ```html
* <igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
rightButtonLabel: string;
/**
* Sets the right button `type`. The types are `flat`, `contained` and `fab`.
* The `flat` type button is a rectangle and doesn't have a shadow. <br>
* The `contained` type button is also a rectangle but has a shadow. <br>
* The `fab` type button is a circle with a shadow. <br>
* The default value is `flat`.
* ```html
* <igx-dialog rightButtonType="fab" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
rightButtonType: IgxButtonType;
/**
* Sets the right button `ripple`.
* ```html
* <igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
rightButtonRipple: string;
/**
* Gets/Sets whether the dialog should close on click outside the component. By default it's false.
* ```html
* <igx-dialog closeOnOutsideSelect="true" leftButtonLabel="Cancel" (leftButtonSelect)="dialog.close()"
* rightButtonLabel="OK" rightButtonRipple="#4CAF50" (rightButtonSelect)="onDialogOKSelected($event)">
* </igx-dialog>
* ```
*/
get closeOnOutsideSelect(): boolean;
set closeOnOutsideSelect(val: boolean);
/**
* Get the position and animation settings used by the dialog.
* ```typescript
* @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
* let currentPosition: PositionSettings = this.alert.positionSettings
* ```
*/
get positionSettings(): PositionSettings;
/**
* Set the position and animation settings used by the dialog.
* ```typescript
* import { slideInLeft, slideOutRight } from 'igniteui-angular';
* ...
* @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
* public newPositionSettings: PositionSettings = {
* openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
* closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
* horizontalDirection: HorizontalAlignment.Left,
* verticalDirection: VerticalAlignment.Middle,
* horizontalStartPoint: HorizontalAlignment.Left,
* verticalStartPoint: VerticalAlignment.Middle,
* minSize: { height: 100, width: 100 }
* };
* this.alert.positionSettings = this.newPositionSettings;
* ```
*/
set positionSettings(settings: PositionSettings);
/**
* The default `tabindex` attribute for the component
*
* @hidden
*/
tabindex: number;
/**
* An event that is emitted before the dialog is opened.
* ```html
* <igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
opening: EventEmitter<IDialogCancellableEventArgs>;
/**
* An event that is emitted after the dialog is opened.
* ```html
* <igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
opened: EventEmitter<IDialogEventArgs>;
/**
* An event that is emitted before the dialog is closed.
* ```html
* <igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
closing: EventEmitter<IDialogCancellableEventArgs>;
/**
* An event that is emitted after the dialog is closed.
* ```html
* <igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
closed: EventEmitter<IDialogEventArgs>;
/**
* An event that is emitted when the left button is clicked.
* ```html
* <igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
* </igx-dialog>
* ```
*/
leftButtonSelect: EventEmitter<IDialogEventArgs>;
/**
* An event that is emitted when the right button is clicked.
* ```html
* <igx-dialog (rightButtonSelect)="onDialogOKSelected($event)"
* #dialog title="Confirmation" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK"
* rightButtonRipple="#4CAF50" closeOnOutsideSelect="true">
* </igx-dialog>
* ```
*/
rightButtonSelect: EventEmitter<IDialogEventArgs>;
/**
* @hidden
*/
isOpenChange: EventEmitter<boolean>;
/**
* @hidden
*/
get element(): any;
/**
* Returns the value of state. Possible state values are "open" or "close".
* ```typescript
* @ViewChild("MyDialog")
* public dialog: IgxDialogComponent;
* ngAfterViewInit() {
* let dialogState = this.dialog.state;
* }
* ```
*/
get state(): string;
/**
* State of the dialog.
*
* ```typescript
* // get
* let dialogIsOpen = this.dialog.isOpen;
* ```
*
* ```html
* <!--set-->
* <igx-dialog [isOpen]='false'></igx-dialog>
* ```
*
* Two-way data binding.
* ```html
* <!--set-->
* <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
* ```
*/
get isOpen(): boolean;
set isOpen(value: boolean);
get isCollapsed(): boolean;
/**
* Returns the value of the role of the dialog. The valid values are `dialog`, `alertdialog`, `alert`.
* ```typescript
* @ViewChild("MyDialog")
* public dialog: IgxDialogComponent;
* ngAfterViewInit() {
* let dialogRole = this.dialog.role;
* }
* ```
*/
get role(): "dialog" | "alertdialog" | "alert";
/**
* Returns the value of the title id.
* ```typescript
* @ViewChild("MyDialog")
* public dialog: IgxDialogComponent;
* ngAfterViewInit() {
* let dialogTitle = this.dialog.titleId;
* }
* ```
*/
get titleId(): string;
protected destroy$: Subject<boolean>;
private _positionSettings;
private _overlayDefaultSettings;
private _closeOnOutsideSelect;
private _closeOnEscape;
private _isModal;
private _titleId;
constructor(elementRef: ElementRef, navService: IgxNavigationService);
ngAfterContentInit(): void;
/**
* A method that opens the dialog.
*
* @memberOf {@link IgxDialogComponent}
* ```html
* <button type="button" (click)="dialog.open() igxButton="contained">Trigger Dialog</button>
* <igx-dialog #dialog></igx-dialog>
* ```
*/
open(overlaySettings?: OverlaySettings): void;
/**
* A method that that closes the dialog.
*
* @memberOf {@link IgxDialogComponent}
* ```html
* <button type="button" (click)="dialog.close() igxButton="contained">Trigger Dialog</button>
* <igx-dialog #dialog></igx-dialog>
* ```
*/
close(): void;
/**
* A method that opens/closes the dialog.
*
* @memberOf {@link IgxDialogComponent}
* ```html
* <button type="button" (click)="dialog.toggle() igxButton="contained">Trigger Dialog</button>
* <igx-dialog #dialog></igx-dialog>
* ```
*/
toggle(): void;
/**
* @hidden
*/
onDialogSelected(event: any): void;
/**
* @hidden
*/
onInternalLeftButtonSelect(event: any): void;
/**
* @hidden
*/
onInternalRightButtonSelect(event: any): void;
/**
* @hidden
*/
ngOnInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
private emitCloseFromDialog;
private emitClosedFromDialog;
private emitOpenedFromDialog;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxDialogComponent, [null, { optional: true; }]>;
static ɵcmp: i0.ɵɵComponentDeclaration<IgxDialogComponent, "igx-dialog", never, { "id": { "alias": "id"; "required": false; }; "isModal": { "alias": "isModal"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "focusTrap": { "alias": "focusTrap"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "leftButtonType": { "alias": "leftButtonType"; "required": false; }; "leftButtonRipple": { "alias": "leftButtonRipple"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "rightButtonType": { "alias": "rightButtonType"; "required": false; }; "rightButtonRipple": { "alias": "rightButtonRipple"; "required": false; }; "closeOnOutsideSelect": { "alias": "closeOnOutsideSelect"; "required": false; }; "positionSettings": { "alias": "positionSettings"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "role": { "alias": "role"; "required": false; }; "titleId": { "alias": "titleId"; "required": false; }; }, { "opening": "opening"; "opened": "opened"; "closing": "closing"; "closed": "closed"; "leftButtonSelect": "leftButtonSelect"; "rightButtonSelect": "rightButtonSelect"; "isOpenChange": "isOpenChange"; }, never, ["igx-dialog-title,[igxDialogTitle]", "*", "igx-dialog-actions,[igxDialogActions]"], true, never>;
static ngAcceptInputType_isModal: unknown;
static ngAcceptInputType_closeOnEscape: unknown;
static ngAcceptInputType_focusTrap: unknown;
static ngAcceptInputType_closeOnOutsideSelect: unknown;
static ngAcceptInputType_isOpen: unknown;
}
export interface IDialogEventArgs extends IBaseEventArgs {
dialog: IgxDialogComponent;
event: Event;
}
export interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs {
}