Number Input

<q-number-input class="w-72" label="Label" placeholder="Enter a number" />

<q-number-input class="w-72" placeholder="Enter a number">
  <label q-number-input-label>Label</label>
</q-number-input>

<div class="w-72" q-number-input-root>
  <label q-number-input-label>Label</label>
  <div q-number-input-input-group>
    <input placeholder="Enter a number" q-number-input-input />
    <div q-number-input-control></div>
    <span q-number-input-error-indicator></span>
  </div>
  <div q-number-input-error-text>Error</div>
</div>

<q-number-input
  aria-label="Number input with min and max"
  class="w-72"
  defaultValue="7"
  max="10"
  min="5"
/>

<q-number-input
  aria-label="Number input with step"
  class="w-72"
  placeholder="Enter a number"
  step="3"
/>

<q-number-input disabled label="Disabled" placeholder="Disabled" />
<q-number-input label="Read only" placeholder="Read only" readOnly />
<q-number-input
  errorText="Invalid"
  invalid
  label="Invalid"
  placeholder="Invalid"
/>

<q-number-input
  aria-label="Number input with size sm"
  class="w-56"
  placeholder="sm"
  size="sm"
  startIcon="Sigma"
/>
<q-number-input
  aria-label="Number input with size md"
  class="w-64"
  placeholder="md"
  size="md"
  startIcon="Sigma"
/>
<q-number-input
  aria-label="Number input with size lg"
  class="w-72"
  placeholder="lg"
  size="lg"
  startIcon="Sigma"
/>

<q-number-input
  class="w-72"
  defaultUnit="USD"
  label="Price"
  placeholder="0.00"
  [unitOptions]="unitOptions"
/>

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

import {NumberInputModule} from "@qualcomm-ui/angular/number-input"

@Component({
  imports: [NumberInputModule, FormsModule],
  selector: "number-input-error-text-demo",
  template: `
    <q-number-input
      class="w-72"
      defaultValue="0"
      errorText="Value must be greater than 0"
      label="Label"
      placeholder="Enter a value"
      [invalid]="isInvalid()"
    />
  `,
})
export class NumberInputErrorTextDemo {
  readonly value = signal<number>(0)

  readonly isInvalid = computed(() => {
    const value = this.value()
    return isNaN(value) || value <= 0
  })
}

<q-number-input
  class="w-72"
  errorText="Value must be greater than 0"
  label="Label"
  placeholder="Enter a value"
  [invalid]="isInvalid()"
  [(ngModel)]="value"
/>

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

import {requiredNumberValidator} from "@qualcomm-ui/angular-core/number-input"
import {ErrorTextComponent} from "@qualcomm-ui/angular/input"
import {NumberInputModule} from "@qualcomm-ui/angular/number-input"

function aspectRatioValidator(
  control: AbstractControl,
): ValidationErrors | null {
  const width = control.get("width")?.value
  const height = control.get("height")?.value
  const ratio = width / height
  return ratio >= 0.25 && ratio <= 4 ? null : {invalidAspectRatio: true}
}

@Component({
  imports: [NumberInputModule, ReactiveFormsModule, ErrorTextComponent],
  selector: "number-input-reactive-forms-demo",
  template: `
    <form class="flex flex-col gap-3" [formGroup]="aspectRatioFormGroup">
      <div class="flex flex-wrap items-start gap-2">
        <q-number-input
          class="w-56"
          errorText="Width must be between 1 and 4096"
          formControlName="width"
          label="Width"
          step="0.01"
        />
        <q-number-input
          class="w-56"
          errorText="Height must be between 1 and 4096"
          formControlName="height"
          label="Height"
          step="0.01"
        />
      </div>
      @if (aspectRatioFormGroup.hasError("invalidAspectRatio")) {
        <div q-error-text>
          Invalid aspect ratio: {{ aspectRatio() }} (must be between 0.25 and 4)
        </div>
      }
    </form>
  `,
})
export class NumberInputReactiveFormsDemo {
  protected readonly fb = inject(FormBuilder)

  aspectRatioFormGroup = this.fb.group(
    {
      height: [
        600,
        [Validators.min(1), Validators.max(4096), requiredNumberValidator],
      ],
      width: [
        800,
        [Validators.min(1), Validators.max(4096), requiredNumberValidator],
      ],
    },
    {validators: [Validators.required, aspectRatioValidator]},
  )

  aspectRatio() {
    const height = this.aspectRatioFormGroup.get("height")?.value || 1
    const width = this.aspectRatioFormGroup.get("width")?.value || 0
    return (width / height).toFixed(5)
  }
}

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

import {NumberInputModule} from "@qualcomm-ui/angular/number-input"

@Component({
  imports: [NumberInputModule, FormsModule],
  selector: "number-input-composite-forms-demo",
  template: `
    <div
      class="w-72"
      q-number-input-root
      [invalid]="isInvalid()"
      [(ngModel)]="value"
    >
      <label q-number-input-label>Composite Forms</label>
      <div q-number-input-input-group>
        <input placeholder="Enter a value" q-number-input-input />
        <div q-number-input-control></div>
        <span q-number-input-error-indicator></span>
      </div>
      <div q-number-input-error-text>Value must be greater than 0</div>
    </div>
  `,
})
export class NumberInputCompositeFormsDemo {
  readonly value = signal<number>(0)

  readonly isInvalid = computed(() => {
    return isNaN(this.value()) || this.value() <= 0
  })
}