diff --git a/src/app/libraries/components/input/input.component.html b/src/app/libraries/components/input/input.component.html new file mode 100644 index 0000000..18f3f7c --- /dev/null +++ b/src/app/libraries/components/input/input.component.html @@ -0,0 +1,10 @@ + + diff --git a/src/app/libraries/components/input/input.component.scss b/src/app/libraries/components/input/input.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/libraries/components/input/input.component.spec.ts b/src/app/libraries/components/input/input.component.spec.ts new file mode 100644 index 0000000..8f18cc9 --- /dev/null +++ b/src/app/libraries/components/input/input.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputComponent } from './input.component'; + +describe('InputComponent', () => { + let component: InputComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [InputComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(InputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/libraries/components/input/input.component.ts b/src/app/libraries/components/input/input.component.ts new file mode 100644 index 0000000..999b317 --- /dev/null +++ b/src/app/libraries/components/input/input.component.ts @@ -0,0 +1,61 @@ +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {InputModel, InputType} from "./input.model"; +import {FormsModule} from "@angular/forms"; +import {nanoid} from "nanoid"; + +@Component({ + selector: 'rlh-input', + standalone: true, + imports: [ + FormsModule + ], + templateUrl: './input.component.html', + styleUrl: './input.component.scss' +}) +export class InputComponent implements OnInit { + + renderModel: any + + @Input() input: InputModel = { + type: InputType.TEXT, + disabled: () => false, + modelChange: () => {} + }; + + @Input() + get model() { + return this.renderModel; + } + set model(val: any) { + if (val !== this.renderModel) { + this.renderModel = val; + this.modelChange.emit(val); + } + } + + @Output() modelChange = new EventEmitter(); + + + isDisabled: () => boolean = () => { + return false; + }; + + ngOnInit() { + this.input.disabled = this.input.disabled + ? this.input.disabled + : () => false; + + setTimeout(() => { + this.isDisabled = () => { + return this.input.disabled(); + }; + }); + + if(!this.input.id || this.input.id.length < 1) { + this.input.id = nanoid(12); + } + } + + + +} diff --git a/src/app/libraries/components/input/input.model.spec.ts b/src/app/libraries/components/input/input.model.spec.ts new file mode 100644 index 0000000..56db551 --- /dev/null +++ b/src/app/libraries/components/input/input.model.spec.ts @@ -0,0 +1,7 @@ +import { InputModel } from './input.model'; + +describe('InputModel', () => { + it('should create an instance', () => { + expect(new InputModel()).toBeTruthy(); + }); +}); diff --git a/src/app/libraries/components/input/input.model.ts b/src/app/libraries/components/input/input.model.ts new file mode 100644 index 0000000..3eb5693 --- /dev/null +++ b/src/app/libraries/components/input/input.model.ts @@ -0,0 +1,13 @@ +export class InputModel { + id?: string; + type: InputType; + disabled: () => boolean; + modelChange: () => void; +} + +export enum InputType { + TEXT = 'text', + NUMBER = 'number', + EMAIL = 'email', + PASSWORD = 'password' +}