Merge branch 'PMiteva/combo_case_sensitive_filtering' of https://github.com/IgniteUI/igniteui-angular into PMiteva/combo_case_sensitive_filtering

Author: PlamenaMiteva

CHANGELOG.md

@@ -97,6 +97,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

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;

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -36,7 +36,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>

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;
 

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -184,7 +184,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

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -46,7 +46,7 @@
         tabindex="0"
         mode="dropdown"
         [value]="value"
-        [outlet]="filteringService.grid.outletDirective"
+        [outlet]="filteringService.grid.outlet"
         [locale]="filteringService.grid.locale"
         (onSelection)="onDateSelected($event)"
         (onClosed)="datePickerClose()">

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) {

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

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,

projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html

@@ -27,7 +27,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>