@umbraco-cms/backoffice 14.0.0--preview004-478ab905 → 14.0.0--preview004-2a8fbe36

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

@@ -27,7 +27,7 @@ export class UmbDefaultCollectionContext extends UmbContextBase {
             this.#initialized ? resolve() : (this.#initResolver = resolve);
         });
         this.pagination = new UmbPaginationManager();
-        this.selection = new UmbSelectionManager();
+        this.selection = new UmbSelectionManager(this);
         this.#onPageChange = (event) => {
             const target = event.target;
             const skipFilter = { skip: target.getSkip() };

package/dist-cms/packages/core/modal/common/section-picker/section-picker-modal.element.js

@@ -13,7 +13,7 @@ let UmbSectionPickerModalElement = class UmbSectionPickerModalElement extends Um
     constructor() {
         super(...arguments);
         this._sections = [];
-        this.#selectionManager = new UmbSelectionManager();
+        this.#selectionManager = new UmbSelectionManager(this);
     }
     #selectionManager;
     connectedCallback() {
@@ -25,13 +25,8 @@ let UmbSectionPickerModalElement = class UmbSectionPickerModalElement extends Um
             'umbSectionsObserver';
     }
     #submit() {
-        this.value = {
-            selection: this.#selectionManager.getSelection(),
-        };
-        this.modalContext?.submit();
-    }
-    #close() {
-        this.modalContext?.reject();
+        this.value = { selection: this.#selectionManager.getSelection() };
+        this._submitModal();
     }
     render() {
         return html `
@@ -47,7 +42,7 @@ let UmbSectionPickerModalElement = class UmbSectionPickerModalElement extends Um
 						`)}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this.#close}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
 					<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
 				</div>
 			</umb-body-layout>

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

@@ -81,13 +81,13 @@ export class UmbTreeItemContextBase extends UmbBaseController {
     }
     select() {
         if (this.unique === undefined)
-            throw new Error('Could not select, unique key is missing');
-        this.treeContext?.select(this.unique);
+            throw new Error('Could not select. Unique is missing');
+        this.treeContext?.selection.select(this.unique);
     }
     deselect() {
         if (this.unique === undefined)
-            throw new Error('Could not deselect, unique key is missing');
-        this.treeContext?.deselect(this.unique);
+            throw new Error('Could not deselect. Unique is missing');
+        this.treeContext?.selection.deselect(this.unique);
     }
     #consumeContexts() {
         this.consumeContext(UMB_SECTION_CONTEXT_TOKEN, (instance) => {
@@ -110,7 +110,7 @@ export class UmbTreeItemContextBase extends UmbBaseController {
     #observeIsSelectable() {
         if (!this.treeContext)
             return;
-        this.observe(this.treeContext.selectable, (value) => {
+        this.observe(this.treeContext.selection.selectable, (value) => {
             this.#isSelectableContext.next(value);
             // If the tree is selectable, check if this item is selectable
             if (value === true) {
@@ -122,7 +122,7 @@ export class UmbTreeItemContextBase extends UmbBaseController {
     #observeIsSelected() {
         if (!this.treeContext || !this.unique)
             return;
-        this.observe(this.treeContext.selection.pipe(map((selection) => selection.includes(this.unique))), (isSelected) => {
+        this.observe(this.treeContext.selection.selection.pipe(map((selection) => selection.includes(this.unique))), (isSelected) => {
             this.#isSelected.next(isSelected);
         }, 'observeIsSelected');
     }

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

@@ -5,17 +5,9 @@ import { UmbPagedData } from '../repository/index.js';
 import { UmbBaseController } from '../../../libs/class-api/index.js';
 import { type UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { ProblemDetails } from '../../../external/backend-api/index.js';
+import { UmbSelectionManager } from '../../../shared/utils/index.js';
 export interface UmbTreeContext<TreeItemType extends UmbTreeItemModelBase> extends UmbBaseController {
-    readonly selectable: Observable<boolean>;
-    readonly selection: Observable<Array<string | null>>;
-    setSelectable(value: boolean): void;
-    getSelectable(): boolean;
-    setMultiple(value: boolean): void;
-    getMultiple(): boolean;
-    setSelection(value: Array<string | null>): void;
-    getSelection(): Array<string | null>;
-    select(unique: string | null): void;
-    deselect(unique: string | null): void;
+    selection: UmbSelectionManager;
     requestChildrenOf: (parentUnique: string | null) => Promise<{
         data?: UmbPagedData<TreeItemType>;
         error?: ProblemDetails;
@@ -24,22 +16,12 @@ export interface UmbTreeContext<TreeItemType extends UmbTreeItemModelBase> exten
 }
 export declare class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase> extends UmbBaseController implements UmbTreeContext<TreeItemType> {
     #private;
-    readonly selectable: Observable<boolean>;
-    readonly multiple: Observable<boolean>;
-    readonly selection: Observable<(string | null)[]>;
     repository?: UmbTreeRepository<TreeItemType>;
     selectableFilter?: (item: TreeItemType) => boolean;
+    readonly selection: UmbSelectionManager;
     constructor(host: UmbControllerHostElement);
     setTreeAlias(treeAlias?: string): Promise<void>;
     getTreeAlias(): string | undefined;
-    setSelectable(value: boolean): void;
-    getSelectable(): boolean;
-    setMultiple(value: boolean): void;
-    getMultiple(): boolean;
-    setSelection(value: Array<string | null>): void;
-    getSelection(): (string | null)[];
-    select(unique: string | null): void;
-    deselect(unique: string | null): void;
     requestTreeRoot(): Promise<{
         data?: UmbTreeItemModelBase | undefined;
         error?: ProblemDetails | undefined;

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

@@ -1,24 +1,16 @@
 import { umbExtensionsRegistry, } from '../extension-registry/index.js';
-import { UmbBooleanState } from '../../../libs/observable-api/index.js';
 import { UmbBaseController } from '../../../libs/class-api/index.js';
 import { UmbExtensionApiInitializer } from '../../../libs/extension-api/index.js';
 import { UmbSelectionManager } from '../../../shared/utils/index.js';
-import { UmbSelectionChangeEvent } from '../event/index.js';
 export class UmbTreeContextBase extends UmbBaseController {
-    #selectionManager;
-    #selectable;
     #treeAlias;
     #initResolver;
     #initialized;
     #init;
     constructor(host) {
         super(host);
-        this.#selectionManager = new UmbSelectionManager();
-        this.#selectable = new UmbBooleanState(false);
-        this.selectable = this.#selectable.asObservable();
-        this.multiple = this.#selectionManager.multiple;
-        this.selection = this.#selectionManager.selection;
         this.selectableFilter = () => true;
+        this.selection = new UmbSelectionManager(this._host);
         this.#initialized = false;
         this.#init = new Promise((resolve) => {
             this.#initialized ? resolve() : (this.#initResolver = resolve);
@@ -41,34 +33,6 @@ export class UmbTreeContextBase extends UmbBaseController {
     getTreeAlias() {
         return this.#treeAlias;
     }
-    setSelectable(value) {
-        this.#selectable.next(value);
-    }
-    getSelectable() {
-        return this.#selectable.getValue();
-    }
-    setMultiple(value) {
-        this.#selectionManager.setMultiple(value);
-    }
-    getMultiple() {
-        return this.#selectionManager.getMultiple();
-    }
-    setSelection(value) {
-        this.#selectionManager.setSelection(value);
-    }
-    getSelection() {
-        return this.#selectionManager.getSelection();
-    }
-    select(unique) {
-        if (!this.getSelectable())
-            return;
-        this.#selectionManager.select(unique);
-        this._host.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
-    }
-    deselect(unique) {
-        this.#selectionManager.deselect(unique);
-        this._host.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
-    }
     async requestTreeRoot() {
         await this.#init;
         return this.repository.requestTreeRoot();

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

@@ -17,24 +17,24 @@ let UmbTreeElement = class UmbTreeElement extends UmbLitElement {
         this.#treeContext.setTreeAlias(newVal);
     }
     get selectable() {
-        return this.#treeContext.getSelectable();
+        return this.#treeContext.selection.getSelectable();
     }
     set selectable(newVal) {
-        this.#treeContext.setSelectable(newVal);
+        this.#treeContext.selection.setSelectable(newVal);
     }
     get selection() {
-        return this.#treeContext.getSelection();
+        return this.#treeContext.selection.getSelection();
     }
     set selection(newVal) {
         if (!Array.isArray(newVal))
             return;
-        this.#treeContext?.setSelection(newVal);
+        this.#treeContext?.selection.setSelection(newVal);
     }
     get multiple() {
-        return this.#treeContext.getMultiple();
+        return this.#treeContext.selection.getMultiple();
     }
     set multiple(newVal) {
-        this.#treeContext.setMultiple(newVal);
+        this.#treeContext.selection.setMultiple(newVal);
     }
     get hideTreeRoot() {
         return this._hideTreeRoot;

package/dist-cms/packages/settings/languages/modals/language-picker/language-picker-modal.element.js

@@ -14,7 +14,7 @@ let UmbLanguagePickerModalElement = class UmbLanguagePickerModalElement extends
         super(...arguments);
         this._languages = [];
         this.#languageRepository = new UmbLanguageRepository(this);
-        this.#selectionManager = new UmbSelectionManager();
+        this.#selectionManager = new UmbSelectionManager(this);
     }
     #languageRepository;
     #selectionManager;

package/dist-cms/packages/user/user/modals/user-picker/user-picker-modal.element.js

@@ -13,7 +13,7 @@ let UmbUserPickerModalElement = class UmbUserPickerModalElement extends UmbModal
     constructor() {
         super(...arguments);
         this._users = [];
-        this.#selectionManager = new UmbSelectionManager();
+        this.#selectionManager = new UmbSelectionManager(this);
         this.#userCollectionRepository = new UmbUserCollectionRepository(this);
     }
     #selectionManager;

package/dist-cms/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.js

@@ -14,7 +14,7 @@ let UmbUserGroupPickerModalElement = class UmbUserGroupPickerModalElement extend
     constructor() {
         super(...arguments);
         this._userGroups = [];
-        this.#selectionManager = new UmbSelectionManager();
+        this.#selectionManager = new UmbSelectionManager(this);
         this.#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
     }
     #selectionManager;

package/dist-cms/shared/utils/index.d.ts

@@ -8,7 +8,7 @@ export * from './pagination-manager/pagination.manager.js';
 export * from './path-decode.function.js';
 export * from './path-encode.function.js';
 export * from './path-folder-name.function.js';
-export * from './selection-manager.js';
+export * from './selection-manager/selection.manager.js';
 export * from './udi-service.js';
 export * from './umbraco-path.function.js';
 export * from './split-string-to-array.js';

package/dist-cms/shared/utils/index.js

@@ -8,7 +8,7 @@ export * from './pagination-manager/pagination.manager.js';
 export * from './path-decode.function.js';
 export * from './path-encode.function.js';
 export * from './path-folder-name.function.js';
-export * from './selection-manager.js';
+export * from './selection-manager/selection.manager.js';
 export * from './udi-service.js';
 export * from './umbraco-path.function.js';
 export * from './split-string-to-array.js';

package/dist-cms/shared/utils/{selection-manager.d.ts → selection-manager/selection.manager.d.ts}

@@ -1,12 +1,28 @@
+import { UmbBaseController } from '../../../libs/class-api/index.js';
+import { UmbControllerHost } from '../../../libs/controller-api/index.js';
 /**
  * Manages the selection of items.
  * @export
  * @class UmbSelectionManager
  */
-export declare class UmbSelectionManager {
+export declare class UmbSelectionManager extends UmbBaseController {
     #private;
+    readonly selectable: import("rxjs").Observable<boolean>;
     readonly selection: import("rxjs").Observable<(string | null)[]>;
     readonly multiple: import("rxjs").Observable<boolean>;
+    constructor(host: UmbControllerHost);
+    /**
+     * Returns whether items can be selected.
+     * @return {*}
+     * @memberof UmbSelectionManager
+     */
+    getSelectable(): boolean;
+    /**
+     * Sets whether items can be selected.
+     * @param {boolean} value
+     * @memberof UmbSelectionManager
+     */
+    setSelectable(value: boolean): void;
     /**
      * Returns the current selection.
      * @return {*}

package/dist-cms/shared/utils/{selection-manager.js → selection-manager/selection.manager.js}

@@ -1,18 +1,40 @@
-import { UmbArrayState, UmbBooleanState } from '../../libs/observable-api/index.js';
+import { UmbBaseController } from '../../../libs/class-api/index.js';
+import { UmbSelectionChangeEvent } from '../../../packages/core/event/index.js';
+import { UmbArrayState, UmbBooleanState } from '../../../libs/observable-api/index.js';
 /**
  * Manages the selection of items.
  * @export
  * @class UmbSelectionManager
  */
-export class UmbSelectionManager {
-    constructor() {
+export class UmbSelectionManager extends UmbBaseController {
+    #selectable;
+    #selection;
+    #multiple;
+    constructor(host) {
+        super(host);
+        this.#selectable = new UmbBooleanState(false);
+        this.selectable = this.#selectable.asObservable();
         this.#selection = new UmbArrayState([], (x) => x);
         this.selection = this.#selection.asObservable();
         this.#multiple = new UmbBooleanState(false);
         this.multiple = this.#multiple.asObservable();
     }
-    #selection;
-    #multiple;
+    /**
+     * Returns whether items can be selected.
+     * @return {*}
+     * @memberof UmbSelectionManager
+     */
+    getSelectable() {
+        return this.#selectable.getValue();
+    }
+    /**
+     * Sets whether items can be selected.
+     * @param {boolean} value
+     * @memberof UmbSelectionManager
+     */
+    setSelectable(value) {
+        this.#selectable.next(value);
+    }
     /**
      * Returns the current selection.
      * @return {*}
@@ -27,9 +49,12 @@ export class UmbSelectionManager {
      * @memberof UmbSelectionManager
      */
     setSelection(value) {
+        if (this.getSelectable() === false)
+            return;
         if (value === undefined)
             throw new Error('Value cannot be undefined');
-        this.#selection.next(value);
+        const newSelection = this.getMultiple() ? value : [value[0]];
+        this.#selection.next(newSelection);
     }
     /**
      * Returns whether multiple items can be selected.
@@ -46,6 +71,11 @@ export class UmbSelectionManager {
      */
     setMultiple(value) {
         this.#multiple.next(value);
+        /* If multiple is set to false, and the current selection is more than one,
+        then we need to set the selection to the first item. */
+        if (value === false && this.getSelection().length > 1) {
+            this.setSelection([this.getSelection()[0]]);
+        }
     }
     /**
      * Toggles the given unique id in the current selection.
@@ -53,6 +83,8 @@ export class UmbSelectionManager {
      * @memberof UmbSelectionManager
      */
     toggleSelect(unique) {
+        if (this.getSelectable() === false)
+            return;
         this.isSelected(unique) ? this.deselect(unique) : this.select(unique);
     }
     /**
@@ -61,8 +93,13 @@ export class UmbSelectionManager {
      * @memberof UmbSelectionManager
      */
     select(unique) {
+        if (this.getSelectable() === false)
+            return;
+        if (this.isSelected(unique))
+            return;
         const newSelection = this.getMultiple() ? [...this.getSelection(), unique] : [unique];
         this.#selection.next(newSelection);
+        this.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
     }
     /**
      * Removes the given unique id from the current selection.
@@ -70,8 +107,11 @@ export class UmbSelectionManager {
      * @memberof UmbSelectionManager
      */
     deselect(unique) {
+        if (this.getSelectable() === false)
+            return;
         const newSelection = this.getSelection().filter((x) => x !== unique);
         this.#selection.next(newSelection);
+        this.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
     }
     /**
      * Returns true if the given unique id is selected.
@@ -87,6 +127,8 @@ export class UmbSelectionManager {
      * @memberof UmbSelectionManager
      */
     clearSelection() {
+        if (this.getSelectable() === false)
+            return;
         this.#selection.next([]);
     }
 }