{
  "name": "textarea",
  "type": "registry:component",
  "files": [
    {
      "name": "textarea.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 { inputGroupTextAreaVariants, textareaVariants } from './textarea.variants';\n\ntype OnTouchedType = () => void;\ntype OnChangeType = (value: string) => void;\n\n@Component({\n  selector: 'textarea[z-textarea]',\n  template: '',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ZardTextareaComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[attr.data-slot]': 'parentGroup ? \"input-group-control\" : \"textarea\"',\n    '[class]': 'classes()',\n    '(input)': 'updateValue($event.target)',\n    '(blur)': 'onBlur()',\n  },\n  exportAs: 'zTextarea',\n})\nexport class ZardTextareaComponent implements ControlValueAccessor {\n  readonly parentGroup = inject(ZardInputGroupComponent, { optional: true });\n  private readonly elementRef = inject(ElementRef<HTMLTextAreaElement>);\n\n  private onTouchedFn: OnTouchedType = noopFn;\n  private onChangeFn: OnChangeType = noopFn;\n\n  readonly class = input<ClassValue>('');\n  readonly value = model<string>('');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(textareaVariants(), this.parentGroup ? inputGroupTextAreaVariants() : '', this.class()),\n  );\n\n  constructor() {\n    effect(() => {\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 HTMLTextAreaElement | null;\n    this.value.set(el?.value ?? '');\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"
    },
    {
      "name": "textarea.variants.ts",
      "content": "import { cva } from 'class-variance-authority';\n\nexport const textareaVariants = cva(\n  'flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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 inputGroupTextAreaVariants = cva(\n  'flex-1 resize-none rounded-none border-0 bg-transparent py-2 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 './textarea.component';\nexport * from './textarea.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "button.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-textarea-button',\n  imports: [ZardTextareaComponent, ZardButtonComponent],\n  template: `\n    <div class=\"grid w-72 gap-2\">\n      <textarea z-textarea placeholder=\"Type your message here.\"></textarea>\n      <button z-button>Send message</button>\n    </div>\n  `,\n})\nexport class ZardDemoTextareaButtonComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-textarea-default',\n  imports: [ZardTextareaComponent],\n  template: `\n    <textarea z-textarea placeholder=\"Type your message here.\" class=\"w-72\"></textarea>\n  `,\n})\nexport class ZardDemoTextareaDefaultComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-textarea-disabled',\n  imports: [ZardTextareaComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\" data-disabled=\"true\">\n      <label z-field-label for=\"textarea-disabled\">Message</label>\n      <textarea z-textarea id=\"textarea-disabled\" placeholder=\"Type your message here.\" disabled></textarea>\n    </div>\n  `,\n})\nexport class ZardDemoTextareaDisabledComponent {}\n"
    },
    {
      "name": "field.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-textarea-field',\n  imports: [ZardTextareaComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\">\n      <label z-field-label for=\"textarea-message\">Message</label>\n      <p z-field-description>Enter your message below.</p>\n      <textarea z-textarea id=\"textarea-message\" placeholder=\"Type your message here.\"></textarea>\n    </div>\n  `,\n})\nexport class ZardDemoTextareaFieldComponent {}\n"
    },
    {
      "name": "invalid.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-textarea-invalid',\n  imports: [ZardTextareaComponent, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"w-72\" data-invalid=\"true\">\n      <label z-field-label for=\"textarea-invalid\">Message</label>\n      <textarea z-textarea id=\"textarea-invalid\" placeholder=\"Type your message here.\" aria-invalid=\"true\"></textarea>\n      <p z-field-description>Please enter a valid message.</p>\n    </div>\n  `,\n})\nexport class ZardDemoTextareaInvalidComponent {}\n"
    }
  ]
}