@nysds/nys-pagination 1.12.0 → 1.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/nys-pagination.js +12 -4
- package/dist/nys-pagination.js.map +1 -1
- package/package.json +2 -2
package/dist/nys-pagination.js
CHANGED
|
@@ -9,7 +9,10 @@ var P = Object.defineProperty, c = (b, t, n, s) => {
|
|
|
9
9
|
};
|
|
10
10
|
let m = 0;
|
|
11
11
|
const y = class y extends p {
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Lifecycle Methods
|
|
14
|
+
* --------------------------------------------------------------------------
|
|
15
|
+
*/
|
|
13
16
|
constructor() {
|
|
14
17
|
super(), this.id = "", this.name = "", this.currentPage = 1, this.totalPages = 1, this._twoBeforeLast = !1;
|
|
15
18
|
}
|
|
@@ -21,11 +24,13 @@ const y = class y extends p {
|
|
|
21
24
|
s !== this._twoBeforeLast && (this._twoBeforeLast = s);
|
|
22
25
|
}
|
|
23
26
|
}
|
|
24
|
-
// Generate a unique ID if one is not provided
|
|
25
27
|
connectedCallback() {
|
|
26
28
|
super.connectedCallback(), this.id || (this.id = `nys-pagination-${Date.now()}-${m++}`);
|
|
27
29
|
}
|
|
28
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Functions
|
|
32
|
+
* --------------------------------------------------------------------------
|
|
33
|
+
*/
|
|
29
34
|
_clampPage(t) {
|
|
30
35
|
return t < 1 ? 1 : t > this.totalPages ? this.totalPages : t;
|
|
31
36
|
}
|
|
@@ -52,7 +57,10 @@ const y = class y extends p {
|
|
|
52
57
|
}, e = this.totalPages, i = this.currentPage - 1, g = this.currentPage + 1;
|
|
53
58
|
return n(1), this.currentPage > 2 && s("first-spacer"), i > 1 && n(i, "prev-page"), this.currentPage !== 1 && this.currentPage !== e && n(this.currentPage, "current-page"), g < e && n(g, "next-page"), this.currentPage < e - 1 && s("last-spacer"), e > 1 && n(e), t;
|
|
54
59
|
}
|
|
55
|
-
|
|
60
|
+
/**
|
|
61
|
+
* Event Handlers
|
|
62
|
+
* --------------------------------------------------------------------------
|
|
63
|
+
*/
|
|
56
64
|
_handlePageClick(t) {
|
|
57
65
|
this.currentPage = this._clampPage(t), this.dispatchEvent(
|
|
58
66
|
new CustomEvent("nys-change", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-pagination.js","sources":["../src/nys-pagination.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-pagination.scss?inline\";\n\nlet componentIdCounter = 0
|
|
1
|
+
{"version":3,"file":"nys-pagination.js","sources":["../src/nys-pagination.ts"],"sourcesContent":["import { LitElement, TemplateResult, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-pagination.scss?inline\";\n\nlet componentIdCounter = 0;\n\n/**\n * `<nys-pagination>` renders page navigation controls.\n *\n * Displays previous and next buttons, page numbers, and ellipses\n * when pages are skipped. Handles page bounds automatically.\n *\n * @fires nys-change - Fired when the page changes\n * detail: { page: number }\n */\n\nexport class NysPagination extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: Number, reflect: true }) currentPage = 1;\n @property({ type: Number, reflect: true }) totalPages = 1;\n @property({ type: Boolean, reflect: true }) _twoBeforeLast = false;\n\n /**\n * Lifecycle Methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n willUpdate(changedProps: Map<string, unknown>) {\n if (this.totalPages < 1) this.totalPages = 1; //ensure totalPages is at least 1\n\n if (changedProps.has(\"currentPage\") || changedProps.has(\"totalPages\")) {\n const clamped = this._clampPage(this.currentPage);\n if (clamped !== this.currentPage) {\n this.currentPage = clamped;\n }\n\n const twoBefore = this.currentPage === this.totalPages - 2;\n if (twoBefore !== this._twoBeforeLast) {\n this._twoBeforeLast = twoBefore;\n }\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-pagination-${Date.now()}-${componentIdCounter++}`;\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _clampPage(page: number): number {\n if (page < 1) return 1;\n if (page > this.totalPages) return this.totalPages;\n return page;\n }\n\n private renderPageButtons() {\n const buttons: TemplateResult[] = [];\n\n const addPageButton = (page: number, id?: string) => {\n buttons.push(html`\n <nys-button\n label=${String(page)}\n ariaLabel=\"Page ${page}\"\n id=${ifDefined(id)}\n variant=${this.currentPage === page ? \"filled\" : \"outline\"}\n @nys-click=\"${() => this._handlePageClick(page)}\"\n ></nys-button>\n `);\n };\n\n const addSpacer = (id: string) => {\n buttons.push(\n html`<nys-button\n label=\"...\"\n class=\"spacer\"\n tabindex=\"-1\"\n id=${id}\n ></nys-button>`,\n );\n };\n\n const firstPage = 1;\n const lastPage = this.totalPages;\n const prev = this.currentPage - 1;\n const next = this.currentPage + 1;\n\n // Always show first page\n addPageButton(firstPage);\n\n // Spacer if there's a gap between first and current/prev\n if (this.currentPage > 2) {\n addSpacer(\"first-spacer\");\n }\n\n // Show prev neighbor (desktop; can be hidden via CSS at mobile)\n if (prev > firstPage) {\n addPageButton(prev, \"prev-page\");\n }\n\n // Show current (only if not first/last, since they’re already rendered)\n if (this.currentPage !== firstPage && this.currentPage !== lastPage) {\n addPageButton(this.currentPage, \"current-page\");\n }\n\n // Show next neighbor (desktop; can be hidden via CSS at mobile)\n if (next < lastPage) {\n addPageButton(next, \"next-page\");\n }\n\n // Spacer if there's a gap between current/next and last\n if (this.currentPage < lastPage - 1) {\n addSpacer(\"last-spacer\");\n }\n\n // Always show last page if more than one\n if (lastPage > firstPage) {\n addPageButton(lastPage);\n }\n\n return buttons;\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _handlePageClick(page: number) {\n this.currentPage = this._clampPage(page);\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: { page: this.currentPage },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n // If only one page, render nothing\n if (this.totalPages <= 1) {\n return null;\n }\n\n return html`<div class=\"nys-pagination\">\n <nys-button\n id=\"previous\"\n label=\"Previous\"\n prefixIcon=\"chevron_left\"\n variant=\"outline\"\n ?disabled=${this.currentPage === 1}\n @nys-click=\"${() => this._handlePageClick(this.currentPage - 1)}\"\n ></nys-button>\n <nys-button\n id=\"previous--mobile\"\n prefixIcon=\"chevron_left\"\n ariaLabel=\"Previous Page\"\n variant=\"outline\"\n ?disabled=${this.currentPage === 1}\n @nys-click=\"${() => this._handlePageClick(this.currentPage - 1)}\"\n ></nys-button>\n ${this.renderPageButtons()}\n <nys-button\n id=\"next\"\n label=\"Next\"\n suffixIcon=\"chevron_right\"\n variant=\"outline\"\n ?disabled=${this.currentPage === this.totalPages}\n @nys-click=\"${() => this._handlePageClick(this.currentPage + 1)}\"\n ></nys-button>\n <nys-button\n id=\"next--mobile\"\n suffixIcon=\"chevron_right\"\n ariaLabel=\"Next Page\"\n variant=\"outline\"\n ?disabled=${this.currentPage === this.totalPages}\n @nys-click=\"${() => this._handlePageClick(this.currentPage + 1)}\"\n ></nys-button>\n </div>`;\n }\n /****************** 🪡 in the Haystack Release ******/\n /****************** designsystem@its.ny.gov ********/\n}\n\nif (!customElements.get(\"nys-pagination\")) {\n customElements.define(\"nys-pagination\", NysPagination);\n}\n"],"names":["componentIdCounter","_NysPagination","LitElement","changedProps","clamped","twoBefore","page","buttons","addPageButton","id","html","ifDefined","addSpacer","lastPage","prev","next","unsafeCSS","styles","NysPagination","__decorateClass","property"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-pagination",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "The Pagination component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-pagination.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer '*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-button": "^1.
|
|
26
|
+
"@nysds/nys-button": "^1.13.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|