@solidxai/core-ui 0.1.19-beta.0 → 0.1.19-beta.1

package/dist/components/core/kanban/SolidKanbanView.js

@@ -54,7 +54,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getCollectionViewPermissionNames, permissionExpression } from "../../../helpers/permissions";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import { useGetSolidViewLayoutQuery } from "../../../redux/api/solidViewApi";
@@ -89,10 +89,11 @@ import { getSettingsMap, resolveRecordClickAction } from "../../../helpers/setti
 import { isButtonVisibleInCurrentEnv } from "../../../helpers/buttonEnvironment";
 import { useHandleListCustomButtonClick } from "../../../components/common/useHandleListCustomButtonClick";
 import { SolidListViewHeaderButton } from "../list/SolidListViewHeaderButton";
-import { SolidButton, SolidConfirmDialog, SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidIcon, } from "../../shad-cn-ui";
+import { SolidButton, SolidConfirmDialog, SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogSeparator, SolidDialogTitle, SolidIcon, SolidSelect, } from "../../shad-cn-ui";
 import { FilterMatchMode } from "../filter/filterMatchMode";
 import { kebabCase } from "lodash";
 var DEFAULT_RECORD_SORT = ["id:desc"];
+var SWIMLANE_PAGE_SIZE_OPTIONS = [10, 25, 50];
 var getKanbanSortParam = function (sortValue) {
     if (!sortValue) {
         return "id:asc";
@@ -133,7 +134,7 @@ var mergeKanbanGroupsWithDefinitions = function (groupRecords, swimlaneDefinitio
     });
 };
 export var SolidKanbanView = forwardRef(function (params, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
     var session = useSession();
     var user = (_a = session === null || session === void 0 ? void 0 : session.data) === null || _a === void 0 ? void 0 : _a.user;
     var visibleNavbar = useSelector(function (state) { var _a; return (_a = state.navbarState) === null || _a === void 0 ? void 0 : _a.visibleNavbar; });
@@ -142,26 +143,26 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
     var router = useRouter();
     var searchParams = useSearchParams();
     // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
-    var _0 = useState(), filters = _0[0], setFilters = _0[1];
-    var _1 = useState(null), filterPredicates = _1[0], setFilterPredicates = _1[1];
-    var _2 = useState([]), toPopulate = _2[0], setToPopulate = _2[1];
-    var _3 = useState([]), toPopulateMedia = _3[0], setToPopulateMedia = _3[1];
-    var _4 = useState([]), actionsAllowed = _4[0], setActionsAllowed = _4[1];
-    var _5 = useState(false), showGlobalSearchElement = _5[0], setShowGlobalSearchElement = _5[1];
-    var _6 = useState(false), showArchived = _6[0], setShowArchived = _6[1];
+    var _6 = useState(), filters = _6[0], setFilters = _6[1];
+    var _7 = useState(null), filterPredicates = _7[0], setFilterPredicates = _7[1];
+    var _8 = useState([]), toPopulate = _8[0], setToPopulate = _8[1];
+    var _9 = useState([]), toPopulateMedia = _9[0], setToPopulateMedia = _9[1];
+    var _10 = useState([]), actionsAllowed = _10[0], setActionsAllowed = _10[1];
+    var _11 = useState(false), showGlobalSearchElement = _11[0], setShowGlobalSearchElement = _11[1];
+    var _12 = useState(false), showArchived = _12[0], setShowArchived = _12[1];
     var sizeOptions = [
         { label: 'Compact', value: 'small', image: CompactImage },
         { label: 'Cozy', value: 'normal', image: CozyImage },
         { label: 'Comfortable', value: 'large', image: ComfortableImage }
     ];
-    var _7 = useState(sizeOptions[1].value), size = _7[0], setSize = _7[1];
-    var _8 = useState([]), viewModes = _8[0], setViewModes = _8[1];
-    var _9 = useState(""), groupByFieldName = _9[0], setGroupByFieldName = _9[1];
+    var _13 = useState(sizeOptions[1].value), size = _13[0], setSize = _13[1];
+    var _14 = useState([]), viewModes = _14[0], setViewModes = _14[1];
+    var _15 = useState(""), groupByFieldName = _15[0], setGroupByFieldName = _15[1];
     var triggerCheckIfPermissionExists = useLazyCheckIfPermissionExistsQuery()[0];
-    var _10 = useState(false), openLightbox = _10[0], setOpenLightbox = _10[1];
-    var _11 = useState([]), lightboxUrls = _11[0], setLightboxUrls = _11[1];
-    var _12 = useState(), filterQueryString = _12[0], setFilterQueryString = _12[1];
-    var _13 = useState(false), isLayoutDialogVisible = _13[0], setLayoutDialogVisible = _13[1];
+    var _16 = useState(false), openLightbox = _16[0], setOpenLightbox = _16[1];
+    var _17 = useState([]), lightboxUrls = _17[0], setLightboxUrls = _17[1];
+    var _18 = useState(), filterQueryString = _18[0], setFilterQueryString = _18[1];
+    var _19 = useState(false), isLayoutDialogVisible = _19[0], setLayoutDialogVisible = _19[1];
     var handleCustomButtonClick = useHandleListCustomButtonClick();
     var hasFilterPredicatesApplied = hasStoredFilterPredicates(filterPredicates);
     var hasActiveFilters = hasMeaningfulPersistedFilter(filters);
@@ -172,7 +173,7 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
             setShowGlobalSearchElement(hasAnyActiveFilters || hasStoredFilterState);
         }
     }, [hasAnyActiveFilters, hasStoredFilterState, params.embeded]);
-    var _14 = useState([]), swimlaneDefinitions = _14[0], setSwimlaneDefinitions = _14[1];
+    var _20 = useState([]), swimlaneDefinitions = _20[0], setSwimlaneDefinitions = _20[1];
     var lightboxSlides = Array.isArray(lightboxUrls)
         ? lightboxUrls
             .map(function (item) {
@@ -246,7 +247,7 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
     }, {
         encodeValuesOnly: true,
     });
-    var _15 = useState({}), kanbanViewMetaData = _15[0], setKanbanViewMetaData = _15[1];
+    var _21 = useState({}), kanbanViewMetaData = _21[0], setKanbanViewMetaData = _21[1];
     var solidKanbanViewMetaData = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs).data;
     var visibleHeaderButtons = ((_f = (_e = (_d = (_c = (_b = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.headerButtons) !== null && _f !== void 0 ? _f : [])
         .filter(function (button) { return isButtonVisibleInCurrentEnv(button === null || button === void 0 ? void 0 : button.attrs); });
@@ -343,23 +344,24 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
         }
     }, [solidKanbanViewMetaData]);
     // All kanban view state.
-    var _16 = useState([]), kanbanViewData = _16[0], setKanbanViewData = _16[1];
-    var _17 = useState({}), kanbanLoadMoreData = _17[0], setKanbanLoadMoreData = _17[1];
-    var _18 = useState(10), recordsInSwimlane = _18[0], setRecordsInSwimlane = _18[1];
-    var _19 = useState([]), selectedRecords = _19[0], setSelectedRecords = _19[1];
-    var _20 = useState(true), loading = _20[0], setLoading = _20[1];
-    var _21 = useState(false), isDialogVisible = _21[0], setDialogVisible = _21[1];
-    var _22 = useState(), createButtonUrl = _22[0], setCreateButtonUrl = _22[1];
-    var _23 = useState(), editButtonUrl = _23[0], setEditButtonUrl = _23[1];
-    var _24 = useState({}), createActionQueryParams = _24[0], setCreateActionQueryParams = _24[1];
-    var _25 = useState({}), editActionQueryParams = _25[0], setEditActionQueryParams = _25[1];
-    var _26 = useState(5), columnsCount = _26[0], setColumnsCount = _26[1];
-    var _27 = useState(1), swimLaneCurrentPageNumber = _27[0], setSwimLaneCurrentPageNumber = _27[1];
-    var _28 = useState(false), queryDataLoaded = _28[0], setQueryDataLoaded = _28[1];
-    var _29 = useState(false), showSaveFilterPopup = _29[0], setShowSaveFilterPopup = _29[1];
-    var _30 = useState(0), maxSwimLanesCount = _30[0], setMaxSwimLanesCount = _30[1];
-    var _31 = useState([]), rawKanbanGroupRecords = _31[0], setRawKanbanGroupRecords = _31[1];
-    var _32 = useState(0), serverSwimLaneCount = _32[0], setServerSwimLaneCount = _32[1];
+    var _22 = useState([]), kanbanViewData = _22[0], setKanbanViewData = _22[1];
+    var _23 = useState({}), kanbanLoadMoreData = _23[0], setKanbanLoadMoreData = _23[1];
+    var _24 = useState(10), recordsInSwimlane = _24[0], setRecordsInSwimlane = _24[1];
+    var _25 = useState([]), selectedRecords = _25[0], setSelectedRecords = _25[1];
+    var _26 = useState([]), recordsToDelete = _26[0], setRecordsToDelete = _26[1];
+    var _27 = useState(true), loading = _27[0], setLoading = _27[1];
+    var _28 = useState(false), isDialogVisible = _28[0], setDialogVisible = _28[1];
+    var _29 = useState(), createButtonUrl = _29[0], setCreateButtonUrl = _29[1];
+    var _30 = useState(), editButtonUrl = _30[0], setEditButtonUrl = _30[1];
+    var _31 = useState({}), createActionQueryParams = _31[0], setCreateActionQueryParams = _31[1];
+    var _32 = useState({}), editActionQueryParams = _32[0], setEditActionQueryParams = _32[1];
+    var _33 = useState(5), columnsCount = _33[0], setColumnsCount = _33[1];
+    var _34 = useState(1), swimLaneCurrentPageNumber = _34[0], setSwimLaneCurrentPageNumber = _34[1];
+    var _35 = useState(false), queryDataLoaded = _35[0], setQueryDataLoaded = _35[1];
+    var _36 = useState(false), showSaveFilterPopup = _36[0], setShowSaveFilterPopup = _36[1];
+    var _37 = useState(0), maxSwimLanesCount = _37[0], setMaxSwimLanesCount = _37[1];
+    var _38 = useState([]), rawKanbanGroupRecords = _38[0], setRawKanbanGroupRecords = _38[1];
+    var _39 = useState(0), serverSwimLaneCount = _39[0], setServerSwimLaneCount = _39[1];
     var pathname = usePathname();
     var solidSettingsData = useGetSolidSettingsQuery(undefined).data;
     var solidSettingsMap = getSettingsMap(solidSettingsData);
@@ -368,13 +370,15 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
     var recordClickAction = resolveRecordClickAction(solidSettingsMap, {
         isSystemModule: ((_j = (_h = (_g = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.module) === null || _j === void 0 ? void 0 : _j.isSystem) === true,
     });
+    var enableCardSelection = ((_o = (_m = (_l = (_k = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.layout) === null || _m === void 0 ? void 0 : _m.attrs) === null || _o === void 0 ? void 0 : _o.enableCardSelection) === true &&
+        params.embeded !== true;
     // Get the kanban view data.
     // const [triggerGetSolidEntitiesForKanban, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidKanbanEntitiesQuery();
     var triggerGetSolidEntities = useLazyGetSolidEntitiesQuery()[0];
-    var _33 = useLazyRecoverSolidEntityByIdQuery(), triggerRecoverSolidEntityById = _33[0], isRecoveringRecord = _33[1].isLoading;
+    var _40 = useLazyRecoverSolidEntityByIdQuery(), triggerRecoverSolidEntityById = _40[0], isRecoveringRecord = _40[1].isLoading;
     // Delete mutation 
-    var _34 = useDeleteMultipleSolidEntitiesMutation(), deleteManySolidEntities = _34[0], _35 = _34[1], isDeleteSolidEntitiesLoading = _35.isLoading, isDeleteSolidEntitiesSucess = _35.isSuccess;
-    var _36 = usePatchUpdateSolidEntityMutation(), patchKanbanView = _36[0], isPatchKanbanViewLoading = _36[1].isLoading;
+    var _41 = useDeleteMultipleSolidEntitiesMutation(), deleteManySolidEntities = _41[0], _42 = _41[1], isDeleteSolidEntitiesLoading = _42.isLoading, isDeleteSolidEntitiesSucess = _42.isSuccess;
+    var _43 = usePatchUpdateSolidEntityMutation(), patchKanbanView = _43[0], isPatchKanbanViewLoading = _43[1].isLoading;
     var applyArchivedQueryState = function (queryData) {
         if (showArchived) {
             queryData.showSoftDeleted = "inclusive";
@@ -590,6 +594,7 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
                 }
                 // triggerGetSolidEntities(queryString);
                 setSelectedRecords([]);
+                setRecordsToDelete([]);
             }
         }
     }, [groupByFieldName, isDeleteSolidEntitiesSucess, solidKanbanViewMetaData, swimlaneDefinitions]);
@@ -674,22 +679,42 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
     // clickable link allowing one to open the detail / form view.
     // handle bulk deletion
     var deleteBulk = function () {
-        var deleteList = [];
-        selectedRecords.forEach(function (element) {
-            deleteList.push(element.id);
-        });
+        var deleteList = recordsToDelete.map(function (element) { return element.id; });
         deleteManySolidEntities(deleteList);
         setDialogVisible(false);
     };
     // handle closing of the delete dialog...
     var onDeleteClose = function () {
         setDialogVisible(false);
-        setSelectedRecords([]);
+        setRecordsToDelete([]);
     };
     var openDeleteDialogForRecord = function (record) {
-        setSelectedRecords(record ? [record] : []);
+        setRecordsToDelete(record ? [record] : []);
+        setDialogVisible(true);
+    };
+    var openBulkDeleteDialog = function () {
+        setRecordsToDelete(selectedRecords);
         setDialogVisible(true);
     };
+    var handleCardSelectionChange = function (record, selected) {
+        if (!(record === null || record === void 0 ? void 0 : record.id))
+            return;
+        setSelectedRecords(function (previousRecords) {
+            var recordId = String(record.id);
+            var withoutRecord = previousRecords.filter(function (item) { return String(item === null || item === void 0 ? void 0 : item.id) !== recordId; });
+            return selected ? __spreadArray(__spreadArray([], withoutRecord, true), [record], false) : withoutRecord;
+        });
+    };
+    var handleLaneSelectionChange = function (records, selected) {
+        var laneRecords = Array.isArray(records) ? records.filter(function (record) { return (record === null || record === void 0 ? void 0 : record.id) != null; }) : [];
+        var laneIds = new Set(laneRecords.map(function (record) { return String(record.id); }));
+        setSelectedRecords(function (previousRecords) {
+            var outsideLane = previousRecords.filter(function (record) { return !laneIds.has(String(record === null || record === void 0 ? void 0 : record.id)); });
+            if (!selected)
+                return outsideLane;
+            return __spreadArray(__spreadArray([], outsideLane, true), laneRecords, true);
+        });
+    };
     var handleRecoverRecord = function (record) { return __awaiter(void 0, void 0, void 0, function () {
         var response, error_3;
         var _a, _b;
@@ -863,6 +888,9 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
                 case 2:
                     kanbanUpdateResponse = _c.sent();
                     if ((kanbanUpdateResponse === null || kanbanUpdateResponse === void 0 ? void 0 : kanbanUpdateResponse.statusCode) === 200) {
+                        setSelectedRecords(function (previousRecords) { return previousRecords.map(function (record) {
+                            return String(record === null || record === void 0 ? void 0 : record.id) === String(updatedItem === null || updatedItem === void 0 ? void 0 : updatedItem.id) ? updatedItem : record;
+                        }); });
                         dispatch(showToast({ severity: "success", summary: ERROR_MESSAGES.IS_SUCCESS, detail: ERROR_MESSAGES.KANBAN_UPDATED }));
                     }
                     else {
@@ -963,7 +991,9 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
                             queryfilter.$and.push(filterPredicates.predefined_search_predicate);
                         }
                         customFilter = filterPredicates;
-                        updatedFilter = __assign(__assign({}, (filters || {})), (queryfilter || {}));
+                        updatedFilter = filterPredicates.replaceFilters
+                            ? queryfilter
+                            : __assign(__assign({}, (filters || {})), (queryfilter || {}));
                         // Then update state
                         setFilterPredicates(structuredClone(filterPredicates));
                         setFilters(updatedFilter);
@@ -1057,8 +1087,8 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
             }
         }
     }, [solidKanbanViewMetaData]);
-    var kanbanViewTitle = (_l = (_k = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.displayName;
-    var entityDisplayName = ((_p = (_o = (_m = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.model) === null || _p === void 0 ? void 0 : _p.displayName) || params.modelName;
+    var kanbanViewTitle = (_q = (_p = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _p === void 0 ? void 0 : _p.solidView) === null || _q === void 0 ? void 0 : _q.displayName;
+    var entityDisplayName = ((_t = (_s = (_r = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.model) === null || _t === void 0 ? void 0 : _t.displayName) || params.modelName;
     var headerRequestStatusLabel = isDeleteSolidEntitiesLoading ? "Deleting..." : isPatchKanbanViewLoading ? "Updating..." : isRecoveringRecord ? "Recovering..." : loading || !queryDataLoaded ? "Loading..." : null;
     var handleRefreshView = function () {
         var _a, _b;
@@ -1098,9 +1128,10 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
             filters: filters,
             filterPredicates: filterPredicates,
             kanbanData: cloneKanbanData(),
+            selectedRecords: selectedRecords,
             loading: loading,
         }); },
-    }); }, [groupByFieldName, showArchived, filters, filterPredicates, kanbanViewData, loading]);
+    }); }, [groupByFieldName, showArchived, filters, filterPredicates, kanbanViewData, selectedRecords, loading]);
     var toggleBothSidebars = function () {
         if (visibleNavbar) {
             dispatch(toggleNavbar()); // close both
@@ -1110,9 +1141,16 @@ export var SolidKanbanView = forwardRef(function (params, ref) {
         }
     };
     console.log("Logging kanban data: ", solidKanbanViewMetaData);
-    return (_jsxs("div", { className: "page-parent-wrapper solid-list-page-wrapper flex h-full min-h-0 overflow-hidden", children: [_jsx("div", { className: "solid-list-content  flex flex-col flex-grow-1", children: _jsxs("div", { className: "solid-list-surface solid-kanban-surface flex flex-col flex-1 min-h-0", children: [_jsx("div", { className: "page-header solid-list-toolbar solid-kanban-toolbar flex-col lg:flex-row", children: _jsxs("div", { className: "flex w-full flex-col-reverse  lg:flex-row lg:items-center items-end", children: [_jsx("div", { className: "solid-list-toolbar-left flex w-full items-center gap-3 lg:min-w-0 lg:flex-1", children: _jsx("div", { className: "".concat(showGlobalSearchElement ? "flex" : "max-lg:hidden lg:flex", " w-full mt-3 lg:mt-0 lg:min-w-0"), children: _jsx(SolidGlobalSearchElement, { viewType: "kanban", showSaveFilterPopup: showSaveFilterPopup, setShowSaveFilterPopup: setShowSaveFilterPopup, ref: solidGlobalSearchElementRef, viewData: solidKanbanViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter, filterPredicates: filterPredicates, allowMultipleSavedFilters: true }) }) }), _jsxs("div", { className: "flex items-center solid-header-buttons-wrapper solid-list-toolbar-actions lg:ml-auto", children: [_jsx(SolidHeaderRequestStatus, { label: headerRequestStatusLabel }), _jsx("div", { className: "solid-list-search-toggle", children: _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", onClick: function () { return setShowGlobalSearchElement(!showGlobalSearchElement); }, "aria-label": "Toggle search", leftIcon: _jsx(SolidIcon, { name: "si-search", "aria-hidden": true }) }) }), _jsx("div", { className: "solid-header-buttons-wrapper max-lg:hidden items-center lg:flex", children: (_q = visibleHeaderButtons === null || visibleHeaderButtons === void 0 ? void 0 : visibleHeaderButtons.filter(function (button) { var _a; return ((_a = button === null || button === void 0 ? void 0 : button.attrs) === null || _a === void 0 ? void 0 : _a.actionInContextMenu) !== true; })) === null || _q === void 0 ? void 0 : _q.map(function (button, index) { return (_jsx(SolidListViewHeaderButton, { button: button, params: params, solidListViewMetaData: solidKanbanViewMetaData, handleCustomButtonClick: handleCustomButtonClick, selectedRecords: selectedRecords, filters: filters }, index)); }) }), actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'create'))) && ((_t = (_s = (_r = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.layout) === null || _t === void 0 ? void 0 : _t.attrs.create) !== false &&
-                                                _jsx(SolidCreateButton, { createButtonUrl: createButtonUrl, createActionQueryParams: createActionQueryParams, responsiveIconOnly: true }), actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'delete'))) && ((_w = (_v = (_u = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _u === void 0 ? void 0 : _u.solidView) === null || _v === void 0 ? void 0 : _v.layout) === null || _w === void 0 ? void 0 : _w.attrs.delete) !== false && selectedRecords.length > 0 && _jsx(SolidButton, { type: "button", variant: "destructive", size: "sm", onClick: function () { return setDialogVisible(true); }, children: "Delete" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", onClick: handleRefreshView, "aria-label": "Refresh board", leftIcon: _jsx(SolidIcon, { name: "si-refresh", "aria-hidden": true }) }), _jsx(SolidKanbanViewConfigure, { solidKanbanViewMetaData: solidKanbanViewMetaData, params: params, modelName: params.modelName, actionsAllowed: actionsAllowed, headerButtons: visibleHeaderButtons, handleCustomButtonClick: handleCustomButtonClick, selectedRecords: selectedRecords, filters: filters, viewModes: viewModes, setShowArchived: setShowArchived, showArchived: showArchived, setLayoutDialogVisible: setLayoutDialogVisible, setShowSaveFilterPopup: setShowSaveFilterPopup, hasAnyActiveFilters: hasAnyActiveFilters, handleRefreshView: handleRefreshView })] })] }) }), solidKanbanViewMetaData && kanbanViewData &&
-                            _jsx(KanbanBoard, { groupByFieldName: groupByFieldName, kanbanViewData: kanbanViewData, maxSwimLanesCount: maxSwimLanesCount, solidKanbanViewMetaData: solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data, setKanbanViewData: setKanbanViewData, handleLoadMore: handleLoadMore, onDragEnd: onDragEnd, handleSwimLanePagination: handleSwimLanePagination, onDelete: actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'delete'))) && ((_z = (_y = (_x = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _x === void 0 ? void 0 : _x.solidView) === null || _y === void 0 ? void 0 : _y.layout) === null || _z === void 0 ? void 0 : _z.attrs.delete) !== false ? openDeleteDialogForRecord : undefined, onRecover: handleRecoverRecord, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editBaseUrl, recordClickAction: recordClickAction, showArchived: showArchived, params: params, handleCustomButtonClick: handleCustomButtonClick })] }) }), _jsx(SolidConfirmDialog, { open: isDialogVisible, onCancel: onDeleteClose, onConfirm: deleteBulk, className: "solid-shadcn-confirm-dialog solid-delete-confirm-dialog", headerClassName: "solid-shadcn-dialog-head", bodyClassName: "solid-shadcn-dialog-body", footerClassName: "solid-shadcn-dialog-actions", separatorClassName: "solid-shadcn-dialog-sep", showSeparator: true, title: "Delete ".concat(entityDisplayName), message: _jsx("p", { className: "solid-shadcn-dialog-text", children: selectedRecords.length === 1
+    return (_jsxs("div", { className: "page-parent-wrapper solid-list-page-wrapper flex h-full min-h-0 overflow-hidden", children: [_jsx("div", { className: "solid-list-content  flex flex-col flex-grow-1", children: _jsxs("div", { className: "solid-list-surface solid-kanban-surface flex flex-col flex-1 min-h-0", children: [_jsx("div", { className: "page-header solid-list-toolbar solid-kanban-toolbar flex-col lg:flex-row", children: _jsxs("div", { className: "flex w-full flex-col-reverse  lg:flex-row lg:items-center items-end", children: [_jsx("div", { className: "solid-list-toolbar-left flex w-full items-center gap-3 lg:min-w-0 lg:flex-1", children: _jsx("div", { className: "".concat(showGlobalSearchElement ? "flex" : "max-lg:hidden lg:flex", " w-full mt-3 lg:mt-0 lg:min-w-0"), children: _jsx(SolidGlobalSearchElement, { viewType: "kanban", showSaveFilterPopup: showSaveFilterPopup, setShowSaveFilterPopup: setShowSaveFilterPopup, ref: solidGlobalSearchElementRef, viewData: solidKanbanViewMetaData, handleApplyCustomFilter: handleApplyCustomFilter, filterPredicates: filterPredicates, allowMultipleSavedFilters: true }) }) }), _jsxs("div", { className: "flex items-center solid-header-buttons-wrapper solid-list-toolbar-actions lg:ml-auto", children: [_jsx(SolidHeaderRequestStatus, { label: headerRequestStatusLabel }), _jsx("div", { className: "solid-list-search-toggle", children: _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", onClick: function () { return setShowGlobalSearchElement(!showGlobalSearchElement); }, "aria-label": "Toggle search", leftIcon: _jsx(SolidIcon, { name: "si-search", "aria-hidden": true }) }) }), _jsx("div", { className: "solid-header-buttons-wrapper max-lg:hidden items-center lg:flex", children: (_u = visibleHeaderButtons === null || visibleHeaderButtons === void 0 ? void 0 : visibleHeaderButtons.filter(function (button) { var _a; return ((_a = button === null || button === void 0 ? void 0 : button.attrs) === null || _a === void 0 ? void 0 : _a.actionInContextMenu) !== true; })) === null || _u === void 0 ? void 0 : _u.map(function (button, index) { return (_jsx(SolidListViewHeaderButton, { button: button, params: params, solidListViewMetaData: solidKanbanViewMetaData, handleCustomButtonClick: handleCustomButtonClick, selectedRecords: selectedRecords, filters: filters }, index)); }) }), actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'create'))) && ((_x = (_w = (_v = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _v === void 0 ? void 0 : _v.solidView) === null || _w === void 0 ? void 0 : _w.layout) === null || _x === void 0 ? void 0 : _x.attrs.create) !== false &&
+                                                _jsx(SolidCreateButton, { createButtonUrl: createButtonUrl, createActionQueryParams: createActionQueryParams, responsiveIconOnly: true }), enableCardSelection && actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'delete'))) && ((_0 = (_z = (_y = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _y === void 0 ? void 0 : _y.solidView) === null || _z === void 0 ? void 0 : _z.layout) === null || _0 === void 0 ? void 0 : _0.attrs.delete) !== false && selectedRecords.length > 0 && _jsx(SolidButton, { type: "button", variant: "destructive", size: "sm", onClick: openBulkDeleteDialog, children: "Delete" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", className: "solid-icon-button", onClick: handleRefreshView, "aria-label": "Refresh board", leftIcon: _jsx(SolidIcon, { name: "si-refresh", "aria-hidden": true }) }), _jsx(SolidKanbanViewConfigure, { solidKanbanViewMetaData: solidKanbanViewMetaData, params: params, modelName: params.modelName, actionsAllowed: actionsAllowed, headerButtons: visibleHeaderButtons, handleCustomButtonClick: handleCustomButtonClick, selectedRecords: selectedRecords, filters: filters, viewModes: viewModes, setShowArchived: setShowArchived, showArchived: showArchived, setLayoutDialogVisible: setLayoutDialogVisible, setShowSaveFilterPopup: setShowSaveFilterPopup, hasAnyActiveFilters: hasAnyActiveFilters, handleRefreshView: handleRefreshView })] })] }) }), solidKanbanViewMetaData && kanbanViewData &&
+                            _jsx(KanbanBoard, { groupByFieldName: groupByFieldName, kanbanViewData: kanbanViewData, maxSwimLanesCount: maxSwimLanesCount, solidKanbanViewMetaData: solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data, setKanbanViewData: setKanbanViewData, handleLoadMore: handleLoadMore, onDragEnd: onDragEnd, handleSwimLanePagination: handleSwimLanePagination, onDelete: actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'delete'))) && ((_3 = (_2 = (_1 = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.data) === null || _1 === void 0 ? void 0 : _1.solidView) === null || _2 === void 0 ? void 0 : _2.layout) === null || _3 === void 0 ? void 0 : _3.attrs.delete) !== false ? openDeleteDialogForRecord : undefined, onRecover: handleRecoverRecord, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editBaseUrl, recordClickAction: recordClickAction, showArchived: showArchived, params: params, handleCustomButtonClick: handleCustomButtonClick, enableCardSelection: enableCardSelection, selectedRecords: selectedRecords, onCardSelectionChange: handleCardSelectionChange, onToggleLaneSelection: handleLaneSelectionChange }), _jsxs("div", { className: "solid-kanban-statusbar", role: "status", "aria-label": "Kanban board status", children: [_jsx("div", { className: "solid-kanban-statusbar-selection", "aria-live": "polite", children: enableCardSelection ? (_jsxs(_Fragment, { children: [_jsxs("span", { children: [selectedRecords.length, " selected"] }), selectedRecords.length > 0 && (_jsx(SolidButton, { type: "button", variant: "ghost", size: "sm", onClick: function () { return setSelectedRecords([]); }, "aria-label": "Clear selected cards", children: "Clear" }))] })) : null }), _jsxs("div", { className: "solid-kanban-statusbar-board", children: [_jsxs("span", { children: ["Showing ", (_4 = kanbanViewData === null || kanbanViewData === void 0 ? void 0 : kanbanViewData.length) !== null && _4 !== void 0 ? _4 : 0, " ", ((_5 = kanbanViewData === null || kanbanViewData === void 0 ? void 0 : kanbanViewData.length) !== null && _5 !== void 0 ? _5 : 0) === 1 ? "swimlane" : "swimlanes"] }), _jsx("span", { className: "solid-kanban-statusbar-separator", "aria-hidden": "true", children: "\u00B7" }), _jsxs("label", { className: "solid-kanban-statusbar-page-size", children: [_jsx("span", { children: "Max cards per swimlane" }), _jsx(SolidSelect, { id: "kanban-swimlane-page-size", value: recordsInSwimlane, options: Array.from(new Set(__spreadArray(__spreadArray([], SWIMLANE_PAGE_SIZE_OPTIONS, true), [recordsInSwimlane], false)))
+                                                        .sort(function (left, right) { return left - right; })
+                                                        .map(function (value) { return ({ label: String(value), value: value }); }), optionLabel: "label", optionValue: "value", onChange: function (event) {
+                                                        var nextPageSize = Number(event.value);
+                                                        if (Number.isFinite(nextPageSize) && nextPageSize > 0 && nextPageSize !== recordsInSwimlane) {
+                                                            setRecordsInSwimlane(nextPageSize);
+                                                        }
+                                                    } })] })] })] })] }) }), _jsx(SolidConfirmDialog, { open: isDialogVisible, onCancel: onDeleteClose, onConfirm: deleteBulk, className: "solid-shadcn-confirm-dialog solid-delete-confirm-dialog", headerClassName: "solid-shadcn-dialog-head", bodyClassName: "solid-shadcn-dialog-body", footerClassName: "solid-shadcn-dialog-actions", separatorClassName: "solid-shadcn-dialog-sep", showSeparator: true, title: "Delete ".concat(entityDisplayName), message: _jsx("p", { className: "solid-shadcn-dialog-text", children: recordsToDelete.length === 1
                         ? "Are you sure you want to delete this ".concat(entityDisplayName, " record?")
                         : "Are you sure you want to delete the selected ".concat(entityDisplayName, " records?") }), confirmLabel: "Delete", cancelLabel: "Cancel" }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-kanban-layout-dialog", style: { width: "min(800px, calc(100vw - 32px))" }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Change Kanban Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "solid-kanban-layout-dialog-body", children: _jsx(KanbanUserViewLayout, { solidKanbanViewMetaData: solidKanbanViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] })] }));
 });