Clear icon enhancements for IgxDateRangePicker (#16115)

Author: ddaribo

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -13,7 +13,7 @@ import { IToggleView } from '../core/navigation';
 import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings } from '../services/overlay/utilities';
-import { IgxPickerToggleComponent } from './picker-icons.common';
+import { IgxPickerClearComponent, IgxPickerToggleComponent } from './picker-icons.common';
 import { PickerHeaderOrientation, PickerInteractionMode } from './types';
 import { WEEKDAYS } from '../calendar/calendar';
 import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
@@ -261,6 +261,10 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     @ContentChildren(IgxPickerToggleComponent, { descendants: true })
     public toggleComponents: QueryList<IgxPickerToggleComponent>;
 
+    /** @hidden @internal */
+    @ContentChildren(IgxPickerClearComponent, { descendants: true })
+    public clearComponents: QueryList<IgxPickerClearComponent>;
+
     @ContentChildren(IgxPrefixDirective, { descendants: true })
     protected prefixes: QueryList<IgxPrefixDirective>;
 
@@ -321,9 +325,8 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
 
     /** @hidden @internal */
     public ngAfterViewInit(): void {
-        this.subToIconsClicked(this.toggleComponents, () => this.open());
-        this.toggleComponents.changes.pipe(takeUntil(this._destroy$))
-            .subscribe(() => this.subToIconsClicked(this.toggleComponents, () => this.open()));
+        this.subToIconsClicked(this.toggleComponents, () => this.toggle());
+        this.subToIconsClicked(this.clearComponents, () => this.clear());
     }
 
     /** @hidden @internal */
@@ -344,17 +347,28 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     }
 
     /** Subscribes to the click events of toggle/clear icons in a query */
-    protected subToIconsClicked(components: QueryList<IgxPickerToggleComponent>, next: () => any): void {
-        components.forEach(toggle => {
-            toggle.clicked
-                .pipe(takeUntil(merge(components.changes, this._destroy$)))
-                .subscribe(next);
-        });
+    private subToIconsClicked(
+        components: QueryList<IgxPickerToggleComponent | IgxPickerClearComponent>,
+        handler: () => void
+    ): void {
+        const subscribeToClick = componentList => {
+            componentList.forEach(component => {
+                component.clicked
+                    .pipe(takeUntil(merge(componentList.changes, this._destroy$)))
+                    .subscribe(handler);
+            });
+        };
+
+        subscribeToClick(components);
+
+        components.changes.pipe(takeUntil(this._destroy$))
+            .subscribe(() => subscribeToClick(components));
     }
 
     public abstract select(value: Date | DateRange | string): void;
     public abstract open(settings?: OverlaySettings): void;
     public abstract toggle(settings?: OverlaySettings): void;
     public abstract close(): void;
+    public abstract clear(): void;
     public abstract getEditElement(): HTMLInputElement;
 }

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

@@ -5,7 +5,6 @@ import {
     ChangeDetectorRef,
     Component,
     ContentChild,
-    ContentChildren,
     ElementRef,
     EventEmitter,
     HostBinding,
@@ -19,7 +18,6 @@ import {
     Optional,
     Output,
     PipeTransform,
-    QueryList,
     Renderer2,
     ViewChild,
     ViewContainerRef,
@@ -50,7 +48,7 @@ import { DatePickerResourceStringsEN, IDatePickerResourceStrings } from '../core
 import { IBaseCancelableBrowserEventArgs, isDate, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
-import { IgxPickerActionsDirective, IgxPickerClearComponent } from '../date-common/public_api';
+import { IgxPickerActionsDirective } from '../date-common/public_api';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { DatePart, DatePartDeltas, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -414,10 +412,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Output()
     public validationFailed = new EventEmitter<IDatePickerValidationFailedEventArgs>();
 
-    /** @hidden @internal */
-    @ContentChildren(IgxPickerClearComponent)
-    public clearComponents: QueryList<IgxPickerClearComponent>;
-
     /** @hidden @internal */
     @ContentChild(IgxLabelDirective)
     public label: IgxLabelDirective;
@@ -784,10 +778,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this.subscribeToOverlayEvents();
         this.subscribeToDateEditorEvents();
 
-        this.subToIconsClicked(this.clearComponents, () => this.clear());
-        this.clearComponents.changes.pipe(takeUntil(this._destroy$))
-            .subscribe(() => this.subToIconsClicked(this.clearComponents, () => this.clear()));
-
         this._dropDownOverlaySettings.excludeFromOutsideClick = [this.inputGroup.element.nativeElement];
 
         fromEvent(this.inputDirective.nativeElement, 'blur')

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

@@ -19,21 +19,31 @@
     <igx-icon family="default" name="date_range"></igx-icon>
 </ng-template>
 
+<ng-template #clearIcon>
+    <igx-icon family="default" name="input_clear" [attr.aria-hidden]="true"></igx-icon>
+</ng-template>
+
 <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()">
+                <ng-container *ngTemplateOutlet="clearIcon"></ng-container>
+            </igx-suffix>
+        }
+
         <ng-container ngProjectAs="[igxLabel]">
             <ng-content select="[igxLabel]"></ng-content>
         </ng-container>