RLH-15 - Implement Input component

src/app/libraries/components/input/input.component.html

@@ -0,0 +1,10 @@
+<input
+    [name]="input.id"
+    [id]="'input-' + input.id"
+    [disabled]="isDisabled()"
+    [type]="input.type"
+    (ngModelChange)="input.modelChange()"
+    class="form-control m-1"
+    [(ngModel)]="model"
+/>
+

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<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<any>();
+
+
+  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);
+    }
+  }
+
+
+
+}

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();
+  });
+});

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'
+}