Pagination

import { booleanAttribute, computed, Directive, input } from '@angular/core';
import { cn } from '@/lib/utils';
import { buttonVariants, type ButtonSize } from '@/ui/button/button';

/**
 * Page navigation for a list of results, as a `nav` landmark.
 *
 * @example
 * ```html
 * <nav ndPagination>
 *   <ul ndPaginationContent>
 *     <li ndPaginationItem>
 *       <a ndPaginationPrevious href="?page=1"><svg ndIcon="chevron-left"></svg><span>Previous</span></a>
 *     </li>
 *     <li ndPaginationItem><a ndPaginationLink href="?page=2" active>2</a></li>
 *     <li ndPaginationItem>
 *       <a ndPaginationNext href="?page=3"><span>Next</span><svg ndIcon="chevron-right"></svg></a>
 *     </li>
 *   </ul>
 * </nav>
 * ```
 */
@Directive({
  selector: 'nav[ndPagination]',
  host: {
    'data-slot': 'pagination',
    '[attr.aria-label]': 'label()',
    '[class]': 'classes()',
  },
})
export class Pagination {
  /** Name of the landmark. */
  readonly label = input('Pagination');

  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn('mx-auto flex w-full justify-center', this.class()),
  );
}

/**
 * The list of a pagination's links.
 *
 * @example
 * ```html
 * <ul ndPaginationContent>…</ul>
 * ```
 */
@Directive({
  selector: 'ul[ndPaginationContent]',
  host: { 'data-slot': 'pagination-content', '[class]': 'classes()' },
})
export class PaginationContent {
  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn('flex flex-row items-center gap-1', this.class()),
  );
}

/**
 * One entry of a pagination: a link, or an ellipsis.
 *
 * @example
 * ```html
 * <li ndPaginationItem>…</li>
 * ```
 */
@Directive({
  selector: 'li[ndPaginationItem]',
  host: { 'data-slot': 'pagination-item' },
})
export class PaginationItem {}

/**
 * A link to one page, styled as a ghost button, or an outline one for the
 * current page, which it marks `aria-current="page"`. On a `button`, it
 * calls your handler instead of navigating.
 *
 * @example
 * ```html
 * <a ndPaginationLink href="?page=2" active>2</a>
 * ```
 */
@Directive({
  selector: 'a[ndPaginationLink], button[ndPaginationLink]',
  host: {
    'data-slot': 'pagination-link',
    '[attr.aria-current]': 'active() ? "page" : null',
    '[attr.data-active]': 'active()',
    '[class]': 'classes()',
  },
})
export class PaginationLink {
  /** Whether it's the current page. */
  readonly active = input(false, { transform: booleanAttribute });

  /** Button size. */
  readonly size = input<ButtonSize>('icon');

  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      buttonVariants({
        variant: this.active() ? 'outline' : 'ghost',
        size: this.size(),
      }),
      this.class(),
    ),
  );
}

/**
 * The link to the previous page. Put a `chevron-left` icon and the word
 * "Previous" in it; the icon turns around in right-to-left layouts.
 *
 * @example
 * ```html
 * <a ndPaginationPrevious href="?page=1"><svg ndIcon="chevron-left"></svg><span>Previous</span></a>
 * ```
 */
@Directive({
  selector: 'a[ndPaginationPrevious], button[ndPaginationPrevious]',
  host: {
    'data-slot': 'pagination-link',
    'aria-label': 'Go to previous page',
    '[class]': 'classes()',
  },
})
export class PaginationPrevious {
  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      buttonVariants({ variant: 'ghost', size: 'default' }),
      'gap-1 px-2.5 sm:ps-2.5',
      'rtl:[&>svg]:rotate-180',
      this.class(),
    ),
  );
}

/**
 * The link to the next page. Put the word "Next" and a `chevron-right`
 * icon in it; the icon turns around in right-to-left layouts.
 *
 * @example
 * ```html
 * <a ndPaginationNext href="?page=3"><span>Next</span><svg ndIcon="chevron-right"></svg></a>
 * ```
 */
@Directive({
  selector: 'a[ndPaginationNext], button[ndPaginationNext]',
  host: {
    'data-slot': 'pagination-link',
    'aria-label': 'Go to next page',
    '[class]': 'classes()',
  },
})
export class PaginationNext {
  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      buttonVariants({ variant: 'ghost', size: 'default' }),
      'gap-1 px-2.5 sm:pe-2.5',
      'rtl:[&>svg]:rotate-180',
      this.class(),
    ),
  );
}

/**
 * Stands for pages left out of a long range; hidden from assistive
 * technology. Put an `ellipsis` icon in it.
 *
 * @example
 * ```html
 * <span ndPaginationEllipsis><svg ndIcon="ellipsis"></svg></span>
 * ```
 */
@Directive({
  selector: '[ndPaginationEllipsis]',
  host: {
    'data-slot': 'pagination-ellipsis',
    'aria-hidden': 'true',
    '[class]': 'classes()',
  },
})
export class PaginationEllipsis {
  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      'flex size-9 items-center justify-center',
      '[&>svg]:size-4',
      this.class(),
    ),
  );
}

import { computed, Directive, input } from '@angular/core';
import { NdButton } from '@ndop/primitives/button';
import { cn, variants, type VariantOf } from '@/lib/utils';

/**
 * Class table for {@link Button}; also usable to style other elements like
 * a button.
 */
export const buttonVariants = variants({
  base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50",
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
      destructive:
        'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
      outline:
        'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
      ghost:
        'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
      link: 'text-primary underline-offset-4 hover:underline',
    },
    size: {
      default: 'h-9 px-4 py-2 has-[>svg]:px-3',
      xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
      sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
      lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
      icon: 'size-9',
      'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
      'icon-sm': 'size-8',
      'icon-lg': 'size-10',
    },
  },
  defaults: { variant: 'default', size: 'default' },
});

/** Visual style of a {@link Button}. */
export type ButtonVariant = VariantOf<typeof buttonVariants, 'variant'>;

/** Size of a {@link Button}. */
export type ButtonSize = VariantOf<typeof buttonVariants, 'size'>;

/**
 * Styled button for a native `button` or an `a`, with the
 * `@ndop/primitives/button` behavior (safe default type, disabled links).
 *
 * @example
 * ```html
 * <button ndButton variant="outline" size="sm">Cancel</button>
 * <a ndButton variant="link" href="/docs">Docs</a>
 * ```
 */
@Directive({
  selector: 'button[ndButton], a[ndButton]',
  hostDirectives: [{ directive: NdButton, inputs: ['disabled'] }],
  host: {
    'data-slot': 'button',
    '[attr.data-variant]': 'variant()',
    '[attr.data-size]': 'size()',
    '[class]': 'classes()',
  },
})
export class Button {
  /** Visual style. */
  readonly variant = input<ButtonVariant>('default');

  /** Height, padding and icon size. */
  readonly size = input<ButtonSize>('default');

  /** Extra classes, merged last so they win. */
  readonly class = input('');

  protected readonly classes = computed(() =>
    cn(
      buttonVariants({ variant: this.variant(), size: this.size() }),
      this.class(),
    ),
  );
}