Merge pull request #1322 from GSA/input-clear

Clear icon added to the input component

libs/packages/sam-formly/src/lib/formly/formly.module.ts

@@ -36,6 +36,7 @@ import {
   chevronDown,
   infoCircleFill,
   calendar,
+  x,
 } from 'ngx-bootstrap-icons';
 import { UsaAccordionModule, UsaFileInputModule } from '@gsa-sam/ngx-uswds';
 import { IconModule } from '@gsa-sam/ngx-uswds-icons';
@@ -175,6 +176,7 @@ export const DATE_FORMAT: MatDateFormats = {
       chevronDown,
       infoCircleFill,
       calendar,
+      x,
     }),
     FormlyModule.forChild(FORMLY_CONFIG),
     FormlyModule.forRoot({

libs/packages/sam-formly/src/lib/formly/types/input.ts

@@ -3,19 +3,33 @@ import { FieldType } from '@ngx-formly/core';
 
 @Component({
   selector: 'sds-formly-field-input',
-  template: `
+  template: ` <div class="maxw-mobile-lg position-relative">
     <input
       [ngClass]="{
         'usa-input--disabled': to.disabled,
         'usa-input--error': showError
       }"
-      class="usa-input"
+      class="usa-input padding-right-3"
       [placeholder]="to.placeholder"
       name="input-success"
       [formlyAttributes]="field"
       [type]="to.inputType ? to.inputType : 'text'"
       [formControl]="formControl"
     />
-  `,
+    <ng-container *ngIf="field.formControl.value">
+      <span class="position-absolute right-105 top-1 cursor-pointer bg-white">
+        <span
+          role="button"
+          aria-label="Clear input"
+          (click)="field.formControl.reset()"
+          (keyup.enter)="field.formControl.reset()"
+          tabindex="0"
+          class="icon-container"
+        >
+          <usa-icon [icon]="'x'" size="lg" class="font-sans-xs"></usa-icon>
+        </span>
+      </span>
+    </ng-container>
+  </div>`,
 })
 export class FormlyFieldInputComponent extends FieldType {}