Text Area

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

<div class="w-72" q-text-area-root>
  <label q-text-area-label>Label</label>
  <div q-text-area-counter></div>
  <textarea placeholder="Placeholder text" q-text-area-input></textarea>
  <div q-text-area-hint>Optional hint</div>
  <div q-text-area-error-text>Optional error text</div>
</div>

<q-text-area class="w-72" counter label="Counter without maxLength" />
<q-text-area
  class="w-72"
  label="Counter with maxLength"
  [maxLength]="10"
/>
<q-text-area class="w-72" label="Custom counter display" [maxLength]="10">
  <div q-text-area-counter [display]="customDisplay"></div>
</q-text-area>

<q-text-area class="w-56" defaultValue="sm" size="sm" />
<q-text-area class="w-60" defaultValue="md" />
<q-text-area class="w-64" defaultValue="lg" size="lg" />

import {Component} from "@angular/core"

import {TextAreaModule} from "@qualcomm-ui/angular/text-area"

@Component({
  imports: [TextAreaModule],
  selector: "text-area-value-changed-demo",
  template: `
    <q-text-area
      class="w-72"
      defaultValue="Initial value"
      label="Label"
      placeholder="Placeholder text"
      (valueChanged)="onValueChanged($event)"
    />
  `,
})
export class TextAreaValueChangedDemo {
  onValueChanged(newValue: string) {
    console.log("Value changed:", newValue)
  }
}

<q-text-area
  #textArea
  class="w-72"
  errorText="You must enter at least 10 characters."
  label="Label"
  placeholder="Enter at least 10 characters"
  required
  [invalid]="value().length < 10"
  [(ngModel)]="value"
/>

import {Component, signal} from "@angular/core"
import {FormsModule} from "@angular/forms"

import {TextAreaModule} from "@qualcomm-ui/angular/text-area"

@Component({
  imports: [TextAreaModule, FormsModule],
  selector: "text-area-template-forms-demo",
  template: `
    <q-text-area
      #textArea
      class="w-72"
      errorText="You must enter at least 10 characters."
      hint="10 characters minimum"
      label="Feedback"
      placeholder="Enter your feedback"
      required
      [invalid]="value().length < 10"
      [(ngModel)]="value"
    />
  `,
})
export class TextAreaTemplateFormsDemo {
  readonly value = signal<string>("Make me shorter")
}

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

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {TextAreaModule} from "@qualcomm-ui/angular/text-area"

@Component({
  imports: [TextAreaModule, ButtonModule, ReactiveFormsModule],
  selector: "text-area-reactive-forms-demo",
  template: `
    <form
      class="mx-auto flex w-72 flex-col gap-3"
      [formGroup]="feedbackForm"
      (ngSubmit)="onSubmit()"
    >
      <q-text-area
        class="w-full"
        errorText="Feedback must be at least 10 characters long"
        formControlName="feedback"
        hint="Minimum 10 characters"
        label="Feedback"
        placeholder="Tell us about your experience"
        [invalid]="isFieldInvalid('feedback')"
      />

      <div class="flex w-full justify-end">
        <button
          emphasis="primary"
          q-button
          type="submit"
          variant="fill"
          [disabled]="isSubmitting()"
        >
          Submit Feedback
        </button>
      </div>
    </form>
  `,
})
export class TextAreaReactiveFormsDemo {
  private fb = inject(FormBuilder)

  readonly isSubmitting = signal(false)

  feedbackForm = this.fb.group({
    feedback: ["", [Validators.required, Validators.minLength(10)]],
  })

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

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

<div
  class="w-72"
  q-text-area-root
  [invalid]="isInvalid()"
  [(ngModel)]="value"
>
  <label q-text-area-label>Composite Forms</label>
  <div q-text-area-counter></div>
  <textarea placeholder="Enter text" q-text-area-input></textarea>
  <div q-text-area-error-text>Must be at least 30 characters long</div>
</div>