{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "dropdown-menu",
  "type": "registry:ui",
  "dependencies": [
    "@radix-ng/primitives"
  ],
  "files": [
    {
      "path": "ui/dropdown-menu.ts",
      "content": "import { booleanAttribute, Component, computed, Directive, input } from '@angular/core'\nimport { NgIcon, provideIcons } from '@ng-icons/core'\nimport { radixCheck, radixChevronRight, radixCircle } from '@ng-icons/radix-icons'\nimport {\n  DropdownAlign,\n  DropdownSide,\n  RdxDropdownMenuContentDirective,\n  RdxDropdownMenuItemCheckboxDirective,\n  RdxDropdownMenuItemDirective,\n  RdxDropdownMenuItemIndicatorDirective,\n  RdxDropdownMenuItemRadioDirective,\n  RdxDropdownMenuItemRadioGroupDirective,\n  RdxDropdownMenuLabelDirective,\n  RdxDropdownMenuSeparatorDirective,\n  RdxDropdownMenuTriggerDirective,\n} from '@radix-ng/primitives/dropdown-menu'\nimport { RdxMenuGroupDirective } from '@radix-ng/primitives/menu'\nimport { cn } from '~/lib/utils'\n\nexport { DropdownAlign, DropdownSide }\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuTrigger]',\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuTriggerDirective,\n      inputs: [\n        'rdxDropdownMenuTrigger: ubDropdownMenuTrigger',\n        'disabled',\n        'side',\n        'align',\n        'sideOffset',\n        'alignOffset',\n      ],\n      outputs: ['onOpenChange'],\n    },\n  ],\n})\nexport class UbDropdownMenuTriggerDirective { }\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuContent]',\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuContentDirective,\n      inputs: ['closeOnEscape', 'onEscapeKeyDown'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuContentDirective {\n  class = input<string>()\n  computedClass = computed(() => cn(\n    'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',\n    '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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n    this.class(),\n  ))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuItem]',\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuItemDirective,\n      inputs: ['disabled'],\n      outputs: ['onSelect'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuItemDirective {\n  class = input<string>()\n  inset = input(false, {\n    transform: booleanAttribute,\n  })\n\n  computedClass = computed(() => cn(\n    'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n    this.inset() && 'pl-8',\n    this.class(),\n  ))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuLabel]',\n  hostDirectives: [RdxDropdownMenuLabelDirective],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuLabelDirective {\n  class = input<string>()\n  inset = input(false, {\n    transform: booleanAttribute,\n  })\n\n  computedClass = computed(() => cn(\n    'px-2 py-1.5 text-sm font-semibold',\n    this.inset() && 'pl-8',\n    this.class(),\n  ))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuSeparator]',\n  hostDirectives: [RdxDropdownMenuSeparatorDirective],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuSeparator {\n  class = input<string>()\n  computedClass = computed(() => cn('-mx-1 my-1 h-px bg-muted', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuGroup]',\n  hostDirectives: [RdxMenuGroupDirective],\n})\nexport class UbDropdownMenuGroupDirective { }\n\n@Directive({\n  standalone: true,\n  selector: 'span[ubDropdownMenuShortcut]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuShortcutDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('ml-auto text-xs tracking-widest opacity-60', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuSubContent]',\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuContentDirective,\n      inputs: ['closeOnEscape', 'onEscapeKeyDown'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbDropdownMenuSubContentDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', this.class()))\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubDropdownMenuSubTrigger]',\n  imports: [NgIcon],\n  providers: [provideIcons({ radixChevronRight })],\n  hostDirectives: [\n    UbDropdownMenuItemDirective,\n    {\n      directive: RdxDropdownMenuTriggerDirective,\n      inputs: [\n        'rdxDropdownMenuTrigger: ubDropdownMenuSubTrigger',\n        'disabled',\n        'side',\n        'align',\n        'sideOffset',\n        'alignOffset',\n      ],\n      outputs: ['onOpenChange'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n  template: `\n  <ng-content />\n  <ng-icon name=\"radixChevronRight\" class=\"ml-auto\" />\n  `,\n})\nexport class UbDropdownMenuSubTrigger {\n  class = input<string>()\n  inset = input(false, {\n    transform: booleanAttribute,\n  })\n\n  computedClass = computed(() => cn('flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', this.inset() && 'pl-8', this.class()))\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubDropdownMenuCheckboxItem]',\n  imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],\n  providers: [provideIcons({ radixCheck })],\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuItemCheckboxDirective,\n      inputs: ['checked', 'disabled'],\n      outputs: ['checkedChange'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n  template: `\n  <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n    <ng-icon name=\"radixCheck\" class=\"h-4 w-4\" rdxDropdownMenuItemIndicator />\n  </span>\n  <ng-content></ng-content>\n  `,\n})\nexport class UbDropdownMenuCheckboxItemDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class(),\n  ))\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubDropdownMenuRadioItem]',\n  imports: [NgIcon, RdxDropdownMenuItemIndicatorDirective],\n  providers: [provideIcons({ radixCircle })],\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuItemRadioDirective,\n      inputs: ['value'],\n    },\n  ],\n  host: {\n    '[class]': 'computedClass()',\n  },\n  template: `\n  <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n    <ng-icon name=\"radixCircle\" class=\"h-2 w-2 fill-current\" rdxDropdownMenuItemIndicator />\n  </span>\n  <ng-content></ng-content>\n  `,\n})\nexport class UbDropdownMenuRadioItemDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.class(),\n  ))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubDropdownMenuRadioGroup]',\n  hostDirectives: [\n    {\n      directive: RdxDropdownMenuItemRadioGroupDirective,\n      inputs: ['value'],\n      outputs: ['valueChange'],\n    },\n  ],\n})\nexport class UbDropdownMenuRadioGroupDirective { }\n",
      "type": "registry:ui"
    }
  ]
}