@umbraco-cms/backoffice 1.0.0-next.ea1e6e6f → 1.0.0-next.ed0b8881

package/dist-cms/packages/settings/languages/workspace/language/{language-workspace-edit.element.js → language-workspace-editor.element.js}

@@ -8,7 +8,7 @@ import { UUITextStyles, UUIInputEvent } from '../../../../../external/uui/index.
 import { css, html, customElement, state, ifDefined } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../../../core/workspace/index.js';
-let UmbLanguageWorkspaceEditElement = class UmbLanguageWorkspaceEditElement extends UmbLitElement {
+let UmbLanguageWorkspaceEditorElement = class UmbLanguageWorkspaceEditorElement extends UmbLitElement {
     #workspaceContext;
     constructor() {
         super();
@@ -48,7 +48,7 @@ let UmbLanguageWorkspaceEditElement = class UmbLanguageWorkspaceEditElement exte
 							value=${ifDefined(this._language?.name)}
 							@input="${this.#handleInput}"></uui-input>`}
 			</div>
-			<div slot="footer" id="footer">
+			<div slot="footer-info" id="footer-into">
 				<a href="section/settings/workspace/language-root">Languages</a> /
 				${this._isNew ? 'Create' : this._language?.name}
 			</div>
@@ -73,7 +73,7 @@ let UmbLanguageWorkspaceEditElement = class UmbLanguageWorkspaceEditElement exte
 				align-items: center;
 			}
 
-			#footer {
+			#footer-into {
 				padding: 0 var(--uui-size-layout-1);
 			}
 
@@ -85,12 +85,12 @@ let UmbLanguageWorkspaceEditElement = class UmbLanguageWorkspaceEditElement exte
 };
 __decorate([
     state()
-], UmbLanguageWorkspaceEditElement.prototype, "_language", void 0);
+], UmbLanguageWorkspaceEditorElement.prototype, "_language", void 0);
 __decorate([
     state()
-], UmbLanguageWorkspaceEditElement.prototype, "_isNew", void 0);
-UmbLanguageWorkspaceEditElement = __decorate([
-    customElement('umb-language-workspace-edit')
-], UmbLanguageWorkspaceEditElement);
-export { UmbLanguageWorkspaceEditElement };
-export default UmbLanguageWorkspaceEditElement;
+], UmbLanguageWorkspaceEditorElement.prototype, "_isNew", void 0);
+UmbLanguageWorkspaceEditorElement = __decorate([
+    customElement('umb-language-workspace-editor')
+], UmbLanguageWorkspaceEditorElement);
+export { UmbLanguageWorkspaceEditorElement };
+export default UmbLanguageWorkspaceEditorElement;

package/dist-cms/packages/settings/languages/workspace/language/language-workspace.element.d.ts

@@ -1,6 +1,6 @@
 import type { UmbRoute } from '../../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
-import './language-workspace-edit.element.js';
+import './language-workspace-editor.element.js';
 export declare class UmbLanguageWorkspaceElement extends UmbLitElement {
     #private;
     _routes: UmbRoute[];

package/dist-cms/packages/settings/languages/workspace/language/language-workspace.element.js

@@ -9,7 +9,7 @@ import { UUITextStyles } from '../../../../../external/uui/index.js';
 import { css, html, customElement, state } from '../../../../../external/lit/index.js';
 import { generateRoutePathBuilder } from '../../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
-import './language-workspace-edit.element.js';
+import './language-workspace-editor.element.js';
 let UmbLanguageWorkspaceElement = class UmbLanguageWorkspaceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -19,7 +19,7 @@ let UmbLanguageWorkspaceElement = class UmbLanguageWorkspaceElement extends UmbL
             if (this.#editorElement) {
                 return this.#editorElement;
             }
-            this.#editorElement = new (await import('./language-workspace-edit.element.js')).default();
+            this.#editorElement = new (await import('./language-workspace-editor.element.js')).default();
             return this.#editorElement;
         };
         this._routes = [

package/dist-cms/packages/settings/logviewer/components/index.d.ts

@@ -1 +1 @@
-import './donut-chart.js';
+import './donut-chart/index.js';

package/dist-cms/packages/settings/logviewer/components/index.js

@@ -1 +1 @@
-import './donut-chart.js';
+import './donut-chart/index.js';

package/dist-cms/packages/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.d.ts

@@ -1,6 +1,7 @@
 import './components/index.js';
 import { PropertyValueMap } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import '../../components/index.js';
 export declare class UmbLogViewerWorkspaceElement extends UmbLitElement {
     #private;
     private _alias;

package/dist-cms/packages/settings/logviewer/workspace/logviewer-root/logviewer-root-workspace.element.js

@@ -7,11 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import './components/index.js';
 import { UmbLogViewerWorkspaceContext, UMB_APP_LOG_VIEWER_CONTEXT_TOKEN } from '../logviewer.context.js';
 import { map } from '../../../../../external/rxjs/index.js';
-import { css, html, nothing, customElement, state, repeat } from '../../../../../external/lit/index.js';
+import { css, html, nothing, customElement, state, repeat, } from '../../../../../external/lit/index.js';
 import { UUITextStyles } from '../../../../../external/uui/index.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { createExtensionElement } from '../../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry, } from '../../../../core/extension-registry/index.js';
+import '../../components/index.js';
 //TODO make uui-input accept min and max values
 let UmbLogViewerWorkspaceElement = class UmbLogViewerWorkspaceElement extends UmbLitElement {
     #logViewerContext;
@@ -63,7 +64,7 @@ let UmbLogViewerWorkspaceElement = class UmbLogViewerWorkspaceElement extends Um
                 };
             });
             this._routes.push({
-                path: '**',
+                path: '',
                 redirectTo: `${this._workspaceViews[0].meta.pathname}`,
             });
         }

package/dist-cms/packages/settings/relation-types/workspace/{relation-type-workspace-edit.element.d.ts → relation-type-workspace-editor.element.d.ts}

@@ -1,9 +1,9 @@
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 /**
- * @element umb-relation-type-workspace-edit-element
+ * @element umb-relation-type-workspace-editor
  * @description - Element for displaying a Relation Type Workspace
  */
-export declare class UmbRelationTypeWorkspaceEditElement extends UmbLitElement {
+export declare class UmbRelationTypeWorkspaceEditorElement extends UmbLitElement {
     #private;
     private _relationType?;
     constructor();
@@ -11,9 +11,9 @@ export declare class UmbRelationTypeWorkspaceEditElement extends UmbLitElement {
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
-export default UmbRelationTypeWorkspaceEditElement;
+export default UmbRelationTypeWorkspaceEditorElement;
 declare global {
     interface HTMLElementTagNameMap {
-        'umb-relation-type-workspace-edit-element': UmbRelationTypeWorkspaceEditElement;
+        'umb-relation-type-workspace-editor': UmbRelationTypeWorkspaceEditorElement;
     }
 }

package/dist-cms/packages/settings/relation-types/workspace/{relation-type-workspace-edit.element.js → relation-type-workspace-editor.element.js}

@@ -9,10 +9,10 @@ import { css, html, customElement, state } from '../../../../external/lit/index.
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../../core/workspace/index.js';
 /**
- * @element umb-relation-type-workspace-edit-element
+ * @element umb-relation-type-workspace-editor
  * @description - Element for displaying a Relation Type Workspace
  */
-let UmbRelationTypeWorkspaceEditElement = class UmbRelationTypeWorkspaceEditElement extends UmbLitElement {
+let UmbRelationTypeWorkspaceEditorElement = class UmbRelationTypeWorkspaceEditorElement extends UmbLitElement {
     #workspaceContext;
     constructor() {
         super();
@@ -76,9 +76,9 @@ let UmbRelationTypeWorkspaceEditElement = class UmbRelationTypeWorkspaceEditElem
 };
 __decorate([
     state()
-], UmbRelationTypeWorkspaceEditElement.prototype, "_relationType", void 0);
-UmbRelationTypeWorkspaceEditElement = __decorate([
-    customElement('umb-relation-type-workspace-edit-element')
-], UmbRelationTypeWorkspaceEditElement);
-export { UmbRelationTypeWorkspaceEditElement };
-export default UmbRelationTypeWorkspaceEditElement;
+], UmbRelationTypeWorkspaceEditorElement.prototype, "_relationType", void 0);
+UmbRelationTypeWorkspaceEditorElement = __decorate([
+    customElement('umb-relation-type-workspace-editor')
+], UmbRelationTypeWorkspaceEditorElement);
+export { UmbRelationTypeWorkspaceEditorElement };
+export default UmbRelationTypeWorkspaceEditorElement;

package/dist-cms/packages/settings/relation-types/workspace/relation-type-workspace.element.d.ts

@@ -1,6 +1,6 @@
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
 import type { UmbRoute } from '../../../../shared/router/index.js';
-import './relation-type-workspace-edit.element.js';
+import './relation-type-workspace-editor.element.js';
 /**
  * @element umb-relation-type-workspace
  * @description - Element for displaying a Relation Type Workspace

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

@@ -8,7 +8,7 @@ import { UmbRelationTypeWorkspaceContext } from './relation-type-workspace.conte
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
-import './relation-type-workspace-edit.element.js';
+import './relation-type-workspace-editor.element.js';
 /**
  * @element umb-relation-type-workspace
  * @description - Element for displaying a Relation Type Workspace
@@ -18,7 +18,7 @@ let UmbRelationTypeWorkspaceElement = class UmbRelationTypeWorkspaceElement exte
         super(...arguments);
         this.#workspaceContext = new UmbRelationTypeWorkspaceContext(this);
         this.#routerPath = '';
-        this.#element = document.createElement('umb-relation-type-workspace-edit-element');
+        this.#element = document.createElement('umb-relation-type-workspace-editor');
         this.#key = '';
         this._routes = [
             {

package/dist-cms/packages/tags/property-editors/tags/config/storage-type/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../../../core/extension-registry/index.js';
-export declare const manifest: ManifestPropertyEditorUI;
+import type { ManifestPropertyEditorUi } from '../../../../../core/extension-registry/index.js';
+export declare const manifest: ManifestPropertyEditorUi;

package/dist-cms/packages/tags/property-editors/tags/config/storage-type/manifests.js

@@ -1,11 +1,11 @@
 export const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.Tags.StorageType',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.Tags.StorageType',
     name: 'Tags Storage Type Property Editor UI',
     loader: () => import('./property-editor-ui-tags-storage-type.element.js'),
     meta: {
         label: 'Tags Storage Type',
-        propertyEditorModel: '',
+        propertyEditorAlias: '',
         icon: 'umb:autofill',
         group: 'common',
     },

package/dist-cms/packages/tags/property-editors/tags/manifests.d.ts

@@ -1,2 +1,2 @@
-import type { ManifestPropertyEditorUI } from '../../../core/extension-registry/index.js';
-export declare const manifests: ManifestPropertyEditorUI[];
+import type { ManifestPropertyEditorUi } from '../../../core/extension-registry/index.js';
+export declare const manifests: ManifestPropertyEditorUi[];

package/dist-cms/packages/tags/property-editors/tags/manifests.js

@@ -1,12 +1,12 @@
 import { manifest as storageType } from './config/storage-type/manifests.js';
 const manifest = {
-    type: 'propertyEditorUI',
-    alias: 'Umb.PropertyEditorUI.Tags',
+    type: 'propertyEditorUi',
+    alias: 'Umb.PropertyEditorUi.Tags',
     name: 'Tags Property Editor UI',
     loader: () => import('./property-editor-ui-tags.element.js'),
     meta: {
         label: 'Tags',
-        propertyEditorModel: 'Umbraco.Tags',
+        propertyEditorAlias: 'Umbraco.Tags',
         icon: 'umb:tags',
         group: 'common',
     },

package/dist-cms/packages/templating/components/insert-menu/templating-insert-menu.element.js

@@ -32,6 +32,7 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
         };
         this.#getUmbracoFieldValueSnippet = async (value) => {
             this.value = value;
+            this.#dispatchInsertEvent();
         };
         this.#getPartialViewSnippet = async (modalResult) => {
             this.value = getInsertPartialSnippet(modalResult.selection?.[0] ?? '');
@@ -61,7 +62,8 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
                 break;
             }
             case CodeSnippetType.dictionaryItem: {
-                this.#getDictionaryItemSnippet(value);
+                await this.#getDictionaryItemSnippet(value);
+                this.#dispatchInsertEvent();
                 break;
             }
             case CodeSnippetType.macro: {
@@ -89,7 +91,9 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
         });
     }
     #openInsertDictionaryItemModal() {
-        this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL);
+        this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
+            pickableFilter: (item) => item.id !== null,
+        });
         this.#openModal?.onSubmit().then((value) => {
             this.#getDictionaryItemSnippet(value).then(() => {
                 this.#dispatchInsertEvent();
@@ -97,7 +101,7 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
         });
     }
     #dispatchInsertEvent() {
-        this.dispatchEvent(new CustomEvent('insert', { bubbles: true, cancelable: true, composed: false }));
+        this.dispatchEvent(new CustomEvent('insert', { bubbles: false, cancelable: true, composed: false }));
     }
     render() {
         return html `
@@ -112,25 +116,18 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
 					id="insert-button"
 					label="open insert menu">
 					<ul id="insert-menu" slot="dropdown">
+						<!-- 
+						TODO: uncomment when insert value has endpoint and is properly implemented	
 						<li>
 							<uui-menu-item
 								class="insert-menu-item"
 								target="_blank"
 								label="Value"
 								title="Value"
-								@click=${this.#openInsertValueSidebar}>
+								>
 							</uui-menu-item>
-						</li>
-						${this.hidePartialView
-            ? ''
-            : html ` <li>
-									<uui-menu-item
-										class="insert-menu-item"
-										label="Partial view"
-										title="Partial view"
-										@click=${this.#openInsertPartialViewSidebar}>
-									</uui-menu-item>
-							  </li>`}
+						</li> -->
+
 						<li>
 							<uui-menu-item
 								class="insert-menu-item"
@@ -139,17 +136,32 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
 								@click=${this.#openInsertDictionaryItemModal}>
 							</uui-menu-item>
 						</li>
-						<li>
+						<!-- <li>
 							<uui-menu-item class="insert-menu-item" label="Macro" title="Macro"> </uui-menu-item>
-						</li>
+						</li> -->
 					</ul>
 				</umb-button-with-dropdown>
 			</uui-button-group>
 		`;
     }
+    //TODO: put this back in when partial view is implemented
+    // ${this.hidePartialView
+    // 		? ''
+    // 		: html` <li>
+    // 				<uui-menu-item
+    // 					class="insert-menu-item"
+    // 					label="Partial view"
+    // 					title="Partial view"
+    // 					@click=${this.#openInsertPartialViewSidebar}>
+    // 				</uui-menu-item>
+    // 		  </li>`}
     static { this.styles = [
         UUITextStyles,
         css `
+			:host {
+				--umb-header-layout-height: 70px;
+			}
+
 			#insert-menu {
 				margin: 0;
 				padding: 0;

package/dist-cms/packages/templating/index.d.ts

@@ -1,5 +1,5 @@
 import type { UmbEntryPointOnInit } from '../../libs/extension-api/index.js';
 import './components/index.js';
-import './templates/components/index.js';
+import './templates/index.js';
 export declare const manifests: (import("../core/index.js").ManifestSectionSidebarApp | import("../core/index.js").ManifestModal | import("../core/index.js").ManifestEntityAction | import("../core/index.js").ManifestMenu | import("../core/index.js").ManifestMenuItemTreeKind | import("../core/index.js").ManifestRepository | import("../core/index.js").ManifestStore | import("../core/index.js").ManifestTree | import("../core/index.js").ManifestTreeItem | import("../core/index.js").ManifestTreeStore | import("../core/index.js").ManifestWorkspace | import("../core/index.js").ManifestWorkspaceAction | import("../core/index.js").ManifestWorkspaceEditorView)[];
 export declare const onInit: UmbEntryPointOnInit;

package/dist-cms/packages/templating/index.js

@@ -4,7 +4,7 @@ import { manifests as stylesheetManifests } from './stylesheets/manifests.js';
 import { manifests as partialManifests } from './partial-views/manifests.js';
 import { manifests as modalManifests } from './modals/manifests.js';
 import './components/index.js';
-import './templates/components/index.js';
+import './templates/index.js';
 export const manifests = [
     ...menuManifests,
     ...templateManifests,

package/dist-cms/packages/templating/modals/insert-choose-type-sidebar.element.js

@@ -49,40 +49,41 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
         });
     }
     #openInsertDictionaryItemModal() {
-        this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL);
+        this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
+            pickableFilter: (item) => item.id !== null,
+        });
         this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => {
             if (dictionaryItemPickerModalResult)
                 this.modalHandler?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem });
         });
     }
+    //TODO: insert this when we have insert value implemented
+    #renderInsertValueButton() {
+        return html `<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
+			><h3>Value</h3>
+			<p>
+				Displays the value of a named field from the current page, with options to modify the value or fallback to
+				alternative values.
+			</p></uui-button
+		>`;
+    }
+    //TODO: insert this when we have partial views
+    #renderInsertPartialViewButton() {
+        return html `${this.data?.hidePartialViews
+            ? ''
+            : html `<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
+					><h3>Partial view</h3>
+					<p>
+						A partial view is a separate template file which can be rendered inside another template, it's great for
+						reusing markup or for separating complex templates into separate files.
+					</p></uui-button
+			  >`}`;
+    }
     render() {
         return html `
 			<umb-body-layout headline="Insert">
 				<div id="main">
 					<uui-box>
-						<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
-							><h3>Value</h3>
-							<p>
-								Displays the value of a named field from the current page, with options to modify the value or fallback
-								to alternative values.
-							</p></uui-button
-						>
-						${this.data?.hidePartialViews
-            ? ''
-            : html `<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
-									><h3>Partial view</h3>
-									<p>
-										A partial view is a separate template file which can be rendered inside another template, it's great
-										for reusing markup or for separating complex templates into separate files.
-									</p></uui-button
-							  >`}
-						<uui-button @click=${this._close} look="placeholder" label="Insert Macro"
-							><h3>Macro</h3>
-							<p>
-								A Macro is a configurable component which is great for reusable parts of your design, where you need the
-								option to provide parameters, such as galleries, forms and lists.
-							</p></uui-button
-						>
 						<uui-button @click=${this.#openInsertDictionaryItemModal} look="placeholder" label="Insert Dictionary item"
 							><h3>Dictionary item</h3>
 							<p>
@@ -104,6 +105,7 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
 			:host {
 				display: block;
 				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
 			}
 
 			#main {

package/dist-cms/packages/templating/modals/insert-section-modal/insert-section-input.element.d.ts

@@ -7,11 +7,13 @@ export declare class UmbInsertSectionCheckboxElement extends UUIBooleanInputElem
     input?: UUIInputElement;
     form?: HTMLFormElement;
     checkbox?: HTMLFormElement;
+    get snippet(): string;
+    snippetMethod?: (value: string, isMandatory: boolean) => string;
     validate(): boolean;
     get inputValue(): FormData | FormDataEntryValue | undefined;
     get isMandatory(): any;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }
 export default UmbInsertSectionCheckboxElement;
 declare global {

package/dist-cms/packages/templating/modals/insert-section-modal/insert-section-input.element.js

@@ -15,6 +15,12 @@ let UmbInsertSectionCheckboxElement = class UmbInsertSectionCheckboxElement exte
     renderCheckbox() {
         return html ``;
     }
+    get snippet() {
+        if (!this.snippetMethod)
+            return '';
+        const snippet = this.snippetMethod(this.inputValue, this.isMandatory) ?? '';
+        return snippet;
+    }
     validate() {
         if (!this.form)
             return true;
@@ -129,6 +135,9 @@ __decorate([
 __decorate([
     query('uui-checkbox')
 ], UmbInsertSectionCheckboxElement.prototype, "checkbox", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbInsertSectionCheckboxElement.prototype, "snippetMethod", void 0);
 UmbInsertSectionCheckboxElement = __decorate([
     customElement('umb-insert-section-checkbox')
 ], UmbInsertSectionCheckboxElement);

package/dist-cms/packages/templating/modals/insert-section-modal/insert-section-modal.element.d.ts

@@ -1,7 +1,8 @@
-import UmbInsertSectionCheckboxElement from './insert-section-input.element.js';
-import { UmbModalBaseElement } from '../../../../shared/modal/index.js';
 import { UmbModalToken } from '../../../core/modal/index.js';
-export declare const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL: UmbModalToken<object, unknown>;
+import { UmbModalBaseElement } from '../../../../shared/modal/index.js';
+import './insert-section-input.element.js';
+import type { UmbInsertSectionCheckboxElement } from './insert-section-input.element.js';
+export declare const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL: UmbModalToken<object, InsertSectionModalModalResult>;
 export interface InsertSectionModalModalResult {
     value?: string;
 }

package/dist-cms/packages/templating/modals/insert-section-modal/insert-section-modal.element.js

@@ -8,8 +8,9 @@ import { UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS } from '../manifests.
 import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils.js';
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, queryAll, state } from '../../../../external/lit/index.js';
-import { UmbModalBaseElement } from '../../../../shared/modal/index.js';
 import { UmbModalToken } from '../../../core/modal/index.js';
+import { UmbModalBaseElement } from '../../../../shared/modal/index.js';
+import './insert-section-input.element.js';
 export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken(UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS, {
     type: 'sidebar',
     size: 'small',
@@ -22,7 +23,6 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
         this.snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet];
     }
     #chooseSection(event) {
-        event.stopPropagation();
         const target = event.target;
         const checkboxes = Array.from(this.checkboxes);
         if (checkboxes.every((checkbox) => checkbox.checked === false)) {
@@ -31,7 +31,7 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
         }
         if (target.checked) {
             this.selectedCheckbox = target;
-            this.snippet = this.snippetMethods[checkboxes.indexOf(target)](target?.inputValue, target?.isMandatory);
+            this.snippet = this.selectedCheckbox.snippet ?? '';
             checkboxes.forEach((checkbox) => {
                 if (checkbox !== target) {
                     checkbox.checked = false;
@@ -46,21 +46,31 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
         this.modalHandler?.reject();
     }
     #submit() {
+        const value = this.selectedCheckbox?.snippet;
         if (this.selectedCheckbox?.validate())
-            this.modalHandler?.submit({ value: this.snippet ?? '' });
+            this.modalHandler?.submit({ value: value ?? '' });
     }
     render() {
         return html `
 			<umb-body-layout headline="Insert">
 				<div id="main">
-					<uui-box @change=${this.#chooseSection}>
-						<umb-insert-section-checkbox label="Render child template" checked>
+					<uui-box>
+						<umb-insert-section-checkbox
+							@change=${this.#chooseSection}
+							label="Render child template"
+							checked
+							.snippetMethod=${getRenderBodySnippet}>
 							<p slot="description">
 								Renders the contents of a child template, by inserting a <code>@RenderBody()</code> placeholder.
 							</p>
 						</umb-insert-section-checkbox>
 
-						<umb-insert-section-checkbox label="Render a named section" show-mandatory show-input>
+						<umb-insert-section-checkbox
+							@change=${this.#chooseSection}
+							label="Render a named section"
+							show-mandatory
+							show-input
+							.snippetMethod=${getRenderSectionSnippet}>
 							<p slot="description">
 								Renders a named area of a child template, by inserting a <code>@RenderSection(name)</code> placeholder.
 								This renders an area of a child template which is wrapped in a corresponding
@@ -68,7 +78,11 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
 							</p>
 						</umb-insert-section-checkbox>
 
-						<umb-insert-section-checkbox label="Define a named section" show-input>
+						<umb-insert-section-checkbox
+							@change=${this.#chooseSection}
+							label="Define a named section"
+							show-input
+							.snippetMethod=${getAddSectionSnippet}>
 							<p slot="description">
 								Defines a part of your template as a named section by wrapping it in <code>@section { ... }</code>. This
 								can be rendered in a specific area of the parent of this template, by using <code>@RenderSection</code>.
@@ -89,6 +103,7 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
 			:host {
 				display: block;
 				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
 			}
 
 			#main {

package/dist-cms/packages/templating/modals/insert-value-sidebar.element.js

@@ -89,6 +89,7 @@ let UmbInsertValueSidebarElement = class UmbInsertValueSidebarElement extends Um
 			:host {
 				display: block;
 				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
 			}
 
 			#main {

package/dist-cms/packages/templating/modals/partial-view-picker-modal.element.js

@@ -54,6 +54,7 @@ let UmbPartialViewPickerModalElement = class UmbPartialViewPickerModalElement ex
 			:host {
 				display: block;
 				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
 			}
 
 			#main {

package/dist-cms/packages/templating/stylesheets/menu-item/manifests.js

@@ -4,7 +4,7 @@ const menuItem = {
     kind: 'tree',
     alias: 'Umb.MenuItem.Stylesheets',
     name: 'Stylesheets Menu Item',
-    weight: 400,
+    weight: 20,
     meta: {
         label: 'Stylesheets',
         icon: 'umb:folder',

package/dist-cms/packages/templating/templates/components/alias-input/alias-input.d.ts

@@ -0,0 +1,14 @@
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+export declare class UmbTemplateAliasInputElement extends UmbLitElement {
+    #private;
+    render(): import("lit-html").TemplateResult<1>;
+    value: string;
+    isOpen: boolean;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbTemplateAliasInputElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-template-alias-input': UmbTemplateAliasInputElement;
+    }
+}