<form [formGroup]="form">
  <tng-number-input
    formControlName="quantity"
    placeholder="Quantity"
    [min]="0"
    [max]="100"
    [step]="1"
  />
</form>

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TngNumberInput } from '@tailng-ui/ui/form';

@Component({
  selector: 'number-input-demo',
  standalone: true,
  imports: [ReactiveFormsModule, TngNumberInput],
  template: `<form [formGroup]="form">
    <tng-number-input formControlName="quantity" placeholder="Quantity"
      [min]="0" [max]="100" [step]="1" />
  </form>`,
})
export class NumberInputDemoComponent {
  form = new FormGroup({
    quantity: new FormControl<number | null>(10, { nonNullable: false }),
  });
}

<form [formGroup]="form">
  <tng-number-input
    formControlName="amount"
    placeholder="Amount (0–1000, step 0.01)"
    [min]="0"
    [max]="1000"
    [step]="0.01"
    [slot]="customSlot"
  />
</form>

import { TngSlotMap, TngNumberInputSlot } from '@tailng-ui/ui/form';

form = new FormGroup({
  amount: new FormControl<number | null>(null, { nonNullable: false }),
});

readonly customSlot: TngSlotMap<TngNumberInputSlot> = {
  frame: ['border-2', 'border-primary', 'rounded-lg'],
};

// min/max clamp on blur; step affects browser stepper and validation.

<form [formGroup]="form">
  <tng-number-input
    placeholder="Amount"
    [slot]="prefixSlot"
  >
    <tng-icon
      tngPrefix
      name="bootstrapCurrencyDollar"
      class="ml-3 text-muted"
    />
  </tng-number-input>
</form>

import { TngIcon } from '@tailng-ui/icons/icon';
import { TngNumberInput, TngSlotMap, TngNumberInputSlot } from '@tailng-ui/ui/form';

readonly prefixSlot: TngSlotMap<TngNumberInputSlot> = {
  input: ['text-blue-700'],
};