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 {