Merge branch 'bpenkov/igx-date-range' of https://github.com/IgniteUI/igniteui-angular into PMiteva/igx-date-range

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

Author: PlamenaMiteva

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

@@ -4,6 +4,7 @@ import { IgxInputGroupBase } from '../input-group/input-group.common';
 import { NgControl } from '@angular/forms';
 import { IgxDateTimeEditorDirective } from '../directives/date-time-editor';
 import { formatDate } from '@angular/common';
+import { IgxInputDirective } from '../input-group';
 
 /**
  * Represents a range between two dates.
@@ -41,15 +42,18 @@ export class DateRangePickerFormatPipe implements PipeTransform {
 @Component({
     template: ``,
     selector: `igx-date-range-base`,
-    providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeBaseComponent }]
+    providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeInputsBaseComponent }]
 })
-class IgxDateRangeBaseComponent extends IgxInputGroupComponent {
+export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
     @ContentChild(NgControl)
     protected ngControl: NgControl;
 
     @ContentChild(IgxDateTimeEditorDirective)
     public dateTimeEditor: IgxDateTimeEditorDirective;
 
+    @ContentChild(IgxInputDirective)
+    public inputDirective: IgxInputDirective;
+
     /** @hidden @internal */
     public get nativeElement() {
         return this.element.nativeElement;
@@ -119,9 +123,9 @@ export class IgxPickerToggleComponent {
  * @example
  * ```html
  * <igx-date-range-picker mode="dropdown">
- *      <igx-date-range-picker-start>
+ *      <igx-date-range-start>
  *          <input igxInput igxDateTimeEditor type="text">
- *      </igx-date-range-picker-start>
+ *      </igx-date-range-start>
  *      ...
  * </igx-date-range-picker>
  * ```
@@ -131,7 +135,7 @@ export class IgxPickerToggleComponent {
     templateUrl: '../input-group/input-group.component.html',
     providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent }]
 })
-export class IgxDateRangeStartComponent extends IgxDateRangeBaseComponent { }
+export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { }
 
 /**
  * Defines the end input for a date range picker
@@ -150,9 +154,9 @@ export class IgxDateRangeStartComponent extends IgxDateRangeBaseComponent { }
  * @example
  * ```html
  * <igx-date-range-picker mode="dropdown">
- *      <igx-date-range-picker-end>
+ *      <igx-date-range-end>
  *          <input igxInput igxDateTimeEditor type="text">
- *      </igx-date-range-picker-end>
+ *      </igx-date-range-end>
  *      ...
  * </igx-date-range-picker>
  * ```
@@ -162,7 +166,7 @@ export class IgxDateRangeStartComponent extends IgxDateRangeBaseComponent { }
     templateUrl: '../input-group/input-group.component.html',
     providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent }]
 })
-export class IgxDateRangeEndComponent extends IgxDateRangeBaseComponent { }
+export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { }
 
 @Directive({
     selector: '[igxDateRangeSeparator]'

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

@@ -23,16 +23,6 @@
     </div>
 </ng-template>
 
-<ng-template #defPrefix>
-    <ng-container ngProjectAs="igx-prefix">
-        <igx-prefix (click)="open()">
-            <igx-icon>
-                calendar_today
-            </igx-icon>
-        </igx-prefix>
-    </ng-container>
-</ng-template>
-
 <ng-template #startEndTemplate>
     <ng-content select="igx-date-range-start"></ng-content>
     <div [className]="separatorClass">

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

@@ -28,7 +28,7 @@ describe('IgxDateRangePicker', () => {
         const elementRef = { nativeElement: null };
         const calendar = new IgxCalendarComponent();
         it('should set range dates correctly through selectRange method', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
             dateRange.calendar = calendar;
             let startDate = new Date(2020, 3, 7);
             const endDate = new Date(2020, 6, 27);
@@ -46,7 +46,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should set range dates correctly through selectToday method', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
             dateRange.calendar = calendar;
             const today = new Date();
 
@@ -56,7 +56,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should emit rangeSelected on selection', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
             dateRange.calendar = calendar;
             spyOn(dateRange.rangeSelected, 'emit');
             let startDate = new Date(2017, 4, 5);
@@ -79,7 +79,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should emit rangeSelected on selectToday()', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, null, null);
             dateRange.calendar = calendar;
             spyOn(dateRange.rangeSelected, 'emit');
             const today = new Date();