{"version":3,"file":"novo-elements-elements-field.mjs","sources":["../../../projects/novo-elements/src/elements/field/error/error.ts","../../../projects/novo-elements/src/elements/field/error/error.html","../../../projects/novo-elements/src/elements/field/field-control.ts","../../../projects/novo-elements/src/elements/field/hint/hint.ts","../../../projects/novo-elements/src/elements/field/hint/hint.html","../../../projects/novo-elements/src/elements/field/field.ts","../../../projects/novo-elements/src/elements/field/field.html","../../../projects/novo-elements/src/elements/field/fieldset.ts","../../../projects/novo-elements/src/elements/field/fieldset.html","../../../projects/novo-elements/src/elements/field/formats/base-format.ts","../../../projects/novo-elements/src/elements/field/formats/date-format.ts","../../../projects/novo-elements/src/elements/field/formats/date-range-format.ts","../../../projects/novo-elements/src/elements/field/formats/date-time-format.ts","../../../projects/novo-elements/src/elements/field/formats/time-format.ts","../../../projects/novo-elements/src/elements/field/input.ts","../../../projects/novo-elements/src/elements/field/picker.directive.ts","../../../projects/novo-elements/src/elements/field/toggle/picker-toggle.component.ts","../../../projects/novo-elements/src/elements/field/toggle/picker-toggle.component.html","../../../projects/novo-elements/src/elements/field/field.module.ts","../../../projects/novo-elements/src/elements/field/novo-elements-elements-field.ts"],"sourcesContent":["// NG2\nimport { Component, OnInit } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\n@Component({\n selector: 'novo-error',\n templateUrl: './error.html',\n styleUrls: ['./error.scss'],\n standalone: false,\n})\nexport class NovoErrorElement implements OnInit {\n constructor(private sanitizer: DomSanitizer) {}\n\n ngOnInit(): any {}\n}\n","","import { Directive } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { Observable } from 'rxjs';\n\n/** An interface which allows a control to work inside of a `NovoField`. */\n@Directive()\nexport abstract class NovoFieldControl {\n /** The value of the control. */\n value: T | null;\n\n /** The last key pressed. */\n lastKeyValue: string | null;\n\n /** The last cursor position. */\n lastCaretPosition: number | null;\n\n /**\n * Stream that emits whenever the state of the control changes such that the parent `NovoField`\n * needs to run change detection.\n */\n readonly stateChanges: Observable;\n\n /** The element ID for this control. */\n readonly id: string;\n\n /** The placeholder for this control. */\n readonly placeholder: string;\n\n /** Gets the NgControl for this control. */\n readonly ngControl: NgControl | null;\n\n /** Whether the control is focused. */\n readonly focused: boolean;\n\n /** Whether the control is empty. */\n readonly empty: boolean;\n\n /** Whether the `NovoField` label should try to float. */\n // readonly shouldLabelFloat: boolean;\n // readonly shouldFieldHaveUnderline: boolean;\n\n /** Whether the control is required. */\n readonly required: boolean;\n\n /** Whether the control is disabled. */\n readonly disabled: boolean;\n\n /** Whether the control is in an error state. */\n readonly errorState: boolean;\n\n /** Whether the control can have multiple values. */\n readonly multiple?: boolean;\n /**\n * An optional name for the control type that can be used to distinguish `novo-form-field` elements\n * based on their control type. The form field will add a class,\n * `novo-form-field-type-{{controlType}}` to its root element.\n */\n readonly controlType?: string;\n\n /**\n * Whether the input is currently in an autofilled state. If property is not present on the\n * control it is assumed to be false.\n */\n readonly autofilled?: boolean;\n\n /** Sets the list of element IDs that currently describe this control. */\n abstract setDescribedByIds(ids: string[]): void;\n\n /** Handles a click on the control's container. */\n abstract onContainerClick(event: MouseEvent): void;\n\n abstract focus(options?: FocusOptions): void;\n}\n","// NG2\nimport { Component, Input, OnInit } from '@angular/core';\n\nlet nextUniqueId = 0;\n@Component({\n selector: 'novo-hint',\n templateUrl: './hint.html',\n styleUrls: ['./hint.scss'],\n host: {\n class: 'novo-hint',\n '[class.novo-field-hint-end]': 'align === \"end\"',\n '[attr.id]': 'id',\n // Remove align attribute to prevent it from interfering with layout.\n '[attr.align]': 'null',\n },\n standalone: false,\n})\nexport class NovoHintElement implements OnInit {\n /** Whether to align the hint label at the start or end of the line. */\n @Input() align: 'start' | 'end' = 'start';\n\n /** Unique ID for the hint. Used for the aria-describedby on the form field control. */\n @Input() id: string = `novo-hint-${nextUniqueId++}`;\n\n ngOnInit(): any {}\n}\n","","// NG2\nimport {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n InjectionToken,\n Input,\n OnDestroy,\n Output,\n QueryList,\n ViewChild,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { fromEvent, Subject, Subscription } from 'rxjs';\nimport { startWith, takeUntil } from 'rxjs/operators';\nimport { NovoLabel, HasOverlay, NOVO_OVERLAY_CONTAINER } from 'novo-elements/elements/common';\nimport { NovoErrorElement } from './error/error';\nimport { NovoFieldControl } from './field-control';\nimport { NovoHintElement } from './hint/hint';\n\n@Directive({\n selector: '[novoPrefix]',\n standalone: false,\n})\nexport class NovoFieldPrefixDirective {}\n@Directive({\n selector: '[novoSuffix]',\n standalone: false,\n})\nexport class NovoFieldSuffixDirective {}\n\nconst NOVO_INPUT_UNDERLINED_TYPES = [\n 'text',\n 'date',\n 'time',\n 'datetime-local',\n 'password',\n 'email',\n 'tel',\n 'select',\n 'textarea',\n 'number',\n 'novo-chip-list',\n 'chip-list',\n];\nexport const NOVO_FORM_FIELD = new InjectionToken('NovoFormField');\n\n@Component({\n selector: 'novo-field',\n templateUrl: './field.html',\n styleUrls: ['./field.scss', './field-standard.scss', './field-fill.scss', './field-outline.scss', './field-list.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'novo-field',\n '[class.novo-field-layout-horizontal]': 'layout==\"horizontal\"',\n '[class.novo-field-layout-vertical]': 'layout==\"vertical\"',\n '[class.novo-field-appearance-standard]': 'appearance == \"standard\"',\n '[class.novo-field-appearance-fill]': 'appearance == \"fill\"',\n '[class.novo-field-appearance-outline]': 'appearance == \"outline\"',\n '[class.novo-field-appearance-list]': 'appearance == \"list\"',\n '[class.novo-field-appearance-underlined]': '_isUnderlinedInput()',\n '[class.novo-field-invalid]': '_control.errorState',\n '[class.novo-field-has-label]': '_hasLabel()',\n '[class.novo-field-no-label]': '!_hasLabel()',\n '[class.novo-field-disabled]': '_control.disabled',\n '[class.novo-field-autofilled]': '_control.autofilled',\n '[class.novo-focused]': '_control.focused',\n '[class.ng-untouched]': '_shouldForward(\"untouched\")',\n '[class.ng-touched]': '_shouldForward(\"touched\")',\n '[class.ng-pristine]': '_shouldForward(\"pristine\")',\n '[class.ng-dirty]': '_shouldForward(\"dirty\")',\n '[class.ng-valid]': '_shouldForward(\"valid\")',\n '[class.ng-invalid]': '_shouldForward(\"invalid\")',\n '[class.ng-pending]': '_shouldForward(\"pending\")',\n },\n providers: [{ provide: NOVO_FORM_FIELD, useExisting: NovoFieldElement }],\n standalone: false,\n})\nexport class NovoFieldElement implements AfterContentInit, OnDestroy {\n private _labelClicks = Subscription.EMPTY;\n\n @ViewChild('inputContainer') _inputContainerRef: ElementRef;\n\n @ContentChild(NovoLabel) _labelElement: NovoLabel;\n @ContentChildren(NovoHintElement) _hintElements: QueryList;\n @ContentChildren(NovoErrorElement) _errorElements: QueryList;\n @ContentChildren(NovoFieldPrefixDirective) _prefixElements: QueryList;\n @ContentChildren(NovoFieldSuffixDirective) _suffixElements: QueryList;\n @ContentChildren(NOVO_OVERLAY_CONTAINER) _overlayElements: QueryList;\n\n @ContentChild(NovoFieldControl) _control: NovoFieldControl;\n\n @Input() layout: 'horizontal' | 'vertical' = 'vertical';\n @Input() appearance: 'standard' | 'outline' | 'fill' | 'list' = 'standard';\n /**\n * When this field has a picker element, express which element it should be parented to\n */\n @Input() customOverlayOrigin: ElementRef;\n\n @Input()\n width: string;\n\n private _destroyed = new Subject();\n\n @Output() valueChanges: EventEmitter = new EventEmitter();\n @Output() stateChanges: EventEmitter = new EventEmitter();\n\n constructor(public _elementRef: ElementRef, private _changeDetectorRef: ChangeDetectorRef) {}\n /**\n * Gets an ElementRef for the element that a overlay attached to the form-field should be\n * positioned relative to.\n */\n getConnectedOverlayOrigin(): ElementRef {\n return this.customOverlayOrigin || this._inputContainerRef || this._elementRef;\n }\n\n ngAfterContentInit(): any {\n this._validateControlChild();\n\n const control = this._control;\n if (control.controlType) {\n this._elementRef.nativeElement.classList.add(`novo-field-type-${control.controlType}`);\n this._elementRef.nativeElement.setAttribute('data-control-type', control.controlType);\n }\n\n if (control.id) {\n this._elementRef.nativeElement.setAttribute('data-control-id', control.id);\n }\n\n if (control.ngControl?.name) {\n this._elementRef.nativeElement.setAttribute('data-control-key', control.ngControl.name);\n }\n\n // Subscribe to changes in the child control state in order to update the form field UI.\n control.stateChanges.pipe(startWith(null)).subscribe(() => {\n this.stateChanges.next();\n this._changeDetectorRef.markForCheck();\n });\n\n // Run change detection if the value changes.\n if (control.ngControl && control.ngControl.valueChanges) {\n control.ngControl.valueChanges.pipe(takeUntil(this._destroyed)).subscribe((v) => {\n this.valueChanges.next(v);\n this._changeDetectorRef.markForCheck();\n });\n }\n\n if (this._hasLabel()) {\n this._labelClicks = fromEvent(this._labelElement.nativeElement, 'click').subscribe(() => this._control.focus());\n }\n }\n\n ngOnDestroy() {\n this._destroyed.next();\n this._destroyed.complete();\n this._labelClicks.unsubscribe();\n }\n\n /** Throws an error if the form field's control is missing. */\n protected _validateControlChild() {\n if (!this._control) {\n throw new Error('Missing Novo Control');\n }\n }\n\n public blurEventIsInField(blurEvt: FocusEvent): boolean {\n return this._elementRef.nativeElement.contains(blurEvt.relatedTarget) || this._overlayElements.some(hasOverlay => hasOverlay.overlay?.isBlurRecipient(blurEvt));\n }\n\n @HostListener('click', ['$event'])\n _handleContainerClick(evt: MouseEvent) {\n this._control.onContainerClick(evt);\n }\n\n _isUnderlinedInput(): boolean {\n return NOVO_INPUT_UNDERLINED_TYPES.includes(this._control.controlType);\n }\n\n /** Determines whether to display hints or errors. */\n _getDisplayedMessages(): 'error' | 'hint' {\n return this._errorElements && this._errorElements.length > 0 && this._control.errorState ? 'error' : 'hint';\n }\n\n /** Determines whether a class from the NgControl should be forwarded to the host element. */\n _shouldForward(prop: keyof NgControl): boolean {\n const ngControl = this._control ? this._control.ngControl : null;\n return ngControl && ngControl[prop];\n }\n\n _hasLabel() {\n return !!this._labelElement;\n }\n}\n","
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n \n
\n
","// NG2\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, HostBinding, Input, QueryList } from '@angular/core';\nimport { BooleanInput } from 'novo-elements/utils';\nimport { NovoFieldElement } from './field';\n\n@Component({\n selector: 'novo-fields',\n templateUrl: './fieldset.html',\n styleUrls: ['./fieldset.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'novo-field',\n '[class.novo-fieldset-appearance-standard]': 'appearance == \"standard\"',\n '[class.novo-fieldset-appearance-fill]': 'appearance == \"fill\"',\n '[class.novo-fieldset-appearance-outline]': 'appearance == \"outline\"',\n '[class.novo-fieldset-appearance-list]': 'appearance == \"list\"',\n },\n standalone: false,\n})\nexport class NovoFieldsElement implements AfterContentInit {\n @ContentChildren(NovoFieldElement)\n _fields: QueryList;\n\n _layout: 'horizontal' | 'vertical' = 'horizontal';\n @Input() get layout(): any {\n return this._layout;\n }\n set layout(value) {\n if (this._layout !== value) {\n this._layout = value;\n this._updateFieldLayout();\n }\n }\n\n _appearance: 'standard' | 'outline' | 'fill' | 'list' = 'standard';\n @Input() get appearance(): any {\n return this._appearance;\n }\n set appearance(value) {\n if (this._appearance !== value) {\n this._appearance = value;\n this._updateFieldAppearance();\n }\n }\n\n @HostBinding('class.full-width')\n @Input()\n @BooleanInput()\n fullWidth: boolean = false;\n\n ngAfterContentInit(): any {\n this._updateFieldLayout();\n this._updateFieldAppearance();\n }\n\n private _updateFieldLayout(): void {\n if (this._fields) {\n this._fields.forEach((field) => {\n field.layout = this.layout;\n });\n }\n }\n\n private _updateFieldAppearance(): void {\n if (this._fields) {\n this._fields.forEach((field) => {\n field.appearance = this.appearance;\n });\n }\n }\n}\n","","import { EventEmitter, InjectionToken } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\n\nexport const NOVO_INPUT_FORMAT = new InjectionToken('NovoInputFormat');\n\nexport interface NovoInputFormat extends ControlValueAccessor {\n valueChange: EventEmitter;\n formatValue(value: T): string;\n}\n\nexport enum DATE_FORMATS {\n DATE = 'date',\n ISO8601 = 'iso8601',\n STRING = 'string',\n YEAR_MONTH_DAY = 'yyyy-mm-dd',\n}\n","import { Directive, EventEmitter, forwardRef, Input } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IMaskDirective } from 'angular-imask';\nimport { isValid } from 'date-fns';\nimport { MaskedRange } from 'imask';\nimport { DateFormatService, NovoLabelService } from 'novo-elements/services';\nimport { DateParseOptions, DateUtil } from 'novo-elements/utils';\nimport { DATE_FORMATS, NOVO_INPUT_FORMAT } from './base-format';\n\nexport const DATEFORMAT_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NovoDateFormatDirective),\n multi: true,\n};\n\n@Directive({\n selector: 'input[dateFormat]',\n host: {\n class: 'novo-date-format',\n },\n providers: [DATEFORMAT_VALUE_ACCESSOR, { provide: NOVO_INPUT_FORMAT, useExisting: NovoDateFormatDirective }],\n standalone: false,\n})\nexport class NovoDateFormatDirective extends IMaskDirective {\n valueChange: EventEmitter = new EventEmitter();\n\n @Input() dateFormat: DATE_FORMATS = DATE_FORMATS.DATE;\n\n constructor(private labels: NovoLabelService, private dateFormatService: DateFormatService) {\n super();\n this.unmask = 'typed' as unknown as false; // typing is to work around angular-imask bug\n this.imask = {\n mask: Date,\n pattern: this.dateFormatService.dateFormatAsImaskPattern,\n overwrite: true,\n autofix: true,\n lazy: false,\n min: new Date(1900, 0, 1),\n max: new Date(2100, 0, 1),\n prepare: (str) => str.toUpperCase(),\n format: (date) => this.formatValue(date, { userDateFormat: this.labels.dateFormatString()}),\n parse: (str) => DateUtil.parse(str, { userDateFormat: this.labels.dateFormatString().toUpperCase() }),\n blocks: {\n d: {\n mask: MaskedRange,\n placeholderChar: 'D',\n from: 1,\n to: 31,\n maxLength: 2,\n },\n m: {\n mask: MaskedRange,\n placeholderChar: 'M',\n from: 1,\n to: 12,\n maxLength: 2,\n },\n Y: {\n mask: MaskedRange,\n placeholderChar: 'Y',\n from: 1900,\n to: 9999,\n },\n },\n };\n }\n\n normalize(value: string) {\n const pattern = this.labels.dateFormatString().toUpperCase();\n if (!value) {\n return '';\n }\n return DateUtil.format(DateUtil.parse(value, { userDateFormat: this.labels.dateFormatString()}), pattern);\n }\n\n formatAsIso(date: Date): string {\n if (date && isValid(date)) {\n return date.toISOString().slice(0, 10);\n }\n return null;\n }\n\n formatYearMonthDay(date: Date): string {\n if (date && isValid(date)) {\n return DateUtil.format(date, 'YYYY-MM-DD');\n }\n return null;\n }\n\n formatValue(value: any, options?: DateParseOptions): string {\n if (value == null) {\n return '';\n }\n const dateFormat = this.labels.dateFormatString().toUpperCase();\n const date = DateUtil.parse(value, options);\n if (isValid(date)) {\n return DateUtil.format(date, dateFormat);\n }\n return this.normalize(value);\n }\n\n writeValue(value: any) {\n const initialValue = this['_initialValue'];\n if (initialValue != null && value === initialValue) {\n // This value has already been formatted from the first call to writeValue, simply use it.\n super.writeValue(initialValue);\n } else {\n super.writeValue(this.formatValue(value));\n this.valueChange.emit(value);\n }\n }\n\n registerOnChange(fn: (_: any) => void): void {\n this.onChange = (date: any) => {\n let formatted = date;\n switch (this.dateFormat) {\n case DATE_FORMATS.ISO8601:\n formatted = this.formatAsIso(date);\n break;\n case DATE_FORMATS.STRING:\n formatted = this.formatValue(date);\n break;\n case DATE_FORMATS.YEAR_MONTH_DAY:\n formatted = this.formatYearMonthDay(date);\n break;\n default:\n formatted = date;\n break;\n }\n this.valueChange.emit(date);\n fn(formatted);\n };\n }\n}\n","import { Directive, EventEmitter, forwardRef, Input } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IMaskDirective } from 'angular-imask';\nimport { isValid } from 'date-fns';\nimport { MaskedRange } from 'imask';\nimport { DateFormatService, NovoLabelService } from 'novo-elements/services';\nimport { DateParseOptions, DateUtil } from 'novo-elements/utils';\nimport { DATE_FORMATS, NOVO_INPUT_FORMAT } from './base-format';\n\nexport const DATERANGEFORMAT_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NovoDateRangeFormatDirective),\n multi: true,\n};\n\ntype DateRange = {\n startDate: Date;\n endDate: Date;\n};\n\n@Directive({\n selector: 'input[dateRangeFormat]',\n host: {\n class: 'novo-date-range-format',\n },\n providers: [DATERANGEFORMAT_VALUE_ACCESSOR, { provide: NOVO_INPUT_FORMAT, useExisting: NovoDateRangeFormatDirective }],\n standalone: false,\n})\nexport class NovoDateRangeFormatDirective extends IMaskDirective {\n valueChange: EventEmitter = new EventEmitter();\n\n @Input() dateRangeFormat: DATE_FORMATS = DATE_FORMATS.DATE;\n\n constructor(private labels: NovoLabelService, private dateFormat: DateFormatService) {\n super();\n this.unmask = false;\n this.imask = {\n mask: `${this.dateFormat.dateFormatAsImaskPattern} - ${this.dateFormat.dateFormatAsImaskPattern}`,\n overwrite: true,\n autofix: true,\n lazy: false,\n blocks: {\n d: {\n mask: MaskedRange,\n placeholderChar: 'D',\n from: 1,\n to: 31,\n maxLength: 2,\n },\n m: {\n mask: MaskedRange,\n placeholderChar: 'M',\n from: 1,\n to: 12,\n maxLength: 2,\n },\n Y: {\n mask: MaskedRange,\n placeholderChar: 'Y',\n from: 1900,\n to: 9999,\n },\n },\n };\n }\n\n normalize(value: string | Date, options?: DateParseOptions) {\n const pattern = this.labels.dateFormatString().toUpperCase();\n return DateUtil.format(value ? DateUtil.parse(value, options) : null, pattern);\n }\n\n formatAsIso(value: DateRange): string {\n if (!value) {\n return '';\n }\n const { startDate, endDate } = value;\n if (startDate && isValid(startDate) && endDate && isValid(endDate)) {\n const startIso = startDate.toISOString().slice(0, 10);\n const endIso = endDate.toISOString().slice(0, 10);\n return `${startIso}/${endIso}`;\n }\n return null;\n }\n\n formatValue(value: DateRange): string {\n if (!value) {\n return '';\n }\n const { startDate, endDate } = value;\n return `${this.formatDate(startDate)} - ${this.formatDate(endDate)}`;\n }\n\n formatDate(source: Date | string) {\n const dateRangeFormat = this.labels.dateFormatString().toUpperCase();\n const date = DateUtil.parse(source);\n if (isValid(date)) {\n return DateUtil.format(date, dateRangeFormat);\n }\n return this.normalize(source);\n }\n\n writeValue(value: any) {\n if (this['_initialValue'] && value === this['_initialValue']) {\n // if this call is coming from the super class, skip through.\n // If we ever wanted to reduce the need for this hack/workaround, we could refactor\n // IMaskDirective to exist as a child portion of DateRangeFormatDirective.\n super.writeValue(value);\n return;\n }\n const formattedValue = this.formatValue(value);\n if (formattedValue !== this.maskValue) {\n super.writeValue(this.formatValue(value));\n this.onChange(this.formatValue(value));\n this.valueChange.emit(value);\n }\n }\n\n registerOnChange(fn: (_: any) => void): void {\n this.onChange = (input: any) => {\n if (this.validate(input)) {\n const dates = this.extractDatesFromInput(input);\n let formatted: DateRange | string = dates;\n switch (this.dateRangeFormat) {\n case DATE_FORMATS.ISO8601:\n formatted = this.formatAsIso(dates);\n break;\n case DATE_FORMATS.STRING:\n formatted = this.formatValue(dates);\n break;\n default:\n formatted = dates;\n break;\n }\n this.valueChange.emit(dates);\n fn(formatted);\n }\n };\n }\n\n extractDatesFromInput(value) {\n const [startStr, endStr] = value.split(' - ');\n const startDate = DateUtil.parse(startStr, { userDateFormat: this.labels.dateFormatString()});\n const endDate = DateUtil.parse(endStr, { userDateFormat: this.labels.dateFormatString()});\n return { startDate, endDate };\n }\n\n validate(dateStr: string) {\n const { startDate, endDate } = this.extractDatesFromInput(dateStr);\n return isValid(startDate) && isValid(endDate);\n }\n}\n","import { Directive, EventEmitter, Input, OnChanges, SimpleChanges, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IMaskDirective } from 'angular-imask';\nimport { isValid } from 'date-fns';\nimport { MaskedEnum, MaskedRange } from 'imask';\nimport { DateFormatService, NovoLabelService } from 'novo-elements/services';\nimport { DateParseOptions, DateUtil, Key } from 'novo-elements/utils';\nimport { DATE_FORMATS, NOVO_INPUT_FORMAT, NovoInputFormat } from './base-format';\n\nexport const DATETIMEFORMAT_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NovoDateTimeFormatDirective),\n multi: true,\n};\n\n@Directive({\n selector: 'input[dateTimeFormat]',\n host: {\n class: 'novo-date-time-format',\n '(input)': '_checkInput($event)',\n '(blur)': '_handleBlur($event)',\n '(keydown)': '_handleKeydown($event)',\n },\n providers: [DATETIMEFORMAT_VALUE_ACCESSOR, { provide: NOVO_INPUT_FORMAT, useExisting: NovoDateTimeFormatDirective }],\n standalone: false,\n})\nexport class NovoDateTimeFormatDirective extends IMaskDirective implements NovoInputFormat, OnChanges {\n valueChange: EventEmitter = new EventEmitter();\n\n @Input() military: boolean = false;\n @Input() dateTimeFormat: DATE_FORMATS = DATE_FORMATS.DATE;\n\n constructor(private labels: NovoLabelService, private dateFormat: DateFormatService) {\n super();\n this.initFormatOptions();\n }\n\n initFormatOptions() {\n const amFormat = this.labels.timeFormatAM.toUpperCase();\n const pmFormat = this.labels.timeFormatPM.toUpperCase();\n this.unmask = 'typed' as unknown as false; // typing is to work around angular-imask bug\n let pattern = `${this.dateFormat.dateFormatAsImaskPattern}, HH:mm`;\n if (!this.military) {\n pattern += ' aa';\n }\n this.imask = {\n mask: Date,\n pattern,\n overwrite: true,\n autofix: true,\n lazy: false,\n min: new Date(1900, 0, 1),\n max: new Date(2100, 0, 1),\n prepare: (str) => str.toUpperCase(),\n format: (date) => this.formatValue(date, { userDateFormat: this.labels.dateFormatString() }),\n parse: (str) => DateUtil.parse(str, { userDateFormat: this.labels.dateFormatString().toUpperCase() }),\n blocks: {\n d: {\n mask: MaskedRange,\n placeholderChar: 'D',\n from: 1,\n to: 31,\n maxLength: 2,\n },\n m: {\n mask: MaskedRange,\n placeholderChar: 'M',\n from: 1,\n to: 12,\n maxLength: 2,\n },\n Y: {\n mask: MaskedRange,\n placeholderChar: 'Y',\n from: 1900,\n to: 9999,\n },\n HH: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 0,\n to: 23,\n },\n hh: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 1,\n to: 12,\n },\n mm: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 0,\n to: 59,\n },\n ss: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 0,\n to: 59,\n },\n aa: {\n mask: MaskedEnum,\n placeholderChar: '-',\n enum: ['AM', 'PM', 'am', 'pm', amFormat, pmFormat],\n },\n },\n };\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (Object.keys(changes).some((key) => ['military', 'dateFormat'].includes(key))) {\n this.initFormatOptions();\n }\n }\n\n _checkInput(event: InputEvent): void {\n if (document.activeElement === event.target) {\n const text = (event.target as HTMLInputElement).value;\n const dateTime = text.split(', ');\n const hour = dateTime[1].slice(0, 2);\n if ((this.military && Number(dateTime[1][0]) > 2) || (!this.military && Number(dateTime[1][0]) > 1)) {\n event.preventDefault();\n const value = `0${dateTime[1]}`;\n (event.target as HTMLInputElement).value = value;\n }\n if (!this.military) {\n const input = dateTime[1].substr(5, 4).replace(/\\-/g, '').trim().slice(0, 2);\n const timePeriod = this.imask.blocks.aa.enum.find((it) => it[0] === input[0]);\n if (timePeriod) {\n (event.target as HTMLInputElement).value = `${dateTime[0]}, ${dateTime[1].slice(0, 5)} ${timePeriod}`;\n }\n if ((event.target as HTMLInputElement).selectionStart >= 3 && this.hourOneFormatRequired(hour)) {\n (event.target as HTMLInputElement).value = `${dateTime[0]}, 01:${(event.target as HTMLInputElement).value.slice(\n 3,\n (event.target as HTMLInputElement).value.length,\n )}`;\n }\n }\n }\n }\n\n _handleBlur(event: FocusEvent): void {\n const text = (event.target as HTMLInputElement).value;\n const dateTime = text.split(', ');\n const hour: string = dateTime[1].slice(0, 2);\n if (!this.military) {\n const input = dateTime[1].substr(5, 4).replace(/\\-/g, '').trim().slice(0, 2);\n const timePeriod = this.imask.blocks.aa.enum.find((it) => it[0] === input[0]);\n if (this.hourOneFormatRequired(hour)) {\n (event.target as HTMLInputElement).value = `${dateTime[0]}, 01:${dateTime[1].slice(3, dateTime[1].length)}`;\n }\n if (!timePeriod) {\n (event.target as HTMLInputElement).value = `${dateTime[0]}, ${dateTime[1].slice(0, 5)} --`;\n }\n }\n }\n\n _handleKeydown(event: KeyboardEvent): void {\n const input = event.target as HTMLInputElement;\n const dateTime = input.value.split(', ');\n const hour: string = dateTime[1].slice(0, 2);\n\n if (event.key === Key.Backspace && input.selectionStart === dateTime[1].length) {\n (event.target as HTMLInputElement).value = `${dateTime[1].slice(0, 5)} --`;\n } else if (event.key === Key.Tab && input.selectionStart <= 2 && this.hourOneFormatRequired(hour)) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n input.value = `${dateTime[0]}, 01:${dateTime[1].slice(3, dateTime[1].length)}`;\n input.setSelectionRange(15, 15);\n } else if (event.key === Key.ArrowRight && input.selectionStart >= 2 && this.hourOneFormatRequired(hour)) {\n input.value = `${dateTime[0]}, 01:${dateTime[1].slice(3, dateTime[1].length)}`;\n input.setSelectionRange(14, 14);\n }\n }\n\n normalize(value: string, options?: DateParseOptions) {\n const pattern = this.labels.dateFormatString().toUpperCase();\n return DateUtil.format(value ? DateUtil.parse(value, options) : null, pattern);\n }\n\n formatAsIso(date: Date): string {\n if (date && isValid(date)) {\n return date.toISOString();\n }\n return null;\n }\n\n convertTime12to24(time12h: string) {\n const pmFormat = this.labels.timeFormatPM.toUpperCase();\n const [time, meridian] = time12h.split(' ');\n // eslint-disable-next-line prefer-const\n let [hours, minutes] = time.split(':');\n if (hours === '12') {\n hours = '00';\n }\n if (['PM', pmFormat].includes(meridian)) {\n hours = `${parseInt(hours, 10) + 12}`.padStart(2, '0');\n }\n return `${hours}:${minutes}`;\n }\n\n convertTime24to12(time24h: string) {\n if (time24h.length === 5) {\n const date = DateUtil.parse(`2020-01-01T${time24h}`);\n return DateUtil.format(date, 'hh:mm A');\n }\n return time24h;\n }\n\n formatValue(value: Date | string, options?: DateParseOptions): string {\n if (value == null) {\n return '';\n }\n // Use `parse` because it keeps dates in locale\n const date = DateUtil.parse(value, options);\n if (isValid(date)) {\n const dateFormat = `${this.labels.dateFormatString().toUpperCase()}, ${this.military ? 'HH:mm' : 'hh:mm A'}`;\n return DateUtil.format(date, dateFormat);\n }\n return this.normalize(value as string, options);\n }\n\n writeValue(value: any) {\n const initialValue = this['_initialValue'];\n if (initialValue != null && value === initialValue) {\n // This value has already been formatted from the first call to writeValue, simply use it.\n super.writeValue(initialValue);\n } else {\n super.writeValue(this.formatValue(value));\n this.valueChange.emit(value);\n }\n }\n\n registerOnChange(fn: (_: any) => void): void {\n this.onChange = (date: Date) => {\n let formatted: Date | string;\n switch (this.dateTimeFormat) {\n case DATE_FORMATS.ISO8601:\n formatted = this.formatAsIso(date);\n break;\n case DATE_FORMATS.STRING:\n formatted = this.formatValue(date);\n break;\n default:\n formatted = date;\n break;\n }\n this.valueChange.emit(date);\n fn(formatted);\n };\n }\n\n hourOneFormatRequired(hourInput: string): boolean {\n return hourInput === '-1' || hourInput === '1-';\n }\n\n get initialValue(): any {\n return this.maskValue;\n }\n}\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Directive,\n EventEmitter,\n forwardRef,\n Input,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IMaskDirective } from 'angular-imask';\nimport { isValid } from 'date-fns';\nimport { MaskedEnum, MaskedRange } from 'imask';\nimport { NovoLabelService } from 'novo-elements/services';\nimport { DateUtil, Key } from 'novo-elements/utils';\nimport { NOVO_INPUT_FORMAT, NovoInputFormat } from './base-format';\n\nexport const TIMEFORMAT_VALUE_ACCESSOR = {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NovoTimeFormatDirective),\n multi: true,\n};\n\nexport enum TIME_FORMATS {\n DATE = 'date',\n ISO8601 = 'iso8601',\n STRING = 'string',\n}\n\n@Directive({\n selector: 'input[timeFormat]',\n host: {\n class: 'novo-time-format',\n '(input)': '_checkInput($event)',\n '(blur)': '_handleBlur($event)',\n '(keydown)': '_handleKeydown($event)',\n },\n providers: [TIMEFORMAT_VALUE_ACCESSOR, { provide: NOVO_INPUT_FORMAT, useExisting: NovoTimeFormatDirective }],\n standalone: false,\n})\nexport class NovoTimeFormatDirective extends IMaskDirective implements NovoInputFormat, AfterViewInit, OnChanges {\n valueChange: EventEmitter = new EventEmitter();\n\n @Input() military: boolean = false;\n @Input() timeFormat: TIME_FORMATS = TIME_FORMATS.DATE;\n\n constructor(private labels: NovoLabelService, private cdr: ChangeDetectorRef) {\n super();\n this.initFormatOptions();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (Object.keys(changes).some((key) => ['military', 'timeFormat'].includes(key))) {\n this.initFormatOptions();\n }\n }\n\n initFormatOptions() {\n const amFormat = this.labels.timeFormatAM.toUpperCase();\n const pmFormat = this.labels.timeFormatPM.toUpperCase();\n this.unmask = 'typed' as unknown as false; // typing is to work around angular-imask bug\n this.imask = {\n mask: Date,\n pattern: this.military ? 'HH:mm' : 'hh:mm aa',\n overwrite: true,\n autofix: true,\n lazy: false,\n min: new Date(1970, 0, 1),\n max: new Date(2100, 0, 1),\n prepare: (str) => str.toUpperCase(),\n format: (value) => this.formatValue(value),\n parse: (str) => {\n const time = this.convertTime12to24(str);\n return DateUtil.parse(`${DateUtil.format(Date.now(), 'YYYY-MM-DD')}T${time}`);\n },\n blocks: {\n HH: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 0,\n to: 23,\n },\n hh: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 1,\n to: 12,\n },\n mm: {\n mask: MaskedRange,\n placeholderChar: '-',\n maxLength: 2,\n from: 0,\n to: 59,\n },\n aa: {\n mask: MaskedEnum,\n placeholderChar: '-',\n enum: ['AM', 'PM', 'am', 'pm', amFormat, pmFormat],\n },\n },\n };\n }\n\n _checkInput(event: InputEvent): void {\n if (document.activeElement === event.target) {\n const text = (event.target as HTMLInputElement).value;\n const hour = text.slice(0, 2);\n if ((this.military && Number(text[0]) > 2) || (!this.military && Number(text[0]) > 1)) {\n event.preventDefault();\n const value = `0${text}`;\n (event.target as HTMLInputElement).value = value;\n }\n if (!this.military) {\n const input = text.substr(5, 4).replace(/\\-/g, '').trim().slice(0, 2);\n const timePeriod = this.imask.blocks.aa.enum.find((it) => it[0] === input[0]);\n if (timePeriod) {\n (event.target as HTMLInputElement).value = `${text.slice(0, 5)} ${timePeriod}`;\n }\n if ((event.target as HTMLInputElement).selectionStart >= 3 && this.hourOneFormatRequired(hour)) {\n (event.target as HTMLInputElement).value = `01:${(event.target as HTMLInputElement).value.slice(\n 3,\n (event.target as HTMLInputElement).value.length,\n )}`;\n }\n }\n }\n }\n\n _handleBlur(event: FocusEvent): void {\n const text = (event.target as HTMLInputElement).value;\n const hour: string = text.slice(0, 2);\n if (!this.military) {\n const input = text.substr(5, 4).replace(/\\-/g, '').trim().slice(0, 2);\n const timePeriod = this.imask.blocks.aa.enum.find((it) => it[0] === input[0]);\n if (this.hourOneFormatRequired(hour)) {\n (event.target as HTMLInputElement).value = `01:${text.slice(3, text.length)}`;\n }\n if (!timePeriod) {\n (event.target as HTMLInputElement).value = `${text.slice(0, 5)} --`;\n }\n }\n }\n\n _handleKeydown(event: KeyboardEvent): void {\n const input = event.target as HTMLInputElement;\n const hour: string = input.value.slice(0, 2);\n\n if (event.key === Key.Backspace && input.selectionStart === input.value.length) {\n (event.target as HTMLInputElement).value = `${input.value.slice(0, 5)} --`;\n } else if (event.key === Key.Tab && input.selectionStart <= 2 && this.hourOneFormatRequired(hour)) {\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n input.value = `01:${input.value.slice(3, input.value.length)}`;\n input.setSelectionRange(3, 3);\n } else if (event.key === Key.ArrowRight && input.selectionStart >= 2 && this.hourOneFormatRequired(hour)) {\n input.value = `01:${input.value.slice(3, input.value.length)}`;\n input.setSelectionRange(2, 2);\n }\n }\n\n normalize(value: string) {\n if (this.military) {\n return this.convertTime12to24(value);\n }\n return this.convertTime24to12(value);\n }\n\n formatValue(value: any): string {\n const date = DateUtil.parse(value);\n if (isValid(date)) {\n const pattern = this.military ? 'HH:mm' : 'hh:mm A';\n return DateUtil.format(date, pattern);\n }\n return this.normalize(value);\n }\n\n formatAsIso(date: Date): string {\n if (date && isValid(date)) {\n return DateUtil.format(date, 'HH:mm');\n }\n return null;\n }\n\n convertTime12to24(time12h: string) {\n const pmFormat = this.labels.timeFormatPM.toUpperCase();\n const [time, meridian] = time12h.split(' ');\n // eslint-disable-next-line prefer-const\n let [hours, minutes] = time.split(':');\n if (hours === '12') {\n hours = '00';\n }\n if (['PM', pmFormat].includes(meridian)) {\n hours = `${parseInt(hours, 10) + 12}`.padStart(2, '0');\n }\n return `${hours}:${minutes}`;\n }\n\n convertTime24to12(time24h: string) {\n if (time24h.length === 5) {\n const date = DateUtil.parse(`2020-01-01T${time24h}`);\n return DateUtil.format(date, 'hh:mm A');\n }\n return time24h;\n }\n\n writeValue(value: any) {\n super.writeValue(this.formatValue(value));\n this.valueChange.emit(value);\n }\n\n registerOnChange(fn: (date: any) => void): void {\n this.onChange = (date: any) => {\n let formatted = date;\n switch (this.timeFormat) {\n case TIME_FORMATS.ISO8601:\n formatted = this.formatAsIso(date);\n break;\n case TIME_FORMATS.STRING:\n formatted = this.formatValue(date);\n break;\n default:\n formatted = date;\n break;\n }\n this.valueChange.emit(date);\n fn(formatted);\n };\n }\n\n hourOneFormatRequired(hourInput: string): boolean {\n return hourInput === '-1' || hourInput === '1-';\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { getSupportedInputTypes, Platform } from '@angular/cdk/platform';\nimport { AutofillMonitor } from '@angular/cdk/text-field';\nimport {\n AfterViewInit,\n Directive,\n DoCheck,\n ElementRef,\n EventEmitter,\n HostBinding,\n HostListener,\n Inject,\n InjectionToken,\n Input,\n NgZone,\n OnChanges,\n OnDestroy,\n Optional,\n Output,\n Self,\n} from '@angular/core';\nimport { FormGroupDirective, NgControl, NgForm } from '@angular/forms';\nimport { Subject } from 'rxjs';\nimport { NovoFieldControl } from './field-control';\n\n/**\n * This token is used to inject the object whose value should be set into `NovoInput`. If none is\n * provided, the native `HTMLInputElement` is used. Directives like `MatDatepickerInput` can provide\n * themselves for this token, in order to make `NovoInput` delegate the getting and setting of the\n * value to them.\n */\nexport const NOVO_INPUT_VALUE_ACCESSOR = new InjectionToken<{ value: any }>('NOVO_INPUT_VALUE_ACCESSOR');\n\n// Invalid input type. Using one of these will throw an NovoInputUnsupportedTypeError.\nconst NOVO_INPUT_INVALID_TYPES = ['button', 'file', 'hidden', 'image', 'radio', 'reset', 'submit'];\n\nlet nextUniqueId = 0;\n\n// Boilerplate for applying mixins to NovoInput.\nclass NovoInputBase {\n constructor(\n public _parentForm: NgForm,\n public _parentFormGroup: FormGroupDirective,\n /** @docs-private */\n public ngControl: NgControl,\n ) {}\n}\n\n/** Directive that allows a native input to work inside a `NovoField`. */\n@Directive({\n selector: 'input[novoInput], textarea[novoInput], select[novoInput]',\n host: {\n class: 'novo-input-element',\n '[attr.id]': 'id',\n '[attr.placeholder]': 'placeholder',\n '[disabled]': 'disabled',\n '[required]': 'required',\n '[attr.readonly]': 'readonly && !_isNativeSelect || null',\n '[attr.aria-invalid]': 'errorState',\n '[attr.aria-required]': 'required.toString()',\n '[attr.autocomplete]': \"'off'\",\n },\n providers: [{ provide: NovoFieldControl, useExisting: NovoInput }],\n standalone: false,\n})\nexport class NovoInput extends NovoInputBase implements NovoFieldControl, OnChanges, OnDestroy, AfterViewInit, DoCheck {\n protected _uid = `novo-input-${nextUniqueId++}`;\n protected _previousNativeValue: any;\n private _inputValueAccessor: { value: any };\n /** The aria-describedby attribute on the input for improved a11y. */\n @HostBinding('attr.aria-describedby') _ariaDescribedby: string;\n\n /** Whether the component is being rendered on the server. */\n readonly _isServer: boolean;\n\n /** Whether the component is a native html select. */\n readonly _isNativeSelect: boolean;\n\n /** Whether the component is a textarea. */\n readonly _isTextarea: boolean;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n focused: boolean = false;\n\n errorState: boolean = false;\n\n /** @docs-private Implemented as part of NovoFieldControl. */\n lastKeyValue: string = null;\n /** @docs-private Implemented as part of NovoFieldControl.*/\n lastCaretPosition: number | null;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n readonly stateChanges: Subject = new Subject();\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n controlType: string = 'novo-input';\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n autofilled = false;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input()\n get disabled(): boolean {\n if (this.ngControl && this.ngControl.disabled !== null) {\n return this.ngControl.disabled;\n }\n return this._disabled;\n }\n set disabled(value: boolean) {\n this._disabled = coerceBooleanProperty(value);\n\n // Browsers may not fire the blur event if the input is disabled too quickly.\n // Reset from here to ensure that the element doesn't become stuck.\n if (this.focused) {\n this.focused = false;\n this.stateChanges.next();\n }\n }\n protected _disabled = false;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input()\n get id(): string {\n return this._id;\n }\n set id(value: string) {\n this._id = value || this._uid;\n }\n protected _id: string;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input() placeholder: string;\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input()\n get required(): boolean {\n return this._required;\n }\n set required(value: boolean) {\n this._required = coerceBooleanProperty(value);\n }\n protected _required = false;\n\n /** Input type of the element. */\n @Input()\n get type(): string {\n return this._type;\n }\n set type(value: string) {\n this._type = value || 'text';\n this._validateType();\n\n // When using Angular inputs, developers are no longer able to set the properties on the native\n // input element. To ensure that bindings for `type` work, we need to sync the setter\n // with the native property. Textarea elements don't support the type property or attribute.\n if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {\n (this._elementRef.nativeElement as HTMLInputElement).type = this._type;\n }\n }\n protected _type = 'text';\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n @Input()\n get value(): string {\n return this._inputValueAccessor.value;\n }\n set value(value: string) {\n if (value !== this.value) {\n this._inputValueAccessor.value = value;\n this.stateChanges.next();\n }\n }\n\n /** Whether the element is readonly. */\n @Input()\n get readonly(): boolean {\n return this._readonly;\n }\n set readonly(value: boolean) {\n this._readonly = coerceBooleanProperty(value);\n }\n private _readonly = false;\n\n protected _neverEmptyInputTypes = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter((t) =>\n getSupportedInputTypes().has(t),\n );\n\n constructor(\n protected _elementRef: ElementRef,\n protected _platform: Platform,\n /** @docs-private */\n @Optional() @Self() public ngControl: NgControl,\n @Optional() _parentForm: NgForm,\n @Optional() _parentFormGroup: FormGroupDirective,\n @Optional() @Self() @Inject(NOVO_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,\n private _autofillMonitor: AutofillMonitor,\n ngZone: NgZone,\n ) {\n super(_parentForm, _parentFormGroup, ngControl);\n\n const element = this._elementRef.nativeElement;\n const nodeName = element.nodeName.toLowerCase();\n\n // If no input value accessor was explicitly specified, use the element as the input value\n // accessor.\n this._inputValueAccessor = inputValueAccessor || element;\n\n this._previousNativeValue = this.value;\n\n // Force setter to be called in case id was not specified.\n this.id = this.id;\n\n // On some versions of iOS the caret gets stuck in the wrong place when holding down the delete\n // key. In order to get around this we need to \"jiggle\" the caret loose. Since this bug only\n // exists on iOS, we only bother to install the listener on iOS.\n if (_platform.IOS) {\n ngZone.runOutsideAngular(() => {\n _elementRef.nativeElement.addEventListener('keyup', (event: Event) => {\n const el = event.target as HTMLInputElement;\n if (!el.value && !el.selectionStart && !el.selectionEnd) {\n // Note: Just setting `0, 0` doesn't fix the issue. Setting\n // `1, 1` fixes it for the first time that you type text and\n // then hold delete. Toggling to `1, 1` and then back to\n // `0, 0` seems to completely fix it.\n el.setSelectionRange(1, 1);\n el.setSelectionRange(0, 0);\n }\n });\n });\n }\n\n this._isServer = !this._platform.isBrowser;\n this._isNativeSelect = nodeName === 'select';\n this._isTextarea = nodeName === 'textarea';\n\n this.controlType = (this._elementRef.nativeElement as HTMLInputElement).type;\n if (this._isNativeSelect) {\n this.controlType = (element as HTMLSelectElement).multiple ? 'select-multiple' : 'select';\n } else if (this._isTextarea) {\n this.controlType = 'textarea';\n }\n }\n\n ngAfterViewInit() {\n if (this._platform.isBrowser) {\n this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((event) => {\n this.autofilled = event.isAutofilled;\n this.stateChanges.next();\n });\n }\n }\n\n ngOnChanges() {\n this.stateChanges.next();\n }\n\n ngOnDestroy() {\n this.stateChanges.complete();\n\n if (this._platform.isBrowser) {\n this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);\n }\n }\n\n ngDoCheck() {\n // We need to dirty-check the native element's value, because there are some cases where\n // we won't be notified when it changes (e.g. the consumer isn't using forms or they're\n // updating the value using `emitEvent: false`).\n this._dirtyCheckNativeValue();\n }\n\n /** Focuses the input. */\n focus(options?: FocusOptions): void {\n this._elementRef.nativeElement.focus(options);\n }\n\n // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.\n // In Ivy the `host` bindings will be merged when this class is extended, whereas in\n // ViewEngine they're overwritten.\n @HostListener('focus', ['true'])\n @HostListener('blur', ['false'])\n _focusChanged(isFocused: boolean) {\n if (isFocused !== this.focused && (!this.readonly || !isFocused)) {\n this.focused = isFocused;\n this.stateChanges.next();\n }\n }\n\n // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.\n // In Ivy the `host` bindings will be merged when this class is extended, whereas in\n // ViewEngine they're overwritten.\n @HostListener('input', ['$event'])\n _onInput(event: InputEvent) {\n // Listening to the input event wouldn't be necessary when the input is using the\n // FormsModule or ReactiveFormsModule, because Angular forms also listens to input events.\n this.lastKeyValue = event.data;\n if (this._isTextarea) {\n this.lastCaretPosition = (this._elementRef.nativeElement as HTMLTextAreaElement).selectionStart;\n }\n }\n\n /** Does some manual dirty checking on the native input `value` property. */\n protected _dirtyCheckNativeValue() {\n const newValue = this._elementRef.nativeElement.value;\n\n if (this._previousNativeValue !== newValue) {\n this._previousNativeValue = newValue;\n this.stateChanges.next();\n }\n }\n\n /** Make sure the input is a supported type. */\n protected _validateType() {\n if (NOVO_INPUT_INVALID_TYPES.indexOf(this._type) > -1) {\n throw new Error(`Invalid Input Type: ${this._type}`);\n }\n }\n\n /** Checks whether the input type is one of the types that are never empty. */\n protected _isNeverEmpty() {\n return this._neverEmptyInputTypes.indexOf(this._type) > -1;\n }\n\n /** Checks whether the input is invalid based on the native validation. */\n protected _isBadInput() {\n // The `validity` property won't be present on platform-server.\n const validity = (this._elementRef.nativeElement as HTMLInputElement).validity;\n return validity && validity.badInput;\n }\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n get empty(): boolean {\n return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;\n }\n\n /**\n * Implemented as part of NovoFieldControl.\n * @docs-private\n */\n get shouldLabelFloat(): boolean {\n if (this._isNativeSelect) {\n // For a single-selection `