feat: enhance input component layout with labels and improve styling

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -45,124 +45,150 @@
       <hr class="section-divider" />
 
       <div class="input-grid">
-        <app-input
-          type="search"
-          placeholder="Buscar producto"
-          [value]="textValue"
-          [maxlength]="24"
-          (valueChange)="textValue = $event"
-        >
-          Texto
-        </app-input>
+        <div class="input-field">
+          <label for="search-input">Texto</label>
+          <app-input
+            id="search-input"
+            type="search"
+            placeholder="Buscar producto"
+            [value]="textValue"
+            [maxlength]="24"
+            (valueChange)="textValue = $event"
+          />
+        </div>
 
-        <app-input
-          type="number"
-          placeholder="0"
-          [value]="numberValue"
-          (valueChange)="numberValue = $event"
-        >
-          Numero
-        </app-input>
+        <div class="input-field">
+          <label for="number-input">Numero</label>
+          <app-input
+            id="number-input"
+            type="number"
+            placeholder="0"
+            [value]="numberValue"
+            (valueChange)="numberValue = $event"
+          />
+        </div>
 
-        <app-input
-          type="email"
-          placeholder="mail@empresa.com"
-          [value]="email"
-          (valueChange)="email = $event"
-        >
-          Email
-        </app-input>
+        <div class="input-field">
+          <label for="email-input">Email</label>
+          <app-input
+            id="email-input"
+            type="email"
+            placeholder="mail@empresa.com"
+            [value]="email"
+            (valueChange)="email = $event"
+          />
+        </div>
 
-        <app-input
-          type="user"
-          placeholder="Nombre de usuario"
-          [value]="user"
-          (valueChange)="user = $event"
-        >
-          Usuario
-        </app-input>
+        <div class="input-field">
+          <label for="user-input">Usuario</label>
+          <app-input
+            id="user-input"
+            type="user"
+            placeholder="Nombre de usuario"
+            [value]="user"
+            (valueChange)="user = $event"
+          />
+        </div>
 
-        <app-input
-          type="password-toggle"
-          placeholder="********"
-          [value]="password"
-          (valueChange)="password = $event"
-        >
-          Password
-        </app-input>
+        <div class="input-field">
+          <label for="password-input">Password</label>
+          <app-input
+            id="password-input"
+            type="password-toggle"
+            placeholder="********"
+            [value]="password"
+            (valueChange)="password = $event"
+          />
+        </div>
 
-        <app-input
-          type="date"
-          [value]="date"
-          (valueChange)="date = $event"
-        >
-          Fecha
-        </app-input>
+        <div class="input-field">
+          <label for="date-input">Fecha</label>
+          <app-input
+            id="date-input"
+            type="date"
+            [value]="date"
+            (valueChange)="date = $event"
+          />
+        </div>
 
-        <app-input
-          type="period"
-          [value]="period"
-          (valueChange)="period = $event"
-        >
-          Periodo
-        </app-input>
+        <div class="input-field">
+          <label for="period-input">Periodo</label>
+          <app-input
+            id="period-input"
+            type="period"
+            [value]="period"
+            (valueChange)="period = $event"
+          />
+        </div>
 
-        <app-input
-          type="currency"
-          placeholder="0"
-          [value]="amount"
-          (valueChange)="amount = $event"
-        >
-          Moneda
-        </app-input>
+        <div class="input-field">
+          <label for="amount-input">Moneda</label>
+          <app-input
+            id="amount-input"
+            type="currency"
+            placeholder="0"
+            [value]="amount"
+            (valueChange)="amount = $event"
+          />
+        </div>
 
-        <app-input
-          type="percent"
-          placeholder="0"
-          [value]="percent"
-          (valueChange)="percent = $event"
-        >
-          Porcentaje
-        </app-input>
+        <div class="input-field">
+          <label for="percent-input">Porcentaje</label>
+          <app-input
+            id="percent-input"
+            type="percent"
+            placeholder="0"
+            [value]="percent"
+            (valueChange)="percent = $event"
+          />
+        </div>
 
-        <app-input
-          placeholder="Campo deshabilitado"
-          [value]="disabledValue"
-          [disabled]="true"
-        >
-          Deshabilitado
-        </app-input>
+        <div class="input-field">
+          <label for="disabled-input">Deshabilitado</label>
+          <app-input
+            id="disabled-input"
+            placeholder="Campo deshabilitado"
+            [value]="disabledValue"
+            [disabled]="true"
+          />
+        </div>
 
-        <app-input
-          type="editable"
-          [value]="editableValue"
-          [disabled]="editableDisabled"
-          (valueChange)="editableValue = $event"
-          (disabledChange)="editableDisabled = $event"
-        >
-          Editable
-        </app-input>
+        <div class="input-field">
+          <label for="editable-input">Editable</label>
+          <app-input
+            id="editable-input"
+            type="editable"
+            [value]="editableValue"
+            [disabled]="editableDisabled"
+            (valueChange)="editableValue = $event"
+            (disabledChange)="editableDisabled = $event"
+          />
+        </div>
 
-        <app-input
-          type="email"
-          placeholder="mail@empresa.com"
-          [value]="invalidEmail"
-          [invalid]="true"
-          (valueChange)="invalidEmail = $event"
-        >
-          Invalido
-        </app-input>
+        <div class="input-field">
+          <label for="invalid-input">Invalido</label>
+          <app-input
+            id="invalid-input"
+            type="email"
+            placeholder="mail@empresa.com"
+            [value]="invalidEmail"
+            [invalid]="true"
+            (valueChange)="invalidEmail = $event"
+          />
+        </div>
 
         <div class="file-field">
-          <app-input
-            type="file"
-            accept=".pdf,.png,.jpg"
-            [fileName]="fileName"
-            [clearTrigger]="clearTrigger"
-            (fileChange)="onFileChange($event)"
-          >
-            Archivo
-          </app-input>
+          <div class="input-field">
+            <label for="file-input">Archivo</label>
+            <app-input
+              id="file-input"
+              type="file"
+              accept=".pdf,.png,.jpg"
+              [fileName]="fileName"
+              [clearTrigger]="clearTrigger"
+              (fileChange)="onFileChange($event)"
+            />
+          </div>
 
           <app-button variant="secondary" (click)="clearFile()">Limpiar archivo</app-button>
         </div>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss

@@ -65,6 +65,11 @@ h1 {
   gap: 1rem;
 }
 
+.input-field {
+  display: grid;
+  gap: 0;
+}
+
 .file-field {
   display: grid;
   gap: 0.75rem;

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

@@ -1,7 +1,3 @@
-<label [for]="id" class="input-label">
-  <ng-content />
-</label>
-
 <div
   class="input-control"
   [ngClass]="{
@@ -20,8 +16,8 @@
 
   <input
     #inputElement
-    [id]="id"
-    [name]="id"
+    [id]="id()"
+    [name]="id()"
     [type]="inputType()"
     [ngClass]="inputClasses()"
     [disabled]="isInputDisabled()"

src/app/shared/components/input/input.component.scss

@@ -4,12 +4,6 @@
   padding-bottom: 0 !important;
 }
 
-.input-label {
-  display: block;
-  margin-bottom: 0.375rem;
-  font-weight: 500;
-}
-
 .input-control {
   position: relative;
 }

src/app/shared/components/input/input.component.ts

@@ -66,8 +66,10 @@ export class InputComponent {
   private readonly editableDisabled = signal(false);
   private readonly passwordVisible = signal(false);
   private lastClearTrigger = 0;
+  private readonly defaultId = `app-input-${globalThis.crypto.randomUUID()}`;
 
   readonly invalid = input(false);
+  readonly id = input(this.defaultId);
   readonly placeholder = input('');
   readonly value = input<string | number>('');
   readonly maxlength = input<number | null>(null);
@@ -85,8 +87,6 @@ export class InputComponent {
   readonly fileChange = output<File | null>();
   readonly visibleChange = output<boolean>();
 
-  protected readonly id = `app-input-${globalThis.crypto.randomUUID()}`;
-
   protected readonly inputType = computed(() => {
     const type = this.type();
 

src/styles.scss

@@ -10,3 +10,9 @@
 :root {
   --bs-body-font-family: "Gotham", sans-serif;
 }
+
+label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-weight: 500;
+}