@nysds/nys-pagination 1.13.0 → 1.13.1
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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement as p, unsafeCSS as h, html as u } from "lit";
|
|
2
2
|
import { property as l } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as v } from "lit/directives/if-defined.js";
|
|
4
|
-
const f = ':host{--_nys-pagination-width: fit-content;--_nys-pagination-height: var(--nys-size-500, 40px);--_nys-pagination-radius: var(--nys-radius-xl, 12px);--_nys-pagination-gap: var(--nys-space-100, 8px);--_nys-pagination-font-size: var(--nys-font-size-ui-md, 16px);--_nys-pagination-font-weight: var(--nys-font-weight-semibold, 600);--_nys-pagination-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-pagination-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) )}.nys-pagination{width:var(--_nys-pagination-width);height:var(--_nys-pagination-height);border-radius:var(--_nys-pagination-radius);display:flex;align-items:center;justify-content:center;gap:var(--_nys-pagination-gap);font-family:var(--_nys-pagination-font-family);font-size:var(--_nys-pagination-font-size);font-weight:var(--_nys-pagination-font-weight);line-height:var(--_nys-pagination-line-height)}nys-button{--_nys-button-height: var(--_nys-pagination-height);--_nys-button-border-width: var(--nys-border-width-sm, 1px);--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--x: var(--nys-space-200, 16px)}nys-button[variant=outline]{--nys-button-background-color: var(--nys-color-ink-reverse, #
|
|
4
|
+
const f = ':host{--_nys-pagination-width: fit-content;--_nys-pagination-height: var(--nys-size-500, 40px);--_nys-pagination-radius: var(--nys-radius-xl, 12px);--_nys-pagination-gap: var(--nys-space-100, 8px);--_nys-pagination-font-size: var(--nys-font-size-ui-md, 16px);--_nys-pagination-font-weight: var(--nys-font-weight-semibold, 600);--_nys-pagination-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-pagination-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) )}.nys-pagination{width:var(--_nys-pagination-width);height:var(--_nys-pagination-height);border-radius:var(--_nys-pagination-radius);display:flex;align-items:center;justify-content:center;gap:var(--_nys-pagination-gap);font-family:var(--_nys-pagination-font-family);font-size:var(--_nys-pagination-font-size);font-weight:var(--_nys-pagination-font-weight);line-height:var(--_nys-pagination-line-height)}nys-button{--_nys-button-height: var(--_nys-pagination-height);--_nys-button-border-width: var(--nys-border-width-sm, 1px);--_nys-button-border-radius--start: var(--nys-radius-md, 4px);--_nys-button-border-radius--end: var(--nys-radius-md, 4px);--_nys-button-padding--x: var(--nys-space-200, 16px)}nys-button[variant=outline]{--nys-button-background-color: var(--nys-color-ink-reverse, #ffffff);--nys-button-background-color--hover: var(--nys-color-neutral-10, #f6f6f6);--nys-button-background-color--active: var(--nys-color-neutral-50, #ededed);--nys-button-border-color: var(--nys-color-neutral-200, #bec0c1);--nys-button-border-color--hover: var(--nys-color-neutral-600, #62666a);--nys-button-border-color--active: var(--nys-color-neutral-900, #1b1b1b);--nys-button-color: var(--nys-color-link, #004dd1);--nys-button-color--hover: var(--nys-color-link-strong, #003ba1);--nys-button-color--active: var(--nys-color-link-strong, #003ba1)}nys-button[variant=filled]{--nys-button-background-color: var(--nys-color-link, #004dd1);--nys-button-background-color--hover: var(--nys-color-link-strong, #003ba1);--nys-button-background-color--active: var( --nys-color-link-strongest, #002971 );--nys-button-border-color: var(--nys-color-link, #004dd1);--nys-button-border-color--hover: var(--nys-color-link-strong, #003ba1);--nys-button-border-color--active: var(--nys-color-link-strongest, #002971);--nys-button-color: var(--nys-color-ink-reverse, #fff);--nys-button-color--hover: var(--nys-color-ink-reverse, #fff);--nys-button-color--active: var(--nys-color-ink-reverse, #fff)}nys-button#previous,nys-button#next,nys-button#previous--mobile,nys-button#next--mobile{--nys-button-color: var(--nys-color-text, #1b1b1b);--nys-button-color--hover: var(--nys-color-text, #1b1b1b);--nys-button-color--active: var(--nys-color-text, #1b1b1b);--_nys-button-padding--x: var(--nys-space-150, 12px)}nys-button#previous--mobile,nys-button#next--mobile{display:none}nys-button.spacer{--nys-button-border-color: transparent;--nys-button-border-color--hover: transparent;--nys-button-border-color--active: transparent;--nys-button-background-color: transparent;--nys-button-background-color--hover: transparent;--nys-button-background-color--active: transparent;--nys-button-color: var(--nys-color-text, #1b1b1b);--nys-button-color--hover: var(--nys-color-text, #1b1b1b);--nys-button-color--active: var(--nys-color-text, #1b1b1b);--_nys-button-padding--x: var(--nys-space-1px, 1px);--_nys-button-cursor: default}:host([currentPage="3"]) nys-button#first-spacer,:host([_twoBeforeLast]) nys-button#last-spacer{display:none}@media(min-width:0)and (max-width:767px){nys-button#prev-page,nys-button#next-page{display:none}:host([currentPage="3"]) nys-button#first-spacer,:host([_twoBeforeLast]) nys-button#last-spacer{display:block}nys-button#previous--mobile,nys-button#next--mobile{display:block}nys-button#previous,nys-button#next{display:none}}';
|
|
5
5
|
var P = Object.defineProperty, c = (b, t, n, s) => {
|
|
6
6
|
for (var r = void 0, e = b.length - 1, i; e >= 0; e--)
|
|
7
7
|
(i = b[e]) && (r = i(t, n, r) || r);
|
|
@@ -42,6 +42,7 @@ const y = class y extends p {
|
|
|
42
42
|
ariaLabel="Page ${a}"
|
|
43
43
|
id=${v(d)}
|
|
44
44
|
variant=${this.currentPage === a ? "filled" : "outline"}
|
|
45
|
+
size="sm"
|
|
45
46
|
@nys-click="${() => this._handlePageClick(a)}"
|
|
46
47
|
></nys-button>
|
|
47
48
|
`);
|
|
@@ -52,6 +53,7 @@ const y = class y extends p {
|
|
|
52
53
|
class="spacer"
|
|
53
54
|
tabindex="-1"
|
|
54
55
|
id=${a}
|
|
56
|
+
size="sm"
|
|
55
57
|
></nys-button>`
|
|
56
58
|
);
|
|
57
59
|
}, e = this.totalPages, i = this.currentPage - 1, g = this.currentPage + 1;
|
|
@@ -77,6 +79,7 @@ const y = class y extends p {
|
|
|
77
79
|
label="Previous"
|
|
78
80
|
prefixIcon="chevron_left"
|
|
79
81
|
variant="outline"
|
|
82
|
+
size="sm"
|
|
80
83
|
?disabled=${this.currentPage === 1}
|
|
81
84
|
@nys-click="${() => this._handlePageClick(this.currentPage - 1)}"
|
|
82
85
|
></nys-button>
|
|
@@ -85,6 +88,7 @@ const y = class y extends p {
|
|
|
85
88
|
prefixIcon="chevron_left"
|
|
86
89
|
ariaLabel="Previous Page"
|
|
87
90
|
variant="outline"
|
|
91
|
+
size="sm"
|
|
88
92
|
?disabled=${this.currentPage === 1}
|
|
89
93
|
@nys-click="${() => this._handlePageClick(this.currentPage - 1)}"
|
|
90
94
|
></nys-button>
|
|
@@ -94,6 +98,7 @@ const y = class y extends p {
|
|
|
94
98
|
label="Next"
|
|
95
99
|
suffixIcon="chevron_right"
|
|
96
100
|
variant="outline"
|
|
101
|
+
size="sm"
|
|
97
102
|
?disabled=${this.currentPage === this.totalPages}
|
|
98
103
|
@nys-click="${() => this._handlePageClick(this.currentPage + 1)}"
|
|
99
104
|
></nys-button>
|
|
@@ -102,6 +107,7 @@ const y = class y extends p {
|
|
|
102
107
|
suffixIcon="chevron_right"
|
|
103
108
|
ariaLabel="Next Page"
|
|
104
109
|
variant="outline"
|
|
110
|
+
size="sm"
|
|
105
111
|
?disabled=${this.currentPage === this.totalPages}
|
|
106
112
|
@nys-click="${() => this._handlePageClick(this.currentPage + 1)}"
|
|
107
113
|
></nys-button>
|
|
@@ -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;\n\n/**\n *
|
|
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 * Page navigation with Previous/Next buttons and numbered page links. Auto-collapses with ellipses for many pages.\n *\n * Set `totalPages` and `currentPage` to control state. Listen to `nys-change` for page selection.\n * Hidden automatically when `totalPages` is 1. Responsive: shows compact controls on mobile.\n *\n * @summary Page navigation with numbered links, prev/next buttons, and responsive layout.\n * @element nys-pagination\n *\n * @fires nys-change - Fired when page changes. Detail: `{page}`.\n *\n * @example Basic pagination\n * ```html\n * <nys-pagination currentPage=\"1\" totalPages=\"10\"></nys-pagination>\n * ```\n */\n\nexport class NysPagination extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name attribute for form association. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Currently active page (1-indexed). Clamped to valid range. */\n @property({ type: Number, reflect: true }) currentPage = 1;\n\n /** Total number of pages. Must be at least 1. */\n @property({ type: Number, reflect: true }) totalPages = 1;\n\n /** Internal state for layout adjustments near the end. */\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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 size=\"sm\"\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.13.
|
|
3
|
+
"version": "1.13.1",
|
|
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.13.
|
|
26
|
+
"@nysds/nys-button": "^1.13.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|