feat(dateRange): Adding toggle calendar icon to the end

Author: IvanKitanov17

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

@@ -1,4 +1,4 @@
-import { Component, ContentChild, Pipe, PipeTransform, Directive } from '@angular/core';
+import { Component, ContentChild, Pipe, PipeTransform, Directive, ViewChild, ViewContainerRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { IgxInputDirective, IgxInputState } from '../input-group/public_api';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
@@ -10,7 +10,8 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
+import { IgxPickerToggleComponent } from 'igniteui-angular';
 
 /** Represents a range between two dates. */
 export interface DateRange {
@@ -67,6 +68,9 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
     @ContentChild(IgxInputDirective)
     public inputDirective: IgxInputDirective;
 
+    @ViewChild('toggleSlot', { read: ViewContainerRef, static: false })
+    public toggleSlot: ViewContainerRef;
+
     @ContentChild(NgControl)
     protected ngControl: NgControl;
 
@@ -128,7 +132,10 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent {
     ],
     imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
 })
-export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { }
+export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent {
+    @ContentChild(IgxPickerToggleComponent)
+    public projectedToggle?: IgxPickerToggleComponent;
+}
 
 /**
  * Defines the end input for a date range picker
@@ -163,7 +170,10 @@ export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent
     ],
     imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent]
 })
-export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { }
+export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent {
+    @ContentChild(IgxPickerToggleComponent)
+    public projectedToggle?: IgxPickerToggleComponent;
+}
 
 /**
  * Replaces the default separator `to` with the provided value

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

@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #defIcon>
-    <igx-icon family="default" name="date_range" [attr.aria-hidden]="true"></igx-icon>
+    <igx-icon family="default" name="date_range" [attr.aria-hidden]="true" (click)="toggle()"></igx-icon>
 </ng-template>
 
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>

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

@@ -35,6 +35,7 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
+import { IgxInputGroupBase } from '../input-group/input-group.common';
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -293,13 +294,17 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @ViewChild(IgxInputGroupComponent, { read: ViewContainerRef })
     private viewContainerRef: ViewContainerRef;
 
+    /** @hidden @internal */
+    @ViewChild('defIcon', { read: TemplateRef })
+    private defIcon: TemplateRef<any>;
+
     /** @hidden @internal */
     @ViewChild(IgxInputDirective)
     public inputDirective: IgxInputDirective;
 
     /** @hidden @internal */
-    @ContentChildren(IgxDateRangeInputsBaseComponent)
-    public projectedInputs: QueryList<IgxDateRangeInputsBaseComponent>;
+    @ContentChildren(IgxInputGroupBase as any, { descendants: true, read: IgxDateRangeInputsBaseComponent })
+    public projectedInputs!: QueryList<IgxDateRangeInputsBaseComponent>;
 
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
@@ -649,6 +654,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this.attachOnTouched();
 
         this.setRequiredToInputs();
+        this.renderDefaultToggleIcons();
 
         if (this._ngControl) {
             this._statusChanges$ = this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
@@ -855,6 +861,33 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         });
     }
 
+    private renderDefaultToggleIcons(): void {
+        if (!this.projectedInputs || this.projectedInputs.length === 0) {
+            return;
+        }
+
+        const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
+        const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
+
+        if (start && !this.hasStartToggle) {
+            start.toggleSlot.createEmbeddedView(this.defIcon);
+        }
+
+        if (end && !this.hasEndToggle) {
+            end.toggleSlot.createEmbeddedView(this.defIcon);
+        }
+    }
+
+    private get hasStartToggle(): boolean {
+        const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
+        return !!start?.projectedToggle;
+    }
+
+    private get hasEndToggle(): boolean {
+        const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
+        return !!end?.projectedToggle;
+    }
+
     private parseMinValue(value: string | Date): Date | null {
         let minValue: Date = parseDate(value);
         if (!minValue && this.hasProjectedInputs) {

projects/igniteui-angular/src/lib/input-group/input-group.component.html

@@ -74,6 +74,7 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
+            <ng-template #toggleSlot></ng-template>
         </div>
 
         <ng-container>
@@ -107,6 +108,7 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
+            <ng-template #toggleSlot></ng-template>
         </div>
 
 
@@ -133,6 +135,7 @@
     <div class="igx-input-group__bundle">
         <div class="igx-input-group__bundle-start">
             <ng-container *ngTemplateOutlet="prefix"></ng-container>
+            <ng-template #toggleSlot></ng-template>
         </div>
 
         <ng-container *ngTemplateOutlet="input"></ng-container>