# Card View: Unmanaged PagingCardPage

The `card/PagingCardPage.svelte` component provides the UI and pagination controls for a card-based layout, while giving you full control over data fetching and state management via a `PagedDataManager`.

## Purpose

This component is the unmanaged counterpart to the managed card list. It's ideal when you need to display paginated data as cards but require custom logic for fetching data or integrating with an external state store.

## How It Works

This component is a **UI shell** that only accepts raw pagination state and callbacks as props — it does not accept a manager instance directly.
- **You control the data:** Your script is responsible for creating a `PagedDataManager` and passing its state properties to the component.
- **The manager holds the state:** The `PagedDataManager` instance tracks the current page number (`pageNo`), total pages (`pageCount`), total record count (`count`), and the current page's data (`list`).
- **The component renders the state:** `PagingCardPage` renders the pagination controls from the props you pass in, and delegates page changes back to your manager via the `onPageChange`/`onRowCountChanged` callbacks.

## Key Dependencies
-   **`@ticatec/app-data-manager/PagedDataManager`**: The "brain" of the component. You create and manage this object.
-   **render configuration object**: Used for automatic card rendering, containing component and props properties.

## How to Use

The pattern is identical to the unmanaged data table: create and manage a `PagedDataManager`, and then pass its state properties to the component.

1.  **Set up your data service and `PagedDataManager`.**

    ```ts
    import { PagingDataService } from '@ticatec/app-data-service';
    import { PagedDataManager } from '@ticatec/app-data-manager';

    class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }
    const service = new TenantService();

    const manager = new PagedDataManager(service, 'id');

    await manager.refresh();
    ```

2.  **Use the Component in Your Page**

    ```svelte
    <script lang="ts">
        // ... (script from above)
        import PagingCardPage from '@ticatec/uniface-pro-components/card/PagingCardPage';
        import TenantCard from './TenantCard.svelte';

        let page$attrs = {
            title: "Unmanaged Tenant Cards"
        };

        // Configure the render object
        let render = {
            component: TenantCard,
            props: {} // Any additional props to pass to the card
        };

        // Pagination callbacks delegate straight to the manager
        const onPageChange = (pageNo: number) => {
            manager.setPageNo(pageNo);
        };

        const onRowCountChanged = (pageSize: number) => {
            manager.setRowsPage(pageSize);
        };
    </script>

    <PagingCardPage
        {page$attrs}
        list={manager.list}
        {render}
        total={manager.count}
        pageCount={manager.pageCount}
        pageNo={manager.pageNo}
        {onPageChange}
        {onRowCountChanged}
        gap={12}
        canBeClosed={false}
    />
    ```

    This component does not provide create/refresh buttons or a search box on its own; use the `searchPanel` snippet to add those, or use the managed version `card/managed/PagingCardPage` instead.

## Component Props

-   `page$attrs: PageAttrs`: Page attributes containing title and other page-level settings. **(Required)**
-   `list: Array<any>`: The array of data items to display as cards.
-   `render: object`: Configuration object with `component` and `props` for rendering cards. **(Required)**
-   `total: number`: Total record count. **(Required)**
-   `pageCount: number`: Total number of pages. **(Required)**
-   `pageNo: number`: Current page number. **(Required)**
-   `onPageChange: OnPageChange`: Callback invoked when the page number changes. **(Required)**
-   `onRowCountChanged: OnPageSizeChange`: Callback invoked when the page size changes. **(Required)**
-   `gap?: number`: Gap between cards in pixels. Defaults to `12`.
-   `canBeClosed?: boolean`: Whether the page can be closed. Defaults to `false`.
-   `round?: boolean`: Whether the page container has rounded corners. Defaults to `true`.
-   `shadow?: boolean`: Whether the page container shows a shadow. Defaults to `true`.

## Snippets

-   `searchPanel?: Snippet`: Optional search panel content.

## Features

-   Paginated data display based on PagedDataManager
-   Built-in pagination controls
-   Flexible card-based layout with configurable gap
-   Automatic card rendering using the render configuration