{
  "name": "breadcrumb",
  "type": "registry:component",
  "files": [
    {
      "name": "breadcrumb.component.ts",
      "content": "import { LocationStrategy } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  contentChildren,\n  ElementRef,\n  inject,\n  input,\n  TemplateRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ActivatedRoute,\n  type NavigationBehaviorOptions,\n  type Params,\n  type QueryParamsHandling,\n  Router,\n  UrlTree,\n} from '@angular/router';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide';\nimport type { ClassValue } from 'clsx';\n\nimport {\n  breadcrumbEllipsisVariants,\n  breadcrumbItemVariants,\n  breadcrumbLinkVariants,\n  breadcrumbListVariants,\n  breadcrumbPageVariants,\n  breadcrumbSeparatorVariants,\n  breadcrumbVariants,\n  type ZardBreadcrumbAlignVariants,\n  type ZardBreadcrumbEllipsisColorVariants,\n  type ZardBreadcrumbSizeVariants,\n  type ZardBreadcrumbWrapVariants,\n} from '@/shared/components/breadcrumb/breadcrumb.variants';\nimport { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\ntype BreadcrumbRouterLink = string | readonly unknown[] | UrlTree | null | undefined;\n\n@Component({\n  selector: 'z-breadcrumb-ellipsis, [z-breadcrumb-ellipsis]',\n  imports: [NgIcon],\n  template: `\n    <ng-icon name=\"lucideEllipsis\" class=\"size-4!\" aria-hidden=\"true\" />\n    @if (zLabel()) {\n      <span class=\"sr-only\">{{ zLabel() }}</span>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideEllipsis })],\n  host: {\n    'data-slot': 'breadcrumb-ellipsis',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zBreadcrumbEllipsis',\n})\nexport class ZardBreadcrumbEllipsisComponent {\n  readonly zColor = input<ZardBreadcrumbEllipsisColorVariants>('muted');\n  readonly zLabel = input('More breadcrumbs');\n\n  readonly class = input<ClassValue>('');\n  protected readonly classes = computed(() =>\n    mergeClasses(breadcrumbEllipsisVariants({ zColor: this.zColor() }), this.class()),\n  );\n}\n\n@Component({\n  selector: 'z-breadcrumb-page, [z-breadcrumb-page]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'breadcrumb-page',\n    'aria-current': 'page',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zBreadcrumbPage',\n})\nexport class ZardBreadcrumbPageComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(breadcrumbPageVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-breadcrumb-link, [z-breadcrumb-link]',\n  template: '<ng-content />',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-slot': 'breadcrumb-link',\n    '[attr.role]': 'role()',\n    '[attr.tabindex]': 'tabIndex()',\n    '[attr.href]': 'resolvedHref()',\n    '[class]': 'classes()',\n    '(click)': 'navigate($event)',\n    '(keydown)': 'activateFromKeyboard($event)',\n  },\n  exportAs: 'zBreadcrumbLink',\n})\nexport class ZardBreadcrumbLinkComponent {\n  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly router = inject(Router, { optional: true });\n  private readonly activatedRoute = inject(ActivatedRoute, { optional: true });\n  private readonly locationStrategy = inject(LocationStrategy, { optional: true });\n\n  readonly routerLink = input<BreadcrumbRouterLink>(null);\n  readonly queryParams = input<Params | null | undefined>();\n  readonly fragment = input<string | undefined>();\n  readonly queryParamsHandling = input<QueryParamsHandling | null | undefined>();\n  readonly state = input<NavigationBehaviorOptions['state']>();\n  readonly info = input<NavigationBehaviorOptions['info']>();\n  readonly relativeTo = input<ActivatedRoute | null | undefined>();\n  readonly preserveFragment = input(false, { transform: booleanAttribute });\n  readonly skipLocationChange = input(false, { transform: booleanAttribute });\n  readonly replaceUrl = input(false, { transform: booleanAttribute });\n  readonly linkHref = input<string | null | undefined>(undefined, { alias: 'href' });\n\n  readonly class = input<ClassValue>('');\n\n  private readonly urlTree = computed(() => {\n    const commands = this.routerLink();\n\n    if (!this.router || commands === null || commands === undefined) {\n      return null;\n    }\n\n    if (commands instanceof UrlTree) {\n      return commands;\n    }\n\n    return this.router.createUrlTree(Array.isArray(commands) ? commands : [commands], {\n      relativeTo: this.relativeTo() === undefined ? this.activatedRoute : this.relativeTo(),\n      queryParams: this.queryParams(),\n      fragment: this.fragment(),\n      queryParamsHandling: this.queryParamsHandling(),\n      preserveFragment: this.preserveFragment(),\n    });\n  });\n\n  protected readonly resolvedHref = computed(() => {\n    if (this.isButtonElement()) {\n      return null;\n    }\n\n    const urlTree = this.urlTree();\n\n    if (!urlTree || !this.router) {\n      return this.linkHref();\n    }\n\n    const href = this.router.serializeUrl(urlTree);\n\n    return this.locationStrategy ? this.locationStrategy.prepareExternalUrl(href) : href;\n  });\n\n  protected readonly role = computed(() => (this.isNativeInteractiveElement() ? null : 'link'));\n  protected readonly tabIndex = computed(() =>\n    this.isNativeInteractiveElement() || !this.hasNavigationTarget() ? null : 0,\n  );\n\n  protected readonly classes = computed(() => mergeClasses(breadcrumbLinkVariants(), this.class()));\n\n  protected navigate(event: MouseEvent): boolean {\n    const urlTree = this.urlTree();\n\n    if (this.shouldIgnoreMouseEvent(event)) {\n      return true;\n    }\n\n    if (this.router && urlTree) {\n      event.preventDefault();\n      this.navigateToUrlTree(urlTree);\n\n      return false;\n    }\n\n    const href = this.linkHref();\n\n    if (href && !this.isNativeInteractiveElement()) {\n      event.preventDefault();\n      this.navigateToHref(href);\n\n      return false;\n    }\n\n    return true;\n  }\n\n  protected activateFromKeyboard(event: KeyboardEvent): boolean {\n    if (this.isNativeInteractiveElement() || event.key !== 'Enter' || !this.hasNavigationTarget()) {\n      return true;\n    }\n\n    event.preventDefault();\n\n    const urlTree = this.urlTree();\n\n    if (this.router && urlTree) {\n      this.navigateToUrlTree(urlTree);\n\n      return false;\n    }\n\n    const href = this.linkHref();\n\n    if (href) {\n      this.navigateToHref(href);\n\n      return false;\n    }\n\n    return true;\n  }\n\n  private navigateToUrlTree(urlTree: UrlTree): void {\n    if (!this.router) {\n      return;\n    }\n\n    void this.router.navigateByUrl(urlTree, {\n      skipLocationChange: this.skipLocationChange(),\n      replaceUrl: this.replaceUrl(),\n      state: this.state(),\n      info: this.info(),\n    });\n  }\n\n  private navigateToHref(href: string): void {\n    this.elementRef.nativeElement.ownerDocument.defaultView?.location.assign(href);\n  }\n\n  private shouldIgnoreMouseEvent(event: MouseEvent): boolean {\n    if (\n      event.defaultPrevented ||\n      event.button !== 0 ||\n      event.ctrlKey ||\n      event.shiftKey ||\n      event.altKey ||\n      event.metaKey\n    ) {\n      return true;\n    }\n\n    const target = (event.currentTarget as HTMLElement | null)?.getAttribute('target');\n\n    return Boolean(target && target !== '_self');\n  }\n\n  private hasNavigationTarget(): boolean {\n    return this.urlTree() !== null || Boolean(this.linkHref());\n  }\n\n  private isNativeInteractiveElement(): boolean {\n    return this.isAnchorElement() || this.isButtonElement();\n  }\n\n  private isAnchorElement(): boolean {\n    return this.elementRef.nativeElement.tagName.toLowerCase() === 'a';\n  }\n\n  private isButtonElement(): boolean {\n    return this.elementRef.nativeElement.tagName.toLowerCase() === 'button';\n  }\n}\n\n@Component({\n  selector: 'z-breadcrumb-separator, [z-breadcrumb-separator]',\n  imports: [NgIcon],\n  template: `\n    <ng-content>\n      <ng-icon name=\"lucideChevronRight\" />\n    </ng-content>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideChevronRight })],\n  host: {\n    'data-slot': 'breadcrumb-separator',\n    '[class]': 'classes()',\n    'aria-hidden': 'true',\n    role: 'presentation',\n  },\n  exportAs: 'zBreadcrumbSeparator',\n})\nexport class ZardBreadcrumbSeparatorComponent {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(breadcrumbSeparatorVariants(), this.class()));\n}\n\n@Component({\n  selector: 'z-breadcrumb-item, [z-breadcrumb-item]',\n  imports: [\n    ZardStringTemplateOutletDirective,\n    NgIcon,\n    ZardBreadcrumbLinkComponent,\n    ZardBreadcrumbPageComponent,\n    ZardBreadcrumbSeparatorComponent,\n  ],\n  template: `\n    <ng-template #itemContent><ng-content /></ng-template>\n\n    @if (hasComposedContent()) {\n      <ng-container *zStringTemplateOutlet=\"itemContent\" />\n    } @else if (isLast()) {\n      <span z-breadcrumb-page>\n        <ng-container *zStringTemplateOutlet=\"itemContent\" />\n      </span>\n    } @else {\n      <a\n        z-breadcrumb-link\n        class=\"flex items-center gap-1.5\"\n        [routerLink]=\"routerLink()\"\n        [queryParams]=\"queryParams()\"\n        [fragment]=\"fragment()\"\n        [queryParamsHandling]=\"queryParamsHandling()\"\n        [state]=\"state()\"\n        [info]=\"info()\"\n        [relativeTo]=\"relativeTo()\"\n        [preserveFragment]=\"preserveFragment()\"\n        [skipLocationChange]=\"skipLocationChange()\"\n        [replaceUrl]=\"replaceUrl()\"\n      >\n        <ng-container *zStringTemplateOutlet=\"itemContent\" />\n      </a>\n    }\n\n    @if (shouldRenderSeparator()) {\n      <span z-breadcrumb-separator>\n        @if (isTemplate(separator())) {\n          <ng-container *zStringTemplateOutlet=\"separator()\" />\n        } @else if (separator()) {\n          {{ separator() }}\n        } @else {\n          <ng-icon name=\"lucideChevronRight\" />\n        }\n      </span>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideChevronRight })],\n  host: {\n    'data-slot': 'breadcrumb-item',\n    role: 'listitem',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zBreadcrumbItem',\n})\nexport class ZardBreadcrumbItemComponent {\n  private readonly breadcrumbComponent = inject(ZardBreadcrumbComponent);\n\n  private readonly ellipsis = contentChild(ZardBreadcrumbEllipsisComponent);\n  private readonly link = contentChild(ZardBreadcrumbLinkComponent);\n  private readonly page = contentChild(ZardBreadcrumbPageComponent);\n  readonly routerLink = input<BreadcrumbRouterLink>([]);\n  readonly queryParams = input<Params | null | undefined>();\n  readonly fragment = input<string | undefined>();\n  readonly queryParamsHandling = input<QueryParamsHandling | null | undefined>();\n  readonly state = input<NavigationBehaviorOptions['state']>();\n  readonly info = input<NavigationBehaviorOptions['info']>();\n  readonly relativeTo = input<ActivatedRoute | null | undefined>();\n  readonly preserveFragment = input(false, { transform: booleanAttribute });\n  readonly skipLocationChange = input(false, { transform: booleanAttribute });\n  readonly replaceUrl = input(false, { transform: booleanAttribute });\n\n  readonly class = input<ClassValue>('');\n\n  protected readonly separator = computed(() => this.breadcrumbComponent.zSeparator());\n  protected readonly isLast = computed<boolean>(() => this === this.breadcrumbComponent.items().at(-1));\n  protected readonly hasComposedContent = computed<boolean>(\n    () => this.ellipsis() !== undefined || this.link() !== undefined || this.page() !== undefined,\n  );\n\n  protected readonly shouldRenderSeparator = computed<boolean>(\n    () => !this.isLast() && !this.breadcrumbComponent.hasManualSeparators(),\n  );\n\n  protected readonly classes = computed(() => mergeClasses(breadcrumbItemVariants(), this.class()));\n\n  protected isTemplate(value: string | TemplateRef<void>): value is TemplateRef<void> {\n    return value instanceof TemplateRef;\n  }\n}\n\n@Component({\n  selector: 'z-breadcrumb, [z-breadcrumb]',\n  template: `\n    <nav [attr.aria-label]=\"zLabel()\" [class]=\"navClasses()\">\n      <ol [class]=\"listClasses()\">\n        <ng-content />\n      </ol>\n    </nav>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  exportAs: 'zBreadcrumb',\n})\nexport class ZardBreadcrumbComponent {\n  readonly zLabel = input('breadcrumb');\n  readonly zSize = input<ZardBreadcrumbSizeVariants>('md');\n  readonly zAlign = input<ZardBreadcrumbAlignVariants>('start');\n  readonly zWrap = input<ZardBreadcrumbWrapVariants>('wrap');\n  readonly zSeparator = input<string | TemplateRef<void>>('');\n\n  readonly class = input<ClassValue>('');\n\n  readonly items = contentChildren(ZardBreadcrumbItemComponent);\n  readonly separators = contentChildren(ZardBreadcrumbSeparatorComponent);\n\n  readonly hasManualSeparators = computed(() => this.separators().length > 0);\n\n  protected readonly navClasses = computed(() =>\n    mergeClasses(breadcrumbVariants({ zSize: this.zSize() }), this.class()),\n  );\n\n  protected readonly listClasses = computed(() =>\n    breadcrumbListVariants({ zAlign: this.zAlign(), zWrap: this.zWrap() }),\n  );\n}\n"
    },
    {
      "name": "breadcrumb.imports.ts",
      "content": "import {\n  ZardBreadcrumbComponent,\n  ZardBreadcrumbEllipsisComponent,\n  ZardBreadcrumbItemComponent,\n  ZardBreadcrumbLinkComponent,\n  ZardBreadcrumbPageComponent,\n  ZardBreadcrumbSeparatorComponent,\n} from '@/shared/components/breadcrumb/breadcrumb.component';\n\nexport const ZardBreadcrumbImports = [\n  ZardBreadcrumbComponent,\n  ZardBreadcrumbItemComponent,\n  ZardBreadcrumbLinkComponent,\n  ZardBreadcrumbPageComponent,\n  ZardBreadcrumbSeparatorComponent,\n  ZardBreadcrumbEllipsisComponent,\n] as const;\n"
    },
    {
      "name": "breadcrumb.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const breadcrumbVariants = cva('w-full', {\n  variants: {\n    zSize: {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: {\n    zSize: 'md',\n  },\n});\nexport type ZardBreadcrumbSizeVariants = NonNullable<VariantProps<typeof breadcrumbVariants>['zSize']>;\n\nexport const breadcrumbListVariants = cva(\n  'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5',\n  {\n    variants: {\n      zAlign: {\n        start: 'justify-start',\n        center: 'justify-center',\n        end: 'justify-end',\n      },\n      zWrap: {\n        wrap: 'flex-wrap',\n        nowrap: 'flex-nowrap',\n      },\n    },\n    defaultVariants: {\n      zAlign: 'start',\n      zWrap: 'wrap',\n    },\n  },\n);\nexport type ZardBreadcrumbAlignVariants = NonNullable<VariantProps<typeof breadcrumbListVariants>['zAlign']>;\nexport type ZardBreadcrumbWrapVariants = NonNullable<VariantProps<typeof breadcrumbListVariants>['zWrap']>;\n\nexport const breadcrumbItemVariants = cva('inline-flex items-center gap-1.5');\nexport type ZardBreadcrumbItemVariants = VariantProps<typeof breadcrumbItemVariants>;\n\nexport const breadcrumbLinkVariants = cva('transition-colors hover:text-foreground');\nexport type ZardBreadcrumbLinkVariants = VariantProps<typeof breadcrumbLinkVariants>;\n\nexport const breadcrumbPageVariants = cva('font-normal text-foreground');\nexport type ZardBreadcrumbPageVariants = VariantProps<typeof breadcrumbPageVariants>;\n\nexport const breadcrumbSeparatorVariants = cva(\n  'text-muted-foreground [&_svg]:size-3.5 [&_ng-icon]:flex! [&_ng-icon]:items-center! [&_ng-icon]:size-3.5!',\n);\nexport type ZardBreadcrumbSeparatorVariants = VariantProps<typeof breadcrumbSeparatorVariants>;\n\nexport const breadcrumbEllipsisVariants = cva('flex size-9 items-center justify-center', {\n  variants: {\n    zColor: {\n      muted: 'text-muted-foreground',\n      strong: 'text-foreground',\n    },\n  },\n  defaultVariants: {\n    zColor: 'muted',\n  },\n});\nexport type ZardBreadcrumbEllipsisColorVariants = NonNullable<\n  VariantProps<typeof breadcrumbEllipsisVariants>['zColor']\n>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from '@/shared/components/breadcrumb/breadcrumb.component';\nexport * from '@/shared/components/breadcrumb/breadcrumb.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBreadcrumbImports } from '../breadcrumb.imports';\n\n@Component({\n  selector: 'z-demo-breadcrumb-default',\n  imports: [ZardBreadcrumbImports],\n  template: `\n    <z-breadcrumb zLabel=\"Default breadcrumb\">\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/']\">Home</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/docs/components']\">Components</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <span z-breadcrumb-page>Breadcrumb</span>\n      </z-breadcrumb-item>\n    </z-breadcrumb>\n  `,\n})\nexport class ZardDemoBreadcrumbDefaultComponent {}\n"
    },
    {
      "name": "dropdown.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown } from '@ng-icons/lucide';\n\nimport { ZardBreadcrumbImports } from '@/shared/components/breadcrumb/breadcrumb.imports';\nimport { ZardMenuImports } from '@/shared/components/menu/menu.imports';\n\n@Component({\n  selector: 'z-demo-breadcrumb-dropdown',\n  imports: [ZardBreadcrumbImports, ZardMenuImports, NgIcon],\n  template: `\n    <z-breadcrumb zLabel=\"Breadcrumb with dropdown\">\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/']\">Home</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <button\n          z-breadcrumb-link\n          type=\"button\"\n          class=\"flex items-center gap-1.5 border-0 bg-transparent p-0 text-inherit\"\n          z-menu\n          [zMenuTriggerFor]=\"componentsMenu\"\n        >\n          Components\n          <ng-icon name=\"lucideChevronDown\" class=\"size-3.5!\" aria-hidden=\"true\" />\n        </button>\n\n        <ng-template #componentsMenu>\n          <div z-menu-content class=\"w-48\">\n            <button type=\"button\" z-menu-item>Documentation</button>\n            <button type=\"button\" z-menu-item>Themes</button>\n            <button type=\"button\" z-menu-item>Blocks</button>\n          </div>\n        </ng-template>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <span z-breadcrumb-page>Breadcrumb</span>\n      </z-breadcrumb-item>\n    </z-breadcrumb>\n  `,\n  viewProviders: [provideIcons({ lucideChevronDown })],\n})\nexport class ZardDemoBreadcrumbDropdownComponent {}\n"
    },
    {
      "name": "ellipsis.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBreadcrumbImports } from '@/shared/components/breadcrumb/breadcrumb.imports';\n\n@Component({\n  selector: 'z-demo-breadcrumb-ellipsis',\n  imports: [ZardBreadcrumbImports],\n  template: `\n    <z-breadcrumb zLabel=\"Collapsed breadcrumb\">\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/']\">Home</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <z-breadcrumb-ellipsis />\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/docs/components']\">Components</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <span z-breadcrumb-page>Breadcrumb</span>\n      </z-breadcrumb-item>\n    </z-breadcrumb>\n  `,\n})\nexport class ZardDemoBreadcrumbEllipsisComponent {}\n"
    },
    {
      "name": "link.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBreadcrumbImports } from '@/shared/components/breadcrumb/breadcrumb.imports';\n\n@Component({\n  selector: 'z-demo-breadcrumb-link',\n  imports: [ZardBreadcrumbImports],\n  template: `\n    <z-breadcrumb zLabel=\"Router breadcrumb\">\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link routerLink=\"/\">Home</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link routerLink=\"/docs/components\">Components</a>\n      </z-breadcrumb-item>\n      <z-breadcrumb-item>\n        <span z-breadcrumb-page>Breadcrumb</span>\n      </z-breadcrumb-item>\n    </z-breadcrumb>\n  `,\n})\nexport class ZardDemoBreadcrumbLinkComponent {}\n"
    },
    {
      "name": "separator.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideDot } from '@ng-icons/lucide';\n\nimport { ZardBreadcrumbImports } from '@/shared/components/breadcrumb/breadcrumb.imports';\n\n@Component({\n  selector: 'z-demo-breadcrumb-separator',\n  imports: [ZardBreadcrumbImports, NgIcon],\n  template: `\n    <z-breadcrumb zLabel=\"Breadcrumb with custom separator\">\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/']\">Home</a>\n      </z-breadcrumb-item>\n      <li z-breadcrumb-separator>\n        <ng-icon name=\"lucideDot\" />\n      </li>\n      <z-breadcrumb-item>\n        <a z-breadcrumb-link [routerLink]=\"['/docs/components']\">Components</a>\n      </z-breadcrumb-item>\n      <li z-breadcrumb-separator>\n        <ng-icon name=\"lucideDot\" />\n      </li>\n      <z-breadcrumb-item>\n        <span z-breadcrumb-page>Breadcrumb</span>\n      </z-breadcrumb-item>\n    </z-breadcrumb>\n  `,\n  viewProviders: [provideIcons({ lucideDot })],\n})\nexport class ZardDemoBreadcrumbSeparatorComponent {}\n"
    }
  ]
}