{
  "name": "alert-dialog",
  "type": "registry:component",
  "files": [
    {
      "name": "alert-dialog.component.ts",
      "content": "import { A11yModule } from '@angular/cdk/a11y';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  BasePortalOutlet,\n  CdkPortalOutlet,\n  type ComponentPortal,\n  PortalModule,\n  type TemplatePortal,\n} from '@angular/cdk/portal';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  type ComponentRef,\n  computed,\n  ElementRef,\n  type EmbeddedViewRef,\n  type EventEmitter,\n  inject,\n  NgModule,\n  output,\n  type TemplateRef,\n  type Type,\n  viewChild,\n  type ViewContainerRef,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardIdDirective } from '@/shared/core';\nimport { mergeClasses, noopFn } from '@/shared/utils/merge-classes';\n\nimport type { ZardAlertDialogRef } from './alert-dialog-ref';\nimport { ZardAlertDialogService } from './alert-dialog.service';\nimport {\n  alertDialogDescriptionVariants,\n  alertDialogFooterVariants,\n  alertDialogHeaderVariants,\n  alertDialogMediaVariants,\n  alertDialogTitleVariants,\n  alertDialogVariants,\n  type ZardAlertDialogSizeVariants,\n} from './alert-dialog.variants';\nimport { ZardButtonComponent } from '../button/button.component';\n\nexport type OnClickCallback<T> = (instance: T) => false | void | object;\n\nexport class ZardAlertDialogOptions<T> {\n  zCancelText?: string | null;\n  zClosable?: boolean;\n  zContent?: string | TemplateRef<T> | Type<T>;\n  zCustomClasses?: ClassValue;\n  zData?: object;\n  zDescription?: string;\n  /** Animation duration (ms) used when closing. Defaults to 100 (matches CSS transition). */\n  zDuration?: number;\n  zMaskClosable?: boolean;\n  /**\n   * Optional template rendered as a media slot above the title (e.g. an icon).\n   * When present, the header layout adapts to align media + title side-by-side\n   * on `default` size at sm breakpoint.\n   */\n  zMedia?: TemplateRef<void>;\n  /** Extra classes applied to the media slot wrapper (e.g. tinted backgrounds for destructive). */\n  zMediaClass?: ClassValue;\n  zOkDestructive?: boolean;\n  zOkDisabled?: boolean;\n  zOkText?: string | null;\n  zOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFn;\n  zOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFn;\n  /** Visual size of the dialog. `default` is wider on sm+; `sm` keeps the compact width. */\n  zSize?: ZardAlertDialogSizeVariants;\n  zTitle?: string | TemplateRef<T>;\n  zViewContainerRef?: ViewContainerRef;\n  zWidth?: string;\n}\n\n@Component({\n  selector: 'z-alert-dialog',\n  imports: [A11yModule, NgTemplateOutlet, OverlayModule, PortalModule, ZardButtonComponent, ZardIdDirective],\n  template: `\n    <ng-container zardId=\"z-alert-dialog\" #idRef=\"zardId\">\n      @if (config.zMedia || config.zTitle || config.zDescription) {\n        <header [class]=\"headerClasses()\" data-slot=\"alert-dialog-header\">\n          @if (config.zMedia) {\n            <div data-slot=\"alert-dialog-media\" [class]=\"mediaClasses()\">\n              <ng-container [ngTemplateOutlet]=\"config.zMedia\" />\n            </div>\n          }\n\n          @if (config.zTitle) {\n            <h2\n              data-testid=\"z-alert-title\"\n              data-slot=\"alert-dialog-title\"\n              [class]=\"titleClasses()\"\n              [id]=\"idRef.id() + '-title'\"\n            >\n              {{ config.zTitle }}\n            </h2>\n          }\n\n          @if (config.zDescription) {\n            <!-- Angular auto-sanitizes [innerHTML]; safe inline links/markup are preserved. -->\n            <p\n              data-testid=\"z-alert-description\"\n              data-slot=\"alert-dialog-description\"\n              [class]=\"descriptionClasses()\"\n              [id]=\"idRef.id() + '-description'\"\n              [innerHTML]=\"config.zDescription\"\n            ></p>\n          }\n        </header>\n      }\n\n      <main class=\"flex flex-col space-y-4\">\n        <ng-template cdkPortalOutlet />\n\n        @if (isStringContent()) {\n          <!-- Angular auto-sanitizes [innerHTML] by default; scripts/event handlers are stripped. -->\n          <div data-testid=\"z-alert-content\" [innerHTML]=\"config.zContent\"></div>\n        }\n      </main>\n\n      <footer [class]=\"footerClasses()\" data-slot=\"alert-dialog-footer\">\n        @if (config.zCancelText !== null) {\n          <button type=\"button\" data-testid=\"z-alert-cancel-button\" z-button zType=\"outline\" (click)=\"onCancelClick()\">\n            {{ config.zCancelText || 'Cancel' }}\n          </button>\n        }\n\n        @if (config.zOkText !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-alert-ok-button\"\n            z-button\n            [zType]=\"config.zOkDestructive ? 'destructive' : 'default'\"\n            [zDisabled]=\"config.zOkDisabled\"\n            (click)=\"onOkClick()\"\n          >\n            {{ config.zOkText || 'Continue' }}\n          </button>\n        }\n      </footer>\n    </ng-container>\n  `,\n  styles: `\n    :host {\n      --z-alert-dialog-duration: 100ms;\n      opacity: 1;\n      transform: scale(1);\n      transition:\n        opacity var(--z-alert-dialog-duration) ease-out,\n        transform var(--z-alert-dialog-duration) ease-out;\n    }\n\n    @starting-style {\n      :host {\n        opacity: 0;\n        transform: scale(0.9);\n      }\n    }\n\n    :host.alert-dialog-leave {\n      opacity: 0;\n      transform: scale(0.9);\n      transition:\n        opacity var(--z-alert-dialog-duration) ease-in,\n        transform var(--z-alert-dialog-duration) ease-in;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[style.width]': 'config.zWidth ? config.zWidth : null',\n    '[style.--z-alert-dialog-duration]': 'durationCss()',\n    '[attr.data-size]': 'size()',\n    'data-slot': 'alert-dialog-content',\n    role: 'alertdialog',\n    'aria-modal': 'true',\n    '[attr.aria-labelledby]': 'titleId()',\n    '[attr.aria-describedby]': 'descriptionId()',\n    cdkTrapFocus: 'true',\n    cdkTrapFocusAutoCapture: 'true',\n  },\n  exportAs: 'zAlertDialog',\n})\nexport class ZardAlertDialogComponent<T> extends BasePortalOutlet {\n  private readonly host = inject(ElementRef<HTMLElement>);\n  protected readonly config = inject(ZardAlertDialogOptions<T>);\n  private readonly idRef = viewChild.required<ZardIdDirective>('idRef');\n\n  protected readonly size = computed<ZardAlertDialogSizeVariants>(() => this.config.zSize ?? 'default');\n  protected readonly classes = computed(() =>\n    mergeClasses(alertDialogVariants({ zSize: this.size() }), this.config.zCustomClasses),\n  );\n\n  protected readonly headerClasses = computed(() => alertDialogHeaderVariants());\n  protected readonly titleClasses = computed(() => alertDialogTitleVariants());\n  protected readonly descriptionClasses = computed(() => alertDialogDescriptionVariants());\n  protected readonly footerClasses = computed(() => alertDialogFooterVariants());\n  protected readonly mediaClasses = computed(() => mergeClasses(alertDialogMediaVariants(), this.config.zMediaClass));\n  protected readonly isStringContent = computed(() => typeof this.config.zContent === 'string');\n  protected readonly titleId = computed(() => (this.config.zTitle ? `${this.idRef().id()}-title` : null));\n  protected readonly descriptionId = computed(() =>\n    this.config.zDescription ? `${this.idRef().id()}-description` : null,\n  );\n\n  protected readonly durationCss = computed(() =>\n    this.config.zDuration !== undefined ? `${this.config.zDuration}ms` : null,\n  );\n\n  alertDialogRef?: ZardAlertDialogRef<T>;\n\n  readonly portalOutlet = viewChild.required(CdkPortalOutlet);\n\n  okTriggered = output<void>();\n  cancelTriggered = output<void>();\n\n  getNativeElement(): HTMLElement {\n    return this.host.nativeElement;\n  }\n\n  attachComponentPortal<C>(portal: ComponentPortal<C>): ComponentRef<C> {\n    if (this.portalOutlet().hasAttached()) {\n      throw new Error('Attempting to attach alert dialog content after content is already attached');\n    }\n    return this.portalOutlet().attachComponentPortal(portal);\n  }\n\n  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {\n    if (this.portalOutlet().hasAttached()) {\n      throw new Error('Attempting to attach alert dialog content after content is already attached');\n    }\n    return this.portalOutlet().attachTemplatePortal(portal);\n  }\n\n  onOkClick() {\n    this.okTriggered.emit();\n  }\n\n  onCancelClick() {\n    this.cancelTriggered.emit();\n  }\n}\n\n@NgModule({\n  imports: [ZardButtonComponent, ZardAlertDialogComponent, OverlayModule, PortalModule, A11yModule],\n  providers: [ZardAlertDialogService],\n})\nexport class ZardAlertDialogModule {}\n"
    },
    {
      "name": "alert-dialog.service.ts",
      "content": "import { type ComponentType, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  inject,\n  Injectable,\n  InjectionToken,\n  Injector,\n  PLATFORM_ID,\n  TemplateRef,\n  type ViewContainerRef,\n} from '@angular/core';\n\nimport { ZardAlertDialogRef } from './alert-dialog-ref';\nimport { ZardAlertDialogComponent, ZardAlertDialogOptions } from './alert-dialog.component';\n\ntype ContentType<T> = ComponentType<T> | TemplateRef<T> | string | undefined;\n\nexport const Z_ALERT_MODAL_DATA = new InjectionToken<unknown>('Z_ALERT_MODAL_DATA');\n\n/**\n * Type-safe accessor for the data passed to an alert dialog via {@link ZardAlertDialogOptions.zData}.\n *\n * Must be called from an injection context (component constructor / field initializer).\n *\n * @example\n * private readonly data = injectAlertDialogData<MyData>();\n */\nexport function injectAlertDialogData<T>(): T {\n  return inject(Z_ALERT_MODAL_DATA) as T;\n}\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ZardAlertDialogService {\n  private readonly overlay = inject(Overlay);\n  private readonly injector = inject(Injector);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  /**\n   * Opens an alert dialog with the given configuration.\n   *\n   * On non-browser platforms (SSR / build) the returned `ZardAlertDialogRef`\n   * is a no-op that resolves cleanly when calling `close()`.\n   */\n  create<T>(config: ZardAlertDialogOptions<T>): ZardAlertDialogRef<T> {\n    if (!isPlatformBrowser(this.platformId)) {\n      return new ZardAlertDialogRef<T>(null, config, null, this.platformId);\n    }\n\n    const overlayRef = this.createOverlay();\n    const alertDialogContainer = this.attachAlertDialogContainer<T>(overlayRef, config);\n    const alertDialogRef = this.attachAlertDialogContent<T>(config.zContent, alertDialogContainer, overlayRef, config);\n\n    alertDialogContainer.alertDialogRef = alertDialogRef;\n\n    return alertDialogRef;\n  }\n\n  confirm<T>(\n    config: Omit<ZardAlertDialogOptions<T>, 'zOkText' | 'zCancelText'> & {\n      zOkText?: string;\n      zCancelText?: string;\n    },\n  ): ZardAlertDialogRef<T> {\n    return this.create({\n      ...config,\n      zOkText: config.zOkText ?? 'Confirm',\n      zCancelText: config.zCancelText ?? 'Cancel',\n      zOkDestructive: config.zOkDestructive ?? false,\n    });\n  }\n\n  warning<T>(config: Omit<ZardAlertDialogOptions<T>, 'zOkText'> & { zOkText?: string }): ZardAlertDialogRef<T> {\n    return this.create({\n      ...config,\n      zOkText: config.zOkText ?? 'OK',\n      zCancelText: null,\n    });\n  }\n\n  info<T>(config: Omit<ZardAlertDialogOptions<T>, 'zOkText'> & { zOkText?: string }): ZardAlertDialogRef<T> {\n    return this.create({\n      ...config,\n      zOkText: config.zOkText ?? 'OK',\n      zCancelText: null,\n    });\n  }\n\n  private createOverlay(): OverlayRef {\n    return this.overlay.create(\n      new OverlayConfig({\n        hasBackdrop: true,\n        backdropClass: ['bg-black/10', 'supports-backdrop-filter:backdrop-blur-xs'],\n        positionStrategy: this.overlay.position().global(),\n      }),\n    );\n  }\n\n  private attachAlertDialogContainer<T>(overlayRef: OverlayRef, config: ZardAlertDialogOptions<T>) {\n    const injector = Injector.create({\n      parent: this.injector,\n      providers: [\n        { provide: OverlayRef, useValue: overlayRef },\n        { provide: ZardAlertDialogOptions, useValue: config },\n      ],\n    });\n\n    const containerPortal = new ComponentPortal<ZardAlertDialogComponent<T>>(\n      ZardAlertDialogComponent,\n      config.zViewContainerRef,\n      injector,\n    );\n\n    return overlayRef.attach(containerPortal).instance;\n  }\n\n  private attachAlertDialogContent<T>(\n    componentOrTemplateRef: ContentType<T>,\n    alertDialogContainer: ZardAlertDialogComponent<T>,\n    overlayRef: OverlayRef,\n    config: ZardAlertDialogOptions<T>,\n  ): ZardAlertDialogRef<T> {\n    const alertDialogRef = new ZardAlertDialogRef<T>(overlayRef, config, alertDialogContainer, this.platformId);\n\n    if (componentOrTemplateRef instanceof TemplateRef) {\n      // CDK's TemplatePortal type requires a ViewContainerRef even though it tolerates null at runtime,\n      // and types the template context as T (the template's data shape) — we expose `alertDialogRef` instead.\n      const vcr = (config.zViewContainerRef ?? null) as unknown as ViewContainerRef;\n      const ctx = { alertDialogRef } as unknown as T;\n      alertDialogContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, vcr, ctx));\n    } else if (componentOrTemplateRef && typeof componentOrTemplateRef !== 'string') {\n      const injector = this.createInjector<T>(alertDialogRef, config);\n      const contentRef = alertDialogContainer.attachComponentPortal<T>(\n        new ComponentPortal(componentOrTemplateRef, config.zViewContainerRef, injector),\n      );\n      alertDialogRef.setComponentInstance(contentRef.instance);\n    }\n\n    return alertDialogRef;\n  }\n\n  private createInjector<T>(alertDialogRef: ZardAlertDialogRef<T>, config: ZardAlertDialogOptions<T>): Injector {\n    return Injector.create({\n      parent: this.injector,\n      providers: [\n        { provide: ZardAlertDialogRef, useValue: alertDialogRef },\n        { provide: Z_ALERT_MODAL_DATA, useValue: config.zData },\n      ],\n    });\n  }\n}\n"
    },
    {
      "name": "alert-dialog-ref.ts",
      "content": "import type { OverlayRef } from '@angular/cdk/overlay';\nimport { isPlatformBrowser } from '@angular/common';\nimport { signal } from '@angular/core';\nimport { outputToObservable } from '@angular/core/rxjs-interop';\n\nimport { filter, takeUntil } from 'rxjs';\n\nimport type { OnClickCallback, ZardAlertDialogComponent, ZardAlertDialogOptions } from './alert-dialog.component';\n\nconst ESCAPE_KEYS = ['Escape', 'Esc'] as const;\n\n/**\n * Reference to an alert dialog opened via {@link ZardAlertDialogService}.\n *\n * Multiple open alert dialogs share a stack so that pressing Escape only\n * closes the topmost one. Exposes signals for reactive consumption.\n */\nexport class ZardAlertDialogRef<T = unknown> {\n  private static readonly stack: ZardAlertDialogRef[] = [];\n\n  private readonly previouslyFocusedElement: HTMLElement | null;\n  private readonly animationDuration: number;\n\n  private disposeTimer: ReturnType<typeof setTimeout> | null = null;\n  private disposed = false;\n\n  private readonly _isClosing = signal(false);\n  private readonly _componentInstance = signal<T | null>(null);\n\n  /** True from the moment {@link close} is called until the overlay is disposed. */\n  readonly isClosing = this._isClosing.asReadonly();\n  /** Instance of the component projected as content, or null for templates / strings. */\n  readonly componentInstance = this._componentInstance.asReadonly();\n\n  constructor(\n    private readonly overlayRef: OverlayRef | null,\n    private readonly config: ZardAlertDialogOptions<T>,\n    private readonly containerInstance: ZardAlertDialogComponent<T> | null,\n    private readonly platformId: object,\n  ) {\n    this.animationDuration = config.zDuration ?? 100;\n    this.previouslyFocusedElement = isPlatformBrowser(platformId)\n      ? (document.activeElement as HTMLElement | null)\n      : null;\n\n    if (!this.overlayRef || !this.containerInstance) {\n      return;\n    }\n\n    ZardAlertDialogRef.stack.push(this as unknown as ZardAlertDialogRef);\n\n    const detached$ = this.overlayRef.detachments();\n\n    detached$.subscribe(() => this.dispose());\n\n    outputToObservable(this.containerInstance.cancelTriggered)\n      .pipe(takeUntil(detached$))\n      .subscribe(() => this.handleCancel());\n    outputToObservable(this.containerInstance.okTriggered)\n      .pipe(takeUntil(detached$))\n      .subscribe(() => this.handleOk());\n\n    if (config.zMaskClosable) {\n      this.overlayRef\n        .outsidePointerEvents()\n        .pipe(takeUntil(detached$))\n        .subscribe(() => this.close());\n    }\n\n    this.overlayRef\n      .keydownEvents()\n      .pipe(\n        filter(event => ESCAPE_KEYS.includes(event.key as (typeof ESCAPE_KEYS)[number])),\n        takeUntil(detached$),\n      )\n      .subscribe(event => {\n        if (this.isTopmost()) {\n          event.preventDefault();\n          this.close();\n        }\n      });\n  }\n\n  /** Internal: set the component instance once attached. */\n  setComponentInstance(instance: T | null) {\n    this._componentInstance.set(instance);\n  }\n\n  close(): void {\n    if (this._isClosing()) {\n      return;\n    }\n    this._isClosing.set(true);\n\n    if (isPlatformBrowser(this.platformId) && this.containerInstance) {\n      const hostElement = this.containerInstance.getNativeElement();\n      hostElement.classList.add('alert-dialog-leave');\n    }\n\n    this.disposeTimer = setTimeout(() => this.dispose(), this.animationDuration);\n  }\n\n  private dispose(): void {\n    if (this.disposed) {\n      return;\n    }\n    this.disposed = true;\n\n    if (this.disposeTimer !== null) {\n      clearTimeout(this.disposeTimer);\n      this.disposeTimer = null;\n    }\n\n    if (this.overlayRef) {\n      try {\n        this.overlayRef.dispose();\n      } catch {\n        // Already disposed.\n      }\n    }\n\n    const idx = ZardAlertDialogRef.stack.indexOf(this as unknown as ZardAlertDialogRef);\n    if (idx >= 0) {\n      ZardAlertDialogRef.stack.splice(idx, 1);\n    }\n\n    if (isPlatformBrowser(this.platformId) && this.previouslyFocusedElement?.isConnected) {\n      this.previouslyFocusedElement.focus();\n    }\n  }\n\n  private isTopmost(): boolean {\n    return ZardAlertDialogRef.stack[ZardAlertDialogRef.stack.length - 1] === (this as unknown as ZardAlertDialogRef);\n  }\n\n  private handleCancel(): void {\n    const cancelFn = this.config.zOnCancel;\n    if (typeof cancelFn === 'function') {\n      const result = (cancelFn as OnClickCallback<T>)(this._componentInstance() as T);\n      if (result !== false) {\n        this.close();\n      }\n    } else {\n      this.close();\n    }\n  }\n\n  private handleOk(): void {\n    const okFn = this.config.zOnOk;\n    if (typeof okFn === 'function') {\n      const result = (okFn as OnClickCallback<T>)(this._componentInstance() as T);\n      if (result !== false) {\n        this.close();\n      }\n    } else {\n      this.close();\n    }\n  }\n}\n"
    },
    {
      "name": "alert-dialog.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const alertDialogVariants = cva(\n  [\n    'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',\n    'rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 outline-none',\n    'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',\n  ].join(' '),\n  {\n    variants: {\n      zSize: {\n        default: '',\n        sm: '',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  },\n);\n\nexport const alertDialogHeaderVariants = cva(\n  [\n    'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center',\n    'has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4',\n    'sm:group-data-[size=default]/alert-dialog-content:place-items-start',\n    'sm:group-data-[size=default]/alert-dialog-content:text-left',\n    'sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n  ].join(' '),\n);\n\nexport const alertDialogTitleVariants = cva(\n  [\n    'text-base font-medium',\n    'sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n  ].join(' '),\n);\n\nexport const alertDialogDescriptionVariants = cva(\n  [\n    'text-sm text-balance text-muted-foreground md:text-pretty',\n    '*:[a]:underline *:[a]:underline-offset-[3px] *:[a]:hover:text-foreground',\n  ].join(' '),\n);\n\nexport const alertDialogFooterVariants = cva(\n  [\n    '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4',\n    'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2',\n    'sm:flex-row sm:justify-end',\n  ].join(' '),\n);\n\nexport const alertDialogMediaVariants = cva(\n  [\n    'mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted',\n    'sm:group-data-[size=default]/alert-dialog-content:row-span-2',\n    \"*:[svg:not([class*='size-'])]:size-6\",\n  ].join(' '),\n);\n\nexport type ZardAlertDialogVariants = VariantProps<typeof alertDialogVariants>;\nexport type ZardAlertDialogSizeVariants = NonNullable<VariantProps<typeof alertDialogVariants>['zSize']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export { ZardAlertDialogComponent, ZardAlertDialogOptions, ZardAlertDialogModule } from './alert-dialog.component';\nexport { type OnClickCallback as AlertDialogOnClickCallback } from './alert-dialog.component';\nexport * from './alert-dialog.service';\nexport * from './alert-dialog-ref';\nexport * from './alert-dialog.variants';\n"
    }
  ],
  "registryDependencies": [
    "button"
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\n\nimport { ZardAlertDialogService } from '@/shared/components/alert-dialog/alert-dialog.service';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\n\n@Component({\n  selector: 'zard-demo-alert-dialog-default',\n  imports: [ZardButtonComponent],\n  template: `\n    <button z-button zType=\"outline\" (click)=\"open()\">Show Dialog</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAlertDialogDefaultComponent {\n  private readonly alertDialogService = inject(ZardAlertDialogService);\n\n  open() {\n    this.alertDialogService.create({\n      zTitle: 'Are you absolutely sure?',\n      zDescription: 'This action cannot be undone. This will permanently delete your account from our servers.',\n      zOkText: 'Continue',\n      zCancelText: 'Cancel',\n    });\n  }\n}\n"
    },
    {
      "name": "destructive.ts",
      "content": "import { ChangeDetectionStrategy, Component, inject, type TemplateRef } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideTrash2 } from '@ng-icons/lucide';\n\nimport { ZardAlertDialogService } from '@/shared/components/alert-dialog/alert-dialog.service';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\n\n@Component({\n  selector: 'zard-demo-alert-dialog-destructive',\n  imports: [ZardButtonComponent, NgIcon],\n  template: `\n    <ng-template #mediaIcon>\n      <ng-icon name=\"lucideTrash2\" />\n    </ng-template>\n    <button z-button zType=\"destructive\" (click)=\"open(mediaIcon)\">Delete Chat</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideTrash2 })],\n})\nexport class ZardDemoAlertDialogDestructiveComponent {\n  private readonly alertDialogService = inject(ZardAlertDialogService);\n\n  open(media: TemplateRef<void>) {\n    this.alertDialogService.create({\n      zSize: 'sm',\n      zMedia: media,\n      zMediaClass: 'bg-destructive/10 text-destructive dark:bg-destructive/20',\n      zTitle: 'Delete chat?',\n      zDescription:\n        'This will permanently delete this chat conversation. View <a href=\"#\">Settings</a> delete any memories saved during this chat.',\n      zOkText: 'Delete',\n      zCancelText: 'Cancel',\n      zOkDestructive: true,\n    });\n  }\n}\n"
    },
    {
      "name": "media.ts",
      "content": "import { ChangeDetectionStrategy, Component, inject, type TemplateRef } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideCircleFadingPlus } from '@ng-icons/lucide';\n\nimport { ZardAlertDialogService } from '@/shared/components/alert-dialog/alert-dialog.service';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\n\n@Component({\n  selector: 'zard-demo-alert-dialog-media',\n  imports: [ZardButtonComponent, NgIcon],\n  template: `\n    <ng-template #mediaIcon>\n      <ng-icon name=\"lucideCircleFadingPlus\" />\n    </ng-template>\n    <button z-button zType=\"outline\" (click)=\"open(mediaIcon)\">Share Project</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideCircleFadingPlus })],\n})\nexport class ZardDemoAlertDialogMediaComponent {\n  private readonly alertDialogService = inject(ZardAlertDialogService);\n\n  open(media: TemplateRef<void>) {\n    this.alertDialogService.create({\n      zMedia: media,\n      zTitle: 'Share this project?',\n      zDescription: 'Anyone with the link will be able to view and edit this project.',\n      zOkText: 'Share',\n      zCancelText: 'Cancel',\n    });\n  }\n}\n"
    },
    {
      "name": "small-with-media.ts",
      "content": "import { ChangeDetectionStrategy, Component, inject, type TemplateRef } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBluetooth } from '@ng-icons/lucide';\n\nimport { ZardAlertDialogService } from '@/shared/components/alert-dialog/alert-dialog.service';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\n\n@Component({\n  selector: 'zard-demo-alert-dialog-small-with-media',\n  imports: [ZardButtonComponent, NgIcon],\n  template: `\n    <ng-template #mediaIcon>\n      <ng-icon name=\"lucideBluetooth\" />\n    </ng-template>\n    <button z-button zType=\"outline\" (click)=\"open(mediaIcon)\">Show Dialog</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideBluetooth })],\n})\nexport class ZardDemoAlertDialogSmallWithMediaComponent {\n  private readonly alertDialogService = inject(ZardAlertDialogService);\n\n  open(media: TemplateRef<void>) {\n    this.alertDialogService.create({\n      zSize: 'sm',\n      zMedia: media,\n      zTitle: 'Allow accessory to connect?',\n      zDescription: 'Do you want to allow the USB accessory to connect to this device?',\n      zOkText: 'Allow',\n      zCancelText: \"Don't allow\",\n    });\n  }\n}\n"
    },
    {
      "name": "small.ts",
      "content": "import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\n\nimport { ZardAlertDialogService } from '@/shared/components/alert-dialog/alert-dialog.service';\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\n\n@Component({\n  selector: 'zard-demo-alert-dialog-small',\n  imports: [ZardButtonComponent],\n  template: `\n    <button z-button zType=\"outline\" (click)=\"open()\">Show Dialog</button>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAlertDialogSmallComponent {\n  private readonly alertDialogService = inject(ZardAlertDialogService);\n\n  open() {\n    this.alertDialogService.create({\n      zSize: 'sm',\n      zTitle: 'Allow accessory to connect?',\n      zDescription: 'Do you want to allow the USB accessory to connect to this device?',\n      zOkText: 'Allow',\n      zCancelText: \"Don't allow\",\n    });\n  }\n}\n"
    }
  ]
}