@umbraco-cms/backoffice 14.0.0--preview004-3ccd7a3d → 14.0.0--preview004-3ee74049

package/dist-cms/custom-elements.json

@@ -1147,6 +1147,38 @@
         }
       ]
     },
+    {
+      "name": "umb-input-markdown",
+      "path": "./../src/packages/core/components/input-markdown-editor/input-markdown.element.ts",
+      "attributes": [
+        {
+          "name": "preview",
+          "type": "boolean | undefined"
+        }
+      ],
+      "properties": [
+        {
+          "name": "preview",
+          "attribute": "preview",
+          "type": "boolean | undefined"
+        },
+        {
+          "name": "isCodeEditorReady",
+          "default": "\"this.#isCodeEditorReady.asObservable()\""
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "when the value of the input changes"
+        }
+      ]
+    },
     {
       "name": "umb-input-multi-url",
       "path": "./../src/packages/core/components/input-multi-url/input-multi-url.element.ts",
@@ -3207,6 +3239,11 @@
           "type": "array",
           "default": "[\"UmbTextStyles\"]"
         }
+      ],
+      "events": [
+        {
+          "name": "property-value-change"
+        }
       ]
     },
     {

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

@@ -1,7 +1,7 @@
 import 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 { UmbCollectionRepository } from '../../../shared/repository/index.js';
+import { UmbCollectionRepository } from '../repository/index.js';
 import type { UmbCollectionFilterModel } from './index.js';
 export declare class UmbCollectionContext<ItemType, FilterModelType extends UmbCollectionFilterModel> {
     #private;

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

@@ -15,6 +15,7 @@ export * from './input-checkbox-list/index.js';
 export * from './input-color/index.js';
 export * from './input-eye-dropper/index.js';
 export * from './input-list-base/index.js';
+export * from './input-markdown-editor/index.js';
 export * from './input-multi-url/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-number-range/index.js';

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

@@ -17,6 +17,7 @@ export * from './input-checkbox-list/index.js';
 export * from './input-color/index.js';
 export * from './input-eye-dropper/index.js';
 export * from './input-list-base/index.js';
+export * from './input-markdown-editor/index.js';
 export * from './input-multi-url/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-number-range/index.js';

package/dist-cms/packages/core/components/input-markdown-editor/index.d.ts

@@ -0,0 +1 @@
+export * from './input-markdown.element.js';

package/dist-cms/packages/core/components/input-markdown-editor/index.js

@@ -0,0 +1 @@
+export * from './input-markdown.element.js';

package/dist-cms/packages/core/components/input-markdown-editor/input-markdown.element.d.ts

@@ -0,0 +1,24 @@
+import { UmbCodeEditorElement } from '../../../templating/code-editor/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+declare const UmbInputMarkdownElement_base: (new (...args: any[]) => import("../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
+/**
+ * @element umb-input-markdown
+ * @fires change - when the value of the input changes
+ */
+export declare class UmbInputMarkdownElement extends UmbInputMarkdownElement_base {
+    #private;
+    protected getFormElement(): undefined;
+    preview?: boolean;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
+    _codeEditor?: UmbCodeEditorElement;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    renderPreview(): import("lit-html").TemplateResult<1> | undefined;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-input-markdown': UmbInputMarkdownElement;
+    }
+}
+export {};

package/dist-cms/packages/core/components/input-markdown-editor/input-markdown.element.js

@@ -0,0 +1,78 @@
+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 { loadCodeEditor } from '../../../templating/code-editor/index.js';
+import { css, html, customElement, query, property } from '../../../../external/lit/index.js';
+import { FormControlMixin } from '../../../../external/uui/index.js';
+import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+/**
+ * @element umb-input-markdown
+ * @fires change - when the value of the input changes
+ */
+export let UmbInputMarkdownElement = class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
+    getFormElement() {
+        return undefined;
+    }
+    #isCodeEditorReady;
+    constructor() {
+        super();
+        this.#isCodeEditorReady = new UmbBooleanState(false);
+        this.isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+        this.#loadCodeEditor();
+    }
+    async #loadCodeEditor() {
+        try {
+            await loadCodeEditor();
+            this._codeEditor?.editor?.updateOptions({
+                lineNumbers: false,
+                minimap: false,
+                folding: false,
+            });
+            this.#isCodeEditorReady.next(true);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    render() {
+        return html ` <div id="actions"></div>
+			<umb-code-editor language="markdown" .code=${this.value}></umb-code-editor>
+			${this.renderPreview()}`;
+    }
+    renderPreview() {
+        if (!this.preview)
+            return;
+        return html `<div>TODO Preview</div>`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+			#actions {
+				background-color: var(--uui-color-background-alt);
+				display: flex;
+			}
+
+			umb-code-editor {
+				height: 200px;
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-divider-emphasis);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Boolean })
+], UmbInputMarkdownElement.prototype, "preview", void 0);
+__decorate([
+    query('umb-code-editor')
+], UmbInputMarkdownElement.prototype, "_codeEditor", void 0);
+UmbInputMarkdownElement = __decorate([
+    customElement('umb-input-markdown')
+], UmbInputMarkdownElement);

package/dist-cms/packages/core/content-type/content-type-structure-manager.class.d.ts

@@ -1,4 +1,4 @@
-import { UmbDetailRepository } from '../../../shared/repository/index.js';
+import { UmbDetailRepository } from '../repository/index.js';
 import { PropertyTypeContainerModelBaseModel, PropertyTypeModelBaseModel, DocumentTypeResponseModel } from '../../../external/backend-api/index.js';
 import { UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { MappingFunction } from '../../../libs/observable-api/index.js';

package/dist-cms/packages/core/culture/repository/culture.repository.d.ts

@@ -5,5 +5,5 @@ export declare class UmbCultureRepository {
     requestCultures({ skip, take }?: {
         skip: number;
         take: number;
-    }): Promise<import("../../../../shared/repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").PagedCultureReponseModel>>;
+    }): Promise<import("../../repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").PagedCultureReponseModel>>;
 }

package/dist-cms/packages/core/culture/repository/sources/culture.server.data.d.ts

@@ -22,5 +22,5 @@ export declare class UmbCultureServerDataSource implements UmbCultureDataSource
     getCollection({ skip, take }: {
         skip: number;
         take: number;
-    }): Promise<import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").PagedCultureReponseModel>>;
+    }): Promise<import("../../../repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").PagedCultureReponseModel>>;
 }

package/dist-cms/packages/core/culture/repository/sources/index.d.ts

@@ -1,5 +1,5 @@
 import { PagedCultureReponseModel } from '../../../../../external/backend-api/index.js';
-import type { DataSourceResponse } from '../../../../../shared/repository/index.js';
+import type { DataSourceResponse } from '../../../repository/index.js';
 type paging = {
     skip: number;
     take: number;

package/dist-cms/packages/core/entity-action/common/create-folder/create-folder.action.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '../../entity-action.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-import { UmbFolderRepository } from '../../../../../shared/repository/index.js';
+import { UmbFolderRepository } from '../../../repository/index.js';
 export declare class UmbCreateFolderEntityAction<T extends UmbFolderRepository> extends UmbEntityActionBase<T> {
     #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string);

package/dist-cms/packages/core/entity-action/common/delete/delete.action.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '../../entity-action.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-import { UmbDetailRepository, UmbItemRepository } from '../../../../../shared/repository/index.js';
+import { UmbDetailRepository, UmbItemRepository } from '../../../repository/index.js';
 export declare class UmbDeleteEntityAction<T extends UmbDetailRepository & UmbItemRepository<any>> extends UmbEntityActionBase<T> {
     #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string);

package/dist-cms/packages/core/entity-action/common/delete-folder/delete-folder.action.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '../../entity-action.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-import { UmbFolderRepository } from '../../../../../shared/repository/index.js';
+import { UmbFolderRepository } from '../../../repository/index.js';
 export declare class UmbDeleteFolderEntityAction<T extends UmbFolderRepository> extends UmbEntityActionBase<T> {
     #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string);

package/dist-cms/packages/core/entity-action/common/folder-update/folder-update.action.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '../../entity-action.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-import { UmbFolderRepository } from '../../../../../shared/repository/index.js';
+import { UmbFolderRepository } from '../../../repository/index.js';
 export declare class UmbFolderUpdateEntityAction<T extends UmbFolderRepository = UmbFolderRepository> extends UmbEntityActionBase<T> {
     #private;
     constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string);

package/dist-cms/packages/core/entity-action/common/trash/trash.action.d.ts

@@ -1,6 +1,6 @@
 import { UmbEntityActionBase } from '../../entity-action.js';
 import { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
-import { UmbItemRepository } from '../../../../../shared/repository/index.js';
+import { UmbItemRepository } from '../../../repository/index.js';
 export declare class UmbTrashEntityAction<T extends UmbItemRepository<any> & {
     trash(unique: string): Promise<void>;
 }> extends UmbEntityActionBase<T> {

package/dist-cms/packages/core/picker-input/picker-input.context.d.ts

@@ -1,4 +1,4 @@
-import { UmbItemRepository } from '../../../shared/repository/index.js';
+import { UmbItemRepository } from '../repository/index.js';
 import { UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { UmbModalManagerContext, UmbModalToken, UmbPickerModalData } from '../modal/index.js';
 import { ItemResponseModelBaseModel } from '../../../external/backend-api/index.js';

package/dist-cms/packages/core/picker-input/picker-input.context.js

@@ -1,4 +1,4 @@
-import { UmbRepositoryItemsManager } from '../../../shared/repository/index.js';
+import { UmbRepositoryItemsManager } from '../repository/index.js';
 import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../modal/index.js';
 import { UmbContextConsumerController } from '../../../libs/context-api/index.js';
 import { UmbChangeEvent } from '../../../shared/umb-events/index.js';

package/dist-cms/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.element.d.ts

@@ -5,8 +5,10 @@ import { UmbPropertyEditorConfigCollection } from '../../index.js';
  * @element umb-property-editor-ui-markdown-editor
  */
 export declare class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorExtensionElement {
+    #private;
     value: string;
-    config?: UmbPropertyEditorConfigCollection;
+    private _preview?;
+    set config(config: UmbPropertyEditorConfigCollection | undefined);
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.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 { html, customElement, property } from '../../../../../external/lit/index.js';
-import { UmbTextStyles } from "../../../../../shared/style/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';
 /**
  * @element umb-property-editor-ui-markdown-editor
@@ -15,17 +15,30 @@ export let UmbPropertyEditorUIMarkdownEditorElement = class UmbPropertyEditorUIM
         super(...arguments);
         this.value = '';
     }
+    set config(config) {
+        this._preview = config?.getValueByAlias('preview');
+    }
+    #onChange(e) {
+        this.value = e.target.value;
+        this.dispatchEvent(new CustomEvent('property-value-change'));
+    }
     render() {
-        return html `<div>umb-property-editor-ui-markdown-editor</div>`;
+        return html `<umb-input-markdown
+			?preview=${this._preview}
+			@change=${this.#onChange}
+			.value=${this.value}></umb-input-markdown>`;
     }
     static { this.styles = [UmbTextStyles]; }
 };
 __decorate([
     property()
 ], UmbPropertyEditorUIMarkdownEditorElement.prototype, "value", void 0);
+__decorate([
+    state()
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "_preview", void 0);
 __decorate([
     property({ attribute: false })
-], UmbPropertyEditorUIMarkdownEditorElement.prototype, "config", void 0);
+], UmbPropertyEditorUIMarkdownEditorElement.prototype, "config", null);
 UmbPropertyEditorUIMarkdownEditorElement = __decorate([
     customElement('umb-property-editor-ui-markdown-editor')
 ], UmbPropertyEditorUIMarkdownEditorElement);

package/dist-cms/{shared → packages/core}/repository/data-source/data-source-response.interface.d.ts

@@ -1,4 +1,4 @@
-import type { ApiError, CancelError } from '../../../external/backend-api/index.js';
+import type { ApiError, CancelError } from '../../../../external/backend-api/index.js';
 export interface DataSourceResponse<T = unknown> extends UmbDataSourceErrorResponse {
     data?: T;
 }

package/dist-cms/{shared → packages/core}/repository/data-source/extend-data-source-paged-response-data.function.d.ts

@@ -1,5 +1,5 @@
 import { DataSourceResponse, UmbPagedData } from '../index.js';
-import { Diff } from '../../utils/index.js';
+import { Diff } from '../../../../shared/utils/index.js';
 /**
  * This function extends the data set of a paged DataSourceResponse.
  * Provide the desired type as a generic type parameter.

package/dist-cms/{shared → packages/core}/repository/data-source/extend-data-source-response-data.function.d.ts

@@ -1,5 +1,5 @@
 import { DataSourceResponse } from '../index.js';
-import { Diff } from '../../utils/index.js';
+import { Diff } from '../../../../shared/utils/index.js';
 /**
  * This function extends the data set of a DataSourceResponse.
  * Provide the desired type as a generic type parameter.

package/dist-cms/{shared → packages/core}/repository/data-source/folder-data-source.interface.d.ts

@@ -1,5 +1,5 @@
 import { DataSourceResponse } from './data-source-response.interface.js';
-import { CreateFolderRequestModel, FolderResponseModel, UpdateFolderResponseModel } from '../../../external/backend-api/index.js';
+import { CreateFolderRequestModel, FolderResponseModel, UpdateFolderResponseModel } from '../../../../external/backend-api/index.js';
 export interface UmbFolderDataSource {
     createScaffold(parentId: string | null): Promise<DataSourceResponse<FolderResponseModel>>;
     get(unique: string): Promise<DataSourceResponse<FolderResponseModel>>;

package/dist-cms/{shared → packages/core}/repository/detail-repository.interface.d.ts

@@ -1,5 +1,5 @@
 import type { DataSourceResponse, UmbDataSourceErrorResponse } from './data-source/index.js';
-import { Observable } from '../../external/rxjs/index.js';
+import { Observable } from '../../../external/rxjs/index.js';
 export interface UmbDetailRepository<CreateRequestType = any, CreateResponseType = any, UpdateRequestType = any, ResponseType = any, CreateScaffoldPresetType = Partial<CreateRequestType>> {
     createScaffold(parentId: string | null, preset?: Partial<CreateRequestType> | CreateScaffoldPresetType): Promise<DataSourceResponse<CreateRequestType>>;
     requestById(id: string): Promise<DataSourceResponse<ResponseType | undefined>>;

package/dist-cms/{shared → packages/core}/repository/folder-repository.interface.d.ts

@@ -1,4 +1,4 @@
-import type { CreateFolderRequestModel, FolderModelBaseModel, FolderResponseModel, ProblemDetails, UpdateFolderResponseModel } from '../../external/backend-api/index.js';
+import type { CreateFolderRequestModel, FolderModelBaseModel, FolderResponseModel, ProblemDetails, UpdateFolderResponseModel } from '../../../external/backend-api/index.js';
 export interface UmbFolderRepository {
     createFolderScaffold(parentId: string | null): Promise<{
         data?: FolderResponseModel;

package/dist-cms/{shared → packages/core}/repository/item-repository.interface.d.ts

@@ -1,5 +1,5 @@
-import type { Observable } from '../../external/rxjs/index.js';
-import { ItemResponseModelBaseModel, ProblemDetails } from '../../external/backend-api/index.js';
+import type { Observable } from '../../../external/rxjs/index.js';
+import { ItemResponseModelBaseModel, ProblemDetails } from '../../../external/backend-api/index.js';
 export interface UmbItemRepository<ItemType extends ItemResponseModelBaseModel> {
     requestItems: (uniques: string[]) => Promise<{
         data?: Array<ItemType> | undefined;

package/dist-cms/{shared → packages/core}/repository/repository-items.manager.d.ts

@@ -1,7 +1,7 @@
 import { UmbItemRepository } from './index.js';
-import { UmbControllerHostElement } from '../../libs/controller-api/index.js';
-import { UmbObserverController } from '../../libs/observable-api/index.js';
-import { ItemResponseModelBaseModel } from '../../external/backend-api/index.js';
+import { UmbControllerHostElement } from '../../../libs/controller-api/index.js';
+import { UmbObserverController } from '../../../libs/observable-api/index.js';
+import { ItemResponseModelBaseModel } from '../../../external/backend-api/index.js';
 export declare class UmbRepositoryItemsManager<ItemType extends ItemResponseModelBaseModel> {
     #private;
     host: UmbControllerHostElement;

package/dist-cms/{shared → packages/core}/repository/repository-items.manager.js

@@ -1,5 +1,5 @@
-import { UmbArrayState, UmbObserverController } from '../../libs/observable-api/index.js';
-import { UmbExtensionClassInitializer } from '../../packages/core/extension-registry/index.js';
+import { UmbArrayState, UmbObserverController } from '../../../libs/observable-api/index.js';
+import { UmbExtensionClassInitializer } from '../extension-registry/index.js';
 export class UmbRepositoryItemsManager {
     #getUnique;
     #init;

package/dist-cms/{shared → packages/core}/repository/tree-repository.interface.d.ts

@@ -1,6 +1,6 @@
-import type { Observable } from '../../external/rxjs/index.js';
-import type { UmbTreeRootEntityModel, UmbTreeRootModel } from '../../packages/core/tree/index.js';
-import { ProblemDetails, EntityTreeItemResponseModel } from '../../external/backend-api/index.js';
+import type { Observable } from '../../../external/rxjs/index.js';
+import type { UmbTreeRootEntityModel, UmbTreeRootModel } from '../tree/index.js';
+import { ProblemDetails, EntityTreeItemResponseModel } from '../../../external/backend-api/index.js';
 export interface UmbPagedData<T> {
     total: number;
     items: Array<T>;

package/dist-cms/packages/core/sorter/stories/test-sorter-controller.element.d.ts

@@ -5,7 +5,9 @@ type SortEntryType = {
     value: string;
 };
 export default class UmbTestSorterControllerElement extends UmbLitElement {
+    #private;
     sorter: UmbSorterController<SortEntryType>;
+    private vertical;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

package/dist-cms/packages/core/sorter/stories/test-sorter-controller.element.js

@@ -6,13 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbSorterController } from '../sorter.controller.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import { css, customElement, html } from '../../../../external/lit/index.js';
-const sorterConfig = {
+import { css, customElement, html, state } from '../../../../external/lit/index.js';
+const SORTER_CONFIG = {
     compareElementToModel: (element, model) => {
         return element.getAttribute('data-sort-entry-id') === model.id;
     },
     querySelectModelToElement: (container, modelEntry) => {
-        return container.querySelector('data-sort-entry-id[' + modelEntry.id + ']');
+        return container.querySelector('data-sort-entry-id=[' + modelEntry.id + ']');
     },
     identifier: 'test-sorter',
     itemSelector: 'li',
@@ -35,13 +35,27 @@ const model = [
 let UmbTestSorterControllerElement = class UmbTestSorterControllerElement extends UmbLitElement {
     constructor() {
         super();
-        this.sorter = new UmbSorterController(this, sorterConfig);
+        this.vertical = true;
+        this.sorter = new UmbSorterController(this, {
+            ...SORTER_CONFIG,
+            resolveVerticalDirection: () => {
+                this.vertical ? true : false;
+            },
+        });
         this.sorter.setModel(model);
     }
+    #toggle() {
+        this.vertical = !this.vertical;
+    }
     render() {
         return html `
-			<ul>
-				${model.map((entry) => html `<li id="${'sort' + entry.id}" data-sort-entry-id="${entry.id}">${entry.value}</li>`)}
+			<uui-button label="Change direction" look="outline" color="positive" @click=${this.#toggle}>
+				Horizontal/Vertical
+			</uui-button>
+			<ul class="${this.vertical ? 'vertical' : 'horizontal'}">
+				${model.map((entry) => html `<li class="item" data-sort-entry-id="${entry.id}">
+							<span><uui-icon name="umb:wand"></uui-icon>${entry.value}</span>
+						</li>`)}
 			</ul>
 		`;
     }
@@ -49,43 +63,54 @@ let UmbTestSorterControllerElement = class UmbTestSorterControllerElement extend
         css `
 			:host {
 				display: block;
+				box-sizing: border-box;
 			}
 
 			ul {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
 				list-style: none;
 				padding: 0;
-				margin: 0;
+				margin: 10px 0;
 			}
 
-			li {
-				padding: 10px;
-				margin: 5px;
-				background: #eee;
+			ul.horizontal {
+				flex-direction: row;
 			}
 
-			li:hover {
-				background: #ddd !important;
-				cursor: move;
-			}
-
-			li:active {
-				background: #ccc;
+			li {
+				cursor: grab;
+				position: relative;
+				flex: 1;
+				border-radius: var(--uui-border-radius);
 			}
 
-			#sort0 {
-				background: #f00;
+			li span {
+				display: flex;
+				align-items: center;
+				gap: 5px;
+				padding: 10px;
+				background-color: rgba(0, 255, 0, 0.3);
 			}
 
-			#sort1 {
-				background: #0f0;
+			li.--umb-sorter-placeholder span {
+				visibility: hidden;
 			}
 
-			#sort2 {
-				background: #c9da10;
+			li.--umb-sorter-placeholder::after {
+				content: '';
+				position: absolute;
+				inset: 0px;
+				border-radius: var(--uui-border-radius);
+				border: 1px dashed var(--uui-color-divider-emphasis);
 			}
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbTestSorterControllerElement.prototype, "vertical", void 0);
 UmbTestSorterControllerElement = __decorate([
     customElement('test-my-sorter-controller')
 ], UmbTestSorterControllerElement);

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

@@ -1,6 +1,6 @@
 import type { Observable } from '../../../../external/rxjs/index.js';
 import type { ProblemDetails, TreeItemPresentationModel } from '../../../../external/backend-api/index.js';
-import { UmbPagedData } from '../../../../shared/repository/index.js';
+import { UmbPagedData } from '../../repository/index.js';
 export interface UmbTreeItemContext<TreeItemType extends TreeItemPresentationModel> {
     unique?: string | null;
     type?: string;

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

@@ -21,7 +21,7 @@ export declare class UmbTreeItemContextBase<TreeItemType extends TreeItemPresent
     constructor(host: UmbControllerHost, getUniqueFunction: UmbTreeItemUniqueFunction<TreeItemType>);
     setTreeItem(treeItem: TreeItemType | undefined): void;
     requestChildren(): Promise<{
-        data?: import("../../../../shared/repository/tree-repository.interface.js").UmbPagedData<TreeItemType> | undefined;
+        data?: import("../../repository/tree-repository.interface.js").UmbPagedData<TreeItemType> | undefined;
         error?: import("../../../../external/backend-api/index.js").ProblemDetails | undefined;
         asObservable?: (() => import("rxjs/internal/Observable.js").Observable<TreeItemType[]>) | undefined;
     }>;

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

@@ -1,5 +1,5 @@
 import { Observable } from '../../../external/rxjs/index.js';
-import { UmbPagedData, UmbTreeRepository } from '../../../shared/repository/index.js';
+import { UmbPagedData, UmbTreeRepository } from '../repository/index.js';
 import { UmbBaseController, UmbControllerHostElement } from '../../../libs/controller-api/index.js';
 import { ProblemDetails, TreeItemPresentationModel } from '../../../external/backend-api/index.js';
 export interface UmbTreeContext<TreeItemType extends TreeItemPresentationModel> extends UmbBaseController {