xmlui 0.10.12 → 0.10.14

package/dist/scripts/src/components/Pagination/Pagination.spec.js

@@ -0,0 +1,1003 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const component_test_helpers_1 = require("../../testing/component-test-helpers");
+const fixtures_1 = require("../../testing/fixtures");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders basic controls with no props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("controls are disabled if enabled=false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination enabled="false" itemCount="100" pageSize="10" pageIndex="0" />`);
+        // Should not show navigation buttons
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("controls are disabled if enabled=false #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination enabled="false" itemCount="100" pageSize="10" pageIndex="0" maxVisiblePages="3" />`);
+        // Should not show navigation buttons
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 3" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="100" pageSize="10" pageIndex="0" />`);
+        // Should show navigation buttons
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeVisible();
+        // Should show page info by default
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 10 (100 items)")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders when itemCount is zero", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="0"/>`);
+        // Component should not be visible
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText(/Page \d+ of \d+/)).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles itemCount property correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="25" pageSize="5"/>`);
+        // Should calculate correct total pages (25 items / 5 per page = 5 pages)
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 5 (25 items)")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles pageSize property correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="100" pageSize="20"/>`);
+        // Should calculate correct total pages (100 items / 20 per page = 5 pages)
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 5 (100 items)")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles showPageInfo property correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" showPageInfo="false"/>`);
+        // Should not show page info when showPageInfo is false
+        yield (0, fixtures_1.expect)(page.getByText(/Page \d+ of \d+/)).not.toBeVisible();
+        // But should still show navigation buttons
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles pageIndex property correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="2" showPageInfo="false" />`);
+        // Should show page 3 (0-based index 2)
+        yield (0, fixtures_1.expect)(page.getByText("3", { exact: true })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles maxVisiblePages property correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="100" pageSize="10" maxVisiblePages="3"/>`);
+        // With maxVisiblePages=3, should only show 3 page buttons
+        const pageButtons = page.getByRole("button").filter({ hasText: /^\d+$/ });
+        yield (0, fixtures_1.expect)(pageButtons).toHaveCount(3);
+        // Should show pages 1, 2, 3
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 3" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles maxVisiblePages when there's only one page", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="5" pageSize="10" maxVisiblePages="1"/>`);
+        // Should show just the page number as text, not a button
+        yield (0, fixtures_1.expect)(page.getByText("1", { exact: true })).toBeVisible();
+        // Should not have clickable page buttons
+        const pageButtons = page.getByRole("button").filter({ hasText: /^\d+$/ });
+        yield (0, fixtures_1.expect)(pageButtons).toHaveCount(0);
+    }));
+    (0, fixtures_1.test)("navigation buttons are disabled correctly on first page", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="0"/>`);
+        // First and Previous buttons should be disabled
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+        // Next and Last buttons should be enabled
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("navigation buttons are disabled correctly on last page", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="4"/>`);
+        // Next and Last buttons should be disabled
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeDisabled();
+        // First and Previous buttons should be enabled
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("handles edge case with single item", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="1" pageSize="10"/>`);
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 1 (1 items)")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First Page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous Page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next Page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last Page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("handles negative itemCount gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="-5" pageSize="10" pageIndex="0"/>`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous Page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next Page" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles negative pageIndex gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="10" pageSize="5" pageIndex="-1"/>`);
+        // Should clamp pageIndex to 0 and render first page
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 2 (10 items)")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("handles negative pageSize gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="10" pageSize="-5" pageIndex="0"/>`);
+        // Should clamp pageSize to 1 and render first page
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 1 (10 items)")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("displays minimal layout if no itemCount provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination />`);
+        // Should show minimal layout
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 1 (1 items)")).not.toBeAttached();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First Page" })).not.toBeAttached();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous Page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next Page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last Page" })).not.toBeAttached();
+    }));
+    (0, fixtures_1.test)("hasPrevPage modifies Previous button enabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination hasPrevPage="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("hasPrevPage does not interfere with Next button state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination hasPrevPage="true" hasNextPage="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("hasNextPage modifies Next button enabled state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination hasNextPage="true" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("hasNextPage does not interfere with Previous button state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination hasNextPage="true" hasPrevPage="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("hasPrevPage and hasNextPage have no effect if itemCount >= 0", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="2" hasPrevPage="false" hasNextPage="false" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("shows page size selector by default when pageSizeOptions are provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}"/>`);
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides page size selector when showPageSizeSelector is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Pagination
+        itemCount="50"
+        pageSize="10"
+        pageSizeOptions="{[5, 10, 20]}"
+        showPageSizeSelector="false"
+      />
+    `);
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows page size selector when showPageSizeSelector is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Pagination
+        itemCount="50"
+        pageSize="10"
+        pageSizeOptions="{[5, 10, 20]}"
+        showPageSizeSelector="true"
+      />
+    `);
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("showPageSizeSelector has no effect when pageSizeOptions is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" showPageSizeSelector="true"/>`);
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("showPageSizeSelector has no effect when pageSizeOptions has only one option", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[10]}" showPageSizeSelector="true"/>`);
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("does not show page size selector when pageSizeOptions is not provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10"/>`);
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows page size selector when multiple pageSizeOptions are provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}"/>`);
+        // Should show page size selector
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        // Should show select dropdown with current value
+        const select = page.locator("select");
+        yield (0, fixtures_1.expect)(select).toBeVisible();
+        yield (0, fixtures_1.expect)(select).toHaveValue("10");
+        // Check that all options exist in the DOM (even if not visible)
+        yield (0, fixtures_1.expect)(select.locator('option[value="5"]')).toHaveCount(1);
+        yield (0, fixtures_1.expect)(select.locator('option[value="10"]')).toHaveCount(1);
+        yield (0, fixtures_1.expect)(select.locator('option[value="20"]')).toHaveCount(1);
+    }));
+    (0, fixtures_1.test)("page size selector is disabled when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination enabled="false" itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}"/>`);
+        // Select should be disabled
+        const select = page.locator("select");
+        yield (0, fixtures_1.expect)(select).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("page size selector allows changing selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}"/>`);
+        // Should show page size selector
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        // Should start with correct value
+        const select = page.locator("select");
+        yield (0, fixtures_1.expect)(select).toHaveValue("10");
+        // Should be able to interact with the select (this triggers the event)
+        yield select.selectOption("20");
+        // Note: In a real application, the parent would update the pageSize prop
+        // which would cause the select to show the new value. For this test,
+        // we're just verifying the interaction is possible.
+    }));
+    (0, fixtures_1.test)("page size selector reflects current pageSize", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="100" pageSize="20" pageSizeOptions="{[5, 10, 20, 50]}"/>`);
+        // Select should show current page size
+        const select = page.locator("select");
+        yield (0, fixtures_1.expect)(select).toHaveValue("20");
+    }));
+    (0, fixtures_1.test)("handles pageSize not in pageSizeOptions gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="100" pageSize="15" pageSizeOptions="{[5, 10, 20]}"/>`);
+        // Should show page size selector since multiple options are provided
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        const select = page.locator("select");
+        yield (0, fixtures_1.expect)(select).toBeVisible();
+        // When pageSize (15) is not in pageSizeOptions, component defaults to first option (5)
+        // This tests how the component handles mismatched pageSize vs pageSizeOptions
+        yield (0, fixtures_1.expect)(select).toHaveValue("5");
+        // All original options should still be available
+        yield (0, fixtures_1.expect)(select.locator('option[value="5"]')).toHaveCount(1);
+        yield (0, fixtures_1.expect)(select.locator('option[value="10"]')).toHaveCount(1);
+        yield (0, fixtures_1.expect)(select.locator('option[value="20"]')).toHaveCount(1);
+        // Page calculations should use the actual pageSize (15), not the selected option (5)
+        // 100 items / 15 per page = 6.67 -> 7 pages
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 7 (100 items)")).toBeVisible();
+    }));
+    // Edge cases for showPageSizeSelector property
+    (0, fixtures_1.test)("handles null showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="{null}"/>`);
+        // Should fall back to default behavior (true) when null
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles undefined showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="{undefined}"/>`);
+        // Should fall back to default behavior (true) when undefined
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles string 'false' for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="false"/>`);
+        // Should treat string 'false' as false
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles string 'true' for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="true"/>`);
+        // Should treat string 'true' as true
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles numeric 0 for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="{0}"/>`);
+        // Should treat 0 as false
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles numeric 1 for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="{1}"/>`);
+        // Should treat 1 as true
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles object for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector="{{a: 'b'}}" />`);
+        // Objects may cause component to not render properly in some contexts
+        const pageSizeText = page.getByText("Items per page");
+        const exists = yield pageSizeText.count();
+        if (exists > 0) {
+            // Should treat object as truthy (true) when it renders
+            yield (0, fixtures_1.expect)(pageSizeText).toBeVisible();
+            yield (0, fixtures_1.expect)(page.locator("select")).toBeVisible();
+        }
+        else {
+            // Component may not render page size selector with invalid object input
+            yield (0, fixtures_1.expect)(pageSizeText).not.toBeVisible();
+        }
+    }));
+    (0, fixtures_1.test)("handles empty string for showPageSizeSelector property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageSizeOptions="{[5, 10, 20]}" showPageSizeSelector=""/>`);
+        // Should treat empty string as false
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator("select")).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("defaults to horizontal orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10"/>`);
+        // Should have horizontal class by default
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        const prevButton = nav.getByRole("button", { name: "Previous page" });
+        const nextButton = nav.getByRole("button", { name: "Next page" });
+        const { top: prevTop, bottom: prevBottom } = yield (0, component_test_helpers_1.getBounds)(prevButton);
+        const { top: nextTop, bottom: nextBottom } = yield (0, component_test_helpers_1.getBounds)(nextButton);
+        (0, fixtures_1.expect)(prevBottom).toEqualWithTolerance(nextBottom, 1);
+        (0, fixtures_1.expect)(prevTop).toEqualWithTolerance(nextTop, 1);
+    }));
+    (0, fixtures_1.test)("applies horizontal orientation when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" orientation="horizontal"/>`);
+        // Should have horizontal class
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        const prevButton = nav.getByRole("button", { name: "Previous page" });
+        const nextButton = nav.getByRole("button", { name: "Next page" });
+        const { top: prevTop, bottom: prevBottom } = yield (0, component_test_helpers_1.getBounds)(prevButton);
+        const { top: nextTop, bottom: nextBottom } = yield (0, component_test_helpers_1.getBounds)(nextButton);
+        (0, fixtures_1.expect)(prevBottom).toEqualWithTolerance(nextBottom, 1);
+        (0, fixtures_1.expect)(prevTop).toEqualWithTolerance(nextTop, 1);
+    }));
+    (0, fixtures_1.test)("applies vertical orientation when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" orientation="vertical"/>`);
+        // Should have vertical class
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        const prevButton = nav.getByRole("button", { name: "Previous page" });
+        const nextButton = nav.getByRole("button", { name: "Next page" });
+        const { bottom: prevBottom } = yield (0, component_test_helpers_1.getBounds)(prevButton);
+        const { top: nextTop } = yield (0, component_test_helpers_1.getBounds)(nextButton);
+        (0, fixtures_1.expect)(prevBottom).toBeLessThan(nextTop);
+    }));
+    (0, fixtures_1.test)("falls back to default orientation for invalid values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" orientation="invalid"/>`);
+        // Should fall back to horizontal (default)
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        const prevButton = nav.getByRole("button", { name: "Previous page" });
+        const nextButton = nav.getByRole("button", { name: "Next page" });
+        const { top: prevTop, bottom: prevBottom } = yield (0, component_test_helpers_1.getBounds)(prevButton);
+        const { top: nextTop, bottom: nextBottom } = yield (0, component_test_helpers_1.getBounds)(nextButton);
+        (0, fixtures_1.expect)(prevBottom).toEqualWithTolerance(nextBottom, 1);
+        (0, fixtures_1.expect)(prevTop).toEqualWithTolerance(nextTop, 1);
+    }));
+    (0, fixtures_1.test)("vertical orientation works with page size selector", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" orientation="vertical" pageSizeOptions="{[5, 10, 20]}"/>`);
+        // Should have vertical class and show page size selector
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        const prevButton = nav.getByRole("button", { name: "Previous page" });
+        const nextButton = nav.getByRole("button", { name: "Next page" });
+        const { bottom: prevBottom } = yield (0, component_test_helpers_1.getBounds)(prevButton);
+        const { top: nextTop } = yield (0, component_test_helpers_1.getBounds)(nextButton);
+        (0, fixtures_1.expect)(prevBottom).toBeLessThan(nextTop);
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("applies buttonRowPosition correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="start"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="end"
+        pageInfoPosition="center"
+      />`);
+        // Check that pagination controls exist and are rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        // Check the structure shows proper positioning (buttons should be rendered before page size selector)
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        yield (0, fixtures_1.expect)(nav).toBeVisible();
+    }));
+    (0, fixtures_1.test)("applies pageSizeSelectorPosition correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="center"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="start"
+        pageInfoPosition="end"
+      />`);
+        // Check that page size selector exists and is rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Items per page")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("applies pageInfoPosition correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="start"
+        pageSizeSelectorPosition="center"
+        pageInfoPosition="end"
+      />`);
+        // Check that page info exists and is rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 5 (50 items)")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders only necessary components based on props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="start"
+        showPageInfo="false"
+        showPageSizeSelector="false"
+      />`);
+        // Button row should be rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        // Page info and size selector should not be rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders multiple components when in different positions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="start"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="center"
+        pageInfoPosition="end"
+      />`);
+        // All components should be rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+    }));
+    (0, fixtures_1.test)("positions work correctly with vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        orientation="vertical"
+        buttonRowPosition="start"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="center"
+        pageInfoPosition="end"
+      />`);
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        yield (0, fixtures_1.expect)(nav).toHaveClass(/paginationVertical/);
+        // All components should still be positioned correctly
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+    }));
+    (0, fixtures_1.test)("grid layout maintains accessibility", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="center"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="start"
+        pageInfoPosition="end"
+      />`);
+        // All accessibility features should still work
+        const nav = page.getByRole("navigation");
+        yield (0, fixtures_1.expect)(nav).toBeVisible();
+        yield (0, fixtures_1.expect)(nav).toHaveAttribute("aria-label", "Pagination");
+        // The buttons here don't have explicit labels, but they are still targetable because of accessible aria-label props
+        yield (0, fixtures_1.expect)(page.getByLabel("First page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Previous page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Next page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Last page")).toBeVisible();
+    }));
+});
+// =============================================================================
+// GRID LAYOUT AND POSITIONING TESTS
+// =============================================================================
+fixtures_1.test.describe("Grid Layout and Positioning", () => {
+    (0, fixtures_1.test)("default positions work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageSizeOptions="{[5, 10, 20]}"
+      />`);
+        // Default: pageSizeSelectorPosition="start", buttonRowPosition="center", pageInfoPosition="end"
+        // All components should be visible with default positioning
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+    }));
+    (0, fixtures_1.test)("multiple components can be positioned in same location", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="start"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="start"
+        pageInfoPosition="end"
+      />`);
+        // Both button row and page size selector should be rendered (both in start position)
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles invalid position values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="invalid"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="invalid"
+        pageInfoPosition="invalid"
+      />`);
+        // Should still render the nav container even with invalid positions
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        yield (0, fixtures_1.expect)(nav).toBeVisible();
+        // With invalid positions, components may not be placed in slots, but the nav should exist
+        // The component should handle this gracefully by either falling back to defaults or not rendering slots
+    }));
+    (0, fixtures_1.test)("components are not rendered when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="center"
+        showPageInfo="false"
+        showPageSizeSelector="false"
+      />`);
+        // Only button row should be rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("grid adapts to content in vertical orientation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        orientation="vertical"
+        buttonRowPosition="start"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="end"
+        showPageInfo="false"
+      />`);
+        const nav = page.locator('nav[aria-label="Pagination"]');
+        yield (0, fixtures_1.expect)(nav).toHaveClass(/paginationVertical/);
+        // Should have button row and page size selector
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("component order reflects positioning", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        buttonRowPosition="end"
+        pageSizeOptions="{[5, 10, 20]}"
+        pageSizeSelectorPosition="start"
+        pageInfoPosition="center"
+      />`);
+        // All components should be rendered
+        yield (0, fixtures_1.expect)(page.locator('[data-component="pagination-controls"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-size-selector-container"]')).toBeVisible();
+        yield (0, fixtures_1.expect)(page.locator('[data-component="page-info"]')).toBeVisible();
+    }));
+    (0, fixtures_1.test)("position properties work with minimal pagination", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination 
+        buttonRowPosition="center"
+        hasPrevPage="true"
+        hasNextPage="true"
+      />`);
+        // Even without itemCount, minimal layout should work
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeVisible();
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("component container has correct role", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" />`);
+        yield (0, fixtures_1.expect)(page.getByRole("navigation")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("navigation buttons have correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10"/>`);
+        // Check button roles and labels
+        yield (0, fixtures_1.expect)(page.getByLabel("First page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Previous page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Next page")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Last page")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("page indicator has correct aria attribute if maxVisiblePages=1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" maxVisiblePages="1"/>`);
+        yield (0, fixtures_1.expect)(page.getByText("1", { exact: true })).toHaveAttribute("aria-current", "true");
+    }));
+    (0, fixtures_1.test)("page buttons have correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" maxVisiblePages="5"/>`);
+        // Page buttons should have appropriate labels
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 1")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 2")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 3")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 4")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 5")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("current page button has correct aria attribute if maxVisiblePages>1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" maxVisiblePages="5"/>`);
+        yield (0, fixtures_1.expect)(page.getByLabel("Page 1 (current)", { exact: true })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("disabled buttons are properly marked as disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="0"/>`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeEnabled();
+    }));
+    (0, fixtures_1.test)("disabled buttons are properly marked as disabled #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" pageIndex="5"/>`);
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Previous page" })).toBeEnabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("buttons are focusable and keyboard navigable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" maxVisiblePages="3"/>`);
+        // Test tab navigation through buttons
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).toBeFocused();
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeFocused();
+    }));
+});
+// =============================================================================
+// INTERACTION TESTS
+// =============================================================================
+fixtures_1.test.describe("User Interactions", () => {
+    (0, fixtures_1.test)("page button click triggers pageDidChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="0" 
+        maxVisiblePages="5"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        yield page.getByRole("button", { name: "Page 3" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(2); // 0-based index
+    }));
+    (0, fixtures_1.test)("next button click triggers pageDidChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="0"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        yield page.getByRole("button", { name: "Next page" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
+    }));
+    (0, fixtures_1.test)("previous button click triggers pageDidChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="2"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        yield page.getByRole("button", { name: "Previous page" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
+    }));
+    (0, fixtures_1.test)("first page button click triggers pageDidChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="3"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        yield page.getByRole("button", { name: "First page" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(0);
+    }));
+    (0, fixtures_1.test)("last page button click triggers pageDidChange event", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="0"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        yield page.getByRole("button", { name: "Last page" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(4); // Last page index
+    }));
+    (0, fixtures_1.test)("keyboard navigation works on page buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Pagination
+        var.current="0"
+        pageIndex="{current}"
+        onPageDidChange="(next) => current = next"
+        itemCount="50"
+        pageSize="10"
+        maxVisiblePages="5" />
+    `);
+        const pageButton = page.getByRole("button", { name: "Page 2" });
+        yield pageButton.click();
+        // Should navigate to page 2 (button should become active)
+        yield (0, fixtures_1.expect)(pageButton).toHaveAttribute("aria-label", "Page 2 (current)");
+        yield (0, fixtures_1.expect)(pageButton).toHaveAttribute("aria-current", "true");
+    }));
+    (0, fixtures_1.test)("space key activates page buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="0"
+        maxVisiblePages="5"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        const pageButton = page.getByRole("button", { name: "Page 3" });
+        yield pageButton.focus();
+        yield pageButton.press("Space");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(2);
+    }));
+    (0, fixtures_1.test)("enter key activates page buttons", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="50" 
+        pageSize="10" 
+        pageIndex="0"
+        maxVisiblePages="5"
+        onPageDidChange="arg => testState = arg"
+      />
+    `);
+        const pageButton = page.getByRole("button", { name: "Page 3" });
+        yield pageButton.focus();
+        yield pageButton.press("Enter");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(2);
+    }));
+    (0, fixtures_1.test)("pageDidChange fires correctly if itemCount is undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Pagination 
+        itemCount="{undefined}"
+        hasNextPage="{true}"
+        pageSize="10" 
+        pageIndex="0"
+        onPageDidChange="page => testState = page"
+      />
+    `);
+        const pageButton = page.getByRole("button", { name: "Next page" });
+        yield pageButton.click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
+    }));
+});
+// =============================================================================
+// API TESTS
+// =============================================================================
+fixtures_1.test.describe("Component APIs", () => {
+    (0, fixtures_1.test)("moveFirst API method works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="3"
+          onPageDidChange="arg => testState = arg"
+        />
+        <Button onClick="pagination.moveFirst()">Move First</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Move First" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(0);
+    }));
+    (0, fixtures_1.test)("moveLast API method works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="0"
+          onPageDidChange="arg => testState = arg"
+        />
+        <Button onClick="pagination.moveLast()">Move Last</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Move Last" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(4);
+    }));
+    (0, fixtures_1.test)("movePrev API method works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="2"
+          onPageDidChange="arg => testState = arg"
+        />
+        <Button onClick="pagination.movePrev()">Move Previous</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Move Previous" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(1);
+    }));
+    (0, fixtures_1.test)("moveNext API method works correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="1"
+          onPageDidChange="arg => testState = arg"
+        />
+        <Button onClick="pagination.moveNext()">Move Next</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Move Next" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(2);
+    }));
+    (0, fixtures_1.test)("currentPage API method returns correct value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="2"
+        />
+        <Button onClick="testState = pagination.currentPage">Get Current Page</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Get Current Page" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(3); // 1-based page number
+    }));
+    (0, fixtures_1.test)("currentPageSize API method returns correct value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="15"
+        />
+        <Button onClick="testState = pagination.currentPageSize">Get Page Size</Button>
+      </Fragment>
+    `);
+        yield page.getByRole("button", { name: "Get Page Size" }).click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(15);
+    }));
+    (0, fixtures_1.test)("API methods handle boundary conditions correctly (moveFirst, movePrev)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="0"
+          onPageDidChange="arg => testState = testState == null ? [arg] : [...testState, arg]"
+        />
+        <Button onClick="pagination.movePrev()">Move Previous From First</Button>
+        <Button onClick="pagination.moveFirst()">Move First From First</Button>
+      </Fragment>
+    `);
+        // Try to move previous from first page - should not trigger event
+        yield page.getByRole("button", { name: "Move Previous From First" }).click();
+        yield page.getByRole("button", { name: "Move First From First" }).click();
+        // Should not have triggered any page changes since we're already on first page
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+    }));
+    (0, fixtures_1.test)("API methods handle boundary conditions correctly (moveLast, moveNext)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <Pagination 
+          id="pagination"
+          itemCount="50" 
+          pageSize="10" 
+          pageIndex="5"
+          onPageDidChange="arg => testState = testState == null ? [arg] : [...testState, arg]"
+        />
+        <Button onClick="pagination.moveNext()">Move Next From Last</Button>
+        <Button onClick="pagination.moveLast()">Move Last From Last</Button>
+      </Fragment>
+    `);
+        // Try to move next from last page - should not trigger event
+        yield page.getByRole("button", { name: "Move Next From Last" }).click();
+        yield page.getByRole("button", { name: "Move Last From Last" }).click();
+        // Should not have triggered any page changes since we're already on last page
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("visible pages adjust correctly when navigating", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Pagination 
+        itemCount="100" 
+        pageSize="10" 
+        pageIndex="5"
+        maxVisiblePages="3"
+      />
+    `);
+        // Should show pages around current page (page 6: index 5)
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 5" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 6" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 7" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("visible pages handle edge case near beginning", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Pagination 
+        itemCount="100" 
+        pageSize="10" 
+        pageIndex="0"
+        maxVisiblePages="3"
+      />
+    `);
+        // Should show first 3 pages when on first page
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 3" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("visible pages handle edge case near end", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`
+      <Pagination 
+        itemCount="100" 
+        pageSize="10" 
+        pageIndex="9"
+        maxVisiblePages="3"
+      />
+    `);
+        // Should show last 3 pages when on last page
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 8" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 9" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 10" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("shows all pages when total pages less than maxVisiblePages", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+        yield initTestBed(`
+      <Pagination 
+        itemCount="30" 
+        pageSize="10" 
+        maxVisiblePages="5"
+      />
+    `);
+        // Should show all 3 pages since 3 < 5
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 3" })).toBeVisible();
+        // Should not show page 4 or 5
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 4" })).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 5" })).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles extremely large numbers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="9999999" pageSize="1000"/>`);
+        // Should handle large numbers without crashing
+        yield (0, fixtures_1.expect)(page.getByText(/Page 1 of \d+/)).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles page size larger than item count", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="5" pageSize="20"/>`);
+        // Should show only 1 page when page size exceeds item count
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 1 (5 items)")).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeDisabled();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Last page" })).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("handles pageIndex beyond valid range", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="30" pageSize="10" pageIndex="999"/>`);
+        // Should clamp to valid range - last page should be shown
+        yield (0, fixtures_1.expect)(page.getByText("Page 3 of 3 (30 items)")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles maxVisiblePages of 1 correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="50" pageSize="10" maxVisiblePages="1"/>`);
+        // Should show only current page as text, not as button
+        yield (0, fixtures_1.expect)(page.getByText("1", { exact: true })).toBeVisible();
+        // Should still show navigation buttons
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "First page" })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Next page" })).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles maxVisiblePages larger than total pages", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="20" pageSize="10" maxVisiblePages="10"/>`);
+        // Invalid maxVisiblePages (10) should fall back to default (1)
+        // With maxVisiblePages=1, should show current page as text, not buttons
+        yield (0, fixtures_1.expect)(page.getByText("1", { exact: true })).toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 1" })).not.toBeVisible();
+        yield (0, fixtures_1.expect)(page.getByRole("button", { name: "Page 2" })).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("works correctly with fractional page calculations", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        yield initTestBed(`<Pagination itemCount="17" pageSize="5"/>`);
+        // 17 items / 5 per page = 3.4 -> should round up to 4 pages
+        yield (0, fixtures_1.expect)(page.getByText("Page 1 of 4 (17 items)")).toBeVisible();
+    }));
+});