@umbraco-cms/backoffice 14.0.0-1c3e1277 → 14.0.0-1ebba150

package/dist-cms/mocks/data/template.data.d.ts

@@ -1,36 +1,18 @@
 import { UmbEntityData } from './entity.data.js';
-import { EntityTreeItemResponseModel, PagedEntityTreeItemResponseModel, TemplateResponseModel, TemplateScaffoldResponseModel, CreateTemplateRequestModel, TemplateItemResponseModel } from '../../external/backend-api/index.js';
+import { EntityTreeItemResponseModel, PagedEntityTreeItemResponseModel, TemplateResponseModel, TemplateScaffoldResponseModel, CreateTemplateRequestModel, TemplateItemResponseModel, TemplateQuerySettingsResponseModel, TemplateQueryResultResponseModel } from '../../external/backend-api/index.js';
 type TemplateDBItem = TemplateResponseModel & EntityTreeItemResponseModel;
 export declare const data: Array<TemplateDBItem>;
 export declare const createTemplateScaffold: (masterTemplateAlias: string) => string;
-export declare const templateQuerySettings: {
-    contentTypeAliases: never[];
-    properties: {
-        alias: string;
-        type: string;
-    }[];
-    operators: {
-        operator: string;
-        applicableTypes: string[];
-    }[];
-};
+export declare const templateQueryResult: TemplateQueryResultResponseModel;
+export declare const templateQuerySettings: TemplateQuerySettingsResponseModel;
 declare class UmbTemplateData extends UmbEntityData<TemplateDBItem> {
     constructor();
     getById(id: string): TemplateResponseModel | undefined;
     getItemById(id: string): TemplateItemResponseModel | null;
     getScaffold(masterTemplateId?: string | null): TemplateScaffoldResponseModel;
     getItems(ids: string[]): TemplateItemResponseModel[];
-    getTemplateQuerySettings: () => {
-        contentTypeAliases: never[];
-        properties: {
-            alias: string;
-            type: string;
-        }[];
-        operators: {
-            operator: string;
-            applicableTypes: string[];
-        }[];
-    };
+    getTemplateQuerySettings: () => TemplateQuerySettingsResponseModel;
+    getTemplateQueryResult: () => TemplateQueryResultResponseModel;
     create(templateData: CreateTemplateRequestModel): {
         name?: string | undefined;
         alias?: string | undefined;

package/dist-cms/mocks/data/template.data.js

@@ -1,6 +1,7 @@
 import { UmbEntityData } from './entity.data.js';
 import { createEntityTreeItem } from './utils.js';
 import { UmbId } from '../../packages/core/id/index.js';
+import { TemplateQueryPropertyTypeModel, OperatorModel, } from '../../external/backend-api/index.js';
 const createTemplate = (dbItem) => {
     return {
         $type: '',
@@ -87,58 +88,79 @@ export const createTemplateScaffold = (masterTemplateAlias) => {
 	Layout = ${masterTemplateAlias};
 }`;
 };
+//prettier-ignore
+const templateQueryExpressions = [
+    `Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+    `Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544"))
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+    `Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => (x.Id != -6))
+.Where(x => x.IsVisible())
+.OrderBy(x => x.UpdateDate)`,
+];
+const randomIndex = () => Math.floor(Math.random() * 3);
+export const templateQueryResult = {
+    queryExpression: templateQueryExpressions[randomIndex()],
+    sampleResults: [],
+    resultCount: 0,
+    executionTime: 0,
+};
 export const templateQuerySettings = {
-    contentTypeAliases: [],
+    contentTypeAliases: ['docTypeWithTemplate', 'propertyTypeWithTemplate', 'somethingElse'],
     properties: [
         {
             alias: 'Id',
-            type: 'Integer',
+            type: TemplateQueryPropertyTypeModel.INTEGER,
         },
         {
             alias: 'Name',
-            type: 'String',
+            type: TemplateQueryPropertyTypeModel.STRING,
         },
         {
             alias: 'CreateDate',
-            type: 'DateTime',
+            type: TemplateQueryPropertyTypeModel.DATE_TIME,
         },
         {
             alias: 'UpdateDate',
-            type: 'DateTime',
+            type: TemplateQueryPropertyTypeModel.DATE_TIME,
         },
     ],
     operators: [
         {
-            operator: 'Equals',
-            applicableTypes: ['Integer', 'String'],
+            operator: OperatorModel.EQUALS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'NotEquals',
-            applicableTypes: ['Integer', 'String'],
+            operator: OperatorModel.NOT_EQUALS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'LessThan',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.LESS_THAN,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'LessThanEqualTo',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN_EQUAL_TO,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'GreaterThan',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'GreaterThanEqualTo',
-            applicableTypes: ['Integer', 'DateTime'],
+            operator: OperatorModel.GREATER_THAN_EQUAL_TO,
+            applicableTypes: [TemplateQueryPropertyTypeModel.INTEGER, TemplateQueryPropertyTypeModel.DATE_TIME],
         },
         {
-            operator: 'Contains',
-            applicableTypes: ['String'],
+            operator: OperatorModel.CONTAINS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.STRING],
         },
         {
-            operator: 'NotContains',
-            applicableTypes: ['String'],
+            operator: OperatorModel.NOT_CONTAINS,
+            applicableTypes: [TemplateQueryPropertyTypeModel.STRING],
         },
     ],
 };
@@ -147,6 +169,7 @@ class UmbTemplateData extends UmbEntityData {
     constructor() {
         super(data);
         this.getTemplateQuerySettings = () => templateQuerySettings;
+        this.getTemplateQueryResult = () => templateQueryResult;
     }
     getById(id) {
         const item = this.data.find((item) => item.id === id);

package/dist-cms/mocks/handlers/template.handlers.js

@@ -39,6 +39,10 @@ export const handlers = [
         const response = umbTemplateData.getTemplateQuerySettings();
         return res(ctx.status(200), ctx.json(response));
     }),
+    rest.post(umbracoPath('/template/query/execute'), (req, res, ctx) => {
+        const response = umbTemplateData.getTemplateQueryResult();
+        return res(ctx.status(200), ctx.json(response));
+    }),
     rest.get(umbracoPath('/template/:id'), (req, res, ctx) => {
         const id = req.params.id;
         if (!id)

package/dist-cms/packages/core/components/button-with-dropdown/button-with-dropdown.element.d.ts

@@ -10,6 +10,8 @@ export declare class UmbButtonWithDropdownElement extends LitElement {
     compact: boolean;
     symbolExpand: UUISymbolExpandElement;
     popover: UUIPopoverElement;
+    openPopover(): void;
+    closePopover(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/components/button-with-dropdown/button-with-dropdown.element.js

@@ -18,22 +18,22 @@ export let UmbButtonWithDropdownElement = class UmbButtonWithDropdownElement ext
         this.placement = 'bottom-start';
         this.compact = false;
     }
-    #openPopover() {
+    openPopover() {
         this.open = true;
         this.popover.open = true;
         this.symbolExpand.open = true;
     }
-    #closePopover() {
+    closePopover() {
         this.open = false;
         this.popover.open = false;
         this.symbolExpand.open = false;
     }
     #togglePopover() {
-        this.open ? this.#closePopover() : this.#openPopover();
+        this.open ? this.closePopover() : this.openPopover();
     }
     render() {
         return html `
-			<uui-popover placement=${this.placement} id="popover" @close=${this.#closePopover}>
+			<uui-popover placement=${this.placement} id="popover" @close=${this.closePopover}>
 				<uui-button
 					slot="trigger"
 					.look=${this.look}

package/dist-cms/packages/core/components/code-block/code-block.element.d.ts

@@ -1,10 +1,15 @@
 import { LitElement } from '../../../../external/lit/index.js';
 /**
- *  A simple styled box for showing code-based error messages.
+ *  A simple styled box for showing code-based error messages or blocks od code.
  *  @slot the full message
  *
  */
 export declare class UmbCodeBlockElement extends LitElement {
+    language: string;
+    copy: boolean;
+    nodes: NodeListOf<ChildNode>;
+    copyState: 'idle' | 'success';
+    copyCode(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag").CSSResult[];
 }

package/dist-cms/packages/core/components/code-block/code-block.element.js

@@ -5,54 +5,128 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UUITextStyles } from '../../../../external/uui/index.js';
-import { css, html, LitElement, customElement } from '../../../../external/lit/index.js';
+import { css, html, LitElement, customElement, property, queryAssignedNodes, state, } from '../../../../external/lit/index.js';
+//TODO consider adding a highlight prop to the code block, that could spin up/access monaco instance and highlight the code
 /**
- *  A simple styled box for showing code-based error messages.
+ *  A simple styled box for showing code-based error messages or blocks od code.
  *  @slot the full message
  *
  */
 export let UmbCodeBlockElement = class UmbCodeBlockElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.language = '';
+        this.copy = false;
+        this.copyState = 'idle';
+    }
+    async copyCode() {
+        const text = this.textContent;
+        if (text) {
+            await navigator.clipboard.writeText(text);
+            this.copyState = 'success';
+            setTimeout(() => {
+                this.copyState = 'idle';
+            }, 2000);
+        }
+    }
     render() {
-        return html `<div id="container">
-			<uui-scroll-container>
-				<pre>
+        return html `
+			${this.language
+            ? html `<div id="header">
+						<span id="lang">${this.language}</span> ${this.copy
+                ? html `<button @click=${this.copyCode}>
+									${this.copyState === 'idle'
+                    ? html `<uui-icon name="copy"></uui-icon>Copy`
+                    : html `<uui-icon name="check"></uui-icon>Copied!`}
+							  </button>`
+                : ''}
+				  </div>`
+            : ''}
+			<pre style="${this.language ? 'border-top: 1px solid var(--uui-color-divider-emphasis);' : ''}">
+				<uui-scroll-container>
 					<code>
 						<slot></slot>
 					</code>
+					</uui-scroll-container>
 				</pre>
-			</uui-scroll-container>
-		</div> `;
+		`;
     }
     static { this.styles = [
         UUITextStyles,
         css `
 			:host {
 				display: block;
-				font-family: monospace;
-			}
-
-			#container {
 				border: 1px solid var(--uui-color-divider-emphasis);
-				color: var(--uui-color-text-alt);
-				background-color: var(--uui-color-divider-standalone);
-				padding: var(--uui-size-space-2);
 				border-radius: var(--uui-border-radius);
-				line-height: var(--uui-size-10);
 			}
-			:host uui-scroll-container {
+
+			uui-scroll-container {
 				max-height: 500px;
 				overflow-y: auto;
 				overflow-wrap: anywhere;
 			}
+
 			pre {
-				max-width: 100%;
+				font-family: monospace;
+				background-color: var(--uui-color-surface-alt);
+				color: #303033;
+				display: block;
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+				margin: 0;
+				overflow-x: auto;
+				padding: 9.5px;
+			}
+
+			pre,
+			code {
+				word-wrap: normal;
 				white-space: pre-line;
-				word-break: break-word;
-				overflow-wrap: break-word;
+			}
+
+			#header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background-color: var(--uui-color-surface-alt);
+			}
+
+			#lang {
+				margin-left: 16px;
+				font-weight: bold;
+				text-transform: uppercase;
+			}
+
+			button {
+				font-family: inherit;
+				padding: 6px 16px;
+				background-color: transparent;
+				border: none;
+				border-left: 1px solid var(--uui-color-divider-emphasis);
+				border-radius: 0;
+				color: #000;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			button:hover {
+				background-color: var(--uui-color-surface-emphasis);
 			}
 		`,
     ]; }
 };
+__decorate([
+    property()
+], UmbCodeBlockElement.prototype, "language", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbCodeBlockElement.prototype, "copy", void 0);
+__decorate([
+    queryAssignedNodes()
+], UmbCodeBlockElement.prototype, "nodes", void 0);
+__decorate([
+    state()
+], UmbCodeBlockElement.prototype, "copyState", void 0);
 UmbCodeBlockElement = __decorate([
     customElement('umb-code-block')
 ], UmbCodeBlockElement);

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

@@ -2,6 +2,7 @@ export * from './backoffice-modal-container/backoffice-modal-container.element.j
 export * from './backoffice-notification-container/backoffice-notification-container.element.js';
 export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js';
+export * from './code-block/index.js';
 export * from './data-type/index.js';
 export * from './input-date/index.js';
 export * from './dropdown/index.js';

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

@@ -4,7 +4,7 @@ export * from './backoffice-modal-container/backoffice-modal-container.element.j
 export * from './backoffice-notification-container/backoffice-notification-container.element.js';
 export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown
-// export * from './code-block.js';
+export * from './code-block/index.js';
 export * from './data-type/index.js';
 export * from './input-date/index.js';
 export * from './dropdown/index.js';

package/dist-cms/packages/core/modal/token/dictionary-item-picker-modal.token.d.ts

@@ -2,5 +2,4 @@ import type { EntityTreeItemResponseModel } from '../../../../external/backend-a
 import { UmbModalToken, UmbPickerModalResult, UmbTreePickerModalData } from '../index.js';
 export type UmbDictionaryItemPickerModalData = UmbTreePickerModalData<EntityTreeItemResponseModel>;
 export type UmbDictionaryItemPickerModalResult = UmbPickerModalResult;
-export declare const UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS = "Umb.Modal.DictionaryItemPicker";
 export declare const UMB_DICTIONARY_ITEM_PICKER_MODAL: UmbModalToken<UmbDictionaryItemPickerModalData, UmbPickerModalResult>;

package/dist-cms/packages/core/modal/token/dictionary-item-picker-modal.token.js

@@ -1,6 +1,5 @@
 import { UmbModalToken } from '../index.js';
-export const UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS = 'Umb.Modal.DictionaryItemPicker';
-export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken(UMB_DICTIONARY_ITEM_PICKER_MODAL_ALIAS, {
+export const UMB_DICTIONARY_ITEM_PICKER_MODAL = new UmbModalToken('Umb.Modal.TreePicker', {
     type: 'sidebar',
     size: 'small',
 }, {

package/dist-cms/packages/core/tree/tree.context.js

@@ -1,4 +1,3 @@
-import { map } from '../../../external/rxjs/index.js';
 import { umbExtensionsRegistry } from '../extension-registry/index.js';
 import { UmbBooleanState } from '../../../libs/observable-api/index.js';
 import { UmbBaseController } from '../../../libs/controller-api/index.js';
@@ -36,9 +35,7 @@ export class UmbTreeContextBase extends UmbBaseController {
         if (this.#treeAlias === treeAlias)
             return;
         this.#treeAlias = treeAlias;
-        if (treeAlias) {
-            this.#observeTreeManifest();
-        }
+        this.#observeTreeManifest();
     }
     getTreeAlias() {
         return this.#treeAlias;
@@ -94,13 +91,13 @@ export class UmbTreeContextBase extends UmbBaseController {
         return this.repository.treeItemsOf(parentUnique);
     }
     #observeTreeManifest() {
-        this.observe(umbExtensionsRegistry
-            .extensionsOfType('tree')
-            .pipe(map((treeManifests) => treeManifests.find((treeManifest) => treeManifest.alias === this.#treeAlias))), async (treeManifest) => {
-            if (!treeManifest)
-                return;
-            this.#observeRepository(treeManifest);
-        }, '_observeTreeManifest');
+        if (this.#treeAlias) {
+            this.observe(umbExtensionsRegistry.getByTypeAndAlias('tree', this.#treeAlias), async (treeManifest) => {
+                if (!treeManifest)
+                    return;
+                this.#observeRepository(treeManifest);
+            }, '_observeTreeManifest');
+        }
     }
     #observeRepository(treeManifest) {
         const repositoryAlias = treeManifest.meta.repositoryAlias;

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS } from '../../modals/manifests.js';
 import { UmbDictionaryRepository } from '../../../translation/dictionary/repository/dictionary.repository.js';
 import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils.js';
-import { CodeSnippetType, UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL, } from '../../modals/insert-choose-type-sidebar.element.js';
+import { CodeSnippetType } from '../../modals/insert-choose-type-sidebar.element.js';
 import { customElement, property, css, html } from '../../../../external/lit/index.js';
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { UMB_DICTIONARY_ITEM_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_PARTIAL_VIEW_PICKER_MODAL, UmbModalToken, } from '../../../core/modal/index.js';
@@ -30,10 +30,6 @@ export let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement
             const { data } = await this.#dictionaryRepository.requestById(id);
             this.value = getInsertDictionarySnippet(data?.name ?? '');
         };
-        this.#getUmbracoFieldValueSnippet = async (value) => {
-            this.value = value;
-            this.#dispatchInsertEvent();
-        };
         this.#getPartialViewSnippet = async (modalResult) => {
             this.value = getInsertPartialSnippet(modalResult.selection?.[0] ?? '');
         };
@@ -53,10 +49,6 @@ export let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement
     async determineInsertValue(modalResult) {
         const { type, value } = modalResult;
         switch (type) {
-            case CodeSnippetType.umbracoField: {
-                this.#getUmbracoFieldValueSnippet(value);
-                break;
-            }
             case CodeSnippetType.partialView: {
                 this.#getPartialViewSnippet(value);
                 break;
@@ -72,16 +64,8 @@ export let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement
         }
     }
     #getDictionaryItemSnippet;
-    #getUmbracoFieldValueSnippet;
     #getPartialViewSnippet;
     #openChooseTypeModal;
-    #openInsertValueSidebar() {
-        this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL);
-        this.#openModal?.onSubmit().then((value) => {
-            this.value = value;
-            this.#dispatchInsertEvent();
-        });
-    }
     #openInsertPartialViewSidebar() {
         this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
         this.#openModal?.onSubmit().then((value) => {
@@ -106,7 +90,7 @@ export let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement
     render() {
         return html `
 			<uui-button-group>
-				<uui-button look="secondary" @click=${this.#openChooseTypeModal}>
+				<uui-button look="secondary" @click=${this.#openChooseTypeModal} label="Choose value to insert">
 					<uui-icon name="umb:add"></uui-icon>Insert</uui-button
 				>
 				<umb-button-with-dropdown
@@ -116,18 +100,6 @@ export let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement
 					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"
-								>
-							</uui-menu-item>
-						</li> -->
-
 						<li>
 							<uui-menu-item
 								class="insert-menu-item"
@@ -200,7 +172,7 @@ __decorate([
     property()
 ], UmbTemplatingInsertMenuElement.prototype, "value", void 0);
 __decorate([
-    property()
+    property({ type: Boolean })
 ], UmbTemplatingInsertMenuElement.prototype, "hidePartialView", void 0);
 UmbTemplatingInsertMenuElement = __decorate([
     customElement('umb-templating-insert-menu')

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

@@ -1,12 +1,10 @@
 import { UmbModalBaseElement } from '../../../shared/modal/index.js';
-import { UmbModalToken, UmbDictionaryItemPickerModalResult } from '../../core/modal/index.js';
-export declare const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL: UmbModalToken<object, unknown>;
+import { UmbDictionaryItemPickerModalResult } from '../../core/modal/index.js';
 export interface ChooseInsertTypeModalData {
     hidePartialViews?: boolean;
 }
 export declare enum CodeSnippetType {
     partialView = "partialView",
-    umbracoField = "umbracoField",
     dictionaryItem = "dictionaryItem",
     macro = "macro"
 }
@@ -20,7 +18,7 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
     private _modalContext?;
     constructor();
     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[];
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,19 +4,13 @@ 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_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS } from './manifests.js';
 import { UUITextStyles } from '../../../external/uui/index.js';
 import { css, html, customElement } from '../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../../shared/modal/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalToken, UMB_PARTIAL_VIEW_PICKER_MODAL, UMB_DICTIONARY_ITEM_PICKER_MODAL, } from '../../core/modal/index.js';
-export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL = new UmbModalToken(UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS, {
-    type: 'sidebar',
-    size: 'small',
-});
+import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_PARTIAL_VIEW_PICKER_MODAL, UMB_DICTIONARY_ITEM_PICKER_MODAL, } from '../../core/modal/index.js';
 export var CodeSnippetType;
 (function (CodeSnippetType) {
     CodeSnippetType["partialView"] = "partialView";
-    CodeSnippetType["umbracoField"] = "umbracoField";
     CodeSnippetType["dictionaryItem"] = "dictionaryItem";
     CodeSnippetType["macro"] = "macro";
 })(CodeSnippetType || (CodeSnippetType = {}));
@@ -31,13 +25,6 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
         });
     }
     #openModal;
-    #openInsertValueSidebar() {
-        this.#openModal = this._modalContext?.open(UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_MODAL);
-        this.#openModal?.onSubmit().then((chosenValue) => {
-            if (chosenValue)
-                this.modalContext?.submit({ value: chosenValue, type: CodeSnippetType.umbracoField });
-        });
-    }
     #openInsertPartialViewSidebar() {
         this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
         this.#openModal?.onSubmit().then((partialViewPickerModalResult) => {
@@ -57,16 +44,6 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
                 this.modalContext?.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
@@ -94,7 +71,7 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
 					</uui-box>
 				</div>
 				<div slot="actions">
-					<uui-button @click=${this._close} look="secondary">Close</uui-button>
+					<uui-button @click=${this._close} look="secondary" label="Close">Close</uui-button>
 				</div>
 			</umb-body-layout>
 		`;
@@ -110,8 +87,9 @@ let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement exte
 
 			#main {
 				box-sizing: border-box;
-				padding: var(--uui-size-space-5);
-				height: calc(100vh - 124px);
+				height: calc(
+					100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
+				);
 			}
 
 			#main uui-button:not(:last-of-type) {

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

@@ -52,6 +52,7 @@ export let UmbInsertSectionCheckboxElement = class UmbInsertSectionCheckboxEleme
 								<uui-input
 									required
 									placeholder="Enter section name"
+									label="Section name"
 									id="section-name-input"></uui-input> </uui-form-layout-item
 							>${this.showMandatory
                 ? html `<p slot="if-checked">

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

@@ -91,8 +91,8 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
 					</uui-box>
 				</div>
 				<div slot="actions">
-					<uui-button @click=${this.#close} look="secondary">Close</uui-button>
-					<uui-button @click=${this.#submit} look="primary" color="positive">Submit</uui-button>
+					<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
+					<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
 				</div>
 			</umb-body-layout>
 		`;
@@ -108,8 +108,9 @@ let UmbTemplatingInsertSectionModalElement = class UmbTemplatingInsertSectionMod
 
 			#main {
 				box-sizing: border-box;
-				padding: var(--uui-size-space-5);
-				height: calc(100vh - 124px);
+				height: calc(
+					100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
+				);
 			}
 
 			#main umb-insert-section-checkbox:not(:last-of-type) {