{
  "name": "field",
  "type": "registry:component",
  "files": [
    {
      "name": "field.component.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  type TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  fieldContentVariants,\n  fieldDescriptionVariants,\n  fieldErrorVariants,\n  fieldGroupVariants,\n  fieldLabelVariants,\n  fieldLegendVariants,\n  fieldSeparatorVariants,\n  fieldSetVariants,\n  fieldTitleVariants,\n  fieldVariants,\n  type ZardFieldLegendVariants,\n  type ZardFieldOrientationVariants,\n} from './field.variants';\n\n@Component({\n  selector: 'z-field-set, fieldset[z-field-set]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-set',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldSet',\n})\nexport class ZardFieldSetComponent {\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldSetVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field-legend, legend[z-field-legend]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-legend',\n    '[attr.data-variant]': 'zVariant()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldLegend',\n})\nexport class ZardFieldLegendComponent {\n  readonly zVariant = input<ZardFieldLegendVariants>('legend');\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldLegendVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field-group, [z-field-group]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-group',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldGroup',\n})\nexport class ZardFieldGroupComponent {\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldGroupVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field, [z-field]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'group',\n    'data-slot': 'field',\n    '[attr.data-orientation]': 'zOrientation()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zField',\n})\nexport class ZardFieldComponent {\n  readonly zOrientation = input<ZardFieldOrientationVariants>('vertical');\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() =>\n    mergeClasses(fieldVariants({ zOrientation: this.zOrientation() }), this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-field-content, [z-field-content]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-content',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldContent',\n})\nexport class ZardFieldContentComponent {\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldContentVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field-label, label[z-field-label]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-label',\n    '[attr.for]': 'for() || null',\n    '[class]': 'classes()',\n    '(click)': 'onLabelClick()',\n  },\n  exportAs: 'zFieldLabel',\n})\nexport class ZardFieldLabelComponent {\n  private readonly elementRef = inject(ElementRef);\n\n  readonly class = input<ClassValue>('');\n  readonly for = input('');\n  protected readonly classes = computed(() => mergeClasses(fieldLabelVariants(), this.class()));\n\n  protected onLabelClick(): void {\n    if (!this.for()) {\n      return;\n    }\n\n    const target = this.elementRef.nativeElement.getRootNode()?.querySelector(`#${CSS.escape(this.for())}`);\n    if (target && target !== this.elementRef.nativeElement) {\n      target.focus();\n    }\n  }\n}\n\n@Component({\n  selector: 'z-field-title, [z-field-title]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-label',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldTitle',\n})\nexport class ZardFieldTitleComponent {\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldTitleVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field-description, p[z-field-description]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-description',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldDescription',\n})\nexport class ZardFieldDescriptionComponent {\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldDescriptionVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-field-separator',\n  imports: [ZardStringTemplateOutletDirective],\n  template: `\n    <div class=\"bg-border absolute inset-0 top-1/2 h-px\"></div>\n    @let content = zContent();\n    @if (content) {\n      <span\n        class=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\n        data-slot=\"field-separator-content\"\n      >\n        <ng-container *zStringTemplateOutlet=\"content\">{{ content }}</ng-container>\n      </span>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'field-separator',\n    '[attr.data-content]': '!!zContent()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldSeparator',\n})\nexport class ZardFieldSeparatorComponent {\n  readonly zContent = input<string | TemplateRef<void>>('');\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() => mergeClasses(fieldSeparatorVariants(), this.class()));\n}\n\nexport interface ZardFieldErrorEntry {\n  message?: string;\n}\n\n@Component({\n  selector: 'z-field-error',\n  template: `\n    @let errs = uniqueErrors();\n    @if (errs.length === 1) {\n      {{ errs[0].message }}\n    } @else if (errs.length > 1) {\n      <ul class=\"ml-4 flex list-disc flex-col gap-1\">\n        @for (error of errs; track $index) {\n          @if (error.message) {\n            <li>{{ error.message }}</li>\n          }\n        }\n      </ul>\n    } @else {\n      <ng-content />\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'alert',\n    'data-slot': 'field-error',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zFieldError',\n})\nexport class ZardFieldErrorComponent {\n  readonly zErrors = input<ReadonlyArray<ZardFieldErrorEntry | undefined>>([]);\n  readonly class = input<ClassValue>('');\n\n  protected readonly uniqueErrors = computed(() => {\n    const errs = this.zErrors();\n    if (!errs?.length) {\n      return [] as ZardFieldErrorEntry[];\n    }\n\n    const map = new Map<string | undefined, ZardFieldErrorEntry>();\n    for (const e of errs) {\n      if (!e) {\n        continue;\n      }\n      map.set(e.message, e);\n    }\n    return [...map.values()];\n  });\n\n  protected readonly classes = computed(() => mergeClasses(fieldErrorVariants(), this.class()));\n}\n"
    },
    {
      "name": "field.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const fieldSetVariants = cva(\n  'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n);\n\nexport const fieldLegendVariants = cva(\n  'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n);\n\nexport const fieldGroupVariants = cva(\n  'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n);\n\nexport const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {\n  variants: {\n    zOrientation: {\n      vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n    },\n  },\n  defaultVariants: {\n    zOrientation: 'vertical',\n  },\n});\n\nexport const fieldContentVariants = cva('group/field-content flex flex-1 flex-col gap-0.5 leading-snug');\n\nexport const fieldLabelVariants = cva(\n  [\n    'group/field-label peer/field-label flex w-fit gap-2 text-sm font-medium leading-snug',\n    'group-data-[disabled=true]/field:opacity-50',\n    'has-data-checked:border-primary/30 has-data-checked:bg-primary/5',\n    'has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',\n    'dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',\n    'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n  ].join(' '),\n);\n\nexport const fieldTitleVariants = cva(\n  'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',\n);\n\nexport const fieldDescriptionVariants = cva(\n  [\n    'text-left text-sm leading-normal font-normal text-muted-foreground',\n    'group-has-data-horizontal/field:text-balance',\n    '[[data-variant=legend]+&]:-mt-1.5',\n    'last:mt-0 nth-last-2:-mt-1',\n    '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n  ].join(' '),\n);\n\nexport const fieldSeparatorVariants = cva(\n  'relative -my-2 flex h-5 items-center text-sm group-data-[variant=outline]/field-group:-mb-2',\n);\n\nexport const fieldErrorVariants = cva('text-sm font-normal text-destructive');\n\nexport type ZardFieldOrientationVariants = NonNullable<VariantProps<typeof fieldVariants>['zOrientation']>;\nexport type ZardFieldLegendVariants = 'legend' | 'label';\n"
    },
    {
      "name": "field.imports.ts",
      "content": "export {\n  ZardFieldComponent,\n  ZardFieldContentComponent,\n  ZardFieldDescriptionComponent,\n  ZardFieldErrorComponent,\n  ZardFieldGroupComponent,\n  ZardFieldLabelComponent,\n  ZardFieldLegendComponent,\n  ZardFieldSeparatorComponent,\n  ZardFieldSetComponent,\n  ZardFieldTitleComponent,\n} from './field.component';\n\nimport {\n  ZardFieldComponent,\n  ZardFieldContentComponent,\n  ZardFieldDescriptionComponent,\n  ZardFieldErrorComponent,\n  ZardFieldGroupComponent,\n  ZardFieldLabelComponent,\n  ZardFieldLegendComponent,\n  ZardFieldSeparatorComponent,\n  ZardFieldSetComponent,\n  ZardFieldTitleComponent,\n} from './field.component';\n\nexport const ZardFieldImports = [\n  ZardFieldSetComponent,\n  ZardFieldLegendComponent,\n  ZardFieldGroupComponent,\n  ZardFieldComponent,\n  ZardFieldContentComponent,\n  ZardFieldLabelComponent,\n  ZardFieldTitleComponent,\n  ZardFieldDescriptionComponent,\n  ZardFieldSeparatorComponent,\n  ZardFieldErrorComponent,\n] as const;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './field.component';\nexport * from './field.imports';\nexport * from './field.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "checkbox.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardCheckboxComponent } from '@/shared/components/checkbox/checkbox.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\n\n@Component({\n  selector: 'z-demo-field-checkbox',\n  imports: [...ZardFieldImports, ZardCheckboxComponent, FormsModule],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <div z-field-group>\n        <fieldset z-field-set>\n          <legend z-field-legend zVariant=\"label\">Show these items on the desktop</legend>\n          <p z-field-description>Select the items you want to show on the desktop.</p>\n\n          <div z-field-group class=\"gap-3\">\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"finder-hard-disks\" [(ngModel)]=\"hardDisks\" name=\"hardDisks\"></span>\n              <label z-field-label for=\"finder-hard-disks\" class=\"font-normal\">Hard disks</label>\n            </div>\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"finder-external-disks\" [(ngModel)]=\"externalDisks\" name=\"externalDisks\"></span>\n              <label z-field-label for=\"finder-external-disks\" class=\"font-normal\">External disks</label>\n            </div>\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"finder-cds\" [(ngModel)]=\"cds\" name=\"cds\"></span>\n              <label z-field-label for=\"finder-cds\" class=\"font-normal\">CDs, DVDs, and iPods</label>\n            </div>\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"finder-servers\" [(ngModel)]=\"servers\" name=\"servers\"></span>\n              <label z-field-label for=\"finder-servers\" class=\"font-normal\">Connected servers</label>\n            </div>\n          </div>\n        </fieldset>\n\n        <z-field-separator />\n\n        <div z-field zOrientation=\"horizontal\">\n          <span z-checkbox zId=\"finder-sync-folders\" [(ngModel)]=\"syncFolders\" name=\"syncFolders\"></span>\n          <div z-field-content>\n            <label z-field-label for=\"finder-sync-folders\">Sync Desktop &amp; Documents folders</label>\n            <p z-field-description>\n              Your Desktop &amp; Documents folders are being synced with iCloud Drive. You can access them from other\n              devices.\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldCheckboxComponent {\n  protected hardDisks = true;\n  protected externalDisks = false;\n  protected cds = false;\n  protected servers = false;\n  protected syncFolders = true;\n}\n"
    },
    {
      "name": "choice-card.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-field-choice-card',\n  imports: [...ZardFieldImports, ...ZardRadioGroupImports, FormsModule],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <div z-field-group>\n        <fieldset z-field-set>\n          <legend z-field-legend zVariant=\"label\">Compute Environment</legend>\n          <p z-field-description>Select the compute environment for your cluster.</p>\n\n          <z-radio-group class=\"gap-3\" [(ngModel)]=\"env\">\n            <label z-field-label for=\"env-kubernetes\">\n              <div z-field zOrientation=\"horizontal\">\n                <div z-field-content>\n                  <div z-field-title>Kubernetes</div>\n                  <p z-field-description>Run GPU workloads on a K8s cluster.</p>\n                </div>\n                <z-radio zId=\"env-kubernetes\" value=\"kubernetes\" />\n              </div>\n            </label>\n\n            <label z-field-label for=\"env-vm\">\n              <div z-field zOrientation=\"horizontal\">\n                <div z-field-content>\n                  <div z-field-title>Virtual Machine</div>\n                  <p z-field-description>Access a cluster to run GPU workloads.</p>\n                </div>\n                <z-radio zId=\"env-vm\" value=\"vm\" />\n              </div>\n            </label>\n          </z-radio-group>\n        </fieldset>\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldChoiceCardComponent {\n  protected env = 'kubernetes';\n}\n"
    },
    {
      "name": "default.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardCheckboxComponent } from '@/shared/components/checkbox/checkbox.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';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-field-default',\n  imports: [\n    ...ZardFieldImports,\n    ZardButtonComponent,\n    ZardCheckboxComponent,\n    ZardInputComponent,\n    ZardTextareaComponent,\n    ZardSelectImports,\n    FormsModule,\n  ],\n  template: `\n    <div class=\"w-full min-w-md\">\n      <form>\n        <div z-field-group>\n          <fieldset z-field-set>\n            <legend z-field-legend>Payment Method</legend>\n            <p z-field-description>All transactions are secure and encrypted.</p>\n\n            <div z-field-group>\n              <div z-field>\n                <label z-field-label for=\"checkout-card-name\">Name on Card</label>\n                <input z-input id=\"checkout-card-name\" placeholder=\"Evil Rabbit\" zSize=\"sm\" required />\n              </div>\n\n              <div z-field>\n                <label z-field-label for=\"checkout-card-number\">Card Number</label>\n                <input z-input id=\"checkout-card-number\" placeholder=\"1234 5678 9012 3456\" zSize=\"sm\" required />\n                <p z-field-description>Enter your 16-digit card number.</p>\n              </div>\n\n              <div class=\"grid grid-cols-3 gap-4\">\n                <div z-field>\n                  <label z-field-label for=\"checkout-exp-month\" class=\"w-fit\">Month</label>\n                  <z-select id=\"checkout-exp-month\" zPlaceholder=\"MM\" zSize=\"sm\">\n                    <z-select-item zValue=\"01\">01</z-select-item>\n                    <z-select-item zValue=\"02\">02</z-select-item>\n                    <z-select-item zValue=\"03\">03</z-select-item>\n                    <z-select-item zValue=\"04\">04</z-select-item>\n                    <z-select-item zValue=\"05\">05</z-select-item>\n                    <z-select-item zValue=\"06\">06</z-select-item>\n                    <z-select-item zValue=\"07\">07</z-select-item>\n                    <z-select-item zValue=\"08\">08</z-select-item>\n                    <z-select-item zValue=\"09\">09</z-select-item>\n                    <z-select-item zValue=\"10\">10</z-select-item>\n                    <z-select-item zValue=\"11\">11</z-select-item>\n                    <z-select-item zValue=\"12\">12</z-select-item>\n                  </z-select>\n                </div>\n                <div z-field>\n                  <label z-field-label for=\"checkout-exp-year\">Year</label>\n                  <z-select id=\"checkout-exp-year\" zPlaceholder=\"YYYY\" zSize=\"sm\">\n                    <z-select-item zValue=\"2024\">2024</z-select-item>\n                    <z-select-item zValue=\"2025\">2025</z-select-item>\n                    <z-select-item zValue=\"2026\">2026</z-select-item>\n                    <z-select-item zValue=\"2027\">2027</z-select-item>\n                    <z-select-item zValue=\"2028\">2028</z-select-item>\n                    <z-select-item zValue=\"2029\">2029</z-select-item>\n                  </z-select>\n                </div>\n                <div z-field>\n                  <label z-field-label for=\"checkout-cvv\">CVV</label>\n                  <input z-input id=\"checkout-cvv\" placeholder=\"123\" zSize=\"sm\" required />\n                </div>\n              </div>\n            </div>\n          </fieldset>\n\n          <z-field-separator />\n\n          <fieldset z-field-set>\n            <legend z-field-legend>Billing Address</legend>\n            <p z-field-description>The billing address associated with your payment method.</p>\n\n            <div z-field-group>\n              <div z-field zOrientation=\"horizontal\">\n                <span\n                  z-checkbox\n                  zId=\"checkout-same-as-shipping\"\n                  [(ngModel)]=\"sameAsShipping\"\n                  name=\"sameAsShipping\"\n                ></span>\n                <label z-field-label for=\"checkout-same-as-shipping\" class=\"font-normal\">\n                  Same as shipping address\n                </label>\n              </div>\n            </div>\n          </fieldset>\n\n          <fieldset z-field-set>\n            <div z-field-group>\n              <div z-field>\n                <label z-field-label for=\"checkout-comments\">Comments</label>\n                <textarea\n                  z-textarea\n                  id=\"checkout-comments\"\n                  placeholder=\"Add any additional comments\"\n                  class=\"resize-none\"\n                ></textarea>\n              </div>\n            </div>\n          </fieldset>\n\n          <div z-field zOrientation=\"horizontal\">\n            <button z-button type=\"submit\">Submit</button>\n            <button z-button zType=\"outline\" type=\"button\">Cancel</button>\n          </div>\n        </div>\n      </form>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldDefaultComponent {\n  protected sameAsShipping = true;\n}\n"
    },
    {
      "name": "field-group.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardCheckboxComponent } from '@/shared/components/checkbox/checkbox.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\n\n@Component({\n  selector: 'z-demo-field-field-group',\n  imports: [...ZardFieldImports, ZardCheckboxComponent, FormsModule],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <div z-field-group>\n        <fieldset z-field-set>\n          <label z-field-label>Responses</label>\n          <p z-field-description>\n            Get notified when ChatGPT responds to requests that take time, like research or image generation.\n          </p>\n\n          <div z-field-group data-slot=\"checkbox-group\">\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"responses-push\" [(ngModel)]=\"responsesPush\" name=\"responsesPush\" zDisabled></span>\n              <label z-field-label for=\"responses-push\" class=\"font-normal\">Push notifications</label>\n            </div>\n          </div>\n        </fieldset>\n\n        <z-field-separator />\n\n        <fieldset z-field-set>\n          <label z-field-label>Tasks</label>\n          <p z-field-description>\n            Get notified when tasks you've created have updates.\n            <a href=\"#\">Manage tasks</a>\n          </p>\n\n          <div z-field-group data-slot=\"checkbox-group\">\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"tasks-push\" [(ngModel)]=\"tasksPush\" name=\"tasksPush\"></span>\n              <label z-field-label for=\"tasks-push\" class=\"font-normal\">Push notifications</label>\n            </div>\n            <div z-field zOrientation=\"horizontal\">\n              <span z-checkbox zId=\"tasks-email\" [(ngModel)]=\"tasksEmail\" name=\"tasksEmail\"></span>\n              <label z-field-label for=\"tasks-email\" class=\"font-normal\">Email notifications</label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldFieldGroupComponent {\n  protected responsesPush = true;\n  protected tasksPush = false;\n  protected tasksEmail = false;\n}\n"
    },
    {
      "name": "fieldset.ts",
      "content": "import { ChangeDetectionStrategy, 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-field-fieldset',\n  imports: [...ZardFieldImports, ZardInputComponent],\n  template: `\n    <div class=\"w-full min-w-sm\">\n      <fieldset z-field-set>\n        <legend z-field-legend>Address Information</legend>\n        <p z-field-description>We need your address to deliver your order.</p>\n\n        <div z-field-group>\n          <div z-field>\n            <label z-field-label for=\"street\">Street Address</label>\n            <input z-input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\n          </div>\n          <div class=\"grid grid-cols-2 gap-4\">\n            <div z-field>\n              <label z-field-label for=\"city\">City</label>\n              <input z-input id=\"city\" type=\"text\" placeholder=\"New York\" />\n            </div>\n            <div z-field>\n              <label z-field-label for=\"zip\">Postal Code</label>\n              <input z-input id=\"zip\" type=\"text\" placeholder=\"90502\" />\n            </div>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldFieldsetComponent {}\n"
    },
    {
      "name": "input.ts",
      "content": "import { ChangeDetectionStrategy, 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-field-input',\n  imports: [...ZardFieldImports, ZardInputComponent],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <fieldset z-field-set>\n        <div z-field-group>\n          <div z-field>\n            <label z-field-label for=\"username\">Username</label>\n            <input z-input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\n            <p z-field-description>Choose a unique username for your account.</p>\n          </div>\n          <div z-field>\n            <label z-field-label for=\"password\">Password</label>\n            <p z-field-description>Must be at least 8 characters long.</p>\n            <input z-input id=\"password\" type=\"password\" placeholder=\"••••••••\" />\n          </div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldInputComponent {}\n"
    },
    {
      "name": "radio.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardRadioGroupImports } from '@/shared/components/radio-group/radio-group.imports';\n\n@Component({\n  selector: 'z-demo-field-radio',\n  imports: [...ZardFieldImports, ...ZardRadioGroupImports, FormsModule],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <fieldset z-field-set>\n        <legend z-field-legend zVariant=\"label\">Subscription Plan</legend>\n        <p z-field-description>Yearly and lifetime plans offer significant savings.</p>\n\n        <z-radio-group class=\"gap-3\" [(ngModel)]=\"plan\">\n          <div z-field zOrientation=\"horizontal\">\n            <z-radio zId=\"plan-monthly\" value=\"monthly\" />\n            <label z-field-label for=\"plan-monthly\" class=\"font-normal\">Monthly ($9.99/month)</label>\n          </div>\n          <div z-field zOrientation=\"horizontal\">\n            <z-radio zId=\"plan-yearly\" value=\"yearly\" />\n            <label z-field-label for=\"plan-yearly\" class=\"font-normal\">Yearly ($99.99/year)</label>\n          </div>\n          <div z-field zOrientation=\"horizontal\">\n            <z-radio zId=\"plan-lifetime\" value=\"lifetime\" />\n            <label z-field-label for=\"plan-lifetime\" class=\"font-normal\">Lifetime ($299.99)</label>\n          </div>\n        </z-radio-group>\n      </fieldset>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldRadioComponent {\n  protected plan = 'monthly';\n}\n"
    },
    {
      "name": "select.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSelectImports } from '@/shared/components/select/select.imports';\n\n@Component({\n  selector: 'z-demo-field-select',\n  imports: [...ZardFieldImports, ZardSelectImports],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <div z-field>\n        <label z-field-label for=\"department\">Department</label>\n        <z-select zPlaceholder=\"Choose department\" id=\"department\" zSize=\"sm\">\n          <z-select-item zValue=\"engineering\">Engineering</z-select-item>\n          <z-select-item zValue=\"design\">Design</z-select-item>\n          <z-select-item zValue=\"marketing\">Marketing</z-select-item>\n          <z-select-item zValue=\"sales\">Sales</z-select-item>\n          <z-select-item zValue=\"support\">Customer Support</z-select-item>\n          <z-select-item zValue=\"hr\">Human Resources</z-select-item>\n          <z-select-item zValue=\"finance\">Finance</z-select-item>\n          <z-select-item zValue=\"operations\">Operations</z-select-item>\n        </z-select>\n        <p z-field-description>Select your department or area of work.</p>\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldSelectComponent {}\n"
    },
    {
      "name": "slider.ts",
      "content": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSliderComponent } from '@/shared/components/slider/slider.component';\n\n@Component({\n  selector: 'z-demo-field-slider',\n  imports: [...ZardFieldImports, ZardSliderComponent],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <div z-field>\n        <div z-field-title>Volume</div>\n        <p z-field-description>\n          Set the playback volume (\n          <span class=\"font-medium tabular-nums\">{{ value() }}</span>\n          %).\n        </p>\n        <z-slider\n          class=\"mt-2 w-full\"\n          aria-label=\"Volume\"\n          [zDefault]=\"value()\"\n          [zMin]=\"0\"\n          [zMax]=\"100\"\n          [zStep]=\"1\"\n          (zSlideIndexChange)=\"value.set($event)\"\n        />\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldSliderComponent {\n  protected readonly value = signal([40]);\n}\n"
    },
    {
      "name": "switch.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardSwitchComponent } from '@/shared/components/switch/switch.component';\n\n@Component({\n  selector: 'z-demo-field-switch',\n  imports: [...ZardFieldImports, ZardSwitchComponent],\n  template: `\n    <div class=\"flex w-full min-w-xs justify-center\">\n      <div z-field zOrientation=\"horizontal\" class=\"w-fit\">\n        <label z-field-label for=\"2fa\">Multi-factor authentication</label>\n        <z-switch zId=\"2fa\" zSize=\"sm\" />\n      </div>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldSwitchComponent {}\n"
    },
    {
      "name": "textarea.ts",
      "content": "import { ChangeDetectionStrategy, 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-field-textarea',\n  imports: [...ZardFieldImports, ZardTextareaComponent],\n  template: `\n    <div class=\"w-full min-w-xs\">\n      <fieldset z-field-set>\n        <div z-field-group>\n          <div z-field>\n            <label z-field-label for=\"feedback\">Feedback</label>\n            <textarea z-textarea id=\"feedback\" placeholder=\"Your feedback helps us improve...\" rows=\"4\"></textarea>\n            <p z-field-description>Share your thoughts about our service.</p>\n          </div>\n        </div>\n      </fieldset>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoFieldTextareaComponent {}\n"
    }
  ]
}