From 33d23ccf593a74bd1ff1a177be8f9caa33c8a987 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 5 Aug 2025 17:14:45 +0300
Subject: [PATCH] feat(drp): add toggle and clear icons to both inputs

---
 .../daterangepicker-start-end.html             |  9 +++++++++
 .../daterangepicker-start-end.ts               |  6 ++++--
 .../daterangepicker-styling.html               |  9 +++++++++
 .../daterangepicker-styling.ts                 |  5 +++--
 .../daterangepicker-validation.html            | 18 ++++++++++++++++++
 .../daterangepicker-validation.ts              |  6 ++++--
 6 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html b/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html
index 7abc6dc3c3..08de879a90 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html
+++ b/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html
@@ -4,8 +4,17 @@
         <igx-picker-toggle igxPrefix>
             <igx-icon>calendar_today</igx-icon>
         </igx-picker-toggle>
+        <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-start>
     <igx-date-range-end>
+        <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
         <input igxInput igxDateTimeEditor type="text">
+          <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-end>
 </igx-date-range-picker>
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts b/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts
index 937eb37324..bbf375ea7d 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts
+++ b/src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
-import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
+import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxPickerClearComponent, IgxSuffixDirective } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'app-rangedatepicker-start-end',
     styleUrls: ['./daterangepicker-start-end.scss'],
     templateUrl: './daterangepicker-start-end.html',
-    imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
+    imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
+              IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective,
+              IgxPickerClearComponent]
 })
 export class DateRangePickerStartEndComponent {
     public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html
index 2c35870404..02a71ef549 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html
+++ b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html
@@ -4,8 +4,17 @@
         <igx-picker-toggle igxPrefix>
             <igx-icon>calendar_today</igx-icon>
         </igx-picker-toggle>
+        <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-start>
     <igx-date-range-end>
+         <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
         <input igxInput igxDateTimeEditor type="text">
+         <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-end>
 </igx-date-range-picker>
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts
index e78449c226..8f6329add1 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts
+++ b/src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts
@@ -1,12 +1,13 @@
 import { Component, ElementRef, inject } from '@angular/core';
-import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
+import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'app-styled-rangedatepicker',
     styleUrls: ['./daterangepicker-styling.scss'],
     templateUrl: './daterangepicker-styling.html',
-    imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
+    imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
+              IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent]
 })
 export class StyledDateRangePickerComponent {
     element = inject(ElementRef);
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html b/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html
index 5a8ab99e68..fdeae41303 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html
+++ b/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html
@@ -10,10 +10,19 @@
         </igx-picker-toggle>
         <label igxLabel>Start Date</label>
         <input igxInput igxDateTimeEditor type="text">
+         <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-start>
     <igx-date-range-end>
+        <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
         <label igxLabel>End Date</label>
         <input igxInput igxDateTimeEditor type="text">
+         <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-end>
 </igx-date-range-picker>
 
@@ -24,9 +33,18 @@
         </igx-picker-toggle>
         <label igxLabel>Start Date</label>
         <input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
+        <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-start>
     <igx-date-range-end>
+        <igx-picker-toggle igxPrefix>
+            <igx-icon>calendar_today</igx-icon>
+        </igx-picker-toggle>
         <label igxLabel>End Date</label>
         <input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
+        <igx-picker-clear igxSuffix>
+            <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
     </igx-date-range-end>
 </igx-date-range-picker>
diff --git a/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts b/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts
index 7fa18e9c0e..8ce3afff66 100644
--- a/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts
+++ b/src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
-import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent } from 'igniteui-angular';
+import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
 
 @Component({
     selector: 'app-daterangepicker-validation',
     styleUrls: ['./daterangepicker-validation.scss'],
     templateUrl: './daterangepicker-validation.html',
-    imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent]
+    imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent,
+              IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent,
+              IgxSuffixDirective, IgxPickerClearComponent]
 })
 export class DateRangePickerValidationComponent {
     public rangeSingle: DateRange;