{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "breadcrumb",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/breadcrumb.ts",
      "content": "import { Component, computed, Directive, input } from '@angular/core'\n\nimport { NgIconComponent, provideIcons } from '@ng-icons/core'\nimport { radixChevronRight, radixDotsHorizontal } from '@ng-icons/radix-icons'\n\nimport { cn } from '~/lib/utils'\n\n@Directive({\n  selector: 'nav[ubBreadcrumb]',\n  standalone: true,\n  host: {\n    '[attr.aria-label]': '\"breadcrumb\"',\n  },\n})\nexport class UbBreadcrumbDirective {}\n\n@Directive({\n  selector: 'ol[ubBreadcrumbList]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbListDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn(\n      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',\n      this.class(),\n    ),\n  )\n}\n\n@Directive({\n  selector: 'li[ubBreadcrumbItem]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbItemDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('inline-flex items-center gap-1.5', this.class()),\n  )\n}\n\n@Directive({\n  selector: '[ubBreadcrumbLink], a[ubBreadcrumbLink]',\n  standalone: true,\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbLinkDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('transition-colors hover:text-foreground', this.class()),\n  )\n}\n\n@Directive({\n  selector: 'span[ubBreadcrumbPage]',\n  standalone: true,\n  host: {\n    'role': 'link',\n    '[attr.aria-disabled]': 'true',\n    '[attr.aria-current]': '\"page\"',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbPageDirective {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('font-normal text-foreground', this.class()),\n  )\n}\n\n@Component({\n  selector: 'li[ubBreadcrumbSeparator]',\n  standalone: true,\n  imports: [NgIconComponent],\n  viewProviders: [provideIcons({ radixChevronRight })],\n  template: `\n    <span #ref><ng-content></ng-content></span>\n    @if (ref.children.length == 0) {\n      <ng-icon name=\"radixChevronRight\" size=\"16\" class=\"flex h-3.5\" />\n    }\n  `,\n  host: {\n    'role': 'presentation',\n    '[attr.aria-hidden]': 'true',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbSeparatorComponent {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('[&>svg]:size-3.5', this.class()),\n  )\n}\n\n@Component({\n  selector: 'span[ubBreadcrumbEllipsis]',\n  standalone: true,\n  imports: [NgIconComponent],\n  viewProviders: [provideIcons({ radixDotsHorizontal })],\n  template: `\n    <ng-icon name=\"radixDotsHorizontal\" class=\"h-4 w-4\" />\n    <span class=\"sr-only\">More</span>\n  `,\n  host: {\n    'role': 'presentation',\n    '[attr.aria-hidden]': 'true',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbBreadcrumbEllipsisComponent {\n  readonly class = input<string>()\n\n  protected computedClass = computed(() =>\n    cn('flex h-9 w-9 items-center justify-center', this.class()),\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}