Merge branch 'ddincheva/gridSelection' of https://github.com/IgniteUI…

…/igniteui-angular into bpenkov/row-selection-templating

projects/igniteui-angular/src/lib/calendar/calendar.ts

@@ -52,6 +52,10 @@ export function isDateInRanges(date: Date, ranges: DateRangeDescriptor[]): boole
     date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
     const dateInMs = date.getTime();
 
+    if (!ranges) {
+        return false;
+    }
+
     for (const descriptor of ranges) {
         const dRanges = descriptor.dateRange ? descriptor.dateRange.map(
             r => new Date(r.getFullYear(), r.getMonth(), r.getDate())) : undefined;
@@ -296,7 +300,7 @@ export class Calendar {
 
             const toType = (partType: string) => {
                 const index = formattedParts.findIndex(({ type }) => type === partType);
-                const o: IFormattedParts = { value: '', literal: '', combined: ''};
+                const o: IFormattedParts = { value: '', literal: '', combined: '' };
 
                 if (partType === 'era' && index > -1) {
                     o.value = formattedParts[index].value;
@@ -316,7 +320,7 @@ export class Calendar {
             }
         } else {
             for (const each of parts) {
-                result[each] = { value: '', literal: '', combined: ''};
+                result[each] = { value: '', literal: '', combined: '' };
             }
         }
         return result;

projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.html

@@ -1 +1,3 @@
-<ng-content></ng-content>
+<span class="igx-calendar__date-content">
+    <ng-content></ng-content>
+</span>

projects/igniteui-angular/src/lib/calendar/days-view/day-item.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter, HostBinding, ElementRef, HostListener } from '@angular/core';
-import { ICalendarDate, isDateInRanges } from '../calendar';
-import { DateRangeDescriptor } from '../../core/dates';
+import { ICalendarDate, isDateInRanges, Calendar } from '../calendar';
+import { DateRangeDescriptor, DateRangeType } from '../../core/dates';
 import { CalendarSelection } from '../calendar-base';
 
 /**
@@ -40,10 +40,13 @@ export class IgxDayItemComponent {
         }
 
         if (this.selection === CalendarSelection.SINGLE) {
-        this._selected = (this.value as Date).getTime() === date.getTime();
+            this._selected = (this.value as Date).getTime() === date.getTime();
         } else {
-        this._selected = (this.value as Date[])
-            .some((each) => each.getTime() === date.getTime());
+            const selectedDates = (this.value as Date[]);
+            const currentDate = selectedDates.find(element => element.getTime() === date.getTime());
+
+            this._index = selectedDates.indexOf(currentDate) + 1;
+            this._selected = !!this._index;
         }
 
         return this._selected;
@@ -126,7 +129,7 @@ export class IgxDayItemComponent {
 
     @HostBinding('class.igx-calendar__date--current')
     public get isTodayCSS(): boolean {
-        return this.isToday && !this.selected;
+        return this.isToday;
     }
 
     @HostBinding('class.igx-calendar__date--selected')
@@ -144,11 +147,52 @@ export class IgxDayItemComponent {
         return this.isDisabled || this.isOutOfRange;
     }
 
+    @HostBinding('class.igx-calendar__date--range')
+    public get isWithinRange() {
+        if (Array.isArray(this.value) && this.value.length > 1) {
+
+            return isDateInRanges(this.date.date,
+                [
+                    {
+                        type: DateRangeType.Between,
+                        dateRange: [this.value[0], this.value[this.value.length - 1]]
+                    }
+                ]
+            );
+        }
+
+        return false;
+    }
+
     @HostBinding('class.igx-calendar__date--special')
     public get isSpecialCSS(): boolean {
         return this.isSpecial;
     }
 
+    @HostBinding('class.igx-calendar__date--single')
+    public get isSingleSelection(): boolean {
+        return this.selection !== CalendarSelection.RANGE;
+    }
+
+    @HostBinding('class.igx-calendar__date--first')
+    public get isFirstInRange(): boolean {
+        if (this.isSingleSelection) {
+            return false;
+        }
+
+        return this._index === 1;
+    }
+
+    @HostBinding('class.igx-calendar__date--last')
+    public get isLastInRange(): boolean {
+        if (this.isSingleSelection) {
+            return false;
+        }
+
+        return (this.value as Date[]).length === this._index;
+    }
+
+    private _index: Number;
     private _selected = false;
 
     constructor(private elementRef: ElementRef) { }

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html

@@ -5,7 +5,16 @@
 </div>
 
 <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row" [@animateChange]="animationAction" (@animateChange.done)="animationDone($event, isLast)">
-    <igx-day-item [date]="day" [selection]="selection" [value]="value" [disabledDates]="disabledDates" [specialDates]="specialDates" [outOfRangeDates]="outOfRangeDates" (onDateSelection)="selectDay($event)" *ngFor="let day of week; trackBy: dateTracker">
-        {{ formattedDate(day.date) }}
+    <igx-day-item
+        *ngFor="let day of week; trackBy: dateTracker"
+        [date]="day"
+        [selection]="selection"
+        [value]="value"
+        [disabledDates]="disabledDates"
+        [specialDates]="specialDates"
+        [outOfRangeDates]="outOfRangeDates"
+        (onDateSelection)="selectDay($event)"
+    >
+    {{ formattedDate(day.date) }}
     </igx-day-item>
 </div>

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -47,21 +47,11 @@
 
     @include e(date) {
         @extend %cal-value !optional;
-
-        &:hover,
-        &:focus {
-            @extend %cal-value--hover !optional;
-        }
     }
 
     @include e(date, 'inactive') {
         @extend %cal-value !optional;
         @extend %cal-value--inactive !optional;
-
-        &:hover,
-        &:focus {
-            @extend %cal-value--hover !optional;
-        }
     }
 
     @include e(date, 'selected') {
@@ -72,21 +62,11 @@
     @include e(date, 'current') {
         @extend %cal-value !optional;
         @extend %cal-value--current !optional;
-
-        &:hover,
-        &:focus {
-            @extend %cal-value--hover !optional;
-        }
     }
 
     @include e(date, 'weekend') {
         @extend %cal-value !optional;
         @extend %cal-value--weekend !optional;
-
-        &:hover,
-        &:focus {
-            @extend %cal-value--hover !optional;
-        }
     }
 
     @include e(date, 'special') {
@@ -99,11 +79,42 @@
         @extend %cal-value--disabled !optional;
     }
 
+    @include e(date, 'single') {
+        @extend %cal-value--single !optional;
+    }
+
+    @include e(date, $mods: ('selected', 'first')) {
+        @extend %cal-value--first !optional;
+    }
+
+    @include e(date, $mods: ('selected', 'last')) {
+        @extend %cal-value--last !optional;
+    }
+
+    @include e(date, $mods: ('selected', 'first', 'last')) {
+        @extend %cal-value--single !optional;
+    }
+
     @include e(date, $mods: ('disabled', 'inactive')) {
         @extend %cal-value !optional;
         @extend %cal-value--disabled !optional;
     }
 
+    @include e(date, $mods: ('disabled', 'range')) {
+        @extend %cal-value--disabled-range !optional;
+    }
+
+    // This is added due to a bug in JavaScript
+    // where the selected dates collection also includes
+    // disabled dates.
+    @include e(date, $mods: ('selected', 'disabled', 'range')) {
+        @extend %cal-value--disabled-range !optional;
+    }
+
+    @include e(date-content) {
+        @extend %cal-value-content !optional;
+    }
+
     @include e(year) {
         @extend %cal-value !optional;
         @extend %cal-value--year !optional;