igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
624 lines (617 loc) • 29.6 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ElementRef, EventEmitter, booleanAttribute, Input, HostBinding, Output, ViewChild, Component, Directive, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { GlobalPositionStrategy, IgxNavigationService, NoOpScrollStrategy } from 'igniteui-angular/core';
import { IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
import { fadeOut, fadeIn } from 'igniteui-angular/animations';
let DIALOG_ID = 0;
/**
* **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>
* ```
*/
class IgxDialogComponent {
static { this.NEXT_ID = 1; }
static { this.DIALOG_CLASS = 'igx-dialog'; }
/**
* Controls whether the dialog should be shown as modal. Defaults to `true`
* ```html
* <igx-dialog [isModal]="false" ></igx-dialog>
* ```
*/
get isModal() {
return this._isModal;
}
set isModal(val) {
this._overlayDefaultSettings.modal = val;
this._isModal = val;
}
/**
* Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`
* ```html
* <igx-dialog [closeOnEscape]="false" ></igx-dialog>
* ```
*/
get closeOnEscape() {
return this._closeOnEscape;
}
set closeOnEscape(val) {
this._overlayDefaultSettings.closeOnEscape = val;
this._closeOnEscape = val;
}
/**
* 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() {
return this._closeOnOutsideSelect;
}
set closeOnOutsideSelect(val) {
this._overlayDefaultSettings.closeOnOutsideClick = val;
this._closeOnOutsideSelect = val;
}
/**
* 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() {
return this._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) {
this._positionSettings = settings;
this._overlayDefaultSettings.positionStrategy = new GlobalPositionStrategy(this._positionSettings);
}
/**
* @hidden
*/
get element() {
return this.elementRef.nativeElement;
}
/**
* 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() {
return this.isOpen ? 'open' : 'close';
}
/**
* 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() {
return this.toggleRef ? !this.toggleRef.collapsed : false;
}
set isOpen(value) {
if (value !== this.isOpen) {
this.isOpenChange.emit(value);
if (value) {
requestAnimationFrame(() => {
this.open();
});
}
else {
this.close();
}
}
}
get isCollapsed() {
return this.toggleRef.collapsed;
}
/**
* 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() {
if (this.leftButtonLabel !== '' && this.rightButtonLabel !== '') {
return 'dialog';
}
else if (this.leftButtonLabel !== '' ||
this.rightButtonLabel !== '') {
return 'alertdialog';
}
else {
return 'alert';
}
}
/**
* Returns the value of the title id.
* ```typescript
* @ViewChild("MyDialog")
* public dialog: IgxDialogComponent;
* ngAfterViewInit() {
* let dialogTitle = this.dialog.titleId;
* }
* ```
*/
get titleId() {
return this._titleId;
}
constructor() {
this.elementRef = inject(ElementRef);
this.navService = inject(IgxNavigationService, { optional: true });
/**
* 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>
* ```
*/
this.id = `igx-dialog-${DIALOG_ID++}`;
/**
* Set whether the Tab key focus is trapped within the dialog when opened.
* Defaults to `true`.
* ```html
* <igx-dialog focusTrap="false""></igx-dialog>
* ```
*/
this.focusTrap = true;
/**
* Sets the title of the dialog.
* ```html
* <igx-dialog title="Notification" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
this.title = '';
/**
* Sets the message text of the dialog.
* ```html
* <igx-dialog message="Your email was sent!" #alert leftButtonLabel="OK" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
this.message = '';
/**
* Sets the `label` of the left button of the dialog.
* ```html
* <igx-dialog leftButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
this.leftButtonLabel = '';
/**
* 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>
* ```
*/
this.leftButtonType = 'flat';
/**
* 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>
* ```
*/
this.leftButtonRipple = '';
/**
* Sets the `label` of the right button of the dialog.
* ```html
* <igx-dialog rightButtonLabel="OKAY" #alert title="Notification" (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
this.rightButtonLabel = '';
/**
* 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>
* ```
*/
this.rightButtonType = 'flat';
/**
* Sets the right button `ripple`.
* ```html
* <igx-dialog rightButtonRipple="green" rightButtonLabel="OKAY" #alert (leftButtonSelect)="alert.close()"></igx-dialog>
* ```
*/
this.rightButtonRipple = '';
/**
* The default `tabindex` attribute for the component
*
* @hidden
*/
this.tabindex = -1;
/**
* An event that is emitted before the dialog is opened.
* ```html
* <igx-dialog (opening)="onDialogOpenHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
this.opening = new EventEmitter();
/**
* An event that is emitted after the dialog is opened.
* ```html
* <igx-dialog (opened)="onDialogOpenedHandler($event)" (leftButtonSelect)="dialog.close()" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
this.opened = new EventEmitter();
/**
* An event that is emitted before the dialog is closed.
* ```html
* <igx-dialog (closing)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
this.closing = new EventEmitter();
/**
* An event that is emitted after the dialog is closed.
* ```html
* <igx-dialog (closed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
* </igx-dialog>
* ```
*/
this.closed = new EventEmitter();
/**
* An event that is emitted when the left button is clicked.
* ```html
* <igx-dialog (leftButtonSelect)="onDialogOKSelected($event)" #dialog leftButtonLabel="OK" rightButtonLabel="Cancel">
* </igx-dialog>
* ```
*/
this.leftButtonSelect = new EventEmitter();
/**
* 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>
* ```
*/
this.rightButtonSelect = new EventEmitter();
/**
* @hidden
*/
this.isOpenChange = new EventEmitter();
this.destroy$ = new Subject();
this._positionSettings = {
openAnimation: fadeIn,
closeAnimation: fadeOut
};
this._closeOnOutsideSelect = false;
this._closeOnEscape = true;
this._isModal = true;
this._titleId = IgxDialogComponent.NEXT_ID++ + '_title';
this._overlayDefaultSettings = {
positionStrategy: new GlobalPositionStrategy(this._positionSettings),
scrollStrategy: new NoOpScrollStrategy(),
modal: this.isModal,
closeOnEscape: this._closeOnEscape,
closeOnOutsideClick: this.closeOnOutsideSelect
};
}
ngAfterContentInit() {
this.toggleRef.closing.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitCloseFromDialog(eventArgs));
this.toggleRef.closed.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitClosedFromDialog(eventArgs));
this.toggleRef.opened.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitOpenedFromDialog(eventArgs));
}
/**
* 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 = this._overlayDefaultSettings) {
const eventArgs = { dialog: this, event: null, cancel: false };
this.opening.emit(eventArgs);
if (!eventArgs.cancel) {
overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
this.toggleRef.open(overlaySettings);
this.isOpenChange.emit(true);
if (!this.leftButtonLabel && !this.rightButtonLabel) {
this.toggleRef.element.focus();
}
}
}
/**
* 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() {
// `closing` will emit from `toggleRef.closing` subscription
this.toggleRef?.close();
}
/**
* 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() {
if (this.isOpen) {
this.close();
}
else {
this.open();
}
}
/**
* @hidden
*/
onDialogSelected(event) {
event.stopPropagation();
if (this.isOpen &&
this.closeOnOutsideSelect &&
event.target.classList.contains(IgxDialogComponent.DIALOG_CLASS)) {
this.close();
}
}
/**
* @hidden
*/
onInternalLeftButtonSelect(event) {
this.leftButtonSelect.emit({ dialog: this, event });
}
/**
* @hidden
*/
onInternalRightButtonSelect(event) {
this.rightButtonSelect.emit({ dialog: this, event });
}
/**
* @hidden
*/
ngOnInit() {
if (this.navService && this.id) {
this.navService.add(this.id, this);
}
}
/**
* @hidden
*/
ngOnDestroy() {
if (this.navService && this.id) {
this.navService.remove(this.id);
}
}
emitCloseFromDialog(eventArgs) {
const dialogEventsArgs = { dialog: this, event: eventArgs.event, cancel: eventArgs.cancel };
this.closing.emit(dialogEventsArgs);
eventArgs.cancel = dialogEventsArgs.cancel;
if (!eventArgs.cancel) {
this.isOpenChange.emit(false);
}
}
emitClosedFromDialog(eventArgs) {
this.closed.emit({ dialog: this, event: eventArgs.event });
}
emitOpenedFromDialog(eventArgs) {
this.opened.emit({ dialog: this, event: eventArgs.event });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxDialogComponent, isStandalone: true, selector: "igx-dialog", inputs: { id: "id", isModal: ["isModal", "isModal", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], focusTrap: ["focusTrap", "focusTrap", booleanAttribute], title: "title", message: "message", leftButtonLabel: "leftButtonLabel", leftButtonType: "leftButtonType", leftButtonRipple: "leftButtonRipple", rightButtonLabel: "rightButtonLabel", rightButtonType: "rightButtonType", rightButtonRipple: "rightButtonRipple", closeOnOutsideSelect: ["closeOnOutsideSelect", "closeOnOutsideSelect", booleanAttribute], positionSettings: "positionSettings", isOpen: ["isOpen", "isOpen", booleanAttribute], role: "role", titleId: "titleId" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", leftButtonSelect: "leftButtonSelect", rightButtonSelect: "rightButtonSelect", isOpenChange: "isOpenChange" }, host: { properties: { "attr.id": "this.id", "attr.tabindex": "this.tabindex", "class.igx-dialog--hidden": "this.isCollapsed" } }, viewQueries: [{ propertyName: "toggleRef", first: true, predicate: IgxToggleDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n tabindex=\"0\"\n #dialog\n class=\"igx-dialog\"\n igxToggle\n [igxFocusTrap]=\"focusTrap\"\n (click)=\"onDialogSelected($event)\"\n>\n <div\n #dialogWindow\n class=\"igx-dialog__window\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"titleId\"\n >\n @if (title) {\n <div [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n {{ title }}\n </div>\n }\n @if (!title) {\n <ng-content select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n }\n\n <div class=\"igx-dialog__window-content\">\n @if (message) {\n <span class=\"igx-dialog__window-message\">\n {{ message }}\n </span>\n }\n @if (!message) {\n <ng-content></ng-content>\n }\n </div>\n\n @if (leftButtonLabel || rightButtonLabel) {\n <div class=\"igx-dialog__window-actions\">\n @if (leftButtonLabel) {\n <button\n type=\"button\"\n [igxFocus]=\"isOpen\"\n [igxButton]=\"leftButtonType\"\n igxRipple=\"{{ leftButtonRipple }}\"\n (click)=\"onInternalLeftButtonSelect($event)\"\n >\n {{ leftButtonLabel }}\n </button>\n }\n @if (rightButtonLabel) {\n <button\n type=\"button\"\n [igxFocus]=\"isOpen\"\n [igxButton]=\"rightButtonType\"\n igxRipple=\"{{ rightButtonRipple }}\"\n (click)=\"onInternalRightButtonSelect($event)\"\n >\n {{ rightButtonLabel }}\n </button>\n }\n </div>\n }\n @if (!leftButtonLabel && !rightButtonLabel) {\n <ng-content select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "directive", type: IgxFocusTrapDirective, selector: "[igxFocusTrap]", inputs: ["igxFocusTrap"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-dialog', imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective], template: "<div\n tabindex=\"0\"\n #dialog\n class=\"igx-dialog\"\n igxToggle\n [igxFocusTrap]=\"focusTrap\"\n (click)=\"onDialogSelected($event)\"\n>\n <div\n #dialogWindow\n class=\"igx-dialog__window\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"titleId\"\n >\n @if (title) {\n <div [attr.id]=\"titleId\" class=\"igx-dialog__window-title\">\n {{ title }}\n </div>\n }\n @if (!title) {\n <ng-content select=\"igx-dialog-title,[igxDialogTitle]\"></ng-content>\n }\n\n <div class=\"igx-dialog__window-content\">\n @if (message) {\n <span class=\"igx-dialog__window-message\">\n {{ message }}\n </span>\n }\n @if (!message) {\n <ng-content></ng-content>\n }\n </div>\n\n @if (leftButtonLabel || rightButtonLabel) {\n <div class=\"igx-dialog__window-actions\">\n @if (leftButtonLabel) {\n <button\n type=\"button\"\n [igxFocus]=\"isOpen\"\n [igxButton]=\"leftButtonType\"\n igxRipple=\"{{ leftButtonRipple }}\"\n (click)=\"onInternalLeftButtonSelect($event)\"\n >\n {{ leftButtonLabel }}\n </button>\n }\n @if (rightButtonLabel) {\n <button\n type=\"button\"\n [igxFocus]=\"isOpen\"\n [igxButton]=\"rightButtonType\"\n igxRipple=\"{{ rightButtonRipple }}\"\n (click)=\"onInternalRightButtonSelect($event)\"\n >\n {{ rightButtonLabel }}\n </button>\n }\n </div>\n }\n @if (!leftButtonLabel && !rightButtonLabel) {\n <ng-content select=\"igx-dialog-actions,[igxDialogActions]\"></ng-content>\n }\n </div>\n</div>\n" }]
}], ctorParameters: () => [], propDecorators: { toggleRef: [{
type: ViewChild,
args: [IgxToggleDirective, { static: true }]
}], id: [{
type: HostBinding,
args: ['attr.id']
}, {
type: Input
}], isModal: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], closeOnEscape: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], focusTrap: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], title: [{
type: Input
}], message: [{
type: Input
}], leftButtonLabel: [{
type: Input
}], leftButtonType: [{
type: Input
}], leftButtonRipple: [{
type: Input
}], rightButtonLabel: [{
type: Input
}], rightButtonType: [{
type: Input
}], rightButtonRipple: [{
type: Input
}], closeOnOutsideSelect: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], positionSettings: [{
type: Input
}], tabindex: [{
type: HostBinding,
args: ['attr.tabindex']
}], opening: [{
type: Output
}], opened: [{
type: Output
}], closing: [{
type: Output
}], closed: [{
type: Output
}], leftButtonSelect: [{
type: Output
}], rightButtonSelect: [{
type: Output
}], isOpenChange: [{
type: Output
}], isOpen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], isCollapsed: [{
type: HostBinding,
args: ['class.igx-dialog--hidden']
}], role: [{
type: Input
}], titleId: [{
type: Input
}] } });
/**
* @hidden
*/
class IgxDialogTitleDirective {
constructor() {
this.defaultStyle = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxDialogTitleDirective, isStandalone: true, selector: "igx-dialog-title,[igxDialogTitle]", host: { properties: { "class.igx-dialog__window-title": "this.defaultStyle" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogTitleDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-dialog-title,[igxDialogTitle]',
standalone: true
}]
}], propDecorators: { defaultStyle: [{
type: HostBinding,
args: ['class.igx-dialog__window-title']
}] } });
/**
* @hidden
*/
class IgxDialogActionsDirective {
constructor() {
this.defaultClass = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxDialogActionsDirective, isStandalone: true, selector: "igx-dialog-actions,[igxDialogActions]", host: { properties: { "class.igx-dialog__window-actions": "this.defaultClass" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogActionsDirective, decorators: [{
type: Directive,
args: [{
selector: 'igx-dialog-actions,[igxDialogActions]',
standalone: true
}]
}], propDecorators: { defaultClass: [{
type: HostBinding,
args: ['class.igx-dialog__window-actions']
}] } });
/* NOTE: Dialog directives collection for ease-of-use import in standalone components scenario */
const IGX_DIALOG_DIRECTIVES = [
IgxDialogComponent,
IgxDialogTitleDirective,
IgxDialogActionsDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxDialogModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogModule, imports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective], exports: [IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDialogModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_DIALOG_DIRECTIVES
],
exports: [
...IGX_DIALOG_DIRECTIVES
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_DIALOG_DIRECTIVES, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective };
//# sourceMappingURL=igniteui-angular-dialog.mjs.map