feat(web): vibe coding pazzo

frontend/src/app/shared/components/app-select/app-select.component.ts

@@ -0,0 +1,72 @@
+import { Component, input, output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-select',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppSelectComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="form-group">
+      @if (label()) { <label [for]="id()">{{ label() }}</label> }
+      <select
+        [id]="id()"
+        [value]="value"
+        (change)="onSelect($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled"
+        class="form-control"
+      >
+        @for (opt of options(); track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+      @if (error()) { <span class="error-text">{{ error() }}</span> }
+    </div>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+    .error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
+  `]
+})
+export class AppSelectComponent implements ControlValueAccessor {
+  label = input<string>('');
+  id = input<string>('select-' + Math.random().toString(36).substr(2, 9));
+  options = input<{label: string, value: any}[]>([]);
+  error = input<string | null>(null);
+
+  value: any = '';
+  disabled = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(obj: any): void { this.value = obj; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+  
+  onSelect(event: Event) {
+    const val = (event.target as HTMLSelectElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+}