Text Input

<q-text-input
  class="w-72"
  hint="Optional hint"
  label="Label"
  placeholder="Placeholder text"
/>

<q-text-input
  class="w-72"
  defaultValue="Both icons"
  endIcon="Calendar"
  label="Both icons"
  startIcon="AArrowDown"
/>

import {Component} from "@angular/core"

import {TextInputModule} from "@qualcomm-ui/angular/text-input"

@Component({
  imports: [TextInputModule],
  selector: "text-input-child-directives-demo",
  template: `
    <q-text-input class="w-72" placeholder="Placeholder text">
      <label q-text-input-label>Label</label>
      <div q-text-input-hint>Optional hint</div>
    </q-text-input>
  `,
})
export class TextInputChildDirectivesDemo {}

<div class="w-72" q-text-input-root>
  <label q-text-input-label>Label</label>
  <div q-text-input-input-group>
    <input placeholder="Placeholder text" q-text-input-input />
    <button q-text-input-clear-trigger></button>
    <span q-text-input-error-indicator></span>
  </div>
  <div q-text-input-hint>Optional hint</div>
</div>

<div
  class="w-72"
  defaultValue="Both icons with clear button"
  q-text-input-root
>
  <label q-text-input-label>Start + End icons</label>
  <div endIcon="Calendar" q-text-input-input-group startIcon="AArrowDown">
    <input placeholder="Placeholder text" q-text-input-input />
    <button q-text-input-clear-trigger></button>
  </div>
</div>

<div q-text-input-root size="sm">
  <div class="flex items-center gap-4">
    <label class="font-body-sm-bold w-48" q-text-input-label>
      Project Name
    </label>
    <div q-text-input-input-group>
      <input class="w-full" placeholder="QVSCE" q-text-input-input />
    </div>
  </div>
</div>

<div q-text-input-root size="sm">
  <div class="flex items-center gap-4">
    <label class="font-body-sm-bold w-48" q-text-input-label>
      Project Version
    </label>
    <div q-text-input-input-group>
      <input class="w-full" placeholder="v1.2.3" q-text-input-input />
    </div>
  </div>
</div>

<q-text-input aria-label="Simple" defaultValue="Simple" />

<div defaultValue="Composite" q-text-input-root>
  <div q-text-input-input-group>
    <input aria-label="Composite" q-text-input-input />
    <button q-text-input-clear-trigger></button>
  </div>
</div>

<q-text-input
  aria-label="sm"
  class="w-56"
  defaultValue="sm"
  size="sm"
  startIcon="Search"
/>
<q-text-input
  aria-label="md"
  class="w-60"
  defaultValue="md"
  size="md"
  startIcon="Search"
/>
<q-text-input
  aria-label="lg"
  class="w-64"
  defaultValue="lg"
  size="lg"
  startIcon="Search"
/>

<q-text-input
  #textInput
  class="w-64"
  errorText="You must enter a value"
  label="Label"
  placeholder="Enter a value"
  required
  [invalid]="!value()"
  [(ngModel)]="value"
/>

<q-text-input
  class="w-72"
  errorText="Must be at least 3 characters long"
  label="Label"
  placeholder="Enter a value"
  [invalid]="value().length < 2"
  [(ngModel)]="value"
/>

import {Component, inject, signal} from "@angular/core"
import {
  FormBuilder,
  type FormGroup,
  ReactiveFormsModule,
  Validators,
} from "@angular/forms"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {TextInputModule} from "@qualcomm-ui/angular/text-input"

@Component({
  imports: [TextInputModule, ButtonModule, ReactiveFormsModule],
  selector: "text-input-reactive-forms-demo",
  template: `
    <form
      class="mx-auto flex w-96 flex-col gap-3"
      [formGroup]="addressForm"
      (ngSubmit)="onSubmit()"
    >
      <q-text-input
        class="w-full"
        errorText="Street address is required"
        formControlName="streetAddress"
        label="Stress Address"
        placeholder="123 Main St"
        [invalid]="isFieldInvalid('streetAddress')"
      />

      <q-text-input
        class="w-full"
        errorText="City is required"
        formControlName="city"
        label="City"
        placeholder="San Diego"
        [invalid]="isFieldInvalid('city')"
      />

      <div class="grid grid-cols-2 gap-4">
        <q-text-input
          class="w-full"
          errorText="State must be 2 characters"
          formControlName="state"
          label="State"
          placeholder="CA"
          [invalid]="isFieldInvalid('state')"
        />

        <q-text-input
          class="w-full"
          errorText="Zip code must be at least 5 characters"
          formControlName="zipCode"
          label="Zip Code"
          placeholder="10001"
          [invalid]="isFieldInvalid('zipCode')"
        />
      </div>

      <div class="mt-2 flex w-full justify-end">
        <button
          emphasis="primary"
          q-button
          type="submit"
          variant="fill"
          [disabled]="isSubmitting()"
        >
          Save Address
        </button>
      </div>
    </form>
  `,
})
export class TextInputReactiveFormsDemo {
  readonly isSubmitting = signal(false)

  readonly addressForm: FormGroup
  private fb = inject(FormBuilder)

  constructor() {
    this.addressForm = this.fb.group({
      city: ["", [Validators.required]],
      state: [
        "CA",
        [Validators.required, Validators.minLength(2), Validators.maxLength(2)],
      ],
      streetAddress: ["", [Validators.required]],
      zipCode: ["", [Validators.required, Validators.minLength(5)]],
    })
  }

  isFieldInvalid(fieldName: string): boolean {
    const field = this.addressForm.get(fieldName)
    return !!(field && field.invalid && (field.dirty || field.touched))
  }

  onSubmit() {
    if (this.addressForm.valid) {
      this.isSubmitting.set(true)
      console.log("Form submitted:", this.addressForm.value)
      // Simulate API call
      setTimeout(() => {
        this.isSubmitting.set(false)
      }, 1000)
    } else {
      // Mark all fields as touched to show validation errors
      this.addressForm.markAllAsTouched()
    }
  }
}

<div
  class="w-72"
  q-text-input-root
  [invalid]="isInvalid()"
  [(ngModel)]="value"
>
  <label q-text-input-label>Composite Forms</label>
  <div q-text-input-input-group>
    <input placeholder="Enter a value" q-text-input-input />
    <button q-text-input-clear-trigger></button>
    <span q-text-input-error-indicator></span>
  </div>
  <div q-text-input-error-text>Must be at least three characters long</div>
</div>