Fixed #11471 - Input Components | Clear support

src/app/components/autocomplete/autocomplete.css

@@ -94,3 +94,14 @@
 .p-fluid .p-autocomplete-dd .p-autocomplete-input {
     width: 1%;
 }
+
+.p-autocomplete-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-autocomplete-clearable {
+    position: relative;
+} 

src/app/components/autocomplete/autocomplete.ts

@@ -23,8 +23,10 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
             <input *ngIf="!multiple" #in [attr.type]="type" [attr.id]="inputId" [ngStyle]="inputStyle" [class]="inputStyleClass" [autocomplete]="autocomplete" [attr.required]="required" [attr.name]="name"
             class="p-autocomplete-input p-inputtext p-component" [ngClass]="{'p-autocomplete-dd-input':dropdown,'p-disabled': disabled}" [value]="inputFieldValue" aria-autocomplete="list" role="searchbox"
             (click)="onInputClick($event)" (input)="onInput($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" [attr.autofocus]="autofocus" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (change)="onInputChange($event)" (paste)="onInputPaste($event)"
-            [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required"
-            ><ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{'p-disabled':disabled,'p-focus':focus}" (click)="multiIn.focus()">
+            [attr.placeholder]="placeholder" [attr.size]="size" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [readonly]="readonly" [disabled]="disabled" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-required]="required">
+            <i *ngIf="!multiple && inputValue && filled && !disabled && showClear" class="p-autocomplete-clear-icon pi pi-times" [style.left]="dropdown ? '72%' : ''"  (click)="clear()"></i>
+            <i *ngIf="multiple && value && filled && !disabled && showClear" class="p-autocomplete-clear-icon pi pi-times" [style.left]="dropdown ? '72%' : ''" (click)="clear()"></i>
+            <ul *ngIf="multiple" #multiContainer class="p-autocomplete-multiple-container p-component p-inputtext" [ngClass]="{'p-disabled':disabled,'p-focus':focus}" (click)="multiIn.focus()">
                 <li #token *ngFor="let val of value" class="p-autocomplete-token">
                     <ng-container *ngTemplateOutlet="selectedItemTemplate; context: {$implicit: val}"></ng-container>
                     <span *ngIf="!selectedItemTemplate" class="p-autocomplete-token-label">{{resolveFieldData(val)}}</span>
@@ -98,7 +100,8 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': '(focus && !disabled) || overlayVisible'
+        '[class.p-inputwrapper-focus]': '(focus && !disabled) || overlayVisible',
+        '[class.p-autocomplete-clearable]': 'showClear && !disabled'
     },
     providers: [AUTOCOMPLETE_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -169,6 +172,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     @Input() completeOnFocus: boolean = false;
 
+    @Input() showClear: boolean = true;
+
     @Output() completeMethod: EventEmitter<any> = new EventEmitter();
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
@@ -297,6 +302,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
 
     virtualScrollSelectedIndex: number;
 
+    inputValue: string = null;
+
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public differs: IterableDiffers, public config: PrimeNGConfig, public overlayService: OverlayService) {
         this.differ = differs.find([]).create(null);
         this.listId = UniqueComponentId() + '_list';
@@ -452,6 +459,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
         }
 
         let value = (<HTMLInputElement> event.target).value;
+        this.inputValue = value;
         if (!this.multiple && !this.forceSelection) {
             this.onModelChange(value);
         }
@@ -535,6 +543,18 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy
         }
     }
 
+    clear() {
+        if(this.multiple) {
+            this.value = null;
+
+        } else {
+            this.inputValue = null;
+            this.inputEL.nativeElement.value = '';
+        }
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onOverlayAnimationStart(event: AnimationEvent) {
         switch (event.toState) {
             case 'visible':

src/app/components/calendar/calendar.css

@@ -158,3 +158,14 @@
     overflow: hidden;
     position: relative;
 }
+
+.p-calendar-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-calendar-clearable {
+    position: relative;
+} 

src/app/components/calendar/calendar.ts

@@ -36,8 +36,9 @@ export interface LocaleSettings {
             <ng-template [ngIf]="!inline">
                 <input #inputfield type="text" [attr.id]="inputId" [attr.name]="name" [attr.required]="required" [attr.aria-required]="required" [value]="inputFieldValue" (focus)="onInputFocus($event)" (keydown)="onInputKeydown($event)" (click)="onInputClick()" (blur)="onInputBlur($event)"
                     [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
-                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy"
-                    ><button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
+                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy">
+                    <i *ngIf="showClear && !disabled && value != null" [style.right]="showIcon ? '14%' : ''" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
+                    <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
                     [disabled]="disabled" tabindex="0"></button>
             </ng-template>
             <div #contentWrapper [class]="panelStyleClass" [ngStyle]="panelStyle" [ngClass]="{'p-datepicker p-component': true, 'p-datepicker-inline':inline,
@@ -197,7 +198,8 @@ export interface LocaleSettings {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focus'
+        '[class.p-inputwrapper-focus]': 'focus',
+        '[class.p-calendar-clearable]': 'showClear && !disabled'
     },
     providers: [CALENDAR_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -270,6 +272,8 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     @Input() showWeek: boolean = false;
 
+    @Input() showClear: boolean = true;
+
     @Input() dataType: string = 'date';
 
     @Input() selectionMode: string = 'single';
@@ -312,6 +316,8 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     @Output() onSelect: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onInput: EventEmitter<any> = new EventEmitter();
 
     @Output() onTodayClick: EventEmitter<any> = new EventEmitter();
@@ -1391,6 +1397,13 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
         }
     }
 
+    clear() {
+        this.inputFieldValue = null;
+        this.value = null;
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onOverlayClick(event) {
         this.overlayService.add({
             originalEvent: event,
@@ -1404,7 +1417,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     getYear(month) {
         return this.currentView === 'month' ? this.currentYear : month.year;
-     }
+    }
 
     switchViewButtonDisabled() {
         return this.numberOfMonths > 1 || this.disabled;

src/app/components/cascadeselect/cascadeselect.css

@@ -84,3 +84,15 @@
     left: 100%;
     top: 0;
 }
+
+.p-cascadeselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 18%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-cascadeselect-clearable {
+    position: relative;
+} 

src/app/components/cascadeselect/cascadeselect.ts

@@ -258,6 +258,7 @@ export class CascadeSelectSub implements OnInit {
                 </ng-template>
             </span>
             <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
+            <i *ngIf="!optionCleared && filled && !disabled && showClear" class="p-cascadeselect-clear-icon pi pi-times" (click)="clear($event)"></i>
                 <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
             </div>
             <div class="p-cascadeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
@@ -286,7 +287,8 @@ export class CascadeSelectSub implements OnInit {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
+        '[class.p-inputwrapper-focus]': 'focused || overlayVisible',
+        '[class.p-autocomplete-clearable]': 'showClear && !disabled'
     },
     providers: [CASCADESELECT_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -335,6 +337,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     @Input() hideTransitionOptions: string = '.1s linear';
 
+    @Input() showClear: boolean = true;
+
     @ViewChild('focusInput') focusInputEl: ElementRef;
 
     @ViewChild('container') containerEl: ElementRef;
@@ -347,6 +351,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     @Output() onHide: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @Output() onBeforeShow: EventEmitter<any> = new EventEmitter();
 
     @Output() onBeforeHide: EventEmitter<any> = new EventEmitter();
@@ -355,6 +361,8 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
 
     selectionPath: any = null;
 
+    optionCleared: boolean = false;
+
     focused: boolean = false;
 
     filled: boolean = false;
@@ -476,6 +484,16 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
         this.cd.markForCheck();
     }
 
+    clear(event) {
+        this.optionCleared = true;
+        this.value = null;
+        this.selectionPath = null;
+        this.onClear.emit();
+        this.onModelChange(this.value);
+        event.stopPropagation();
+        this.cd.markForCheck();
+    }
+
     onClick(event) {
         if (this.disabled) {
             return;
@@ -646,7 +664,7 @@ export class CascadeSelect implements OnInit, AfterContentInit, OnDestroy {
     }
 
     label   () {
-        if (this.selectionPath)
+        if (this.selectionPath && !this.optionCleared)
             return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]);
         else
             return this.placeholder||'p-emptylabel';

src/app/components/chips/chips.css

@@ -42,4 +42,16 @@
 
 .p-fluid .p-chips {
     display: flex;
-}
+}
+
+.p-chips-clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 1%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-chips-clearable {
+    position: relative;
+} 

src/app/components/chips/chips.ts

@@ -20,7 +20,8 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                     <span *ngIf="!itemTemplate" class="p-chips-token-label">{{field ? resolveFieldData(item,field) : item}}</span>
                     <span *ngIf="!disabled" class="p-chips-token-icon pi pi-times-circle" (click)="removeItem($event,i)"></span>
                 </li>
-                <li class="p-chips-input-token">
+                <li class="p-chips-input-token" [ngClass]="{'p-chips-clearable': showClear && !disabled}">
+                <i *ngIf="value != null && filled && !disabled && showClear" class="p-chips-clear-icon pi pi-times" (click)="clear()"></i>
                     <input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)"
                     (input)="onInput()" (paste)="onPaste($event)" [attr.aria-labelledby]="ariaLabelledBy" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
                 </li>
@@ -68,6 +69,8 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
     @Input() addOnBlur: boolean;
 
     @Input() separator: string;
+
+    @Input() showClear: boolean = true;
 
     @Output() onAdd: EventEmitter<any> = new EventEmitter();
 
@@ -79,6 +82,8 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
 
     @Output() onChipClick: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     @ViewChild('inputtext') inputViewChild: ElementRef;
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
@@ -243,6 +248,13 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
         }
     }
 
+    clear() {
+        this.value = null;
+        this.updateFilledState();
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onKeydown(event: KeyboardEvent): void {
         switch(event.which) {
             //backspace

src/app/components/inputnumber/inputnumber.css

@@ -100,3 +100,14 @@ p-inputnumber,
 .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
     width: 100%;
 }
+
+.p-inputnumber-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-inputnumber-clearable {
+    position: relative;
+}

src/app/components/inputnumber/inputnumber.ts

@@ -21,6 +21,7 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
                 [attr.aria-required]="ariaRequired" [disabled]="disabled" [attr.required]="required" [attr.min]="min" [attr.max]="max" [readonly]="readonly" inputmode="decimal"
                 (input)="onUserInput($event)" (keydown)="onInputKeyDown($event)" (keypress)="onInputKeyPress($event)" (paste)="onPaste($event)" (click)="onInputClick()"
                 (focus)="onInputFocus($event)" (blur)="onInputBlur($event)">
+            <i *ngIf="buttonLayout != 'vertical' && showClear && value" class="p-inputnumber-clear-icon pi pi-times" [style.right]="showButtons ? '10%' : '2%'" (click)="clear()"></i>
             <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
                 <button type="button" pButton [ngClass]="{'p-inputnumber-button p-inputnumber-button-up': true}" [class]="incrementButtonClass" [icon]="incrementButtonIcon" [disabled]="disabled"
                     (mousedown)="this.onUpButtonMouseDown($event)" (mouseup)="onUpButtonMouseUp()" (mouseleave)="onUpButtonMouseLeave()" (keydown)="onUpButtonKeyDown($event)" (keyup)="onUpButtonKeyUp()"></button>
@@ -40,7 +41,8 @@ export const INPUTNUMBER_VALUE_ACCESSOR: any = {
     host: {
         'class': 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focused'
+        '[class.p-inputwrapper-focus]': 'focused',
+        '[class.p-inputnumber-clearable]': 'showClear && buttonLayout != vertical'
     }
 })
 export class InputNumber implements OnInit,ControlValueAccessor {
@@ -119,6 +121,8 @@ export class InputNumber implements OnInit,ControlValueAccessor {
 
     @Input() inputStyleClass: string;
 
+    @Input() showClear: boolean = true;
+
     @ViewChild('input') input: ElementRef;
 
     @Output() onInput: EventEmitter<any> = new EventEmitter();
@@ -129,6 +133,8 @@ export class InputNumber implements OnInit,ControlValueAccessor {
 
     @Output() onKeyDown: EventEmitter<any> = new EventEmitter();
 
+    @Output() onClear: EventEmitter<any> = new EventEmitter();
+
     value: number;
 
     onModelChange: Function = () => {};
@@ -365,6 +371,12 @@ export class InputNumber implements OnInit,ControlValueAccessor {
         this.handleOnInput(event, currentValue, newValue);
     }
 
+    clear() {
+        this.value = null;
+        this.onModelChange(this.value);
+        this.onClear.emit();
+    }
+
     onUpButtonMouseDown(event) {
         this.input.nativeElement.focus();
         this.repeat(event, null, 1);

src/app/components/multiselect/multiselect.css

@@ -105,3 +105,14 @@
 .p-fluid .p-multiselect {
     display: flex;
 }
+
+.p-multiselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+}
+
+.p-multiselect-clearable {
+    position: relative;
+}