{
  "name": "alert",
  "type": "registry:component",
  "files": [
    {
      "name": "alert.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, TemplateRef, ViewEncapsulation } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleAlert } from '@ng-icons/lucide';\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  alertActionVariants,\n  alertDescriptionVariants,\n  alertIconVariants,\n  alertTitleVariants,\n  alertVariants,\n  type ZardAlertTypeVariants,\n} from './alert.variants';\n\n@Component({\n  selector: 'z-alert, [z-alert]',\n  imports: [NgIcon, ZardStringTemplateOutletDirective],\n  template: `\n    @if (zIcon() || iconName()) {\n      <span [class]=\"iconClasses()\" data-slot=\"alert-icon\">\n        <ng-container *zStringTemplateOutlet=\"zIcon()\">\n          <ng-icon [name]=\"iconName()\" class=\"size-4!\" />\n        </ng-container>\n      </span>\n    }\n\n    <div class=\"flex-1\">\n      @if (zTitle()) {\n        <div [class]=\"titleClasses()\" data-slot=\"alert-title\">\n          <ng-container *zStringTemplateOutlet=\"zTitle()\">{{ zTitle() }}</ng-container>\n        </div>\n      }\n\n      @if (zDescription()) {\n        <div data-slot=\"alert-description\" [class]=\"descriptionClasses()\">\n          <ng-container *zStringTemplateOutlet=\"zDescription()\">{{ zDescription() }}</ng-container>\n        </div>\n      }\n\n      @if (zAction()) {\n        <div data-slot=\"alert-action\" [class]=\"actionClasses()\">\n          <ng-container *zStringTemplateOutlet=\"zAction()\" />\n        </div>\n      }\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideCircleAlert })],\n  host: {\n    '[attr.role]': 'role()',\n    '[class]': 'classes()',\n    'data-slot': 'alert',\n  },\n  exportAs: 'zAlert',\n})\nexport class ZardAlertComponent {\n  readonly class = input<ClassValue>('');\n  readonly zAction = input<TemplateRef<void>>();\n  readonly zDescription = input<string | TemplateRef<void>>('');\n  readonly zIcon = input<TemplateRef<void> | string>();\n  readonly zRole = input<'alert' | 'status'>();\n  readonly zTitle = input<string | TemplateRef<void>>('');\n  readonly zType = input<ZardAlertTypeVariants>('default');\n\n  protected readonly actionClasses = computed(() => alertActionVariants());\n  protected readonly classes = computed(() => mergeClasses(alertVariants({ zType: this.zType() }), this.class()));\n  protected readonly descriptionClasses = computed(() => alertDescriptionVariants({ zType: this.zType() }));\n  protected readonly iconClasses = computed(() => alertIconVariants());\n  protected readonly role = computed(() => this.zRole() ?? (this.zAction() ? 'status' : 'alert'));\n  protected readonly titleClasses = computed(() => alertTitleVariants());\n\n  protected readonly iconName = computed((): string | undefined => {\n    const customIcon = this.zIcon();\n    if (customIcon && !(customIcon instanceof TemplateRef)) {\n      return customIcon;\n    }\n\n    if (this.zType() === 'destructive') {\n      return 'lucideCircleAlert';\n    }\n\n    return undefined;\n  });\n}\n"
    },
    {
      "name": "alert.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot='alert-action']:pr-18 has-data-[slot='alert-icon']:grid-cols-[auto_1fr] has-data-[slot='alert-icon']:gap-x-2 **:data-[slot='alert-icon']:row-span-2 **:data-[slot='alert-icon']:translate-y-0.5 **:data-[slot='alert-icon']:text-current [&_[data-slot='alert-icon']_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      zType: {\n        default: 'bg-card text-card-foreground',\n        destructive:\n          \"bg-card text-destructive **:data-[slot='alert-description']:text-destructive/90 [&_[data-slot='alert-icon']_svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      zType: 'default',\n    },\n  },\n);\n\nexport const alertIconVariants = cva('shrink-0 self-start text-base!');\n\nexport const alertActionVariants = cva('absolute top-2 right-2');\n\nexport const alertTitleVariants = cva(\n  \"font-medium group-has-data-[slot='alert-icon']/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n);\n\nexport const alertDescriptionVariants = cva(\n  'text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',\n  {\n    variants: {\n      zType: {\n        default: 'text-muted-foreground',\n        destructive: '',\n      },\n    },\n    defaultVariants: {\n      zType: 'default',\n    },\n  },\n);\n\nexport type ZardAlertTypeVariants = NonNullable<VariantProps<typeof alertVariants>['zType']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './alert.component';\nexport * from './alert.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "action.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAlertComponent } from '@/shared/components/alert/alert.component';\nimport { ZardButtonComponent } from '@/shared/components/button';\n\n@Component({\n  selector: 'z-demo-alert-action',\n  imports: [ZardAlertComponent, ZardButtonComponent],\n  template: `\n    <ng-template #actionTpl>\n      <button type=\"button\" z-button zSize=\"xs\">Enable</button>\n    </ng-template>\n\n    <div class=\"grid w-full max-w-md items-start gap-4\">\n      <z-alert\n        class=\"w-md\"\n        zTitle=\"Dark mode is now available\"\n        zDescription=\"Enable it under your profile settings to get started.\"\n        [zAction]=\"actionTpl\"\n      />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAlertActionComponent {}\n"
    },
    {
      "name": "basic.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideCircleCheck, lucideInfo } from '@ng-icons/lucide';\n\nimport { ZardAlertComponent } from '../alert.component';\n\n@Component({\n  selector: 'z-demo-alert-basic',\n  imports: [ZardAlertComponent],\n  template: `\n    <div class=\"grid w-full max-w-md items-start gap-4\">\n      <z-alert\n        zIcon=\"lucideCircleCheck\"\n        zTitle=\"Payment successful\"\n        zDescription=\"Your payment of $29.99 has been processed. A receipt has been sent to your email address.\"\n      />\n\n      <z-alert\n        zIcon=\"lucideInfo\"\n        zTitle=\"New feature available\"\n        zDescription=\"We've added dark mode support. You can enable it in your account settings.\"\n      />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideCircleCheck, lucideInfo })],\n})\nexport class ZardDemoAlertBasicComponent {}\n"
    },
    {
      "name": "custom-colors.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideAlertTriangle } from '@ng-icons/lucide';\n\nimport { ZardAlertComponent } from '@/shared/components/alert/alert.component';\n\n@Component({\n  selector: 'z-demo-alert-custom-color',\n  imports: [ZardAlertComponent],\n  template: `\n    <div class=\"grid w-full max-w-md items-start gap-4\">\n      <z-alert\n        class=\"max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50\"\n        zDescription=\"Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.\"\n        zIcon=\"lucideAlertTriangle\"\n        zTitle=\"Your subscription will expire in 3 days\"\n      />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideAlertTriangle })],\n})\nexport class ZardDemoAlertCustomColorsComponent {}\n"
    },
    {
      "name": "destructive.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAlertComponent } from '@/shared/components/alert/alert.component';\n\n@Component({\n  selector: 'z-demo-alert-destructive',\n  imports: [ZardAlertComponent],\n  template: `\n    <div class=\"grid w-full max-w-md items-start gap-4\">\n      <z-alert\n        zType=\"destructive\"\n        zTitle=\"Payment failed\"\n        zDescription=\"Your payment could not be processed. Please check your payment method and try again.\"\n      />\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAlertDestructiveComponent {}\n"
    }
  ]
}