@umbraco-cms/backoffice 14.0.0--preview004-2f33e9be → 14.0.0--preview004-19e302a4

package/dist-cms/custom-elements.json

@@ -498,6 +498,17 @@
         }
       ]
     },
+    {
+      "name": "umb-collection-pagination",
+      "path": "./../src/packages/core/collection/components/pagination/collection-pagination.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
     {
       "name": "umb-dashboard-collection",
       "path": "./../src/packages/core/collection/dashboards/dashboard-collection.element.ts",
@@ -6127,6 +6138,39 @@
         }
       ]
     },
+    {
+      "name": "umb-media-type-design-workspace-view",
+      "path": "./../src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
+    {
+      "name": "umb-media-type-list-view-workspace-view",
+      "path": "./../src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
+    {
+      "name": "umb-media-type-permissions-workspace-view",
+      "path": "./../src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
     {
       "name": "umb-collection-view-media-test",
       "path": "./../src/packages/media/media/collection-view/collection-view-media-test.element.ts",

package/dist-cms/mocks/browser-handlers.js

@@ -16,7 +16,7 @@ import { handlers as profilingHandlers } from './handlers/performance-profiling.
 import { handlers as documentHandlers } from './handlers/document/index.js';
 import { handlers as mediaHandlers } from './handlers/media.handlers.js';
 import { handlers as dictionaryHandlers } from './handlers/dictionary.handlers.js';
-import { handlers as mediaTypeHandlers } from './handlers/media-type.handlers.js';
+import { handlers as mediaTypeHandlers } from './handlers/media-type/index.js';
 import { handlers as memberGroupHandlers } from './handlers/member-group.handlers.js';
 import { handlers as memberHandlers } from './handlers/member.handlers.js';
 import { handlers as memberTypeHandlers } from './handlers/member-type.handlers.js';

package/dist-cms/mocks/data/media-type.data.d.ts

@@ -1,12 +1,17 @@
-import type { MediaTypeDetails } from '../../packages/media/media-types/types.js';
 import { UmbEntityData } from './entity.data.js';
-import { FolderTreeItemResponseModel, PagedMediaTreeItemResponseModel } from '../../external/backend-api/index.js';
-export declare const data: Array<MediaTypeDetails>;
-declare class UmbMediaTypeData extends UmbEntityData<MediaTypeDetails> {
+import { MediaTypeResponseModel, MediaTypeTreeItemResponseModel } from '../../external/backend-api/index.js';
+export declare const data: Array<MediaTypeResponseModel>;
+export declare const treeData: Array<MediaTypeTreeItemResponseModel>;
+declare class UmbMediaTypeData extends UmbEntityData<MediaTypeResponseModel> {
+    private treeData;
     constructor();
-    getTreeRoot(): PagedMediaTreeItemResponseModel;
-    getTreeItemChildren(id: string): PagedMediaTreeItemResponseModel;
-    getTreeItem(ids: Array<string>): Array<FolderTreeItemResponseModel>;
+    insert(item: MediaTypeResponseModel): import("../../external/backend-api/index.js").ContentTypeResponseModelBaseMediaTypePropertyTypeResponseModelMediaTypePropertyTypeContainerResponseModel;
+    update(id: string, item: MediaTypeResponseModel): import("../../external/backend-api/index.js").ContentTypeResponseModelBaseMediaTypePropertyTypeResponseModelMediaTypePropertyTypeContainerResponseModel;
+    getItems(ids: Array<string>): Array<MediaTypeTreeItemResponseModel>;
+    getTreeRoot(): Array<MediaTypeTreeItemResponseModel>;
+    getTreeItemChildren(id: string): Array<MediaTypeTreeItemResponseModel>;
+    getTreeItems(ids: Array<string>): Array<MediaTypeTreeItemResponseModel>;
+    getAllowedTypesOf(id: string): Array<MediaTypeTreeItemResponseModel>;
 }
 export declare const umbMediaTypeData: UmbMediaTypeData;
 export {};

package/dist-cms/mocks/data/media-type.data.js

@@ -1,27 +1,25 @@
 import { UmbEntityData } from './entity.data.js';
-import { createFolderTreeItem } from './utils.js';
+import { createMediaTypeTreeItem } from './utils.js';
 export const data = [
     {
         name: 'Media Type 1',
-        type: 'media-type',
-        hasChildren: false,
         id: 'c5159663-eb82-43ee-bd23-e42dc5e71db6',
-        isContainer: false,
-        parentId: null,
-        isFolder: false,
+        description: 'Media type 1 description',
         alias: 'mediaType1',
+        icon: 'umb:bug',
         properties: [],
+        containers: [],
     },
+];
+export const treeData = [
     {
-        name: 'Media Type 2',
+        name: data[0].name,
+        id: data[0].id,
+        icon: data[0].icon,
         type: 'media-type',
         hasChildren: false,
-        id: '22da1b0b-c310-4730-9912-c30b3eb9802e',
         isContainer: false,
         parentId: null,
-        isFolder: false,
-        alias: 'mediaType2',
-        properties: [],
     },
 ];
 // Temp mocked database
@@ -31,22 +29,48 @@ export const data = [
 class UmbMediaTypeData extends UmbEntityData {
     constructor() {
         super(data);
+        this.treeData = treeData;
+    }
+    // TODO: Can we do this smarter so we don't need to make this for each mock data:
+    insert(item) {
+        const result = super.insert(item);
+        this.treeData.push(createMediaTypeTreeItem(result));
+        return result;
+    }
+    update(id, item) {
+        const result = super.save(id, item);
+        this.treeData = this.treeData.map((x) => {
+            if (x.id === result.id) {
+                return createMediaTypeTreeItem(result);
+            }
+            else {
+                return x;
+            }
+        });
+        return result;
+    }
+    getItems(ids) {
+        const items = this.data.filter((item) => ids.includes(item.id ?? ''));
+        return items.map((item) => item);
     }
     getTreeRoot() {
-        const items = this.data.filter((item) => item.parentId === null);
-        const treeItems = items.map((item) => createFolderTreeItem(item));
-        const total = items.length;
-        return { items: treeItems, total };
+        const rootItems = this.treeData.filter((item) => item.parentId === null);
+        const result = rootItems.map((item) => createMediaTypeTreeItem(item));
+        return result;
     }
     getTreeItemChildren(id) {
-        const items = this.data.filter((item) => item.parentId === id);
-        const treeItems = items.map((item) => createFolderTreeItem(item));
-        const total = items.length;
-        return { items: treeItems, total };
+        const childItems = this.treeData.filter((item) => item.parentId === id);
+        return childItems.map((item) => item);
     }
-    getTreeItem(ids) {
-        const items = this.data.filter((item) => ids.includes(item.id ?? ''));
-        return items.map((item) => createFolderTreeItem(item));
+    getTreeItems(ids) {
+        const items = this.treeData.filter((item) => ids.includes(item.id ?? ''));
+        return items.map((item) => item);
+    }
+    getAllowedTypesOf(id) {
+        const mediaType = this.getById(id);
+        const allowedTypeKeys = mediaType?.allowedContentTypes?.map((mediaType) => mediaType.id) ?? [];
+        const items = this.treeData.filter((item) => allowedTypeKeys.includes(item.id ?? ''));
+        return items.map((item) => item);
     }
 }
 export const umbMediaTypeData = new UmbMediaTypeData();

package/dist-cms/mocks/data/user.data.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityData } from './entity.data.js';
 import { UmbLoggedInUser } from '../../shared/auth/index.js';
-import { CreateUserRequestModel, CreateUserResponseModel, InviteUserRequestModel, UpdateUserGroupsOnUserRequestModel, UserItemResponseModel, UserResponseModel } from '../../external/backend-api/index.js';
+import { CreateUserRequestModel, CreateUserResponseModel, InviteUserRequestModel, PagedUserResponseModel, UpdateUserGroupsOnUserRequestModel, UserItemResponseModel, UserResponseModel } from '../../external/backend-api/index.js';
 declare class UmbUserData extends UmbEntityData<UserResponseModel> {
     constructor(data: UserResponseModel[]);
     /**
@@ -46,7 +46,13 @@ declare class UmbUserData extends UmbEntityData<UserResponseModel> {
      * @memberof UmbUserData
      */
     unlock(ids: Array<string>): void;
+    /**
+     * Invites a user
+     * @param {InviteUserRequestModel} data
+     * @memberof UmbUserData
+     */
     invite(data: InviteUserRequestModel): void;
+    filter(options: any): PagedUserResponseModel;
 }
 export declare const data: Array<UserResponseModel & {
     type: string;

package/dist-cms/mocks/data/user.data.js

@@ -1,6 +1,7 @@
-import { UmbId } from '../../packages/core/id/index.js';
 import { UmbEntityData } from './entity.data.js';
 import { umbUserGroupData } from './user-group.data.js';
+import { arrayFilter, stringFilter, queryFilter } from './utils.js';
+import { UmbId } from '../../packages/core/id/index.js';
 import { UserStateModel, } from '../../external/backend-api/index.js';
 const createUserItem = (item) => {
     return {
@@ -8,6 +9,9 @@ const createUserItem = (item) => {
         id: item.id,
     };
 };
+const userGroupFilter = (filterOptions, item) => arrayFilter(filterOptions.userGroupIds, item.userGroupIds);
+const userStateFilter = (filterOptions, item) => stringFilter(filterOptions.userStates, item.state);
+const userQueryFilter = (filterOptions, item) => queryFilter(filterOptions.filter, item.name);
 // Temp mocked database
 class UmbUserData extends UmbEntityData {
     constructor(data) {
@@ -116,6 +120,11 @@ class UmbUserData extends UmbEntityData {
             user.state = UserStateModel.ACTIVE;
         });
     }
+    /**
+     * Invites a user
+     * @param {InviteUserRequestModel} data
+     * @memberof UmbUserData
+     */
     invite(data) {
         const invitedUser = {
             status: UserStateModel.INVITED,
@@ -123,6 +132,23 @@ class UmbUserData extends UmbEntityData {
         };
         this.createUser(invitedUser);
     }
+    filter(options) {
+        const { items: allItems } = this.getAll();
+        const filterOptions = {
+            skip: options.skip || 0,
+            take: options.take || 25,
+            orderBy: options.orderBy || 'name',
+            orderDirection: options.orderDirection || 'asc',
+            userGroupIds: options.userGroupIds,
+            userStates: options.userStates,
+            filter: options.filter,
+        };
+        const filteredItems = allItems.filter((item) => userGroupFilter(filterOptions, item) && userStateFilter(filterOptions, item) && userQueryFilter(filterOptions, item));
+        const totalItems = filteredItems.length;
+        const paginatedItems = filteredItems.slice(filterOptions.skip, filterOptions.skip + filterOptions.take);
+        return { total: totalItems, items: paginatedItems };
+    }
+    ;
 }
 export const data = [
     {

package/dist-cms/mocks/data/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ContentTreeItemResponseModel, DocumentTreeItemResponseModel, DocumentTypeTreeItemResponseModel, EntityTreeItemResponseModel, FolderTreeItemResponseModel, DocumentTypeResponseModel, FileSystemTreeItemPresentationModel, DocumentResponseModel, TextFileResponseModelBaseModel, FileItemResponseModelBaseModel } from '../../external/backend-api/index.js';
+import type { ContentTreeItemResponseModel, DocumentTreeItemResponseModel, DocumentTypeTreeItemResponseModel, EntityTreeItemResponseModel, FolderTreeItemResponseModel, DocumentTypeResponseModel, FileSystemTreeItemPresentationModel, DocumentResponseModel, TextFileResponseModelBaseModel, FileItemResponseModelBaseModel, MediaTypeResponseModel, MediaTypeTreeItemResponseModel } from '../../external/backend-api/index.js';
 export declare const createEntityTreeItem: (item: any) => EntityTreeItemResponseModel;
 export declare const createFolderTreeItem: (item: any) => FolderTreeItemResponseModel;
 export declare const createContentTreeItem: (item: any) => ContentTreeItemResponseModel & {
@@ -8,6 +8,10 @@ export declare const createDocumentTreeItem: (item: DocumentResponseModel) => Do
     isTrashed: boolean;
 };
 export declare const createDocumentTypeTreeItem: (item: DocumentTypeResponseModel) => DocumentTypeTreeItemResponseModel;
+export declare const createMediaTypeTreeItem: (item: MediaTypeResponseModel) => MediaTypeTreeItemResponseModel;
 export declare const createFileSystemTreeItem: (item: any) => FileSystemTreeItemPresentationModel;
 export declare const createTextFileItem: (item: any) => TextFileResponseModelBaseModel;
 export declare const createFileItemResponseModelBaseModel: (item: any) => FileItemResponseModelBaseModel;
+export declare const arrayFilter: (filterBy: Array<string>, value?: Array<string>) => boolean;
+export declare const stringFilter: (filterBy: Array<string>, value?: string) => boolean;
+export declare const queryFilter: (filterBy: string, value?: string) => boolean;

package/dist-cms/mocks/data/utils.js

@@ -46,6 +46,12 @@ export const createDocumentTypeTreeItem = (item) => {
         isElement: item.isElement,
     };
 };
+export const createMediaTypeTreeItem = (item) => {
+    return {
+        ...createEntityTreeItem(item),
+        type: 'media-type',
+    };
+};
 export const createFileSystemTreeItem = (item) => {
     return {
         name: item.name,
@@ -65,3 +71,24 @@ export const createFileItemResponseModelBaseModel = (item) => ({
     name: item.name,
     icon: item.icon,
 });
+export const arrayFilter = (filterBy, value) => {
+    // if a filter is not set, return all items
+    if (!filterBy) {
+        return true;
+    }
+    return filterBy.some((filterValue) => value?.includes(filterValue));
+};
+export const stringFilter = (filterBy, value) => {
+    // if a filter is not set, return all items
+    if (!filterBy || !value) {
+        return true;
+    }
+    return filterBy.includes(value);
+};
+export const queryFilter = (filterBy, value) => {
+    if (!filterBy || !value) {
+        return true;
+    }
+    const query = filterBy.toLowerCase();
+    return value.toLowerCase().includes(query);
+};

package/dist-cms/mocks/handlers/media-type/detail.handlers.d.ts

@@ -0,0 +1 @@
+export declare const detailHandlers: import("msw").RestHandler<import("msw/lib/glossary-de6278a9.js").M<import("msw/lib/glossary-de6278a9.js").h>>[];

package/dist-cms/mocks/handlers/media-type/detail.handlers.js

@@ -0,0 +1,37 @@
+const { rest } = window.MockServiceWorker;
+import { umbMediaTypeData } from '../../data/media-type.data.js';
+import { slug } from './slug.js';
+import { umbracoPath } from '../../../shared/utils/index.js';
+export const detailHandlers = [
+    rest.post(umbracoPath(`${slug}`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        umbMediaTypeData.insert(data);
+        return res(ctx.status(200));
+    }),
+    rest.get(umbracoPath(`${slug}/:id`), (req, res, ctx) => {
+        const id = req.params.id;
+        if (!id)
+            return;
+        const data = umbMediaTypeData.getById(id);
+        return res(ctx.status(200), ctx.json(data));
+    }),
+    rest.put(umbracoPath(`${slug}/:id`), async (req, res, ctx) => {
+        const id = req.params.id;
+        if (!id)
+            return;
+        const data = await req.json();
+        if (!data)
+            return;
+        const saved = umbMediaTypeData.save(id, data);
+        return res(ctx.status(200), ctx.json(saved));
+    }),
+    rest.delete(umbracoPath(`${slug}/:id`), async (req, res, ctx) => {
+        const id = req.params.id;
+        if (!id)
+            return;
+        umbMediaTypeData.delete([id]);
+        return res(ctx.status(200));
+    }),
+];

package/dist-cms/mocks/handlers/media-type/index.js

@@ -0,0 +1,4 @@
+import { treeHandlers } from './tree.handlers.js';
+import { itemHandlers } from './item.handlers.js';
+import { detailHandlers } from './detail.handlers.js';
+export const handlers = [...treeHandlers, ...itemHandlers, ...detailHandlers];

package/dist-cms/mocks/handlers/media-type/item.handlers.d.ts

@@ -0,0 +1 @@
+export declare const itemHandlers: import("msw").RestHandler<import("msw/lib/glossary-de6278a9.js").M<import("msw/lib/glossary-de6278a9.js").h>>[];

package/dist-cms/mocks/handlers/media-type/item.handlers.js

@@ -0,0 +1,20 @@
+const { rest } = window.MockServiceWorker;
+import { umbMediaTypeData } from '../../data/media-type.data.js';
+import { slug } from './slug.js';
+import { umbracoPath } from '../../../shared/utils/index.js';
+export const itemHandlers = [
+    rest.get(umbracoPath(`${slug}/item`), (req, res, ctx) => {
+        const ids = req.url.searchParams.getAll('id');
+        if (!ids)
+            return;
+        const items = umbMediaTypeData.getItems(ids);
+        return res(ctx.status(200), ctx.json(items));
+    }),
+    rest.get(umbracoPath(`/tree${slug}/item`), (req, res, ctx) => {
+        const ids = req.url.searchParams.getAll('id');
+        if (!ids)
+            return;
+        const items = umbMediaTypeData.getTreeItems(ids);
+        return res(ctx.status(200), ctx.json(items));
+    }),
+];

package/dist-cms/mocks/handlers/media-type/slug.d.ts

@@ -0,0 +1 @@
+export declare const slug = "/media-type";

package/dist-cms/mocks/handlers/media-type/slug.js

@@ -0,0 +1 @@
+export const slug = '/media-type';

package/dist-cms/mocks/handlers/media-type/tree.handlers.d.ts

@@ -0,0 +1 @@
+export declare const treeHandlers: import("msw").RestHandler<import("msw/lib/glossary-de6278a9.js").M<import("msw/lib/glossary-de6278a9.js").h>>[];

package/dist-cms/mocks/handlers/media-type/tree.handlers.js

@@ -0,0 +1,25 @@
+const { rest } = window.MockServiceWorker;
+import { umbMediaTypeData } from '../../data/media-type.data.js';
+import { slug } from './slug.js';
+import { umbracoPath } from '../../../shared/utils/index.js';
+export const treeHandlers = [
+    rest.get(umbracoPath(`/tree${slug}/root`), (req, res, ctx) => {
+        const rootItems = umbMediaTypeData.getTreeRoot();
+        const response = {
+            total: rootItems.length,
+            items: rootItems,
+        };
+        return res(ctx.status(200), ctx.json(response));
+    }),
+    rest.get(umbracoPath(`/tree${slug}/children`), (req, res, ctx) => {
+        const parentId = req.url.searchParams.get('parentId');
+        if (!parentId)
+            return;
+        const children = umbMediaTypeData.getTreeItemChildren(parentId);
+        const response = {
+            total: children.length,
+            items: children,
+        };
+        return res(ctx.status(200), ctx.json(response));
+    }),
+];

package/dist-cms/mocks/handlers/user/detail.handlers.js

@@ -3,6 +3,10 @@ import { umbUsersData } from '../../data/user.data.js';
 import { slug } from './slug.js';
 import { umbracoPath } from '../../../shared/utils/index.js';
 export const handlers = [
+    rest.get(umbracoPath(`${slug}`), (req, res, ctx) => {
+        const response = umbUsersData.getAll();
+        return res(ctx.status(200), ctx.json(response));
+    }),
     rest.post(umbracoPath(`${slug}`), async (req, res, ctx) => {
         const data = await req.json();
         if (!data)
@@ -10,15 +14,6 @@ export const handlers = [
         const response = umbUsersData.createUser(data);
         return res(ctx.status(200), ctx.json(response));
     }),
-    rest.get(umbracoPath(`${slug}`), (req, res, ctx) => {
-        const response = umbUsersData.getAll();
-        return res(ctx.status(200), ctx.json(response));
-    }),
-    rest.get(umbracoPath(`${slug}/filter`), (req, res, ctx) => {
-        //TODO: Implementer filter
-        const response = umbUsersData.getAll();
-        return res(ctx.status(200), ctx.json(response));
-    }),
     rest.get(umbracoPath(`${slug}/:id`), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)

package/dist-cms/mocks/handlers/user/filter.handlers.d.ts

@@ -0,0 +1 @@
+export declare const handlers: import("msw").RestHandler<import("msw/lib/glossary-de6278a9.js").M<import("msw/lib/glossary-de6278a9.js").h>>[];

package/dist-cms/mocks/handlers/user/filter.handlers.js

@@ -0,0 +1,26 @@
+const { rest } = window.MockServiceWorker;
+import { umbUsersData } from '../../data/user.data.js';
+import { slug } from './slug.js';
+import { umbracoPath } from '../../../shared/utils/index.js';
+export const handlers = [
+    rest.get(umbracoPath(`${slug}/filter`), (req, res, ctx) => {
+        const skip = Number(req.url.searchParams.get('skip'));
+        const take = Number(req.url.searchParams.get('take'));
+        const orderBy = req.url.searchParams.get('orderBy');
+        const orderDirection = req.url.searchParams.get('orderDirection');
+        const userGroupIds = req.url.searchParams.getAll('userGroupIds');
+        const userStates = req.url.searchParams.getAll('userStates');
+        const filter = req.url.searchParams.get('filter');
+        const options = {
+            skip: skip || undefined,
+            take: take || undefined,
+            orderBy: orderBy || undefined,
+            orderDirection: orderDirection || undefined,
+            userGroupIds: userGroupIds.length > 0 ? userGroupIds : undefined,
+            userStates: userStates.length > 0 ? userStates : undefined,
+            filter: filter || undefined,
+        };
+        const response = umbUsersData.filter(options);
+        return res(ctx.status(200), ctx.json(response));
+    }),
+];

package/dist-cms/mocks/handlers/user/index.js

@@ -7,6 +7,7 @@ import { handlers as disableHandlers } from './disable.handlers.js';
 import { handlers as changePasswordHandlers } from './change-password.handlers.js';
 import { handlers as unlockHandlers } from './unlock.handlers.js';
 import { handlers as inviteHandlers } from './invite.handlers.js';
+import { handlers as filterHandlers } from './filter.handlers.js';
 export const handlers = [
     ...itemHandlers,
     ...currentHandlers,
@@ -15,6 +16,7 @@ export const handlers = [
     ...setUserGroupsHandlers,
     ...changePasswordHandlers,
     ...unlockHandlers,
-    ...detailHandlers,
+    ...filterHandlers,
     ...inviteHandlers,
+    ...detailHandlers,
 ];

package/dist-cms/packages/core/collection/collection.context.d.ts

@@ -1,21 +1,24 @@
+import { UmbCollectionConfiguration } from './types.js';
 import { UmbCollectionRepository } from '../repository/index.js';
 import { UmbBaseController, type UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { UmbContextToken } from '../../../libs/context-api/index.js';
 import { ManifestCollectionView } from '../extension-registry/index.js';
 import type { UmbCollectionFilterModel } from './index.js';
+import { UmbPaginationManager } from '../../../shared/utils/index.js';
 export declare class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectionFilterModel> extends UmbBaseController {
     #private;
     protected entityType: string;
     protected init: Promise<[import("../extension-registry/index.js").ManifestRepository, ManifestCollectionView[]]>;
-    readonly items: import("rxjs/internal/Observable").Observable<ItemType[]>;
-    readonly total: import("rxjs/internal/Observable").Observable<number>;
-    readonly selection: import("rxjs/internal/Observable").Observable<(string | null)[]>;
-    readonly filter: import("rxjs/internal/Observable").Observable<object | FilterModelType>;
-    readonly views: import("rxjs/internal/Observable").Observable<ManifestCollectionView[]>;
-    readonly currentView: import("rxjs/internal/Observable").Observable<ManifestCollectionView | undefined>;
+    readonly items: import("rxjs/internal/Observable.js").Observable<ItemType[]>;
+    readonly totalItems: import("rxjs/internal/Observable.js").Observable<number>;
+    readonly selection: import("rxjs/internal/Observable.js").Observable<(string | null)[]>;
+    readonly filter: import("rxjs/internal/Observable.js").Observable<object | FilterModelType>;
+    readonly views: import("rxjs/internal/Observable.js").Observable<ManifestCollectionView[]>;
+    readonly currentView: import("rxjs/internal/Observable.js").Observable<ManifestCollectionView | undefined>;
     repository?: UmbCollectionRepository;
     collectionRootPathname: string;
-    constructor(host: UmbControllerHostElement, entityType: string, repositoryAlias: string);
+    readonly pagination: UmbPaginationManager;
+    constructor(host: UmbControllerHostElement, entityType: string, repositoryAlias: string, config?: UmbCollectionConfiguration);
     /**
      * Returns true if the given id is selected.
      * @param {string} id

package/dist-cms/packages/core/collection/collection.context.js

@@ -4,20 +4,21 @@ import { UmbArrayState, UmbNumberState, UmbObjectState, } from '../../../libs/ob
 import { createExtensionApi } from '../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../extension-registry/index.js';
 import { map } from '../../../external/rxjs/index.js';
-import { UmbSelectionManager } from '../../../shared/utils/index.js';
+import { UmbSelectionManager, UmbPaginationManager } from '../../../shared/utils/index.js';
+import { UmbChangeEvent } from '../event/index.js';
 export class UmbCollectionContext extends UmbBaseController {
     #items;
-    #total;
+    #totalItems;
     #selectionManager;
     #filter;
     #views;
     #currentView;
-    constructor(host, entityType, repositoryAlias) {
+    constructor(host, entityType, repositoryAlias, config = { pageSize: 50 }) {
         super(host);
         this.#items = new UmbArrayState([]);
         this.items = this.#items.asObservable();
-        this.#total = new UmbNumberState(0);
-        this.total = this.#total.asObservable();
+        this.#totalItems = new UmbNumberState(0);
+        this.totalItems = this.#totalItems.asObservable();
         this.#selectionManager = new UmbSelectionManager();
         this.selection = this.#selectionManager.selection;
         this.#filter = new UmbObjectState({});
@@ -26,25 +27,22 @@ export class UmbCollectionContext extends UmbBaseController {
         this.views = this.#views.asObservable();
         this.#currentView = new UmbObjectState(undefined);
         this.currentView = this.#currentView.asObservable();
+        this.pagination = new UmbPaginationManager();
+        this.#onPageChange = (event) => {
+            const target = event.target;
+            const skipFilter = { skip: target.getSkip() };
+            this.setFilter(skipFilter);
+        };
         this.entityType = entityType;
-        this.#selectionManager.setMultiple(true);
+        // listen for page changes on the pagination manager
+        this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
         const currentUrl = new URL(window.location.href);
         this.collectionRootPathname = currentUrl.pathname.substring(0, currentUrl.pathname.lastIndexOf('/'));
         this.init = Promise.all([
-            this.observe(umbExtensionsRegistry.getByTypeAndAlias('repository', repositoryAlias), async (repositoryManifest) => {
-                if (repositoryManifest) {
-                    const result = await createExtensionApi(repositoryManifest, [this._host]);
-                    this.repository = result;
-                    this.requestCollection();
-                }
-            }, 'umbCollectionRepositoryObserver').asPromise(),
-            this.observe(umbExtensionsRegistry.extensionsOfType('collectionView').pipe(map((extensions) => {
-                return extensions.filter((extension) => extension.conditions.entityType === this.getEntityType());
-            })), (views) => {
-                this.#views.next(views);
-                this.#setCurrentView();
-            }, 'umbCollectionViewsObserver').asPromise(),
+            this.#observeRepository(repositoryAlias).asPromise(),
+            this.#observeViews().asPromise(),
         ]);
+        this.#configure(config);
         this.provideContext(UMB_COLLECTION_CONTEXT, this);
     }
     /**
@@ -114,8 +112,9 @@ export class UmbCollectionContext extends UmbBaseController {
         const filter = this.#filter.getValue();
         const { data } = await this.repository.requestCollection(filter);
         if (data) {
-            this.#total.next(data.total);
             this.#items.next(data.items);
+            this.#totalItems.next(data.total);
+            this.pagination.setTotalItems(data.total);
         }
     }
     /**
@@ -144,6 +143,29 @@ export class UmbCollectionContext extends UmbBaseController {
     getCurrentView() {
         return this.#currentView.getValue();
     }
+    #configure(configuration) {
+        this.#selectionManager.setMultiple(true);
+        this.pagination.setPageSize(configuration.pageSize);
+        this.#filter.next({ ...this.#filter.getValue(), skip: 0, take: configuration.pageSize });
+    }
+    #observeRepository(repositoryAlias) {
+        return this.observe(umbExtensionsRegistry.getByTypeAndAlias('repository', repositoryAlias), async (repositoryManifest) => {
+            if (repositoryManifest) {
+                const result = await createExtensionApi(repositoryManifest, [this._host]);
+                this.repository = result;
+                this.requestCollection();
+            }
+        }, 'umbCollectionRepositoryObserver');
+    }
+    #observeViews() {
+        return this.observe(umbExtensionsRegistry.extensionsOfType('collectionView').pipe(map((extensions) => {
+            return extensions.filter((extension) => extension.conditions.entityType === this.getEntityType());
+        })), (views) => {
+            this.#views.next(views);
+            this.#setCurrentView();
+        }, 'umbCollectionViewsObserver');
+    }
+    #onPageChange;
     #setCurrentView() {
         const currentUrl = new URL(window.location.href);
         const lastPathSegment = currentUrl.pathname.split('/').pop();