pagination

1import type { UbButtonSize } from '~/registry/new-york/ui/button'
2import { booleanAttribute, Component, computed, Directive, effect, inject, input } from '@angular/core'
3import { NgIcon, provideIcons } from '@ng-icons/core'
4import { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide'
5import { cn } from '~/lib/utils'
6import { buttonVariants } from '~/registry/new-york/ui/button'
7 
8@Directive({
9  standalone: true,
10  selector: 'nav[ubPagination]',
11  host: {
12    'role': 'navigation',
13    'aria-label': 'pagination',
14    '[class]': 'computedClass()',
15  },
16})
17export class UbPaginationDirective {
18  class = input<string>()
19  computedClass = computed(() => cn('mx-auto flex w-full justify-center', this.class()))
20}
21 
22@Directive({
23  standalone: true,
24  selector: 'ul[ubPaginationContent]',
25  host: {
26    '[class]': 'computedClass()',
27  },
28})
29export class UbPaginationContentDirective {
30  class = input<string>()
31  computedClass = computed(() => cn('flex flex-row items-center gap-1', this.class()))
32}
33 
34@Directive({
35  standalone: true,
36  selector: 'li[ubPaginationItem]',
37  host: {
38    '[class]': 'computedClass()',
39  },
40})
41export class UbPaginationItemDirective {
42  class = input<string>()
43  computedClass = computed(() => cn('', this.class()))
44}
45 
46@Directive({
47  standalone: true,
48  selector: '[ubPaginationLink]',
49  host: {
50    '[aria-current]': 'isActive() ? "page" : undefined',
51    '[class]': 'computedClass()',
52  },
53})
54export class UbPaginationLinkDirective {
55  class = input<string>()
56  isActive = input(false, { transform: booleanAttribute })
57  size = input<UbButtonSize>('icon')
58  computedClass = computed(() => cn(
59    buttonVariants({
60      variant: this.isActive() ? 'outline' : 'ghost',
61      size: this.size(),
62    }),
63    this.class(),
64  ))
65}
66 
67@Component({
68  standalone: true,
69  selector: '[ubPaginationPrevious]',
70  imports: [NgIcon],
71  hostDirectives: [UbPaginationLinkDirective],
72  host: {
73    '[class]': 'computedClass()',
74    'aria-label': 'Go to previous page',
75  },
76  providers: [provideIcons({ lucideChevronLeft })],
77  template: `
78  <ng-icon name="lucideChevronLeft" class="w-4 h-4"></ng-icon>
79  <span>Previous</span>
80  `,
81})
82export class UbPaginationPreviousDirective {
83  class = input<string>()
84  computedClass = computed(() => cn('gap-1 pl-2.5', this.class()))
85  protected size = input<UbButtonSize>('default')
86  private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })
87 
88  setConfig = effect(() => {
89// … truncated