@umbraco-cms/backoffice 14.0.0--preview004-37f7727e → 14.0.0--preview004-a655feee

package/dist-cms/custom-elements.json

@@ -427,17 +427,6 @@
         }
       ]
     },
-    {
-      "name": "umb-collection-default",
-      "path": "./../src/packages/core/collection/collection-default.element.ts",
-      "properties": [
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"UmbTextStyles\",null]"
-        }
-      ]
-    },
     {
       "name": "umb-collection",
       "path": "./../src/packages/core/collection/collection.element.ts",
@@ -524,6 +513,17 @@
         }
       ]
     },
+    {
+      "name": "umb-collection-default",
+      "path": "./../src/packages/core/collection/default/collection-default.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"UmbTextStyles\",null]"
+        }
+      ]
+    },
     {
       "name": "umb-backoffice-modal-container",
       "path": "./../src/packages/core/components/backoffice-modal-container/backoffice-modal-container.element.ts",

package/dist-cms/packages/core/collection/collection-alias.condition.js

@@ -1,4 +1,4 @@
-import { UMB_COLLECTION_CONTEXT } from './collection-default.context.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from './default/collection-default.context.js';
 import { UmbBaseController } from '../../../libs/class-api/index.js';
 export class UmbCollectionAliasCondition extends UmbBaseController {
     #onChange;
@@ -7,7 +7,7 @@ export class UmbCollectionAliasCondition extends UmbBaseController {
         this.permitted = false;
         this.config = args.config;
         this.#onChange = args.onChange;
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (context) => {
             this.permitted = context.getManifest()?.alias === this.config.match;
             this.#onChange();
         });

package/dist-cms/packages/core/collection/collection-view.manager.d.ts

@@ -0,0 +1,27 @@
+import { UmbBaseController } from '../../../libs/class-api/index.js';
+import { UmbControllerHost } from '../../../libs/controller-api/index.js';
+import { ManifestCollectionView } from '../extension-registry/index.js';
+import { UmbRoute } from '../../../shared/router/index.js';
+export interface UmbCollectionViewManagerConfig {
+    defaultViewAlias?: string;
+}
+export declare class UmbCollectionViewManager extends UmbBaseController {
+    #private;
+    readonly views: import("rxjs").Observable<ManifestCollectionView[]>;
+    readonly currentView: import("rxjs").Observable<ManifestCollectionView | undefined>;
+    readonly routes: import("rxjs").Observable<UmbRoute[]>;
+    readonly rootPathname: import("rxjs").Observable<string>;
+    constructor(host: UmbControllerHost, config: UmbCollectionViewManagerConfig);
+    /**
+     * Sets the current view.
+     * @param {ManifestCollectionView} view
+     * @memberof UmbCollectionContext
+     */
+    setCurrentView(view: ManifestCollectionView): void;
+    /**
+     * Returns the current view.
+     * @return {ManifestCollectionView}
+     * @memberof UmbCollectionContext
+     */
+    getCurrentView(): ManifestCollectionView | undefined;
+}

package/dist-cms/packages/core/collection/collection-view.manager.js

@@ -0,0 +1,75 @@
+import { UmbBaseController } from '../../../libs/class-api/index.js';
+import { UmbExtensionsManifestInitializer, createExtensionElement } from '../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../extension-registry/index.js';
+import { UmbArrayState, UmbObjectState, UmbStringState } from '../../../libs/observable-api/index.js';
+export class UmbCollectionViewManager extends UmbBaseController {
+    #views;
+    #currentView;
+    #routes;
+    #rootPathname;
+    #defaultViewAlias;
+    constructor(host, config) {
+        super(host);
+        this.#views = new UmbArrayState([], (x) => x.alias);
+        this.views = this.#views.asObservable();
+        this.#currentView = new UmbObjectState(undefined);
+        this.currentView = this.#currentView.asObservable();
+        this.#routes = new UmbArrayState([], (x) => x.path);
+        this.routes = this.#routes.asObservable();
+        this.#rootPathname = new UmbStringState('');
+        this.rootPathname = this.#rootPathname.asObservable();
+        this.#defaultViewAlias = config.defaultViewAlias;
+        this.#observeViews();
+        // TODO: hack - we need to figure out how to get the "parent path" from the router
+        setTimeout(() => {
+            const currentUrl = new URL(window.location.href);
+            this.#rootPathname.next(currentUrl.pathname.substring(0, currentUrl.pathname.lastIndexOf('/')));
+        }, 100);
+    }
+    // Views
+    /**
+     * Sets the current view.
+     * @param {ManifestCollectionView} view
+     * @memberof UmbCollectionContext
+     */
+    setCurrentView(view) {
+        this.#currentView.next(view);
+    }
+    /**
+     * Returns the current view.
+     * @return {ManifestCollectionView}
+     * @memberof UmbCollectionContext
+     */
+    getCurrentView() {
+        return this.#currentView.getValue();
+    }
+    #observeViews() {
+        return new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'collectionView', null, (views) => {
+            const manifests = views.map((view) => view.manifest);
+            this.#views.next(manifests);
+            this.#createRoutes(manifests);
+        });
+    }
+    #createRoutes(views) {
+        let routes = [];
+        if (views) {
+            // find the default view from the config. If it doesn't exist, use the first view
+            const defaultView = views.find((view) => view.alias === this.#defaultViewAlias);
+            const fallbackView = defaultView?.meta.pathName || views[0].meta.pathName;
+            routes = views.map((view) => {
+                return {
+                    path: `${view.meta.pathName}`,
+                    component: () => createExtensionElement(view),
+                    setup: () => {
+                        this.setCurrentView(view);
+                    },
+                };
+            });
+            routes.push({
+                path: '',
+                redirectTo: fallbackView,
+            });
+        }
+        this.#routes.next(routes);
+    }
+}

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_COLLECTION_CONTEXT } from '../collection-default.context.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../default/collection-default.context.js';
 import { html, customElement, state, nothing } from '../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -13,7 +13,7 @@ let UmbCollectionActionBundleElement = class UmbCollectionActionBundleElement ex
     constructor() {
         super();
         this._collectionAlias = '';
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (context) => {
             this.#collectionContext = context;
             if (!this.#collectionContext)
                 return;

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, nothing, customElement, state } from '../../../../external/lit/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionActionsElement extends UmbLitElement {
     constructor() {
@@ -15,7 +15,7 @@ let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionActionsEl
         this._selectionLength = 0;
         this._extensionProps = {};
         this._selection = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this._observeCollectionContext();
         });
@@ -74,6 +74,13 @@ let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionActionsEl
     static { this.styles = [
         UmbTextStyles,
         css `
+			:host {
+				width: 100%;
+				margin-right: calc(
+					-1 * var(--uui-size-space-6)
+				); // compensate for the padding on the container. TODO: make a better solution
+			}
+
 			#container {
 				display: flex;
 				gap: var(--uui-size-3);

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_COLLECTION_CONTEXT } from '../collection-default.context.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../default/collection-default.context.js';
 import { css, html, customElement, state, nothing } from '../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
@@ -13,7 +13,7 @@ let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement extend
     constructor() {
         super();
         this._views = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (context) => {
             this.#collectionContext = context;
             if (!this.#collectionContext)
                 return;
@@ -23,18 +23,18 @@ let UmbCollectionViewBundleElement = class UmbCollectionViewBundleElement extend
         });
     }
     #observeRootPathname() {
-        this.observe(this.#collectionContext.rootPathname, (rootPathname) => {
+        this.observe(this.#collectionContext.view.rootPathname, (rootPathname) => {
             this._collectionRootPathname = rootPathname;
         }, 'umbCollectionRootPathnameObserver');
     }
     #observeCurrentView() {
-        this.observe(this.#collectionContext.currentView, (view) => {
+        this.observe(this.#collectionContext.view.currentView, (view) => {
             //TODO: This is not called when the view is changed
             this._currentView = view;
         }, 'umbCurrentCollectionViewObserver');
     }
     #observeViews() {
-        this.observe(this.#collectionContext.views, (views) => {
+        this.observe(this.#collectionContext.view.views, (views) => {
             this._views = views;
         }, 'umbCollectionViewsObserver');
     }

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

@@ -6,14 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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 { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 let UmbCollectionPaginationElement = class UmbCollectionPaginationElement extends UmbLitElement {
     constructor() {
         super();
         this._totalPages = 0;
         this._currentPage = 1;
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this.#observeCurrentPage();
             this.#observerTotalPages();

package/dist-cms/packages/core/collection/{collection-default.context.d.ts → default/collection-default.context.d.ts}

@@ -1,23 +1,22 @@
-import { UmbCollectionConfiguration, UmbCollectionContext } from './types.js';
-import { UmbCollectionRepository } from '../repository/index.js';
-import { UmbBaseController } from '../../../libs/class-api/index.js';
-import { type UmbControllerHostElement } from '../../../libs/controller-api/index.js';
-import { UmbContextToken } from '../../../libs/context-api/index.js';
-import { UmbApi } from '../../../libs/extension-api/index.js';
-import { ManifestCollection, ManifestCollectionView } from '../extension-registry/index.js';
-import type { UmbCollectionFilterModel } from './index.js';
-import { UmbSelectionManager, UmbPaginationManager } from '../../../shared/utils/index.js';
-export declare class UmbDefaultCollectionContext<ItemType = any, FilterModelType extends UmbCollectionFilterModel = any> extends UmbBaseController implements UmbCollectionContext, UmbApi {
+import { UmbCollectionConfiguration, UmbCollectionContext } from '../types.js';
+import { UmbCollectionViewManager } from '../collection-view.manager.js';
+import { UmbCollectionRepository } from '../../repository/index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { type UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { UmbApi } from '../../../../libs/extension-api/index.js';
+import { ManifestCollection } from '../../extension-registry/index.js';
+import type { UmbCollectionFilterModel } from '../index.js';
+import { UmbSelectionManager, UmbPaginationManager } from '../../../../shared/utils/index.js';
+export declare class UmbDefaultCollectionContext<ItemType = any, FilterModelType extends UmbCollectionFilterModel = any> extends UmbContextBase<UmbDefaultCollectionContext> implements UmbCollectionContext, UmbApi {
     #private;
     readonly items: import("rxjs").Observable<ItemType[]>;
     readonly totalItems: import("rxjs").Observable<number>;
     readonly filter: import("rxjs").Observable<object | FilterModelType>;
-    readonly views: import("rxjs").Observable<ManifestCollectionView[]>;
-    readonly currentView: import("rxjs").Observable<ManifestCollectionView | undefined>;
-    readonly rootPathname: import("rxjs").Observable<string>;
     repository?: UmbCollectionRepository;
     readonly pagination: UmbPaginationManager;
     readonly selection: UmbSelectionManager;
+    readonly view: UmbCollectionViewManager;
     constructor(host: UmbControllerHostElement, config?: UmbCollectionConfiguration);
     /**
      * Sets the manifest for the collection.
@@ -43,17 +42,5 @@ export declare class UmbDefaultCollectionContext<ItemType = any, FilterModelType
      * @memberof UmbCollectionContext
      */
     setFilter(filter: Partial<FilterModelType>): void;
-    /**
-     * Sets the current view.
-     * @param {ManifestCollectionView} view
-     * @memberof UmbCollectionContext
-     */
-    setCurrentView(view: ManifestCollectionView): void;
-    /**
-     * Returns the current view.
-     * @return {ManifestCollectionView}
-     * @memberof UmbCollectionContext
-     */
-    getCurrentView(): ManifestCollectionView | undefined;
 }
-export declare const UMB_COLLECTION_CONTEXT: UmbContextToken<UmbDefaultCollectionContext<any, any>, UmbDefaultCollectionContext<any, any>>;
+export declare const UMB_DEFAULT_COLLECTION_CONTEXT: UmbContextToken<UmbDefaultCollectionContext<any, any>, UmbDefaultCollectionContext<any, any>>;

package/dist-cms/packages/core/collection/{collection-default.context.js → default/collection-default.context.js}

@@ -1,35 +1,27 @@
-import { UmbBaseController } from '../../../libs/class-api/index.js';
-import { UmbContextToken } from '../../../libs/context-api/index.js';
-import { UmbArrayState, UmbNumberState, UmbObjectState, UmbStringState } from '../../../libs/observable-api/index.js';
-import { UmbExtensionApiInitializer, UmbExtensionsManifestInitializer, } from '../../../libs/extension-api/index.js';
-import { umbExtensionsRegistry, } from '../extension-registry/index.js';
-import { UmbSelectionManager, UmbPaginationManager } from '../../../shared/utils/index.js';
-import { UmbChangeEvent } from '../event/index.js';
-export class UmbDefaultCollectionContext extends UmbBaseController {
+import { UmbCollectionViewManager } from '../collection-view.manager.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { UmbArrayState, UmbNumberState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry, } from '../../extension-registry/index.js';
+import { UmbSelectionManager, UmbPaginationManager } from '../../../../shared/utils/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+export class UmbDefaultCollectionContext extends UmbContextBase {
     #manifest;
     #items;
     #totalItems;
     #filter;
-    #views;
-    #currentView;
-    #rootPathname;
     #initResolver;
     #initialized;
     #init;
     constructor(host, config = { pageSize: 50 }) {
-        super(host);
+        super(host, UMB_DEFAULT_COLLECTION_CONTEXT);
         this.#items = new UmbArrayState([], (x) => x);
         this.items = this.#items.asObservable();
         this.#totalItems = new UmbNumberState(0);
         this.totalItems = this.#totalItems.asObservable();
         this.#filter = new UmbObjectState({});
         this.filter = this.#filter.asObservable();
-        this.#views = new UmbArrayState([], (x) => x.alias);
-        this.views = this.#views.asObservable();
-        this.#currentView = new UmbObjectState(undefined);
-        this.currentView = this.#currentView.asObservable();
-        this.#rootPathname = new UmbStringState('');
-        this.rootPathname = this.#rootPathname.asObservable();
         this.#initialized = false;
         this.#init = new Promise((resolve) => {
             this.#initialized ? resolve() : (this.#initResolver = resolve);
@@ -43,13 +35,8 @@ export class UmbDefaultCollectionContext extends UmbBaseController {
         };
         // listen for page changes on the pagination manager
         this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
-        // TODO: hack - we need to figure out how to get the "parent path" from the router
-        setTimeout(() => {
-            const currentUrl = new URL(window.location.href);
-            this.#rootPathname.next(currentUrl.pathname.substring(0, currentUrl.pathname.lastIndexOf('/')));
-        }, 100);
+        this.view = new UmbCollectionViewManager(this, { defaultViewAlias: config.defaultViewAlias });
         this.#configure(config);
-        this.provideContext(UMB_COLLECTION_CONTEXT, this);
     }
     // TODO: find a generic way to do this
     #checkIfInitialized() {
@@ -70,7 +57,6 @@ export class UmbDefaultCollectionContext extends UmbBaseController {
         if (!this.#manifest)
             return;
         this.#observeRepository(this.#manifest.meta.repositoryAlias);
-        this.#observeViews();
     }
     /**
      * Returns the manifest for the collection.
@@ -106,52 +92,17 @@ export class UmbDefaultCollectionContext extends UmbBaseController {
         this.#filter.next({ ...this.#filter.getValue(), ...filter });
         this.requestCollection();
     }
-    // Views
-    /**
-     * Sets the current view.
-     * @param {ManifestCollectionView} view
-     * @memberof UmbCollectionContext
-     */
-    setCurrentView(view) {
-        this.#currentView.next(view);
-    }
-    /**
-     * Returns the current view.
-     * @return {ManifestCollectionView}
-     * @memberof UmbCollectionContext
-     */
-    getCurrentView() {
-        return this.#currentView.getValue();
-    }
     #configure(configuration) {
         this.selection.setMultiple(true);
         this.pagination.setPageSize(configuration.pageSize);
         this.#filter.next({ ...this.#filter.getValue(), skip: 0, take: configuration.pageSize });
     }
     #onPageChange;
-    #setCurrentView() {
-        const currentUrl = new URL(window.location.href);
-        const lastPathSegment = currentUrl.pathname.split('/').pop();
-        const views = this.#views.getValue();
-        const viewMatch = views.find((view) => view.meta.pathName === lastPathSegment);
-        /* TODO: Find a way to figure out which layout it starts with and set _currentLayout to that instead of [0]. eg. '/table'
-            For document, media and members this will come as part of a data type configuration, but in other cases "users" we should find another way.
-            This should only happen if the current layout is not set in the URL.
-        */
-        const currentView = viewMatch || views[0];
-        this.setCurrentView(currentView);
-    }
     #observeRepository(repositoryAlias) {
         new UmbExtensionApiInitializer(this, umbExtensionsRegistry, repositoryAlias, [this._host], (permitted, ctrl) => {
             this.repository = permitted ? ctrl.api : undefined;
             this.#checkIfInitialized();
         });
     }
-    #observeViews() {
-        return new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'collectionView', null, (views) => {
-            this.#views.next(views.map((view) => view.manifest));
-            this.#setCurrentView();
-        });
-    }
 }
-export const UMB_COLLECTION_CONTEXT = new UmbContextToken('UmbCollectionContext');
+export const UMB_DEFAULT_COLLECTION_CONTEXT = new UmbContextToken('UmbCollectionContext');

package/dist-cms/packages/core/collection/{collection-default.element.d.ts → default/collection-default.element.d.ts}

@@ -1,4 +1,4 @@
-import { UmbLitElement } from '../../../shared/lit-element/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbCollectionDefaultElement extends UmbLitElement {
     #private;
     private _routes;

package/dist-cms/packages/core/collection/{collection-default.element.js → default/collection-default.element.js}

@@ -4,12 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_COLLECTION_CONTEXT, UmbDefaultCollectionContext } from './collection-default.context.js';
-import { UmbTextStyles } from '../../../shared/style/index.js';
-import { css, html, customElement, state } from '../../../external/lit/index.js';
-import { createExtensionElement } from '../../../libs/extension-api/index.js';
-import { umbExtensionsRegistry, } from '../extension-registry/index.js';
-import { UmbLitElement } from '../../../shared/lit-element/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT, UmbDefaultCollectionContext } from './collection-default.context.js';
+import { UmbTextStyles } from '../../../../shared/style/index.js';
+import { css, html, customElement, state } from '../../../../external/lit/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 const manifest = {
     type: 'kind',
     alias: 'Umb.Kind.Collection.Default',
@@ -28,35 +27,18 @@ let UmbCollectionDefaultElement = class UmbCollectionDefaultElement extends UmbL
     constructor() {
         super();
         this._routes = [];
-        this.#observeCollectionViews();
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
-            this.#observeCollectionViews();
+            this.#observeCollectionRoutes();
         });
     }
-    #observeCollectionViews() {
+    #observeCollectionRoutes() {
         if (!this.#collectionContext)
             return;
-        this.observe(this.#collectionContext.views, (views) => {
-            this.#createRoutes(views);
+        this.observe(this.#collectionContext.view.routes, (routes) => {
+            this._routes = routes;
         }),
-            'umbCollectionViewsObserver';
-    }
-    #createRoutes(views) {
-        this._routes = [];
-        if (views) {
-            this._routes = views.map((view) => {
-                return {
-                    path: `${view.meta.pathName}`,
-                    component: () => createExtensionElement(view),
-                };
-            });
-        }
-        this._routes.push({
-            path: '',
-            redirectTo: views?.[0]?.meta.pathName ?? '/',
-        });
-        this.requestUpdate();
+            'umbCollectionRoutesObserver';
     }
     render() {
         return html `

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

@@ -1,10 +1,10 @@
-import './collection-default.element.js';
+import './default/collection-default.element.js';
 import './collection.element.js';
 import './components/index.js';
-export * from './collection-default.element.js';
+export * from './default/collection-default.element.js';
 export * from './collection.element.js';
 export * from './components/index.js';
-export * from './collection-default.context.js';
+export * from './default/collection-default.context.js';
 export * from './collection-filter-model.interface.js';
 export { UMB_COLLECTION_ALIAS_CONDITION } from './collection-alias.condition.js';
 export { UmbCollectionActionElement, UmbCollectionActionBase } from './action/index.js';

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

@@ -1,10 +1,10 @@
-import './collection-default.element.js';
+import './default/collection-default.element.js';
 import './collection.element.js';
 import './components/index.js';
-export * from './collection-default.element.js';
+export * from './default/collection-default.element.js';
 export * from './collection.element.js';
 export * from './components/index.js';
-export * from './collection-default.context.js';
+export * from './default/collection-default.context.js';
 export * from './collection-filter-model.interface.js';
 export { UMB_COLLECTION_ALIAS_CONDITION } from './collection-alias.condition.js';
 export { UmbCollectionActionElement, UmbCollectionActionBase } from './action/index.js';

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

@@ -2,7 +2,8 @@ import { ManifestCollection } from '../extension-registry/index.js';
 import { Observable } from '../../../external/rxjs/index.js';
 import { UmbPaginationManager } from '../../../shared/utils/index.js';
 export interface UmbCollectionConfiguration {
-    pageSize: number;
+    pageSize?: number;
+    defaultViewAlias?: string;
 }
 export interface UmbCollectionContext {
     setManifest(manifest: ManifestCollection): void;

package/dist-cms/packages/documents/documents/collection/views/table/document-table-collection-view.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 import { css, html, customElement, state } from '../../../../../../external/lit/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../../../core/collection/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../../../core/collection/index.js';
 import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
 import './column-layouts/document-table-actions-column-layout.element.js';
 let UmbDocumentTableCollectionViewElement = class UmbDocumentTableCollectionViewElement extends UmbLitElement {
@@ -31,7 +31,7 @@ let UmbDocumentTableCollectionViewElement = class UmbDocumentTableCollectionView
         ];
         this._tableItems = [];
         this._selection = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this._observeCollectionContext();
         });

package/dist-cms/packages/media/media/collection-view/media-grid-collection-view.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, customElement, state, repeat } from '../../../../external/lit/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement extends UmbLitElement {
     constructor() {
@@ -15,7 +15,7 @@ let UmbMediaGridCollectionViewElement = class UmbMediaGridCollectionViewElement
         document.addEventListener('dragenter', this._handleDragEnter.bind(this));
         document.addEventListener('dragleave', this._handleDragLeave.bind(this));
         document.addEventListener('drop', this._handleDrop.bind(this));
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this._observeCollectionContext();
         });

package/dist-cms/packages/media/media/collection-view/media-table-collection-view.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElement extends UmbLitElement {
     constructor() {
@@ -22,7 +22,7 @@ let UmbMediaTableCollectionViewElement = class UmbMediaTableCollectionViewElemen
         ];
         this._tableItems = [];
         this._selection = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this._collectionContext = instance;
             this._observeCollectionContext();
         });

package/dist-cms/packages/user/user/collection/user-collection-header.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, customElement, state, repeat, ifDefined } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { UMB_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
+import { UMB_DEFAULT_COLLECTION_CONTEXT } from '../../../core/collection/index.js';
 import { UserOrderModel, UserStateModel } from '../../../../external/backend-api/index.js';
 import { UmbUserGroupCollectionRepository } from '../../user-group/index.js';
 let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extends UmbLitElement {
@@ -24,7 +24,7 @@ let UmbUserCollectionHeaderElement = class UmbUserCollectionHeaderElement extend
         this._userGroupFilterSelection = [];
         this.#inputTimerAmount = 500;
         this.#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
+        this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
         });
     }

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

@@ -1,7 +1,8 @@
+import { UMB_COLLECTION_VIEW_USER_GRID } from './views/index.js';
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
 export class UmbUserCollectionContext extends UmbDefaultCollectionContext {
     constructor(host) {
-        super(host, { pageSize: 50 });
+        super(host, { pageSize: 50, defaultViewAlias: UMB_COLLECTION_VIEW_USER_GRID });
     }
     /**
      * Sets the state filter for the collection and refreshes the collection.