{
  "name": "input",
  "type": "registry:component",
  "files": [
    {
      "name": "input.component.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  model,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardInputGroupComponent } from '@/shared/components/input-group';\nimport { mergeClasses, noopFn } from '@/shared/utils/merge-classes';\n\nimport { inputGroupInputVariants, inputVariants } from './input.variants';\n\ntype OnTouchedType = () => void;\ntype ZardInputElement = HTMLInputElement | HTMLTextAreaElement;\ntype ZardInputValue = string | number | null | undefined;\ntype OnChangeType = (value: ZardInputValue) => void;\n\n@Component({\n  selector: 'input[z-input]',\n  template: '',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZardInputComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[attr.data-slot]': 'parentGroup ? \"input-group-control\" : \"input\"',\n    '[class]': 'classes()',\n    '(input)': 'updateValue($event.target)',\n    '(blur)': 'onBlur()',\n  },\n  exportAs: 'zInput',\n})\nexport class ZardInputComponent implements ControlValueAccessor {\n  readonly parentGroup = inject(ZardInputGroupComponent, { optional: true });\n  private readonly elementRef = inject(ElementRef<HTMLInputElement>);\n\n  private onTouchedFn: OnTouchedType = noopFn;\n  private onChangeFn: OnChangeType = noopFn;\n\n  readonly class = input<ClassValue>('');\n  readonly value = model<ZardInputValue>(null);\n\n  protected readonly classes = computed(() =>\n    mergeClasses(inputVariants(), this.parentGroup ? inputGroupInputVariants() : '', this.class()),\n  );\n\n  constructor() {\n    effect(() => {\n      this.writeNativeValue(this.value());\n      const value = this.value();\n      if (value !== undefined && value !== null) {\n        this.elementRef.nativeElement.value = value;\n      }\n    });\n  }\n\n  disable(b: boolean): void {\n    this.elementRef.nativeElement.disabled = b;\n  }\n\n  protected updateValue(target: EventTarget | null): void {\n    const el = target as ZardInputElement | null;\n    this.value.set(this.readNativeValue(el));\n    this.onChangeFn(this.value());\n  }\n\n  protected onBlur(): void {\n    this.onTouchedFn();\n  }\n\n  registerOnChange(fn: OnChangeType): void {\n    this.onChangeFn = fn;\n  }\n\n  registerOnTouched(fn: OnTouchedType): void {\n    this.onTouchedFn = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.elementRef.nativeElement.disabled = isDisabled;\n  }\n\n  writeValue(value?: string): void {\n    this.value.set(value ?? '');\n  }\n\n  private isNumericInput(element: ZardInputElement): element is HTMLInputElement {\n    return element.tagName.toLowerCase() === 'input' && ['number', 'range'].includes(element.type);\n  }\n\n  private readNativeValue(element: ZardInputElement | null): ZardInputValue {\n    if (!element) {\n      return '';\n    }\n\n    if (this.isNumericInput(element)) {\n      const currentValue = this.value();\n\n      if (typeof currentValue === 'number' || currentValue === null) {\n        if (element.value === '') {\n          return null;\n        }\n\n        const numericValue = element.valueAsNumber;\n        return Number.isNaN(numericValue) ? null : numericValue;\n      }\n    }\n\n    return element.value;\n  }\n\n  private writeNativeValue(value: ZardInputValue): void {\n    const element = this.elementRef.nativeElement;\n\n    if (this.isNumericInput(element) && typeof value === 'number') {\n      element.value = Number.isNaN(value) ? '' : String(value);\n      return;\n    }\n\n    element.value = String(value ?? '');\n  }\n}\n"
    },
    {
      "name": "input.variants.ts",
      "content": "import { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n  'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n);\n\nexport const inputGroupInputVariants = cva(\n  'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n);\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './input.component';\nexport * from './input.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "badge.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBadgeComponent } from '@/shared/components/badge/badge.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-badge',\n  imports: [ZardInputComponent, ZardBadgeComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-80\">\n      <label z-field-label for=\"input-badge\">\n        Webhook URL\n        <z-badge zType=\"secondary\" class=\"ml-auto\">Beta</z-badge>\n      </label>\n      <input z-input id=\"input-badge\" type=\"url\" placeholder=\"https://api.example.com/webhook\" />\n    </div>\n  `,\n})\nexport class ZardDemoInputBadgeComponent {}\n"
    },
    {
      "name": "basic.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-basic',\n  imports: [ZardInputComponent],\n  template: `\n    <input z-input placeholder=\"Enter text\" class=\"w-72\" />\n  `,\n})\nexport class ZardDemoInputBasicComponent {}\n"
    },
    {
      "name": "button-group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-button-group',\n  imports: [ZardInputComponent, ZardButtonComponent, ZardButtonGroupComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-80\">\n      <label z-field-label for=\"input-button-group\">Search</label>\n      <z-button-group>\n        <input z-input id=\"input-button-group\" placeholder=\"Type to search...\" />\n        <button z-button zType=\"outline\">Search</button>\n      </z-button-group>\n    </div>\n  `,\n})\nexport class ZardDemoInputButtonGroupComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-default',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\">\n      <label z-field-label for=\"input-demo-api-key\">API Key</label>\n      <input z-input id=\"input-demo-api-key\" type=\"password\" placeholder=\"sk-...\" />\n      <p z-field-description>Your API key is encrypted and stored securely.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputDefaultComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-disabled',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\" data-disabled=\"true\">\n      <label z-field-label for=\"input-demo-disabled\">Email</label>\n      <input z-input id=\"input-demo-disabled\" type=\"email\" placeholder=\"Email\" disabled />\n      <p z-field-description>This field is currently disabled.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputDisabledComponent {}\n"
    },
    {
      "name": "field-group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-field-group',\n  imports: [ZardInputComponent, ZardButtonComponent, ...ZardFieldImports],\n  template: `\n    <div z-field-group class=\"w-72\">\n      <div z-field>\n        <label z-field-label for=\"fieldgroup-name\">Name</label>\n        <input z-input id=\"fieldgroup-name\" placeholder=\"Jordan Lee\" />\n      </div>\n      <div z-field>\n        <label z-field-label for=\"fieldgroup-email\">Email</label>\n        <input z-input id=\"fieldgroup-email\" type=\"email\" placeholder=\"name@example.com\" />\n        <p z-field-description>We'll send updates to this address.</p>\n      </div>\n      <div z-field zOrientation=\"horizontal\">\n        <button z-button type=\"reset\" zType=\"outline\">Reset</button>\n        <button z-button type=\"submit\">Submit</button>\n      </div>\n    </div>\n  `,\n})\nexport class ZardDemoInputFieldGroupComponent {}\n"
    },
    {
      "name": "field.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-field',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\">\n      <label z-field-label for=\"input-field-username\">Username</label>\n      <input z-input id=\"input-field-username\" type=\"text\" placeholder=\"Enter your username\" />\n      <p z-field-description>Choose a unique username for your account.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputFieldComponent {}\n"
    },
    {
      "name": "file.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-file',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\">\n      <label z-field-label for=\"picture\">Picture</label>\n      <input z-input id=\"picture\" type=\"file\" />\n      <p z-field-description>Select a picture to upload.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputFileComponent {}\n"
    },
    {
      "name": "form.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardSelectImports } from '@/shared/components/select/select.imports';\n\n@Component({\n  selector: 'z-demo-input-form',\n  imports: [ZardInputComponent, ZardButtonComponent, ZardSelectImports, ...ZardFieldImports],\n  template: `\n    <form class=\"w-full min-w-sm\">\n      <div z-field-group>\n        <div z-field>\n          <label z-field-label for=\"form-name\">Name</label>\n          <input z-input id=\"form-name\" type=\"text\" placeholder=\"Evil Rabbit\" required />\n        </div>\n        <div z-field>\n          <label z-field-label for=\"form-email\">Email</label>\n          <input z-input id=\"form-email\" type=\"email\" placeholder=\"john@example.com\" />\n          <p z-field-description>We'll never share your email with anyone.</p>\n        </div>\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div z-field>\n            <label z-field-label for=\"form-phone\">Phone</label>\n            <input z-input id=\"form-phone\" type=\"tel\" placeholder=\"+1 (555) 123-4567\" />\n          </div>\n          <div z-field>\n            <label z-field-label for=\"form-country\">Country</label>\n            <z-select id=\"form-country\" [(zValue)]=\"country\">\n              <z-select-item zValue=\"us\">United States</z-select-item>\n              <z-select-item zValue=\"uk\">United Kingdom</z-select-item>\n              <z-select-item zValue=\"ca\">Canada</z-select-item>\n            </z-select>\n          </div>\n        </div>\n        <div z-field>\n          <label z-field-label for=\"form-address\">Address</label>\n          <input z-input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n        </div>\n        <div z-field zOrientation=\"horizontal\">\n          <button z-button type=\"button\" zType=\"outline\">Cancel</button>\n          <button z-button type=\"submit\">Submit</button>\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class ZardDemoInputFormComponent {\n  country = 'us';\n}\n"
    },
    {
      "name": "grid.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-grid',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field-group class=\"grid min-w-sm grid-cols-2\">\n      <div z-field>\n        <label z-field-label for=\"first-name\">First Name</label>\n        <input z-input id=\"first-name\" placeholder=\"Jordan\" />\n      </div>\n      <div z-field>\n        <label z-field-label for=\"last-name\">Last Name</label>\n        <input z-input id=\"last-name\" placeholder=\"Lee\" />\n      </div>\n    </div>\n  `,\n})\nexport class ZardDemoInputGridComponent {}\n"
    },
    {
      "name": "inline.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-inline',\n  imports: [ZardInputComponent, ZardButtonComponent, ...ZardFieldImports],\n  template: `\n    <div z-field zOrientation=\"horizontal\" class=\"w-80\">\n      <input z-input type=\"search\" placeholder=\"Search...\" />\n      <button type=\"button\" z-button>Search</button>\n    </div>\n  `,\n})\nexport class ZardDemoInputInlineComponent {}\n"
    },
    {
      "name": "input-group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideInfo } from '@ng-icons/lucide';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\n\n@Component({\n  selector: 'z-demo-input-input-group',\n  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-80\">\n      <label z-field-label for=\"input-group-url\">Website URL</label>\n      <z-input-group>\n        <z-input-group-addon>\n          <span z-input-group-text>https://</span>\n        </z-input-group-addon>\n        <input z-input id=\"input-group-url\" placeholder=\"example.com\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <ng-icon name=\"lucideInfo\" />\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideInfo })],\n})\nexport class ZardDemoInputInputGroupComponent {}\n"
    },
    {
      "name": "invalid.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-invalid',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\" data-invalid=\"true\">\n      <label z-field-label for=\"input-invalid\">Invalid Input</label>\n      <input z-input id=\"input-invalid\" placeholder=\"Error\" aria-invalid=\"true\" />\n      <p z-field-description>This field contains validation errors.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputInvalidComponent {}\n"
    },
    {
      "name": "required.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\n\n@Component({\n  selector: 'z-demo-input-required',\n  imports: [ZardInputComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\">\n      <label z-field-label for=\"input-required\">\n        Required Field\n        <span class=\"text-destructive\">*</span>\n      </label>\n      <input z-input id=\"input-required\" placeholder=\"This field is required\" required />\n      <p z-field-description>This field must be filled out.</p>\n    </div>\n  `,\n})\nexport class ZardDemoInputRequiredComponent {}\n"
    }
  ]
}