Merge branch 'master' into nalipiev/autocomplete-horizontal

CHANGELOG.md

@@ -47,6 +47,9 @@ All notable changes for each version of this project will be documented in this
         - The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related group row and when it points down clicking on it would expand the group row.
         - The collapse/expand all icons have also been updated to reflect the new group row icons better.
         - Group rows now can be expanded/collapsed using Alt + Arrow Up/Down to reflect the new icons.
+    - `filterMode` input added, which determines the filtering ui of the grid. The default value is `quickFilter`. Other possible value is `excelStyle`, which mimics the filtering in Excel with added functionality for column moving, sorting, hiding and pinning.
+    - `IgxColumnComponent` now has `disablePinning` property, which determines wether the column can be pinned from
+    the toolbar and whether the column pin will be available in the excel style filter menu. The `disableHiding` input will be used to show/hide the column hiding functionality in the menu.
 - `igxTreeGrid`
     - The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related tree grid level and when it points down clicking on it would expand the tree grid level.
     - Expanding/collapsing tree levels can now be performed also by using Alt + Arrow Up/Down to reflect the new icons.

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -341,7 +341,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
         super.activeViewDecade();
 
         requestAnimationFrame(() => {
-            this.dacadeView.el.nativeElement.focus();
+            if (this.dacadeView) {
+                this.dacadeView.el.nativeElement.focus();
+            }
         });
     }
 

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -203,7 +203,8 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
                 this.subscribeNext(vContainer, () => {
                     // children = all items in the DD (including addItemButton)
                     // length - 2 instead of -1, because we do not want to focus the last loaded item (in DOM, but not visible)
-                    super.navigateItem(children[children.length - 2 - extraScroll].itemIndex); // Focus last item (excluding Add Button)
+                    // Focus last item (excluding Add Button)
+                    super.navigateItem(!addedIndex ? children[children.length - 1 - extraScroll].itemIndex : this.items.length - 2);
                 });
                 vContainer.scrollTo(targetDataIndex); // Perform virtual scroll
             }

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -39,6 +39,7 @@ import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from
 import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 import { IgxComboAddItemComponent } from './combo-add-item.component';
 import { IgxComboAPIService } from './combo.api';
+import { take } from 'rxjs/operators';
 
 /** Custom strategy to provide the combo with callback on initial positioning */
 class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
@@ -1069,12 +1070,27 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden
      */
     public handleInputChange(event?: string) {
+        let cdrFlag = false;
+        const vContainer = this.dropdown.verticalScrollContainer;
         if (event !== undefined) {
-            this.dropdown.verticalScrollContainer.scrollTo(0);
+            // Do not scroll if not scrollable
+            if (vContainer.isScrollable()) {
+                vContainer.scrollTo(0);
+            } else {
+                cdrFlag = true;
+            }
             this.onSearchInput.emit(event);
         }
         if (this.filterable) {
             this.filter();
+            // If there was no scroll before filtering, check if there is after and detect changes
+            if (cdrFlag) {
+                vContainer.onChunkLoad.pipe(take(1)).subscribe(() => {
+                    if (vContainer.isScrollable()) {
+                        this.cdr.detectChanges();
+                    }
+                });
+            }
         } else {
             this.checkMatch();
         }
@@ -1342,7 +1358,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * @hidden
      */
-    public registerOnTouched(fn: any): void {}
+    public registerOnTouched(fn: any): void { }
 
     /**
      * @hidden

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

@@ -38,13 +38,36 @@ export interface IGridResourceStrings {
     igx_grid_filter_true?: string;
     igx_grid_filter_false?: string;
     igx_grid_filter_all?: string;
+    igx_grid_filter_condition_placeholder?: string;
     igx_grid_summary_count?: string;
     igx_grid_summary_min?: string;
     igx_grid_summary_max?: string;
     igx_grid_summary_sum?: string;
     igx_grid_summary_average?: string;
     igx_grid_summary_earliest?: string;
     igx_grid_summary_latest?: string;
+    igx_grid_excel_filter_moving_left?: string;
+    igx_grid_excel_filter_moving_right?: string;
+    igx_grid_excel_filter_moving_header?: string;
+    igx_grid_excel_filter_sorting_asc?: string;
+    igx_grid_excel_filter_sorting_desc?: string;
+    igx_grid_excel_filter_sorting_header?: string;
+    igx_grid_excel_custom_dialog_add?: string;
+    igx_grid_excel_custom_dialog_clear?: string;
+    igx_grid_excel_custom_dialog_header?: string;
+    igx_grid_excel_cancel?: string;
+    igx_grid_excel_apply?: string;
+    igx_grid_excel_search_placeholder?: string;
+    igx_grid_excel_select_all?: string;
+    igx_grid_excel_blanks?: string;
+    igx_grid_excel_hide?: string;
+    igx_grid_excel_pin?: string;
+    igx_grid_excel_unpin?: string;
+    igx_grid_excel_text_filter?: string;
+    igx_grid_excel_number_filter?: string;
+    igx_grid_excel_date_filter?: string;
+    igx_grid_excel_boolean_filter?: string;
+    igx_grid_excel_custom_filter?: string;
 }
 
 export const GridResourceStringsEN: IGridResourceStrings = {
@@ -87,11 +110,34 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_filter_true: 'True',
     igx_grid_filter_false: 'False',
     igx_grid_filter_all: 'All',
+    igx_grid_filter_condition_placeholder: 'Select filter',
     igx_grid_summary_count: 'Count',
     igx_grid_summary_min: 'Min',
     igx_grid_summary_max: 'Max',
     igx_grid_summary_sum: 'Sum',
     igx_grid_summary_average: 'Avg',
     igx_grid_summary_earliest: 'Earliest',
     igx_grid_summary_latest: 'Latest',
+    igx_grid_excel_filter_moving_left: 'left',
+    igx_grid_excel_filter_moving_right: 'right',
+    igx_grid_excel_filter_moving_header: 'column moving',
+    igx_grid_excel_filter_sorting_asc: 'ascending',
+    igx_grid_excel_filter_sorting_desc: 'descending',
+    igx_grid_excel_filter_sorting_header: 'sorting',
+    igx_grid_excel_custom_dialog_add: 'add filter',
+    igx_grid_excel_custom_dialog_clear: 'clear filter',
+    igx_grid_excel_custom_dialog_header: 'Custom auto-filter on column: ',
+    igx_grid_excel_cancel: 'cancel',
+    igx_grid_excel_apply: 'apply',
+    igx_grid_excel_search_placeholder: 'Search',
+    igx_grid_excel_select_all: 'Select All',
+    igx_grid_excel_blanks: '(Blanks)',
+    igx_grid_excel_hide: 'Hide column',
+    igx_grid_excel_pin: 'Pin column',
+    igx_grid_excel_unpin: 'Unpin column',
+    igx_grid_excel_text_filter: 'Text filter',
+    igx_grid_excel_number_filter: 'Number filter',
+    igx_grid_excel_date_filter: 'Date filter',
+    igx_grid_excel_boolean_filter: 'Boolean filter',
+    igx_grid_excel_custom_filter: 'Custom filter...'
 };

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

@@ -0,0 +1,97 @@
+////
+/// @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 _excel-filtering-partial {
+    @include b(igx-excel-filter) {
+        @extend %grid-excel-filter !optional;
+
+        @include e(menu) {
+            @extend %grid-excel-menu !optional;
+        }
+
+        @include e(icon) {
+            @extend %grid-excel-icon !optional;
+        }
+
+        @include e(icon, $m: 'filtered') {
+            @extend %grid-excel-icon !optional;
+            @extend %grid-excel-icon--filtered !optional;
+        }
+
+        @include e(menu-header) {
+            @extend %grid-excel-menu__header !optional;
+        }
+
+        @include e(menu-main) {
+            @extend %grid-excel-main !optional;
+        }
+
+        @include e(menu-footer) {
+            @extend %grid-excel-menu__footer !optional;
+        }
+
+        @include e(sort) {
+            @extend %grid-excel-sort !optional;
+        }
+
+        @include e(move) {
+            @extend %grid-excel-move !optional;
+        }
+
+        @include e(move-buttons) {
+            @extend %grid-excel-move__buttons !optional;
+        }
+
+        @include e(actions) {
+            @extend %grid-excel-actions !optional;
+        }
+
+        @include e(actions-pin) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(actions-unpin) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(actions-hide) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(actions-filter) {
+            @extend %grid-excel-actions__action !optional;
+        }
+
+        @include e(secondary) {
+            @extend %grid-excel-menu__secondary !optional;
+        }
+
+        @include e(secondary-header) {
+            @extend %grid-excel-menu__header !optional;
+            @extend %grid-excel-menu__secondary-header !optional;
+        }
+
+        @include e(secondary-main) {
+            @extend %grid-excel-menu__secondary-main !optional;
+        }
+
+        @include e(secondary-footer) {
+            @extend %grid-excel-menu__footer !optional;
+            @extend %grid-excel-menu__secondary-footer !optional;
+        }
+
+        @include e(condition) {
+            @extend %grid-excel-menu__condition !optional;
+        }
+
+        @include e(add-filter) {
+            @extend %grid-excel-menu__add-filter !optional;
+        }
+    }
+}