Merge branch 'master' into SKrastev/fix-6061-master

Author: kdinev

CHANGELOG.md

@@ -24,6 +24,8 @@ All notable changes for each version of this project will be documented in this
     - `NoopFilteringStrategy` is added, which can be used to disable the default filtering of the grid by assigning its instance to the grid's `filterStrategy` input. (Useful for remote filtering.)
     - `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
     - `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
+    - `advancedFilteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the advanced filtering expressions has occurred (prior to performing the actual filtering).
+- `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
 - `IgxOverlayService`:
     - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
 - `IgxToggleDirective`:

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -66,6 +66,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_select_all?: string;
     igx_grid_excel_blanks?: string;
     igx_grid_excel_hide?: string;
+    igx_grid_excel_show?: string;
     igx_grid_excel_pin?: string;
     igx_grid_excel_unpin?: string;
     igx_grid_excel_text_filter?: string;
@@ -158,6 +159,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_select_all: 'Select All',
     igx_grid_excel_blanks: '(Blanks)',
     igx_grid_excel_hide: 'Hide column',
+    igx_grid_excel_show: 'Show column',
     igx_grid_excel_pin: 'Pin column',
     igx_grid_excel_unpin: 'Unpin column',
     igx_grid_excel_text_filter: 'Text filter',

projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-component.scss

@@ -34,6 +34,10 @@
         @include m('compact') {
             @extend %advanced-filter--compact !optional;
         }
+
+        @include m('inline') {
+            @extend %advanced-filter--inline !optional;
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_advanced-filtering-theme.scss

@@ -407,6 +407,23 @@
         }
     }
 
+    %advanced-filter--inline {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        max-width: 100%;
+        height: inherit;
+        max-height: inherit;
+        min-width: 480px;
+        box-shadow: none;
+
+        %advanced-filter__main {
+            min-height: initial;
+            max-height: initial;
+            flex-grow: 1;
+        }
+    }
+
     %filter-con-menu--cosy {
         > [igxButton] + [igxButton],
         igx-buttongroup + [igxButton],

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -131,5 +131,9 @@
         @include e(add-filter) {
             @extend %grid-excel-menu__add-filter !optional;
         }
+
+        @include m(inline) {
+            @extend %grid-excel-filter--inline !optional;
+        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -18,6 +18,32 @@
         display: block;
     }
 
+    %grid-excel-filter--inline {
+        width: 100%;
+        flex-grow: 1;
+        overflow: auto;
+
+        %grid-excel-menu {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            box-shadow: none;
+
+            %grid-excel-main {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                overflow: hidden;
+            }
+
+            %grid-excel-main igx-list {
+                flex-grow: 1;
+                overflow: hidden;
+            }
+        }
+    }
+
     %igx-excel-filter__loading {
         display: flex;
         justify-content: center;

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -1,15 +1,22 @@
 import { FilterMode } from './enums';
+import { DisplayDensity } from '../../core/displayDensity';
+import { EventEmitter } from '@angular/core';
+import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { IGridResourceStrings } from '../../core/i18n/grid-resources';
+import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
 
 export interface IGridDataBindable {
     data: any[];
     filteredData: any[];
 }
 
 /**
- * @hidden
- * @internal
+ * An interface describing a Grid type
  */
 export interface GridType extends IGridDataBindable {
+    displayDensity: DisplayDensity | string;
+    locale: string;
+    resourceStrings: IGridResourceStrings;
     nativeElement: HTMLElement;
     rowEditable: boolean;
     rootSummariesEnabled: boolean;
@@ -22,6 +29,7 @@ export interface GridType extends IGridDataBindable {
     selectionService: any;
     navigation: any;
     filteringService: any;
+    outletDirective: any;
 
     calcHeight: number;
 
@@ -31,6 +39,7 @@ export interface GridType extends IGridDataBindable {
     dataRowList: any;
     rowList: any;
     columnList: any;
+    columns: any;
     unpinnedColumns: any;
     pinnedColumns: any;
     summariesRowList: any;
@@ -43,5 +52,14 @@ export interface GridType extends IGridDataBindable {
     firstEditableColumnIndex: number;
     lastEditableColumnIndex: number;
 
+    sortingExpressions: ISortingExpression[];
+    sortingExpressionsChange: EventEmitter<ISortingExpression[]>;
+    advancedFilteringExpressionsTree: IFilteringExpressionsTree;
+    advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
+
     endEdit(commit: boolean, event?: Event): void;
+    getColumnByName(name: string): any;
+    sort(expression: ISortingExpression | Array<ISortingExpression>): void;
+    clearSort(name?: string): void;
+    isColumnGrouped(fieldName: string): boolean;
 }

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

@@ -1,4 +1,5 @@
 <article
+    *ngIf="grid"
     class="igx-advanced-filter"
     igxDrag
     [ghost]="false"
@@ -8,7 +9,8 @@
     (keydown)="onKeyDown($event)"
     [ngClass]="{
         'igx-advanced-filter--cosy': grid.displayDensity === 'cosy',
-        'igx-advanced-filter--compact': grid.displayDensity === 'compact'
+        'igx-advanced-filter--compact': grid.displayDensity === 'compact',
+        'igx-advanced-filter--inline': inline
     }"
 >
     <header class="igx-advanced-filter__header" igxDragHandle>
@@ -266,6 +268,7 @@ <h6 class="igx-filter-empty__title">
         <div igxToggle
             class="igx-filter-contextual-menu"
             (keydown)="onKeyDown($event)"
+            (onClosed)="contextMenuClosed()"
             [ngClass]="{
                 'igx-filter-contextual-menu--cosy': displayDensity === 'cosy',
                 'igx-filter-contextual-menu--compact': displayDensity === 'compact'
@@ -336,7 +339,7 @@ <h6 class="igx-filter-empty__title">
         <button igxButton [displayDensity]="displayDensity" (click)="onClearButtonClick()">{{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}</button>
 
         <div>
-            <button igxButton [displayDensity]="displayDensity" (click)="closeDialog()">{{ grid.resourceStrings.igx_grid_excel_cancel }}</button>
+            <button igxButton [displayDensity]="displayDensity" (click)="cancelChanges()">{{ grid.resourceStrings.igx_grid_excel_cancel }}</button>
             <button igxButton="raised" [displayDensity]="displayDensity" (click)="onApplyButtonClick()">
                 {{ grid.resourceStrings.igx_grid_excel_apply }}
             </button>