@umbraco-cms/backoffice 14.0.0--preview004-478ab905 → 14.0.0--preview004-eaff2f45

package/dist-cms/packages/settings/relation-types/workspace/views/relation-type/relation-type-workspace-view-relation-type.element.js

@@ -39,7 +39,7 @@ let UmbRelationTypeWorkspaceViewRelationTypeElement = class UmbRelationTypeWorks
     render() {
         return html `
 			<uui-box>
-				<umb-workspace-property-layout label="Direction">
+				<umb-property-layout label="Direction">
 					<uui-radio-group
 						value=${ifDefined(this._relationType?.isBidirectional)}
 						@change=${this.#handleDirectionChange}
@@ -47,15 +47,15 @@ let UmbRelationTypeWorkspaceViewRelationTypeElement = class UmbRelationTypeWorks
 						<uui-radio label="Parent to child" value="false"></uui-radio>
 						<uui-radio label="Bidirectional" value="true"></uui-radio>
 					</uui-radio-group>
-				</umb-workspace-property-layout>
-				<umb-workspace-property-layout label="Parent">${this.#renderParentProperty()}</umb-workspace-property-layout>
-				<umb-workspace-property-layout label="Child"> ${this.#renderChildProperty()} </umb-workspace-property-layout>
-				<umb-workspace-property-layout label="Is dependency">
+				</umb-property-layout>
+				<umb-property-layout label="Parent">${this.#renderParentProperty()}</umb-property-layout>
+				<umb-property-layout label="Child"> ${this.#renderChildProperty()} </umb-property-layout>
+				<umb-property-layout label="Is dependency">
 					<uui-toggle
 						slot="editor"
 						@change=${this.#handleIsDependencyChange}
 						.checked=${this._relationType?.isDependency ?? false}></uui-toggle>
-				</umb-workspace-property-layout>
+				</umb-property-layout>
 			</uui-box>
 		`;
     }

package/dist-cms/packages/tags/property-editors/tags/property-editor-ui-tags.element.js

@@ -4,9 +4,9 @@ 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_PROPERTY_CONTEXT } from '../../../core/property/index.js';
 import { html, customElement, property, state, ifDefined } from '../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
-import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../core/workspace/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-tags
@@ -26,7 +26,7 @@ let UmbPropertyEditorUITagsElement = class UmbPropertyEditorUITagsElement extend
     constructor() {
         super();
         this._value = [];
-        this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => {
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.observe(context.variantId, (id) => {
                 if (id && id.culture !== undefined) {
                     this._culture = id.culture;

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/workspace/components/user-workspace-access-settings/user-workspace-access-settings.element.js

@@ -33,30 +33,30 @@ let UmbUserWorkspaceAccessSettingsElement = class UmbUserWorkspaceAccessSettings
         return html ` <uui-box>
 				<div slot="headline"><umb-localize key="user_assignAccess">Assign Access</umb-localize></div>
 				<div id="assign-access">
-					<umb-workspace-property-layout
+					<umb-property-layout
 						label="${this.localize.term('general_groups')}"
 						description="${this.localize.term('user_groupsHelp')}">
 						<umb-user-group-input
 							slot="editor"
 							.selectedIds=${this._user?.userGroupIds ?? []}
 							@change=${this.#onUserGroupsChange}></umb-user-group-input>
-					</umb-workspace-property-layout>
-					<umb-workspace-property-layout
+					</umb-property-layout>
+					<umb-property-layout
 						label=${this.localize.term('user_startnodes')}
 						description=${this.localize.term('user_startnodeshelp')}>
 						<umb-input-document
 							.selectedIds=${this._user?.contentStartNodeIds ?? []}
 							@change=${this.#onDocumentStartNodeChange}
 							slot="editor"></umb-input-document>
-					</umb-workspace-property-layout>
-					<umb-workspace-property-layout
+					</umb-property-layout>
+					<umb-property-layout
 						label=${this.localize.term('user_mediastartnodes')}
 						description=${this.localize.term('user_mediastartnodeshelp')}>
 						<umb-input-media
 							.selectedIds=${this._user?.mediaStartNodeIds ?? []}
 							@change=${this.#onMediaStartNodeChange}
 							slot="editor"></umb-input-media>
-					</umb-workspace-property-layout>
+					</umb-property-layout>
 				</div>
 			</uui-box>
 

package/dist-cms/packages/user/user/workspace/components/user-workspace-profile-settings/user-workspace-profile-settings.element.js

@@ -31,19 +31,19 @@ let UmbUserWorkspaceProfileSettingsElement = class UmbUserWorkspaceProfileSettin
     }
     #renderEmailProperty() {
         return html `
-			<umb-workspace-property-layout label="${this.localize.term('general_email')}">
+			<umb-property-layout label="${this.localize.term('general_email')}">
 				<uui-input
 					slot="editor"
 					name="email"
 					label="${this.localize.term('general_email')}"
 					readonly
 					value=${ifDefined(this._user?.email)}></uui-input>
-			</umb-workspace-property-layout>
+			</umb-property-layout>
 		`;
     }
     #renderUILanguageProperty() {
         return html `
-			<umb-workspace-property-layout
+			<umb-property-layout
 				label="${this.localize.term('user_language')}"
 				description=${this.localize.term('user_languageHelp')}>
 				<umb-ui-culture-input
@@ -52,7 +52,7 @@ let UmbUserWorkspaceProfileSettingsElement = class UmbUserWorkspaceProfileSettin
 					@change="${this.#onLanguageChange}"
 					name="language"
 					label="${this.localize.term('user_language')}"></umb-ui-culture-input>
-			</umb-workspace-property-layout>
+			</umb-property-layout>
 		`;
     }
     static { this.styles = [

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/packages/user/user-group/workspace/user-group-workspace-editor.element.js

@@ -83,15 +83,15 @@ let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEditorElemen
         return html `
 			<uui-box>
 				<div slot="headline"><umb-localize key="user_assignAccess"></umb-localize></div>
-				<umb-workspace-property-layout
+				<umb-property-layout
 					label=${this.localize.term('main_sections')}
 					description=${this.localize.term('user_sectionsHelp')}>
 					<umb-input-section
 						slot="editor"
 						.value=${this._userGroup.sections ?? []}
 						@change=${this.#onSectionsChange}></umb-input-section>
-				</umb-workspace-property-layout>
-				<umb-workspace-property-layout
+				</umb-property-layout>
+				<umb-property-layout
 					label=${this.localize.term('defaultdialogs_selectContentStartNode')}
 					description=${this.localize.term('user_startnodehelp')}>
 					<umb-input-document
@@ -99,8 +99,8 @@ let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEditorElemen
 						max="1"
 						.selectedIds=${this._userGroup.documentStartNodeId ? [this._userGroup.documentStartNodeId] : []}
 						@change=${this.#onDocumentStartNodeChange}></umb-input-document>
-				</umb-workspace-property-layout>
-				<umb-workspace-property-layout
+				</umb-property-layout>
+				<umb-property-layout
 					label=${this.localize.term('defaultdialogs_selectMediaStartNode')}
 					description=${this.localize.term('user_mediastartnodehelp')}>
 					<umb-input-media
@@ -108,7 +108,7 @@ let UmbUserGroupWorkspaceEditorElement = class UmbUserGroupWorkspaceEditorElemen
 						max="1"
 						.selectedIds=${this._userGroup.mediaStartNodeId ? [this._userGroup.mediaStartNodeId] : []}
 						@change=${this.#onMediaStartNodeChange}></umb-input-media>
-				</umb-workspace-property-layout>
+				</umb-property-layout>
 			</uui-box>
 
 			<uui-box>

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([]);
     }
 }