@byline/host-tanstack-start 0.9.3

package/dist/admin-shell/collections/history.js

@@ -0,0 +1,252 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+import { useParams, useRouterState } from "@tanstack/react-router";
+import { StatusBadge, renderFormatted } from "@byline/ui";
+import { Container, IconButton, Section, Select, Table } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { Link, useNavigate } from "../chrome/loose-router.js";
+import { RouterPager } from "../chrome/router-pager.js";
+import { TableHeadingCellSortable } from "../chrome/th-sortable.js";
+import { formatNumber } from "../chrome/utils.js";
+import history_module from "./history.module.js";
+import { ViewMenu } from "./view-menu.js";
+function getColumnValue(document, fieldName) {
+    if (document.fields && fieldName in document.fields) return document.fields[fieldName];
+    return document[fieldName];
+}
+const DiffModal = /*#__PURE__*/ lazy(()=>import("@byline/ui").then((m)=>({
+            default: m.DiffModal
+        })));
+function resolveDisplayValue(value, locale, defaultContentLocale) {
+    if (null == value) return '';
+    if ('object' == typeof value && !Array.isArray(value)) {
+        const map = value;
+        const candidate = locale && 'all' !== locale ? map[locale] : map[defaultContentLocale] ?? Object.values(map)[0];
+        return null != candidate ? String(candidate) : '';
+    }
+    return String(value);
+}
+function Stats({ total }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: classnames('byline-coll-history-stats', history_module.stats),
+        children: formatNumber(total, 0)
+    });
+}
+function padRows(value) {
+    return Array.from({
+        length: value
+    }).map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('byline-coll-history-pad-row', history_module.padRow),
+            children: "\xa0"
+        }, `empty-row-${index}`));
+}
+const HistoryView = ({ collectionDefinition, adminConfig, data, workflowStatuses, currentDocument, contentLocales, defaultContentLocale })=>{
+    const { id, collection } = useParams({
+        from: '/(byline)/admin/collections/$collection/$id/history'
+    });
+    const navigate = useNavigate();
+    const columns = adminConfig?.columns || [];
+    const { labels } = collectionDefinition;
+    const location = useRouterState({
+        select: (s)=>s.location
+    });
+    const locale = location.search.locale;
+    const [selectedVersion, setSelectedVersion] = useState(null);
+    function handleOnPageSizeChange(value) {
+        if ('string' != typeof value || 0 === value.length) return;
+        const params = structuredClone(location.search);
+        delete params.page;
+        params.page_size = Number.parseInt(value, 10);
+        navigate({
+            to: '/admin/collections/$collection',
+            params: {
+                collection
+            },
+            search: params
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Section, {
+                children: /*#__PURE__*/ jsx(Container, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-coll-history-head', history_module.head),
+                        children: [
+                            /*#__PURE__*/ jsxs("h2", {
+                                className: classnames('byline-coll-history-title', history_module.title),
+                                children: [
+                                    labels.singular,
+                                    " History ",
+                                    /*#__PURE__*/ jsx(Stats, {
+                                        total: data?.meta.total
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(ViewMenu, {
+                                collection: collection,
+                                documentId: id,
+                                activeView: "history",
+                                locale: locale,
+                                contentLocales: contentLocales,
+                                defaultContentLocale: defaultContentLocale
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Section, {
+                children: /*#__PURE__*/ jsxs(Container, {
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames('byline-coll-history-options', history_module.options),
+                            children: /*#__PURE__*/ jsx(RouterPager, {
+                                page: data?.meta.page,
+                                count: data?.meta.totalPages,
+                                showFirstButton: true,
+                                showLastButton: true,
+                                componentName: "pagerTop",
+                                "aria-label": "Top Pager"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Table.Container, {
+                            className: classnames('byline-coll-history-table-wrap', history_module.tableWrap),
+                            children: [
+                                /*#__PURE__*/ jsxs(Table, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Table.Header, {
+                                            children: /*#__PURE__*/ jsxs(Table.Row, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("th", {
+                                                        scope: "col",
+                                                        className: classnames('byline-coll-history-col-version', history_module.colVersion)
+                                                    }),
+                                                    columns.map((column)=>/*#__PURE__*/ jsx(TableHeadingCellSortable, {
+                                                            fieldName: String(column.fieldName),
+                                                            label: column.label,
+                                                            sortable: column.sortable,
+                                                            scope: "col",
+                                                            align: column.align,
+                                                            className: column.className
+                                                        }, String(column.fieldName)))
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Body, {
+                                            children: data?.docs?.map((document, rowIndex)=>{
+                                                const versionId = document.versionId;
+                                                const { total, page, pageSize, desc } = data.meta;
+                                                const versionNumber = desc ? total - (page - 1) * pageSize - rowIndex : (page - 1) * pageSize + rowIndex + 1;
+                                                return /*#__PURE__*/ jsxs(Table.Row, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Table.Cell, {
+                                                            className: classnames('byline-coll-history-version-cell', history_module.versionCell),
+                                                            children: versionId && currentDocument ? /*#__PURE__*/ jsx(IconButton, {
+                                                                size: "xs",
+                                                                variant: "outlined",
+                                                                intent: "noeffect",
+                                                                "aria-label": "Compare this version with the current version",
+                                                                title: "Compare with current",
+                                                                className: classnames('byline-coll-history-version-button', history_module.versionButton),
+                                                                onClick: ()=>setSelectedVersion({
+                                                                        versionId,
+                                                                        label: new Date(document.createdAt).toLocaleString()
+                                                                    }),
+                                                                children: versionNumber
+                                                            }) : null
+                                                        }),
+                                                        columns.map((column)=>/*#__PURE__*/ jsx(Table.Cell, {
+                                                                className: classnames({
+                                                                    'byline-coll-history-cell-right': 'right' === column.align,
+                                                                    [history_module.cellRight]: 'right' === column.align,
+                                                                    'byline-coll-history-cell-center': 'center' === column.align,
+                                                                    [history_module.cellCenter]: 'center' === column.align
+                                                                }),
+                                                                children: 'title' === column.fieldName ? versionId && currentDocument ? /*#__PURE__*/ jsx("button", {
+                                                                    type: "button",
+                                                                    className: classnames('byline-coll-history-title-button', history_module.titleButton),
+                                                                    onClick: ()=>setSelectedVersion({
+                                                                            versionId,
+                                                                            label: new Date(document.createdAt).toLocaleString()
+                                                                        }),
+                                                                    children: column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : resolveDisplayValue(getColumnValue(document, column.fieldName), locale, defaultContentLocale) || '------'
+                                                                }) : /*#__PURE__*/ jsx(Link, {
+                                                                    to: '/admin/collections/$collection/$id',
+                                                                    params: {
+                                                                        collection,
+                                                                        id: document.id
+                                                                    },
+                                                                    children: column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : resolveDisplayValue(getColumnValue(document, column.fieldName), locale, defaultContentLocale) || '------'
+                                                                }) : column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : 'status' === column.fieldName && workflowStatuses ? /*#__PURE__*/ jsx(StatusBadge, {
+                                                                    status: document.status,
+                                                                    workflowStatuses: workflowStatuses
+                                                                }) : resolveDisplayValue(getColumnValue(document, column.fieldName), locale, defaultContentLocale) || ''
+                                                            }, String(column.fieldName)))
+                                                    ]
+                                                }, versionId ?? document.id);
+                                            })
+                                        })
+                                    ]
+                                }),
+                                padRows(6 - (data?.docs?.length ?? 0))
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: classnames('byline-coll-history-options byline-coll-history-options-bottom', history_module.options, history_module.optionsBottom),
+                            children: [
+                                /*#__PURE__*/ jsx(Select, {
+                                    containerClassName: classnames('byline-coll-history-page-size', history_module.pageSize),
+                                    id: "page_size",
+                                    name: "page_size",
+                                    size: "sm",
+                                    defaultValue: "15",
+                                    items: [
+                                        {
+                                            value: '15',
+                                            label: '15'
+                                        },
+                                        {
+                                            value: '30',
+                                            label: '30'
+                                        },
+                                        {
+                                            value: '50',
+                                            label: '50'
+                                        },
+                                        {
+                                            value: '100',
+                                            label: '100'
+                                        }
+                                    ],
+                                    onValueChange: handleOnPageSizeChange
+                                }),
+                                /*#__PURE__*/ jsx(RouterPager, {
+                                    smoothScrollToTop: true,
+                                    page: data?.meta.page,
+                                    count: data?.meta.totalPages,
+                                    showFirstButton: true,
+                                    showLastButton: true,
+                                    componentName: "pagerBottom",
+                                    "aria-label": "Bottom Pager"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            selectedVersion && currentDocument && /*#__PURE__*/ jsx(Suspense, {
+                fallback: null,
+                children: /*#__PURE__*/ jsx(DiffModal, {
+                    isOpen: true,
+                    onDismiss: ()=>setSelectedVersion(null),
+                    collection: collection,
+                    documentId: id,
+                    versionId: selectedVersion.versionId,
+                    versionLabel: selectedVersion.label,
+                    currentDocument: currentDocument,
+                    locale: locale
+                })
+            })
+        ]
+    });
+};
+export { HistoryView };

package/dist/admin-shell/collections/history.module.js

@@ -0,0 +1,18 @@
+import "./history_module.css";
+const history_module = {
+    head: "head-WvAUUN",
+    title: "title-zFZEGp",
+    stats: "stats-e6bP_s",
+    options: "options-oC29XB",
+    optionsBottom: "optionsBottom-ppYTec",
+    tableWrap: "tableWrap-VnRkHp",
+    cellRight: "cellRight-afH2v5",
+    cellCenter: "cellCenter-AE4ouW",
+    padRow: "padRow-l_FMib",
+    versionCell: "versionCell-Jc5W4g",
+    colVersion: "colVersion-xGf5qV",
+    versionButton: "versionButton-DXCZwj",
+    titleButton: "titleButton-RPuvJm",
+    pageSize: "pageSize-yT2Yee"
+};
+export default history_module;

package/dist/admin-shell/collections/history_module.css

@@ -0,0 +1,121 @@
+:is(.head-WvAUUN, .byline-coll-history-head) {
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-bottom: .5rem;
+  display: flex;
+}
+
+@media (min-width: 40rem) {
+  :is(.head-WvAUUN, .byline-coll-history-head) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+:is(.title-zFZEGp, .byline-coll-history-title) {
+  align-items: center;
+  gap: .5rem;
+  margin-bottom: .5rem;
+  display: flex;
+}
+
+:is(.stats-e6bP_s, .byline-coll-history-stats) {
+  white-space: nowrap;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: .375rem;
+  justify-content: center;
+  align-items: center;
+  min-width: 28px;
+  height: 28px;
+  margin-bottom: -4px;
+  margin-right: auto;
+  padding: 5px 6px;
+  font-size: .875rem;
+  line-height: 0;
+  display: flex;
+}
+
+:is(:is([data-theme="dark"], .dark) .stats-e6bP_s, :is([data-theme="dark"], .dark) .byline-coll-history-stats) {
+  background-color: var(--canvas-700);
+}
+
+:is(.options-oC29XB, .byline-coll-history-options) {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .5rem;
+  margin-top: .75rem;
+  margin-bottom: .75rem;
+  display: flex;
+}
+
+@media (min-width: 40rem) {
+  :is(.options-oC29XB, .byline-coll-history-options) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+:is(.optionsBottom-ppYTec, .byline-coll-history-options-bottom) {
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+}
+
+:is(.tableWrap-VnRkHp, .byline-coll-history-table-wrap) {
+  margin-top: .5rem;
+  margin-bottom: .75rem;
+}
+
+:is(.cellRight-afH2v5, .byline-coll-history-cell-right) {
+  text-align: right;
+}
+
+:is(.cellCenter-AE4ouW, .byline-coll-history-cell-center) {
+  text-align: center;
+}
+
+:is(.padRow-l_FMib, .byline-coll-history-pad-row) {
+  border: 0;
+  height: 32px;
+}
+
+:is(.versionCell-Jc5W4g, .byline-coll-history-version-cell) {
+  text-align: left;
+}
+
+:is(.colVersion-xGf5qV, .byline-coll-history-col-version) {
+  width: 1%;
+}
+
+:is(.versionButton-DXCZwj, .byline-coll-history-version-button) {
+  font-size: .75rem;
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.titleButton-RPuvJm, .byline-coll-history-title-button) {
+  text-align: left;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.titleButton-RPuvJm:hover {
+  opacity: .75;
+}
+
+.byline-coll-history-title-button:hover {
+  opacity: .75;
+}
+
+@media (min-width: 40rem) {
+  :is(.pageSize-yT2Yee, .byline-coll-history-page-size) {
+    margin-left: auto;
+  }
+}
+

package/dist/admin-shell/collections/list.d.ts

@@ -0,0 +1,16 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { ColumnDefinition, WorkflowStatus } from '@byline/core';
+import type { AnyCollectionSchemaTypes } from '@byline/core/zod-schemas';
+export declare const ListView: ({ data, columns, workflowStatuses, useAsTitle, }: {
+    data: AnyCollectionSchemaTypes["ListType"];
+    columns: ColumnDefinition[];
+    workflowStatuses?: WorkflowStatus[];
+    useAsTitle?: string;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=list.d.ts.map

package/dist/admin-shell/collections/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/admin-shell/collections/list.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAiExE,eAAO,MAAM,QAAQ,GAAI,kDAKtB;IACD,IAAI,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAA;IAC1C,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,cAAc,EAAE,CAAA;IACnC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,gCAiOA,CAAA"}

package/dist/admin-shell/collections/list.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useRouterState } from "@tanstack/react-router";
+import { StatusBadge, renderFormatted } from "@byline/ui";
+import { Container, IconButton, LoaderRing, PlusIcon, Search, Section, Select, Table } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { Link, useNavigate } from "../chrome/loose-router.js";
+import { RouterPager } from "../chrome/router-pager.js";
+import { TableHeadingCellSortable } from "../chrome/th-sortable.js";
+import { formatNumber } from "../chrome/utils.js";
+import list_module from "./list.module.js";
+function getColumnValue(document, fieldName) {
+    if (document.fields && fieldName in document.fields) return document.fields[fieldName];
+    return document[fieldName];
+}
+function Stats({ total }) {
+    const [showLoader, _] = useState(false);
+    if (showLoader) return /*#__PURE__*/ jsx(LoaderRing, {
+        className: classnames('byline-coll-list-stats-loader', list_module.statsLoader),
+        size: 24,
+        color: "#666666"
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: classnames('byline-coll-list-stats', list_module.stats),
+        children: formatNumber(total, 0)
+    });
+}
+function padRows(value) {
+    return Array.from({
+        length: value
+    }).map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('byline-coll-list-pad-row', list_module.padRow),
+            children: "\xa0"
+        }, `empty-row-${index}`));
+}
+const ListView = ({ data, columns, workflowStatuses, useAsTitle })=>{
+    const navigate = useNavigate();
+    const location = useRouterState({
+        select: (s)=>s.location
+    });
+    const statusItems = useMemo(()=>[
+            {
+                value: '_all',
+                label: 'All'
+            },
+            ...workflowStatuses?.map((ws)=>({
+                    value: ws.name,
+                    label: ws.label ?? ws.name
+                })) ?? []
+        ], [
+        workflowStatuses
+    ]);
+    const handleOnSearch = (query)=>{
+        if (null != query && query.length > 0) {
+            const params = structuredClone(location.search);
+            delete params.page;
+            params.query = query;
+            navigate({
+                to: '/admin/collections/$collection',
+                params: {
+                    collection: data.included.collection.path
+                },
+                search: params
+            });
+        }
+    };
+    const handleOnClear = ()=>{
+        const params = structuredClone(location.search);
+        delete params.page;
+        delete params.query;
+        navigate({
+            to: '/admin/collections/$collection',
+            params: {
+                collection: data.included.collection.path
+            },
+            search: params
+        });
+    };
+    const handleOnStatusFilter = (value)=>{
+        if ('string' != typeof value || 0 === value.length) return;
+        const params = structuredClone(location.search);
+        delete params.page;
+        if ('_all' === value) delete params.status;
+        else params.status = value;
+        navigate({
+            to: '/admin/collections/$collection',
+            params: {
+                collection: data.included.collection.path
+            },
+            search: params
+        });
+    };
+    function handleOnPageSizeChange(value) {
+        if ('string' != typeof value || 0 === value.length) return;
+        const params = structuredClone(location.search);
+        delete params.page;
+        params.page_size = Number.parseInt(value, 10);
+        navigate({
+            to: '/admin/collections/$collection',
+            params: {
+                collection: data.included.collection.path
+            },
+            search: params
+        });
+    }
+    return /*#__PURE__*/ jsx(Section, {
+        children: /*#__PURE__*/ jsxs(Container, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-coll-list-head', list_module.head),
+                    children: [
+                        /*#__PURE__*/ jsx("h1", {
+                            className: classnames('byline-coll-list-title', list_module.title),
+                            children: data.included.collection.labels.plural
+                        }),
+                        /*#__PURE__*/ jsx(Stats, {
+                            total: data?.meta.total
+                        }),
+                        /*#__PURE__*/ jsx(IconButton, {
+                            "aria-label": "Create New",
+                            render: /*#__PURE__*/ jsx(Link, {
+                                to: '/admin/collections/$collection/create',
+                                params: {
+                                    collection: data.included.collection.path
+                                }
+                            }),
+                            children: /*#__PURE__*/ jsx(PlusIcon, {
+                                height: "18px",
+                                width: "18px",
+                                svgClassName: "stroke-white"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-coll-list-options', list_module.options),
+                    children: [
+                        /*#__PURE__*/ jsx(Search, {
+                            onSearch: handleOnSearch,
+                            onClear: handleOnClear,
+                            inputSize: "sm",
+                            placeholder: "Search",
+                            className: classnames('byline-coll-list-search', list_module.search)
+                        }),
+                        workflowStatuses && workflowStatuses.length > 1 && /*#__PURE__*/ jsx(Select, {
+                            id: "status_filter",
+                            name: "status_filter",
+                            size: "sm",
+                            value: location.search.status ?? '_all',
+                            items: statusItems,
+                            onValueChange: handleOnStatusFilter
+                        }),
+                        /*#__PURE__*/ jsx(RouterPager, {
+                            page: data?.meta.page,
+                            count: data?.meta.totalPages,
+                            showFirstButton: true,
+                            showLastButton: true,
+                            componentName: "pagerTop",
+                            "aria-label": "Top Pager"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Table.Container, {
+                    className: classnames('byline-coll-list-table-wrap', list_module.tableWrap),
+                    children: [
+                        /*#__PURE__*/ jsxs(Table, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Header, {
+                                    children: /*#__PURE__*/ jsx(Table.Row, {
+                                        children: columns.map((column)=>/*#__PURE__*/ jsx(TableHeadingCellSortable, {
+                                                fieldName: String(column.fieldName),
+                                                label: column.label,
+                                                sortable: column.sortable,
+                                                scope: "col",
+                                                align: column.align,
+                                                className: column.className
+                                            }, String(column.fieldName)))
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Table.Body, {
+                                    children: data?.docs?.map((document)=>/*#__PURE__*/ jsx(Table.Row, {
+                                            children: columns.map((column)=>/*#__PURE__*/ jsx(Table.Cell, {
+                                                    className: classnames({
+                                                        'byline-coll-list-cell-right': 'right' === column.align,
+                                                        [list_module.cellRight]: 'right' === column.align,
+                                                        'byline-coll-list-cell-center': 'center' === column.align,
+                                                        [list_module.cellCenter]: 'center' === column.align
+                                                    }),
+                                                    children: useAsTitle && column.fieldName === useAsTitle ? /*#__PURE__*/ jsx(Link, {
+                                                        to: '/admin/collections/$collection/$id',
+                                                        params: {
+                                                            collection: data.included.collection.path,
+                                                            id: document.id
+                                                        },
+                                                        children: column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : getColumnValue(document, column.fieldName) ?? '------'
+                                                    }) : column.formatter ? renderFormatted(getColumnValue(document, column.fieldName), document, column.formatter) : 'status' === column.fieldName && workflowStatuses ? /*#__PURE__*/ jsx(StatusBadge, {
+                                                        status: document.status,
+                                                        workflowStatuses: workflowStatuses,
+                                                        hasPublishedVersion: document.hasPublishedVersion
+                                                    }) : String(getColumnValue(document, column.fieldName) ?? '')
+                                                }, String(column.fieldName)))
+                                        }, document.id))
+                                })
+                            ]
+                        }),
+                        padRows(6 - (data?.docs?.length ?? 0))
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: classnames('byline-coll-list-options byline-coll-list-options-bottom', list_module.options, list_module.optionsBottom),
+                    children: [
+                        /*#__PURE__*/ jsx(Select, {
+                            containerClassName: classnames('byline-coll-list-page-size', list_module.pageSize),
+                            id: "page_size",
+                            name: "page_size",
+                            size: "sm",
+                            defaultValue: "15",
+                            items: [
+                                {
+                                    value: '15',
+                                    label: '15'
+                                },
+                                {
+                                    value: '30',
+                                    label: '30'
+                                },
+                                {
+                                    value: '50',
+                                    label: '50'
+                                },
+                                {
+                                    value: '100',
+                                    label: '100'
+                                }
+                            ],
+                            onValueChange: handleOnPageSizeChange
+                        }),
+                        /*#__PURE__*/ jsx(RouterPager, {
+                            smoothScrollToTop: true,
+                            page: data?.meta.page,
+                            count: data?.meta.totalPages,
+                            showFirstButton: true,
+                            showLastButton: true,
+                            componentName: "pagerBottom",
+                            "aria-label": "Bottom Pager"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { ListView };