chore(*): merge from origin/master

Author: ChronosSF

CHANGELOG.md

@@ -1,4 +1,4 @@
-# Ignite UI for Angular Change Log
+# Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
 
@@ -8,15 +8,70 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
     - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
+- `IgxHierarchicalGrid`
+    - Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
+- `IgxDrag`
+    - Dragging without ghost. Now it is possible to drag the base element `igxDrag` is instanced on by setting the new input `ghost` to false.
+    - Ghost template. A custom ghost template reference can be provided on the new `ghostTemplate` input.
+    - Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which and element can be interacted with instead of the whole element `igxDrag` is instanced on.
+    - Linking of drag and drop elements. This can be achieved by using the new provided `dragChannel` input, specifying each element to which channel it corresponds.
+    - Drag animation improvements. Three new methods have been exposed in place of the old `animateToOrigin` input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. `setLocation`, `transitionToOrigin` and `transitionTo` are all methods that provide a various way to animate a transition to a specific location for the dragged element.
+    - New getters - `location` and `originLocation` to aid in applying transition animations.
+    - New outputs - `dragMove`, `ghostCreate` and `ghostDestroy`
+- `IgxDrop`
+    - Linking of drag and drop elements. This can be achieved by using the new provided `dropChannel` input, specifying each drop area to which channel it corresponds.
+    - Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert.  Also an input `dropStrategy` to the `igxDrop` which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
+
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
+    - **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
+- `IgxCombo`
+    - Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
+    ```html
+    <igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>
+    ```
+    ```typescript
+    export class MyCombo {
+        ...
+        public combo: IgxComboComponent;
+        public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
+        ...
+        ngOnInit() {
+            // Selection is done only by valueKey property value
+            this.combo.selectItems([0, 1]);
+        }
+    }
+    ```
+   - **Breaking Change** When using `[valueKey]`, combo methods, events and outputs **cannot** be handled with *data item references*.
+   - For more information, visit the component's [readme](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/combo/README.md)
+
 ## 8.1.4
 - `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component. 
 
+- `IgxDrag`
+    - Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.
+    - Deprecated methods - `dropFinished`.
+    - **Breaking Change** `ghostImageClass` input is renamed to `ghostClass`.
+    - **Breaking Change** `dragGhostHost` input is renamed to `ghostHost`.
+    - **Breaking Change** `returnMoveEnd` input is renamed to `transitioned`.
+    - **Breaking Change** `onDragStart` output is renamed to `dragStart`.
+    - **Breaking Change** `onDragEnd` output is renamed to `dragEnd`.
+
+- `IgxDrop`
+    - **Breaking Change** Default drop strategy is now changed to not perform any actions.
+    - **Breaking Change** `onEnter` output is renamed to `enter`.
+    - **Breaking Change** `onOver` output is renamed to `over`.
+    - **Breaking Change** `onLeave` output is renamed to `leave`.
+    - **Breaking Change** `onDrop` output is renamed to `dropped`.
+    - **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDragBaseEventArgs`.
+    - **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
+    - **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
+    - **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
+
 ## 8.1.3
 - `IgxCombo`
     - Combo `onSelectionChange` events now emits the item(s) that were added to or removed from the collection:

projects/igniteui-angular/migrations/update-8_2_0/changes/inputs.json

@@ -0,0 +1,29 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "renderGhost",
+            "replaceWith": "ghost",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "ghostImageClass",
+            "replaceWith": "ghostClass",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "dragGhostHost",
+            "replaceWith": "ghostHost",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_0/changes/outputs.json

@@ -0,0 +1,61 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "onGhostCreate",
+            "replaceWith": "ghostCreate",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onGhostDestroy",
+            "replaceWith": "ghostDestroy",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "returnMoveEnd",
+            "replaceWith": "transitioned",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "dragClicked",
+            "replaceWith": "click",
+            "owner": {
+                "selector": "igxDrag",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onEnter",
+            "replaceWith": "enter",
+            "owner": {
+                "selector": "igxDrop",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onLeave",
+            "replaceWith": "leave",
+            "owner": {
+                "selector": "igxDrop",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onDrop",
+            "replaceWith": "dropped",
+            "owner": {
+                "selector": "igxDrop",
+                "type": "directive"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts

@@ -50,4 +50,32 @@ describe('Update 8.2.0', () => {
 
         done();
     });
+
+    it('should update igxDrag input bindings', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/custom.component.html',
+            `<div igxDrag [renderGhost]="true" [ghostImageClass]="'casper'" [dragGhostHost]="host">Drag me</div>`);
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
+            .toEqual(
+            `<div igxDrag [ghost]="true" [ghostClass]="'casper'" [ghostHost]="host">Drag me</div>`);
+        done();
+    });
+
+    it('should update igxDrag and igxDrop outputs bindings', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/custom.component.html',
+            `<div igxDrag (onGhostCreate)="ghostCreateHandler($event)" (onGhostDestroy)="ghostDestroyHandler($event)" (returnMoveEnd)="moveEndHandler($event)" (dragClicked)="clickHandler($event)">Drag me</div>
+            <div igxDrop (onEnter)="enterHandler($event)" (onLeave)="leaveHandler($event)" (onDrop)="dropHandler($event)">drop area</div>
+            `);
+        const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
+            .toEqual(
+            `<div igxDrag (ghostCreate)="ghostCreateHandler($event)" (ghostDestroy)="ghostDestroyHandler($event)" (transitioned)="moveEndHandler($event)" (click)="clickHandler($event)">Drag me</div>
+            <div igxDrop (enter)="enterHandler($event)" (leave)="leaveHandler($event)" (dropped)="dropHandler($event)">drop area</div>
+            `);
+        done();
+    });
 });

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -9,9 +9,9 @@ import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxBannerActionsDirective } from './banner.directives';
 import { CommonModule } from '@angular/common';
-import { CancelableEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
-export interface BannerEventArgs {
+export interface BannerEventArgs extends IBaseEventArgs {
     banner: IgxBannerComponent;
     event?: Event;
 }

projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts

@@ -23,6 +23,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxIconModule } from '../icon/index';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, DisplayDensity } from '../core/density';
+import { IBaseEventArgs } from '../core/utils';
 
 export enum ButtonGroupAlignment { horizontal, vertical }
 let NEXT_ID = 0;
@@ -424,7 +425,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 }
 
-export interface IButtonGroupEventArgs {
+export interface IButtonGroupEventArgs extends IBaseEventArgs {
     button: IgxButtonDirective;
     index: number;
 }

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>