Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into nrobakova/fix-issue-5763

Author: nrobakova

CHANGELOG.md

@@ -29,6 +29,7 @@ For more information about the theming please read our [documentation](https://w
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Advanced Filtering functionality is added. In the advanced filtering dialog, you could create groups of conditions across all grid columns. The advanced filtering button is shown in the grid's toolbar when `allowAdvancedFiltering` and `showToolbar` properties are set to `true`. You could also open/close the advanced filtering dialog using the `openAdvancedFilteringDialog` and `closeAdvancedFilteringDialog` methods.
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
     - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
     - introduced new properties `cellSelection` and `rowSelection` which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also `hideRowSelectors` property is added, which allows you to show and hide row selectors when row selection is enabled.

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

@@ -74,6 +74,21 @@ export interface IGridResourceStrings {
     igx_grid_excel_boolean_filter?: string;
     igx_grid_excel_custom_filter?: string;
     igx_grid_paginator_label?: string;
+    igx_grid_advanced_filter_title?: string;
+    igx_grid_advanced_filter_and_group?: string;
+    igx_grid_advanced_filter_or_group?: string;
+    igx_grid_advanced_filter_end_group?: string;
+    igx_grid_advanced_filter_create_and_group?: string;
+    igx_grid_advanced_filter_create_or_group?: string;
+    igx_grid_advanced_filter_and_label?: string;
+    igx_grid_advanced_filter_or_label?: string;
+    igx_grid_advanced_filter_add_condition?: string;
+    igx_grid_advanced_filter_ungroup?: string;
+    igx_grid_advanced_filter_delete?: string;
+    igx_grid_advanced_filter_delete_filters?: string;
+    igx_grid_advanced_filter_initial_text?: string;
+    igx_grid_advanced_filter_column_placeholder?: string;
+    igx_grid_advanced_filter_value_placeholder?: string;
 }
 
 export const GridResourceStringsEN: IGridResourceStrings = {
@@ -151,5 +166,20 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_date_filter: 'Date filter',
     igx_grid_excel_boolean_filter: 'Boolean filter',
     igx_grid_excel_custom_filter: 'Custom filter...',
-    igx_grid_paginator_label: 'Items per page'
+    igx_grid_paginator_label: 'Items per page',
+    igx_grid_advanced_filter_title: 'Advanced Filtering',
+    igx_grid_advanced_filter_and_group: '"And" Group',
+    igx_grid_advanced_filter_or_group: '"Or" Group',
+    igx_grid_advanced_filter_end_group: 'End Group',
+    igx_grid_advanced_filter_create_and_group: 'Create "And" Group',
+    igx_grid_advanced_filter_create_or_group: 'Create "Or" Group',
+    igx_grid_advanced_filter_and_label: 'and',
+    igx_grid_advanced_filter_or_label: 'or',
+    igx_grid_advanced_filter_add_condition: 'Condition',
+    igx_grid_advanced_filter_ungroup: 'Ungroup',
+    igx_grid_advanced_filter_delete: 'Delete',
+    igx_grid_advanced_filter_delete_filters: 'Delete filters',
+    igx_grid_advanced_filter_initial_text: 'Start with creating a group of conditions linked with "And" or "Or"',
+    igx_grid_advanced_filter_column_placeholder: 'Select column',
+    igx_grid_advanced_filter_value_placeholder: 'Value'
 };

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

@@ -23,6 +23,10 @@
         @extend %igx-grid-toolbar__actions !optional;
     }
 
+    @include e(adv-filter, $m: 'filtered') {
+        @extend %igx-grid-toolbar__adv-filter--filtered !optional;
+    }
+
     @include e(dropdown){
         @extend %igx-grid-toolbar__dropdown !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -303,6 +303,10 @@
         }
     }
 
+    %igx-grid-toolbar__adv-filter--filtered {
+        color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
+    }
+
     %igx-grid-toolbar__dropdown {
         position: relative;
 

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

@@ -0,0 +1,148 @@
+////
+/// @access private
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@mixin _advanced-filtering-partial {
+    @include b(igx-advanced-filter) {
+        @include _advanced-filtering-legend();
+        @include _advanced-filtering-tree();
+        @include _advanced-filtering-con-menu();
+        @include _advanced-filtering-empty();
+
+        @extend %advanced-filter !optional;
+
+        @include e(header) {
+            @extend %advanced-filter__header !optional;
+        }
+
+        @include e(main) {
+            @extend %advanced-filter__main !optional;
+        }
+
+        @include e(outlet) {
+            @extend %advanced-filter__outlet !optional;
+        }
+
+        @include m('cosy') {
+            @extend %advanced-filter--cosy !optional;
+        }
+
+        @include m('compact') {
+            @extend %advanced-filter--compact !optional;
+        }
+    }
+}
+
+@mixin _advanced-filtering-legend {
+    @include b(igx-filter-legend) {
+        @extend %filter-legend !optional;
+
+        @include e(item) {
+            @extend %filter-legend__item !optional;
+        }
+
+        @include e(item, $m: 'and') {
+            @extend %filter-legend__item !optional;
+            @extend %filter-legend__item--and !optional;
+        }
+
+        @include e(item, $m: 'or') {
+            @extend %filter-legend__item !optional;
+            @extend %filter-legend__item--or !optional;
+        }
+    }
+}
+
+@mixin _advanced-filtering-tree {
+    @include b(igx-filter-tree) {
+        @extend %filter-tree !optional;
+
+        @include e(line) {
+            @extend %filter-tree__line !optional;
+        }
+
+        @include e(line, $m: 'and') {
+            @extend %filter-tree__line--and !optional;
+        }
+
+        @include e(line, $m: 'or') {
+            @extend %filter-tree__line--or !optional;
+        }
+
+        @include e(line, $mods: ('selected', 'and')) {
+            @extend %filter-tree__line--and-selected !optional;
+        }
+
+        @include e(line, $mods: ('selected', 'or')) {
+            @extend %filter-tree__line--or-selected !optional;
+        }
+
+        @include e(expression) {
+            @extend %filter-tree__expression !optional;
+        }
+
+        @include e(expression-item) {
+            @extend %filter-tree__expression-item !optional;
+        }
+
+        @include e(expression-column) {
+            @extend %filter-tree__expression-column !optional;
+        }
+
+        @include e(expression-actions) {
+            @extend %filter-tree__expression-actions !optional;
+        }
+
+        @include e(expression-condition) {
+            @extend %filter-tree__expression-condition !optional;
+        }
+
+        @include e(buttons) {
+            @extend %filter-tree__buttons !optional;
+        }
+
+        @include e(inputs) {
+            @extend %filter-tree__inputs !optional;
+        }
+
+        @include e(inputs-actions) {
+            @extend %filter-tree__inputs-actions !optional;
+        }
+    }
+}
+
+@mixin _advanced-filtering-con-menu {
+    @include b(igx-filter-contextual-menu) {
+        @extend %filter-con-menu !optional;
+
+        @include e(close-btn) {
+            @extend %filter-con-menu__close-btn !optional;
+        }
+
+        @include e(delete-btn) {
+            @extend %filter-con-menu__delete-btn !optional;
+        }
+
+        @include m('cosy') {
+            @extend %filter-con-menu--cosy !optional;
+        }
+
+        @include m('compact') {
+            @extend %filter-con-menu--compact !optional;
+        }
+    }
+}
+
+@mixin _advanced-filtering-empty {
+    @include b(igx-filter-empty) {
+        @extend %filter-empty !optional;
+
+        @include e(title) {
+            @extend %filter-empty__title !optional;
+        }
+    }
+}