[ADF-4755][CardViewDate&SelectItemComponent] Provide a way to reset date and none option as default. (#4955)

* [ADF-4755] [CardViewDateItemComponent] Provide a way to reset date.

* Added clear icon to reset date to empty.
* Added Translation key to the new icon.

* * Added displayClearAction flag to toggle clear action.* Added None as default for the selectItem components.* Added displayNoneOption flag to toggle the default none option.

* * Fixed comments.

* * Added translation key for 'none'  option.

* * Updated dateItem css to the match recent changes.

* * Fixed failing unit tests* Updated TaskHeader components with the displayClearAction.

* * Updated demo shell card-view component to test the latest changes

demo-shell/src/app/components/card-view/card-view.component.html

@@ -4,7 +4,9 @@
     <mat-card class="adf-card-view">
         <adf-card-view
             [properties]="properties"
-            [editable]="true">
+            [editable]="true"
+            [displayClearAction]="showClearDateAction"
+            [displayNoneOption]="showNoneOption">
         </adf-card-view>
     </mat-card>
 
@@ -22,6 +24,20 @@
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-clear-date"
+        [color]="'primary'"
+        (change)="toggleClearDate()"
+        [checked]="showClearDateAction">
+        Show clear date icon
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-none-option"
+        [color]="'primary'"
+        (change)="toggleNoneOption()"
+        [checked]="showNoneOption">
+        Show none option
     </mat-slide-toggle>
 </p>
 

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -44,6 +44,8 @@ export class CardViewComponent implements OnInit, OnDestroy {
     isEditable = true;
     properties: any;
     logs: string[];
+    showClearDateAction = false;
+    showNoneOption = false;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -166,6 +168,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
         this.createCard();
     }
 
+    toggleClearDate() {
+        this.showClearDateAction = !this.showClearDateAction;
+    }
+
+    toggleNoneOption() {
+        this.showNoneOption = !this.showNoneOption;
+    }
+
     reset() {
         this.isEditable = true;
         this.createCard();