igniteui-angular 21.2.21 → 21.2.23

package/fesm2022/igniteui-angular-dialog.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, EventEmitter, booleanAttribute, Input, HostBinding, Output, ViewChild, Component, Directive, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, 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';
@@ -203,6 +203,7 @@ class IgxDialogComponent {
         return this._titleId;
     }
     constructor() {
+        this.cdr = inject(ChangeDetectorRef);
         this.elementRef = inject(ElementRef);
         this.navService = inject(IgxNavigationService, { optional: true });
         /**
@@ -384,6 +385,7 @@ class IgxDialogComponent {
         if (!eventArgs.cancel) {
             overlaySettings = { ...{}, ...this._overlayDefaultSettings, ...overlaySettings };
             this.toggleRef.open(overlaySettings);
+            this.cdr.markForCheck();
             this.isOpenChange.emit(true);
             if (!this.leftButtonLabel && !this.rightButtonLabel) {
                 this.toggleRef.element.focus();

package/fesm2022/igniteui-angular-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"igniteui-angular-dialog.mjs","sources":["../../../projects/igniteui-angular/dialog/src/dialog/dialog.component.ts","../../../projects/igniteui-angular/dialog/src/dialog/dialog-content.component.html","../../../projects/igniteui-angular/dialog/src/dialog/dialog.directives.ts","../../../projects/igniteui-angular/dialog/src/dialog/public_api.ts","../../../projects/igniteui-angular/dialog/src/dialog/dialog.module.ts","../../../projects/igniteui-angular/dialog/src/igniteui-angular-dialog.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, AfterContentInit, booleanAttribute, inject } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { IgxNavigationService, IToggleView } from 'igniteui-angular/core';\nimport { IgxButtonType, IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\nimport { IgxToggleDirective } from 'igniteui-angular/directives';\nimport { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from 'igniteui-angular/core';\nimport { IgxFocusDirective } from 'igniteui-angular/directives';\nimport { IgxFocusTrapDirective } from 'igniteui-angular/directives';\nimport { CancelableEventArgs, IBaseEventArgs } from 'igniteui-angular/core';\nimport { fadeIn, fadeOut } from 'igniteui-angular/animations';\n\nlet DIALOG_ID = 0;\n/**\n * **Ignite UI for Angular Dialog Window** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)\n *\n * The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display\n * more complicated visuals such as a user sign-in form.  It also provides a right and left button\n * which can be used for custom actions.\n *\n * Example:\n * ```html\n * <button type=\"button\" igxButton (click)=\"form.open()\">Show Dialog</button>\n * <igx-dialog #form title=\"Sign In\" rightButtonLabel=\"OK\">\n *   <div>\n *     <igx-input-group>\n *       <input type=\"text\" igxInput/>\n *       <label igxLabel>Username</label>\n *     </igx-input-group>\n *   </div>\n *   <div>\n *     <igx-input-group>\n *       <input type=\"password\" igxInput/>\n *       <label igxLabel>Password</label>\n *     </igx-input-group>\n *   </div>\n * </igx-dialog>\n * ```\n */\n@Component({\n    selector: 'igx-dialog',\n    templateUrl: 'dialog-content.component.html',\n    imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective]\n})\nexport class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit {\n    private elementRef = inject(ElementRef);\n    private navService = inject(IgxNavigationService, { optional: true });\n\n    private static NEXT_ID = 1;\n    private static readonly DIALOG_CLASS = 'igx-dialog';\n\n\n\n    @ViewChild(IgxToggleDirective, { static: true })\n    public toggleRef: IgxToggleDirective;\n\n    /**\n     * Sets the value of the `id` attribute. If not provided it will be automatically generated.\n     * ```html\n     * <igx-dialog [id]=\"'igx-dialog-56'\" #alert title=\"Notification\"\n     *  leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\">\n     * </igx-dialog>\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-dialog-${DIALOG_ID++}`;\n\n    /**\n     * Controls whether the dialog should be shown as modal. Defaults to `true`\n     * ```html\n     * <igx-dialog [isModal]=\"false\" ></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get isModal() {\n        return this._isModal;\n    }\n\n    public set isModal(val: boolean) {\n        this._overlayDefaultSettings.modal = val;\n        this._isModal = val;\n    }\n\n    /**\n     * Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`\n     * ```html\n     * <igx-dialog [closeOnEscape]=\"false\" ></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get closeOnEscape() {\n        return this._closeOnEscape;\n    }\n\n    public set closeOnEscape(val: boolean) {\n        this._overlayDefaultSettings.closeOnEscape = val;\n        this._closeOnEscape = val;\n    }\n\n    /**\n     * Set whether the Tab key focus is trapped within the dialog when opened.\n     * Defaults to `true`.\n     * ```html\n     * <igx-dialog focusTrap=\"false\"\"></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public focusTrap = true;\n\n    /**\n     * Sets the title of the dialog.\n     * ```html\n     * <igx-dialog title=\"Notification\" #alert leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public title = '';\n\n    /**\n     *  Sets the message text of the dialog.\n     * ```html\n     * <igx-dialog message=\"Your email was sent!\" #alert leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public message = '';\n\n    /**\n     * Sets the `label` of the left button of the dialog.\n     * ```html\n     * <igx-dialog leftButtonLabel=\"OKAY\" #alert title=\"Notification\"  (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonLabel = '';\n\n    /**\n     * Sets the left button `type`. The types are `flat`, `contained` and `fab`.\n     * The `flat` type button is a rectangle and doesn't have a shadow. <br>\n     * The `contained` type button is also a rectangle but has a shadow. <br>\n     * The `fab` type button is a circle with a shadow. <br>\n     * The default value is `flat`.\n     * ```html\n     * <igx-dialog leftButtonType=\"contained\" leftButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonType: IgxButtonType = 'flat';\n\n    /**\n     * Sets the left button `ripple`. The `ripple` animates a click/tap to a component as a series of fading waves.\n     * The property accepts all valid CSS color property values.\n     * ```html\n     * <igx-dialog leftButtonRipple=\"green\" leftButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonRipple = '';\n\n    /**\n     * Sets the `label` of the right button of the dialog.\n     * ```html\n     * <igx-dialog rightButtonLabel=\"OKAY\" #alert title=\"Notification\"  (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonLabel = '';\n\n    /**\n     * Sets the right button `type`. The types are `flat`, `contained` and `fab`.\n     * The `flat` type button is a rectangle and doesn't have a shadow. <br>\n     * The `contained` type button is also a rectangle but has a shadow. <br>\n     * The `fab` type button is a circle with a shadow. <br>\n     * The default value is `flat`.\n     * ```html\n     * <igx-dialog rightButtonType=\"fab\" rightButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonType: IgxButtonType = 'flat';\n\n    /**\n     * Sets the right button `ripple`.\n     * ```html\n     * <igx-dialog rightButtonRipple=\"green\" rightButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonRipple = '';\n\n    /**\n     * Gets/Sets whether the dialog should close on click outside the component. By default it's false.\n     * ```html\n     * <igx-dialog closeOnOutsideSelect=\"true\" leftButtonLabel=\"Cancel\" (leftButtonSelect)=\"dialog.close()\"\n     * rightButtonLabel=\"OK\" rightButtonRipple=\"#4CAF50\" (rightButtonSelect)=\"onDialogOKSelected($event)\">\n     * </igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get closeOnOutsideSelect() {\n        return this._closeOnOutsideSelect;\n    }\n\n    public set closeOnOutsideSelect(val: boolean) {\n        this._overlayDefaultSettings.closeOnOutsideClick = val;\n        this._closeOnOutsideSelect = val;\n    }\n\n    /**\n     * Get the position and animation settings used by the dialog.\n     * ```typescript\n     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;\n     * let currentPosition: PositionSettings = this.alert.positionSettings\n     * ```\n     */\n    @Input()\n    public get positionSettings(): PositionSettings {\n        return this._positionSettings;\n    }\n\n    /**\n     * Set the position and animation settings used by the dialog.\n     * ```typescript\n     * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n     * ...\n     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;\n     *  public newPositionSettings: PositionSettings = {\n     *      openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),\n     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),\n     *      horizontalDirection: HorizontalAlignment.Left,\n     *      verticalDirection: VerticalAlignment.Middle,\n     *      horizontalStartPoint: HorizontalAlignment.Left,\n     *      verticalStartPoint: VerticalAlignment.Middle,\n     *      minSize: { height: 100, width: 100 }\n     *  };\n     * this.alert.positionSettings = this.newPositionSettings;\n     * ```\n     */\n    public set positionSettings(settings: PositionSettings) {\n        this._positionSettings = settings;\n        this._overlayDefaultSettings.positionStrategy = new GlobalPositionStrategy(this._positionSettings);\n    }\n\n    /**\n     * The default `tabindex` attribute for the component\n     *\n     * @hidden\n     */\n    @HostBinding('attr.tabindex')\n    public tabindex = -1;\n\n    /**\n     * An event that is emitted before the dialog is opened.\n     * ```html\n     * <igx-dialog (opening)=\"onDialogOpenHandler($event)\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public opening = new EventEmitter<IDialogCancellableEventArgs>();\n\n    /**\n     * An event that is emitted after the dialog is opened.\n     * ```html\n     * <igx-dialog (opened)=\"onDialogOpenedHandler($event)\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public opened = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted before the dialog is closed.\n     * ```html\n     * <igx-dialog (closing)=\"onDialogCloseHandler($event)\" title=\"Confirmation\" leftButtonLabel=\"Cancel\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public closing = new EventEmitter<IDialogCancellableEventArgs>();\n\n    /**\n     * An event that is emitted after the dialog is closed.\n     * ```html\n     * <igx-dialog (closed)=\"onDialogClosedHandler($event)\" title=\"Confirmation\" leftButtonLabel=\"Cancel\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public closed = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted when the left button is clicked.\n     * ```html\n     * <igx-dialog (leftButtonSelect)=\"onDialogOKSelected($event)\" #dialog leftButtonLabel=\"OK\" rightButtonLabel=\"Cancel\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public leftButtonSelect = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted when the right button is clicked.\n     * ```html\n     * <igx-dialog (rightButtonSelect)=\"onDialogOKSelected($event)\"\n     * #dialog title=\"Confirmation\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\"\n     * rightButtonRipple=\"#4CAF50\" closeOnOutsideSelect=\"true\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public rightButtonSelect = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * @hidden\n     */\n    @Output() public isOpenChange = new EventEmitter<boolean>();\n\n    /**\n     * @hidden\n     */\n    public get element() {\n        return this.elementRef.nativeElement;\n    }\n\n    /**\n     * Returns the value of state. Possible state values are \"open\" or \"close\".\n     * ```typescript\n     * @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogState = this.dialog.state;\n     * }\n     * ```\n     */\n    public get state(): string {\n        return this.isOpen ? 'open' : 'close';\n    }\n\n    /**\n     * State of the dialog.\n     *\n     * ```typescript\n     * // get\n     * let dialogIsOpen = this.dialog.isOpen;\n     * ```\n     *\n     * ```html\n     * <!--set-->\n     * <igx-dialog [isOpen]='false'></igx-dialog>\n     * ```\n     *\n     * Two-way data binding.\n     * ```html\n     * <!--set-->\n     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get isOpen() {\n        return this.toggleRef ? !this.toggleRef.collapsed : false;\n    }\n    public set isOpen(value: boolean) {\n        if (value !== this.isOpen) {\n            this.isOpenChange.emit(value);\n            if (value) {\n                requestAnimationFrame(() => {\n                    this.open();\n                });\n            } else {\n                this.close();\n            }\n        }\n    }\n\n    @HostBinding('class.igx-dialog--hidden')\n    public get isCollapsed() {\n        return this.toggleRef.collapsed;\n    }\n\n    /**\n     * Returns the value of the role of the dialog. The valid values are `dialog`, `alertdialog`, `alert`.\n     * ```typescript\n     * @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogRole = this.dialog.role;\n     * }\n     *  ```\n     */\n    @Input()\n    public get role() {\n        if (this.leftButtonLabel !== '' && this.rightButtonLabel !== '') {\n            return 'dialog';\n        } else if (\n            this.leftButtonLabel !== '' ||\n            this.rightButtonLabel !== ''\n        ) {\n            return 'alertdialog';\n        } else {\n            return 'alert';\n        }\n    }\n\n    /**\n     * Returns the value of the title id.\n     * ```typescript\n     *  @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogTitle = this.dialog.titleId;\n     * }\n     * ```\n     */\n    @Input()\n    public get titleId() {\n        return this._titleId;\n    }\n\n    protected destroy$ = new Subject<boolean>();\n\n    private _positionSettings: PositionSettings = {\n        openAnimation: fadeIn,\n        closeAnimation: fadeOut\n    };\n\n    private _overlayDefaultSettings: OverlaySettings;\n    private _closeOnOutsideSelect = false;\n    private _closeOnEscape = true;\n    private _isModal = true;\n    private _titleId: string;\n\n    constructor() {\n        this._titleId = IgxDialogComponent.NEXT_ID++ + '_title';\n\n        this._overlayDefaultSettings = {\n            positionStrategy: new GlobalPositionStrategy(this._positionSettings),\n            scrollStrategy: new NoOpScrollStrategy(),\n            modal: this.isModal,\n            closeOnEscape: this._closeOnEscape,\n            closeOnOutsideClick: this.closeOnOutsideSelect\n        };\n    }\n\n    public ngAfterContentInit() {\n        this.toggleRef.closing.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitCloseFromDialog(eventArgs));\n        this.toggleRef.closed.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitClosedFromDialog(eventArgs));\n        this.toggleRef.opened.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitOpenedFromDialog(eventArgs));\n    }\n\n    /**\n     * A method that opens the dialog.\n     *\n     * @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.open() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public open(overlaySettings: OverlaySettings = this._overlayDefaultSettings) {\n        const eventArgs: IDialogCancellableEventArgs = { dialog: this, event: null, cancel: false };\n        this.opening.emit(eventArgs);\n        if (!eventArgs.cancel) {\n            overlaySettings = { ...{}, ... this._overlayDefaultSettings, ...overlaySettings };\n            this.toggleRef.open(overlaySettings);\n            this.isOpenChange.emit(true);\n            if (!this.leftButtonLabel && !this.rightButtonLabel) {\n                this.toggleRef.element.focus();\n            }\n        }\n\n    }\n\n    /**\n     * A method that that closes the dialog.\n     *\n     *  @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.close() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public close() {\n        // `closing` will emit from `toggleRef.closing` subscription\n        this.toggleRef?.close();\n    }\n\n\n    /**\n     * A method that opens/closes the dialog.\n     *\n     * @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.toggle() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public toggle() {\n        if (this.isOpen) {\n            this.close();\n        } else {\n            this.open();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public onDialogSelected(event) {\n        event.stopPropagation();\n        if (\n            this.isOpen &&\n            this.closeOnOutsideSelect &&\n            event.target.classList.contains(IgxDialogComponent.DIALOG_CLASS)\n        ) {\n            this.close();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public onInternalLeftButtonSelect(event) {\n        this.leftButtonSelect.emit({ dialog: this, event });\n    }\n\n    /**\n     * @hidden\n     */\n    public onInternalRightButtonSelect(event) {\n        this.rightButtonSelect.emit({ dialog: this, event });\n    }\n\n    /**\n     * @hidden\n     */\n    public ngOnInit() {\n        if (this.navService && this.id) {\n            this.navService.add(this.id, this);\n        }\n    }\n    /**\n     * @hidden\n     */\n    public ngOnDestroy() {\n        if (this.navService && this.id) {\n            this.navService.remove(this.id);\n        }\n    }\n\n    private emitCloseFromDialog(eventArgs) {\n        const dialogEventsArgs = { dialog: this, event: eventArgs.event, cancel: eventArgs.cancel };\n        this.closing.emit(dialogEventsArgs);\n        eventArgs.cancel = dialogEventsArgs.cancel;\n        if (!eventArgs.cancel) {\n            this.isOpenChange.emit(false);\n        }\n    }\n\n    private emitClosedFromDialog(eventArgs) {\n        this.closed.emit({ dialog: this, event: eventArgs.event });\n    }\n\n    private emitOpenedFromDialog(eventArgs) {\n        this.opened.emit({ dialog: this, event: eventArgs.event });\n    }\n}\n\nexport interface IDialogEventArgs extends IBaseEventArgs {\n    dialog: IgxDialogComponent;\n    event: Event;\n}\n\nexport interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs { }\n","<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","import { Directive, HostBinding } from '@angular/core';\n\n/**\n * @hidden\n */\n@Directive({\n    selector: '[igxDialogTitle],igx-dialog-title',\n    standalone: true\n})\nexport class IgxDialogTitleDirective {\n\n    @HostBinding('class.igx-dialog__window-title')\n    public defaultStyle = true;\n }\n\n/**\n * @hidden\n */\n@Directive({\n    selector: '[igxDialogActions],igx-dialog-actions',\n    standalone: true\n})\nexport class IgxDialogActionsDirective {\n\n    @HostBinding('class.igx-dialog__window-actions')\n    public defaultClass = true;\n }\n","import { IgxDialogComponent } from './dialog.component';\nimport { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';\n\nexport * from './dialog.component';\nexport * from './dialog.directives';\n\n/* NOTE: Dialog directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_DIALOG_DIRECTIVES = [\n    IgxDialogComponent,\n    IgxDialogTitleDirective,\n    IgxDialogActionsDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_DIALOG_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_DIALOG_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_DIALOG_DIRECTIVES\n    ]\n})\nexport class IgxDialogModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxDialogComponent","i2.IgxDialogTitleDirective","i2.IgxDialogActionsDirective"],"mappings":"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"}
+{"version":3,"file":"igniteui-angular-dialog.mjs","sources":["../../../projects/igniteui-angular/dialog/src/dialog/dialog.component.ts","../../../projects/igniteui-angular/dialog/src/dialog/dialog-content.component.html","../../../projects/igniteui-angular/dialog/src/dialog/dialog.directives.ts","../../../projects/igniteui-angular/dialog/src/dialog/public_api.ts","../../../projects/igniteui-angular/dialog/src/dialog/dialog.module.ts","../../../projects/igniteui-angular/dialog/src/igniteui-angular-dialog.ts"],"sourcesContent":["import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output, ViewChild, AfterContentInit, booleanAttribute, inject } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { IgxNavigationService, IToggleView } from 'igniteui-angular/core';\nimport { IgxButtonType, IgxButtonDirective } from 'igniteui-angular/directives';\nimport { IgxRippleDirective } from 'igniteui-angular/directives';\nimport { IgxToggleDirective } from 'igniteui-angular/directives';\nimport { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from 'igniteui-angular/core';\nimport { IgxFocusDirective } from 'igniteui-angular/directives';\nimport { IgxFocusTrapDirective } from 'igniteui-angular/directives';\nimport { CancelableEventArgs, IBaseEventArgs } from 'igniteui-angular/core';\nimport { fadeIn, fadeOut } from 'igniteui-angular/animations';\n\nlet DIALOG_ID = 0;\n/**\n * **Ignite UI for Angular Dialog Window** -\n * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html)\n *\n * The Ignite UI Dialog Window presents a dialog window to the user which can simply display messages or display\n * more complicated visuals such as a user sign-in form.  It also provides a right and left button\n * which can be used for custom actions.\n *\n * Example:\n * ```html\n * <button type=\"button\" igxButton (click)=\"form.open()\">Show Dialog</button>\n * <igx-dialog #form title=\"Sign In\" rightButtonLabel=\"OK\">\n *   <div>\n *     <igx-input-group>\n *       <input type=\"text\" igxInput/>\n *       <label igxLabel>Username</label>\n *     </igx-input-group>\n *   </div>\n *   <div>\n *     <igx-input-group>\n *       <input type=\"password\" igxInput/>\n *       <label igxLabel>Password</label>\n *     </igx-input-group>\n *   </div>\n * </igx-dialog>\n * ```\n */\n@Component({\n    selector: 'igx-dialog',\n    templateUrl: 'dialog-content.component.html',\n    imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective]\n})\nexport class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit {\n    private cdr = inject(ChangeDetectorRef);\n    private elementRef = inject(ElementRef);\n    private navService = inject(IgxNavigationService, { optional: true });\n\n    private static NEXT_ID = 1;\n    private static readonly DIALOG_CLASS = 'igx-dialog';\n\n\n\n    @ViewChild(IgxToggleDirective, { static: true })\n    public toggleRef: IgxToggleDirective;\n\n    /**\n     * Sets the value of the `id` attribute. If not provided it will be automatically generated.\n     * ```html\n     * <igx-dialog [id]=\"'igx-dialog-56'\" #alert title=\"Notification\"\n     *  leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\">\n     * </igx-dialog>\n     * ```\n     */\n    @HostBinding('attr.id')\n    @Input()\n    public id = `igx-dialog-${DIALOG_ID++}`;\n\n    /**\n     * Controls whether the dialog should be shown as modal. Defaults to `true`\n     * ```html\n     * <igx-dialog [isModal]=\"false\" ></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get isModal() {\n        return this._isModal;\n    }\n\n    public set isModal(val: boolean) {\n        this._overlayDefaultSettings.modal = val;\n        this._isModal = val;\n    }\n\n    /**\n     * Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`\n     * ```html\n     * <igx-dialog [closeOnEscape]=\"false\" ></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get closeOnEscape() {\n        return this._closeOnEscape;\n    }\n\n    public set closeOnEscape(val: boolean) {\n        this._overlayDefaultSettings.closeOnEscape = val;\n        this._closeOnEscape = val;\n    }\n\n    /**\n     * Set whether the Tab key focus is trapped within the dialog when opened.\n     * Defaults to `true`.\n     * ```html\n     * <igx-dialog focusTrap=\"false\"\"></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public focusTrap = true;\n\n    /**\n     * Sets the title of the dialog.\n     * ```html\n     * <igx-dialog title=\"Notification\" #alert leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public title = '';\n\n    /**\n     *  Sets the message text of the dialog.\n     * ```html\n     * <igx-dialog message=\"Your email was sent!\" #alert leftButtonLabel=\"OK\" (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public message = '';\n\n    /**\n     * Sets the `label` of the left button of the dialog.\n     * ```html\n     * <igx-dialog leftButtonLabel=\"OKAY\" #alert title=\"Notification\"  (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonLabel = '';\n\n    /**\n     * Sets the left button `type`. The types are `flat`, `contained` and `fab`.\n     * The `flat` type button is a rectangle and doesn't have a shadow. <br>\n     * The `contained` type button is also a rectangle but has a shadow. <br>\n     * The `fab` type button is a circle with a shadow. <br>\n     * The default value is `flat`.\n     * ```html\n     * <igx-dialog leftButtonType=\"contained\" leftButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonType: IgxButtonType = 'flat';\n\n    /**\n     * Sets the left button `ripple`. The `ripple` animates a click/tap to a component as a series of fading waves.\n     * The property accepts all valid CSS color property values.\n     * ```html\n     * <igx-dialog leftButtonRipple=\"green\" leftButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public leftButtonRipple = '';\n\n    /**\n     * Sets the `label` of the right button of the dialog.\n     * ```html\n     * <igx-dialog rightButtonLabel=\"OKAY\" #alert title=\"Notification\"  (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonLabel = '';\n\n    /**\n     * Sets the right button `type`. The types are `flat`, `contained` and `fab`.\n     * The `flat` type button is a rectangle and doesn't have a shadow. <br>\n     * The `contained` type button is also a rectangle but has a shadow. <br>\n     * The `fab` type button is a circle with a shadow. <br>\n     * The default value is `flat`.\n     * ```html\n     * <igx-dialog rightButtonType=\"fab\" rightButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonType: IgxButtonType = 'flat';\n\n    /**\n     * Sets the right button `ripple`.\n     * ```html\n     * <igx-dialog rightButtonRipple=\"green\" rightButtonLabel=\"OKAY\" #alert (leftButtonSelect)=\"alert.close()\"></igx-dialog>\n     * ```\n     */\n    @Input()\n    public rightButtonRipple = '';\n\n    /**\n     * Gets/Sets whether the dialog should close on click outside the component. By default it's false.\n     * ```html\n     * <igx-dialog closeOnOutsideSelect=\"true\" leftButtonLabel=\"Cancel\" (leftButtonSelect)=\"dialog.close()\"\n     * rightButtonLabel=\"OK\" rightButtonRipple=\"#4CAF50\" (rightButtonSelect)=\"onDialogOKSelected($event)\">\n     * </igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get closeOnOutsideSelect() {\n        return this._closeOnOutsideSelect;\n    }\n\n    public set closeOnOutsideSelect(val: boolean) {\n        this._overlayDefaultSettings.closeOnOutsideClick = val;\n        this._closeOnOutsideSelect = val;\n    }\n\n    /**\n     * Get the position and animation settings used by the dialog.\n     * ```typescript\n     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;\n     * let currentPosition: PositionSettings = this.alert.positionSettings\n     * ```\n     */\n    @Input()\n    public get positionSettings(): PositionSettings {\n        return this._positionSettings;\n    }\n\n    /**\n     * Set the position and animation settings used by the dialog.\n     * ```typescript\n     * import { slideInLeft, slideOutRight } from 'igniteui-angular';\n     * ...\n     * @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;\n     *  public newPositionSettings: PositionSettings = {\n     *      openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),\n     *      closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),\n     *      horizontalDirection: HorizontalAlignment.Left,\n     *      verticalDirection: VerticalAlignment.Middle,\n     *      horizontalStartPoint: HorizontalAlignment.Left,\n     *      verticalStartPoint: VerticalAlignment.Middle,\n     *      minSize: { height: 100, width: 100 }\n     *  };\n     * this.alert.positionSettings = this.newPositionSettings;\n     * ```\n     */\n    public set positionSettings(settings: PositionSettings) {\n        this._positionSettings = settings;\n        this._overlayDefaultSettings.positionStrategy = new GlobalPositionStrategy(this._positionSettings);\n    }\n\n    /**\n     * The default `tabindex` attribute for the component\n     *\n     * @hidden\n     */\n    @HostBinding('attr.tabindex')\n    public tabindex = -1;\n\n    /**\n     * An event that is emitted before the dialog is opened.\n     * ```html\n     * <igx-dialog (opening)=\"onDialogOpenHandler($event)\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public opening = new EventEmitter<IDialogCancellableEventArgs>();\n\n    /**\n     * An event that is emitted after the dialog is opened.\n     * ```html\n     * <igx-dialog (opened)=\"onDialogOpenedHandler($event)\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public opened = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted before the dialog is closed.\n     * ```html\n     * <igx-dialog (closing)=\"onDialogCloseHandler($event)\" title=\"Confirmation\" leftButtonLabel=\"Cancel\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public closing = new EventEmitter<IDialogCancellableEventArgs>();\n\n    /**\n     * An event that is emitted after the dialog is closed.\n     * ```html\n     * <igx-dialog (closed)=\"onDialogClosedHandler($event)\" title=\"Confirmation\" leftButtonLabel=\"Cancel\" rightButtonLabel=\"OK\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public closed = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted when the left button is clicked.\n     * ```html\n     * <igx-dialog (leftButtonSelect)=\"onDialogOKSelected($event)\" #dialog leftButtonLabel=\"OK\" rightButtonLabel=\"Cancel\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public leftButtonSelect = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * An event that is emitted when the right button is clicked.\n     * ```html\n     * <igx-dialog (rightButtonSelect)=\"onDialogOKSelected($event)\"\n     * #dialog title=\"Confirmation\" (leftButtonSelect)=\"dialog.close()\" rightButtonLabel=\"OK\"\n     * rightButtonRipple=\"#4CAF50\" closeOnOutsideSelect=\"true\">\n     * </igx-dialog>\n     * ```\n     */\n    @Output()\n    public rightButtonSelect = new EventEmitter<IDialogEventArgs>();\n\n    /**\n     * @hidden\n     */\n    @Output() public isOpenChange = new EventEmitter<boolean>();\n\n    /**\n     * @hidden\n     */\n    public get element() {\n        return this.elementRef.nativeElement;\n    }\n\n    /**\n     * Returns the value of state. Possible state values are \"open\" or \"close\".\n     * ```typescript\n     * @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogState = this.dialog.state;\n     * }\n     * ```\n     */\n    public get state(): string {\n        return this.isOpen ? 'open' : 'close';\n    }\n\n    /**\n     * State of the dialog.\n     *\n     * ```typescript\n     * // get\n     * let dialogIsOpen = this.dialog.isOpen;\n     * ```\n     *\n     * ```html\n     * <!--set-->\n     * <igx-dialog [isOpen]='false'></igx-dialog>\n     * ```\n     *\n     * Two-way data binding.\n     * ```html\n     * <!--set-->\n     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>\n     * ```\n     */\n    @Input({ transform: booleanAttribute })\n    public get isOpen() {\n        return this.toggleRef ? !this.toggleRef.collapsed : false;\n    }\n    public set isOpen(value: boolean) {\n        if (value !== this.isOpen) {\n            this.isOpenChange.emit(value);\n            if (value) {\n                requestAnimationFrame(() => {\n                    this.open();\n                });\n            } else {\n                this.close();\n            }\n        }\n    }\n\n    @HostBinding('class.igx-dialog--hidden')\n    public get isCollapsed() {\n        return this.toggleRef.collapsed;\n    }\n\n    /**\n     * Returns the value of the role of the dialog. The valid values are `dialog`, `alertdialog`, `alert`.\n     * ```typescript\n     * @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogRole = this.dialog.role;\n     * }\n     *  ```\n     */\n    @Input()\n    public get role() {\n        if (this.leftButtonLabel !== '' && this.rightButtonLabel !== '') {\n            return 'dialog';\n        } else if (\n            this.leftButtonLabel !== '' ||\n            this.rightButtonLabel !== ''\n        ) {\n            return 'alertdialog';\n        } else {\n            return 'alert';\n        }\n    }\n\n    /**\n     * Returns the value of the title id.\n     * ```typescript\n     *  @ViewChild(\"MyDialog\")\n     * public dialog: IgxDialogComponent;\n     * ngAfterViewInit() {\n     *     let dialogTitle = this.dialog.titleId;\n     * }\n     * ```\n     */\n    @Input()\n    public get titleId() {\n        return this._titleId;\n    }\n\n    protected destroy$ = new Subject<boolean>();\n\n    private _positionSettings: PositionSettings = {\n        openAnimation: fadeIn,\n        closeAnimation: fadeOut\n    };\n\n    private _overlayDefaultSettings: OverlaySettings;\n    private _closeOnOutsideSelect = false;\n    private _closeOnEscape = true;\n    private _isModal = true;\n    private _titleId: string;\n\n    constructor() {\n        this._titleId = IgxDialogComponent.NEXT_ID++ + '_title';\n\n        this._overlayDefaultSettings = {\n            positionStrategy: new GlobalPositionStrategy(this._positionSettings),\n            scrollStrategy: new NoOpScrollStrategy(),\n            modal: this.isModal,\n            closeOnEscape: this._closeOnEscape,\n            closeOnOutsideClick: this.closeOnOutsideSelect\n        };\n    }\n\n    public ngAfterContentInit() {\n        this.toggleRef.closing.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitCloseFromDialog(eventArgs));\n        this.toggleRef.closed.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitClosedFromDialog(eventArgs));\n        this.toggleRef.opened.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitOpenedFromDialog(eventArgs));\n    }\n\n    /**\n     * A method that opens the dialog.\n     *\n     * @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.open() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public open(overlaySettings: OverlaySettings = this._overlayDefaultSettings) {\n        const eventArgs: IDialogCancellableEventArgs = { dialog: this, event: null, cancel: false };\n        this.opening.emit(eventArgs);\n        if (!eventArgs.cancel) {\n            overlaySettings = { ...{}, ... this._overlayDefaultSettings, ...overlaySettings };\n            this.toggleRef.open(overlaySettings);\n            this.cdr.markForCheck();\n            this.isOpenChange.emit(true);\n            if (!this.leftButtonLabel && !this.rightButtonLabel) {\n                this.toggleRef.element.focus();\n            }\n        }\n\n    }\n\n    /**\n     * A method that that closes the dialog.\n     *\n     *  @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.close() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public close() {\n        // `closing` will emit from `toggleRef.closing` subscription\n        this.toggleRef?.close();\n    }\n\n\n    /**\n     * A method that opens/closes the dialog.\n     *\n     * @memberOf {@link IgxDialogComponent}\n     * ```html\n     * <button type=\"button\" (click)=\"dialog.toggle() igxButton=\"contained\">Trigger Dialog</button>\n     * <igx-dialog #dialog></igx-dialog>\n     * ```\n     */\n    public toggle() {\n        if (this.isOpen) {\n            this.close();\n        } else {\n            this.open();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public onDialogSelected(event) {\n        event.stopPropagation();\n        if (\n            this.isOpen &&\n            this.closeOnOutsideSelect &&\n            event.target.classList.contains(IgxDialogComponent.DIALOG_CLASS)\n        ) {\n            this.close();\n        }\n    }\n\n    /**\n     * @hidden\n     */\n    public onInternalLeftButtonSelect(event) {\n        this.leftButtonSelect.emit({ dialog: this, event });\n    }\n\n    /**\n     * @hidden\n     */\n    public onInternalRightButtonSelect(event) {\n        this.rightButtonSelect.emit({ dialog: this, event });\n    }\n\n    /**\n     * @hidden\n     */\n    public ngOnInit() {\n        if (this.navService && this.id) {\n            this.navService.add(this.id, this);\n        }\n    }\n    /**\n     * @hidden\n     */\n    public ngOnDestroy() {\n        if (this.navService && this.id) {\n            this.navService.remove(this.id);\n        }\n    }\n\n    private emitCloseFromDialog(eventArgs) {\n        const dialogEventsArgs = { dialog: this, event: eventArgs.event, cancel: eventArgs.cancel };\n        this.closing.emit(dialogEventsArgs);\n        eventArgs.cancel = dialogEventsArgs.cancel;\n        if (!eventArgs.cancel) {\n            this.isOpenChange.emit(false);\n        }\n    }\n\n    private emitClosedFromDialog(eventArgs) {\n        this.closed.emit({ dialog: this, event: eventArgs.event });\n    }\n\n    private emitOpenedFromDialog(eventArgs) {\n        this.opened.emit({ dialog: this, event: eventArgs.event });\n    }\n}\n\nexport interface IDialogEventArgs extends IBaseEventArgs {\n    dialog: IgxDialogComponent;\n    event: Event;\n}\n\nexport interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs { }\n","<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","import { Directive, HostBinding } from '@angular/core';\n\n/**\n * @hidden\n */\n@Directive({\n    selector: '[igxDialogTitle],igx-dialog-title',\n    standalone: true\n})\nexport class IgxDialogTitleDirective {\n\n    @HostBinding('class.igx-dialog__window-title')\n    public defaultStyle = true;\n }\n\n/**\n * @hidden\n */\n@Directive({\n    selector: '[igxDialogActions],igx-dialog-actions',\n    standalone: true\n})\nexport class IgxDialogActionsDirective {\n\n    @HostBinding('class.igx-dialog__window-actions')\n    public defaultClass = true;\n }\n","import { IgxDialogComponent } from './dialog.component';\nimport { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';\n\nexport * from './dialog.component';\nexport * from './dialog.directives';\n\n/* NOTE: Dialog directives collection for ease-of-use import in standalone components scenario */\nexport const IGX_DIALOG_DIRECTIVES = [\n    IgxDialogComponent,\n    IgxDialogTitleDirective,\n    IgxDialogActionsDirective\n] as const;\n","import { NgModule } from '@angular/core';\nimport { IGX_DIALOG_DIRECTIVES } from './public_api';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n    imports: [\n        ...IGX_DIALOG_DIRECTIVES\n    ],\n    exports: [\n        ...IGX_DIALOG_DIRECTIVES\n    ]\n})\nexport class IgxDialogModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.IgxDialogComponent","i2.IgxDialogTitleDirective","i2.IgxDialogActionsDirective"],"mappings":";;;;;;;;AAaA,IAAI,SAAS,GAAG,CAAC;AACjB;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BG;MAMU,kBAAkB,CAAA;aAKZ,IAAA,CAAA,OAAO,GAAG,CAAH,CAAK;aACH,IAAA,CAAA,YAAY,GAAG,YAAH,CAAgB;AAmBpD;;;;;AAKG;AACH,IAAA,IACW,OAAO,GAAA;QACd,OAAO,IAAI,CAAC,QAAQ;IACxB;IAEA,IAAW,OAAO,CAAC,GAAY,EAAA;AAC3B,QAAA,IAAI,CAAC,uBAAuB,CAAC,KAAK,GAAG,GAAG;AACxC,QAAA,IAAI,CAAC,QAAQ,GAAG,GAAG;IACvB;AAEA;;;;;AAKG;AACH,IAAA,IACW,aAAa,GAAA;QACpB,OAAO,IAAI,CAAC,cAAc;IAC9B;IAEA,IAAW,aAAa,CAAC,GAAY,EAAA;AACjC,QAAA,IAAI,CAAC,uBAAuB,CAAC,aAAa,GAAG,GAAG;AAChD,QAAA,IAAI,CAAC,cAAc,GAAG,GAAG;IAC7B;AA6FA;;;;;;;AAOG;AACH,IAAA,IACW,oBAAoB,GAAA;QAC3B,OAAO,IAAI,CAAC,qBAAqB;IACrC;IAEA,IAAW,oBAAoB,CAAC,GAAY,EAAA;AACxC,QAAA,IAAI,CAAC,uBAAuB,CAAC,mBAAmB,GAAG,GAAG;AACtD,QAAA,IAAI,CAAC,qBAAqB,GAAG,GAAG;IACpC;AAEA;;;;;;AAMG;AACH,IAAA,IACW,gBAAgB,GAAA;QACvB,OAAO,IAAI,CAAC,iBAAiB;IACjC;AAEA;;;;;;;;;;;;;;;;;AAiBG;IACH,IAAW,gBAAgB,CAAC,QAA0B,EAAA;AAClD,QAAA,IAAI,CAAC,iBAAiB,GAAG,QAAQ;AACjC,QAAA,IAAI,CAAC,uBAAuB,CAAC,gBAAgB,GAAG,IAAI,sBAAsB,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACtG;AA6EA;;AAEG;AACH,IAAA,IAAW,OAAO,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa;IACxC;AAEA;;;;;;;;;AASG;AACH,IAAA,IAAW,KAAK,GAAA;QACZ,OAAO,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO;IACzC;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AACH,IAAA,IACW,MAAM,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,KAAK;IAC7D;IACA,IAAW,MAAM,CAAC,KAAc,EAAA;AAC5B,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,EAAE;AACvB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;YAC7B,IAAI,KAAK,EAAE;gBACP,qBAAqB,CAAC,MAAK;oBACvB,IAAI,CAAC,IAAI,EAAE;AACf,gBAAA,CAAC,CAAC;YACN;iBAAO;gBACH,IAAI,CAAC,KAAK,EAAE;YAChB;QACJ;IACJ;AAEA,IAAA,IACW,WAAW,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS;IACnC;AAEA;;;;;;;;;AASG;AACH,IAAA,IACW,IAAI,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,eAAe,KAAK,EAAE,IAAI,IAAI,CAAC,gBAAgB,KAAK,EAAE,EAAE;AAC7D,YAAA,OAAO,QAAQ;QACnB;AAAO,aAAA,IACH,IAAI,CAAC,eAAe,KAAK,EAAE;AAC3B,YAAA,IAAI,CAAC,gBAAgB,KAAK,EAAE,EAC9B;AACE,YAAA,OAAO,aAAa;QACxB;aAAO;AACH,YAAA,OAAO,OAAO;QAClB;IACJ;AAEA;;;;;;;;;AASG;AACH,IAAA,IACW,OAAO,GAAA;QACd,OAAO,IAAI,CAAC,QAAQ;IACxB;AAeA,IAAA,WAAA,GAAA;AArYQ,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QAC/B,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,oBAAoB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAUrE;;;;;;;AAOG;AAGI,QAAA,IAAA,CAAA,EAAE,GAAG,CAAA,WAAA,EAAc,SAAS,EAAE,EAAE;AAkCvC;;;;;;AAMG;QAEI,IAAA,CAAA,SAAS,GAAG,IAAI;AAEvB;;;;;AAKG;QAEI,IAAA,CAAA,KAAK,GAAG,EAAE;AAEjB;;;;;AAKG;QAEI,IAAA,CAAA,OAAO,GAAG,EAAE;AAEnB;;;;;AAKG;QAEI,IAAA,CAAA,eAAe,GAAG,EAAE;AAE3B;;;;;;;;;AASG;QAEI,IAAA,CAAA,cAAc,GAAkB,MAAM;AAE7C;;;;;;AAMG;QAEI,IAAA,CAAA,gBAAgB,GAAG,EAAE;AAE5B;;;;;AAKG;QAEI,IAAA,CAAA,gBAAgB,GAAG,EAAE;AAE5B;;;;;;;;;AASG;QAEI,IAAA,CAAA,eAAe,GAAkB,MAAM;AAE9C;;;;;AAKG;QAEI,IAAA,CAAA,iBAAiB,GAAG,EAAE;AAuD7B;;;;AAIG;QAEI,IAAA,CAAA,QAAQ,GAAG,CAAC,CAAC;AAEpB;;;;;;AAMG;AAEI,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA+B;AAEhE;;;;;;AAMG;AAEI,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAoB;AAEpD;;;;;;AAMG;AAEI,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAA+B;AAEhE;;;;;;AAMG;AAEI,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAoB;AAEpD;;;;;;AAMG;AAEI,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAoB;AAE9D;;;;;;;;AAQG;AAEI,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAAoB;AAE/D;;AAEG;AACc,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAW;AAuGjD,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAW;AAEnC,QAAA,IAAA,CAAA,iBAAiB,GAAqB;AAC1C,YAAA,aAAa,EAAE,MAAM;AACrB,YAAA,cAAc,EAAE;SACnB;QAGO,IAAA,CAAA,qBAAqB,GAAG,KAAK;QAC7B,IAAA,CAAA,cAAc,GAAG,IAAI;QACrB,IAAA,CAAA,QAAQ,GAAG,IAAI;QAInB,IAAI,CAAC,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EAAE,GAAG,QAAQ;QAEvD,IAAI,CAAC,uBAAuB,GAAG;AAC3B,YAAA,gBAAgB,EAAE,IAAI,sBAAsB,CAAC,IAAI,CAAC,iBAAiB,CAAC;YACpE,cAAc,EAAE,IAAI,kBAAkB,EAAE;YACxC,KAAK,EAAE,IAAI,CAAC,OAAO;YACnB,aAAa,EAAE,IAAI,CAAC,cAAc;YAClC,mBAAmB,EAAE,IAAI,CAAC;SAC7B;IACL;IAEO,kBAAkB,GAAA;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;AACnH,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;AACnH,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC;IACvH;AAEA;;;;;;;;AAQG;AACI,IAAA,IAAI,CAAC,eAAA,GAAmC,IAAI,CAAC,uBAAuB,EAAA;AACvE,QAAA,MAAM,SAAS,GAAgC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;AAC3F,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;AACnB,YAAA,eAAe,GAAG,EAAE,GAAG,EAAE,EAAE,GAAI,IAAI,CAAC,uBAAuB,EAAE,GAAG,eAAe,EAAE;AACjF,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;AACpC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACvB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;YAC5B,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE;YAClC;QACJ;IAEJ;AAEA;;;;;;;;AAQG;IACI,KAAK,GAAA;;AAER,QAAA,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;IAC3B;AAGA;;;;;;;;AAQG;IACI,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,IAAI,CAAC,KAAK,EAAE;QAChB;aAAO;YACH,IAAI,CAAC,IAAI,EAAE;QACf;IACJ;AAEA;;AAEG;AACI,IAAA,gBAAgB,CAAC,KAAK,EAAA;QACzB,KAAK,CAAC,eAAe,EAAE;QACvB,IACI,IAAI,CAAC,MAAM;AACX,YAAA,IAAI,CAAC,oBAAoB;AACzB,YAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,YAAY,CAAC,EAClE;YACE,IAAI,CAAC,KAAK,EAAE;QAChB;IACJ;AAEA;;AAEG;AACI,IAAA,0BAA0B,CAAC,KAAK,EAAA;AACnC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACvD;AAEA;;AAEG;AACI,IAAA,2BAA2B,CAAC,KAAK,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACxD;AAEA;;AAEG;IACI,QAAQ,GAAA;QACX,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC;QACtC;IACJ;AACA;;AAEG;IACI,WAAW,GAAA;QACd,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;QACnC;IACJ;AAEQ,IAAA,mBAAmB,CAAC,SAAS,EAAA;AACjC,QAAA,MAAM,gBAAgB,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE;AAC3F,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACnC,QAAA,SAAS,CAAC,MAAM,GAAG,gBAAgB,CAAC,MAAM;AAC1C,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QACjC;IACJ;AAEQ,IAAA,oBAAoB,CAAC,SAAS,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;IAC9D;AAEQ,IAAA,oBAAoB,CAAC,SAAS,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;IAC9D;8GA5gBS,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EA+BP,gBAAgB,CAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAgBhB,gBAAgB,yCAiBhB,gBAAgB,CAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,CAAA,sBAAA,EAAA,sBAAA,EA4FhB,gBAAgB,CAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAgKhB,gBAAgB,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,eAAA,EAAA,eAAA,EAAA,0BAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAlTzB,kBAAkB,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxDjC,+nEAiEA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDrBc,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,qBAAqB,qFAAE,iBAAiB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAErG,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACI,YAAY,EAAA,OAAA,EAEb,CAAC,kBAAkB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,+nEAAA,EAAA;;sBAY9G,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAW9C,WAAW;uBAAC,SAAS;;sBACrB;;sBASA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAgBrC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAiBrC,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBASrC;;sBASA;;sBASA;;sBAaA;;sBAUA;;sBASA;;sBAaA;;sBASA;;sBAWA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAiBrC;;sBAiCA,WAAW;uBAAC,eAAe;;sBAU3B;;sBAUA;;sBAUA;;sBAUA;;sBAUA;;sBAYA;;sBAMA;;sBA0CA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBAiBrC,WAAW;uBAAC,0BAA0B;;sBAetC;;sBAwBA;;;AEhaL;;AAEG;MAKU,uBAAuB,CAAA;AAJpC,IAAA,WAAA,GAAA;QAOW,IAAA,CAAA,YAAY,GAAG,IAAI;AAC5B,IAAA;8GAJW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gCAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,mCAAmC;AAC7C,oBAAA,UAAU,EAAE;AACf,iBAAA;;sBAGI,WAAW;uBAAC,gCAAgC;;AAIjD;;AAEG;MAKU,yBAAyB,CAAA;AAJtC,IAAA,WAAA,GAAA;QAOW,IAAA,CAAA,YAAY,GAAG,IAAI;AAC5B,IAAA;8GAJW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,kCAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,uCAAuC;AACjD,oBAAA,UAAU,EAAE;AACf,iBAAA;;sBAGI,WAAW;uBAAC,kCAAkC;;;AClBnD;AACO,MAAM,qBAAqB,GAAG;IACjC,kBAAkB;IAClB,uBAAuB;IACvB;;;ACPJ;;;AAGG;MASU,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAf,eAAe,EAAA,OAAA,EAAA,CAAAA,kBAAA,EAAAC,uBAAA,EAAAC,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAAF,kBAAA,EAAAC,uBAAA,EAAAC,yBAAA,CAAA,EAAA,CAAA,CAAA;+GAAf,eAAe,EAAA,CAAA,CAAA;;2FAAf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;AACL,wBAAA,GAAG;AACN,qBAAA;AACD,oBAAA,OAAO,EAAE;AACL,wBAAA,GAAG;AACN;AACJ,iBAAA;;;ACdD;;AAEG;;;;"}

package/fesm2022/igniteui-angular-grids-core.mjs

@@ -6391,10 +6391,17 @@ class IgxColumnComponent {
     }
     /**
      * @hidden
-     * Returns the width and padding of a header cell.
+     * Returns the width and padding of a header cell, or of its quick filtering cell if it needs more space.
      */
     getHeaderCellWidths() {
-        return this.grid.getHeaderCellWidth(this.headerCell.nativeElement);
+        const headerCellWidths = this.grid.getHeaderCellWidth(this.headerCell.nativeElement);
+        const filterCell = this.filterCell;
+        if (!filterCell || filterCell.collapsesChips || this.filterCellTemplate) {
+            return headerCellWidths;
+        }
+        const filterCellWidths = this.grid.getHeaderCellWidth(filterCell.nativeElement);
+        return filterCellWidths.width + filterCellWidths.padding > headerCellWidths.width + headerCellWidths.padding ?
+            filterCellWidths : headerCellWidths;
     }
     /**
      * @hidden
@@ -6409,7 +6416,7 @@ class IgxColumnComponent {
      */
     getLargestCellWidth() {
         const range = this.grid.document.createRange();
-        const largest = new Map();
+        const widths = [];
         if (this._cells.length > 0) {
             const cellsContentWidths = [];
             this._cells.forEach((cell) => cellsContentWidths.push(cell.calculateSizeToFit(range)));
@@ -6417,15 +6424,14 @@ class IgxColumnComponent {
             const cellStyle = this.grid.document.defaultView.getComputedStyle(this._cells[index].nativeElement);
             const cellPadding = parseFloat(cellStyle.paddingLeft) + parseFloat(cellStyle.paddingRight) +
                 parseFloat(cellStyle.borderLeftWidth) + parseFloat(cellStyle.borderRightWidth);
-            largest.set(Math.max(...cellsContentWidths), cellPadding);
+            widths.push(cellsContentWidths[index] + cellPadding);
         }
         if (this.headerCell && this.autosizeHeader) {
             const headerCellWidths = this.getHeaderCellWidths();
-            largest.set(headerCellWidths.width, headerCellWidths.padding);
+            widths.push(headerCellWidths.width + headerCellWidths.padding);
         }
-        const largestCell = Math.max(...Array.from(largest.keys()));
-        const width = Math.ceil(largestCell + largest.get(largestCell));
-        if (Number.isNaN(width)) {
+        const width = Math.ceil(Math.max(...widths));
+        if (!Number.isFinite(width)) {
             return this.width;
         }
         else {
@@ -12210,6 +12216,7 @@ class IgxGridFilteringCellComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
         this.filteringService = inject(IgxFilteringService);
+        this.ref = inject(ElementRef);
         this.moreFiltersCount = 0;
         this.role = 'gridcell';
         this.baseClass = 'igx-grid__filtering-cell-indicator';
@@ -12262,6 +12269,19 @@ class IgxGridFilteringCellComponent {
     get context() {
         return { $implicit: this.column, column: this.column };
     }
+    /**
+     * @hidden @internal
+     */
+    get nativeElement() {
+        return this.ref.nativeElement;
+    }
+    /**
+     * @hidden @internal
+     * Whether the chips that do not fit are collapsed into the "more" indicator.
+     */
+    get collapsesChips() {
+        return !!this.chipsArea && this.expressionsList.length > 1;
+    }
     /**
      * Chip clicked event handler.
      */
@@ -12327,7 +12347,7 @@ class IgxGridFilteringCellComponent {
             this.filteringService.columnToMoreIconHidden.set(this.column.field, true);
         }
         this.cdr.detectChanges();
-        if (this.chipsArea && this.expressionsList.length > 1) {
+        if (this.collapsesChips) {
             const areaWidth = this.chipsArea.element.nativeElement.offsetWidth;
             let viewWidth = 0;
             const chipsAreaElements = this.chipsArea.element.nativeElement.children;
@@ -24069,7 +24089,7 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell\n            ? (formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value)\n            : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
@@ -24099,7 +24119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         IgxGridCellImageAltPipe,
                         IgxStringReplacePipe,
                         IgxColumnFormatterPipe
-                    ], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
+                    ], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell\n            ? (formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value)\n            : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
         }], propDecorators: { isEmptyAddRowCell: [{
                 type: HostBinding,
                 args: ['class.igx-grid__td--new']