feat: add "hideWhenEmpty" option to UiPager navbar

addon/components/ui-pager/navbar/component.ts

@@ -41,6 +41,12 @@ export default class UiPagerNavbar extends Component {
    */
   public ariaLabel?: string;
 
+  /**
+   * When true, the entire navigation bar will be removed when there are zero pages
+   * to navigate.
+   */
+  public hideWhenEmpty = false;
+
   protected disabled = false;
 
   protected currentPage = 1;

addon/components/ui-pager/navbar/template.hbs

@@ -1,80 +1,82 @@
-<nav aria-label={{this.ariaLabel}}>
-  <ul class="pagination">
-    <li class={{if this.disablePrevButtons "disabled"}}>
-      <a
-        href="#"
-        role="button"
-        class="page-item"
-        title="Go to first page"
-        aria-label="Go to first page"
-        aria-disabled="{{this.disablePrevButtons}}"
-        aria-current="false"
-        onclick={{action this.handleNavigation "first"}}
-      >
-        <UiIcon @name="angle-double-left" />
-      </a>
-    </li>
-
-    <li class={{if this.disablePrevButtons "disabled"}}>
-      <a
-        href="#"
-        role="button"
-        class="page-item"
-        title="Go to previous page"
-        aria-label="Go to previous page"
-        aria-disabled="{{this.disablePrevButtons}}"
-        aria-current="false"
-        onclick={{action this.handleNavigation "prev"}}
-      >
-        <UiIcon @name="angle-left" />
-      </a>
-    </li>
+{{#if (or (not this.hideWhenEmpty) this.pageNumbers.length)}}
+  <nav aria-label={{this.ariaLabel}}>
+    <ul class="pagination">
+      <li class={{if this.disablePrevButtons "disabled"}}>
+        <a
+          href="#"
+          role="button"
+          class="page-item"
+          title="Go to first page"
+          aria-label="Go to first page"
+          aria-disabled="{{this.disablePrevButtons}}"
+          aria-current="false"
+          onclick={{action this.handleNavigation "first"}}
+        >
+          <UiIcon @name="angle-double-left" />
+        </a>
+      </li>
 
-    {{#each this.pageNumbers as |item|}}
-      <li class="{{if this.disabled "disabled"}}{{if item.isCurrent " active"}}">
+      <li class={{if this.disablePrevButtons "disabled"}}>
         <a
           href="#"
           role="button"
-          class="page-item{{if this.responsive " hidden-xs hidden-sm"}}"
-          title="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
-          aria-label="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
-          aria-current="{{if item.isCurrent "page" "false"}}"
-          aria-disabled="{{this.disabled}}"
-          onclick={{action this.handleNavigation item.idx}}
+          class="page-item"
+          title="Go to previous page"
+          aria-label="Go to previous page"
+          aria-disabled="{{this.disablePrevButtons}}"
+          aria-current="false"
+          onclick={{action this.handleNavigation "prev"}}
         >
-          {{if this.showPageLinkRangeLabels item.range item.idx}}
+          <UiIcon @name="angle-left" />
         </a>
       </li>
-    {{/each}}
 
-    <li class={{if this.disableNextButtons "disabled"}}>
-      <a
-        href="#"
-        role="button"
-        class="page-item"
-        title="Go to next page"
-        aria-label="Go to next page"
-        aria-disabled="{{this.disableNextButtons}}"
-        aria-current="false"
-        onclick={{action this.handleNavigation "next"}}
-      >
-        <UiIcon @name="angle-right" />
-      </a>
-    </li>
+      {{#each this.pageNumbers as |item|}}
+        <li class="{{if this.disabled "disabled"}}{{if item.isCurrent " active"}}">
+          <a
+            href="#"
+            role="button"
+            class="page-item{{if this.responsive " hidden-xs hidden-sm"}}"
+            title="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
+            aria-label="{{if item.isCurrent (concat "Current page, page " item.idx) (concat "Go to page " item.idx)}}"
+            aria-current="{{if item.isCurrent "page" "false"}}"
+            aria-disabled="{{this.disabled}}"
+            onclick={{action this.handleNavigation item.idx}}
+          >
+            {{if this.showPageLinkRangeLabels item.range item.idx}}
+          </a>
+        </li>
+      {{/each}}
+
+      <li class={{if this.disableNextButtons "disabled"}}>
+        <a
+          href="#"
+          role="button"
+          class="page-item"
+          title="Go to next page"
+          aria-label="Go to next page"
+          aria-disabled="{{this.disableNextButtons}}"
+          aria-current="false"
+          onclick={{action this.handleNavigation "next"}}
+        >
+          <UiIcon @name="angle-right" />
+        </a>
+      </li>
 
-    <li class={{if this.disableNextButtons "disabled"}}>
-      <a
-        href="#"
-        role="button"
-        class="page-item{{if this.disableNextButtons ' disabled'}}"
-        title="Go to last page"
-        aria-label="Go to last page"
-        aria-disabled="{{this.disableNextButtons}}"
-        aria-current="false"
-        onclick={{action this.handleNavigation "last"}}
-      >
-        <UiIcon @name="angle-double-right" />
-      </a>
-    </li>
-  </ul>
-</nav>
+      <li class={{if this.disableNextButtons "disabled"}}>
+        <a
+          href="#"
+          role="button"
+          class="page-item{{if this.disableNextButtons ' disabled'}}"
+          title="Go to last page"
+          aria-label="Go to last page"
+          aria-disabled="{{this.disableNextButtons}}"
+          aria-current="false"
+          onclick={{action this.handleNavigation "last"}}
+        >
+          <UiIcon @name="angle-double-right" />
+        </a>
+      </li>
+    </ul>
+  </nav>
+{{/if}}

tests/integration/components/ui-pager-test.ts

@@ -238,6 +238,28 @@ module('Integration | Component | ui-pager', function (hooks) {
     });
   });
 
+  test('the navbar can be hidden when no pages are available', async function (assert) {
+    this.set('records', generateRecordSet());
+    this.set('hideWhenEmpty', true);
+
+    // language=handlebars
+    await render(hbs`
+      <UiPager @records={{this.records}} @disabled={{this.disabled}} as |Pager|>
+        <Pager.Navbar @hideWhenEmpty={{this.hideWhenEmpty}} />
+      </UiPager>
+    `);
+
+    assert.dom('nav').isVisible();
+
+    this.set('records', []);
+
+    assert.dom('nav').doesNotExist();
+
+    this.set('records', generateRecordSet(1));
+
+    assert.dom('nav').isVisible();
+  });
+
   test('it generates descriptive text', async function (assert) {
     this.set('records', generateRecordSet());