Merge branch 'master' into ibarakov/fix-7072-master

Author: kdinev

CHANGELOG.md

@@ -12,11 +12,15 @@ All notable changes for each version of this project will be documented in this
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
     - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
     - `actions` - contains information about the transactions, that caused the emission of the event.
+- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component. 
 
 ### New Features
 - `IgxGrid`
     - `showGroupArea` input is added, which can be used to enable/disable the group area row.
 
+- `IgxSelect` support for `igxHint` directive added.
+    - Allows the user to add `igxHint` to be displayed bellow the input element.
+
 ## 9.1.1
 
 ### General

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', () => {

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);
         }
     }
 }

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

@@ -179,7 +179,26 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * this.parentVirtDir.totalItemCount = data.Count;
      * ```
      */
-    public totalItemCount: number = null;
+    public get totalItemCount() {
+        return this._totalItemCount;
+    }
+
+    public set totalItemCount(val) {
+        if (this._totalItemCount !== val) {
+            this._totalItemCount = val;
+            // update sizes in case total count changes.
+            const newSize = this.initSizesCache(this.igxForOf);
+            const sizeDiff = this.scrollComponent.size - newSize;
+            this.scrollComponent.size = newSize;
+            const lastChunkExceeded = this.state.startIndex + this.state.chunkSize > val;
+            if (lastChunkExceeded) {
+                this.state.startIndex = val - this.state.chunkSize;
+            }
+            this._adjustScrollPositionAfterSizeChange(sizeDiff);
+        }
+    }
+
+    private _totalItemCount: number = null;
 
     /**
      * An event that is emitted after a new chunk has been loaded.
@@ -320,7 +339,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     /**
      * @hidden
      */
-    protected get isRemote(): boolean {
+    public get isRemote(): boolean {
         return this.totalItemCount !== null;
     }
 
@@ -1117,13 +1136,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const newHeight = this.initSizesCache(this.igxForOf);
 
         const diff = oldHeight - newHeight;
+        this._adjustScrollPositionAfterSizeChange(diff);
+    }
 
+    private _adjustScrollPositionAfterSizeChange(sizeDiff) {
         // if data has been changed while container is scrolled
         // should update scroll top/left according to change so that same startIndex is in view
-        if (Math.abs(diff) > 0 && this.scrollPosition > 0) {
+        if (Math.abs(sizeDiff) > 0 && this.scrollPosition > 0) {
             this.recalcUpdateSizes();
             const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-            this.scrollPosition = this.sizesCache[this.state.startIndex] - offset;
+            const newSize = this.sizesCache[this.state.startIndex] - offset;
+            this.scrollPosition = newSize === this.scrollPosition ? newSize + 1 : newSize;
         }
     }
 
@@ -1525,7 +1548,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         if (changes && !this.isRemote) {
             newHeight = this.handleCacheChanges(changes);
         } else {
-            newHeight = this.initSizesCache(this.igxForOf);
+            return;
         }
 
         const diff = oldHeight - newHeight;