breadcrumb

1import { LocationStrategy } from '@angular/common';
2import {
3  booleanAttribute,
4  ChangeDetectionStrategy,
5  Component,
6  computed,
7  contentChild,
8  contentChildren,
9  ElementRef,
10  inject,
11  input,
12  TemplateRef,
13  ViewEncapsulation,
14} from '@angular/core';
15import {
16  ActivatedRoute,
17  type NavigationBehaviorOptions,
18  type Params,
19  type QueryParamsHandling,
20  Router,
21  UrlTree,
22} from '@angular/router';
23 
24import { NgIcon, provideIcons } from '@ng-icons/core';
25import { lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide';
26import type { ClassValue } from 'clsx';
27 
28import {
29  breadcrumbEllipsisVariants,
30  breadcrumbItemVariants,
31  breadcrumbLinkVariants,
32  breadcrumbListVariants,
33  breadcrumbPageVariants,
34  breadcrumbSeparatorVariants,
35  breadcrumbVariants,
36  type ZardBreadcrumbAlignVariants,
37  type ZardBreadcrumbEllipsisColorVariants,
38  type ZardBreadcrumbSizeVariants,
39  type ZardBreadcrumbWrapVariants,
40} from '@/shared/components/breadcrumb/breadcrumb.variants';
41import { ZardStringTemplateOutletDirective } from '@/shared/core/directives/string-template-outlet/string-template-outlet.directive';
42import { mergeClasses } from '@/shared/utils/merge-classes';
43 
44type BreadcrumbRouterLink = string | readonly unknown[] | UrlTree | null | undefined;
45 
46@Component({
47  selector: 'z-breadcrumb-ellipsis, [z-breadcrumb-ellipsis]',
48  imports: [NgIcon],
49  template: `
50    <ng-icon name="lucideEllipsis" class="size-4!" aria-hidden="true" />
51    @if (zLabel()) {
52      <span class="sr-only">{{ zLabel() }}</span>
53    }
54  `,
55  changeDetection: ChangeDetectionStrategy.OnPush,
56  encapsulation: ViewEncapsulation.None,
57  viewProviders: [provideIcons({ lucideEllipsis })],
58  host: {
59    'data-slot': 'breadcrumb-ellipsis',
60    '[class]': 'classes()',
61  },
62  exportAs: 'zBreadcrumbEllipsis',
63})
64export class ZardBreadcrumbEllipsisComponent {
65  readonly zColor = input<ZardBreadcrumbEllipsisColorVariants>('muted');
66  readonly zLabel = input('More breadcrumbs');
67 
68  readonly class = input<ClassValue>('');
69  protected readonly classes = computed(() =>
70    mergeClasses(breadcrumbEllipsisVariants({ zColor: this.zColor() }), this.class()),
71  );
72}
73 
74@Component({
75  selector: 'z-breadcrumb-page, [z-breadcrumb-page]',
76  template: '<ng-content />',
77  changeDetection: ChangeDetectionStrategy.OnPush,
78  encapsulation: ViewEncapsulation.None,
79  host: {
80    'data-slot': 'breadcrumb-page',
81    'aria-current': 'page',
82    '[class]': 'classes()',
83  },
84  exportAs: 'zBreadcrumbPage',
85})
86// … truncated