feat(pagination): enable responsive layout

packages/calcite-components/src/components/pagination/pagination.stories.ts

@@ -4,6 +4,7 @@ import { modesDarkDefault } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { html } from "../../../support/formatting";
 import { storyFilters } from "../../../.storybook/helpers";
+import { Scale } from "../interfaces";
 
 export default {
   title: "Components/Pagination",
@@ -27,6 +28,40 @@ export const simple = (): string => html`
   </calcite-pagination>
 `;
 
+const breakpoints = [475, 476, 768, 1152];
+
+const getResponsiveTemplate = (width: number, scale: Scale) => {
+  const totalItems = 150000;
+  const pageSize = 100;
+  return html`<strong>Width: ${width}px</strong>
+    <div style="width: ${width}px; margin: 1em 0;">
+      <calcite-pagination
+        total-items="${totalItems}"
+        page-size="${pageSize}"
+        start-item="1"
+        scale="${scale}"
+      ></calcite-pagination>
+      <calcite-pagination
+        total-items="${totalItems}"
+        page-size="${pageSize}"
+        start-item="5400"
+        scale="${scale}"
+      ></calcite-pagination>
+      <calcite-pagination
+        total-items="${totalItems}"
+        page-size="${pageSize}"
+        start-item="149901"
+        scale="${scale}"
+      ></calcite-pagination>
+    </div>`;
+};
+
+export const responsiveSmall = (): string => breakpoints.map((width) => getResponsiveTemplate(width, "s")).join("");
+
+export const responsiveMedium = (): string => breakpoints.map((width) => getResponsiveTemplate(width, "m")).join("");
+
+export const responsiveLarge = (): string => breakpoints.map((width) => getResponsiveTemplate(width, "l")).join("");
+
 export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
   <calcite-pagination
     class="calcite-mode-dark"

packages/calcite-components/src/components/pagination/pagination.tsx

@@ -34,8 +34,9 @@ import {
 import { Scale } from "../interfaces";
 import { PaginationMessages } from "./assets/pagination/t9n";
 import { CSS } from "./resources";
+import { createObserver } from "../../utils/observers";
+import { Breakpoints, getBreakpoints } from "../../utils/responsive";
 
-const maxPagesDisplayed = 5;
 export interface PaginationDetail {
   start: number;
   totalItems: number;
@@ -97,8 +98,17 @@ export class Pagination
   //  Private Properties
   //
   // --------------------------------------------------------------------------
+
   @Element() el: HTMLCalcitePaginationElement;
 
+  @State() maxPagesDisplayed = 5;
+
+  private resizeObserver = createObserver("resize", (entries) =>
+    entries.forEach(this.resizeHandler)
+  );
+
+  private breakpoints: Breakpoints;
+
   //--------------------------------------------------------------------------
   //
   //  State
@@ -151,20 +161,24 @@ export class Pagination
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    this.resizeObserver?.observe(this.el);
   }
 
   async componentWillLoad(): Promise<void> {
     await setUpMessages(this);
     setUpLoadableComponent(this);
+    this.breakpoints = await getBreakpoints();
   }
 
   componentDidLoad(): void {
     setComponentLoaded(this);
+    this.resize(this.el.clientWidth);
   }
 
   disconnectedCallback(): void {
     disconnectLocalized(this);
     disconnectMessages(this);
+    this.resizeObserver?.disconnect();
   }
 
   // --------------------------------------------------------------------------
@@ -198,6 +212,20 @@ export class Pagination
   //
   // --------------------------------------------------------------------------
 
+  private resize(width: number): void {
+    const { breakpoints } = this;
+
+    if (!breakpoints || !width) {
+      return;
+    }
+
+    this.maxPagesDisplayed = width < breakpoints.width.xsmall ? 3 : 5;
+  }
+
+  private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void => {
+    this.resize(width);
+  };
+
   private getLastStart(): number {
     const { totalItems, pageSize } = this;
     const lastStart =
@@ -218,11 +246,15 @@ export class Pagination
   };
 
   private showLeftEllipsis() {
-    return Math.floor(this.startItem / this.pageSize) > 3;
+    return Math.floor(this.startItem / this.pageSize) > this.maxPagesDisplayed - 2;
   }
 
   private showRightEllipsis() {
-    return (this.totalItems - this.startItem) / this.pageSize > 3;
+    const singleCenterPage = this.maxPagesDisplayed < 5;
+    return (
+      (this.totalItems - this.startItem) / this.pageSize >
+      this.maxPagesDisplayed - (singleCenterPage ? 0 : 2)
+    );
   }
 
   private emitUpdate() {
@@ -236,9 +268,11 @@ export class Pagination
   //--------------------------------------------------------------------------
 
   renderPages(): VNode[] {
+    const { maxPagesDisplayed } = this;
     const lastStart = this.getLastStart();
     let end: number;
     let nextStart: number;
+    const singleCenterPage = maxPagesDisplayed < 5;
 
     // if we don't need ellipses render the whole set
     if (this.totalItems / this.pageSize <= maxPagesDisplayed) {
@@ -248,20 +282,21 @@ export class Pagination
       // if we're within max pages of page 1
       if (this.startItem / this.pageSize < maxPagesDisplayed - 1) {
         nextStart = 1 + this.pageSize;
-        end = 1 + 4 * this.pageSize;
+        end = 1 + (maxPagesDisplayed - 1) * this.pageSize;
       } else {
         // if we're within max pages of last page
         if (this.startItem + 3 * this.pageSize >= this.totalItems) {
-          nextStart = lastStart - 4 * this.pageSize;
+          nextStart = lastStart - (maxPagesDisplayed - 1) * this.pageSize;
           end = lastStart - this.pageSize;
         } else {
-          nextStart = this.startItem - this.pageSize;
-          end = this.startItem + this.pageSize;
+          nextStart = this.startItem - (singleCenterPage ? 0 : this.pageSize);
+          end = this.startItem + (singleCenterPage ? 0 : this.pageSize);
         }
       }
     }
 
-    const pages = [];
+    const pages: number[] = [];
+
     while (nextStart <= end) {
       pages.push(nextStart);
       nextStart = nextStart + this.pageSize;
@@ -299,13 +334,13 @@ export class Pagination
   }
 
   renderLeftEllipsis(): VNode {
-    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showLeftEllipsis()) {
+    if (this.totalItems / this.pageSize > this.maxPagesDisplayed && this.showLeftEllipsis()) {
       return <span class={`${CSS.ellipsis} ${CSS.ellipsisStart}`}>&hellip;</span>;
     }
   }
 
   renderRightEllipsis(): VNode {
-    if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showRightEllipsis()) {
+    if (this.totalItems / this.pageSize > this.maxPagesDisplayed && this.showRightEllipsis()) {
       return <span class={`${CSS.ellipsis} ${CSS.ellipsisEnd}`}>&hellip;</span>;
     }
   }

packages/calcite-components/src/utils/responsive.ts

@@ -1,4 +1,4 @@
-interface Breakpoints {
+export interface Breakpoints {
   width: {
     large: number;
     medium: number;
@@ -17,6 +17,8 @@ function breakpointTokenToNumericalValue(style: CSSStyleDeclaration, tokenName:
  * This util will return a breakpoints lookup object.
  *
  * Note that the breakpoints will be evaluated at the root and cached for reuse.
+ *
+ * @returns {Promise<Breakpoints>} The Breakpoints object.
  */
 export async function getBreakpoints(): Promise<Breakpoints> {
   if (getBreakpointsPromise) {