From cf58d352e5a889bddecca0c1abc331f0a47fb9cd Mon Sep 17 00:00:00 2001
From: IBarakov <ibarakov@icloud.com>
Date: Thu, 23 Jul 2020 12:17:44 +0300
Subject: [PATCH 1/2] feat(grid): create a setter for grid's outlet #7379

---
 CHANGELOG.md                                  |  6 ++++
 .../src/lib/grids/cell.component.html         |  2 +-
 .../src/lib/grids/common/grid.interface.ts    |  2 +-
 .../advanced-filtering-dialog.component.html  |  2 +-
 .../base/grid-filtering-row.component.html    |  2 +-
 .../base/grid-filtering-row.component.ts      |  4 +--
 ...excel-style-date-expression.component.html |  2 +-
 .../src/lib/grids/grid-base.directive.ts      | 35 +++++++++++--------
 .../grids/grid/expandable-cell.component.html |  2 +-
 .../headers/grid-header-group.component.html  |  6 ++--
 .../hierarchical-grid-base.directive.ts       | 15 ++++++--
 .../grids/toolbar/grid-toolbar.component.ts   |  6 ++--
 .../grids/tree-grid/tree-cell.component.html  |  2 +-
 .../grid-column-selection.sample.ts           |  2 +-
 14 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4797a6076dc..939c1b68204 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -94,6 +94,12 @@ The following example shows how you can use the Indigo theme:
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.
 
+## 9.1.9
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Expose a setter for grid's `outlet` property, which can be used to set the outlet used to attach the grid's overlays to.
+
 ## 9.1.4
 
 ### New Features
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 0aa8c34c8c0..c00879e58fc 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -24,7 +24,7 @@
             [igxFocus]="true" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
             [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index 633691812d1..bdaa65126e6 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -30,7 +30,7 @@ export interface GridType extends IGridDataBindable {
     selectionService: any;
     navigation: any;
     filteringService: any;
-    outletDirective: any;
+    outlet: any;
 
     calcHeight: number;
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
index a91a8bce823..5930fa131f6 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -182,7 +182,7 @@ <h6 class="igx-filter-empty__title">
                                  mode="dropdown"
                                  [(ngModel)]="searchValue"
                                  [locale]="grid.locale"
-                                 [outlet]="grid.outletDirective">
+                                 [outlet]="grid.outlet">
                     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
                         <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'">
                             <input #searchValueInput
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
index 2966dfe48a6..0049855df1c 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
@@ -44,7 +44,7 @@
         tabindex="0"
         mode="dropdown"
         [value]="value"
-        [outlet]="filteringService.grid.outletDirective"
+        [outlet]="filteringService.grid.outlet"
         [locale]="filteringService.grid.locale"
         (onSelection)="onDateSelected($event)"
         (onClosed)="datePickerClose()">
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
index e8773fa4e2a..59131ea4685 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
@@ -147,8 +147,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     constructor(public filteringService: IgxFilteringService, public element: ElementRef, public cdr: ChangeDetectorRef) { }
 
     ngAfterViewInit() {
-        this._conditionsOverlaySettings.outlet = this.column.grid.outletDirective;
-        this._operatorsOverlaySettings.outlet = this.column.grid.outletDirective;
+        this._conditionsOverlaySettings.outlet = this.column.grid.outlet;
+        this._operatorsOverlaySettings.outlet = this.column.grid.outlet;
 
         const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
         if (selectedItem) {
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
index 72c896f1d3a..d3bf79e5ddb 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
@@ -14,7 +14,7 @@
     </igx-select-item>
 </igx-select>
 
-<igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
+<igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outlet">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
         <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity">
             <input #input
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 4cfbb2e7bf2..4a243bdcf3a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -208,6 +208,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         positionStrategy: new ConnectedPositioningStrategy(this._advancedFilteringPositionSettings),
     };
 
+    protected _userOutletDirective: IgxOverlayOutletDirective;
+
     /**
      * @hidden @internal
      */
@@ -1816,20 +1818,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @ViewChild('tfoot', { static: true })
     public tfoot: ElementRef;
 
-
     /**
      * @hidden @internal
      */
     @ViewChild('igxFilteringOverlayOutlet', { read: IgxOverlayOutletDirective, static: true })
     protected _outletDirective: IgxOverlayOutletDirective;
 
-    /**
-     * @hidden @internal
-     */
-    public get outletDirective() {
-        return this._outletDirective;
-    }
-
     /**
      * @hidden @internal
      */
@@ -1854,7 +1848,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public get parentRowOutletDirective() {
-        return this.outletDirective;
+        return this.outlet;
     }
 
     /**
@@ -2946,7 +2940,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 return;
             }
 
-            if (this.overlayService.getOverlayById(event.id)?.settings?.outlet === this.outletDirective &&
+            if (this.overlayService.getOverlayById(event.id)?.settings?.outlet === this.outlet &&
                 this.overlayIDs.indexOf(event.id) < 0) {
                 this.overlayIDs.push(event.id);
             }
@@ -3384,10 +3378,23 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * @hidden @internal
+     * Gets the outlet used to attach the grid's overlays to.
+     * @remark
+     * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
+     */
+    get outlet() {
+        return this.resolveOutlet();
+    }
+
+    protected resolveOutlet() {
+        return this._userOutletDirective ? this._userOutletDirective : this._outletDirective;
+    }
+
+    /**
+     * Sets the outlet used to attach the grid's overlays to.
      */
-    protected get outlet() {
-        return this.outletDirective;
+    set outlet(val: any) {
+        this._userOutletDirective = val;
     }
 
     /**
@@ -6509,7 +6516,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!this._advancedFilteringOverlayId) {
             this._advancedFilteringOverlaySettings.positionStrategy.settings.target =
                 (this as any).rootGrid ? (this as any).rootGrid.nativeElement : this.nativeElement;
-            this._advancedFilteringOverlaySettings.outlet = this.outletDirective;
+            this._advancedFilteringOverlaySettings.outlet = this.outlet;
 
             this._advancedFilteringOverlayId = this.overlayService.attach(
                 IgxAdvancedFilteringDialogComponent,
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
index c45c8ce7d76..ee85617e1f3 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html
@@ -23,7 +23,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
         [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
     </igx-date-picker>
     </ng-container>
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
index 4461b10d18d..7154ec48b62 100644
--- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
+++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
@@ -14,7 +14,7 @@
                 [column]="child"
                 [gridID]="child.grid.id"
                 [igxColumnMovingDrag]="child"
-                [ghostHost]="grid.outletDirective.nativeElement"
+                [ghostHost]="grid.outlet.nativeElement"
                 [attr.droppable]="true"
                 [igxColumnMovingDrop]="child">
             </igx-grid-header-group>
@@ -48,7 +48,7 @@
             'igx-grid__th--selected': selected,
             'igx-grid__th--active': activeGroup}"
         [igxColumnMovingDrag]="column"
-        [ghostHost]="grid.outletDirective.nativeElement"
+        [ghostHost]="grid.outlet.nativeElement"
         [attr.droppable]="true"
         [igxColumnMovingDrop]="column"
         (pointerdown)="activate()"
@@ -81,7 +81,7 @@
 
 <ng-container *ngIf="!column.columnGroup">
     <span *ngIf="grid.hasMovableColumns" class="igx-grid__th-drop-indicator-left"></span>
-    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outletDirective.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
+    <igx-grid-header [igxColumnMovingDrag]="column" [ghostHost]="grid.outlet.nativeElement" [attr.droppable]="true" (pointerdown)="activate()" [igxColumnMovingDrop]="column" [gridID]="column.grid.id" [column]="column"></igx-grid-header>
     <igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode == 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
     <span *ngIf="!column.columnGroup && column.resizable" class="igx-grid__th-resize-handle"
         [igxResizeHandle]="column"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
index 769cd8cfacb..5d669d16272 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
@@ -84,10 +84,19 @@ export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
     }
 
     /**
-     * @hidden
+     * Gets the outlet used to attach the grid's overlays to.
+     * @remark
+     * If set, returns the outlet defined outside the grid. Otherwise returns the grid's internal outlet directive.
+     */
+    get outlet() {
+        return this.rootGrid ? this.rootGrid.resolveOutlet() : this.resolveOutlet();
+    }
+
+    /**
+     * Sets the outlet used to attach the grid's overlays to.
      */
-    protected get outlet() {
-        return this.rootGrid ? this.rootGrid.outletDirective : this.outletDirective;
+    set outlet(val: any) {
+        this._userOutletDirective = val;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
index 4915177d82d..9120274e27a 100644
--- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -301,7 +301,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public exportClicked() {
         this._overlaySettings.positionStrategy.settings.target = this.exportButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.exportDropdown.toggle(this._overlaySettings);
     }
 
@@ -350,7 +350,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public toggleColumnHidingUI() {
         this._overlaySettings.positionStrategy.settings.target = this.columnHidingButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.columnHidingDropdown.toggle(this._overlaySettings);
     }
 
@@ -362,7 +362,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      */
     public toggleColumnPinningUI() {
         this._overlaySettings.positionStrategy.settings.target = this.columnPinningButton.nativeElement;
-        this._overlaySettings.outlet = this.grid.outletDirective;
+        this._overlaySettings.outlet = this.grid.outlet;
         this.columnPinningDropdown.toggle(this._overlaySettings);
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index 5b66eb7b820..4542eaec157 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -23,7 +23,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
         [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
     </igx-date-picker>
     </ng-container>
diff --git a/src/app/grid-column-selection/grid-column-selection.sample.ts b/src/app/grid-column-selection/grid-column-selection.sample.ts
index d95274b93a5..6aa2b7bdc6e 100644
--- a/src/app/grid-column-selection/grid-column-selection.sample.ts
+++ b/src/app/grid-column-selection/grid-column-selection.sample.ts
@@ -120,7 +120,7 @@ export class GridColumnSelectionSampleComponent implements OnInit {
 
     public toggleColumnSelection() {
         this._overlaySettings.positionStrategy.settings.target = this.columnSelectionButton.nativeElement;
-        this._overlaySettings.outlet = this.grid1.outletDirective;
+        this._overlaySettings.outlet = this.grid1.outlet;
         this.columnSelectionDropdown.toggle(this._overlaySettings);
     }
 

From bd21c4e13b91fef1817e637df56cc5150097ec79 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <hi@simeonoff.ninja>
Date: Mon, 27 Jul 2020 15:00:07 +0300
Subject: [PATCH 2/2] Revert "fix(grid): buttons style in ExcelStyleFiltering
 in IE11"

---
 .../styles/components/button-group/_button-group-theme.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
index 7e7dc9b2fe2..5470329f9d6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -195,7 +195,7 @@
         background: --var($theme, 'item-background');
         min-width: $group-item-min-width;
         display: flex;
-        flex: 1 0 auto;
+        flex: 1 0 0%;
         justify-content: center;
         align-items: center;
         text-decoration: none;