Merge branch 'master' into pbozhinov/fixes-chips-not-being-reordered-ivy

Author: ChronosSF

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/migrations/update-8_2_6/index.spec.ts

@@ -67,7 +67,9 @@ describe('Update 8.2.6', () => {
     it('should update igx-grid-paginator-theme', done => {
         appTree.create(
             '/testSrc/appPrefix/component/test.component.scss',
-            `$dark-grid-paginator: igx-grid-paginator-theme($color: black);
+            `@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component';
+            @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
+            $dark-grid-paginator: igx-grid-paginator-theme($color: black);
             @include igx-grid-paginator($dark-grid-paginator);
             .igx-grid-paginator__pager {
                 @include igx-button($dark-button);
@@ -77,7 +79,9 @@ describe('Update 8.2.6', () => {
         const tree = schematicRunner.runSchematic('migration-12', {}, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
         .toEqual(
-            `$dark-grid-paginator: igx-paginator-theme($color: black);
+            `@import '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
+            @import '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
+            $dark-grid-paginator: igx-paginator-theme($color: black);
             @include igx-paginator($dark-grid-paginator);
             .igx-grid-paginator__pager {
                 @include igx-button($dark-button);

projects/igniteui-angular/migrations/update-8_2_6/index.ts

@@ -29,11 +29,17 @@ export default function(): Rule {
         '$_square-shape-pagination'];
 
         let globalStyleExt: string;
+        const gridPaginatorComponentImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component';
+        const gridPaginatorThemeImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
+        const paginatorComponentImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
+        const paginatorThemeImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
         const config = getWorkspace(host);
         const projects = getProjects(config);
 
         context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
+        const update = new UpdateChanges(__dirname, host, context);
+
         if (config.schematics && config.schematics['@schematics/angular:component']) {
             // updated projects have global prefix rather than per-project:
             globalStyleExt = config.schematics['@schematics/angular:component'].styleext;
@@ -56,12 +62,19 @@ export default function(): Rule {
                             content = content.split(n).join(newThemes[i]);
                         }
                     });
+                    if (content.indexOf(gridPaginatorComponentImport) !== -1) {
+                        content = content.replace(gridPaginatorComponentImport, paginatorComponentImport);
+                        host.overwrite(path, content);
+                    }
+                    if (content.indexOf(gridPaginatorThemeImport) !== -1) {
+                        content = content.replace(gridPaginatorThemeImport, paginatorThemeImport);
+                        host.overwrite(path, content);
+                    }
                     host.overwrite(path, content);
                 }
             });
         }
 
-        const update = new UpdateChanges(__dirname, host, context);
         update.applyChanges();
     };
 }

projects/igniteui-angular/migrations/update-9_0_0/changes/theme-props.json

@@ -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/i18n/grid-resources.ts

@@ -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-component.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/_advanced-filtering-theme.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-component.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/core/styles/components/grid/_excel-filtering-theme.scss

@@ -173,7 +173,7 @@
     ), map-get($theme, variant));
 
     $switch-off-offset: map-get((
-        material: 1px,
+        material: -1px,
         fluent: $switch-thumb-width / 3
     ), map-get($theme, variant));
 
@@ -279,7 +279,7 @@
         }
 
         @include if-rtl() {
-            transform: translateX(-#{rem($switch-off-offset)});
+            transform: translateX(#{rem(-1 * $switch-off-offset)});
         }
 
         &:hover {

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -746,6 +746,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const diffs = [];
         let totalDiff = 0;
         const l = this._embeddedViews.length;
+        this._embeddedViews.filter(view => !view.destroyed).forEach(view => view.detectChanges());
         const rNodes = this._embeddedViews.map(view =>
             view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling);
         for (let i = 0; i < l; i++) {

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.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/common/grid.interface.ts

@@ -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>