@triptease/tt-paginator 1.0.1

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtPaginator.js

@@ -0,0 +1,95 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtPaginator = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const page_range_js_1 = require("./page-range.js");
+const styles_js_1 = require("./styles.js");
+class TtPaginator extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.totalRows = 0;
+        this.pageSize = 10;
+        this.currentPage = 1;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalRows / this.pageSize);
+    }
+    willUpdate(changed) {
+        if (changed.has('totalRows') || changed.has('pageSize')) {
+            this.currentPage = 1;
+        }
+    }
+    handleKeyDown(e) {
+        const keyMap = {
+            ArrowRight: this.currentPage + 1,
+            ArrowLeft: this.currentPage - 1,
+            Home: 1,
+            End: this.totalPages,
+        };
+        const targetPage = keyMap[e.key];
+        if (targetPage === undefined)
+            return;
+        e.preventDefault();
+        this.goToPage(targetPage);
+    }
+    render() {
+        if (this.totalPages <= 1)
+            return lit_1.nothing;
+        const range = (0, page_range_js_1.computePageRange)(this.currentPage, this.totalPages);
+        return (0, lit_1.html) `
+      <nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
+        ${this.renderNavButton('Go to first page', 'First', 1, this.currentPage === 1)}
+        ${this.renderNavButton('Go to previous page', 'Previous', this.currentPage - 1, this.currentPage === 1)}
+        ${range.map((page) => (0, lit_1.html) `
+            <button
+              data-page=${page}
+              data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
+              aria-label="Go to page ${page}"
+              aria-current=${page === this.currentPage ? 'page' : 'false'}
+              @click=${() => this.goToPage(page)}
+            >
+              ${page}
+            </button>
+          `)}
+        ${this.renderNavButton('Go to next page', 'Next', this.currentPage + 1, this.currentPage === this.totalPages)}
+        ${this.renderNavButton('Go to last page', 'Last', this.totalPages, this.currentPage === this.totalPages)}
+      </nav>
+    `;
+    }
+    renderNavButton(label, text, targetPage, disabled) {
+        return (0, lit_1.html) `
+      <button data-theme="tertiary" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>
+        ${text}
+      </button>
+    `;
+    }
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages || page === this.currentPage)
+            return;
+        this.currentPage = page;
+        this.dispatchEvent(new CustomEvent('page-change', {
+            detail: { page: this.currentPage },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+exports.TtPaginator = TtPaginator;
+TtPaginator.styles = styles_js_1.styles;
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, attribute: 'total-rows' })
+], TtPaginator.prototype, "totalRows", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number, attribute: 'page-size' })
+], TtPaginator.prototype, "pageSize", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtPaginator.prototype, "currentPage", void 0);
+//# sourceMappingURL=TtPaginator.js.map

package/dist/cjs/src/TtPaginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { computePageRange } from './page-range.js';\nimport { styles } from './styles.js';\n\nexport class TtPaginator extends LitElement {\n  static styles = styles;\n\n  @property({ type: Number, attribute: 'total-rows' })\n  totalRows = 0;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  @state()\n  private currentPage = 1;\n\n  private get totalPages() {\n    return Math.ceil(this.totalRows / this.pageSize);\n  }\n\n  protected willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('totalRows') || changed.has('pageSize')) {\n      this.currentPage = 1;\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    const keyMap: Record<string, number> = {\n      ArrowRight: this.currentPage + 1,\n      ArrowLeft: this.currentPage - 1,\n      Home: 1,\n      End: this.totalPages,\n    };\n\n    const targetPage = keyMap[e.key];\n    if (targetPage === undefined) return;\n\n    e.preventDefault();\n    this.goToPage(targetPage);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return nothing;\n\n    const range = computePageRange(this.currentPage, this.totalPages);\n\n    return html`\n      <nav role=\"navigation\" aria-label=\"Pagination\" @keydown=${this.handleKeyDown}>\n        ${this.renderNavButton('Go to first page', 'First', 1, this.currentPage === 1)}\n        ${this.renderNavButton('Go to previous page', 'Previous', this.currentPage - 1, this.currentPage === 1)}\n        ${range.map(\n          (page) => html`\n            <button\n              data-page=${page}\n              data-theme=${page === this.currentPage ? 'primary' : 'secondary'}\n              aria-label=\"Go to page ${page}\"\n              aria-current=${page === this.currentPage ? 'page' : 'false'}\n              @click=${() => this.goToPage(page)}\n            >\n              ${page}\n            </button>\n          `\n        )}\n        ${this.renderNavButton('Go to next page', 'Next', this.currentPage + 1, this.currentPage === this.totalPages)}\n        ${this.renderNavButton('Go to last page', 'Last', this.totalPages, this.currentPage === this.totalPages)}\n      </nav>\n    `;\n  }\n\n  private renderNavButton(label: string, text: string, targetPage: number, disabled: boolean) {\n    return html`\n      <button data-theme=\"tertiary\" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>\n        ${text}\n      </button>\n    `;\n  }\n\n  private goToPage(page: number) {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    this.currentPage = page;\n    this.dispatchEvent(\n      new CustomEvent('page-change', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-paginator': TtPaginator;\n  }\n}\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtPaginator = void 0;
+var tt_paginator_js_1 = require("./tt-paginator.js");
+Object.defineProperty(exports, "TtPaginator", { enumerable: true, get: function () { return tt_paginator_js_1.TtPaginator; } });
+__exportStar(require("./types.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qDAAgD;AAAvC,8GAAA,WAAW,OAAA;AACpB,6CAA2B","sourcesContent":["export { TtPaginator } from './tt-paginator.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/page-range.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computePageRange = computePageRange;
+const WINDOW_SIZE = 5;
+function computePageRange(currentPage, totalPages) {
+    if (totalPages <= 0)
+        return [];
+    const clamped = Math.max(1, Math.min(currentPage, totalPages));
+    if (totalPages <= WINDOW_SIZE) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const half = Math.floor(WINDOW_SIZE / 2);
+    let start = clamped - half;
+    let end = clamped + half;
+    if (start < 1) {
+        start = 1;
+        end = WINDOW_SIZE;
+    }
+    else if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - WINDOW_SIZE + 1;
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+//# sourceMappingURL=page-range.js.map

package/dist/cjs/src/page-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-range.js","sourceRoot":"","sources":["../../../src/page-range.ts"],"names":[],"mappings":";;AAEA,4CAsBC;AAxBD,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB,SAAgB,gBAAgB,CAAC,WAAmB,EAAE,UAAkB;IACtE,IAAI,UAAU,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAE/B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/D,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IACzC,IAAI,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC;IAC3B,IAAI,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC;IAEzB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACd,KAAK,GAAG,CAAC,CAAC;QACV,GAAG,GAAG,WAAW,CAAC;IACpB,CAAC;SAAM,IAAI,GAAG,GAAG,UAAU,EAAE,CAAC;QAC5B,GAAG,GAAG,UAAU,CAAC;QACjB,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["const WINDOW_SIZE = 5;\n\nexport function computePageRange(currentPage: number, totalPages: number): number[] {\n  if (totalPages <= 0) return [];\n\n  const clamped = Math.max(1, Math.min(currentPage, totalPages));\n\n  if (totalPages <= WINDOW_SIZE) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const half = Math.floor(WINDOW_SIZE / 2);\n  let start = clamped - half;\n  let end = clamped + half;\n\n  if (start < 1) {\n    start = 1;\n    end = WINDOW_SIZE;\n  } else if (end > totalPages) {\n    end = totalPages;\n    start = totalPages - WINDOW_SIZE + 1;\n  }\n\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n}\n"]}

package/dist/cjs/src/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const lit_1 = require("lit");
+const lit_2 = require("@triptease/stylesheet/lit");
+exports.styles = [
+    lit_2.styles,
+    (0, lit_1.css) `
+    :host {
+      display: block;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--space-scale-0-5);
+    }
+
+    button {
+      min-width: 2rem;
+    }
+  `,
+];
+//# sourceMappingURL=styles.js.map

package/dist/cjs/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAC1B,mDAAiE;AAEpD,QAAA,MAAM,GAAG;IACpB,YAAU;IACV,IAAA,SAAG,EAAA;;;;;;;;;;;;;;GAcF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n  baseStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    nav {\n      display: flex;\n      align-items: center;\n      gap: var(--space-scale-0-5);\n    }\n\n    button {\n      min-width: 2rem;\n    }\n  `,\n];\n"]}

package/dist/cjs/src/tt-paginator.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtPaginator = void 0;
+const TtPaginator_js_1 = require("./TtPaginator.js");
+Object.defineProperty(exports, "TtPaginator", { enumerable: true, get: function () { return TtPaginator_js_1.TtPaginator; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-paginator')) {
+        window.customElements.define('tt-paginator', TtPaginator_js_1.TtPaginator);
+    }
+}
+//# sourceMappingURL=tt-paginator.js.map

package/dist/cjs/src/tt-paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-paginator.js","sourceRoot":"","sources":["../../../src/tt-paginator.ts"],"names":[],"mappings":";;;AAAA,qDAA+C;AAQtC,4FARA,4BAAW,OAQA;AANpB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,4BAAW,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC","sourcesContent":["import { TtPaginator } from './TtPaginator.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-paginator')) {\n    window.customElements.define('tt-paginator', TtPaginator);\n  }\n}\n\nexport { TtPaginator };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtPaginator } from './TtPaginator.js';\n\ninterface TtPaginatorExternalAttributes {\n  'total-rows'?: number;\n  'page-size'?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-paginator': TtPaginator;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-paginator': TtPaginatorExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-paginator': TtPaginatorExternalAttributes & {\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/Styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult[];

package/dist/esm/src/Styles.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+import { styles as baseStyles } from '@triptease/stylesheet/lit';
+export const styles = [
+    baseStyles,
+    css `
+    :host {
+      display: block;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--space-scale-0-5);
+    }
+
+    button {
+      min-width: 2rem;
+    }
+  `,
+];
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;GAcF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n  baseStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    nav {\n      display: flex;\n      align-items: center;\n      gap: var(--space-scale-0-5);\n    }\n\n    button {\n      min-width: 2rem;\n    }\n  `,\n];\n"]}

package/dist/esm/src/TtPaginator.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, nothing } from 'lit';
+export declare class TtPaginator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    totalRows: number;
+    pageSize: number;
+    private currentPage;
+    private get totalPages();
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private handleKeyDown;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private renderNavButton;
+    private goToPage;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tt-paginator': TtPaginator;
+    }
+}

package/dist/esm/src/TtPaginator.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { computePageRange } from './page-range.js';
+import { styles } from './styles.js';
+export class TtPaginator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.totalRows = 0;
+        this.pageSize = 10;
+        this.currentPage = 1;
+    }
+    get totalPages() {
+        return Math.ceil(this.totalRows / this.pageSize);
+    }
+    willUpdate(changed) {
+        if (changed.has('totalRows') || changed.has('pageSize')) {
+            this.currentPage = 1;
+        }
+    }
+    handleKeyDown(e) {
+        const keyMap = {
+            ArrowRight: this.currentPage + 1,
+            ArrowLeft: this.currentPage - 1,
+            Home: 1,
+            End: this.totalPages,
+        };
+        const targetPage = keyMap[e.key];
+        if (targetPage === undefined)
+            return;
+        e.preventDefault();
+        this.goToPage(targetPage);
+    }
+    render() {
+        if (this.totalPages <= 1)
+            return nothing;
+        const range = computePageRange(this.currentPage, this.totalPages);
+        return html `
+      <nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
+        ${this.renderNavButton('Go to first page', 'First', 1, this.currentPage === 1)}
+        ${this.renderNavButton('Go to previous page', 'Previous', this.currentPage - 1, this.currentPage === 1)}
+        ${range.map((page) => html `
+            <button
+              data-page=${page}
+              data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
+              aria-label="Go to page ${page}"
+              aria-current=${page === this.currentPage ? 'page' : 'false'}
+              @click=${() => this.goToPage(page)}
+            >
+              ${page}
+            </button>
+          `)}
+        ${this.renderNavButton('Go to next page', 'Next', this.currentPage + 1, this.currentPage === this.totalPages)}
+        ${this.renderNavButton('Go to last page', 'Last', this.totalPages, this.currentPage === this.totalPages)}
+      </nav>
+    `;
+    }
+    renderNavButton(label, text, targetPage, disabled) {
+        return html `
+      <button data-theme="tertiary" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>
+        ${text}
+      </button>
+    `;
+    }
+    goToPage(page) {
+        if (page < 1 || page > this.totalPages || page === this.currentPage)
+            return;
+        this.currentPage = page;
+        this.dispatchEvent(new CustomEvent('page-change', {
+            detail: { page: this.currentPage },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+TtPaginator.styles = styles;
+__decorate([
+    property({ type: Number, attribute: 'total-rows' })
+], TtPaginator.prototype, "totalRows", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], TtPaginator.prototype, "pageSize", void 0);
+__decorate([
+    state()
+], TtPaginator.prototype, "currentPage", void 0);
+//# sourceMappingURL=TtPaginator.js.map

package/dist/esm/src/TtPaginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { computePageRange } from './page-range.js';\nimport { styles } from './styles.js';\n\nexport class TtPaginator extends LitElement {\n  static styles = styles;\n\n  @property({ type: Number, attribute: 'total-rows' })\n  totalRows = 0;\n\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  @state()\n  private currentPage = 1;\n\n  private get totalPages() {\n    return Math.ceil(this.totalRows / this.pageSize);\n  }\n\n  protected willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('totalRows') || changed.has('pageSize')) {\n      this.currentPage = 1;\n    }\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    const keyMap: Record<string, number> = {\n      ArrowRight: this.currentPage + 1,\n      ArrowLeft: this.currentPage - 1,\n      Home: 1,\n      End: this.totalPages,\n    };\n\n    const targetPage = keyMap[e.key];\n    if (targetPage === undefined) return;\n\n    e.preventDefault();\n    this.goToPage(targetPage);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return nothing;\n\n    const range = computePageRange(this.currentPage, this.totalPages);\n\n    return html`\n      <nav role=\"navigation\" aria-label=\"Pagination\" @keydown=${this.handleKeyDown}>\n        ${this.renderNavButton('Go to first page', 'First', 1, this.currentPage === 1)}\n        ${this.renderNavButton('Go to previous page', 'Previous', this.currentPage - 1, this.currentPage === 1)}\n        ${range.map(\n          (page) => html`\n            <button\n              data-page=${page}\n              data-theme=${page === this.currentPage ? 'primary' : 'secondary'}\n              aria-label=\"Go to page ${page}\"\n              aria-current=${page === this.currentPage ? 'page' : 'false'}\n              @click=${() => this.goToPage(page)}\n            >\n              ${page}\n            </button>\n          `\n        )}\n        ${this.renderNavButton('Go to next page', 'Next', this.currentPage + 1, this.currentPage === this.totalPages)}\n        ${this.renderNavButton('Go to last page', 'Last', this.totalPages, this.currentPage === this.totalPages)}\n      </nav>\n    `;\n  }\n\n  private renderNavButton(label: string, text: string, targetPage: number, disabled: boolean) {\n    return html`\n      <button data-theme=\"tertiary\" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>\n        ${text}\n      </button>\n    `;\n  }\n\n  private goToPage(page: number) {\n    if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n    this.currentPage = page;\n    this.dispatchEvent(\n      new CustomEvent('page-change', {\n        detail: { page: this.currentPage },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-paginator': TtPaginator;\n  }\n}\n"]}

package/dist/esm/src/index.d.ts

@@ -0,0 +1,2 @@
+export { TtPaginator } from './tt-paginator.js';
+export * from './types.js';

package/dist/esm/src/index.js

@@ -0,0 +1,3 @@
+export { TtPaginator } from './tt-paginator.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,cAAc,YAAY,CAAC","sourcesContent":["export { TtPaginator } from './tt-paginator.js';\nexport * from './types.js';\n"]}

package/dist/esm/src/page-range.d.ts

@@ -0,0 +1 @@
+export declare function computePageRange(currentPage: number, totalPages: number): number[];

package/dist/esm/src/page-range.js

@@ -0,0 +1,22 @@
+const WINDOW_SIZE = 5;
+export function computePageRange(currentPage, totalPages) {
+    if (totalPages <= 0)
+        return [];
+    const clamped = Math.max(1, Math.min(currentPage, totalPages));
+    if (totalPages <= WINDOW_SIZE) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const half = Math.floor(WINDOW_SIZE / 2);
+    let start = clamped - half;
+    let end = clamped + half;
+    if (start < 1) {
+        start = 1;
+        end = WINDOW_SIZE;
+    }
+    else if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - WINDOW_SIZE + 1;
+    }
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+//# sourceMappingURL=page-range.js.map

package/dist/esm/src/page-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-range.js","sourceRoot":"","sources":["../../../src/page-range.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,UAAkB;IACtE,IAAI,UAAU,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAE/B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/D,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;IACzC,IAAI,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC;IAC3B,IAAI,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC;IAEzB,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;QACd,KAAK,GAAG,CAAC,CAAC;QACV,GAAG,GAAG,WAAW,CAAC;IACpB,CAAC;SAAM,IAAI,GAAG,GAAG,UAAU,EAAE,CAAC;QAC5B,GAAG,GAAG,UAAU,CAAC;QACjB,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["const WINDOW_SIZE = 5;\n\nexport function computePageRange(currentPage: number, totalPages: number): number[] {\n  if (totalPages <= 0) return [];\n\n  const clamped = Math.max(1, Math.min(currentPage, totalPages));\n\n  if (totalPages <= WINDOW_SIZE) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const half = Math.floor(WINDOW_SIZE / 2);\n  let start = clamped - half;\n  let end = clamped + half;\n\n  if (start < 1) {\n    start = 1;\n    end = WINDOW_SIZE;\n  } else if (end > totalPages) {\n    end = totalPages;\n    start = totalPages - WINDOW_SIZE + 1;\n  }\n\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n}\n"]}

package/dist/esm/src/style.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/style.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=style.js.map

package/dist/esm/src/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/style.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/esm/src/tt-paginator.d.ts

@@ -0,0 +1,2 @@
+import { TtPaginator } from './TtPaginator.js';
+export { TtPaginator };

package/dist/esm/src/tt-paginator.js

@@ -0,0 +1,8 @@
+import { TtPaginator } from './TtPaginator.js';
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-paginator')) {
+        window.customElements.define('tt-paginator', TtPaginator);
+    }
+}
+export { TtPaginator };
+//# sourceMappingURL=tt-paginator.js.map

package/dist/esm/src/tt-paginator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-paginator.js","sourceRoot":"","sources":["../../../src/tt-paginator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { TtPaginator } from './TtPaginator.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-paginator')) {\n    window.customElements.define('tt-paginator', TtPaginator);\n  }\n}\n\nexport { TtPaginator };\n"]}

package/dist/esm/src/types.d.ts

@@ -0,0 +1,29 @@
+import { TtPaginator } from './TtPaginator.js';
+interface TtPaginatorExternalAttributes {
+    'total-rows'?: number;
+    'page-size'?: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tt-paginator': TtPaginator;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'tt-paginator': TtPaginatorExternalAttributes & {
+                style?: string;
+            };
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'tt-paginator': TtPaginatorExternalAttributes & {
+                    key?: string;
+                    ref?: React.Ref<unknown>;
+                    style?: React.CSSProperties;
+                };
+            }
+        }
+    }
+}
+export {};

package/dist/esm/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtPaginator } from './TtPaginator.js';\n\ninterface TtPaginatorExternalAttributes {\n  'total-rows'?: number;\n  'page-size'?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-paginator': TtPaginator;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-paginator': TtPaginatorExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-paginator': TtPaginatorExternalAttributes & {\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@triptease/tt-paginator",
+  "description": "Numeric pagination web component",
+  "license": "MIT",
+  "author": "@triptease",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    },
+    "./types": {
+      "types": "./dist/esm/src/types.d.ts",
+      "import": "./dist/esm/src/types.js",
+      "require": "./dist/cjs/src/types.js"
+    }
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "yarn build:node && yarn build:web && yarn analyze --exclude dist",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
+    "build:node:watch": "tsc --watch",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && yarn analyze --exclude dist",
+    "test": "yarn playwright install && vitest run --config=./vitest.browser.config.mjs",
+    "test:watch": "vitest --config=./vitest.browser.config.mjs"
+  },
+  "dependencies": {
+    "@triptease/stylesheet": "2.1.0",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "concurrently": "^8.2.2",
+    "playwright": "^1.57.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3"
+  },
+  "customElements": "custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  }
+}