import { Platform } from '@angular/cdk/platform';
import { AutofillMonitor } from '@angular/cdk/text-field';
import {
AfterContentInit,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
DoCheck,
ElementRef,
EventEmitter,
Inject,
Input,
isDevMode,
NgZone,
OnChanges,
OnDestroy,
Optional,
Output,
Renderer2,
Self,
SimpleChanges,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
AbstractControl,
FormControl,
NgControl,
} from '@angular/forms';
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE,
} from '@angular/material/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faTimesCircle } from '@fortawesome/pro-solid-svg-icons/faTimesCircle';
import { Subject } from 'rxjs';
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import { createTextMaskInputElement } from 'text-mask-core/dist/textMaskCore';
import {
coerceNumberProperty,
hasRequiredControl,
inputHasChanged,
isFunction,
isNumber,
isValidDate,
noop,
TsDocumentService,
} from '@terminus/fe-utilities';
import { TsFormFieldControl } from '@terminus/ui-form-field';
import { TsDatePipe } from '@terminus/ui-pipes';
import { TS_SPACING } from '@terminus/ui-spacing';
import { TsStyleThemeTypes } from '@terminus/ui-utilities';
import {
TS_DATE_FORMATS,
TsDateAdapter,
} from '../date-adapter/date-adapter';
import { TS_INPUT_VALUE_ACCESSOR } from '../input-value-accessor';
export interface TextMaskInputElement {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
state: Record<string, any>;
update: Function;
}
/**
* Define the function type for date filters. Used by {@link TsInputComponent}
*/
export type TsDateFilterFunction = (d: Date) => boolean;
/**
* Define the allowed {@link TsInputComponent} input types
*/
export type TsInputTypes
= 'text'
| 'password'
| 'email'
| 'hidden'
| 'number'
| 'search'
| 'tel'
| 'url'
;
/**
* Define the allowed autocomplete variations for {@link TsInputComponent}
*
* NOTE: This is not all valid types; only the ones this library supports.
*/
export type TsInputAutocompleteTypes
= 'off'
| 'on'
| 'name'
| 'email'
| 'username'
| 'new-password'
| 'current-password'
| 'tel'
;
/**
* A function that returns an array of RegExp (used to determine postal code RegExp in {@link TsInputComponent})
*/
export type TsMaskFunction = (value: string) => (RegExp | string)[];
/**
* An individual mask definition. Used by {@link TsInputComponent}
*/
export interface TsMask {
mask: (RegExp | string)[] | TsMaskFunction | false;
unmaskRegex?: RegExp;
pipe?: Function;
guide?: boolean;
showMask?: boolean;
keepCharPositions?: boolean;
}
/**
* The collection of masks. Used by {@link TsInputComponent}
*/
export interface TsMaskCollection {
[key: string]: TsMask;
}
/**
* Define the allowed mask shortcut option. Used by {@link TsInputComponent}
*/
export type TsMaskShortcutOptions
= 'currency'
| 'date'
| 'number'
| 'percentage'
| 'phone'
| 'postal'
// matches all characters
| 'default'
;
/**
* Create an array used to verify the passed in shortcut is valid. Used by {@link TsInputComponent}
*/
const allowedMaskShortcuts: TsMaskShortcutOptions[] = [
'currency',
'date',
'number',
'percentage',
'phone',
'postal',
'default',
];
// Unique ID for each instance
let nextUniqueId = 0;
const AUTOCOMPLETE_DEFAULT: TsInputAutocompleteTypes = 'on';
const NUMBER_ONLY_REGEX = /[^0-9]/g;
const NUMBER_WITH_DECIMAL_REGEX = /[^0-9.]/g;
const DEFAULT_TEXTAREA_ROWS = 4;
const DEFAULT_DATE_LOCALE = 'en-US';
/**
* A presentational component to render a text input, textarea, or datepicker.
*
* @example
* <ts-input
* [autocapitalize]="false"
* autocomplete="email"
* [dateFilter]="myFilterFunction"
* dateLocale="en-US"
* [datepicker]="true"
* [formControl]="myForm.get('myControl')"
* [hasExternalFormField]="true"
* [hideRequiredMarker]="false"
* hint="My hint!"
* id="my-id"
* [isClearable]="true"
* [isDisabled]="false"
* [isFocused]="false"
* [isRequired]="false"
* label="My Label Text"
* mask="phone"
* [maskAllowDecimal]="true"
* [maskSanitizeValue]="true"
* maxDate="{{ new Date(1990, 1, 1) }}"
* minDate="{{ new Date(1990, 1, 1) }}"
* name="password"
* [(ngModel]="myModel"
* openTo="{{ new Date(1990, 1, 1) }}"
* prefixIcon="myIconReference"
* suffixIcon="myIconReference"
* [readOnly]="false"
* [spellcheck]="false"
* startingView="year"
* tabIndex="2"
* theme="primary"
* type="text"
* [validateOnChange]="false"
* (cleared)="userClearedInput($event)"
* (inputBlur)="userLeftInput($event)"
* (inputFocus)="userFocusedInput($event)"
* (selected)="userSelectedFromCalendar($event)"
* ></ts-input>
*
* <example-url>https://getterminus.github.io/ui-demos-release/components/input</example-url>
*/
@Component({
selector: 'ts-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss'],
host: {
'class': 'ts-input',
'[class.ts-input--datepicker]': 'datepicker',
},
providers: [
{
provide: TsFormFieldControl,
useExisting: TsInputComponent,
},
{
provide: DateAdapter,
useClass: TsDateAdapter,
},
{
provide: MAT_DATE_FORMATS,
useValue: TS_DATE_FORMATS,
},
{
provide: MAT_DATE_LOCALE,
useValue: DEFAULT_DATE_LOCALE,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
exportAs: 'tsInput',
})
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export class TsInputComponent implements TsFormFieldControl<any>, AfterViewInit, AfterContentInit, DoCheck, OnChanges, OnDestroy {
/**
* Emits when the value changes (either due to user input or programmatic change). Need for Material Datepicker.
*
* NOTE: Underscore naming convention needed since that is what the Material datepicker will subscribe to.
*/
public _valueChange: EventEmitter<Date | null> = new EventEmitter();
/**
* The aria-describedby attribute on the input for improved a11y
*/
public ariaDescribedby: string | undefined;
/**
* Define if the input has been autofilled
*/
public autofilled = false;
/**
* Define an InputValueAccessor for this component
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private inputValueAccessor: {value: any};
/**
* Store the current mask
*/
private currentMask!: TsMask;
/**
* Define the default format for the date mask
*/
private defaultDateFormat = 'mm-dd-yyyy';
/**
* Store a reference to the document object
*/
private document: Document;
/**
* Define the flex layout gap
*/
public flexGap = TS_SPACING.small[0];
/**
* Define whether the input has focus
*
* Implemented as part of {@link TsFormFieldControl}
*/
public focused = false;
/**
* Implemented as part of TsFormFieldControl.
*/
public readonly labelChanges: Subject<void> = new Subject<void>();
/**
* Store the last value for comparison
*/
private lastValue!: string;
/**
* Define placeholder for callback (provided later by the control value accessor)
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private onChangeCallback: (_: any) => void = noop;
/**
* Define placeholder for callback (provided later by the control value accessor)
*/
private onTouchedCallback: () => void = noop;
/**
* Store the previous value
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private previousNativeValue: any;
/**
* Reference to itself. Passed to {@link TsFormFieldComponent}.
*/
public selfReference: TsInputComponent = this;
/**
* Implemented as part of TsFormFieldControl.
*/
public readonly stateChanges: Subject<void> = new Subject<void>();
/**
* Base settings for the mask
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private textMaskConfig: Record<string, any> = {
mask: null,
guide: false,
keepCharPositions: false,
};
/**
* Store the mask instance
*/
private textMaskInputElement!: TextMaskInputElement;
/*
* The textual value of the date entered into the input.
*/
private textualDateValue = '';
/**
* Define the default component ID
*/
protected uid = `ts-input-${nextUniqueId++}`;
/**
* Expose reference to the Material datepicker component
*/
@ViewChild('picker')
public picker!: MatDatepicker<string>;
/**
* Provide access to the input
*/
@ViewChild('inputElement')
public inputElement!: ElementRef<HTMLInputElement>;
/**
* Determine if the input is empty
*
* 1. Input exists
* 2. Input has no value
* 3. Native input validation is valid
* 4. Input is not filled by browser
*
* Implemented as part of {@link TsFormFieldControl}.
*/
public get empty(): boolean {
// Since we are using ViewChild, we need to verify the existence of the element
const input = this.inputElement && this.inputElement.nativeElement;
if (!input) {
return true;
}
return !!input && !input.value && !this.isBadInput() && !this.autofilled;
}
/**
* Getter returning a boolean based on both the component `isDisabled` flag and the FormControl's disabled status
*/
public get shouldBeDisabled(): boolean {
return this.formControl.disabled || this.isDisabled;
}
/**
* Determine if the label should float
*/
public get shouldLabelFloat(): boolean {
return this.focused || !this.empty;
}
/**
* Set the accessor and call the onchange callback
*
* @param v
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public set value(v: any) {
const oldDate = this.value;
// istanbul ignore else
if (v !== this.value) {
const sanitizedValue = this.maskSanitizeValue && this.currentMask ? this.cleanValue(v, this.currentMask.unmaskRegex) : v;
this.inputValueAccessor.value = v;
this.onChangeCallback(sanitizedValue);
this.stateChanges.next();
}
// istanbul ignore else
if (this.datepicker) {
// istanbul ignore else
if (!this.dateAdapter.sameDate(oldDate, v)) {
this._valueChange.emit(v);
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public get value(): any {
return this.inputValueAccessor.value;
}
/**
* Define if the input should autocapitalize
* (standard HTML5 property)
*/
@Input()
public autocapitalize = false;
/**
* Define if the input should autocomplete. See {@link TsInputAutocompleteTypes}.
*
* @param value
*/
@Input()
public set autocomplete(value: TsInputAutocompleteTypes) {
if (value) {
this._autocomplete = value;
} else {
this._autocomplete = 'on';
}
}
public get autocomplete(): TsInputAutocompleteTypes {
return this._autocomplete;
}
private _autocomplete: TsInputAutocompleteTypes = 'on';
/**
* Define a date filter to disallow certain dates for the datepicker
*
* @param value
*/
@Input()
public set dateFilter(value: TsDateFilterFunction | undefined) {
this._dateFilter = value;
}
public get dateFilter(): TsDateFilterFunction | undefined {
return this._dateFilter;
}
private _dateFilter: TsDateFilterFunction | undefined;
/**
* Allow the date locale to be changed
*
* @param value
*/
@Input()
public set dateLocale(value: string) {
this._dateLocale = value ? value : DEFAULT_DATE_LOCALE;
this.setDateLocale(this.dateLocale);
}
public get dateLocale(): string {
return this._dateLocale;
}
private _dateLocale: string = DEFAULT_DATE_LOCALE;
/**
* Define if the datepicker should be enabled
*
* @param value
*/
@Input()
public set datepicker(value: boolean) {
this._datepicker = value;
// When using a datepicker, we need to validate on change so that selecting a date from the calendar
// istanbul ignore else
if (this.datepicker) {
this.validateOnChange = true;
}
}
public get datepicker(): boolean {
return this._datepicker;
}
private _datepicker = false;
/**
* Define the form control to get access to validators
*
* @param value
*/
@Input()
public set formControl(value: FormControl) {
// istanbul ignore else
if (value) {
this._formControl = value;
// Register the onChange for the new control
this.registerOnChangeFn(this.updateInnerValue);
// Seed any existing value from the FormControl into the component
// HACK: This is to get around ExpressionChangedAfterChecked error.
Promise.resolve(null).then(() => {
this.inputValueAccessor.value = this._formControl.value;
});
// HACK: This is to get disabled field set properly on both datepicker and input level
// eslint-disable-next-line dot-notation
if (!this.changeDetectorRef['destroyed']) {
this.changeDetectorRef.detectChanges();
}
}
}
public get formControl(): FormControl {
return this._formControl;
}
private _formControl: FormControl = new FormControl();
// eslint-disable-next-line @typescript-eslint/explicit-member-accessibility, @typescript-eslint/naming-convention
static ngAcceptInputType_formControl: FormControl | AbstractControl;
/**
* Define if the use-case provides it's own {@link TsFormFieldComponent} or if this component should provide it's own.
*/
@Input()
public hasExternalFormField = false;
/**
* Define if a required marker should be included
*/
@Input()
public hideRequiredMarker = false;
/**
* Define a hint for the input
*
* @param value
*/
@Input()
public set hint(value: string | undefined) {
this._hint = value;
}
public get hint(): string | undefined {
return this._hint;
}
private _hint: string | undefined;
/**
* Define an ID for the component
*
* @param value
*/
@Input()
public set id(value: string) {
this._id = value || this.uid;
}
public get id(): string {
return this._id;
}
protected _id: string = this.uid;
/**
* Define if the input should surface the ability to clear it's value
*/
@Input()
public isClearable = false;
/**
* Define if the input should be disabled
*
* Implemented as part of {@link TsFormFieldControl}
*/
@Input()
public isDisabled = false;
/**
* Define if the input should be focused
*
* @param value
*/
@Input()
public set isFocused(value: boolean) {
this._isFocused = value;
if (this._isFocused) {
this.focus();
}
}
public get isFocused(): boolean {
return this._isFocused;
}
private _isFocused = false;
/**
* Define if the input is required
*
* Implemented as part of {@link TsFormFieldControl}
*
* @param value
*/
@Input()
public set isRequired(value: boolean) {
this._isRequired = value;
}
public get isRequired(): boolean {
const requiredFormControl = (this.formControl && hasRequiredControl(this.formControl));
return this._isRequired || requiredFormControl;
}
private _isRequired = false;
/**
* Define if the input should be a textarea
*
* NOTE: This is not meant to be used with the datepicker or mask enabled.
*/
@Input()
public isTextarea = false;
/**
* Define the label
*
* @param value
*/
@Input()
public set label(value: string | undefined) {
this._label = value;
}
public get label(): string | undefined {
return this._label;
}
private _label: string | undefined;
/**
* Define a mask
*
* param value - A {@link TsMaskShortcutOptions}
*
* @param value
*/
@Input()
public set mask(value: TsMaskShortcutOptions | undefined) {
// Verify value is allowed
// istanbul ignore else
if (value && isDevMode() && (allowedMaskShortcuts.indexOf(value) < 0)) {
// eslint-disable-next-line no-console
console.warn(`TsInputComponent: "${value}" is not an allowed mask. `
+ 'Allowed masks are defined by "TsMaskShortcutOptions".');
// Fallback to the default mask (which will allow all characters)
value = 'default';
}
this._mask = value;
// Update the current mask definition
this.setMaskDefinition(value);
}
public get mask(): TsMaskShortcutOptions | undefined {
return this._mask;
}
private _mask: TsMaskShortcutOptions | undefined;
/**
* Define if decimals are allowed in numbers/currency/percentage masks
*
* @param value
*/
@Input()
public set maskAllowDecimal(value: boolean) {
const oldValue = this.maskAllowDecimal;
this._maskAllowDecimal = value;
// Re-set the definition if the value was changed
if (this.mask && this.maskAllowDecimal !== oldValue) {
this.setMaskDefinition(this.mask);
}
}
public get maskAllowDecimal(): boolean {
return this._maskAllowDecimal;
}
private _maskAllowDecimal = true;
/**
* Define if the value should be sanitized before it is saved to the model
*/
@Input()
public maskSanitizeValue = true;
/**
* Define the maximum date for the datepicker
*
* @param value
*/
@Input()
public set maxDate(value: string | Date | undefined) {
this._maxDate = (value) ? this.verifyIsDateObject(value) : undefined;
}
public get maxDate(): string | Date | undefined {
return this._maxDate;
}
private _maxDate: string | Date | undefined;
/**
* Define the minimum date for the datepicker
*
* @param value
*/
@Input()
public set minDate(value: string | Date | undefined) {
this._minDate = (value) ? this.verifyIsDateObject(value) : undefined;
}
public get minDate(): string | Date | undefined {
return this._minDate;
}
private _minDate: string | Date | undefined;
/**
* Define the name attribute value
*/
@Input()
public name: string | undefined;
/**
* Define whether formControl needs a validation or a hint
*/
@Input()
public noValidationOrHint = false;
/**
* Define a date that the calendar should open to for the datepicker
*
* @param value
*/
@Input()
public set openTo(value: Date | undefined) {
// istanbul ignore else
if ((value instanceof Date) || value === undefined) {
this._openTo = value;
}
}
public get openTo(): Date | undefined {
return this._openTo;
}
private _openTo: Date | undefined;
/**
* Define an icon to include before the input
*/
@Input()
public prefixIcon: IconProp | undefined;
/**
* Define the clear icon
*
* @deprecated This input should not be used. This icon is only used as the 'clearable' trigger.
*/
@Input()
public suffixIcon = faTimesCircle;
/**
* Define if the input is readOnly
*/
@Input()
public readOnly = false;
/**
* Define if the input should spellcheck
* (standard HTML5 property)
*/
@Input()
public spellcheck = true;
/**
* Define the starting calendar view for the datepicker
*
* @param value
*/
@Input()
public set startingView(value: 'month' | 'year') {
if (value === 'month' || value === 'year') {
this._startingView = value;
} else {
this._startingView = 'month';
}
}
public get startingView(): 'month' | 'year' {
return this._startingView;
}
private _startingView: 'month' | 'year' = 'month';
/**
* Define the tabindex for the input
*
* @param value
*/
@Input()
public set tabIndex(value: number) {
this._tabIndex = coerceNumberProperty(value);
}
public get tabIndex(): number {
return this._tabIndex;
}
private _tabIndex = 0;
/**
* Define the number of rows for a textarea
*
* NOTE: Since the 'rows' attribute of a textarea is stored as a string, we should accept both string and number.
*
* @param value
*/
@Input()
public set textareaRows(value: number) {
this._textareaRows = isNumber(value) ? Number(value) : DEFAULT_TEXTAREA_ROWS;
}
public get textareaRows(): number {
return this._textareaRows;
}
private _textareaRows = DEFAULT_TEXTAREA_ROWS;
/**
* Define the component theme
*/
@Input()
public theme: TsStyleThemeTypes = 'primary';
/**
* Define the input type (text, password etc.) See {@link TsInputTypes}
*
* @param value
*/
@Input()
public set type(value: TsInputTypes) {
if (!value) {
value = 'text';
}
// istanbul ignore else
if (this.mask && (value === 'email' || value === 'number')) {
// eslint-disable-next-line no-console
console.warn(`TsInputComponent: "${value}" is not an allowed type when used with a mask. `
+ 'When using a mask, the input type must be "text", "tel", "url", "password" or "search".');
value = 'text';
}
this._type = value;
// Update the autocomplete setting if needed
if (value === 'email') {
this.autocomplete = 'email';
} else if (this.autocomplete === 'email') {
this.autocomplete = AUTOCOMPLETE_DEFAULT;
}
}
public get type(): TsInputTypes {
return this._type;
}
private _type: TsInputTypes = 'text';
/**
* Define if validation messages should be shown immediately or on blur
*/
@Input()
public validateOnChange = false;
/**
* The event to emit when the input value is cleared
*/
@Output()
public readonly cleared: EventEmitter<boolean> = new EventEmitter();
/**
* Define an event when the input receives a blur event
*/
@Output()
public readonly inputBlur: EventEmitter<Date> = new EventEmitter();
/**
* The event to emit when the input element receives a focus event
*/
@Output()
public readonly inputFocus: EventEmitter<boolean> = new EventEmitter();
/**
* The event to emit when the input element receives a paste event
*/
@Output()
public readonly inputPaste: EventEmitter<ClipboardEvent> = new EventEmitter();
/**
* Define an event emitter to alert consumers that a date was selected
*/
@Output()
public readonly selected: EventEmitter<Date> = new EventEmitter();
constructor(
private elementRef: ElementRef,
private renderer: Renderer2,
private changeDetectorRef: ChangeDetectorRef,
private autofillMonitor: AutofillMonitor,
protected platform: Platform,
private ngZone: NgZone,
private documentService: TsDocumentService,
private datePipe: TsDatePipe,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Optional() @Self() @Inject(TS_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
@Optional() public dateAdapter: DateAdapter<Date>,
@Optional() @Self() public ngControl: NgControl,
) {
this.document = this.documentService.document;
// If no inputValueAccessor was passed in, default to a basic object with a value.
this.inputValueAccessor = inputValueAccessor || { value: undefined };
// If no value accessor was passed in, use this component for the ngControl ValueAccessor
// istanbul ignore else
if (!inputValueAccessor) {
// Setting the value accessor directly (instead of using the providers) to avoid running into a circular import.
// istanbul ignore else
if (this.ngControl != null) {
this.ngControl.valueAccessor = this;
}
}
// Store any existing value
this.previousNativeValue = this.value;
}
/**
* After the view is initialized, trigger any needed animations
*/
public ngAfterViewInit(): void {
this.setDateLocale(this.dateLocale);
// Begin monitoring for the input autofill
this.autofillMonitor.monitor(this.inputElement.nativeElement).subscribe(event => {
this.autofilled = event.isAutofilled;
this.stateChanges.next();
});
// istanbul ignore else
if (this.mask) {
this.setUpMask();
}
// Register this component as the associated input for the Material datepicker
// istanbul ignore else
// NOTE: Dangle naming controlled by Material
/* eslint-disable no-underscore-dangle */
if (this.picker && !this.picker._datepickerInput) {
// NOTE: Dangle naming controlled by Material
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.picker._registerInput(this as any);
}
/* eslint-enable no-underscore-dangle */
}
/**
* HACK: Without this hack, seeded values are not initially seen so the label overlaps the content.
*
* The issue seems to be that the elementRef.nativeElement isn't updated with the new value immediately. When manually inspecting the
* nativeElement, the value does exist. But when the `empty` getter defines it's elementRef instance, the value is not yet set.
*
* Material doesn't seem to have this issue. The only real difference is that they are implementing the ControlValueAccessor in the input
* where we are extending another class.
*
* So currently, we just check to see if the value has changed, then trigger a fake input event since the CVA for ngModel listens for the
* input event.
*/
public ngAfterContentInit(): void {
// HACK: See above.
// istanbul ignore else
if (this.value !== this.lastValue) {
const event = this.document.createEvent('Event');
event.initEvent('input', true, true);
setTimeout(() => {
this.inputElement.nativeElement.dispatchEvent(event);
});
}
// istanbul ignore else
if (this.platform.IOS) {
this.fixIOSCaretBug();
}
}
public ngDoCheck(): void {
// We need to dirty-check the native element's value, because there are some cases where we won't be notified when it changes (e.g. the
// consumer isn't using forms or they're updating the value using `emitEvent: false`).
this.dirtyCheckNativeValue();
}
/**
* Trigger needed changes when specific inputs change
*
* @param changes - The changes
*/
public ngOnChanges(changes: SimpleChanges): void {
const validMaskChange = !!(inputHasChanged(changes, 'mask') && this.mask);
const validSanitizeChange = !!(inputHasChanged(changes, 'maskSanitizeValue'));
const validDecimalChange = !!(inputHasChanged(changes, 'maskAllowDecimal'));
const validLabelChange = !!(inputHasChanged(changes, 'label'));
// istanbul ignore else
if (validMaskChange || validSanitizeChange || validDecimalChange) {
this.setUpMask();
this.updateMaskModelHack();
}
// Only re-set the value if this isn't the first change. This avoids thrashing as the component is initialized.
if (validMaskChange && !changes.mask.firstChange) {
this.setValue(this.value);
}
// HACK: If changing to the date mask dynamically, text-mask breaks. It seems to be related to checking the length of a null property in
// `conformToMask` which is called inside the file `createTextMaskInputElement.js`. To get around this bug, we clear the existing value.
// FIXME: Ideally, when switching to the date filter, any existing value would remain and be masked immediately.
if (validMaskChange && !changes.mask.firstChange && this.value) {
this.value = '';
this.formControl.setValue('');
// istanbul ignore else
if (this.textMaskInputElement) {
this.textMaskInputElement.update(this.value);
}
this.changeDetectorRef.detectChanges();
}
// Let the parent FormField know that it should update the ouline gap for the new label
if ((validLabelChange && !changes.label.firstChange)) {
// Trigger change detection first so that the FormField will be working with the latest version
this.changeDetectorRef.detectChanges();
this.labelChanges.next();
}
// istanbul ignore else
if (this.textMaskInputElement !== undefined) {
this.textMaskInputElement.update(this.inputElement.nativeElement.value);
}
this.stateChanges.next();
}
/**
* Stop monitoring autofill
*/
public ngOnDestroy(): void {
this.autofillMonitor.stopMonitoring(this.elementRef.nativeElement);
this.changeDetectorRef.detach();
// istanbul ignore else
if (this._valueChange) {
this._valueChange.complete();
}
this.stateChanges.complete();
this.labelChanges.complete();
}
/**
* Fix for the iOS caret bug
*
* On some versions of iOS the caret gets stuck in the wrong place when holding down the delete
* key. In order to get around this we need to "jiggle" the caret loose. Since this bug only
* exists on iOS, we only bother to install the listener on iOS.
* https://github.com/angular/material2/blob/release/src/lib/input/input.ts
*/
private fixIOSCaretBug(): void {
this.ngZone.runOutsideAngular(() => {
this.inputElement.nativeElement.addEventListener('keyup', (event: Event) => {
const el = event.target as HTMLInputElement;
// istanbul ignore else
if (!el.value && !el.selectionStart && !el.selectionEnd) {
// Note: Just setting `0, 0` doesn't fix the issue. Setting
// `1, 1` fixes it for the first time that you type text and
// then hold delete. Toggling to `1, 1` and then back to
// `0, 0` seems to completely fix it.
el.setSelectionRange(1, 1);
el.setSelectionRange(0, 0);
}
});
});
}
/**
* Set touched on blur
*/
public onBlur(): void {
this.onTouchedCallback();
this.inputBlur.emit(this.value);
}
/**
* Update the inner value when the formControl value is updated
*
* @param value - The value to set
*/
public updateInnerValue = (value: string): void => {
this.value = value;
// eslint-disable-next-line dot-notation
if (!this.changeDetectorRef['destroyed']) {
this.changeDetectorRef.detectChanges();
}
};
/**
* Register onChange callback (from ControlValueAccessor interface)
*
* @param fn
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public registerOnChange(fn: any): void {
this.onChangeCallback = fn;
}
/**
* Register onTouched callback (from ControlValueAccessor interface)
*
* @param fn
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public registerOnTouched(fn: any): void {
this.onTouchedCallback = fn;
}
/**
* Clear the input's value
*/
public reset(): void {
this.value = '';
this.cleared.emit(true);
this.formControl.markAsUntouched();
this.changeDetectorRef.markForCheck();
}
/**
* Callback for when the focused state of the input changes
*
* @param nowFocused - Boolean determining if the input is gaining or losing focus
*/
public focusChanged(nowFocused: boolean): void {
// istanbul ignore else
if (nowFocused !== this.focused && !this.readOnly) {
this.focused = nowFocused;
this.stateChanges.next();
}
if (nowFocused) {
this.inputFocus.emit(this.value);
} else {
// Trigger the onTouchedCallback for blur events
this.onTouchedCallback();
this.onDateChanged(this.value);
this.inputBlur.emit(this.value);
}
}
/**
* Write the value
*
* @param value - The value to write to the model
*/
public writeValue(value: string | Date): void {
if (this.mask) {
this.setUpMask();
}
// Set the initial value for cases where the mask is disabled
let normalizedValue = value ? value : '';
this.value = normalizedValue;
// Convert to a string if dealing with a date object
if (normalizedValue instanceof Date) {
normalizedValue = normalizedValue.toISOString();
}
// istanbul ignore else
if (this.inputElement) {
this.renderer.setProperty(this.inputElement, 'value', normalizedValue);
}
// istanbul ignore else
if (this.textMaskInputElement !== undefined) {
this.textMaskInputElement.update(normalizedValue);
}
}
/**
* Update values on input
*
* NOTE: KNOWN BUG that allows model and UI to get out of sync when extra characters are added after a fully satisfied mask.
*
* @param target - The event target for the input event.
*/
public onInput(target: HTMLInputElement | HTMLTextAreaElement): void {
if (!target) {
return;
}
let value = target.value;
// We need to trim the last character due to a bug in the text-mask library
const trimmedValue = this.trimLastCharacter(value);
this.inputElement.nativeElement.value = trimmedValue;
this.stateChanges.next();
// istanbul ignore else
if (this.textMaskInputElement !== undefined) {
// Update the mask.
this.textMaskInputElement.update(trimmedValue);
// Reset the value after the mask has had a chance to update it.
value = target.value;
// Verify the value has changed
// istanbul ignore else
if (this.lastValue !== value) {
this.lastValue = value;
// Trigger the change (and remove mask if needed)
this.setValue(value);
}
}
// istanbul ignore else
if (this.datepicker) {
// set the new date string the user input
this.textualDateValue = value;
this._valueChange.emit(new Date(value));
}
}
/**
* Notify consumer of date changed from the picker being used.
*
* @param date - The date that has been set.
*/
public onDateChanged(date: Date): void {
// if the user input changed since the last selection, we want to use that date.
// we also need to reset the textual date value once we use it because we don't
// want to keep it fresh in case another date is selected but no user input was given.
if (!date && this.textualDateValue) {
date = new Date(this.textualDateValue);
this.textualDateValue = '';
}
this.selected.emit(date);
}
/**
* Remove the mask if needed
*
* @param value - The value to clean
* @param regex - The RegExp to use to clean the value
* @returns The clean value
*/
private cleanValue(value: string, regex?: RegExp | Function): string {
// If there is no unmask regex, just return the value
if (!regex) {
return value;
}
// If the unmask regex is a function, invoke it to get the plain regex
// Note: There is a potential the value won't be a string during runtime. It is possible
// a form control could contain a primitive value like a number instead. Make sure it's a string.
const finalRegex: RegExp = isFunction(regex) ? regex() : regex;
return finalRegex && value ? value.toString().replace(new RegExp(finalRegex), '') : value;
}
/**
* Create the collection of possible masks
*
* @param allowDecimal - If the number based masks should allow a decimal character
* @returns The collection of masks
*/
private createMaskCollection(allowDecimal: boolean): TsMaskCollection {
return {
phone: {
mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
unmaskRegex: NUMBER_ONLY_REGEX,
},
currency: {
mask: createNumberMask({ allowDecimal }),
unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
},
number: {
mask: createNumberMask({
prefix: '',
suffix: '',
allowDecimal,
allowLeadingZeroes: true,
}),
unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
},
percentage: {
mask: createNumberMask({
prefix: '',
suffix: '%',
allowDecimal,
}),
unmaskRegex: allowDecimal ? NUMBER_WITH_DECIMAL_REGEX : NUMBER_ONLY_REGEX,
},
postal: { mask: this.determinePostalMask },
date: {
mask: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
pipe: createAutoCorrectedDatePipe(this.defaultDateFormat),
keepCharPositions: false,
},
default: { mask: false },
};
}
/**
* Helper to determine the correct postal code match (5 characters vs 9)
*
* @param value - The current postal code value
* @returns The correct mask
*/
private determinePostalMask(value: string): (RegExp | string)[] {
const MIN_POSTAL_CODE_LENGTH = 5;
if (!value || value.length <= MIN_POSTAL_CODE_LENGTH) {
return [/\d/, /\d/, /\d/, /\d/, /\d/];
}
return [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
}
/**
* Checks whether the input is invalid based on the native validation
*
* @returns Whether the native validation passes
*/
private isBadInput(): boolean {
const validity: ValidityState = (this.inputElement.nativeElement).validity;
return validity && validity.badInput;
}
/**
* Set the model value
*
* @param value - The value to set
*/
private setValue(value: string): void {
if (value && this.mask === 'date') {
this.onChangeCallback(new Date(value));
} else {
const finalValue = this.maskSanitizeValue ? this.cleanValue(value, this.currentMask.unmaskRegex) : value;
this.onChangeCallback(finalValue);
}
}
/**
* Register our custom onChange function
*
* @param fn - The onChange function
*/
private registerOnChangeFn(fn: Function): void {
// istanbul ignore else
if (this.formControl) {
this.formControl.registerOnChange(fn);
}
}
/**
* Set the current mask definition
*
* @param value - The name of the desired mask
*/
private setMaskDefinition(value: string | undefined): void {
const collection: TsMaskCollection = this.createMaskCollection(this.maskAllowDecimal);
// NOTE: If the mask doesn't match a predefined mask, default to a mask that matches all
// characters. The underlying text-mask library will error out without this fallback.
const mask = (value && collection[value]) ? collection[value] : collection.default;
// Set the current mask
this.currentMask = mask;
// Update the config with the chosen mask
this.textMaskConfig = {
...this.textMaskConfig,
...mask,
};
}
/**
* Create the mask
*/
private setUpMask(): void {
// istanbul ignore else
if (this.inputElement) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const maskOptions: {[key: string]: any} = {
inputElement: this.inputElement.nativeElement,
...this.textMaskConfig,
};
// Initialize the mask
this.textMaskInputElement = createTextMaskInputElement(maskOptions);
}
}
/**
* Update mask model
*
* HACK: Firing an event inside a timeout is the only way I can get the model to update after the mask dynamically changes. The UI
* updates perfectly, but the unsanitized model value retains the previous masked value.
*/
private updateMaskModelHack(): void {
const event = this.document.createEvent('Event');
event.initEvent('input', true, true);
setTimeout(() => {
this.inputElement.nativeElement.dispatchEvent(event);
});
}
/**
* HACK: Trim the last character of the model when the string is longer than the model
*
* KNOWN BUG: This hack does not work correcty for unsanitized percentage masks.
*
* The underlying text-mask library has a bug that allows the user to type 1 more character than the mask allows. To get around this
* issue, we are checking to see if the input value is longer than the mask. If it is, trim the last character off and set the value.
* See: https://github.com/text-mask/text-mask/issues/294#issuecomment-342299450
*
* @param value - The value to check
* @returns The trimmed value (if needed)
*/
private trimLastCharacter(value: string): string {
// This only effects masked inputs
if (this.mask) {
const mask = this.currentMask.mask;
const staticMask = isFunction(mask) ? mask(this.value) : mask;
const maskLength = staticMask ? staticMask.length /* istanbul ignore next - Unreachable */ : 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const isNumberMask: boolean = (mask as any).instanceOf === 'createNumberMask';
// istanbul ignore else
if (isFunction(mask) && isNumberMask) {
const decimals = 2;
const cleanValue = this.maskSanitizeValue ? this.cleanValue(value, this.currentMask.unmaskRegex) : value;
const split = cleanValue.split('.');
const twoItems = 2;
if (split.length === twoItems && split[1].length > decimals) {
// Trim the final character off
const trimmedValue = cleanValue.slice(0, -1);
value = trimmedValue;
}
} else {
let stringifiedDate: string | undefined;
if (this.mask === 'date') {
stringifiedDate = this.isValidDateString(value) ? this.datePipe.transform(value, 'short') : value;
}
value = stringifiedDate || value;
if (value && (maskLength > 0 && value.length > maskLength)) {
// Determine the max length to trim the extra character
// Get the cleaned value if needed
const finalValue = this.maskSanitizeValue ? this.cleanValue(stringifiedDate || value, this.currentMask.unmaskRegex) : value;
const trimmedValue = finalValue.slice(0, -1);
// Trim the final character off
value = trimmedValue;
}
}
}
return value;
}
/**
* Convert an valid date string to a Date if needed
*
* NOTE: When using 1 time bindings we are required to pass in ISO stringified dates. Adding this
* method to our setters adds support for either version
*
* @param date - The date
* @returns The Date object
*/
private verifyIsDateObject(date: string | Date): Date {
return (date instanceof Date) ? date : new Date(date);
}
/**
* Determine if a date string is valid.
*
* We cannot simply see if the string creates a valid date. The string '0' will technically create a valid Date. For our purposes, we can
* check to verify the length is correct AND it is a valid date. This works because the mask is enforcing a consistent 'length' for valid
* dates.
*
* @param value - The string
* @returns If the string is a valid date
*/
private isValidDateString(value: string): boolean {
const numbersInFormattedDate = 8;
const cleanValue = this.cleanValue(value, /[^0-9]/g);
const hasCorrectLength: boolean = cleanValue.length === numbersInFormattedDate;
const isValid: boolean = isValidDate(value);
return hasCorrectLength && isValid;
}
/**
* Implemented as part of {@link TsFormFieldControl}.
*/
public onContainerClick(): void {
// Do not re-focus the input element if the element is already focused. Otherwise it can happen
// that someone clicks on a time input and the cursor resets to the "hours" field while the
// "minutes" field was actually clicked. See: https://github.com/angular/material2/issues/12849
// istanbul ignore else
if (!this.focused) {
this.focus();
}
}
/**
* Focus the input element
*/
public focus(): void {
// istanbul ignore else
if (this.inputElement) {
this.inputElement.nativeElement.focus();
}
}
/**
* Set a new date locale
*
* @param newLocale - The locale to set
*/
private setDateLocale(newLocale: string): void {
this.dateAdapter.setLocale(newLocale);
this.changeDetectorRef.detectChanges();
}
/**
* Manually dirty check the native input `value` property
*/
protected dirtyCheckNativeValue(): void {
if (!this.inputElement) {
return;
}
const newValue = this.inputElement.nativeElement.value;
if (this.previousNativeValue !== newValue) {
this.previousNativeValue = newValue;
this.stateChanges.next();
}
}
}