Merge branch 'dmdimitrov/esf-templates' of https://github.com/IgniteUI/igniteui-angular.git

Author: MKirova

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - The `selectedRows` method is now an `@Input` property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.
+    - **Breaking Change** - Removed `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective` and `IgxExcelStyleSelectingTemplateDirective` directives for re-templating the Excel style filter menu. Added two new directives for re-templating the column operations and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. Exposed all internal components of the Excel style filter menu in order to be used inside the templates.
 - `igxGrid`
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
     - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default. 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -1,24 +1,24 @@
 <ng-template #defaultExcelColumnOperations>
     <igx-excel-style-header
-        [showHiding]="grid.displayDensity !== 'comfortable' && !column.disableHiding"
-        [showPinning]="grid.displayDensity !== 'comfortable' && !column.disablePinning"
-        [showSelecting]="grid.displayDensity !== 'comfortable' && columnSelectable()"
+        [showHiding]="displayDensity !== 'comfortable' && !column?.disableHiding"
+        [showPinning]="displayDensity !== 'comfortable' && !column?.disablePinning"
+        [showSelecting]="displayDensity !== 'comfortable' && columnSelectable()"
     >
     </igx-excel-style-header>
 
-    <igx-excel-style-sorting *ngIf="column.sortable">
+    <igx-excel-style-sorting *ngIf="column?.sortable">
     </igx-excel-style-sorting>
 
-    <igx-excel-style-moving *ngIf="column.movable">
+    <igx-excel-style-moving *ngIf="column?.movable">
     </igx-excel-style-moving>
 
-    <igx-excel-style-pinning *ngIf="!column.disablePinning && grid.displayDensity==='comfortable'">
+    <igx-excel-style-pinning *ngIf="!column?.disablePinning && displayDensity==='comfortable'">
     </igx-excel-style-pinning>
 
-    <igx-excel-style-hiding *ngIf="!column.disableHiding && grid.displayDensity==='comfortable'">
+    <igx-excel-style-hiding *ngIf="!column?.disableHiding && displayDensity==='comfortable'">
     </igx-excel-style-hiding>
 
-    <igx-excel-style-selecting *ngIf="columnSelectable() && grid.displayDensity==='comfortable'">
+    <igx-excel-style-selecting *ngIf="columnSelectable() && displayDensity==='comfortable'">
     </igx-excel-style-selecting>
 </ng-template>
 
@@ -29,16 +29,15 @@
     <igx-excel-style-conditional-filter>
     </igx-excel-style-conditional-filter>
 
-    <igx-excel-style-search #excelStyleSearch>
+    <igx-excel-style-search>
     </igx-excel-style-search>
 </ng-template>
 
 <article #mainDropdown
-    *ngIf="column"
     class="igx-excel-filter__menu"
     [ngClass]="{
-        'igx-excel-filter__menu--cosy': grid.displayDensity === 'cosy',
-        'igx-excel-filter__menu--compact': grid.displayDensity === 'compact'
+        'igx-excel-filter__menu--cosy': displayDensity === 'cosy',
+        'igx-excel-filter__menu--compact': displayDensity === 'compact'
     }"
     [id]="overlayComponentId"
     (keydown)="onKeyDown($event)"

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -196,7 +196,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
 
         if (!this.inline) {
             let minHeight = 645;
-            switch (this.grid.displayDensity) {
+            switch (this.displayDensity) {
                 case DisplayDensity.cosy: minHeight = 465; break;
                 case DisplayDensity.compact: minHeight = 330; break;
                 default: break;
@@ -392,7 +392,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
      * @hidden @internal
      */
     public columnSelectable() {
-        return this.grid.columnSelection !== GridSelectionMode.none && this.column.selectable;
+        return this.grid?.columnSelection !== GridSelectionMode.none && this.column?.selectable;
     }
 
     /**