Merge branch 'master' into mpopov/card-spacing

Author: simeonoff

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+  - cron: "0 0 * * *"
+
+jobs:
+  stale:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/stale@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        stale-issue-message: 'There has been no recent activity and this issue has been marked inactive.'
+        stale-pr-message: 'There has been no recent activity and this PR has been marked inactive.'
+        stale-issue-label: 'status: inactive'
+        stale-pr-label: 'status: inactive'

CHANGELOG.md

@@ -162,6 +162,9 @@ All notable changes for each version of this project will be documented in this
     - Added `tabIndex` input so it can support change detection as well.
 
 
+- `IgxHighlightDirective`
+    - New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
+
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

projects/igniteui-angular/src/lib/core/utils.ts

@@ -355,3 +355,31 @@ export function resizeObservable(target: HTMLElement): Observable<ResizeObserver
         return unsubscribe;
     });
 }
+
+/**
+ * @hidden
+ * @internal
+ *
+ * Compares two maps.
+ */
+export function compareMaps(map1: Map<any, any>, map2: Map<any, any>): boolean {
+    if (!map2) {
+        return !map1 ? true : false;
+    }
+    if (map1.size !== map2.size) {
+        return false;
+    }
+    let match = true;
+    const keys = Array.from(map2.keys());
+    for (const key of keys) {
+        if (map1.has(key)) {
+            match = map1.get(key) === map2.get(key);
+        } else {
+            match = false;
+        }
+        if (!match) {
+            break;
+        }
+    }
+    return match;
+}

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -11,17 +11,13 @@ export const enum DateState {
     Invalid = 'invalid',
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum FormatDesc {
     Numeric = 'numeric',
     TwoDigits = '2-digit'
 }
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum DateChars {
     YearChar = 'y',
     MonthChar = 'M',
@@ -31,25 +27,32 @@ const enum DateChars {
 const DATE_CHARS = ['h', 'H', 'm', 's', 'S', 't', 'T'];
 const TIME_CHARS = ['d', 'D', 'M', 'y', 'Y'];
 
-/**
- * @hidden
- */
+/** @hidden */
 const enum DateParts {
     Day = 'day',
     Month = 'month',
     Year = 'year'
 }
 
-/**
- * @hidden
- */
+
+/** @hidden */
 export abstract class DatePickerUtil {
+    public static readonly DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
+    // TODO: this is the def mask for the date-picker, should remove it during refactoring
     private static readonly SHORT_DATE_MASK = 'MM/dd/yy';
     private static readonly SEPARATOR = 'literal';
     private static readonly NUMBER_OF_MONTHS = 12;
     private static readonly PROMPT_CHAR = '_';
     private static readonly DEFAULT_LOCALE = 'en';
 
+
+
+    /**
+     *  TODO: Unit tests for all public methods.
+     */
+
+
+
     /**
      * Parse a Date value from masked string input based on determined date parts
      * @param inputData masked value to parse
@@ -92,20 +95,6 @@ export abstract class DatePickerUtil {
         );
     }
 
-    private static ensureLeadingZero(part: DatePartInfo) {
-        switch (part.type) {
-            case DatePart.Date:
-            case DatePart.Month:
-            case DatePart.Hours:
-            case DatePart.Minutes:
-            case DatePart.Seconds:
-                if (part.format.length === 1) {
-                    part.format = part.format.repeat(2);
-                }
-                break;
-        }
-    }
-
     /**
      * Parse the mask into date/time and literal parts
      */
@@ -256,6 +245,72 @@ export abstract class DatePickerUtil {
         return newDate;
     }
 
+    /**
+     * Determines whether the provided value is less than the provided min value.
+     * @param includeTime set to false if you want to exclude time portion of the two dates
+     * @param includeDate set to false if you want to exclude the date portion of the two dates
+     */
+    public static greaterThanMaxValue(value: Date, maxValue: Date, includeTime = true, includeDate = true): boolean {
+        if (includeTime && includeDate) {
+            return value.getTime() > maxValue.getTime();
+        }
+
+        let _value = new Date(value.getTime());
+        let _maxValue = new Date(maxValue.getTime());
+        if (includeDate) {
+            _value.setHours(0, 0, 0, 0);
+            _maxValue.setHours(0, 0, 0, 0);
+            return _value.getTime() > maxValue.getTime();
+        }
+        if (includeTime) {
+            _value = new Date(0, 0, 0, _value.getHours(), _value.getMinutes(), _value.getSeconds());
+            _maxValue = new Date(0, 0, 0, _maxValue.getHours(), _maxValue.getMinutes(), _maxValue.getSeconds());
+            return _value.getTime() > _maxValue.getTime();
+        }
+
+        // throw?
+    }
+
+    /**
+     * Determines whether the provided value is greater than the provided min value.
+     * @param includeTime set to false if you want to exclude time portion of the two dates
+     * @param includeDate set to false if you want to exclude the date portion of the two dates
+     */
+    public static lessThanMinValue(value: Date, minValue: Date, includeTime = true, includeDate = true): boolean {
+        if (includeTime && includeDate) {
+            return value.getTime() < minValue.getTime();
+        }
+
+        let _value = new Date(value.getTime());
+        let _minValue = new Date(minValue.getTime());
+        if (includeDate) {
+            _value.setHours(0, 0, 0, 0);
+            _minValue.setHours(0, 0, 0, 0);
+            return _value.getTime() < _minValue.getTime();
+        }
+        if (includeTime) {
+            _value = new Date(0, 0, 0, _value.getHours(), _value.getMinutes(), _value.getSeconds());
+            _minValue = new Date(0, 0, 0, _minValue.getHours(), _minValue.getMinutes(), _minValue.getSeconds());
+            return _value.getTime() > _minValue.getTime();
+        }
+
+        // throw?
+    }
+
+    private static ensureLeadingZero(part: DatePartInfo) {
+        switch (part.type) {
+            case DatePart.Date:
+            case DatePart.Month:
+            case DatePart.Hours:
+            case DatePart.Minutes:
+            case DatePart.Seconds:
+                if (part.format.length === 1) {
+                    part.format = part.format.repeat(2);
+                }
+                break;
+        }
+    }
+
     private static getCleanVal(inputData: string, datePart: DatePartInfo, promptChar?: string): string {
         return DatePickerUtil.trimEmptyPlaceholders(inputData.substring(datePart.start, datePart.end), promptChar);
     }

projects/igniteui-angular/src/lib/date-range-picker/README.md

@@ -108,14 +108,15 @@ With projected inputs:
 ### Inputs
 | Name             | Type               | Description |
 |:-----------------|:-------------------|:------------|
-| mode             | InteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
-| monthsViewNumber | number             | Sets the number displayed month views. Default is `2`. |
+| doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
+| formatter        | function => string | Applies a custom formatter function on the selected or passed date. |
 | hideOutsideDays  | boolean            | Sets whether dates that are not part of the current month will be displayed. Default value is `false`. |
-| weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
 | locale           | string             | Gets the `locale` of the calendar. Default value is `"en"`. |
-| formatter        | function => string | Applies a custom formatter function on the selected or passed date. |
-| doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
 | overlaySettings  | OverlaySettings    | Changes the default overlay settings used by the `IgxDateRangePickerComponent`. | 
+| mode             | InteractionMode    | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. Default is `dialog` |
+| monthsViewNumber | number             | Sets the number displayed month views. Default is `2`. |
+| placeholder      | string             | Sets the `placeholder` for single-input `IgxDateRangePickerComponent`. |
+| weekStart        | number             | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
 
 ### Outputs
 | Name             | Type                  | Description |

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -45,16 +45,6 @@ describe('IgxDateRangePicker', () => {
             expect(dateRange.value.end).toEqual(startDate);
         });
 
-        it('should set range dates correctly through selectToday method', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
-            dateRange.calendar = calendar;
-            const today = new Date();
-
-            dateRange.selectRange(new Date());
-            expect(dateRange.value.start).toEqual(today);
-            expect(dateRange.value.end).toEqual(today);
-        });
-
         it('should emit rangeSelected on selection', () => {
             const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
             dateRange.calendar = calendar;
@@ -78,19 +68,6 @@ describe('IgxDateRangePicker', () => {
             expect(dateRange.rangeSelected.emit).toHaveBeenCalledWith({ start: startDate, end: startDate });
         });
 
-        it('should emit rangeSelected on selectToday()', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
-            dateRange.calendar = calendar;
-            spyOn(dateRange.rangeSelected, 'emit');
-            const today = new Date();
-
-            dateRange.selectRange(new Date());
-            expect(dateRange.value.start).toEqual(today);
-            expect(dateRange.value.end).toEqual(today);
-            expect(dateRange.rangeSelected.emit).toHaveBeenCalledTimes(1);
-            expect(dateRange.rangeSelected.emit).toHaveBeenCalledWith({ start: today, end: today });
-        });
-
         it('should correctly implement interface methods - ControlValueAccessor ', () => {
             const mockNgControl = jasmine.createSpyObj('NgControl', ['registerOnChangeCb', 'registerOnTouchedCb']);
             const range = { start: new Date(2020, 1, 18), end: new Date(2020, 1, 28) };
@@ -262,6 +239,15 @@ describe('IgxDateRangePicker', () => {
             });
 
             describe('Properties & events tests', () => {
+                it('should show date picker with placeholder', () => {
+                    fixture.detectChanges();
+                    expect(singleInputElement.nativeElement.placeholder).toEqual('MM/dd/yyyy - MM/dd/yyyy');
+
+                    const placeholder = 'Some placeholder';
+                    fixture.componentInstance.dateRange.placeholder = placeholder;
+                    fixture.detectChanges();
+                    expect(singleInputElement.nativeElement.placeholder).toEqual(placeholder);
+                });
                 it('should close the calendar with the "Done" button', fakeAsync(() => {
                     fixture.componentInstance.mode = InteractionMode.Dialog;
                     fixture.detectChanges();
@@ -809,4 +795,7 @@ export class DateRangeDefaultCustomLabelComponent extends DateRangeTestComponent
     </igx-date-range-picker>
     `
 })
-export class DateRangeDefaultComponent extends DateRangeTestComponent { }
+export class DateRangeDefaultComponent extends DateRangeTestComponent {
+    @ViewChild(IgxDateRangePickerComponent)
+    public dateRange: IgxDateRangePickerComponent;
+ }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -49,9 +49,6 @@ import { CurrentResourceStrings } from '../core/i18n/resources';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { DatePickerUtil } from '../date-picker/date-picker.utils';
 import { DateRangeType } from '../core/dates';
-import { TreeGridFilteringStrategy } from '../grids/tree-grid/tree-grid.filtering.pipe';
-
-const DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
 
 /**
  * Provides the ability to select a range of dates from a calendar UI or editable inputs.
@@ -270,6 +267,16 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     @Input()
     public disabled: boolean;
 
+    /**
+     * Sets the `placeholder` for single-input `IgxDateRangePickerComponent`.
+     *   @example
+     * ```html
+     * <igx-date-range-picker [placeholder]="'Choose your dates'"></igx-date-range-picker>
+     * ```
+     */
+    @Input()
+    public placeholder = '';
+
     /**
      * Emitted when a range is selected.
      *
@@ -369,12 +376,15 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             return this.formatter(this.value);
         }
         if (!this.hasProjectedInputs) {
+            if (this.placeholder !== '') {
+                return this.placeholder;
+            }
             // TODO: use displayFormat - see how shortDate, longDate can be defined
             return this.inputFormat
                 ? `${this.inputFormat} - ${this.inputFormat}`
-                : `${DEFAULT_INPUT_FORMAT} - ${DEFAULT_INPUT_FORMAT}`;
+                : `${DatePickerUtil.DEFAULT_INPUT_FORMAT} - ${DatePickerUtil.DEFAULT_INPUT_FORMAT}`;
         } else {
-            return this.inputFormat || DEFAULT_INPUT_FORMAT;
+            return this.inputFormat || DatePickerUtil.DEFAULT_INPUT_FORMAT;
         }
     }
 
@@ -619,7 +629,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
     /** @hidden @internal */
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes['locale']) {
-            this.inputFormat = DatePickerUtil.getDefaultInputFormat(this.locale || 'en') || DEFAULT_INPUT_FORMAT;
+            this.inputFormat = DatePickerUtil.getDefaultInputFormat(this.locale || 'en') || DatePickerUtil.DEFAULT_INPUT_FORMAT;
         }
     }