Pagination

Preview

<esa-pagination total-items="237"></esa-pagination>

<script>
  const p = document.querySelector('esa-pagination');
  p.pageSizeOptions = [10, 25, 50, 100];
  p.addEventListener('pagechange', (e) => console.log(e.detail));
</script>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-pagination';

@Component({
  selector: 'app-pagination-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-pagination
      total-items="237"
      [pageSizeOptions]="pageSizeOptions"
      (pagechange)="onPagechange($event)"
    ></esa-pagination>
  `,
})
export class PaginationDemo {
  pageSizeOptions = [10, 25, 50, 100];

  onPagechange(event: Event) {
    const e = event as CustomEvent;
    console.log(e.detail);
  }
}

Variants

Compact form — hide the page-size selector and the first/last jump buttons for tighter footers.

<esa-pagination
  total-items="80"
  page-size="20"
  show-page-size-selector="false"
  show-first-last-buttons="false"
></esa-pagination>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-pagination';

@Component({
  selector: 'app-pagination-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-pagination
      total-items="80"
      page-size="20"
      show-page-size-selector="false"
      show-first-last-buttons="false"
    ></esa-pagination>
  `,
})
export class PaginationDemo {}

States

Disabled — all controls are dimmed and inert.

<esa-pagination total-items="100" disabled></esa-pagination>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-pagination';

@Component({
  selector: 'app-pagination-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <esa-pagination total-items="100" disabled></esa-pagination>
  `,
})
export class PaginationDemo {}

API

Events

page-size-options is an array property — set it in JS, not as an attribute. The range label is derived as "start – end of total" ("0 of 0" when empty).

Accessibility

• Wraps controls in role="navigation" with aria-label="Pagination".
• Each control button has a descriptive aria-label (First / Previous / Next / Last page).
• The page-size selector is a native labeled <select>.
• Boundary buttons disable at the first/last page rather than wrapping.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.