76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
import { FormFieldComponent } from '../form-field/form-field-component.directive';
|
|
import { NgClass, NgIf } from '@angular/common';
|
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
import { StopPropagationDirective } from '../../directives';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
|
|
const InputTypes = {
|
|
DATE: 'DATE',
|
|
NUMBER: 'NUMBER',
|
|
TEXT: 'TEXT',
|
|
IMAGE: 'IMAGE',
|
|
} as const;
|
|
|
|
export type InputType = keyof typeof InputTypes;
|
|
|
|
type DynamicInput = number | string | Date;
|
|
|
|
@Component({
|
|
selector: 'iqser-dynamic-input [type]',
|
|
templateUrl: './dynamic-input.component.html',
|
|
styleUrls: ['./dynamic-input.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
standalone: true,
|
|
providers: [
|
|
{
|
|
provide: NG_VALUE_ACCESSOR,
|
|
multi: true,
|
|
useExisting: DynamicInputComponent,
|
|
},
|
|
{
|
|
provide: NG_VALIDATORS,
|
|
multi: true,
|
|
useExisting: DynamicInputComponent,
|
|
},
|
|
],
|
|
imports: [NgClass, NgIf, FormsModule, MatDatepickerModule, StopPropagationDirective, MatIconModule, MatInputModule],
|
|
})
|
|
export class DynamicInputComponent extends FormFieldComponent<DynamicInput> {
|
|
@Input() label?: string;
|
|
@Input() type!: InputType;
|
|
@Input() placeholder?: string;
|
|
@Input() id?: string;
|
|
@Input() name?: string;
|
|
@Input() classList?: string = '';
|
|
@Input() input!: DynamicInput;
|
|
@Input() canEditInput = true;
|
|
@Output() readonly closedDatepicker = new EventEmitter<boolean>();
|
|
|
|
get isDate() {
|
|
return this.type === InputTypes.DATE;
|
|
}
|
|
|
|
get isNumber() {
|
|
return this.type === InputTypes.NUMBER;
|
|
}
|
|
|
|
get isText() {
|
|
return this.type === InputTypes.TEXT;
|
|
}
|
|
|
|
writeValue(input: DynamicInput): void {
|
|
this.input = input;
|
|
}
|
|
|
|
onCloseDatepicker() {
|
|
this.closedDatepicker.emit(true);
|
|
}
|
|
|
|
onOpenDatepicker() {
|
|
this.closedDatepicker.emit(false);
|
|
}
|
|
}
|