Merge branch 'master' into pbozhinov/fix-7615-10

ChronosSF · web-flow · commit 4e9b27da4965 · 2020-06-22T16:32:05.000+03:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -387,7 +387,7 @@
         align-items: center;
         padding: 0 rem(16px);
 
-        igx-input-group {
+        igx-select {
             flex-grow: 1;
             flex-basis: 40%;
             margin: rem(16px) 0;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -586,6 +586,34 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     verifyDateRange();
                 });
+
+                it('should select a range from the calendar only when the two inputs are filled in', fakeAsync(() => {
+                    fixture.componentInstance.mode = InteractionMode.DropDown;
+                    fixture.detectChanges();
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/10/2015', startInput);
+
+                    fixture.componentInstance.dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                    expect(fixture.componentInstance.dateRange.calendar.selectedDates.length).toBe(0);
+
+                    UIInteractions.triggerEventHandlerKeyDown('Escape', calendar);
+                    tick();
+                    fixture.detectChanges();
+
+                    endInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/16/2015', endInput);
+                    fixture.detectChanges();
+
+                    fixture.componentInstance.dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                    expect(fixture.componentInstance.dateRange.calendar.selectedDates.length).toBe(7);
+                }));
             });
 
             describe('Keyboard navigation', () => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -570,11 +570,23 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     public validate(control: AbstractControl): ValidationErrors | null {
         const value: DateRange = control.value;
         if (value) {
+            // TODO (in issue #7477)
+            // Accumulate all errors and return them as one object.
+            if (this.hasProjectedInputs) {
+                const startInput = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
+                const endInput = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
+                if (!startInput.dateTimeEditor.value) {
+                    return { 'startValue': true };
+                }
+                if (!endInput.dateTimeEditor.value) {
+                    return { 'endValue': true };
+                }
+            }
+
             const min = DatePickerUtil.parseDate(this.minValue);
             const max = DatePickerUtil.parseDate(this.maxValue);
             const start = DatePickerUtil.parseDate(value.start);
             const end = DatePickerUtil.parseDate(value.end);
-
             if (min && start && DatePickerUtil.lessThanMinValue(start, min, false)) {
                 return { 'minValue': true };
             }
@@ -589,7 +601,6 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             }
         }
 
-        // TODO: fix what happens on blur and ensure on blur the value is either null or with both start and end filled
         return null;
     }
 
@@ -676,15 +687,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
 
     /** @hidden @internal */
     public handleClosing(event: CancelableBrowserEventArgs & IBaseEventArgs): void {
-        this.onClosing.emit(event);
-
-        if (this.value && this.value.start && !this.value.end) {
-            this.value = { start: this.value.start, end: this.value.start };
-        }
         if (this.value && !this.value.start && !this.value.end) {
             this.value = null;
         }
 
+        this.onClosing.emit(event);
+
         if (this.mode === InteractionMode.DropDown && event.event && !this.element.nativeElement.contains(event.event.target)) {
             // outside click
             this.updateValidityOnBlur();
@@ -790,46 +798,77 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
         });
     }
 
-    private updateCalendar(): void {
-        this.calendar.disabledDates = [];
-        let minValue: Date = DatePickerUtil.parseDate(this.minValue);
+    private parseMinValue(value: string | Date): Date | null {
+        let minValue: Date = DatePickerUtil.parseDate(value);
         if (!minValue && this.hasProjectedInputs) {
             const start = this.projectedInputs.filter(i => i instanceof IgxDateRangeStartComponent)[0];
             if (start) {
                 minValue = DatePickerUtil.parseDate(start.dateTimeEditor.minValue);
             }
         }
-        if (minValue) {
-            this.calendar.disabledDates.push({ type: DateRangeType.Before, dateRange: [minValue] });
-        }
 
-        let maxValue: Date = DatePickerUtil.parseDate(this.maxValue);
-        if (!maxValue && this.hasProjectedInputs) {
+        return minValue;
+    }
+
+    private parseMaxValue(value: string | Date): Date | null {
+        let maxValue: Date = DatePickerUtil.parseDate(value);
+        if (!maxValue && this.projectedInputs) {
             const end = this.projectedInputs.filter(i => i instanceof IgxDateRangeEndComponent)[0];
             if (end) {
                 maxValue = DatePickerUtil.parseDate(end.dateTimeEditor.maxValue);
             }
         }
+
+        return maxValue;
+    }
+
+    private updateCalendar(): void {
+        this.calendar.disabledDates = [];
+        const minValue = this.parseMinValue(this.minValue);
+        if (minValue) {
+            this.calendar.disabledDates.push({ type: DateRangeType.Before, dateRange: [minValue] });
+        }
+        const maxValue = this.parseMaxValue(this.maxValue);
         if (maxValue) {
             this.calendar.disabledDates.push({ type: DateRangeType.After, dateRange: [maxValue] });
         }
 
         const range: Date[] = [];
-        if (this.value) {
-            if (this.value.start) {
-                range.push(this.value.start);
+        if (this.value?.start && this.value?.end) {
+            if (DatePickerUtil.greaterThanMaxValue(this.value.start, this.value.end)) {
+                this.swapEditorDates();
             }
-            if (this.value.end) {
-                range.push(this.value.end);
+            if (this.valueInRange(this.value, minValue, maxValue)) {
+                range.push(this.value.start, this.value.end);
             }
         }
 
         if (range.length > 0) {
             this.calendar.selectDate(range);
-            this.calendar.viewDate = range[0];
         } else {
             this.calendar.deselectDate();
         }
+        this.calendar.viewDate = range[0] || new Date();
+    }
+
+    private swapEditorDates(): void {
+        if (this.hasProjectedInputs) {
+            const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
+            const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
+            [start.dateTimeEditor.value, end.dateTimeEditor.value] = [end.dateTimeEditor.value, start.dateTimeEditor.value];
+            [this.value.start, this.value.end] = [this.value.end, this.value.start];
+        }
+    }
+
+    private valueInRange(value: DateRange, minValue?: Date, maxValue?: Date): boolean {
+        if (minValue && DatePickerUtil.lessThanMinValue(value.start, minValue, false)) {
+            return false;
+        }
+        if (maxValue && DatePickerUtil.greaterThanMaxValue(value.end, maxValue, false)) {
+            return false;
+        }
+
+        return true;
     }
 
     private extractRange(selection: Date[]): DateRange {
@@ -858,7 +897,6 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
                         } else {
                             this.value = { start: value, end: null };
                         }
-                        // TODO: should we check start and reset end value
                     });
                 end.dateTimeEditor.valueChange
                     .pipe(takeUntil(this.$destroy))
@@ -882,11 +920,6 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
                         if (this.collapsed) {
                             this.updateValidityOnBlur();
                         }
-                        if (this.value && !this.value.start) {
-                            this.value = null;
-                        }
-                        // TODO: if we have start and have no end should we fill end
-                        // as we do on calendar close
                     });
             });
         } else {
@@ -942,9 +975,9 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     private updateInputs(): void {
         const start = this.projectedInputs?.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
         const end = this.projectedInputs?.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
-        if (start && end && this.value) {
-            start.updateInputValue(this.value.start);
-            end.updateInputValue(this.value.end);
+        if (start && end) {
+            start.updateInputValue(this.value?.start ?? null);
+            end.updateInputValue(this.value?.end ?? null);
         }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
@@ -1,37 +1,18 @@
-<igx-drop-down
-    #dropdownConditions
-    [maxHeight]="'200px'"
-    [width]="getInputWidth()"
-    [displayDensity]="displayDensity"
-    (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{ translateCondition(condition) }}</span>
-    </igx-drop-down-item>
-</igx-drop-down>
-
-<igx-input-group
-    #inputGroupConditions
-    (click)="toggleCustomDialogDropDown()"
-    type="box"
-    [displayDensity]="displayDensity">
-
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-
-    <input
-        igxInput
-        (keydown)="onInputConditionsKeyDown($event)"
-        tabindex="0"
-        [igxDropDownItemNavigation]="dropdownConditions"
-        [placeholder]="inputConditionsPlaceholder"
-        autocomplete="off"
-        [value]="getConditionName(expressionUI.expression.condition)"
-        [readonly]="true"
-    />
-</igx-input-group>
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
+        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+        <span>{{translateCondition(condition)}}</span>
+    </igx-select-item>
+</igx-select>
 
 <igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
@@ -76,3 +57,8 @@
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
+
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html
@@ -1,37 +1,18 @@
-<igx-drop-down
-    #dropdownConditions
-    [maxHeight]="'200px'"
-    [width]="getInputWidth()"
-    [displayDensity]="displayDensity"
-    (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{ translateCondition(condition) }}</span>
-    </igx-drop-down-item>
-</igx-drop-down>
-
-<igx-input-group
-    #inputGroupConditions
-    (click)="toggleCustomDialogDropDown()"
-    type="box"
-    [displayDensity]="displayDensity">
-
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-
-    <input
-        igxInput
-        (keydown)="onInputConditionsKeyDown($event)"
-        [igxDropDownItemNavigation]="dropdownConditions"
-        tabindex="0"
-        [placeholder]="inputConditionsPlaceholder"
-        autocomplete="off"
-        [value]="getConditionName(expressionUI.expression.condition)"
-        [readonly]="true"
-    />
-</igx-input-group>
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
+        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+        <span>{{translateCondition(condition)}}</span>
+    </igx-select-item>
+</igx-select>
 
 <igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity">
     <input
@@ -74,3 +55,8 @@
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
+
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.module.ts
