{
  "name": "spinner",
  "type": "registry:component",
  "files": [
    {
      "name": "spinner.component.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\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\n@Component({\n  selector: 'z-spinner',\n  imports: [ZardStringTemplateOutletDirective],\n  template: `\n    @let icon = zIcon();\n    @if (icon) {\n      <ng-container *zStringTemplateOutlet=\"icon; context: iconContext()\" />\n    } @else {\n      <svg\n        data-slot=\"spinner\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [class]=\"classes()\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'inline-flex',\n    role: 'status',\n    'aria-label': 'Loading',\n  },\n  exportAs: 'zSpinner',\n})\nexport class ZardSpinnerComponent {\n  readonly class = input<ClassValue>('');\n  readonly zIcon = input<TemplateRef<{ $implicit: string }> | undefined>(undefined);\n\n  protected readonly classes = computed(() => mergeClasses('size-4 animate-spin', this.class()));\n  protected readonly iconContext = computed(() => ({ $implicit: this.classes() }));\n}\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './spinner.component';\n"
    }
  ],
  "demos": [
    {
      "name": "badge.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBadgeComponent } from '@/shared/components/badge/badge.component';\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-badge',\n  imports: [ZardBadgeComponent, ZardSpinnerComponent],\n  template: `\n    <div class=\"flex items-center gap-4 [--radius:1.2rem]\">\n      <z-badge>\n        <z-spinner data-icon=\"inline-start\" />\n        Syncing\n      </z-badge>\n      <z-badge zType=\"secondary\">\n        <z-spinner data-icon=\"inline-start\" />\n        Updating\n      </z-badge>\n      <z-badge zType=\"outline\">\n        <z-spinner data-icon=\"inline-start\" />\n        Processing\n      </z-badge>\n    </div>\n  `,\n})\nexport class ZardDemoSpinnerBadgeComponent {}\n"
    },
    {
      "name": "button.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-button',\n  imports: [ZardButtonComponent, ZardSpinnerComponent],\n  template: `\n    <div class=\"flex flex-col items-center gap-4\">\n      <button type=\"button\" z-button zSize=\"sm\" [zDisabled]=\"true\">\n        <z-spinner data-icon=\"inline-start\" />\n        Loading...\n      </button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\" [zDisabled]=\"true\">\n        <z-spinner data-icon=\"inline-start\" />\n        Please wait\n      </button>\n      <button type=\"button\" z-button zType=\"secondary\" zSize=\"sm\" [zDisabled]=\"true\">\n        <z-spinner data-icon=\"inline-start\" />\n        Processing\n      </button>\n    </div>\n  `,\n})\nexport class ZardDemoSpinnerButtonComponent {}\n"
    },
    {
      "name": "customization.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-customization',\n  imports: [ZardSpinnerComponent],\n  template: `\n    <div class=\"flex items-center gap-4\">\n      <z-spinner [zIcon]=\"customIcon\" />\n    </div>\n\n    <ng-template #customIcon let-classes>\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        [class]=\"classes\"\n      >\n        <path d=\"M12 2v4\" />\n        <path d=\"m16.2 7.8 2.9-2.9\" />\n        <path d=\"M18 12h4\" />\n        <path d=\"m16.2 16.2 2.9 2.9\" />\n        <path d=\"M12 18v4\" />\n        <path d=\"m4.9 19.1 2.9-2.9\" />\n        <path d=\"M2 12h4\" />\n        <path d=\"m4.9 4.9 2.9 2.9\" />\n      </svg>\n    </ng-template>\n  `,\n})\nexport class ZardDemoSpinnerCustomizationComponent {}\n"
    },
    {
      "name": "empty.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardEmptyComponent } from '@/shared/components/empty/empty.component';\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-empty',\n  imports: [ZardButtonComponent, ZardEmptyComponent, ZardSpinnerComponent],\n  template: `\n    <z-empty\n      class=\"w-full\"\n      [zImage]=\"iconTpl\"\n      zTitle=\"Processing your request\"\n      zDescription=\"Please wait while we process your request. Do not refresh the page.\"\n      [zActions]=\"[cancelAction]\"\n    />\n\n    <ng-template #iconTpl>\n      <div class=\"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg\">\n        <z-spinner />\n      </div>\n    </ng-template>\n\n    <ng-template #cancelAction>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Cancel</button>\n    </ng-template>\n  `,\n})\nexport class ZardDemoSpinnerEmptyComponent {}\n"
    },
    {
      "name": "input-group.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowUp } 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';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-spinner-input-group',\n  imports: [ZardInputComponent, ZardTextareaComponent, ZardSpinnerComponent, NgIcon, ...ZardInputGroupImports],\n  template: `\n    <div class=\"flex w-full min-w-md flex-col gap-4\">\n      <z-input-group>\n        <input z-input placeholder=\"Send a message...\" disabled />\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        <textarea z-textarea placeholder=\"Send a message...\" disabled></textarea>\n        <z-input-group-addon zAlign=\"block-end\">\n          <z-spinner />\n          Validating...\n          <button type=\"button\" z-input-group-button zVariant=\"default\" zSize=\"icon-xs\" class=\"ml-auto\">\n            <ng-icon name=\"lucideArrowUp\" />\n            <span class=\"sr-only\">Send</span>\n          </button>\n        </z-input-group-addon>\n      </z-input-group>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideArrowUp })],\n})\nexport class ZardDemoSpinnerInputGroupComponent {}\n"
    },
    {
      "name": "preview.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardItemImports } from '@/shared/components/item/item.imports';\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-preview',\n  imports: [ZardSpinnerComponent, ...ZardItemImports],\n  template: `\n    <div class=\"flex w-full max-w-xs flex-col gap-4 [--radius:1rem]\">\n      <z-item zVariant=\"muted\">\n        <z-item-media>\n          <z-spinner />\n        </z-item-media>\n        <z-item-content>\n          <z-item-title class=\"line-clamp-1\">Processing payment...</z-item-title>\n        </z-item-content>\n        <z-item-content class=\"flex-none justify-end\">\n          <span class=\"text-sm tabular-nums\">$100.00</span>\n        </z-item-content>\n      </z-item>\n    </div>\n  `,\n})\nexport class ZardDemoSpinnerPreviewComponent {}\n"
    },
    {
      "name": "size.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardSpinnerComponent } from '@/shared/components/spinner/spinner.component';\n\n@Component({\n  selector: 'z-demo-spinner-size',\n  imports: [ZardSpinnerComponent],\n  template: `\n    <div class=\"flex items-center gap-6\">\n      <z-spinner class=\"size-3\" />\n      <z-spinner class=\"size-4\" />\n      <z-spinner class=\"size-6\" />\n      <z-spinner class=\"size-8\" />\n    </div>\n  `,\n})\nexport class ZardDemoSpinnerSizeComponent {}\n"
    }
  ]
}