@nysds/nys-pagination 1.12.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.
@@ -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, #fff);--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}}';
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);
@@ -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
- // Lifecycle Methods
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
- // Functions
30
+ /**
31
+ * Functions
32
+ * --------------------------------------------------------------------------
33
+ */
29
34
  _clampPage(t) {
30
35
  return t < 1 ? 1 : t > this.totalPages ? this.totalPages : t;
31
36
  }
@@ -37,6 +42,7 @@ const y = class y extends p {
37
42
  ariaLabel="Page ${a}"
38
43
  id=${v(d)}
39
44
  variant=${this.currentPage === a ? "filled" : "outline"}
45
+ size="sm"
40
46
  @nys-click="${() => this._handlePageClick(a)}"
41
47
  ></nys-button>
42
48
  `);
@@ -47,12 +53,16 @@ const y = class y extends p {
47
53
  class="spacer"
48
54
  tabindex="-1"
49
55
  id=${a}
56
+ size="sm"
50
57
  ></nys-button>`
51
58
  );
52
59
  }, e = this.totalPages, i = this.currentPage - 1, g = this.currentPage + 1;
53
60
  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
61
  }
55
- // Event Handlers
62
+ /**
63
+ * Event Handlers
64
+ * --------------------------------------------------------------------------
65
+ */
56
66
  _handlePageClick(t) {
57
67
  this.currentPage = this._clampPage(t), this.dispatchEvent(
58
68
  new CustomEvent("nys-change", {
@@ -69,6 +79,7 @@ const y = class y extends p {
69
79
  label="Previous"
70
80
  prefixIcon="chevron_left"
71
81
  variant="outline"
82
+ size="sm"
72
83
  ?disabled=${this.currentPage === 1}
73
84
  @nys-click="${() => this._handlePageClick(this.currentPage - 1)}"
74
85
  ></nys-button>
@@ -77,6 +88,7 @@ const y = class y extends p {
77
88
  prefixIcon="chevron_left"
78
89
  ariaLabel="Previous Page"
79
90
  variant="outline"
91
+ size="sm"
80
92
  ?disabled=${this.currentPage === 1}
81
93
  @nys-click="${() => this._handlePageClick(this.currentPage - 1)}"
82
94
  ></nys-button>
@@ -86,6 +98,7 @@ const y = class y extends p {
86
98
  label="Next"
87
99
  suffixIcon="chevron_right"
88
100
  variant="outline"
101
+ size="sm"
89
102
  ?disabled=${this.currentPage === this.totalPages}
90
103
  @nys-click="${() => this._handlePageClick(this.currentPage + 1)}"
91
104
  ></nys-button>
@@ -94,6 +107,7 @@ const y = class y extends p {
94
107
  suffixIcon="chevron_right"
95
108
  ariaLabel="Next Page"
96
109
  variant="outline"
110
+ size="sm"
97
111
  ?disabled=${this.currentPage === this.totalPages}
98
112
  @nys-click="${() => this._handlePageClick(this.currentPage + 1)}"
99
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; // Counter for generating unique IDs\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 // Lifecycle Methods\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 // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-pagination-${Date.now()}-${componentIdCounter++}`;\n }\n }\n\n // Functions\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 // Event Handlers\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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"}
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.12.0",
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.12.0"
26
+ "@nysds/nys-button": "^1.13.1"
27
27
  },
28
28
  "devDependencies": {
29
29
  "lit": "^3.3.1",