@umbraco-cms/backoffice 1.0.0-next.92acfa89 → 1.0.0-next.93ea2ba6

package/dist-cms/packages/templating/templates/repository/sources/template.detail.server.data.js

@@ -1,4 +1,3 @@
-import { UmbId } from '../../../../core/id/index.js';
 import { TemplateResource, } from '../../../../../external/backend-api/index.js';
 import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
 /**
@@ -24,8 +23,21 @@ export class UmbTemplateDetailServerDataSource {
      * @memberof UmbTemplateDetailServerDataSource
      */
     get(id) {
+        if (!id)
+            throw new Error('Id is missing');
         return tryExecuteAndNotify(this.#host, TemplateResource.getTemplateById({ id }));
     }
+    /**
+     * Gets template item - you can get name and id from that
+     * @param {string} id
+     * @return {*}
+     * @memberof UmbTemplateDetailServerDataSource
+     */
+    async getItem(id) {
+        if (!id)
+            throw new Error('Id is missing');
+        return await tryExecuteAndNotify(this.#host, TemplateResource.getTemplateItem({ id: id }));
+    }
     /**
      * Creates a new Template scaffold
      * @param {(string | null)} parentId
@@ -33,28 +45,10 @@ export class UmbTemplateDetailServerDataSource {
      * @memberof UmbTemplateDetailServerDataSource
      */
     async createScaffold() {
-        const error = undefined;
-        const data = {
-            $type: '',
-            id: UmbId.new(),
-            name: '',
-            alias: '',
-            content: '',
-        };
-        // TODO: update when backend is updated so we don't have to do two calls
-        /*
-        // TODO: Revisit template models, masterTemplateAlias is not here anymore?
-        const { data: scaffoldData, error: scaffoldError } = await tryExecuteAndNotify(
-            this.#host,
-            TemplateResource.getTemplateScaffold()
-        );
-        */
-        //error = scaffoldError;
-        //data.content = scaffoldData?.content || '';
-        return { data, error };
+        return await tryExecuteAndNotify(this.#host, TemplateResource.getTemplateScaffold());
     }
     /**
-     * Inserts a new Template on the server
+     * Creates a new Template on the server
      * @param {Template} template
      * @return {*}
      * @memberof UmbTemplateDetailServerDataSource
@@ -62,7 +56,7 @@ export class UmbTemplateDetailServerDataSource {
     async insert(template) {
         if (!template)
             throw new Error('Template is missing');
-        return tryExecuteAndNotify(this.#host, tryExecuteAndNotify(this.#host, TemplateResource.postTemplate({ requestBody: template })));
+        return await tryExecuteAndNotify(this.#host, TemplateResource.postTemplate({ requestBody: template }));
     }
     /**
      * Updates a Template on the server
@@ -72,10 +66,10 @@ export class UmbTemplateDetailServerDataSource {
      */
     async update(id, template) {
         if (!id)
-            throw new Error('Id is missing');
+            throw new Error('You need to pass template id to update it');
         if (!template)
             throw new Error('Template is missing');
-        return tryExecuteAndNotify(this.#host, TemplateResource.putTemplateById({ id, requestBody: template }));
+        return await tryExecuteAndNotify(this.#host, TemplateResource.putTemplateById({ id, requestBody: template }));
     }
     /**
      * Deletes a Template on the server
@@ -85,7 +79,7 @@ export class UmbTemplateDetailServerDataSource {
      */
     async delete(id) {
         if (!id)
-            throw new Error('Id is missing');
+            throw new Error('You need to pass template id to delete it');
         return await tryExecuteAndNotify(this.#host, TemplateResource.deleteTemplateById({ id }));
     }
 }

package/dist-cms/packages/templating/templates/repository/template.repository.d.ts

@@ -1,7 +1,8 @@
-import type { UmbDetailRepository, UmbTreeRepository } from '../../../../shared/repository/index.js';
+import type { UmbDetailRepository, UmbItemRepository, UmbTreeRepository } from '../../../../shared/repository/index.js';
 import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
-import { CreateTemplateRequestModel, EntityTreeItemResponseModel, TemplateResponseModel, UpdateTemplateRequestModel } from '../../../../external/backend-api/index.js';
-export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTreeItemResponseModel>, UmbDetailRepository<CreateTemplateRequestModel, any, UpdateTemplateRequestModel, TemplateResponseModel> {
+import { CreateTemplateRequestModel, EntityTreeItemResponseModel, ItemResponseModelBaseModel, TemplateItemResponseModel, TemplateResponseModel, UpdateTemplateRequestModel } from '../../../../external/backend-api/index.js';
+import { Observable } from 'rxjs';
+export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTreeItemResponseModel>, UmbDetailRepository<CreateTemplateRequestModel, string, UpdateTemplateRequestModel, TemplateResponseModel>, UmbItemRepository<TemplateItemResponseModel> {
     #private;
     constructor(host: UmbControllerHostElement);
     requestTreeRoot(): Promise<{
@@ -16,28 +17,33 @@ export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTr
     requestRootTreeItems(): Promise<{
         data: import("../../../../shared/repository/index.js").UmbPagedData<EntityTreeItemResponseModel> | undefined;
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
-        asObservable: () => import("rxjs").Observable<EntityTreeItemResponseModel[]>;
+        asObservable: () => Observable<EntityTreeItemResponseModel[]>;
     }>;
     requestTreeItemsOf(parentId: string | null): Promise<{
         data: import("../../../../shared/repository/index.js").UmbPagedData<EntityTreeItemResponseModel> | undefined;
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
-        asObservable: () => import("rxjs").Observable<EntityTreeItemResponseModel[]>;
+        asObservable: () => Observable<EntityTreeItemResponseModel[]>;
     }>;
     requestItemsLegacy(ids: Array<string>): Promise<{
         data: any[] | undefined;
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
-        asObservable: () => import("rxjs").Observable<EntityTreeItemResponseModel[]>;
+        asObservable: () => Observable<EntityTreeItemResponseModel[]>;
     }>;
-    rootTreeItems(): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
-    treeItemsOf(parentId: string | null): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
-    itemsLegacy(ids: Array<string | null>): Promise<import("rxjs").Observable<EntityTreeItemResponseModel[]>>;
-    createScaffold(parentId: string | null): Promise<import("../../../../shared/repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").TemplateModelBaseModel>>;
+    rootTreeItems(): Promise<Observable<EntityTreeItemResponseModel[]>>;
+    treeItemsOf(parentId: string | null): Promise<Observable<EntityTreeItemResponseModel[]>>;
+    itemsLegacy(ids: Array<string | null>): Promise<Observable<EntityTreeItemResponseModel[]>>;
+    createScaffold(): Promise<import("../../../../shared/repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").TemplateScaffoldResponseModel>>;
     requestById(id: string): Promise<{
         data: TemplateResponseModel | undefined;
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
     }>;
-    byId(id: string): Promise<import("rxjs").Observable<any>>;
-    create(template: TemplateResponseModel): Promise<{
+    requestItems(id: string[]): Promise<{
+        data: ItemResponseModelBaseModel[] | undefined;
+        error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
+    }>;
+    items(uniques: string[]): Promise<Observable<ItemResponseModelBaseModel[]>>;
+    byId(id: string): Promise<Observable<any>>;
+    create(template: CreateTemplateRequestModel): Promise<{
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
     }>;
     save(id: string, template: UpdateTemplateRequestModel): Promise<{

package/dist-cms/packages/templating/templates/repository/template.repository.js

@@ -1,9 +1,9 @@
-import { UmbTemplateDetailServerDataSource } from './sources/template.detail.server.data.js';
-import { UmbTemplateTreeServerDataSource } from './sources/template.tree.server.data.js';
-import { UMB_TEMPLATE_STORE_CONTEXT_TOKEN } from './template.store.js';
-import { UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store.js';
 import { UMB_NOTIFICATION_CONTEXT_TOKEN } from '../../../core/notification/index.js';
 import { UmbContextConsumerController } from '../../../../libs/context-api/index.js';
+import { UMB_TEMPLATE_TREE_STORE_CONTEXT_TOKEN } from './template.tree.store.js';
+import { UMB_TEMPLATE_STORE_CONTEXT_TOKEN } from './template.store.js';
+import { UmbTemplateTreeServerDataSource } from './sources/template.tree.server.data.js';
+import { UmbTemplateDetailServerDataSource } from './sources/template.detail.server.data.js';
 export class UmbTemplateRepository {
     #init;
     #host;
@@ -14,7 +14,6 @@ export class UmbTemplateRepository {
     #notificationContext;
     constructor(host) {
         this.#host = host;
-        // TODO: figure out how spin up get the correct data source
         this.#treeDataSource = new UmbTemplateTreeServerDataSource(this.#host);
         this.#detailDataSource = new UmbTemplateDetailServerDataSource(this.#host);
         this.#init = Promise.all([
@@ -29,7 +28,7 @@ export class UmbTemplateRepository {
             }),
         ]);
     }
-    // TREE:
+    //#region TREE:
     async requestTreeRoot() {
         await this.#init;
         const data = {
@@ -79,12 +78,11 @@ export class UmbTemplateRepository {
         await this.#init;
         return this.#treeStore.items(ids);
     }
-    // DETAILS:
-    async createScaffold(parentId) {
-        if (parentId === undefined)
-            throw new Error('Parent id is missing');
+    //#endregion
+    //#region DETAILS:
+    async createScaffold() {
         await this.#init;
-        return this.#detailDataSource.createScaffold(parentId);
+        return this.#detailDataSource.createScaffold();
     }
     async requestById(id) {
         await this.#init;
@@ -99,6 +97,17 @@ export class UmbTemplateRepository {
         }
         return { data, error };
     }
+    async requestItems(id) {
+        await this.#init;
+        if (!id) {
+            throw new Error('Id is missing');
+        }
+        const { data, error } = await this.#detailDataSource.getItem(id);
+        return { data, error };
+    }
+    async items(uniques) {
+        throw new Error('items method is not implemented in UmbTemplateRepository');
+    }
     async byId(id) {
         if (!id)
             throw new Error('Key is missing');
@@ -108,7 +117,7 @@ export class UmbTemplateRepository {
     // Could potentially be general methods:
     async create(template) {
         await this.#init;
-        if (!template || !template.id) {
+        if (!template) {
             throw new Error('Template is missing');
         }
         const { error } = await this.#detailDataSource.insert(template);
@@ -118,7 +127,7 @@ export class UmbTemplateRepository {
         }
         // TODO: we currently don't use the detail store for anything.
         // Consider to look up the data before fetching from the server
-        this.#store?.append(template);
+        //this.#store?.append({ ...template, $type: 'EntityTreeItemResponseModel' });
         // TODO: Update tree store with the new item? or ask tree to request the new item?
         return { error };
     }
@@ -157,7 +166,6 @@ export class UmbTemplateRepository {
         // Consider notify a workspace if a template is deleted from the store while someone is editing it.
         this.#store?.remove([id]);
         this.#treeStore?.removeItem(id);
-        // TODO: would be nice to align the stores on methods/methodNames.
         return { error };
     }
 }

package/dist-cms/packages/templating/templates/repository/template.store.d.ts

@@ -27,6 +27,7 @@ export declare class UmbTemplateStore extends UmbStoreBase {
      * @memberof UmbTemplateStore
      */
     byId(id: TemplateResponseModel['id']): import("rxjs").Observable<any>;
+    items(uniques: string[]): import("rxjs").Observable<any[]>;
     /**
      * Removes templates in the store with the given uniques
      * @param {string[]} uniques

package/dist-cms/packages/templating/templates/repository/template.store.js

@@ -32,6 +32,9 @@ export class UmbTemplateStore extends UmbStoreBase {
     byId(id) {
         return this._data.getObservablePart((x) => x.find((y) => y.id === id));
     }
+    items(uniques) {
+        return this._data.getObservablePart((x) => x.filter((y) => uniques.includes(y.id)));
+    }
     /**
      * Removes templates in the store with the given uniques
      * @param {string[]} uniques

package/dist-cms/packages/templating/templates/tree/manifests.js

@@ -1,3 +1,4 @@
+import { TEMPLATE_ENTITY_TYPE, TEMPLATE_ROOT_ENTITY_TYPE } from '../index.js';
 import { TEMPLATE_REPOSITORY_ALIAS } from '../repository/manifests.js';
 const tree = {
     type: 'tree',
@@ -13,7 +14,7 @@ const treeItem = {
     alias: 'Umb.TreeItem.Template',
     name: 'Template Tree Item',
     conditions: {
-        entityTypes: ['template-root', 'template'],
+        entityTypes: [TEMPLATE_ROOT_ENTITY_TYPE, TEMPLATE_ENTITY_TYPE],
     },
 };
 export const manifests = [tree, treeItem];

package/dist-cms/packages/templating/templates/workspace/{template-workspace-edit.element.d.ts → template-workspace-editor.element.d.ts}

@@ -1,17 +1,21 @@
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-export declare class UmbTemplateWorkspaceEditElement extends UmbLitElement {
+export declare class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
     #private;
     private _name?;
     private _content?;
+    private _alias?;
+    private _ready?;
+    private _masterTemplateName?;
     private _codeEditor?;
+    private inputQuery$;
     constructor();
     private _modalContext?;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
-export default UmbTemplateWorkspaceEditElement;
+export default UmbTemplateWorkspaceEditorElement;
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-template-workspace-edit': UmbTemplateWorkspaceEditElement;
+        'umb-template-workspace-editor': UmbTemplateWorkspaceEditorElement;
     }
 }

package/dist-cms/packages/templating/templates/workspace/template-workspace-editor.element.js

@@ -0,0 +1,279 @@
+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 camelCase from 'lodash-es/camelCase.js';
+import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element.js';
+import { UUITextStyles } from '../../../../external/uui/index.js';
+import { css, html, customElement, query, state, nothing } from '../../../../external/lit/index.js';
+import { UMB_MODAL_CONTEXT_TOKEN, UMB_TEMPLATE_PICKER_MODAL } from '../../../core/modal/index.js';
+import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import { Subject, debounceTime } from '../../../../external/rxjs/index.js';
+let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
+    #templateWorkspaceContext;
+    #isNew;
+    #masterTemplateId;
+    constructor() {
+        super();
+        this._name = '';
+        this._content = '';
+        this._alias = '';
+        this._ready = false;
+        this._masterTemplateName = null;
+        this.#isNew = false;
+        this.#masterTemplateId = null;
+        this.inputQuery$ = new Subject();
+        this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
+            this._modalContext = instance;
+        });
+        this.consumeContext('UmbEntityWorkspaceContext', (workspaceContext) => {
+            this.#templateWorkspaceContext = workspaceContext;
+            this.observe(this.#templateWorkspaceContext.name, (name) => {
+                this._name = name;
+            });
+            this.observe(this.#templateWorkspaceContext.alias, (alias) => {
+                this._alias = alias;
+            });
+            this.observe(this.#templateWorkspaceContext.content, (content) => {
+                this._content = content;
+            });
+            this.observe(this.#templateWorkspaceContext.masterTemplate, (masterTemplate) => {
+                this.#masterTemplateId = masterTemplate?.id ?? null;
+                this._masterTemplateName = masterTemplate?.name ?? null;
+            });
+            this.observe(this.#templateWorkspaceContext.isNew, (isNew) => {
+                this.#isNew = !!isNew;
+            });
+            this.observe(this.#templateWorkspaceContext.isCodeEditorReady, (isReady) => {
+                this._ready = isReady;
+            });
+            this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
+                this.#templateWorkspaceContext?.setName(nameInputValue);
+                if (this.#isNew && !this._alias)
+                    this.#templateWorkspaceContext?.setAlias(camelCase(nameInputValue));
+            });
+        });
+    }
+    #onNameInput(event) {
+        const target = event.target;
+        const value = target.value;
+        this.inputQuery$.next(value);
+    }
+    #onAliasInput(event) {
+        const target = event.target;
+        const value = target.value;
+        this.#templateWorkspaceContext?.setAlias(value);
+    }
+    #onCodeEditorInput(event) {
+        const target = event.target;
+        const value = target.code;
+        this.#templateWorkspaceContext?.setContent(value);
+    }
+    #insertSnippet(event) {
+        const target = event.target;
+        const value = target.value;
+        this._codeEditor?.insert(value);
+    }
+    #openInsertSectionModal() {
+        const sectionModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL);
+        sectionModal?.onSubmit().then((insertSectionModalResult) => {
+            if (insertSectionModalResult.value)
+                this._codeEditor?.insert(insertSectionModalResult.value);
+        });
+    }
+    #resetMasterTemplate() {
+        this.#setMasterTemplateId(null);
+    }
+    async #setMasterTemplateId(id) {
+        //root item selected
+        if (id === '')
+            return;
+        if (this._content === null || this._content === undefined)
+            return;
+        const layoutBlockRegex = /(@{[\s\S][^if]*?Layout\s*?=\s*?)("[^"]*?"|null)(;[\s\S]*?})/gi;
+        const masterTemplate = await this.#templateWorkspaceContext?.setMasterTemplate(id);
+        //Reset master template or is did not exist and the declaration exists
+        if (masterTemplate === null && layoutBlockRegex.test(this._content)) {
+            const string = this._content?.replace(layoutBlockRegex, `$1null$3`);
+            this.#templateWorkspaceContext?.setContent(string);
+            return;
+        }
+        //No declaration and no valid id - do nothing
+        if (masterTemplate === null)
+            return;
+        //if has master template in the content
+        if (layoutBlockRegex.test(this._content)) {
+            const string = this._content?.replace(layoutBlockRegex, `$1"${masterTemplate?.name}.cshtml"$3`);
+            this.#templateWorkspaceContext?.setContent(string);
+            return;
+        }
+        //if no master template in the content insert it at the beginning
+        const string = `@{
+	Layout = "${masterTemplate?.name}.cshtml";
+}
+${this._content}`;
+        this.#templateWorkspaceContext?.setContent(string);
+    }
+    #openMasterTemplatePicker() {
+        const modalHandler = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
+            selection: [this.#masterTemplateId],
+            pickableFilter: (item) => {
+                return item.id !== null && item.id !== this.#templateWorkspaceContext?.getEntityId();
+            },
+        });
+        modalHandler?.onSubmit().then((data) => {
+            if (!data.selection)
+                return;
+            this.#setMasterTemplateId(data.selection[0] ?? '');
+        });
+    }
+    #renderMasterTemplatePicker() {
+        return html `
+			<uui-button-group>
+				<uui-button
+					@click=${this.#openMasterTemplatePicker}
+					look="secondary"
+					id="master-template-button"
+					label="Change Master template"
+					>${this._masterTemplateName
+            ? `Master template: ${this._masterTemplateName}`
+            : 'Set master template'}</uui-button
+				>
+				${this._masterTemplateName
+            ? html ` <uui-button look="secondary" id="save-button" label="Remove master template" compact
+							><uui-icon name="umb:delete" @click=${this.#resetMasterTemplate}></uui-icon
+					  ></uui-button>`
+            : nothing}
+			</uui-button-group>
+		`;
+    }
+    #renderCodeEditor() {
+        return html `<umb-code-editor
+			language="razor"
+			id="content"
+			.code=${this._content ?? ''}
+			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+    }
+    render() {
+        // TODO: add correct UI elements
+        return html `<umb-workspace-editor alias="Umb.Workspace.Template">
+			<uui-input placeholder="Enter name..." slot="header" .value=${this._name} @input=${this.#onNameInput}
+				><umb-template-alias-input
+					slot="append"
+					.value=${this._alias}
+					@change=${this.#onAliasInput}></umb-template-alias-input
+			></uui-input>
+			<uui-box>
+				<div slot="header" id="code-editor-menu-container">
+					${this.#renderMasterTemplatePicker()}
+					<div>
+						<umb-templating-insert-menu @insert=${this.#insertSnippet}></umb-templating-insert-menu>
+						<!-- <uui-button look="secondary" id="query-builder-button" label="Query builder">
+							<uui-icon name="umb:wand"></uui-icon>Query builder
+						</uui-button> -->
+						<uui-button
+							look="secondary"
+							id="sections-button"
+							label="Query builder"
+							@click=${this.#openInsertSectionModal}>
+							<uui-icon name="umb:indent"></uui-icon>Sections
+						</uui-button>
+					</div>
+				</div>
+				${this._ready
+            ? this.#renderCodeEditor()
+            : html `<div id="loader-container">
+							<uui-loader></uui-loader>
+					  </div>`}
+			</uui-box>
+		</umb-workspace-editor>`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+
+			#loader-container {
+				display: grid;
+				place-items: center;
+				min-height: calc(100dvh - 360px);
+			}
+
+			umb-code-editor {
+				--editor-height: calc(100dvh - 300px);
+			}
+
+			uui-box {
+				min-height: calc(100dvh - 300px);
+				margin: var(--uui-size-layout-1);
+				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
+			}
+
+			uui-input {
+				width: 100%;
+				margin: 1em;
+			}
+
+			#code-editor-menu-container uui-icon:not([name='umb:delete']) {
+				margin-right: var(--uui-size-space-3);
+			}
+
+			#insert-menu {
+				margin: 0;
+				padding: 0;
+				margin-top: var(--uui-size-space-3);
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+				min-width: calc(100% + var(--uui-size-8, 24px));
+			}
+
+			#insert-menu > li,
+			ul {
+				padding: 0;
+				width: 100%;
+				list-style: none;
+			}
+
+			.insert-menu-item {
+				width: 100%;
+			}
+
+			#code-editor-menu-container {
+				display: flex;
+				justify-content: space-between;
+				gap: var(--uui-size-space-3);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbTemplateWorkspaceEditorElement.prototype, "_name", void 0);
+__decorate([
+    state()
+], UmbTemplateWorkspaceEditorElement.prototype, "_content", void 0);
+__decorate([
+    state()
+], UmbTemplateWorkspaceEditorElement.prototype, "_alias", void 0);
+__decorate([
+    state()
+], UmbTemplateWorkspaceEditorElement.prototype, "_ready", void 0);
+__decorate([
+    state()
+], UmbTemplateWorkspaceEditorElement.prototype, "_masterTemplateName", void 0);
+__decorate([
+    query('umb-code-editor')
+], UmbTemplateWorkspaceEditorElement.prototype, "_codeEditor", void 0);
+UmbTemplateWorkspaceEditorElement = __decorate([
+    customElement('umb-template-workspace-editor')
+], UmbTemplateWorkspaceEditorElement);
+export { UmbTemplateWorkspaceEditorElement };
+export default UmbTemplateWorkspaceEditorElement;

package/dist-cms/packages/templating/templates/workspace/template-workspace.context.d.ts

@@ -5,16 +5,22 @@ import { UmbControllerHostElement } from '../../../../libs/controller-api/index.
 export declare class UmbTemplateWorkspaceContext extends UmbWorkspaceContext<UmbTemplateRepository, TemplateResponseModel> {
     #private;
     data: import("rxjs").Observable<TemplateResponseModel | undefined>;
+    masterTemplate: import("rxjs").Observable<import("../../../../external/backend-api/index.js").ItemResponseModelBaseModel | null>;
     name: import("rxjs").Observable<string | undefined>;
+    alias: import("rxjs").Observable<string | undefined>;
     content: import("rxjs").Observable<string | null | undefined>;
+    id: import("rxjs").Observable<string | undefined>;
+    isCodeEditorReady: import("rxjs").Observable<boolean>;
     constructor(host: UmbControllerHostElement);
     getEntityType(): string;
     getEntityId(): string;
     getData(): TemplateResponseModel | undefined;
     setName(value: string): void;
+    setAlias(value: string): void;
     setContent(value: string): void;
     load(entityId: string): Promise<void>;
+    setMasterTemplate(id: string | null): Promise<import("../../../../external/backend-api/index.js").ItemResponseModelBaseModel | null>;
     save(): Promise<void>;
-    createScaffold(parentId: string | null): Promise<void>;
+    createScaffold(parentId?: string | null): Promise<void>;
     destroy(): void;
 }