@umbraco-cms/backoffice 14.0.0--preview007-2ee36857 → 14.0.0--preview007-63654dfd

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

@@ -9,14 +9,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _UmbTemplatingInsertMenuElement_instances, _UmbTemplatingInsertMenuElement_openModal, _UmbTemplatingInsertMenuElement_dictionaryDetailRepository, _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet, _UmbTemplatingInsertMenuElement_getPartialViewSnippet, _UmbTemplatingInsertMenuElement_openChooseTypeModal, _UmbTemplatingInsertMenuElement_openInsertPageFieldSidebar, _UmbTemplatingInsertMenuElement_openInsertPartialViewSidebar, _UmbTemplatingInsertMenuElement_openInsertDictionaryItemModal, _UmbTemplatingInsertMenuElement_dispatchInsertEvent;
-import { UMB_PARTIAL_VIEW_PICKER_MODAL, } from '../../modals/partial-view-picker/partial-view-picker-modal.token.js';
+var _UmbTemplatingInsertMenuElement_instances, _UmbTemplatingInsertMenuElement_dictionaryDetailRepository, _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet, _UmbTemplatingInsertMenuElement_openTemplatingItemPickerModal, _UmbTemplatingInsertMenuElement_openPartialViewPickerModal, _UmbTemplatingInsertMenuElement_openDictionaryItemPickerModal, _UmbTemplatingInsertMenuElement_openPageFieldBuilderModal, _UmbTemplatingInsertMenuElement_dispatchInsertEvent;
+import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../../modals/partial-view-picker/partial-view-picker-modal.token.js';
+import { UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL } from '../../modals/templating-page-field-builder/templating-page-field-builder-modal.token.js';
 import { CodeSnippetType } from '../../types.js';
 import { UMB_TEMPLATING_ITEM_PICKER_MODAL, } from '../../modals/templating-item-picker/templating-item-picker-modal.token.js';
 import { getInsertDictionarySnippet, getInsertPartialSnippet } from '../../utils/index.js';
@@ -30,29 +25,7 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
         super();
         _UmbTemplatingInsertMenuElement_instances.add(this);
         this.value = '';
-        _UmbTemplatingInsertMenuElement_openModal.set(this, void 0);
         _UmbTemplatingInsertMenuElement_dictionaryDetailRepository.set(this, new UmbDictionaryDetailRepository(this));
-        _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet.set(this, async (modalValue) => {
-            const unique = modalValue.selection[0];
-            if (unique === null)
-                return;
-            const { data } = await __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_dictionaryDetailRepository, "f").requestByUnique(unique);
-            this.value = getInsertDictionarySnippet(data?.name ?? '');
-        });
-        _UmbTemplatingInsertMenuElement_getPartialViewSnippet.set(this, async (modalValue) => {
-            this.value = getInsertPartialSnippet(modalValue.selection?.[0] ?? '');
-        });
-        _UmbTemplatingInsertMenuElement_openChooseTypeModal.set(this, () => {
-            __classPrivateFieldSet(this, _UmbTemplatingInsertMenuElement_openModal, this._modalContext?.open(UMB_TEMPLATING_ITEM_PICKER_MODAL, {
-                data: {
-                    hidePartialViews: this.hidePartialView,
-                },
-            }), "f");
-            __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_openModal, "f")?.onSubmit().then((closedModal) => {
-                this.determineInsertValue(closedModal);
-            });
-        });
-        this.hidePartialView = false;
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
             this._modalContext = instance;
         });
@@ -61,11 +34,17 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
         const { type, value } = modalValue;
         switch (type) {
             case CodeSnippetType.partialView: {
-                __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_getPartialViewSnippet, "f").call(this, value);
+                this.value = getInsertPartialSnippet(value);
+                __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
                 break;
             }
             case CodeSnippetType.dictionaryItem: {
-                await __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet, "f").call(this, value);
+                await __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet).call(this, value);
+                __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
+                break;
+            }
+            case CodeSnippetType.pageField: {
+                this.value = value;
                 __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
                 break;
             }
@@ -74,7 +53,10 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
     render() {
         return html `
 			<uui-button-group>
-				<uui-button look="secondary" @click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_openChooseTypeModal, "f")} label=${this.localize.term('template_insert')}>
+				<uui-button
+					look="secondary"
+					@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openTemplatingItemPickerModal)}
+					label=${this.localize.term('template_insert')}>
 					<uui-icon name="icon-add"></uui-icon>${this.localize.term('template_insert')}
 				</uui-button>
 				<umb-dropdown
@@ -87,53 +69,65 @@ let UmbTemplatingInsertMenuElement = class UmbTemplatingInsertMenuElement extend
 						class="insert-menu-item"
 						label=${this.localize.term('template_insertPageField')}
 						title=${this.localize.term('template_insertPageField')}
-						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openInsertPageFieldSidebar)}></uui-menu-item>
+						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openPageFieldBuilderModal)}></uui-menu-item>
 					<uui-menu-item
 						class="insert-menu-item"
 						label=${this.localize.term('template_insertPartialView')}
 						title=${this.localize.term('template_insertPartialView')}
-						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openInsertPartialViewSidebar)}>
+						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openPartialViewPickerModal)}>
 					</uui-menu-item>
 					<uui-menu-item
 						class="insert-menu-item"
 						label=${this.localize.term('template_insertDictionaryItem')}
 						title=${this.localize.term('template_insertDictionaryItem')}
-						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openInsertDictionaryItemModal)}>
+						@click=${__classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_openDictionaryItemPickerModal)}>
 					</uui-menu-item>
 				</umb-dropdown>
 			</uui-button-group>
 		`;
     }
 };
-_UmbTemplatingInsertMenuElement_openModal = new WeakMap();
 _UmbTemplatingInsertMenuElement_dictionaryDetailRepository = new WeakMap();
-_UmbTemplatingInsertMenuElement_getDictionaryItemSnippet = new WeakMap();
-_UmbTemplatingInsertMenuElement_getPartialViewSnippet = new WeakMap();
-_UmbTemplatingInsertMenuElement_openChooseTypeModal = new WeakMap();
 _UmbTemplatingInsertMenuElement_instances = new WeakSet();
-_UmbTemplatingInsertMenuElement_openInsertPageFieldSidebar = function _UmbTemplatingInsertMenuElement_openInsertPageFieldSidebar() {
-    //this.#openModel = this._modalContext?.open();
+_UmbTemplatingInsertMenuElement_getDictionaryItemSnippet = async function _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet(unique) {
+    if (unique === null)
+        return;
+    const { data } = await __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_dictionaryDetailRepository, "f").requestByUnique(unique);
+    this.value = getInsertDictionarySnippet(data?.name ?? '');
 };
-_UmbTemplatingInsertMenuElement_openInsertPartialViewSidebar = function _UmbTemplatingInsertMenuElement_openInsertPartialViewSidebar() {
-    __classPrivateFieldSet(this, _UmbTemplatingInsertMenuElement_openModal, this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL), "f");
-    __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_openModal, "f")?.onSubmit().then((value) => {
-        __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_getPartialViewSnippet, "f").call(this, value).then(() => {
-            __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
-        });
-    });
+_UmbTemplatingInsertMenuElement_openTemplatingItemPickerModal = async function _UmbTemplatingInsertMenuElement_openTemplatingItemPickerModal() {
+    const itemPickerContext = this._modalContext?.open(UMB_TEMPLATING_ITEM_PICKER_MODAL);
+    await itemPickerContext?.onSubmit();
+    const value = itemPickerContext?.getValue();
+    if (!value)
+        return;
+    this.determineInsertValue(value);
 };
-_UmbTemplatingInsertMenuElement_openInsertDictionaryItemModal = function _UmbTemplatingInsertMenuElement_openInsertDictionaryItemModal() {
-    __classPrivateFieldSet(this, _UmbTemplatingInsertMenuElement_openModal, this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
-        data: {
-            pickableFilter: (item) => item.unique !== null,
-            hideTreeRoot: true,
-        },
-    }), "f");
-    __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_openModal, "f")?.onSubmit().then((value) => {
-        __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_getDictionaryItemSnippet, "f").call(this, value).then(() => {
-            __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
-        });
-    });
+_UmbTemplatingInsertMenuElement_openPartialViewPickerModal = async function _UmbTemplatingInsertMenuElement_openPartialViewPickerModal() {
+    const partialViewPickerContext = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
+    await partialViewPickerContext?.onSubmit();
+    const path = partialViewPickerContext?.getValue().selection[0];
+    if (!path)
+        return;
+    this.determineInsertValue({ type: CodeSnippetType.partialView, value: path });
+};
+_UmbTemplatingInsertMenuElement_openDictionaryItemPickerModal = async function _UmbTemplatingInsertMenuElement_openDictionaryItemPickerModal() {
+    const dictionaryItemPickerContext = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL);
+    await dictionaryItemPickerContext?.onSubmit();
+    const item = dictionaryItemPickerContext?.getValue().selection[0];
+    if (!item)
+        return;
+    this.determineInsertValue({ type: CodeSnippetType.dictionaryItem, value: item });
+};
+_UmbTemplatingInsertMenuElement_openPageFieldBuilderModal = async function _UmbTemplatingInsertMenuElement_openPageFieldBuilderModal() {
+    const pageFieldBuilderContext = this._modalContext?.open(UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL);
+    await pageFieldBuilderContext?.onSubmit();
+    const output = pageFieldBuilderContext?.getValue().output;
+    if (!output)
+        return;
+    // The output is already built due to the preview in the modal. Can insert it directly now.
+    this.value = output;
+    __classPrivateFieldGet(this, _UmbTemplatingInsertMenuElement_instances, "m", _UmbTemplatingInsertMenuElement_dispatchInsertEvent).call(this);
 };
 _UmbTemplatingInsertMenuElement_dispatchInsertEvent = function _UmbTemplatingInsertMenuElement_dispatchInsertEvent() {
     this.dispatchEvent(new CustomEvent('insert', { bubbles: false, cancelable: true, composed: false }));
@@ -157,9 +151,6 @@ UmbTemplatingInsertMenuElement.styles = [
 __decorate([
     property()
 ], UmbTemplatingInsertMenuElement.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], UmbTemplatingInsertMenuElement.prototype, "hidePartialView", void 0);
 UmbTemplatingInsertMenuElement = __decorate([
     customElement('umb-templating-insert-menu')
 ], UmbTemplatingInsertMenuElement);

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

@@ -1,3 +1,4 @@
 export * from './templating-section-picker/index.js';
 export * from './templating-item-picker/index.js';
 export * from './partial-view-picker/index.js';
+export * from './templating-page-field-builder/index.js';

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

@@ -1,3 +1,4 @@
 export * from './templating-section-picker/index.js';
 export * from './templating-item-picker/index.js';
 export * from './partial-view-picker/index.js';
+export * from './templating-page-field-builder/index.js';

package/dist-cms/packages/templating/modals/manifests.js

@@ -11,5 +11,11 @@ const modals = [
         name: 'Templating Section Picker Modal',
         js: () => import('./templating-section-picker/templating-section-picker-modal.element.js'),
     },
+    {
+        type: 'modal',
+        alias: 'Umb.Modal.TemplatingPageFieldBuilder',
+        name: 'Templating Page Field Builder Modal',
+        js: () => import('./templating-page-field-builder/templating-page-field-builder-modal.element.js'),
+    },
 ];
 export const manifests = [...modals];

package/dist-cms/packages/templating/modals/templating-item-picker/templating-item-picker-modal.element.d.ts

@@ -3,7 +3,7 @@ import { UmbModalBaseElement } from '../../../core/modal/index.js';
 export declare class UmbTemplatingItemPickerModalElement extends UmbModalBaseElement<UmbTemplatingItemPickerModalData, UmbTemplatingItemPickerModalValue> {
     #private;
     private _close;
-    private _modalContext?;
+    private _itemModalContext?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];

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

@@ -4,20 +4,15 @@ 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;
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbTemplatingItemPickerModalElement_instances, _UmbTemplatingItemPickerModalElement_openModal, _UmbTemplatingItemPickerModalElement_openInsertPartialViewSidebar, _UmbTemplatingItemPickerModalElement_openInsertDictionaryItemModal, _UmbTemplatingItemPickerModalElement_renderItems;
+var _UmbTemplatingItemPickerModalElement_instances, _UmbTemplatingItemPickerModalElement_openTemplatingPageFieldModal, _UmbTemplatingItemPickerModalElement_openPartialViewPickerModal, _UmbTemplatingItemPickerModalElement_openDictionaryItemPickerModal, _UmbTemplatingItemPickerModalElement_renderItems;
 import { CodeSnippetType } from '../../types.js';
 import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../partial-view-picker/partial-view-picker-modal.token.js';
+import { UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL } from '../templating-page-field-builder/templating-page-field-builder-modal.token.js';
 import { UmbTextStyles } from '../../../../shared/style/index.js';
 import { css, html, customElement } from '../../../../external/lit/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT, UMB_DICTIONARY_ITEM_PICKER_MODAL, UmbModalBaseElement, } from '../../../core/modal/index.js';
@@ -28,9 +23,8 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
     constructor() {
         super();
         _UmbTemplatingItemPickerModalElement_instances.add(this);
-        _UmbTemplatingItemPickerModalElement_openModal.set(this, void 0);
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
-            this._modalContext = instance;
+            this._itemModalContext = instance;
         });
     }
     render() {
@@ -46,41 +40,50 @@ let UmbTemplatingItemPickerModalElement = class UmbTemplatingItemPickerModalElem
 		`;
     }
 };
-_UmbTemplatingItemPickerModalElement_openModal = new WeakMap();
 _UmbTemplatingItemPickerModalElement_instances = new WeakSet();
-_UmbTemplatingItemPickerModalElement_openInsertPartialViewSidebar = function _UmbTemplatingItemPickerModalElement_openInsertPartialViewSidebar() {
-    __classPrivateFieldSet(this, _UmbTemplatingItemPickerModalElement_openModal, this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL), "f");
-    __classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_openModal, "f")?.onSubmit().then((partialViewPickerModalValue) => {
-        if (partialViewPickerModalValue) {
-            this.value = {
-                type: CodeSnippetType.partialView,
-                value: partialViewPickerModalValue.selection[0],
-            };
-            this.modalContext?.submit();
-        }
-    });
+_UmbTemplatingItemPickerModalElement_openTemplatingPageFieldModal = async function _UmbTemplatingItemPickerModalElement_openTemplatingPageFieldModal() {
+    const pageFieldBuilderContext = this._itemModalContext?.open(UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL);
+    await pageFieldBuilderContext?.onSubmit();
+    const output = pageFieldBuilderContext?.getValue().output;
+    if (output) {
+        this.value = { value: output, type: CodeSnippetType.pageField };
+        this.modalContext?.submit();
+    }
 };
-_UmbTemplatingItemPickerModalElement_openInsertDictionaryItemModal = function _UmbTemplatingItemPickerModalElement_openInsertDictionaryItemModal() {
-    __classPrivateFieldSet(this, _UmbTemplatingItemPickerModalElement_openModal, this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
+_UmbTemplatingItemPickerModalElement_openPartialViewPickerModal = async function _UmbTemplatingItemPickerModalElement_openPartialViewPickerModal() {
+    const partialViewPickerContext = this._itemModalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
+    await partialViewPickerContext?.onSubmit();
+    const path = partialViewPickerContext?.getValue().selection[0];
+    if (path) {
+        const regex = /^%2F|%25dot%25cshtml$/g;
+        const prettyPath = path.replace(regex, '').replace(/%2F/g, '/');
+        this.value = {
+            value: prettyPath,
+            type: CodeSnippetType.partialView,
+        };
+        this.modalContext?.submit();
+    }
+};
+_UmbTemplatingItemPickerModalElement_openDictionaryItemPickerModal = async function _UmbTemplatingItemPickerModalElement_openDictionaryItemPickerModal() {
+    const dictionaryItemPickerModal = this._itemModalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
         data: {
-            hideTreeRoot: true,
             pickableFilter: (item) => item.unique !== null,
         },
-    }), "f");
-    __classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_openModal, "f")?.onSubmit().then((dictionaryItemPickerModalValue) => {
-        if (dictionaryItemPickerModalValue) {
-            this.value = { value: dictionaryItemPickerModalValue, type: CodeSnippetType.dictionaryItem };
-            this.modalContext?.submit();
-        }
     });
+    await dictionaryItemPickerModal?.onSubmit();
+    const dictionaryItem = dictionaryItemPickerModal?.getValue().selection[0];
+    if (dictionaryItem) {
+        this.value = { value: dictionaryItem, type: CodeSnippetType.dictionaryItem };
+        this.modalContext?.submit();
+    }
 };
 _UmbTemplatingItemPickerModalElement_renderItems = function _UmbTemplatingItemPickerModalElement_renderItems() {
     return html `<div id="main">
 			<uui-button
-				@click=${() => console.log('to be continued')}
+				@click=${__classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_instances, "m", _UmbTemplatingItemPickerModalElement_openTemplatingPageFieldModal)}
 				look="placeholder"
 				label=${this.localize.term('template_insert')}>
-				<h3><umb-localize key="template_insertPageField">Value</umb-localize> (Not implemented)</h3>
+				<h3><umb-localize key="template_insertPageField">Value</umb-localize></h3>
 				<p>
 					<umb-localize key="template_insertPageFieldDesc">
 						Displays the value of a named field from the current page, with options to modify the value or fallback to
@@ -89,7 +92,7 @@ _UmbTemplatingItemPickerModalElement_renderItems = function _UmbTemplatingItemPi
 				</p>
 			</uui-button>
 			<uui-button
-				@click=${__classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_instances, "m", _UmbTemplatingItemPickerModalElement_openInsertPartialViewSidebar)}
+				@click=${__classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_instances, "m", _UmbTemplatingItemPickerModalElement_openPartialViewPickerModal)}
 				look="placeholder"
 				label=${this.localize.term('template_insert')}>
 				<h3><umb-localize key="template_insertPartialView">Partial view</umb-localize></h3>
@@ -101,7 +104,7 @@ _UmbTemplatingItemPickerModalElement_renderItems = function _UmbTemplatingItemPi
 				</p>
 			</uui-button>
 			<uui-button
-				@click=${__classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_instances, "m", _UmbTemplatingItemPickerModalElement_openInsertDictionaryItemModal)}
+				@click=${__classPrivateFieldGet(this, _UmbTemplatingItemPickerModalElement_instances, "m", _UmbTemplatingItemPickerModalElement_openDictionaryItemPickerModal)}
 				look="placeholder"
 				label=${this.localize.term('template_insertDictionaryItem')}>
 				<h3><umb-localize key="template_insertDictionaryItem">Dictionary Item</umb-localize></h3>

package/dist-cms/packages/templating/modals/templating-item-picker/templating-item-picker-modal.token.d.ts

@@ -1,10 +1,10 @@
 import type { CodeSnippetType } from '../../types.js';
-import { type UmbDictionaryItemPickerModalValue, UmbModalToken } from '../../../core/modal/index.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
 export interface UmbTemplatingItemPickerModalData {
     hidePartialViews?: boolean;
 }
 export type UmbTemplatingItemPickerModalValue = {
-    value: string | UmbDictionaryItemPickerModalValue;
+    value: string;
     type: CodeSnippetType;
 };
 export declare const UMB_TEMPLATING_ITEM_PICKER_MODAL: UmbModalToken<UmbTemplatingItemPickerModalData, UmbTemplatingItemPickerModalValue>;

package/dist-cms/packages/templating/modals/templating-page-field-builder/index.d.ts

@@ -0,0 +1,2 @@
+export * from './templating-page-field-builder-modal.element.js';
+export * from './templating-page-field-builder-modal.token.js';

package/dist-cms/packages/templating/modals/templating-page-field-builder/index.js

@@ -0,0 +1,2 @@
+export * from './templating-page-field-builder-modal.element.js';
+export * from './templating-page-field-builder-modal.token.js';

package/dist-cms/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.d.ts

@@ -0,0 +1,19 @@
+import type { UmbTemplatingPageFieldBuilderModalData, UmbTemplatingPageFieldBuilderModalValue } from './templating-page-field-builder-modal.token.js';
+import { UmbModalBaseElement } from '../../../core/modal/index.js';
+export declare class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<UmbTemplatingPageFieldBuilderModalData, UmbTemplatingPageFieldBuilderModalValue> {
+    private _close;
+    private _submit;
+    private _field?;
+    private _haveDefault;
+    private _default?;
+    private _recursive;
+    /** TODO: Implement "Choose field" */
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+export default UmbTemplatingPageFieldBuilderModalElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-templating-page-field-builder-modal': UmbTemplatingPageFieldBuilderModalElement;
+    }
+}

package/dist-cms/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.js

@@ -0,0 +1,105 @@
+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 { getUmbracoFieldSnippet } from '../../utils/index.js';
+import { UmbTextStyles } from '../../../../shared/style/index.js';
+import { css, html, customElement, state } from '../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../core/modal/index.js';
+let UmbTemplatingPageFieldBuilderModalElement = class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement {
+    constructor() {
+        super(...arguments);
+        this._haveDefault = false;
+        this._recursive = false;
+    }
+    _close() {
+        this.modalContext?.reject();
+    }
+    _submit() {
+        if (!this._field)
+            return;
+        this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) };
+        this.modalContext?.submit();
+    }
+    /** TODO: Implement "Choose field" */
+    render() {
+        return html `
+			<umb-body-layout headline=${this.localize.term('template_insert')}>
+				<uui-box>
+					<div>
+						<uui-label for="page-field-value">
+							<umb-localize key="templateEditor_chooseField">Choose field</umb-localize>
+						</uui-label>
+						(Not implemented yet)
+
+						<uui-label for="page-field-default-value">
+							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>
+						</uui-label>
+						${!this._haveDefault
+            ? html `<uui-button
+									label=${this.localize.term('templateEditor_addDefaultValue')}
+									look="placeholder"
+									@click=${() => (this._haveDefault = true)}></uui-button>`
+            : html `<uui-input
+									id="page-field-default-value"
+									label=${this.localize.term('templateEditor_defaultValue')}></uui-input>`}
+
+						<uui-label for="recursive"><umb-localize key="templateEditor_recursive">Recursive</umb-localize></uui-label>
+						<uui-checkbox
+							id="recursive"
+							label=${this.localize.term('templateEditor_recursiveDescr')}
+							?disabled=${this._field ? false : true}></uui-checkbox>
+
+						<uui-label><umb-localize key="templateEditor_outputSample">Output sample</umb-localize></uui-label>
+						<umb-code-block language="C#" copy
+							>${this._field ? getUmbracoFieldSnippet(this._field, this._default, this._recursive) : ''}</umb-code-block
+						>
+					</div>
+				</uui-box>
+				<uui-button
+					slot="actions"
+					@click=${this._close}
+					look="secondary"
+					label=${this.localize.term('general_close')}></uui-button>
+				<uui-button
+					slot="actions"
+					@click=${this._submit}
+					color="positive"
+					look="primary"
+					label=${this.localize.term('general_submit')}></uui-button>
+			</umb-body-layout>
+		`;
+    }
+};
+UmbTemplatingPageFieldBuilderModalElement.styles = [
+    UmbTextStyles,
+    css `
+			uui-box > div {
+				display: grid;
+				gap: var(--uui-size-space-2);
+			}
+
+			uui-label:not(:first-child) {
+				margin-top: var(--uui-size-space-6);
+			}
+		`,
+];
+__decorate([
+    state()
+], UmbTemplatingPageFieldBuilderModalElement.prototype, "_field", void 0);
+__decorate([
+    state()
+], UmbTemplatingPageFieldBuilderModalElement.prototype, "_haveDefault", void 0);
+__decorate([
+    state()
+], UmbTemplatingPageFieldBuilderModalElement.prototype, "_default", void 0);
+__decorate([
+    state()
+], UmbTemplatingPageFieldBuilderModalElement.prototype, "_recursive", void 0);
+UmbTemplatingPageFieldBuilderModalElement = __decorate([
+    customElement('umb-templating-page-field-builder-modal')
+], UmbTemplatingPageFieldBuilderModalElement);
+export { UmbTemplatingPageFieldBuilderModalElement };
+export default UmbTemplatingPageFieldBuilderModalElement;

package/dist-cms/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.token.d.ts

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../../core/modal/index.js';
+export interface UmbTemplatingPageFieldBuilderModalData {
+}
+export type UmbTemplatingPageFieldBuilderModalValue = {
+    output: string;
+};
+export declare const UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL: UmbModalToken<UmbTemplatingPageFieldBuilderModalData, UmbTemplatingPageFieldBuilderModalValue>;

package/dist-cms/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.token.js

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../../core/modal/index.js';
+export const UMB_TEMPLATING_PAGE_FIELD_BUILDER_MODAL = new UmbModalToken('Umb.Modal.TemplatingPageFieldBuilder', {
+    modal: {
+        type: 'sidebar',
+        size: 'small',
+    },
+});

package/dist-cms/packages/templating/modals/templating-section-picker/index.d.ts

@@ -1,2 +1,2 @@
-export * from './templating-section-picker-input.element.js';
 export * from './templating-section-picker-modal.element.js';
+export * from './templating-section-picker-modal.token.js';

package/dist-cms/packages/templating/modals/templating-section-picker/index.js

@@ -1,2 +1,2 @@
-export * from './templating-section-picker-input.element.js';
 export * from './templating-section-picker-modal.element.js';
+export * from './templating-section-picker-modal.token.js';

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

@@ -1,14 +1,11 @@
 import type { UmbTemplatingSectionPickerModalData, UmbTemplatingSectionPickerModalValue } from './templating-section-picker-modal.token.js';
-import type { UmbInsertSectionCheckboxElement } from './templating-section-picker-input.element.js';
 import { UmbModalBaseElement } from '../../../core/modal/index.js';
-import './templating-section-picker-input.element.js';
 export declare class UmbTemplatingSectionPickerModalElement extends UmbModalBaseElement<UmbTemplatingSectionPickerModalData, UmbTemplatingSectionPickerModalValue> {
     #private;
-    checkboxes: NodeListOf<UmbInsertSectionCheckboxElement>;
-    selectedCheckbox?: UmbInsertSectionCheckboxElement | null;
-    snippet: string;
-    firstUpdated(): void;
-    snippetMethods: ((sectionName: string, isMandatory: boolean) => string)[];
+    private _renderNamedSectionNameInput?;
+    private _defineNamedSectionNameInput?;
+    private _renderNamedSectionIsMandatoryCheckbox?;
+    private _pickedSection;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }