{
  "name": "input-group",
  "type": "registry:component",
  "files": [
    {
      "name": "input-group.component.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  inputGroupAddonVariants,\n  inputGroupButtonVariants,\n  inputGroupTextVariants,\n  inputGroupVariants,\n  type ZardInputGroupAddonAlignVariants,\n  type ZardInputGroupButtonSizeVariants,\n  type ZardInputGroupButtonVariantVariants,\n} from './input-group.variants';\n\n@Component({\n  selector: 'z-input-group, [z-input-group]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'group',\n    'data-slot': 'input-group',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zInputGroup',\n})\nexport class ZardInputGroupComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(inputGroupVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-input-group-addon, [z-input-group-addon]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'group',\n    'data-slot': 'input-group-addon',\n    '[attr.data-align]': 'zAlign()',\n    '[class]': 'classes()',\n    '(click)': 'onClick($event)',\n  },\n  exportAs: 'zInputGroupAddon',\n})\nexport class ZardInputGroupAddonComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n  readonly class = input<ClassValue>('');\n  readonly zAlign = input<ZardInputGroupAddonAlignVariants>('inline-start');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(inputGroupAddonVariants({ zAlign: this.zAlign() }), this.class()),\n  );\n\n  protected onClick(event: MouseEvent): void {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n\n    const control = this.elementRef.nativeElement.parentElement?.querySelector('input, textarea') as HTMLElement | null;\n    control?.focus();\n  }\n}\n\n@Directive({\n  selector: 'button[z-input-group-button]',\n  host: {\n    type: 'button',\n    'data-slot': 'input-group-button',\n    '[attr.data-size]': 'zSize()',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zInputGroupButton',\n})\nexport class ZardInputGroupButtonDirective {\n  readonly class = input<ClassValue>('');\n  readonly zVariant = input<ZardInputGroupButtonVariantVariants>('ghost');\n  readonly zSize = input<ZardInputGroupButtonSizeVariants>('xs');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(inputGroupButtonVariants({ zVariant: this.zVariant(), zSize: this.zSize() }), this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-input-group-text, span[z-input-group-text]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'input-group-text',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zInputGroupText',\n})\nexport class ZardInputGroupTextComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(inputGroupTextVariants(), this.class()));\n}\n"
    },
    {
      "name": "input-group.imports.ts",
      "content": "export {\n  ZardInputGroupAddonComponent,\n  ZardInputGroupButtonDirective,\n  ZardInputGroupComponent,\n  ZardInputGroupTextComponent,\n} from './input-group.component';\n\nimport {\n  ZardInputGroupAddonComponent,\n  ZardInputGroupButtonDirective,\n  ZardInputGroupComponent,\n  ZardInputGroupTextComponent,\n} from './input-group.component';\n\nexport const ZardInputGroupImports = [\n  ZardInputGroupComponent,\n  ZardInputGroupAddonComponent,\n  ZardInputGroupButtonDirective,\n  ZardInputGroupTextComponent,\n] as const;\n"
    },
    {
      "name": "input-group.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nexport const inputGroupVariants = cva(\n  mergeClasses(\n    'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none',\n    'has-disabled:bg-input/50 has-disabled:opacity-50',\n    'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50',\n    'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20',\n    'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto',\n    'dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',\n    'has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3',\n    'has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n    // Input/textarea overrides when used as input-group-control\n    '[&>[data-slot=input-group-control]]:flex-1 [&>[data-slot=input-group-control]]:rounded-none [&>[data-slot=input-group-control]]:border-0! [&>[data-slot=input-group-control]]:bg-transparent! [&>[data-slot=input-group-control]]:shadow-none [&>[data-slot=input-group-control]]:ring-0!',\n    '[&>[data-slot=input-group-control]:focus-visible]:ring-0! [&>[data-slot=input-group-control][aria-invalid=true]]:ring-0!',\n    '[&>textarea[data-slot=input-group-control]]:resize-none [&>textarea[data-slot=input-group-control]]:py-2',\n  ),\n);\n\nexport const inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      zAlign: {\n        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n        'block-start':\n          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n        'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n      },\n    },\n    defaultVariants: {\n      zAlign: 'inline-start',\n    },\n  },\n);\n\nexport const inputGroupButtonVariants = cva(\n  mergeClasses(\n    'inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg border border-transparent bg-clip-padding whitespace-nowrap',\n    'text-sm font-medium shadow-none transition-all outline-none select-none',\n    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3',\n    'aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:ring-3 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n    \"shrink-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    'active:not-aria-[haspopup]:translate-y-px',\n  ),\n  {\n    variants: {\n      zVariant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/80',\n        destructive:\n          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',\n        outline:\n          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n        ghost:\n          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      zSize: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: 'h-8 px-3',\n        'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n      },\n    },\n    defaultVariants: {\n      zVariant: 'ghost',\n      zSize: 'xs',\n    },\n  },\n);\n\nexport const inputGroupTextVariants = cva(\n  \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n);\n\nexport type ZardInputGroupAddonAlignVariants = NonNullable<VariantProps<typeof inputGroupAddonVariants>['zAlign']>;\nexport type ZardInputGroupButtonSizeVariants = NonNullable<VariantProps<typeof inputGroupButtonVariants>['zSize']>;\nexport type ZardInputGroupButtonVariantVariants = NonNullable<\n  VariantProps<typeof inputGroupButtonVariants>['zVariant']\n>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './input-group.component';\nexport * from './input-group.imports';\nexport * from './input-group.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "block-end.ts",
      "content": "import { Component } from '@angular/core';\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';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-input-group-block-end',\n  imports: [ZardInputComponent, ZardTextareaComponent, ...ZardInputGroupImports, ...ZardFieldImports],\n  template: `\n    <div z-field-group class=\"min-w-sm\">\n      <div z-field>\n        <label z-field-label for=\"block-end-input\">Input</label>\n        <z-input-group class=\"h-auto\">\n          <input z-input id=\"block-end-input\" placeholder=\"Enter amount\" />\n          <z-input-group-addon zAlign=\"block-end\">\n            <span z-input-group-text>USD</span>\n          </z-input-group-addon>\n        </z-input-group>\n        <p z-field-description>Footer positioned below the input.</p>\n      </div>\n      <div z-field>\n        <label z-field-label for=\"block-end-textarea\">Textarea</label>\n        <z-input-group>\n          <textarea z-textarea id=\"block-end-textarea\" placeholder=\"Write a comment...\"></textarea>\n          <z-input-group-addon zAlign=\"block-end\">\n            <span z-input-group-text>0/280</span>\n            <button z-input-group-button zVariant=\"default\" zSize=\"sm\" class=\"ml-auto\">Post</button>\n          </z-input-group-addon>\n        </z-input-group>\n        <p z-field-description>Footer positioned below the textarea.</p>\n      </div>\n    </div>\n  `,\n})\nexport class ZardDemoInputGroupBlockEndComponent {}\n"
    },
    {
      "name": "block-start.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCopy, lucideFileCode } 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';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-input-group-block-start',\n  imports: [ZardInputComponent, ZardTextareaComponent, NgIcon, ...ZardInputGroupImports, ...ZardFieldImports],\n  template: `\n    <div z-field-group class=\"min-w-sm\">\n      <div z-field>\n        <label z-field-label for=\"block-start-input\">Input</label>\n        <z-input-group class=\"h-auto\">\n          <input z-input id=\"block-start-input\" placeholder=\"Enter your name\" />\n          <z-input-group-addon zAlign=\"block-start\">\n            <span z-input-group-text>Full Name</span>\n          </z-input-group-addon>\n        </z-input-group>\n        <p z-field-description>Header positioned above the input.</p>\n      </div>\n      <div z-field>\n        <label z-field-label for=\"block-start-textarea\">Textarea</label>\n        <z-input-group>\n          <textarea\n            z-textarea\n            id=\"block-start-textarea\"\n            placeholder=\"console.log('Hello, world!');\"\n            class=\"font-mono text-sm\"\n          ></textarea>\n          <z-input-group-addon zAlign=\"block-start\">\n            <ng-icon name=\"lucideFileCode\" class=\"text-muted-foreground\" />\n            <span z-input-group-text class=\"font-mono\">script.js</span>\n            <button type=\"button\" z-input-group-button zSize=\"icon-xs\" class=\"ml-auto\">\n              <ng-icon name=\"lucideCopy\" />\n              <span class=\"sr-only\">Copy</span>\n            </button>\n          </z-input-group-addon>\n        </z-input-group>\n        <p z-field-description>Header positioned above the textarea.</p>\n      </div>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideCopy, lucideFileCode })],\n})\nexport class ZardDemoInputGroupBlockStartComponent {}\n"
    },
    {
      "name": "button.ts",
      "content": "import { Component, signal } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCopy, lucideInfo, lucideStar } from '@ng-icons/lucide';\n\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardPopoverComponent, ZardPopoverDirective } from '@/shared/components/popover/popover.component';\n\n@Component({\n  selector: 'z-demo-input-group-button',\n  imports: [ZardInputComponent, ZardPopoverComponent, ZardPopoverDirective, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-sm gap-6\">\n      <z-input-group>\n        <input z-input placeholder=\"https://x.com/shadcn\" readonly />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <button\n            type=\"button\"\n            z-input-group-button\n            zSize=\"icon-xs\"\n            aria-label=\"Copy\"\n            title=\"Copy\"\n            (click)=\"copy('https://x.com/shadcn')\"\n          >\n            <ng-icon [name]=\"isCopied() ? 'lucideCheck' : 'lucideCopy'\" />\n          </button>\n        </z-input-group-addon>\n      </z-input-group>\n\n      <z-input-group class=\"[--radius:9999px]\">\n        <z-input-group-addon>\n          <button\n            type=\"button\"\n            z-input-group-button\n            zVariant=\"secondary\"\n            zSize=\"icon-xs\"\n            zPopover\n            [zContent]=\"popoverContent\"\n          >\n            <ng-icon name=\"lucideInfo\" />\n          </button>\n        </z-input-group-addon>\n        <z-input-group-addon class=\"text-muted-foreground pl-1.5\">https://</z-input-group-addon>\n        <input z-input id=\"input-secure-19\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <button type=\"button\" z-input-group-button zSize=\"icon-xs\" (click)=\"toggleFavorite()\">\n            <ng-icon\n              name=\"lucideStar\"\n              [attr.data-favorite]=\"isFavorite()\"\n              class=\"[&_path]:transition-colors data-[favorite=true]:[&_path]:fill-blue-600 data-[favorite=true]:[&_path]:stroke-blue-600\"\n            />\n          </button>\n        </z-input-group-addon>\n      </z-input-group>\n\n      <z-input-group>\n        <input z-input placeholder=\"Type to search...\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <button type=\"button\" z-input-group-button zVariant=\"secondary\">Search</button>\n        </z-input-group-addon>\n      </z-input-group>\n\n      <ng-template #popoverContent>\n        <z-popover class=\"flex flex-col gap-1 rounded-xl text-sm\">\n          <p class=\"font-medium\">Your connection is not secure.</p>\n          <p>You should not enter any sensitive information on this site.</p>\n        </z-popover>\n      </ng-template>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideCopy, lucideCheck, lucideInfo, lucideStar })],\n})\nexport class ZardDemoInputGroupButtonComponent {\n  protected readonly isCopied = signal(false);\n  protected readonly isFavorite = signal(false);\n\n  protected copy(text: string): void {\n    navigator.clipboard?.writeText(text);\n    this.isCopied.set(true);\n    setTimeout(() => this.isCopied.set(false), 2000);\n  }\n\n  protected toggleFavorite(): void {\n    this.isFavorite.update(v => !v);\n  }\n}\n"
    },
    {
      "name": "custom.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucidePencil } from '@ng-icons/lucide';\n\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\n\n@Component({\n  selector: 'z-demo-input-group-custom',\n  imports: [NgIcon, ...ZardInputGroupImports],\n  template: `\n    <z-input-group class=\"w-80\">\n      <z-input-group-addon><ng-icon name=\"lucidePencil\" /></z-input-group-addon>\n      <input\n        data-slot=\"input-group-control\"\n        type=\"text\"\n        placeholder=\"Custom input control...\"\n        class=\"placeholder:text-muted-foreground bg-transparent text-sm outline-none\"\n      />\n    </z-input-group>\n  `,\n  viewProviders: [provideIcons({ lucidePencil })],\n})\nexport class ZardDemoInputGroupCustomComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } from '@ng-icons/lucide';\n\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-group-default',\n  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <z-input-group class=\"min-w-xs\">\n      <input z-input placeholder=\"Search...\" />\n      <z-input-group-addon>\n        <ng-icon name=\"lucideSearch\" />\n      </z-input-group-addon>\n      <z-input-group-addon zAlign=\"inline-end\">12 results</z-input-group-addon>\n    </z-input-group>\n  `,\n  viewProviders: [provideIcons({ lucideSearch })],\n})\nexport class ZardDemoInputGroupDefaultComponent {}\n"
    },
    {
      "name": "dropdown.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown, lucideEllipsis } from '@ng-icons/lucide';\n\nimport { ZardDropdownImports } from '@/shared/components/dropdown';\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-group-dropdown',\n  imports: [ZardInputComponent, NgIcon, ZardDropdownImports, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-sm gap-4\">\n      <z-input-group>\n        <input z-input placeholder=\"Enter file name\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <button\n            type=\"button\"\n            z-input-group-button\n            zSize=\"icon-xs\"\n            aria-label=\"More\"\n            z-dropdown\n            [zDropdownMenu]=\"moreMenu\"\n          >\n            <ng-icon name=\"lucideEllipsis\" />\n          </button>\n          <z-dropdown-menu-content #moreMenu=\"zDropdownMenuContent\">\n            <z-dropdown-menu-item>Settings</z-dropdown-menu-item>\n            <z-dropdown-menu-item>Copy path</z-dropdown-menu-item>\n            <z-dropdown-menu-item>Open location</z-dropdown-menu-item>\n          </z-dropdown-menu-content>\n        </z-input-group-addon>\n      </z-input-group>\n\n      <z-input-group class=\"[--radius:1rem]\">\n        <input z-input placeholder=\"Enter search query\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <button type=\"button\" z-input-group-button class=\"pr-1.5! text-xs\" z-dropdown [zDropdownMenu]=\"searchMenu\">\n            Search In...\n            <ng-icon name=\"lucideChevronDown\" class=\"size-3\" />\n          </button>\n          <z-dropdown-menu-content #searchMenu=\"zDropdownMenuContent\" class=\"[--radius:0.95rem]\">\n            <z-dropdown-menu-item>Documentation</z-dropdown-menu-item>\n            <z-dropdown-menu-item>Blog Posts</z-dropdown-menu-item>\n            <z-dropdown-menu-item>Changelog</z-dropdown-menu-item>\n          </z-dropdown-menu-content>\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideEllipsis, lucideChevronDown })],\n})\nexport class ZardDemoInputGroupDropdownComponent {}\n"
    },
    {
      "name": "icon.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCheck, lucideCreditCard, lucideInfo, lucideMail, lucideSearch, lucideStar } from '@ng-icons/lucide';\n\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-group-icon',\n  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-sm gap-6\">\n      <z-input-group>\n        <input z-input placeholder=\"Search...\" />\n        <z-input-group-addon>\n          <ng-icon name=\"lucideSearch\" />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input type=\"email\" placeholder=\"Enter your email\" />\n        <z-input-group-addon>\n          <ng-icon name=\"lucideMail\" />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Card number\" />\n        <z-input-group-addon>\n          <ng-icon name=\"lucideCreditCard\" />\n        </z-input-group-addon>\n        <z-input-group-addon zAlign=\"inline-end\">\n          <ng-icon name=\"lucideCheck\" />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Card number\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <ng-icon name=\"lucideStar\" />\n          <ng-icon name=\"lucideInfo\" />\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideSearch, lucideMail, lucideCreditCard, lucideCheck, lucideStar, lucideInfo })],\n})\nexport class ZardDemoInputGroupIconComponent {}\n"
    },
    {
      "name": "inline-end.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEyeOff } 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-group-inline-end',\n  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"min-w-sm\">\n      <label z-field-label for=\"inline-end-input\">Input</label>\n      <z-input-group>\n        <input z-input id=\"inline-end-input\" type=\"password\" placeholder=\"Enter password\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <ng-icon name=\"lucideEyeOff\" />\n        </z-input-group-addon>\n      </z-input-group>\n      <p z-field-description>Icon positioned at the end.</p>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideEyeOff })],\n})\nexport class ZardDemoInputGroupInlineEndComponent {}\n"
    },
    {
      "name": "inline-start.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } 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-group-inline-start',\n  imports: [ZardInputComponent, NgIcon, ...ZardInputGroupImports, ...ZardFieldImports],\n  template: `\n    <div z-field class=\"min-w-sm\">\n      <label z-field-label for=\"inline-start-input\">Input</label>\n      <z-input-group>\n        <input z-input id=\"inline-start-input\" placeholder=\"Search...\" />\n        <z-input-group-addon zAlign=\"inline-start\">\n          <ng-icon name=\"lucideSearch\" class=\"text-muted-foreground\" />\n        </z-input-group-addon>\n      </z-input-group>\n      <p z-field-description>Icon positioned at the start.</p>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideSearch })],\n})\nexport class ZardDemoInputGroupInlineStartComponent {}\n"
    },
    {
      "name": "kbd.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } from '@ng-icons/lucide';\n\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardKbdComponent } from '@/shared/components/kbd/kbd.component';\n\n@Component({\n  selector: 'z-demo-input-group-kbd',\n  imports: [ZardInputComponent, ZardKbdComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <z-input-group class=\"min-w-sm\">\n      <input z-input placeholder=\"Search...\" />\n      <z-input-group-addon>\n        <ng-icon name=\"lucideSearch\" class=\"text-muted-foreground\" />\n      </z-input-group-addon>\n      <z-input-group-addon zAlign=\"inline-end\">\n        <z-kbd>⌘K</z-kbd>\n      </z-input-group-addon>\n    </z-input-group>\n  `,\n  viewProviders: [provideIcons({ lucideSearch })],\n})\nexport class ZardDemoInputGroupKbdComponent {}\n"
    },
    {
      "name": "spinner.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideLoader } from '@ng-icons/lucide';\n\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-input-group-spinner',\n  imports: [ZardInputComponent, ZardSpinnerComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-sm gap-4\">\n      <z-input-group>\n        <input z-input placeholder=\"Searching...\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <z-spinner />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Processing...\" />\n        <z-input-group-addon>\n          <z-spinner />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Saving changes...\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <span z-input-group-text>Saving...</span>\n          <z-spinner />\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Refreshing data...\" />\n        <z-input-group-addon>\n          <ng-icon name=\"lucideLoader\" class=\"animate-spin\" />\n        </z-input-group-addon>\n        <z-input-group-addon zAlign=\"inline-end\">\n          <span z-input-group-text class=\"text-muted-foreground\">Please wait...</span>\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideLoader })],\n})\nexport class ZardDemoInputGroupSpinnerComponent {}\n"
    },
    {
      "name": "text.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-input-group-text',\n  imports: [ZardInputComponent, ZardTextareaComponent, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-sm gap-6\">\n      <z-input-group>\n        <z-input-group-addon><span z-input-group-text>$</span></z-input-group-addon>\n        <input z-input placeholder=\"0.00\" />\n        <z-input-group-addon zAlign=\"inline-end\"><span z-input-group-text>USD</span></z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <z-input-group-addon><span z-input-group-text>https://</span></z-input-group-addon>\n        <input z-input placeholder=\"example.com\" class=\"pl-0.5!\" />\n        <z-input-group-addon zAlign=\"inline-end\"><span z-input-group-text>.com</span></z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <input z-input placeholder=\"Enter your username\" />\n        <z-input-group-addon zAlign=\"inline-end\">\n          <span z-input-group-text>&#64;company.com</span>\n        </z-input-group-addon>\n      </z-input-group>\n      <z-input-group>\n        <textarea z-textarea placeholder=\"Enter your message\"></textarea>\n        <z-input-group-addon zAlign=\"block-end\">\n          <span z-input-group-text class=\"text-muted-foreground text-xs\">120 characters left</span>\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n})\nexport class ZardDemoInputGroupTextComponent {}\n"
    },
    {
      "name": "textarea.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCopy, lucideCornerDownLeft, lucideFileCode2, lucideRefreshCw } from '@ng-icons/lucide';\n\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-input-group-textarea',\n  imports: [ZardTextareaComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <div class=\"grid w-full min-w-md gap-4\">\n      <z-input-group>\n        <textarea\n          z-textarea\n          id=\"textarea-code-32\"\n          placeholder=\"console.log('Hello, world!');\"\n          class=\"min-h-[200px]\"\n        ></textarea>\n        <z-input-group-addon zAlign=\"block-end\" class=\"border-t\">\n          <span z-input-group-text>Line 1, Column 1</span>\n          <button type=\"button\" z-input-group-button zVariant=\"default\" zSize=\"sm\" class=\"ml-auto\">\n            Run\n            <ng-icon name=\"lucideCornerDownLeft\" />\n          </button>\n        </z-input-group-addon>\n        <z-input-group-addon zAlign=\"block-start\" class=\"border-b\">\n          <span z-input-group-text class=\"font-mono font-medium\">\n            <ng-icon name=\"lucideFileCode2\" />\n            script.js\n          </span>\n          <button type=\"button\" z-input-group-button zSize=\"icon-xs\" class=\"ml-auto\" aria-label=\"Refresh\">\n            <ng-icon name=\"lucideRefreshCw\" />\n          </button>\n          <button type=\"button\" z-input-group-button zSize=\"icon-xs\" aria-label=\"Copy\">\n            <ng-icon name=\"lucideCopy\" />\n          </button>\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideFileCode2, lucideCopy, lucideCornerDownLeft, lucideRefreshCw })],\n})\nexport class ZardDemoInputGroupTextareaComponent {}\n"
    }
  ]
}