pagination

1import { NgTemplateOutlet } from '@angular/common';
2import {
3  booleanAttribute,
4  ChangeDetectionStrategy,
5  Component,
6  computed,
7  input,
8  model,
9  type TemplateRef,
10  ViewEncapsulation,
11} from '@angular/core';
12 
13import { NgIcon, provideIcons } from '@ng-icons/core';
14import { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide';
15import type { ClassValue } from 'clsx';
16 
17import {
18  ZardButtonComponent,
19  type ZardButtonSizeVariants,
20  type ZardButtonTypeVariants,
21} from '@/shared/components/button';
22import {
23  paginationContentVariants,
24  paginationEllipsisVariants,
25  paginationNextVariants,
26  paginationPreviousVariants,
27  paginationVariants,
28} from '@/shared/components/pagination/pagination.variants';
29import { mergeClasses } from '@/shared/utils/merge-classes';
30 
31type PaginationItemSizeType = Exclude<ZardButtonSizeVariants, 'default' | 'xs' | 'sm' | 'lg'>;
32type PaginationNavSizeType = Exclude<ZardButtonSizeVariants, 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg'>;
33 
34@Component({
35  selector: 'ul[z-pagination-content]',
36  template: `
37    <ng-content />
38  `,
39  changeDetection: ChangeDetectionStrategy.OnPush,
40  encapsulation: ViewEncapsulation.None,
41  host: {
42    'data-slot': 'pagination-content',
43    '[class]': 'classes()',
44  },
45  exportAs: 'zPaginationContent',
46})
47export class ZardPaginationContentComponent {
48  readonly class = input<ClassValue>('');
49 
50  protected readonly classes = computed(() => mergeClasses(paginationContentVariants(), this.class()));
51}
52 
53@Component({
54  selector: 'li[z-pagination-item]',
55  template: `
56    <ng-content />
57  `,
58  changeDetection: ChangeDetectionStrategy.OnPush,
59  encapsulation: ViewEncapsulation.None,
60  host: {
61    'data-slot': 'pagination-item',
62  },
63  exportAs: 'zPaginationItem',
64})
65export class ZardPaginationItemComponent {}
66// Structural wrapper component for pagination items (<li>). No inputs required.
67 
68@Component({
69  selector: 'button[z-pagination-button], a[z-pagination-button]',
70  imports: [ZardButtonComponent],
71  template: `
72    <z-button
73      [attr.data-active]="zActive() || null"
74      [class]="class()"
75      [zDisabled]="zDisabled()"
76      [zSize]="zSize()"
77      [zType]="zType()"
78    >
79      <ng-content />
80    </z-button>
81  `,
82  changeDetection: ChangeDetectionStrategy.OnPush,
83  encapsulation: ViewEncapsulation.None,
84  host: {
85    'data-slot': 'pagination-button',
86  },
87  exportAs: 'zPaginationButton',
88})
89export class ZardPaginationButtonComponent {
90// … truncated