{
  "$schema": "https://ui.adrianub.dev/schema/registry-item.json",
  "author": "Adrián UB (https://ui.adrianub.dev)",
  "name": "pagination",
  "type": "registry:ui",
  "files": [
    {
      "path": "ui/pagination.ts",
      "content": "import type { UbButtonSize } from '~/registry/new-york/ui/button'\nimport { booleanAttribute, Component, computed, Directive, effect, inject, input } from '@angular/core'\nimport { NgIcon, provideIcons } from '@ng-icons/core'\nimport { lucideChevronLeft, lucideChevronRight, lucideEllipsis } from '@ng-icons/lucide'\nimport { cn } from '~/lib/utils'\nimport { buttonVariants } from '~/registry/new-york/ui/button'\n\n@Directive({\n  standalone: true,\n  selector: 'nav[ubPagination]',\n  host: {\n    'role': 'navigation',\n    'aria-label': 'pagination',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbPaginationDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('mx-auto flex w-full justify-center', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'ul[ubPaginationContent]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbPaginationContentDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('flex flex-row items-center gap-1', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: 'li[ubPaginationItem]',\n  host: {\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbPaginationItemDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('', this.class()))\n}\n\n@Directive({\n  standalone: true,\n  selector: '[ubPaginationLink]',\n  host: {\n    '[aria-current]': 'isActive() ? \"page\" : undefined',\n    '[class]': 'computedClass()',\n  },\n})\nexport class UbPaginationLinkDirective {\n  class = input<string>()\n  isActive = input(false, { transform: booleanAttribute })\n  size = input<UbButtonSize>('icon')\n  computedClass = computed(() => cn(\n    buttonVariants({\n      variant: this.isActive() ? 'outline' : 'ghost',\n      size: this.size(),\n    }),\n    this.class(),\n  ))\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubPaginationPrevious]',\n  imports: [NgIcon],\n  hostDirectives: [UbPaginationLinkDirective],\n  host: {\n    '[class]': 'computedClass()',\n    'aria-label': 'Go to previous page',\n  },\n  providers: [provideIcons({ lucideChevronLeft })],\n  template: `\n  <ng-icon name=\"lucideChevronLeft\" class=\"w-4 h-4\"></ng-icon>\n  <span>Previous</span>\n  `,\n})\nexport class UbPaginationPreviousDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('gap-1 pl-2.5', this.class()))\n  protected size = input<UbButtonSize>('default')\n  private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })\n\n  setConfig = effect(() => {\n    this.ubPaginationLinkDirective.size = this.size\n  })\n}\n\n@Component({\n  standalone: true,\n  selector: '[ubPaginationNext]',\n  imports: [NgIcon],\n  providers: [provideIcons({ lucideChevronRight })],\n  hostDirectives: [UbPaginationLinkDirective],\n  host: {\n    '[class]': 'computedClass()',\n    'aria-label': 'Go to next page',\n  },\n  template: `\n  <span>Next</span>\n  <ng-icon name=\"lucideChevronRight\" class=\"w-4 h-4\"></ng-icon>\n  `,\n})\nexport class UbPaginationNextDirective {\n  class = input<string>()\n  computedClass = computed(() => cn('gap-1 pr-2.5', this.class()))\n  protected size = input<UbButtonSize>('default')\n  private ubPaginationLinkDirective = inject(UbPaginationLinkDirective, { host: true })\n\n  setConfig = effect(() => {\n    this.ubPaginationLinkDirective.size = this.size\n  })\n}\n\n@Component({\n  standalone: true,\n  imports: [NgIcon],\n  providers: [provideIcons({ lucideEllipsis })],\n  selector: 'ub-pagination-ellipsis',\n  template: `\n  <span\n    aria-hidden=\"true\"\n    [class]=\"computedClass()\"\n  >\n    <ng-icon name=\"lucideEllipsis\" class=\"w-4 h-4\"></ng-icon>\n    <span class=\"sr-only\">More pages</span>\n  </span>\n  `,\n})\nexport class UbPaginationEllipsisComponent {\n  class = input<string>()\n  computedClass = computed(() => cn('flex h-9 w-9 items-center justify-center', this.class()))\n}\n",
      "type": "registry:ui"
    }
  ]
}