Merge pull request #7726 from IgniteUI/dmdimitrov/esf-templates

feat(esf): templating improvements

Author: DiyanDimitrov

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** - The `selectedRows` method is now an `@Input` property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.
+    - **Breaking Change** - Removed `IgxExcelStyleSortingTemplateDirective`, `IgxExcelStyleHidingTemplateDirective`, `IgxExcelStyleMovingTemplateDirective`, `IgxExcelStylePinningTemplateDirective` and `IgxExcelStyleSelectingTemplateDirective` directives for re-templating the Excel style filter menu. Added two new directives for re-templating the column operations and filter operations areas - `IgxExcelStyleColumnOperationsTemplateDirective` and `IgxExcelStyleFilterOperationsTemplateDirective`. Exposed all internal components of the Excel style filter menu in order to be used inside the templates.
     - **Breaking Change** - `IgxColumnHiding` and `IgxColumnPinning` components have been deprecated in favor of a component combining the their functionality - `IgxColumnActions` which is used with either of the new `IgxColumnPinning` and `IgxColumnHiding` directives that specify the action to be triggered through the UI.
 - `igxGrid`
     - **Behavioral Change** - For numeric columns, the onCellEdit arguments' newValue will now contain the numeric value that will be committed instead of the string input.

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

@@ -17,7 +17,7 @@
 
     %grid-excel-filter {
         display: block;
-        width: 100%;
+        width: rem(320px);
         height: 100%;
         flex-grow: 1;
         box-shadow: igx-elevation($elevations, 12);
@@ -27,10 +27,7 @@
 
     %grid-excel-filter--inline {
         box-shadow: none;
-
-        %grid-excel-menu {
-            width: 100%;
-        }
+        width: 100%;
     }
 
     %igx-excel-filter__loading {
@@ -127,8 +124,7 @@
 
     %grid-excel-sort {
         display: block;
-        padding-top: rem(8px);
-        padding-bottom: rem(8px);
+        padding: rem(8px) rem(16px);
 
         header {
             color: igx-color($palette, 'grays', 700);
@@ -175,7 +171,8 @@
     }
 
     %grid-excel-move {
-        margin-bottom: rem(8px);
+        display: block;
+        padding: rem(8px) rem(16px);
 
         header {
             color: igx-color($palette, 'grays', 700);
@@ -223,7 +220,6 @@
         align-items: center;
         justify-content: space-between;
         padding: rem(8px) rem(16px);
-        margin: 0 -#{rem(16px)};
         cursor: pointer;
         color: igx-color($palette, 'grays', 700);
         outline-style: none;
@@ -269,8 +265,11 @@
         }
 
         %grid-excel-sort {
-            padding-top: rem(8px);
-            padding-bottom: rem(8px);
+            padding: rem(8px);
+        }
+
+        %grid-excel-move {
+            padding: rem(8px);
         }
 
         %grid-excel-actions {
@@ -279,7 +278,6 @@
 
         %grid-excel-actions__action {
             padding: rem(8px);
-            margin: 0 -#{rem(8px)};
         }
 
         %grid-excel-main {
@@ -302,8 +300,7 @@
         }
 
         %grid-excel-sort {
-            padding-top: rem(4px);
-            padding-bottom: rem(4px);
+            padding: rem(4px);
 
             @extend %grid-excel-action--compact;
 
@@ -319,6 +316,7 @@
         %grid-excel-move {
             @extend %grid-excel-action--compact;
             margin-bottom: 0;
+            padding: rem(4px);
         }
 
         %grid-excel-actions {
@@ -327,7 +325,6 @@
 
         %grid-excel-actions__action {
             padding: rem(4px);
-            margin: 0 -#{rem(4px)};
         }
 
         %grid-excel-main {
@@ -440,6 +437,14 @@
             margin-#{$right}: rem(8px);
         }
     }
+
+    igx-excel-style-filter-operations,
+    [igxExcelStyleFilterOperations] {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        overflow: hidden;
+    }
 }
 
 /// Adds typography styles for the excel-style-filtering component.

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1232,6 +1232,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         return end;
     }
 
+    /**
+     * @hidden
+     * Reset scroll position.
+     * Needed in case scrollbar is hidden/detached but we still need to reset it.
+     */
+    public resetScrollPosition() {
+        this.scrollPosition = 0;
+        this.scrollComponent.scrollAmount = 0;
+        this.state.startIndex = 0;
+    }
+
     protected _recalcScrollBarSize() {
         const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
@@ -1241,20 +1252,14 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
             this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
-                this.scrollPosition = 0;
-                // Need to reset the scrollAmount value here, because horizontalScrollBar is hidden, therefore
-                // onScroll event handler for VirtualHelperBaseDirective will not be called
-                this.scrollComponent.scrollAmount = 0;
+               this.resetScrollPosition();
             }
         }
         if (this.igxForScrollOrientation === 'vertical') {
             this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
             this.scrollComponent.size = this._calcHeight();
             if ( this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) {
-                this.scrollPosition = 0;
-                // Need to reset the scrollAmount value here, because verticalScrollBar is hidden, therefore
-                // onScroll event handler for VirtualHelperBaseDirective will not be called
-                this.scrollComponent.scrollAmount = 0;
+                this.resetScrollPosition();
             }
         }
         if (scrollable !== this.isScrollable()) {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html

@@ -0,0 +1,8 @@
+<div *ngIf="esf.column"
+    tabindex="0"
+    [ngClass]="clearFilterClass()"
+    (keydown)="onClearFilterKeyDown($event)"
+    (click)="clearFilter()">
+    <span>{{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }}</span>
+    <igx-icon>clear</igx-icon>
+</div>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { KEYS } from '../../../core/utils';
+import { IgxGridExcelStyleFilteringComponent } from './grid.excel-style-filtering.component';
+
+/**
+ * A component used for presenting Excel style clear filters UI.
+ */
+@Component({
+    preserveWhitespaces: false,
+    selector: 'igx-excel-style-clear-filters',
+    templateUrl: './excel-style-clear-filters.component.html'
+})
+export class IgxExcelStyleClearFiltersComponent {
+    constructor(public esf: IgxGridExcelStyleFilteringComponent) { }
+
+    /**
+     * @hidden @internal
+     */
+    public clearFilterClass() {
+        if (this.esf.column.filteringExpressionsTree) {
+            return 'igx-excel-filter__actions-clear';
+        }
+
+        return 'igx-excel-filter__actions-clear--disabled';
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public clearFilter() {
+        this.esf.grid.filteringService.clearFilter(this.esf.column.field);
+        this.selectAllFilterItems();
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onClearFilterKeyDown(eventArgs) {
+        if (eventArgs.key === KEYS.ENTER) {
+            this.clearFilter();
+        }
+    }
+
+    private selectAllFilterItems() {
+        this.esf.listData.forEach(filterListItem => {
+            filterListItem.isSelected = true;
+            filterListItem.indeterminate = false;
+        });
+        this.esf.detectChanges();
+    }
+}

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-column-moving.component.html

@@ -0,0 +1,39 @@
+<ng-container *ngIf="esf.column">
+    <div tabindex="0"
+        class="igx-excel-filter__actions-filter"
+        (keydown)="onTextFilterKeyDown($event)"
+        (click)="onTextFilterClick($event)"
+        [igxDropDownItemNavigation]="subMenu">
+        <span>{{ subMenuText }}</span>
+        <igx-icon>keyboard_arrow_right</igx-icon>
+    </div>
+
+    <igx-drop-down
+        #subMenu
+        [maxHeight]="'397px'"
+        [displayDensity]="esf.grid.displayDensity"
+        (onSelection)="onSubMenuSelection($event)"
+        (onClosed)="onSubMenuClosed()">
+        <div>
+            <igx-drop-down-item
+            *ngFor="let condition of conditions"
+            [value]="condition">
+                <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+                <span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
+            </igx-drop-down-item>
+            <igx-drop-down-item *ngIf="showCustomFilterItem()">
+                <igx-icon>filter_list</igx-icon>
+                <span style="margin-left: 16px">{{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
+            </igx-drop-down-item>
+        </div>
+    </igx-drop-down>
+
+    <igx-excel-style-custom-dialog
+        #customDialog
+        [column]="esf.column"
+        [filteringService]="esf.grid.filteringService"
+        [overlayComponentId]="esf.overlayComponentId"
+        [overlayService]="esf.overlayService"
+        [displayDensity]="esf.grid.displayDensity">
+    </igx-excel-style-custom-dialog>
+</ng-container>