feat(drp): add default clear icon in single input

Author: ddaribo

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

@@ -22,18 +22,24 @@
 <ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>
 
 <ng-template #defTemplate>
-    <igx-input-group [type]="type" (click)="open()">
+    <igx-input-group [type]="type">
         <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->
         <input #singleInput igxInput type="text" readonly [disabled]="disabled" [placeholder]="value ? '' : singleInputFormat"
             role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!collapsed" [attr.aria-labelledby]="label?.id"
             [value]="value | dateRange: appliedFormat : locale : formatter" />
 
         @if (!toggleComponents.length) {
-            <igx-prefix>
+            <igx-prefix (click)="toggle()">
                 <ng-container *ngTemplateOutlet="defIcon"></ng-container>
             </igx-prefix>
         }
 
+        @if (!clearComponents.length && value) {
+            <igx-suffix (click)="clear()">
+                <igx-icon family="default" name="input_clear"></igx-icon>
+            </igx-suffix>
+        }
+
         <ng-container ngProjectAs="[igxLabel]">
             <ng-content select="[igxLabel]"></ng-content>
         </ng-container>

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
-import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
+import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
 import { PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
@@ -29,6 +29,7 @@ import localeBg from "@angular/common/locales/bg";
 // The number of milliseconds in one day
 const DEBOUNCE_TIME = 16;
 const DEFAULT_ICON_TEXT = 'date_range';
+const CLEAR_ICON_TEXT = 'clear';
 const DEFAULT_FORMAT_OPTIONS = { day: '2-digit', month: '2-digit', year: 'numeric' };
 const CSS_CLASS_INPUT_BUNDLE = '.igx-input-group__bundle';
 const CSS_CLASS_INPUT_START = '.igx-input-group__bundle-start'
@@ -399,6 +400,72 @@ describe('IgxDateRangePicker', () => {
                 });
             });
 
+            describe('Clear tests', () => {
+                describe('Default clear icon', () => {
+                    it('should display default clear icon when value is set', () => {
+                        const inputGroup = fixture.debugElement.query(By.directive(IgxInputGroupComponent));
+                        let suffix = inputGroup.query(By.directive(IgxSuffixDirective));
+                        expect(suffix).toBeNull();
+
+                        dateRange.value = { start: new Date(2025, 1, 1), end: new Date(2025, 1, 2) };
+                        fixture.detectChanges();
+
+                        suffix = inputGroup.query(By.directive(IgxSuffixDirective));
+                        const icon = suffix.query(By.css(CSS_CLASS_ICON));
+                        expect(icon).not.toBeNull();
+                        expect(icon.nativeElement.textContent.trim()).toEqual(CLEAR_ICON_TEXT);
+                    });
+
+                    it('should clear the value when clicking the default clear icon (suffix)', fakeAsync(() => {
+                        dateRange.value = { start: new Date(2025, 1, 1), end: new Date(2025, 1, 2) };
+                        fixture.detectChanges();
+
+                        const inputGroup = fixture.debugElement.query(By.directive(IgxInputGroupComponent));
+                        let suffix = inputGroup.query(By.directive(IgxSuffixDirective));
+                        spyOn(dateRange.valueChange, 'emit');
+
+                        UIInteractions.simulateClickAndSelectEvent(suffix.nativeElement);
+                        tick();
+                        fixture.detectChanges();
+
+                        expect(dateRange.value).toBeNull();
+                        suffix = inputGroup.query(By.directive(IgxSuffixDirective));
+                        expect(suffix).toBeNull();
+                        expect(dateRange.valueChange.emit).toHaveBeenCalledOnceWith(null);
+                    }));
+
+                    it('should not clear the value when clicking element in the suffix that is not the clear icon', fakeAsync(() => {
+                        fixture = TestBed.createComponent(DateRangeTemplatesComponent);
+                        fixture.detectChanges();
+
+                        dateRange = fixture.debugElement.queryAll(By.directive(IgxDateRangePickerComponent))[0].componentInstance;
+                        const range = { start: new Date(2025, 1, 1), end: new Date(2025, 1, 2) };
+                        dateRange.value = range;
+                        fixture.detectChanges();
+
+                        const suffixIconText = 'flight_land';
+                        const inputGroupsEnd = fixture.debugElement.queryAll(By.css(CSS_CLASS_INPUT_END));
+
+                        const customSuffix = inputGroupsEnd[1];
+                        expect(customSuffix.children[0].nativeElement.innerText).toBe(suffixIconText);
+                        expect(customSuffix.children[0].children[0].classes[CSS_CLASS_ICON]).toBeTruthy();
+
+                        const suffix = inputGroupsEnd[0];
+                        const icon = suffix.query(By.css(CSS_CLASS_ICON));
+                        expect(icon).not.toBeNull();
+                        expect(icon.nativeElement.textContent.trim()).toEqual(CLEAR_ICON_TEXT);
+
+                        UIInteractions.simulateClickAndSelectEvent(customSuffix.nativeElement);
+                        tick();
+                        fixture.detectChanges();
+
+                        expect(dateRange.value).toEqual(range);
+                    }));
+                });
+
+                //xdescribe('Projected clear icon', () => {});
+            });
+
             describe('Properties & events tests', () => {
                 it('should display placeholder', () => {
                     fixture.detectChanges();

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

@@ -19,12 +19,12 @@ import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } fro
 import { IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
-import { IgxPickerActionsDirective } from '../date-common/picker-icons.common';
+import { IgxPickerActionsDirective, IgxPickerClearComponent } from '../date-common/picker-icons.common';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import {
     IgxInputDirective, IgxInputGroupComponent, IgxInputGroupType, IgxInputState,
-    IgxLabelDirective, IGX_INPUT_GROUP_TYPE
+    IgxLabelDirective, IGX_INPUT_GROUP_TYPE, IgxSuffixDirective
 } from '../input-group/public_api';
 import {
     AutoPositionStrategy, IgxOverlayService, OverlayCancelableEventArgs, OverlayEventArgs,
@@ -73,6 +73,7 @@ const SingleInputDatesConcatenationString = ' - ';
         IgxInputGroupComponent,
         IgxInputDirective,
         IgxPrefixDirective,
+        IgxSuffixDirective,
         DateRangePickerFormatPipe
     ]
 })
@@ -301,6 +302,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @ContentChildren(IgxDateRangeInputsBaseComponent)
     public projectedInputs: QueryList<IgxDateRangeInputsBaseComponent>;
 
+    /** @hidden @internal */
+    @ContentChildren(IgxPickerClearComponent)
+    public clearComponents: QueryList<IgxPickerClearComponent>;
+
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
 
@@ -574,6 +579,23 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this.handleSelection(dateRange);
     }
 
+    /**
+     * Clears the input field(s) and the picker's value.
+     *
+     * @example
+     * ```typescript
+     * this.dateRangePicker.clear();
+     * ```
+     */
+    public clear(): void {
+        // TODO clear the projected inputs
+        if (!this.disabled) {
+            this.value = null;
+            this._calendar?.deselectDate();
+            this.inputDirective.clear();
+        }
+    }
+
     /** @hidden @internal */
     public writeValue(value: DateRange): void {
         this.updateValue(value);