diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts index 54a9409cb11..f0393dad43b 100644 --- a/packages/calcite-components/src/components/pagination/pagination.e2e.ts +++ b/packages/calcite-components/src/components/pagination/pagination.e2e.ts @@ -2,7 +2,7 @@ import { E2EElement, E2EPage, newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; import { beforeEach, describe, expect, it } from "vitest"; import { html } from "../../../support/formatting"; -import { accessible, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests"; +import { accessible, focusable, hidden, renders, t9n, themed, defaults } from "../../tests/commonTests"; import { findAll } from "../../tests/utils/puppeteer"; import { CSS } from "./resources"; @@ -35,6 +35,19 @@ describe("calcite-pagination", () => { t9n("calcite-pagination"); }); + describe("defaults", () => { + defaults("calcite-pagination", [ + { + propertyName: "totalItems", + defaultValue: 1, + }, + { + propertyName: "startItem", + defaultValue: 1, + }, + ]); + }); + describe("page links", () => { it("should render only one page when totalItems is less than pageSize", async () => { const page = await newE2EPage(); @@ -170,6 +183,15 @@ describe("calcite-pagination", () => { expect(toggleSpy).toHaveReceivedEventTimes(2); }); }); + describe("start-item", () => { + it("checks page defaults to 1 when start-item is negative", async () => { + const page = await newE2EPage(); + await page.setContent(``); + const links = await findAll(page, `calcite-pagination >>> .${CSS.page}`); + expect(links.length).toBe(1); + expect(await links[0].getProperty("value")).toBe("1"); + }); + }); describe("showing one item at a time", () => { let page: E2EPage; let pagination: E2EElement; diff --git a/packages/calcite-components/src/components/pagination/pagination.tsx b/packages/calcite-components/src/components/pagination/pagination.tsx index 9d04c6b47b5..a3f6a149879 100644 --- a/packages/calcite-components/src/components/pagination/pagination.tsx +++ b/packages/calcite-components/src/components/pagination/pagination.tsx @@ -97,7 +97,7 @@ export class Pagination extends LitElement { @property({ reflect: true }) startItem = 1; /** Specifies the total number of items. */ - @property({ reflect: true }) totalItems = 0; + @property({ reflect: true }) totalItems = 1; //#endregion @@ -232,8 +232,14 @@ export class Pagination extends LitElement { private handleLastStartItemChange(): void { const { totalItems, pageSize, totalPages } = this; + const isStartNegative = totalItems - pageSize < 0; + this.lastStartItem = - (totalItems % pageSize === 0 ? totalItems - pageSize : Math.floor(totalPages) * pageSize) + 1; + (totalItems % pageSize === 0 + ? isStartNegative + ? 0 + : totalItems - pageSize + : Math.floor(totalPages) * pageSize) + 1; } private handleIsXXSmall(): void {