{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "dialog",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ng/primitives"
  ],
  "files": [
    {
      "path": "ui/dialog.ts",
      "content": "import type { TemplateRef } from '@angular/core'\nimport type { RdxDialogConfig } from '@radix-ng/primitives/dialog'\nimport { Component, computed, Directive, effect, inject, input } from '@angular/core'\nimport { NgIconComponent, provideIcons } from '@ng-icons/core'\nimport { lucideX } from '@ng-icons/lucide'\n\nimport {\n  RdxDialogCloseDirective,\n\n  RdxDialogContentDirective,\n  RdxDialogDescriptionDirective,\n  RdxDialogTitleDirective,\n  RdxDialogTriggerDirective,\n} from '@radix-ng/primitives/dialog'\nimport { cn } from '~/lib/utils'\n\n@Directive({\n  standalone: true,\n  selector: 'button[ubDialogClose]',\n  hostDirectives: [RdxDialogCloseDirective],\n})\nexport class UbDialogCloseDirective {}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDialogTrigger]',\n  hostDirectives: [\n    {\n      directive: RdxDialogTriggerDirective,\n      inputs: ['rdxDialogTrigger: ubDialogTrigger'],\n    },\n  ],\n})\nexport class UbDialogTriggerDirective {\n  rdxDialogTrigger = inject(RdxDialogTriggerDirective, { host: true })\n  ubDialogTrigger = input.required<TemplateRef<void>>()\n  ubDialogConfig = input<RdxDialogConfig<unknown>>()\n\n  passingConfig = effect(() => {\n    this.rdxDialogTrigger.dialogConfig = {\n      ...this.ubDialogConfig(),\n      content: this.ubDialogTrigger(),\n      backdropClass: ['fixed', 'inset-0', 'z-50', 'bg-black/80', 'data-[state=open]:animate-in', 'data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0', 'data-[state=open]:fade-in-0'],\n    }\n  })\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubDialogContent]',\n  imports: [RdxDialogCloseDirective, NgIconComponent],\n  host: {\n    '[class]': 'computedClass()',\n  },\n  hostDirectives: [\n    {\n      directive: RdxDialogContentDirective,\n    },\n  ],\n  viewProviders: [provideIcons({ lucideX })],\n  template: `\n  <ng-content />\n\n  <button class=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\" rdxDialogClose>\n    <ng-icon name=\"lucideX\" />\n    <span class=\"sr-only\">Close</span>\n  </button>\n  `,\n})\nexport class UbDialogContentDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'div[ubDialogHeader]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDialogHeaderDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('flex flex-col space-y-1.5 text-center sm:text-left', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'div[ubDialogFooter]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDialogFooterDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'h2[ubDialogTitle]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n  hostDirectives: [RdxDialogTitleDirective],\n})\nexport class UbDialogTitleDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('text-lg font-semibold leading-none tracking-tight', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'p[ubDialogDescription]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n  hostDirectives: [RdxDialogDescriptionDirective],\n})\nexport class UbDialogDescriptionDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('text-sm text-muted-foreground', this.class()))\n}\n",
      "type": "registry:ui"
    }
  ]
}