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

package/dist-cms/packages/core/property/property-dataset/property-dataset-base-context.js

@@ -0,0 +1,58 @@
+import { UMB_PROPERTY_DATASET_CONTEXT, } from '../index.js';
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbArrayState, UmbStringState } from '../../../../libs/observable-api/index.js';
+import { UmbVariantId } from '../../variant/index.js';
+/**
+ * A base property dataset context implementation.
+ * @class UmbPropertyDatasetBaseContext
+ * @extends {UmbContextBase}
+ */
+export class UmbPropertyDatasetBaseContext extends UmbContextBase {
+    #name;
+    #values;
+    getEntityType() {
+        return this._entityType;
+    }
+    getUnique() {
+        return this._unique;
+    }
+    getName() {
+        return this.#name.getValue();
+    }
+    setName(name) {
+        this.#name.next(name);
+    }
+    getVariantId() {
+        return UmbVariantId.CreateInvariant();
+    }
+    // variant id for a specific property?
+    constructor(host) {
+        // The controller alias, is a very generic name cause we want only one of these for this controller host.
+        super(host, UMB_PROPERTY_DATASET_CONTEXT);
+        this.#name = new UmbStringState(undefined);
+        this.name = this.#name.asObservable();
+        this.#values = new UmbArrayState([], (x) => x.alias);
+        this.values = this.#values.asObservable();
+    }
+    /**
+     * TODO: Write proper JSDocs here.
+     */
+    async propertyValueByAlias(propertyAlias) {
+        return this.#values.asObservablePart((values) => {
+            const valueObj = values.find((x) => x.alias === propertyAlias);
+            return valueObj ? valueObj.value : undefined;
+        });
+    }
+    /**
+     * TODO: Write proper JSDocs here.
+     */
+    setPropertyValue(alias, value) {
+        this.#values.appendOne({ alias, value });
+    }
+    getValues() {
+        return this.#values.getValue();
+    }
+    setValues(map) {
+        this.#values.next(map);
+    }
+}

package/dist-cms/packages/core/{workspace/variant-context/variant-context.interface.d.ts → property/property-dataset/property-dataset-context.interface.d.ts}

@@ -1,20 +1,21 @@
 import type { UmbVariantId } from '../../variant/variant-id.class.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
 /**
- * A variant context, represents a set of properties.
+ * A property dataset context, represents the data of a set of properties.
  * This can take form as many, so to list a few:
- * - A specific variant of content
- * - Content that does not vary
+ * - A specific variant of content.
+ * - Content that does not vary.
  * - A block.
  * - A DataType configuration.
+ * - A property editor that hosts a set of properties.
  *
  * The base type of this holds a Name and some Properties.
  * Some might be enriches with Variant Info, like culture and segment.
  * Others might have saved publishing status.
  * Also setting the name is an additional feature.
  */
-export interface UmbVariantContext {
-    getType(): string;
+export interface UmbPropertyDatasetContext {
+    getEntityType(): string;
     getUnique(): string | undefined;
     getVariantId: () => UmbVariantId;
     getName(): string | undefined;
@@ -22,5 +23,5 @@ export interface UmbVariantContext {
     destroy(): void;
     propertyVariantId?: (propertyAlias: string) => Promise<Observable<UmbVariantId | undefined>>;
     propertyValueByAlias<ReturnType = unknown>(propertyAlias: string): Promise<Observable<ReturnType | undefined>>;
-    setPropertyValue(propertyAlias: string, value: unknown): Promise<void>;
+    setPropertyValue(propertyAlias: string, value: unknown): void;
 }

package/dist-cms/packages/core/property/property-dataset/property-dataset-context.token.d.ts

@@ -0,0 +1,3 @@
+import { type UmbPropertyDatasetContext } from './property-dataset-context.interface.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export declare const UMB_PROPERTY_DATASET_CONTEXT: UmbContextToken<UmbPropertyDatasetContext, UmbPropertyDatasetContext>;

package/dist-cms/packages/core/property/property-dataset/property-dataset-context.token.js

@@ -0,0 +1,2 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+export const UMB_PROPERTY_DATASET_CONTEXT = new UmbContextToken('UmbPropertyDatasetContext');

package/dist-cms/packages/core/property/property-dataset/property-dataset.element.d.ts

@@ -0,0 +1,67 @@
+import type { UmbPropertyValueData } from '../types/property-value-data.type.js';
+import { UmbPropertyDatasetBaseContext } from './property-dataset-base-context.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+/**
+ *  @element umb-property-dataset
+ *  @description - Element for hosting a property dataset. This is needed for umb-property to work.
+ *  @slot default - Slot for rendering content within.
+ */
+export declare class UmbPropertyDatasetElement extends UmbLitElement {
+    #private;
+    readonly context: UmbPropertyDatasetBaseContext;
+    /**
+     * The value of the dataset.
+     * @returns {Array<UmbPropertyValueData>}
+     * @memberof UmbBasicVariantElement
+     * @example
+     * ```ts
+     * const dataSet = [
+     * 	{
+     * 		alias: 'testAlias',
+     * 		value: 'value as a string',
+     * 	},
+     *  {
+     * 		alias: 'anotherAlias',
+     * 		value: 123,
+     * 	}
+     * ]
+     *
+     * html`
+     * <umb-property-dataset .value="${dataSet}">
+     * 	<umb-property
+     * 		label="My label for this property"
+     * 		description="The description to show on the property"
+     * 		alias="testAlias"
+     * 		property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"
+     * 		.config=${...}>
+     * 	</umb-property>
+     * </umb-property-dataset>
+     * `
+     * ```
+     */
+    get value(): Array<UmbPropertyValueData>;
+    set value(value: Array<UmbPropertyValueData>);
+    /**
+     * The name of the dataset, this name varies depending on the use-case. But this is either
+     * @type {string}
+     * @returns {string}
+     * @memberof UmbBasicVariantElement
+     * @example
+     * ```ts
+     * html`
+     * <umb-property-dataset name="My variant name">
+     * 	...
+     * </umb-property-dataset>
+     * `
+     */
+    get name(): string | undefined;
+    set name(value: string | undefined);
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default UmbPropertyDatasetElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-property-dataset': UmbPropertyDatasetElement;
+    }
+}

package/dist-cms/packages/core/property/property-dataset/property-dataset.element.js

@@ -0,0 +1,119 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbPropertyDatasetBaseContext } from './property-dataset-base-context.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { customElement, html, property } from '../../../../external/lit/index.js';
+import { UmbChangeEvent } from '../../event/index.js';
+/**
+ *  @element umb-property-dataset
+ *  @description - Element for hosting a property dataset. This is needed for umb-property to work.
+ *  @slot default - Slot for rendering content within.
+ */
+let UmbPropertyDatasetElement = class UmbPropertyDatasetElement extends UmbLitElement {
+    // Determine wether state change should fire an event when the value is changed.
+    #allowChangeEvent = false;
+    /**
+     * The value of the dataset.
+     * @returns {Array<UmbPropertyValueData>}
+     * @memberof UmbBasicVariantElement
+     * @example
+     * ```ts
+     * const dataSet = [
+     * 	{
+     * 		alias: 'testAlias',
+     * 		value: 'value as a string',
+     * 	},
+     *  {
+     * 		alias: 'anotherAlias',
+     * 		value: 123,
+     * 	}
+     * ]
+     *
+     * html`
+     * <umb-property-dataset .value="${dataSet}">
+     * 	<umb-property
+     * 		label="My label for this property"
+     * 		description="The description to show on the property"
+     * 		alias="testAlias"
+     * 		property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"
+     * 		.config=${...}>
+     * 	</umb-property>
+     * </umb-property-dataset>
+     * `
+     * ```
+     */
+    get value() {
+        return this.context.getValues();
+    }
+    set value(value) {
+        this.#allowChangeEvent = false;
+        this.context.setValues(value);
+        // Above might not trigger a observer callback (if no change), so set the allow change event to true:
+        this.#allowChangeEvent = true;
+    }
+    /**
+     * The name of the dataset, this name varies depending on the use-case. But this is either
+     * @type {string}
+     * @returns {string}
+     * @memberof UmbBasicVariantElement
+     * @example
+     * ```ts
+     * html`
+     * <umb-property-dataset name="My variant name">
+     * 	...
+     * </umb-property-dataset>
+     * `
+     */
+    get name() {
+        return this.context.getName();
+    }
+    set name(value) {
+        this.#allowChangeEvent = false;
+        this.context.setName(value);
+        // Above might not trigger a observer callback (if no change), so set the allow change event to true:
+        this.#allowChangeEvent = true;
+    }
+    constructor() {
+        super();
+        // Prevent any child events escaping this element.
+        this.addEventListener('change', (e) => {
+            if (e.target !== this) {
+                e.stopImmediatePropagation();
+            }
+        });
+        this.context = new UmbPropertyDatasetBaseContext(this);
+        // prevent the first change event from firing:
+        this.#allowChangeEvent = false;
+        this.observe(this.context.name, this.#observerCallback);
+        // prevent the first change event from firing:
+        this.#allowChangeEvent = false;
+        this.observe(this.context.values, this.#observerCallback);
+    }
+    #observerCallback = () => {
+        if (this.#allowChangeEvent) {
+            this.dispatchEvent(new UmbChangeEvent());
+        }
+        else {
+            // Set allow change event to true.
+            this.#allowChangeEvent = true;
+        }
+    };
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], UmbPropertyDatasetElement.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], UmbPropertyDatasetElement.prototype, "name", null);
+UmbPropertyDatasetElement = __decorate([
+    customElement('umb-property-dataset')
+], UmbPropertyDatasetElement);
+export { UmbPropertyDatasetElement };
+export default UmbPropertyDatasetElement;

package/dist-cms/packages/core/property/property-layout/index.d.ts

@@ -0,0 +1 @@
+export * from './property-layout.element.js';

package/dist-cms/packages/core/property/property-layout/index.js

@@ -0,0 +1 @@
+export * from './property-layout.element.js';

package/dist-cms/packages/core/{workspace/workspace-property-layout/workspace-property-layout.element.d.ts → property/property-layout/property-layout.element.d.ts}

@@ -1,12 +1,12 @@
 import { LitElement } from '../../../../external/lit/index.js';
 /**
- *  @element umb-workspace-property-layout
+ *  @element umb-property-layout
  *  @description - Element for displaying a property in an workspace.
  *  @slot editor - Slot for rendering the Property Editor
  *  @slot description - Slot for rendering things below the label.
- *  @slot property-action-menu - Slot for rendering the Property Action Menu
+ *  @slot action-menu - Slot for rendering the Property Action Menu
  */
-export declare class UmbWorkspacePropertyLayoutElement extends LitElement {
+export declare class UmbPropertyLayoutElement extends LitElement {
     /**
      * Alias. The technical name of the property.
      * @type {string}
@@ -41,6 +41,6 @@ export declare class UmbWorkspacePropertyLayoutElement extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-workspace-property-layout': UmbWorkspacePropertyLayoutElement;
+        'umb-property-layout': UmbPropertyLayoutElement;
     }
 }

package/dist-cms/packages/core/{workspace/workspace-property-layout/workspace-property-layout.element.js → property/property-layout/property-layout.element.js}

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, html, LitElement, customElement, property } from '../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 /**
- *  @element umb-workspace-property-layout
+ *  @element umb-property-layout
  *  @description - Element for displaying a property in an workspace.
  *  @slot editor - Slot for rendering the Property Editor
  *  @slot description - Slot for rendering things below the label.
- *  @slot property-action-menu - Slot for rendering the Property Action Menu
+ *  @slot action-menu - Slot for rendering the Property Action Menu
  */
-let UmbWorkspacePropertyLayoutElement = class UmbWorkspacePropertyLayoutElement extends LitElement {
+let UmbPropertyLayoutElement = class UmbPropertyLayoutElement extends LitElement {
     constructor() {
         super(...arguments);
         /**
@@ -51,7 +51,7 @@ let UmbWorkspacePropertyLayoutElement = class UmbWorkspacePropertyLayoutElement
         return html `
 			<div id="headerColumn">
 				<uui-label title=${this.alias}>${this.label}</uui-label>
-				<slot name="property-action-menu"></slot>
+				<slot name="action-menu"></slot>
 				<div id="description">${this.description}</div>
 				<slot name="description"></slot>
 			</div>
@@ -114,17 +114,17 @@ let UmbWorkspacePropertyLayoutElement = class UmbWorkspacePropertyLayoutElement
 };
 __decorate([
     property({ type: String })
-], UmbWorkspacePropertyLayoutElement.prototype, "alias", void 0);
+], UmbPropertyLayoutElement.prototype, "alias", void 0);
 __decorate([
     property({ type: String })
-], UmbWorkspacePropertyLayoutElement.prototype, "label", void 0);
+], UmbPropertyLayoutElement.prototype, "label", void 0);
 __decorate([
     property({ type: String })
-], UmbWorkspacePropertyLayoutElement.prototype, "orientation", void 0);
+], UmbPropertyLayoutElement.prototype, "orientation", void 0);
 __decorate([
     property({ type: String })
-], UmbWorkspacePropertyLayoutElement.prototype, "description", void 0);
-UmbWorkspacePropertyLayoutElement = __decorate([
-    customElement('umb-workspace-property-layout')
-], UmbWorkspacePropertyLayoutElement);
-export { UmbWorkspacePropertyLayoutElement };
+], UmbPropertyLayoutElement.prototype, "description", void 0);
+UmbPropertyLayoutElement = __decorate([
+    customElement('umb-property-layout')
+], UmbPropertyLayoutElement);
+export { UmbPropertyLayoutElement };

package/dist-cms/packages/core/property/types/index.d.ts

@@ -0,0 +1 @@
+export * from './property-value-data.type.js';

package/dist-cms/packages/core/property/types/index.js

@@ -0,0 +1 @@
+export * from './property-value-data.type.js';

package/dist-cms/packages/core/property/types/property-value-data.type.d.ts

@@ -0,0 +1,4 @@
+export type UmbPropertyValueData<ValueType = unknown> = {
+    alias: string;
+    value?: ValueType;
+};

package/dist-cms/packages/core/property/types/property-value-data.type.js

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

package/dist-cms/packages/core/property-action/common/clear/property-action-clear.element.js

@@ -4,8 +4,8 @@ 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 '../../../property/index.js';
 import { html, customElement, property } from '../../../../../external/lit/index.js';
-import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../workspace/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 let UmbPropertyActionClearElement = class UmbPropertyActionClearElement extends UmbLitElement {
     constructor() {
@@ -16,7 +16,7 @@ let UmbPropertyActionClearElement = class UmbPropertyActionClearElement extends
             this._propertyActionMenuContext = propertyActionsContext;
         });
         */
-        this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (propertyContext) => {
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
             this._propertyContext = propertyContext;
         });
     }

package/dist-cms/packages/core/property-editor/uis/block-grid/property-editor-ui-block-grid.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_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../workspace/workspace-property/workspace-property.context.js';
+import { UMB_PROPERTY_CONTEXT } from '../../../property/index.js';
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
@@ -16,7 +16,7 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
         super();
         this.value = '';
         this._routes = [];
-        this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => {
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.observe(context?.variantId, (propertyVariantId) => {
                 this._variantId = propertyVariantId;
                 this.setupRoutes();

package/dist-cms/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.js

@@ -16,7 +16,7 @@ let UmbPropertyEditorUIBlockListBlockConfigurationElement = class UmbPropertyEdi
         this.value = '';
     }
     render() {
-        return html `<div>umb-property-editor-ui-block-list-block-configuration</div>`;
+        return html ` <div>umb-property-editor-ui-block-list-block-configuration</div> `;
     }
     static { this.styles = [UmbTextStyles]; }
 };

package/dist-cms/packages/core/property-editor/uis/multi-url-picker/property-editor-ui-multi-url-picker.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 '../../../property/index.js';
 import { html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
-import { UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN } from '../../../workspace/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 /**
  * @element umb-property-editor-ui-multi-url-picker
@@ -22,7 +22,7 @@ let UmbPropertyEditorUIMultiUrlPickerElement = class UmbPropertyEditorUIMultiUrl
     constructor() {
         super();
         this.value = [];
-        this.consumeContext(UMB_WORKSPACE_PROPERTY_CONTEXT_TOKEN, (context) => {
+        this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.observe(context.alias, (alias) => {
                 this._alias = alias;
             });

package/dist-cms/packages/core/property-editor/uis/text-box/property-editor-ui-text-box.element.js

@@ -21,7 +21,10 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
         this._maxChars = config?.getValueByAlias('maxChars');
     }
     onChange(e) {
-        this.value = e.target.value;
+        const newValue = e.target.value;
+        if (newValue === this.value)
+            return;
+        this.value = newValue;
         this.dispatchEvent(new CustomEvent('property-value-change'));
     }
     render() {
@@ -30,7 +33,7 @@ let UmbPropertyEditorUITextBoxElement = class UmbPropertyEditorUITextBoxElement
 			.type=${this._type}
 			inputMode=${ifDefined(this._inputMode)}
 			maxlength=${ifDefined(this._maxChars)}
-			@change=${this.onChange}></uui-input>`;
+			@input=${this.onChange}></uui-input>`;
     }
     static { this.styles = [
         UmbTextStyles,

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;