From bcc809b6bbc8fb1b683e12f809976ac87f4a2389 Mon Sep 17 00:00:00 2001
From: Hardik Pithva <hardikpthv@gmail.com>
Date: Mon, 28 Sep 2020 17:40:07 +0200
Subject: [PATCH] fix(pagination): extract nav list template to reuse in
 derived component

---
 .changeset/lucky-otters-appear.md         |  5 +++
 packages/pagination/src/LionPagination.js | 39 ++++++++++++++---------
 2 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/lucky-otters-appear.md

diff --git a/.changeset/lucky-otters-appear.md b/.changeset/lucky-otters-appear.md
new file mode 100644
index 000000000..e326aa91b
--- /dev/null
+++ b/.changeset/lucky-otters-appear.md
@@ -0,0 +1,5 @@
+---
+'@lion/pagination': patch
+---
+
+fix(pagination): extract nav list template to reuse in derived component
diff --git a/packages/pagination/src/LionPagination.js b/packages/pagination/src/LionPagination.js
index 8afbaae00..c5b714877 100644
--- a/packages/pagination/src/LionPagination.js
+++ b/packages/pagination/src/LionPagination.js
@@ -264,6 +264,29 @@ export class LionPagination extends LocalizeMixin(LitElement) {
     `;
   }
 
+  /**
+   * Render navigation list
+   * @returns {TemplateResult} nav list template
+   * @protected
+   */
+  _renderNavList() {
+    return this.__calculateNavList().map(page =>
+      page === '...'
+        ? html` <li><span>${page}</span></li> `
+        : html`
+            <li>
+              <button
+                aria-label="${this.msgLit('lion-pagination:page', { page })}"
+                aria-current=${page === this.current}
+                @click=${() => this.__fire(page)}
+              >
+                ${page}
+              </button>
+            </li>
+          `,
+    );
+  }
+
   render() {
     return html`
       <nav role="navigation" aria-label="${this.msgLit('lion-pagination:label')}">
@@ -271,21 +294,7 @@ export class LionPagination extends LocalizeMixin(LitElement) {
           ${this.current > 1
             ? this._prevNextButtonTemplate('previous', this.current - 1)
             : this._disabledButtonTemplate('previous')}
-          ${this.__calculateNavList().map(page =>
-            page === '...'
-              ? html` <li><span>${page}</span></li> `
-              : html`
-                  <li>
-                    <button
-                      aria-label="${this.msgLit('lion-pagination:page', { page })}"
-                      aria-current=${page === this.current}
-                      @click=${() => this.__fire(page)}
-                    >
-                      ${page}
-                    </button>
-                  </li>
-                `,
-          )}
+          ${this._renderNavList()}
           ${this.current < this.count
             ? this._prevNextButtonTemplate('next', this.current + 1)
             : this._disabledButtonTemplate('next')}