fix(ESF): move custom dialog out of ESF markup (#17136)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Damyan Petev <damyanpetev@users.noreply.github.com>

Author: 3 people

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.html

@@ -43,11 +43,4 @@
             }
         </div>
     </igx-drop-down>
-
-    <igx-excel-style-custom-dialog
-        #customDialog
-        [column]="esf.column"
-        [filteringService]="esf.grid.filteringService"
-        [overlayComponentId]="esf.overlayComponentId">
-    </igx-excel-style-custom-dialog>
 }

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-conditional-filter.component.ts

@@ -6,7 +6,7 @@ import { BaseFilteringComponent } from './base-filtering.component';
 import { NgClass } from '@angular/common';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, OverlaySettings, PlatformUtil, VerticalAlignment } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, HorizontalAlignment, IFilteringExpression, IFilteringOperation, IgxOverlayService, OverlaySettings, PlatformUtil, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
 
 
 /**
@@ -15,17 +15,12 @@ import { AbsoluteScrollStrategy, AutoPositionStrategy, GridColumnDataType, Horiz
 @Component({
     selector: 'igx-excel-style-conditional-filter',
     templateUrl: './excel-style-conditional-filter.component.html',
-    imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent]
+    imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent]
 })
 export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
     public esf = inject(BaseFilteringComponent);
     protected platform = inject(PlatformUtil);
-
-    /**
-     * @hidden @internal
-     */
-    @ViewChild('customDialog', { read: IgxExcelStyleCustomDialogComponent })
-    public customDialog: IgxExcelStyleCustomDialogComponent;
+    private _overlayService = inject<IgxOverlayService>(IgxOverlayService);
 
     /**
      * @hidden @internal
@@ -133,20 +128,41 @@ export class IgxExcelStyleConditionalFilterComponent implements OnDestroy {
      * @hidden @internal
      */
     public onSubMenuSelection(eventArgs: ISelectionEventArgs) {
+        const positionSettings: PositionSettings = {
+            horizontalDirection: HorizontalAlignment.Center,
+            verticalDirection: VerticalAlignment.Middle,
+            horizontalStartPoint: HorizontalAlignment.Center,
+            verticalStartPoint: VerticalAlignment.Middle
+        };
+        const overlaySettings: OverlaySettings = {
+            target: this.esf.grid.tbody.nativeElement,
+            modal: false,
+            closeOnOutsideClick: true,
+            positionStrategy: new AutoPositionStrategy(positionSettings),
+            scrollStrategy: new AbsoluteScrollStrategy(),
+        };
+        const overlayId = this._overlayService.attach(IgxExcelStyleCustomDialogComponent, this.esf.grid.bodyViewContainerRef, overlaySettings);
+        const overlayInfo = this._overlayService.getOverlayById(overlayId);
+        const customDialog = overlayInfo.componentRef!.instance as IgxExcelStyleCustomDialogComponent;
+
+        customDialog.esf = this.esf;
+        customDialog.column = this.esf.column;
+        customDialog.filteringService = this.esf.grid.filteringService;
+        customDialog.overlayComponentId = overlayId;
         if (this.esf.expressionsList && this.esf.expressionsList.length &&
-            this.esf.expressionsList[0].expression.condition.name !== 'in') {
-            this.customDialog.expressionsList = this.esf.expressionsList;
+            this.esf.expressionsList[0].expression.condition?.name !== 'in') {
+            customDialog.expressionsList = this.esf.expressionsList;
         } else {
-            this.customDialog.expressionsList = this.customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition);
+            customDialog.expressionsList = customDialog.expressionsList.filter(e => e.expression.fieldName === this.esf.column.field && e.expression.condition);
         }
+        customDialog.selectedOperator = eventArgs.newSelection.value;
 
-        this.customDialog.selectedOperator = eventArgs.newSelection.value;
         eventArgs.cancel = true;
         if (this.esf.overlayComponentId) {
             this.esf.hide();
         }
         this.subMenu.close();
-        this.customDialog.open(this.esf.mainDropdown.nativeElement);
+        this._overlayService.show(overlayId);
     }
 
     /**

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.html

@@ -1,12 +1,10 @@
-<article #toggle igxToggle
+<article
     class="igx-excel-filter__secondary"
     [ngClass]="{
         'igx-excel-filter__secondary--cosy': grid.gridSize === '2',
         'igx-excel-filter__secondary--compact': grid.gridSize === '1'
     }"
-    (keydown)="onKeyDown($event)"
-    (opening)="onCustomDialogOpening()"
-    (opened)="onCustomDialogOpened()">
+    (keydown)="onKeyDown($event)">
     <header class="igx-excel-filter__secondary-header">
         <h4 class="ig-typography__h6">
             {{ grid.resourceStrings.igx_grid_excel_custom_dialog_header }}{{ column.header || column.field }}

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-custom-dialog.component.ts

@@ -1,27 +1,46 @@
-import { Component, Input, ChangeDetectorRef, ViewChild, AfterViewInit, TemplateRef, ViewChildren, QueryList, ElementRef, inject } from '@angular/core';
-import { IgxFilteringService } from '../grid-filtering.service';
-import { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component';
-import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component';
-import { ExpressionUI } from './common';
 import { NgClass } from '@angular/common';
-import { BaseFilteringComponent } from './base-filtering.component';
-import { IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular/directives';
+import { ChangeDetectorRef, Component, ElementRef, Input, QueryList, TemplateRef, ViewChild, ViewChildren, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ColumnType, FilteringLogic, GridColumnDataType, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxOverlayService, IgxStringFilteringOperand, IgxTimeFilteringOperand, PlatformUtil } from 'igniteui-angular/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
 import { IgxIconComponent } from 'igniteui-angular/icon';
-import { AbsoluteScrollStrategy, AutoPositionStrategy, ColumnType, FilteringLogic, GridColumnDataType, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxNumberFilteringOperand, IgxOverlayService, IgxStringFilteringOperand, IgxTimeFilteringOperand, OverlaySettings, PlatformUtil, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
+import { IgxFilteringService } from '../grid-filtering.service';
+import { BaseFilteringComponent } from './base-filtering.component';
+import { ExpressionUI } from './common';
+import { IgxExcelStyleDateExpressionComponent } from './excel-style-date-expression.component';
+import { ILogicOperatorChangedArgs, IgxExcelStyleDefaultExpressionComponent } from './excel-style-default-expression.component';
 
 /**
  * @hidden
  */
 @Component({
     selector: 'igx-excel-style-custom-dialog',
     templateUrl: './excel-style-custom-dialog.component.html',
-    imports: [IgxToggleDirective, NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent]
+    imports: [NgClass, IgxExcelStyleDateExpressionComponent, IgxExcelStyleDefaultExpressionComponent, IgxButtonDirective, IgxIconComponent]
 })
-export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
+export class IgxExcelStyleCustomDialogComponent {
     protected overlayService = inject(IgxOverlayService);
     private cdr = inject(ChangeDetectorRef);
     protected platform = inject(PlatformUtil);
-    public esf = inject(BaseFilteringComponent);
+    public esf?: BaseFilteringComponent;
+
+    constructor() {
+        this.overlayService.opening.pipe(takeUntilDestroyed()).subscribe((args) => {
+            if (args.id === this.overlayComponentId)
+                this.onCustomDialogOpening();
+        });
+        this.overlayService.opened.pipe(takeUntilDestroyed()).subscribe((args) => {
+            if (args.id === this.overlayComponentId)
+                this.onCustomDialogOpened();
+        });
+
+        this.overlayService.closed.pipe(takeUntilDestroyed()).subscribe((args) => {
+            if (args.id === this.overlayComponentId) {
+                this.overlayService.detach(this.overlayComponentId);
+                this.overlayComponentId = null;
+            }
+        });
+    }
 
     @Input()
     public expressionsList = new Array<ExpressionUI>();
@@ -38,9 +57,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
     @Input()
     public overlayComponentId: string;
 
-    @ViewChild('toggle', { read: IgxToggleDirective, static: true })
-    public toggle: IgxToggleDirective;
-
     @ViewChild('defaultExpressionTemplate', { read: TemplateRef })
     protected defaultExpressionTemplate: TemplateRef<any>;
 
@@ -56,24 +72,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
     @ViewChildren(IgxExcelStyleDateExpressionComponent)
     private expressionDateComponents: QueryList<IgxExcelStyleDateExpressionComponent>;
 
-    private _customDialogPositionSettings: PositionSettings = {
-        verticalDirection: VerticalAlignment.Middle,
-        horizontalDirection: HorizontalAlignment.Center,
-        horizontalStartPoint: HorizontalAlignment.Center,
-        verticalStartPoint: VerticalAlignment.Middle
-    };
-
-    private _customDialogOverlaySettings: OverlaySettings = {
-        closeOnOutsideClick: true,
-        modal: false,
-        positionStrategy: new AutoPositionStrategy(this._customDialogPositionSettings),
-        scrollStrategy: new AbsoluteScrollStrategy()
-    };
-
-    public ngAfterViewInit(): void {
-        this._customDialogOverlaySettings.outlet = this.grid.outlet;
-    }
-
     public get template(): TemplateRef<any> {
         if (this.column.dataType === GridColumnDataType.Date) {
             return this.dateExpressionTemplate;
@@ -98,15 +96,6 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
         }
     }
 
-    public open(esf) {
-        this._customDialogOverlaySettings.target =
-            this.overlayComponentId ?
-                this.grid.rootGrid ? this.grid.rootGrid.nativeElement : this.grid.nativeElement :
-                esf;
-        this.toggle.open(this._customDialogOverlaySettings);
-        this.overlayComponentId = this.toggle.overlayId;
-    }
-
     public onClearButtonClick() {
         this.filteringService.clearFilter(this.column.field);
         this.selectedOperator = null;
@@ -117,14 +106,13 @@ export class IgxExcelStyleCustomDialogComponent implements AfterViewInit {
     public closeDialog() {
         if (this.overlayComponentId) {
             this.overlayService.hide(this.overlayComponentId);
+            this.overlayService.detach(this.overlayComponentId);
             this.overlayComponentId = null;
-        } else {
-            this.toggle.close();
         }
     }
 
     public cancelDialog() {
-        this.esf.cancel();
+        this.esf?.cancel();
         this.closeDialog();
     }
 

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-default-expression.component.ts

@@ -135,7 +135,9 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         this.expressionUI.expression.condition = this.getCondition(value);
         this.expressionUI.expression.conditionName = value;
 
-        this.focus();
+        if (!this.expressionUI.expression.condition.isUnary) {
+            this.focus();
+        }
     }
 
     public getCondition(value: string): IFilteringOperation {

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -1328,6 +1328,10 @@ export abstract class IgxGridBaseDirective implements GridType,
     @ViewChild('tbody', { static: true })
     public tbody: ElementRef;
 
+    /** @hidden @internal */
+    @ViewChild("bodyViewContainerRef", { read: ViewContainerRef, static: true })
+    public bodyViewContainerRef?: ViewContainerRef;
+
     @ViewChild(IgxGridBodyDirective, { static: true, read: ElementRef })
     protected tbodyContainer: ElementRef;
 

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

@@ -4222,6 +4222,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             fix.detectChanges();
 
             // Open excel style custom filtering dialog and verify its size
+            setElementSize(grid.nativeElement, ɵSize.Large);
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'ProductName');
 
             GridFunctions.clickExcelFilterCascadeButton(fix);
@@ -7582,7 +7583,7 @@ const verifyExcelCustomFilterSize = (fix: ComponentFixture<any>, expectedSize: 
 const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: ɵSize) => {
     const outlet = gridNativeElement.querySelector('.igx-grid__outlet');
     const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list'));
-    const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden'));
+    const visibleDropdown: any = dropdowns[0];
     const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item');
 
     dropdownItems.forEach((dropdownItem) => {

projects/igniteui-angular/grids/grid/src/grid.component.html

@@ -158,6 +158,7 @@
 
         <ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
+        <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
     <div igxToggle #loadingOverlay>

projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html

@@ -125,6 +125,7 @@
                 id="right" class="igx-grid__scroll-on-drag-right"></span>
         }
         <div class="igx-grid__row-editing-outlet" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>
+        <ng-container #bodyViewContainerRef></ng-container>
         @if (!this.parent) {
             <igc-trial-watermark></igc-trial-watermark>
         }

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html

@@ -60,6 +60,7 @@
         </ng-template>
 
         <ng-container *ngTemplateOutlet="template; context: { $implicit: this }"></ng-container>
+        <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
     <div igxToggle #loadingOverlay>