mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
93 lines
2.2 KiB
TypeScript
93 lines
2.2 KiB
TypeScript
/*!
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
ElementRef,
|
|
Input,
|
|
ViewChild,
|
|
afterNextRender,
|
|
forwardRef,
|
|
signal,
|
|
} from '@angular/core';
|
|
import {CommonModule} from '@angular/common';
|
|
import {ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR} from '@angular/forms';
|
|
import {IconComponent} from '../icon/icon.component';
|
|
|
|
@Component({
|
|
selector: 'docs-text-field',
|
|
standalone: true,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
imports: [CommonModule, FormsModule, IconComponent],
|
|
templateUrl: './text-field.component.html',
|
|
styleUrls: ['./text-field.component.scss'],
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: forwardRef(() => TextField),
|
|
multi: true,
|
|
},
|
|
],
|
|
host: {
|
|
class: 'docs-form-element',
|
|
},
|
|
})
|
|
export class TextField implements ControlValueAccessor {
|
|
@ViewChild('inputRef') private input?: ElementRef<HTMLInputElement>;
|
|
|
|
@Input() name: string | null = null;
|
|
@Input() placeholder: string | null = null;
|
|
@Input() disabled = false;
|
|
@Input() hideIcon = false;
|
|
@Input() autofocus = false;
|
|
|
|
// Implemented as part of ControlValueAccessor.
|
|
private onChange: (value: string) => void = (_: string) => {};
|
|
private onTouched: () => void = () => {};
|
|
|
|
protected readonly value = signal<string | null>(null);
|
|
|
|
constructor() {
|
|
afterNextRender(() => {
|
|
if (this.autofocus) {
|
|
this.input?.nativeElement.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Implemented as part of ControlValueAccessor.
|
|
writeValue(value: string): void {
|
|
this.value.set(value);
|
|
}
|
|
|
|
// Implemented as part of ControlValueAccessor.
|
|
registerOnChange(fn: any): void {
|
|
this.onChange = fn;
|
|
}
|
|
|
|
// Implemented as part of ControlValueAccessor.
|
|
registerOnTouched(fn: any): void {
|
|
this.onTouched = fn;
|
|
}
|
|
|
|
// Implemented as part of ControlValueAccessor.
|
|
setDisabledState?(isDisabled: boolean): void {
|
|
this.disabled = isDisabled;
|
|
}
|
|
|
|
setValue(value: string): void {
|
|
if (this.disabled) {
|
|
return;
|
|
}
|
|
|
|
this.value.set(value);
|
|
this.onChange(value);
|
|
this.onTouched();
|
|
}
|
|
}
|