Merge branch 'master' into dmdimitrov/issue4158-master

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -93,7 +93,6 @@
         align-items: center;
         background: $splitter-color;
         border: 1px solid $splitter-color;
-        cursor: row-resize;
         z-index: 99;
         opacity: .68;
         transition: opacity .15s $ease-out-quad !important;
@@ -123,7 +122,6 @@
     %igx-splitter-bar--vertical {
         flex-direction: column;
         height: 100%;
-        cursor: col-resize;
 
         &::before {
             @extend %handle-area--vertical;

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

@@ -30,13 +30,12 @@
             [indeterminate]="item.indeterminate"
             [disableTransitions]="true"
             (change)="onCheckboxChange($event)">
-                {{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
-                    column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
+                {{ item.label }}
             </igx-checkbox>
         </igx-list-item>
     </div>
 
-    <ng-template igxDataLoading>        
+    <ng-template igxDataLoading>
         <div class="igx-excel-filter__loading">
             <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
             </ng-container>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts

@@ -20,8 +20,9 @@ export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
 
         searchText = searchText.toLowerCase();
         const result = items.filter((it, i) => (i === 0 && it.isSpecial) ||
-            (it.value !== null && it.value !== undefined) &&
-            it.value.toString().toLowerCase().indexOf(searchText) > -1);
+            (it.label !== null && it.label !== undefined) &&
+            !it.isBlanks &&
+            it.label.toString().toLowerCase().indexOf(searchText) > -1);
 
         // If 'result' contains the 'Select All' item and at least one more - we use it, otherwise we use an empty array.
         return result.length > 1 ? result : [];

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

@@ -41,6 +41,7 @@ import { IgxColumnComponent } from '../../columns/column.component';
 import { IgxGridBaseDirective } from '../../grid-base.directive';
 import { DisplayDensity } from '../../../core/density';
 import { GridSelectionMode } from '../../common/enums';
+import { IgxDecimalPipeComponent, IgxDatePipeComponent } from '../../common/pipes';
 
 /**
  * @hidden
@@ -51,6 +52,7 @@ export class FilterListItem {
     public isSelected: boolean;
     public indeterminate: boolean;
     public isSpecial = false;
+    public isBlanks = false;
 }
 
 @Directive({
@@ -712,6 +714,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     private addItems(shouldUpdateSelection: boolean) {
         this.selectAllSelected = true;
         this.selectAllIndeterminate = false;
+
+        const numberPipe = new IgxDecimalPipeComponent(this.column.grid.locale);
+        const datePipe = new IgxDatePipeComponent(this.column.grid.locale);
+
         this.uniqueValues.forEach(element => {
             if (element !== undefined && element !== null && element !== '') {
                 const filterListItem = new FilterListItem();
@@ -731,12 +737,29 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                     filterListItem.isSelected = true;
                 }
                 if (this.column.dataType === DataType.Date) {
-                    filterListItem.value = new Date(element);
-                    filterListItem.label = new Date(element);
+                    const date = new Date(element);
+
+                    filterListItem.value = date;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(date) :
+                        datePipe.transform(date, this.column.grid.locale);
+
+                } else if (this.column.dataType === DataType.Number) {
+                    filterListItem.value = element;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(element) :
+                        numberPipe.transform(element, this.column.grid.locale);
+
                 } else {
                     filterListItem.value = element;
-                    filterListItem.label = element;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(element) :
+                        element;
                 }
+
                 filterListItem.indeterminate = false;
                 this.listData.push(filterListItem);
             } else {
@@ -772,6 +795,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         blanks.label = this.grid.resourceStrings.igx_grid_excel_blanks;
         blanks.indeterminate = false;
         blanks.isSpecial = true;
+        blanks.isBlanks = true;
         this.listData.unshift(blanks);
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4264,6 +4264,34 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
             expect(excelMenu).toBeNull();
         }));
+
+        it('Should filter date by input string', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
+
+            const todayDateFull = SampleTestData.today;
+            const todayDate = todayDateFull.getDate().toString();
+            const dayOfWeek = todayDateFull.toString().substring(0, 3);
+
+            UIInteractions.sendInputElementValue(inputNativeElement, todayDate, fix);
+            tick(100);
+            fix.detectChanges();
+
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            expect(listItems.length).toBe(4, 'incorrect rendered list items count');
+
+            UIInteractions.sendInputElementValue(inputNativeElement, dayOfWeek, fix);
+            tick(100);
+            fix.detectChanges();
+
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            expect(listItems.length).toBe(0, 'incorrect rendered list items count');
+        }));
     });
 
     describe(null, () => {

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html

@@ -1,5 +1,6 @@
 <div class="igx-splitter-bar"
     [class.igx-splitter-bar--vertical]='type === 0'
+    [style.cursor]='cursor'
     igxDrag
     [ghost]="false"
     [dragDirection]='dragDir'

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -7,10 +7,8 @@ import {DragDirection, IDragMoveEventArgs, IDragStartEventArgs} from '../../dire
 export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));
 
 /**
- * Provides reference to `SplitBarComponent` component.
- * Represents the draggable gripper that visually separates panes and allows for changing their sizes.
- * @export
- * @class SplitBarComponent
+ * @hidden @internal
+ * Represents the draggable bar that visually separates panes and allows for changing their sizes.
  */
 @Component({
     selector: 'igx-splitter-bar',
@@ -24,15 +22,13 @@ export class IgxSplitBarComponent {
     public cssClass = 'igx-splitter-bar-host';
 
     /**
-     * Sets/gets `IgxSplitBarComponent` orientation.
-     * @type SplitterType
+     * Gets/Sets the orientation.
      */
     @Input()
-    public type: SplitterType = SplitterType.Vertical;
+    public type: SplitterType = SplitterType.Horizontal;
 
     /**
-     * Sets/gets `IgxSplitBarComponent` element order.
-     * @type SplitterType
+     * Sets/gets the element order.
      */
     @HostBinding('style.order')
     @Input()
@@ -43,7 +39,29 @@ export class IgxSplitBarComponent {
      * @internal
      */
     @HostBinding('attr.tabindex')
-    public tabindex = 0;
+    public get tabindex() {
+        return this.resizeDisallowed ? null : 0;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.aria-orientation')
+    public get orientation() {
+        return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical';
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public get cursor() {
+        if (this.resizeDisallowed) {
+            return '';
+        }
+        return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize';
+    }
 
     /**
      * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`.
@@ -60,35 +78,26 @@ export class IgxSplitBarComponent {
 
     /**
      * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
-     * @memberof SplitBarComponent
      */
     @Output()
     public moveStart = new EventEmitter<IgxSplitterPaneComponent>();
 
     /**
      * An event that is emitted while we are dragging the current `SplitBarComponent`.
-     * @memberof SplitBarComponent
      */
     @Output()
     public moving = new EventEmitter<number>();
 
-    /**
-     * An event that is emitted when collapsing the pane
-     */
-    @Output()
-    public togglePane = new EventEmitter<IgxSplitterPaneComponent>();
     /**
      * A temporary holder for the pointer coordinates.
-     * @private
-     * @memberof SplitBarComponent
      */
     private startPoint!: number;
 
     /**
      * @hidden @internal
      */
     public get prevButtonHidden() {
-        return this.siblings[0].hidden && !this.siblings[1].hidden;
+        return this.siblings[0].collapsed && !this.siblings[1].collapsed;
     }
 
     /**
@@ -175,9 +184,12 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get nextButtonHidden() {
-        return this.siblings[1].hidden && !this.siblings[0].hidden;
+        return this.siblings[1].collapsed && !this.siblings[0].collapsed;
     }
 
+    /**
+     * @hidden @internal
+     */
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
             event.cancel = true;
@@ -187,6 +199,9 @@ export class IgxSplitBarComponent {
         this.moveStart.emit(this.pane);
     }
 
+    /**
+     * @hidden @internal
+     */
     public onDragMove(event: IDragMoveEventArgs) {
         const isHorizontal = this.type === SplitterType.Horizontal;
         const curr =  isHorizontal ? event.pageX : event.pageY;
@@ -200,20 +215,23 @@ export class IgxSplitBarComponent {
 
     protected get resizeDisallowed() {
         const relatedTabs = this.siblings;
-        return !!relatedTabs.find(x => x.resizable === false);
+        return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true);
     }
 
+    /**
+     * @hidden @internal
+     */
     public onCollapsing(next: boolean) {
         const prevSibling = this.siblings[0];
         const nextSibling = this.siblings[1];
         let target;
         if (next) {
             // if next is clicked when prev pane is hidden, show prev pane, else hide next pane.
-            target = prevSibling.hidden ? prevSibling : nextSibling;
+            target = prevSibling.collapsed ? prevSibling : nextSibling;
         } else {
             // if prev is clicked when next pane is hidden, show next pane, else hide prev pane.
-            target = nextSibling.hidden ? nextSibling : prevSibling;
+            target = nextSibling.collapsed ? nextSibling : prevSibling;
         }
-        this.togglePane.emit(target);
+        target.toggle();
     }
 }