feat(drp): clear projected inputs, if any, in clear method

Author: ddaribo

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

@@ -19,6 +19,10 @@
     <igx-icon family="default" name="date_range" [attr.aria-hidden]="true"></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>
@@ -36,7 +40,7 @@
 
         @if (!clearComponents.length && value) {
             <igx-suffix (click)="clear()">
-                <igx-icon family="default" name="input_clear"></igx-icon>
+                <ng-container *ngTemplateOutlet="clearIcon"></ng-container>
             </igx-suffix>
         }
 

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

@@ -584,10 +584,17 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     public clear(): void {
-        // TODO clear the projected inputs
-        if (!this.disabled) {
-            this.value = null;
-            this._calendar?.deselectDate();
+        if (this.disabled) {
+            return;
+        }
+
+        this.value = null;
+        this._calendar?.deselectDate();
+        if (this.hasProjectedInputs) {
+            this.projectedInputs.forEach((i) => {
+                i.inputDirective.clear();
+            });
+        } else {
             this.inputDirective.clear();
         }
     }