@umbraco-cms/backoffice 14.0.0--preview004-2f33e9be → 14.0.0--preview004-24474e88

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",

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

@@ -11,3 +11,6 @@ export declare const createDocumentTypeTreeItem: (item: DocumentTypeResponseMode
 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

@@ -65,3 +65,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/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();

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

@@ -11,6 +11,7 @@ export declare class UmbCollectionElement extends UmbLitElement {
     private _createRoutes;
     render(): import("lit-html").TemplateResult<1>;
     protected renderToolbar(): import("lit-html").TemplateResult<1>;
+    protected renderPagination(): import("lit-html").TemplateResult<1>;
     protected renderSelectionActions(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

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

@@ -50,6 +50,7 @@ export let UmbCollectionElement = class UmbCollectionElement extends UmbLitEleme
 			<umb-body-layout header-transparent>
 				${this.renderToolbar()}
 				<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>
+				${this.renderPagination()}
 				${this.renderSelectionActions()}
 			</umb-body-layout>
 		`;
@@ -57,6 +58,9 @@ export let UmbCollectionElement = class UmbCollectionElement extends UmbLitEleme
     renderToolbar() {
         return html `<umb-collection-toolbar slot="header"></umb-collection-toolbar>`;
     }
+    renderPagination() {
+        return html `<umb-collection-pagination></umb-collection-pagination>`;
+    }
     renderSelectionActions() {
         return html `<umb-collection-selection-actions slot="footer-info"></umb-collection-selection-actions>`;
     }

package/dist-cms/packages/core/collection/components/collection-selection-actions.element.d.ts

@@ -2,7 +2,7 @@ import { nothing } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbCollectionSelectionActionsElement extends UmbLitElement {
     #private;
-    private _nodesLength;
+    private _totalItems;
     private _selectionLength;
     private _extensionProps;
     private _selection;

package/dist-cms/packages/core/collection/components/collection-selection-actions.element.js

@@ -11,7 +11,7 @@ import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionActionsElement extends UmbLitElement {
     constructor() {
         super();
-        this._nodesLength = 0;
+        this._totalItems = 0;
         this._selectionLength = 0;
         this._extensionProps = {};
         this._selection = [];
@@ -31,10 +31,9 @@ export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionAc
     _observeCollectionContext() {
         if (!this._collectionContext)
             return;
-        // TODO: Make sure it only updates on length change.
-        this.observe(this._collectionContext.items, (mediaItems) => {
-            this._nodesLength = mediaItems.length;
-        }, 'umbItemsLengthObserver');
+        this.observe(this._collectionContext.totalItems, (value) => {
+            this._totalItems = value;
+        }, 'umbTotalItemsObserver');
         this.observe(this._collectionContext.selection, (selection) => {
             this._selectionLength = selection.length;
             this._selection = selection;
@@ -42,7 +41,7 @@ export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionAc
         }, 'umbSelectionObserver');
     }
     _renderSelectionCount() {
-        return html `<div>${this._selectionLength} of ${this._nodesLength} selected</div>`;
+        return html `<div>${this._selectionLength} of ${this._totalItems} selected</div>`;
     }
     #onActionExecuted(event) {
         event.stopPropagation();
@@ -98,7 +97,7 @@ export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionAc
 };
 __decorate([
     state()
-], UmbCollectionSelectionActionsElement.prototype, "_nodesLength", void 0);
+], UmbCollectionSelectionActionsElement.prototype, "_totalItems", void 0);
 __decorate([
     state()
 ], UmbCollectionSelectionActionsElement.prototype, "_selectionLength", void 0);

package/dist-cms/packages/core/collection/components/index.d.ts

@@ -1,6 +1,8 @@
+import './pagination/collection-pagination.element.js';
 import './collection-selection-actions.element.js';
 import './collection-toolbar.element.js';
 import './collection-view-bundle.element.js';
+export * from './pagination/collection-pagination.element.js';
 export * from './collection-selection-actions.element.js';
 export * from './collection-toolbar.element.js';
 export * from './collection-view-bundle.element.js';

package/dist-cms/packages/core/collection/components/index.js

@@ -1,6 +1,8 @@
+import './pagination/collection-pagination.element.js';
 import './collection-selection-actions.element.js';
 import './collection-toolbar.element.js';
 import './collection-view-bundle.element.js';
+export * from './pagination/collection-pagination.element.js';
 export * from './collection-selection-actions.element.js';
 export * from './collection-toolbar.element.js';
 export * from './collection-view-bundle.element.js';

package/dist-cms/packages/core/collection/components/pagination/collection-pagination.element.d.ts

@@ -0,0 +1,16 @@
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export declare class UmbCollectionPaginationElement extends UmbLitElement {
+    #private;
+    _totalPages: number;
+    _currentPage: number;
+    private _collectionContext?;
+    constructor();
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-collection-pagination': UmbCollectionPaginationElement;
+    }
+}

package/dist-cms/packages/core/collection/components/pagination/collection-pagination.element.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
+import { css, html, customElement, nothing, state } from '../../../../../external/lit/index.js';
+import { UMB_COLLECTION_CONTEXT } from '../../index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export let UmbCollectionPaginationElement = class UmbCollectionPaginationElement extends UmbLitElement {
+    constructor() {
+        super();
+        this._totalPages = 0;
+        this._currentPage = 1;
+        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+            this._collectionContext = instance;
+            this.#observeCurrentPage();
+            this.#observerTotalPages();
+        });
+    }
+    #observeCurrentPage() {
+        this.observe(this._collectionContext.pagination.currentPage, (currentPage) => {
+            this._currentPage = currentPage;
+        }, 'umbCurrentPageObserver');
+    }
+    #observerTotalPages() {
+        this.observe(this._collectionContext.pagination.totalPages, (totalPages) => {
+            this._totalPages = totalPages;
+        }, 'umbTotalPagesObserver');
+    }
+    #onChange(event) {
+        this._collectionContext?.pagination.setCurrentPageNumber(event.target.current);
+    }
+    render() {
+        if (this._totalPages <= 1) {
+            return nothing;
+        }
+        return html `<uui-pagination .current=${this._currentPage} .total=${this._totalPages} @change=${this.#onChange}></uui-pagination>`;
+    }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+      :host {
+        display: block;
+				margin-top: var(--uui-size-layout-1);
+      }
+    `
+    ]; }
+};
+__decorate([
+    state()
+], UmbCollectionPaginationElement.prototype, "_totalPages", void 0);
+__decorate([
+    state()
+], UmbCollectionPaginationElement.prototype, "_currentPage", void 0);
+UmbCollectionPaginationElement = __decorate([
+    customElement('umb-collection-pagination')
+], UmbCollectionPaginationElement);

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

@@ -0,0 +1,3 @@
+export interface UmbCollectionConfiguration {
+    pageSize: number;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/event/change.event.d.ts

@@ -1,3 +1,4 @@
 export declare class UmbChangeEvent extends Event {
+    static readonly TYPE = "change";
     constructor();
 }

package/dist-cms/packages/core/event/change.event.js

@@ -1,6 +1,7 @@
 export class UmbChangeEvent extends Event {
+    static { this.TYPE = 'change'; }
     constructor() {
         // mimics the native change event
-        super('change', { bubbles: true, composed: false, cancelable: false });
+        super(UmbChangeEvent.TYPE, { bubbles: true, composed: false, cancelable: false });
     }
 }

package/dist-cms/packages/core/repository/data-source/collection-data-source.interface.d.ts

@@ -1,6 +1,5 @@
-import type { UmbPagedData } from '../tree-repository.interface.js';
 import type { DataSourceResponse } from '../index.js';
-export interface UmbCollectionDataSource<ItemType = any, PagedItemType = UmbPagedData<ItemType>> {
-    getCollection(): Promise<DataSourceResponse<PagedItemType>>;
-    filterCollection(filter: any): Promise<DataSourceResponse<PagedItemType>>;
+import type { UmbPagedData } from './types.js';
+export interface UmbCollectionDataSource<ItemType = any, FilterType = unknown> {
+    getCollection(filter: FilterType): Promise<DataSourceResponse<UmbPagedData<ItemType>>>;
 }

package/dist-cms/packages/core/repository/data-source/index.d.ts

@@ -8,3 +8,4 @@ export * from './folder-data-source.interface.js';
 export * from './item-data-source.interface.js';
 export * from './move-data-source.interface.js';
 export * from './tree-data-source.interface.js';
+export * from './types.js';

package/dist-cms/packages/core/repository/data-source/index.js

@@ -8,3 +8,4 @@ export * from './folder-data-source.interface.js';
 export * from './item-data-source.interface.js';
 export * from './move-data-source.interface.js';
 export * from './tree-data-source.interface.js';
+export * from './types.js';

package/dist-cms/packages/core/repository/data-source/tree-data-source.interface.d.ts

@@ -1,4 +1,4 @@
-import type { UmbPagedData } from '../tree-repository.interface.js';
+import type { UmbPagedData } from './types.js';
 import type { DataSourceResponse } from './data-source-response.interface.js';
 export interface UmbTreeDataSource<ItemType = any, PagedItemType = UmbPagedData<ItemType>> {
     getRootItems(): Promise<DataSourceResponse<PagedItemType>>;

package/dist-cms/packages/core/repository/data-source/types.d.ts

@@ -0,0 +1,4 @@
+export interface UmbPagedData<T> {
+    total: number;
+    items: Array<T>;
+}

package/dist-cms/packages/core/repository/data-source/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/core/repository/tree-repository.interface.d.ts

@@ -1,10 +1,7 @@
-import type { Observable } from '../../../external/rxjs/index.js';
+import { type UmbPagedData } from './data-source/types.js';
+import { type Observable } from '../../../external/rxjs/index.js';
 import type { UmbTreeRootEntityModel, UmbTreeRootModel } from '../tree/index.js';
 import { ProblemDetails, EntityTreeItemResponseModel } from '../../../external/backend-api/index.js';
-export interface UmbPagedData<T> {
-    total: number;
-    items: Array<T>;
-}
 export interface UmbTreeRepository<TreeItemType extends EntityTreeItemResponseModel, TreeRootType extends UmbTreeRootModel = UmbTreeRootEntityModel> {
     requestTreeRoot: () => Promise<{
         data?: TreeRootType;

package/dist-cms/packages/core/tree/tree-item-base/tree-item-base.context.d.ts

@@ -21,7 +21,7 @@ export declare class UmbTreeItemContextBase<TreeItemType extends TreeItemPresent
     constructor(host: UmbControllerHost, getUniqueFunction: UmbTreeItemUniqueFunction<TreeItemType>);
     setTreeItem(treeItem: TreeItemType | undefined): void;
     requestChildren(): Promise<{
-        data?: import("../../repository/tree-repository.interface.js").UmbPagedData<TreeItemType> | undefined;
+        data?: import("../../repository/index.js").UmbPagedData<TreeItemType> | undefined;
         error?: import("../../../../external/backend-api/index.js").ProblemDetails | undefined;
         asObservable?: (() => import("rxjs/internal/Observable.js").Observable<TreeItemType[]>) | undefined;
     }>;

package/dist-cms/packages/user/user/collection/repository/user-collection.repository.js

@@ -8,7 +8,7 @@ export class UmbUserCollectionRepository extends UmbUserRepositoryBase {
     }
     async requestCollection(filter = { skip: 0, take: 100 }) {
         await this.init;
-        const { data, error } = await this.#collectionSource.filterCollection(filter);
+        const { data, error } = await this.#collectionSource.getCollection(filter);
         if (data) {
             this.detailStore.appendItems(data.items);
         }