@umbraco-cms/backoffice 14.0.0--preview004-006f30da → 14.0.0--preview004-7ae4e2a6

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

@@ -0,0 +1,15 @@
+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.post(umbracoPath(`${slug}/disable`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        if (!data.userIds)
+            return;
+        umbUsersData.disable(data.userIds);
+        return res(ctx.status(200));
+    }),
+];

package/dist-cms/mocks/handlers/user/enable.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/enable.handlers.js

@@ -0,0 +1,15 @@
+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.post(umbracoPath(`${slug}/enable`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        if (!data.userIds)
+            return;
+        umbUsersData.enable(data.userIds);
+        return res(ctx.status(200));
+    }),
+];

package/dist-cms/mocks/handlers/user/index.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/index.js

@@ -0,0 +1,20 @@
+import { handlers as detailHandlers } from './detail.handlers.js';
+import { handlers as itemHandlers } from './item.handlers.js';
+import { handlers as currentHandlers } from './current.handlers.js';
+import { handlers as setUserGroupsHandlers } from './set-user-groups.handlers.js';
+import { handlers as enableHandlers } from './enable.handlers.js';
+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';
+export const handlers = [
+    ...itemHandlers,
+    ...currentHandlers,
+    ...enableHandlers,
+    ...disableHandlers,
+    ...setUserGroupsHandlers,
+    ...changePasswordHandlers,
+    ...unlockHandlers,
+    ...detailHandlers,
+    ...inviteHandlers,
+];

package/dist-cms/mocks/handlers/user/invite.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/invite.handlers.js

@@ -0,0 +1,19 @@
+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.post(umbracoPath(`${slug}/invite`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        umbUsersData.invite(data);
+        return res(ctx.status(200));
+    }),
+    rest.post(umbracoPath(`${slug}/invite/resend`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        return res(ctx.status(200));
+    }),
+];

package/dist-cms/mocks/handlers/user/item.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/item.handlers.js

@@ -0,0 +1,13 @@
+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}/item`), (req, res, ctx) => {
+        const ids = req.url.searchParams.getAll('id');
+        if (!ids)
+            return;
+        const items = umbUsersData.getItems(ids);
+        return res(ctx.status(200), ctx.json(items));
+    }),
+];

package/dist-cms/mocks/handlers/user/set-user-groups.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/set-user-groups.handlers.js

@@ -0,0 +1,13 @@
+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.post(umbracoPath(`${slug}/set-user-groups`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        umbUsersData.setUserGroups(data);
+        return res(ctx.status(200));
+    }),
+];

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

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

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

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

package/dist-cms/mocks/handlers/user/unlock.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/unlock.handlers.js

@@ -0,0 +1,15 @@
+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.post(umbracoPath(`${slug}/unlock`), async (req, res, ctx) => {
+        const data = await req.json();
+        if (!data)
+            return;
+        if (!data.userIds)
+            return;
+        umbUsersData.unlock(data.userIds);
+        return res(ctx.status(200));
+    }),
+];

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

@@ -1,29 +1,86 @@
 import { UmbCollectionRepository } from '../repository/index.js';
-import type { UmbControllerHostElement } from '../../../libs/controller-api/index.js';
+import { UmbBaseController, type UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { UmbContextToken } from '../../../libs/context-api/index.js';
-import { UmbObserverController } from '../../../libs/observable-api/index.js';
+import { ManifestCollectionView } from '../extension-registry/index.js';
 import type { UmbCollectionFilterModel } from './index.js';
-export declare class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectionFilterModel> {
+export declare class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectionFilterModel> extends UmbBaseController {
     #private;
-    private _host;
-    private _entityType;
-    protected _dataObserver?: UmbObserverController<ItemType[]>;
-    readonly items: import("rxjs").Observable<ItemType[]>;
-    readonly total: import("rxjs").Observable<number>;
-    readonly selection: import("rxjs").Observable<string[]>;
-    readonly filter: import("rxjs").Observable<object | FilterModelType>;
+    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>;
     repository?: UmbCollectionRepository;
+    collectionRootPathname: string;
     constructor(host: UmbControllerHostElement, entityType: string, repositoryAlias: string);
+    /**
+     * Returns true if the given id is selected.
+     * @param {string} id
+     * @return {Boolean}
+     * @memberof UmbCollectionContext
+     */
     isSelected(id: string): boolean;
-    setSelection(value: Array<string>): void;
+    /**
+     * Sets the current selection.
+     * @param {Array<string>} selection
+     * @memberof UmbCollectionContext
+     */
+    setSelection(selection: Array<string>): void;
+    /**
+     * Returns the current selection.
+     * @return {Array<string>}
+     * @memberof UmbCollectionContext
+     */
     getSelection(): void;
+    /**
+     * Clears the current selection.
+     * @memberof UmbCollectionContext
+     */
     clearSelection(): void;
+    /**
+     * Appends the given id to the current selection.
+     * @param {string} id
+     * @memberof UmbCollectionContext
+     */
     select(id: string): void;
+    /**
+     * Removes the given id from the current selection.
+     * @param {string} id
+     * @memberof UmbCollectionContext
+     */
     deselect(id: string): void;
-    destroy(): void;
+    /**
+     * Returns the collection entity type
+     * @return {string}
+     * @memberof UmbCollectionContext
+     */
     getEntityType(): string;
-    protected _onRepositoryReady(): Promise<void>;
+    /**
+     * Requests the collection from the repository.
+     * @return {*}
+     * @memberof UmbCollectionContext
+     */
     requestCollection(): Promise<void>;
+    /**
+     * Sets the filter for the collection and refreshes the collection.
+     * @param {Partial<FilterModelType>} filter
+     * @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<UmbCollectionContext<any, any>, UmbCollectionContext<any, any>>;

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

@@ -1,102 +1,113 @@
+import { UmbBaseController } from '../../../libs/controller-api/index.js';
 import { UmbContextToken } from '../../../libs/context-api/index.js';
-import { UmbArrayState, UmbNumberState, UmbObjectState, UmbObserverController, } from '../../../libs/observable-api/index.js';
+import { UmbArrayState, UmbNumberState, UmbObjectState, } from '../../../libs/observable-api/index.js';
 import { createExtensionApi } from '../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../extension-registry/index.js';
-// TODO: Clean up the need for store as Media has switched to use Repositories(repository).
-export class UmbCollectionContext {
+import { map } from '../../../external/rxjs/index.js';
+import { UmbSelectionManager } from '../../../shared/utils/index.js';
+export class UmbCollectionContext extends UmbBaseController {
     #items;
     #total;
-    #selection;
+    #selectionManager;
     #filter;
-    /*
-    TODO:
-    private _search = new StringState('');
-    public readonly search = this._search.asObservable();
-    */
+    #views;
+    #currentView;
     constructor(host, entityType, repositoryAlias) {
+        super(host);
         this.#items = new UmbArrayState([]);
         this.items = this.#items.asObservable();
         this.#total = new UmbNumberState(0);
         this.total = this.#total.asObservable();
-        this.#selection = new UmbArrayState([]);
-        this.selection = this.#selection.asObservable();
+        this.#selectionManager = new UmbSelectionManager();
+        this.selection = this.#selectionManager.selection;
         this.#filter = new UmbObjectState({});
         this.filter = this.#filter.asObservable();
-        this._entityType = entityType;
-        this._host = host;
-        new UmbObserverController(this._host, umbExtensionsRegistry.getByTypeAndAlias('repository', repositoryAlias), async (repositoryManifest) => {
-            if (repositoryManifest) {
-                const result = await createExtensionApi(repositoryManifest, [this._host]);
-                this.repository = result;
-                this._onRepositoryReady();
-            }
-        });
+        this.#views = new UmbArrayState([]);
+        this.views = this.#views.asObservable();
+        this.#currentView = new UmbObjectState(undefined);
+        this.currentView = this.#currentView.asObservable();
+        this.entityType = entityType;
+        this.#selectionManager.setMultiple(true);
+        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.provideContext(UMB_COLLECTION_CONTEXT, this);
     }
+    /**
+     * Returns true if the given id is selected.
+     * @param {string} id
+     * @return {Boolean}
+     * @memberof UmbCollectionContext
+     */
     isSelected(id) {
-        return this.#selection.getValue().includes(id);
+        return this.#selectionManager.isSelected(id);
     }
-    setSelection(value) {
-        if (!value)
-            return;
-        this.#selection.next(value);
+    /**
+     * Sets the current selection.
+     * @param {Array<string>} selection
+     * @memberof UmbCollectionContext
+     */
+    setSelection(selection) {
+        this.#selectionManager.setSelection(selection);
     }
+    /**
+     * Returns the current selection.
+     * @return {Array<string>}
+     * @memberof UmbCollectionContext
+     */
     getSelection() {
-        this.#selection.getValue();
+        this.#selectionManager.getSelection();
     }
+    /**
+     * Clears the current selection.
+     * @memberof UmbCollectionContext
+     */
     clearSelection() {
-        this.#selection.next([]);
+        this.#selectionManager.clearSelection();
     }
+    /**
+     * Appends the given id to the current selection.
+     * @param {string} id
+     * @memberof UmbCollectionContext
+     */
     select(id) {
-        this.#selection.appendOne(id);
+        this.#selectionManager.select(id);
     }
+    /**
+     * Removes the given id from the current selection.
+     * @param {string} id
+     * @memberof UmbCollectionContext
+     */
     deselect(id) {
-        this.#selection.filter((k) => k !== id);
-    }
-    // TODO: how can we make sure to call this.
-    destroy() {
-        this.#items.unsubscribe();
+        this.#selectionManager.deselect(id);
     }
+    /**
+     * Returns the collection entity type
+     * @return {string}
+     * @memberof UmbCollectionContext
+     */
     getEntityType() {
-        return this._entityType;
-    }
-    /*
-    public getData() {
-        return this.#data.getValue();
-    }
-    */
-    /*
-    public update(data: Partial<DataType>) {
-        this._data.next({ ...this.getData(), ...data });
-    }
-    */
-    // protected _onStoreSubscription(): void {
-    // 	if (!this._store) {
-    // 		return;
-    // 	}
-    // 	this._dataObserver?.destroy();
-    // 	if (this._entityId) {
-    // 		this._dataObserver = new UmbObserverController(
-    // 			this._host,
-    // 			this._store.getTreeItemChildren(this._entityId),
-    // 			(nodes) => {
-    // 				if (nodes) {
-    // 					this.#data.next(nodes);
-    // 				}
-    // 			}
-    // 		);
-    // 	} else {
-    // 		this._dataObserver = new UmbObserverController(this._host, this._store.getTreeRoot(), (nodes) => {
-    // 			if (nodes) {
-    // 				this.#data.next(nodes);
-    // 			}
-    // 		});
-    // 	}
-    // }
-    async _onRepositoryReady() {
-        if (!this.repository)
-            return;
-        this.requestCollection();
+        return this.entityType;
     }
+    /**
+     * Requests the collection from the repository.
+     * @return {*}
+     * @memberof UmbCollectionContext
+     */
     async requestCollection() {
         if (!this.repository)
             return;
@@ -107,10 +118,43 @@ export class UmbCollectionContext {
             this.#items.next(data.items);
         }
     }
-    // TODO: find better name
+    /**
+     * Sets the filter for the collection and refreshes the collection.
+     * @param {Partial<FilterModelType>} filter
+     * @memberof UmbCollectionContext
+     */
     setFilter(filter) {
         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();
+    }
+    #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);
+    }
 }
 export const UMB_COLLECTION_CONTEXT = new UmbContextToken('UmbCollectionContext');

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

@@ -1,19 +1,17 @@
+import { UmbCollectionContext } from './collection.context.js';
 import { UmbLitElement } from '../../../shared/lit-element/index.js';
-import './collection-selection-actions.element.js';
-import './collection-toolbar.element.js';
 export declare class UmbCollectionElement extends UmbLitElement {
+    #private;
     private _routes;
-    private _selection?;
-    private _collectionContext?;
     private _entityType;
     get entityType(): string;
     set entityType(value: string);
-    private _collectionViewUnsubscribe?;
+    protected collectionContext?: UmbCollectionContext<any, any>;
     constructor();
-    private _observeCollectionContext;
-    private _observeCollectionViews;
     private _createRoutes;
     render(): import("lit-html").TemplateResult<1>;
+    protected renderToolbar(): import("lit-html").TemplateResult<1>;
+    protected renderSelectionActions(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 declare global {

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

@@ -4,47 +4,31 @@ 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 { UmbTextStyles } from "../../../shared/style/index.js";
-import { css, html, nothing, customElement, state, property } from '../../../external/lit/index.js';
-import { map } from '../../../external/rxjs/index.js';
-import { UMB_COLLECTION_CONTEXT } from './index.js';
+import { UMB_COLLECTION_CONTEXT } from './collection.context.js';
+import { UmbTextStyles } from '../../../shared/style/index.js';
+import { css, html, customElement, state, property } 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 './collection-selection-actions.element.js';
-import './collection-toolbar.element.js';
 export let UmbCollectionElement = class UmbCollectionElement extends UmbLitElement {
     get entityType() {
         return this._entityType;
     }
     set entityType(value) {
         this._entityType = value;
-        this._observeCollectionViews();
     }
     constructor() {
         super();
         this._routes = [];
-        this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
-            this._collectionContext = instance;
-            this._observeCollectionContext();
+        this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
+            this.collectionContext = context;
+            this.#observeCollectionViews();
         });
     }
-    _observeCollectionContext() {
-        if (!this._collectionContext)
-            return;
-        this.observe(this._collectionContext.selection, (selection) => {
-            this._selection = selection;
-        });
-    }
-    _observeCollectionViews() {
-        this._collectionViewUnsubscribe?.destroy();
-        this._collectionViewUnsubscribe = this.observe(
-        // TODO: could we make some helper methods for this scenario:
-        umbExtensionsRegistry?.extensionsOfType('collectionView').pipe(map((extensions) => {
-            return extensions.filter((extension) => extension.conditions.entityType === this._entityType);
-        })), (views) => {
+    #observeCollectionViews() {
+        this.observe(this.collectionContext.views, (views) => {
             this._createRoutes(views);
-        });
+        }),
+            'umbCollectionViewsObserver';
     }
     _createRoutes(views) {
         this._routes = [];
@@ -63,15 +47,19 @@ export let UmbCollectionElement = class UmbCollectionElement extends UmbLitEleme
     }
     render() {
         return html `
-			<umb-body-layout>
-				<umb-collection-toolbar slot="header"></umb-collection-toolbar>
+			<umb-body-layout header-transparent>
+				${this.renderToolbar()}
 				<umb-router-slot id="router-slot" .routes="${this._routes}"></umb-router-slot>
-				${this._selection && this._selection.length > 0
-            ? html `<umb-collection-selection-actions slot="footer-info"></umb-collection-selection-actions>`
-            : nothing}
+				${this.renderSelectionActions()}
 			</umb-body-layout>
 		`;
     }
+    renderToolbar() {
+        return html `<umb-collection-toolbar slot="header"></umb-collection-toolbar>`;
+    }
+    renderSelectionActions() {
+        return html `<umb-collection-selection-actions slot="footer-info"></umb-collection-selection-actions>`;
+    }
     static { this.styles = [
         UmbTextStyles,
         css `
@@ -92,9 +80,6 @@ export let UmbCollectionElement = class UmbCollectionElement extends UmbLitEleme
 __decorate([
     state()
 ], UmbCollectionElement.prototype, "_routes", void 0);
-__decorate([
-    state()
-], UmbCollectionElement.prototype, "_selection", void 0);
 __decorate([
     property({ type: String, attribute: 'entity-type' })
 ], UmbCollectionElement.prototype, "entityType", null);

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

@@ -1,5 +1,5 @@
-import { nothing } from '../../../external/lit/index.js';
-import { UmbLitElement } from '../../../shared/lit-element/index.js';
+import { nothing } from '../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export declare class UmbCollectionSelectionActionsElement extends UmbLitElement {
     #private;
     private _nodesLength;

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

@@ -4,10 +4,10 @@ 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 { 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 { UmbLitElement } from '../../../shared/lit-element/index.js';
+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 { UmbLitElement } from '../../../../shared/lit-element/index.js';
 export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionActionsElement extends UmbLitElement {
     constructor() {
         super();
@@ -34,12 +34,12 @@ export let UmbCollectionSelectionActionsElement = class UmbCollectionSelectionAc
         // TODO: Make sure it only updates on length change.
         this.observe(this._collectionContext.items, (mediaItems) => {
             this._nodesLength = mediaItems.length;
-        }, 'observeItem');
+        }, 'umbItemsLengthObserver');
         this.observe(this._collectionContext.selection, (selection) => {
             this._selectionLength = selection.length;
             this._selection = selection;
             this._extensionProps = { selection: this._selection };
-        }, 'observeSelection');
+        }, 'umbSelectionObserver');
     }
     _renderSelectionCount() {
         return html `<div>${this._selectionLength} of ${this._nodesLength} selected</div>`;