breadcrumb

1import { Component, computed, Directive, input } from '@angular/core'
2 
3import { NgIconComponent, provideIcons } from '@ng-icons/core'
4import { radixChevronRight, radixDotsHorizontal } from '@ng-icons/radix-icons'
5 
6import { cn } from '~/lib/utils'
7 
8@Directive({
9  selector: 'nav[ubBreadcrumb]',
10  standalone: true,
11  host: {
12    '[attr.aria-label]': '"breadcrumb"',
13  },
14})
15export class UbBreadcrumbDirective {}
16 
17@Directive({
18  selector: 'ol[ubBreadcrumbList]',
19  standalone: true,
20  host: {
21    '[class]': 'computedClass()',
22  },
23})
24export class UbBreadcrumbListDirective {
25  readonly class = input<string>()
26 
27  protected computedClass = computed(() =>
28    cn(
29      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
30      this.class(),
31    ),
32  )
33}
34 
35@Directive({
36  selector: 'li[ubBreadcrumbItem]',
37  standalone: true,
38  host: {
39    '[class]': 'computedClass()',
40  },
41})
42export class UbBreadcrumbItemDirective {
43  readonly class = input<string>()
44 
45  protected computedClass = computed(() =>
46    cn('inline-flex items-center gap-1.5', this.class()),
47  )
48}
49 
50@Directive({
51  selector: '[ubBreadcrumbLink], a[ubBreadcrumbLink]',
52  standalone: true,
53  host: {
54    '[class]': 'computedClass()',
55  },
56})
57export class UbBreadcrumbLinkDirective {
58  readonly class = input<string>()
59 
60  protected computedClass = computed(() =>
61    cn('transition-colors hover:text-foreground', this.class()),
62  )
63}
64 
65@Directive({
66  selector: 'span[ubBreadcrumbPage]',
67  standalone: true,
68  host: {
69    'role': 'link',
70    '[attr.aria-disabled]': 'true',
71    '[attr.aria-current]': '"page"',
72    '[class]': 'computedClass()',
73  },
74})
75export class UbBreadcrumbPageDirective {
76  readonly class = input<string>()
77 
78  protected computedClass = computed(() =>
79    cn('font-normal text-foreground', this.class()),
80  )
81}
82 
83@Component({
84  selector: 'li[ubBreadcrumbSeparator]',
85  standalone: true,
86  imports: [NgIconComponent],
87  viewProviders: [provideIcons({ radixChevronRight })],
88  template: `
89    <span #ref><ng-content></ng-content></span>
90    @if (ref.children.length == 0) {
91      <ng-icon name="radixChevronRight" size="16" class="flex h-3.5" />
92    }
93  `,
94  host: {
95    'role': 'presentation',
96    '[attr.aria-hidden]': 'true',
97    '[class]': 'computedClass()',
98  },
99})
100export class UbBreadcrumbSeparatorComponent {
101  readonly class = input<string>()
102 
103  protected computedClass = computed(() =>
104    cn('[&>svg]:size-3.5', this.class()),
105  )
106}
107 
108@Component({
109// … truncated