feat: enhance input component layout with labels and improve styling

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