@umbraco-cms/backoffice 14.0.0-e7aa9547 → 14.0.0-f96e8145

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) {

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

@@ -1,5 +1,4 @@
 import { ManifestModal } from '../../core/extension-registry/index.js';
 export declare const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = "Umb.Modal.Templating.Insert.ChooseType.Sidebar";
-export declare const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS = "Umb.Modal.Templating.Insert.Value.Sidebar";
 export declare const UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS = "Umb.Modal.Templating.Insert.Section.Sidebar";
 export declare const manifests: ManifestModal[];

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

@@ -1,6 +1,5 @@
 import { UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS } from '../../core/modal/index.js';
 export const UMB_MODAL_TEMPLATING_INSERT_CHOOSE_TYPE_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.ChooseType.Sidebar';
-export const UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Value.Sidebar';
 export const UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Insert.Section.Sidebar';
 const modals = [
     {
@@ -9,12 +8,6 @@ const modals = [
         name: 'Choose insert type sidebar',
         loader: () => import('./insert-choose-type-sidebar.element.js'),
     },
-    {
-        type: 'modal',
-        alias: UMB_MODAL_TEMPLATING_INSERT_FIELD_SIDEBAR_ALIAS,
-        name: 'Insert value type sidebar',
-        loader: () => import('./insert-value-sidebar.element.js'),
-    },
     {
         type: 'modal',
         alias: UMB_PARTIAL_VIEW_PICKER_MODAL_ALIAS,

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

@@ -16,7 +16,7 @@ export let UmbTemplateAliasInputElement = class UmbTemplateAliasInputElement ext
     }
     render() {
         return html `
-        <uui-button compact @click=${this.#handleClick}>
+        <uui-button compact @click=${this.#handleClick} label="unlock alias input">
             <uui-symbol-lock .open=${this.isOpen} ></uui-symbol-lock>
         </uui-button>
         <input placeholder="Enter alias..." .value=${this.value} ?disabled=${!this.isOpen} @input=${this.#setValue}></input>

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

@@ -1,3 +1,4 @@
+import '../template-card/template-card.element.js';
 import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
 import { ItemResponseModelBaseModel } from '../../../../../external/backend-api/index.js';
 declare const UmbInputTemplateElement_base: (new (...args: any[]) => import("../../../../../external/uui/index.js").FormControlMixinInterface) & typeof UmbLitElement;
@@ -32,8 +33,8 @@ export declare class UmbInputTemplateElement extends UmbInputTemplateElement_bas
      */
     maxMessage: string;
     _selectedIds: Array<string>;
-    get selectedIds(): Array<string>;
-    set selectedIds(newKeys: Array<string>);
+    get selectedIds(): Array<string> | undefined;
+    set selectedIds(newKeys: Array<string> | undefined);
     _defaultId: string;
     get defaultId(): string;
     set defaultId(newId: string);

package/dist-cms/packages/templating/templates/components/input-template/input-template.element.js

@@ -4,6 +4,7 @@ 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 '../template-card/template-card.element.js';
 import { UmbTemplateRepository } from '../../repository/template.repository.js';
 import { css, html, customElement, property, state } from '../../../../../external/lit/index.js';
 import { UUITextStyles, FormControlMixin } from '../../../../../external/uui/index.js';
@@ -14,7 +15,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         return this._selectedIds;
     }
     set selectedIds(newKeys) {
-        this._selectedIds = newKeys;
+        this._selectedIds = newKeys ?? [];
         this.#observePickedTemplates();
     }
     get defaultId() {
@@ -69,7 +70,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         // TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
         const modalContext = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
             multiple: true,
-            selection: [...this.selectedIds],
+            selection: [...this._selectedIds],
             pickableFilter: (template) => template.id !== null,
         });
         modalContext?.onSubmit().then((data) => {
@@ -89,7 +90,7 @@ export let UmbInputTemplateElement = class UmbInputTemplateElement extends FormC
         In current backoffice we just prevent deleting a default when there are other templates. But if its the only one its okay. This is a weird experience, so we should make something that makes more sense.
         BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates.
         */
-        this.selectedIds = this.selectedIds.filter((x) => x !== id);
+        this.selectedIds = this._selectedIds.filter((x) => x !== id);
     }
     #openTemplate(e) {
         const id = e.target.value;
@@ -153,7 +154,7 @@ __decorate([
     property({ type: String, attribute: 'min-message' })
 ], UmbInputTemplateElement.prototype, "maxMessage", void 0);
 __decorate([
-    property({ type: (Array) })
+    property({ type: Array })
 ], UmbInputTemplateElement.prototype, "selectedIds", null);
 __decorate([
     property({ type: String })

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

@@ -1,3 +1,5 @@
+import './components/index.js';
+import './modals/modal-tokens.js';
 export * from './entities.js';
 export * from './repository/index.js';
 export * from './components/index.js';

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

@@ -1,3 +1,5 @@
+import './components/index.js';
+import './modals/modal-tokens.js';
 export * from './entities.js';
 export * from './repository/index.js';
 export * from './components/index.js';

package/dist-cms/packages/templating/templates/manifests.d.ts

@@ -1 +1 @@
-export declare const manifests: (import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView)[];
+export declare const manifests: (import("../../core/index.js").ManifestEntityAction | import("../../core/index.js").ManifestMenuItemTreeKind | import("../../core/index.js").ManifestModal | import("../../core/index.js").ManifestRepository | import("../../core/index.js").ManifestStore | import("../../core/index.js").ManifestTreeStore | import("../../core/index.js").ManifestItemStore | import("../../core/index.js").ManifestTree | import("../../core/index.js").ManifestTreeItem | import("../../core/index.js").ManifestWorkspace | import("../../core/index.js").ManifestWorkspaceAction | import("../../core/index.js").ManifestWorkspaceEditorView)[];

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

@@ -3,7 +3,9 @@ import { manifests as menuItemManifests } from './menu-item/manifests.js';
 import { manifests as treeManifests } from './tree/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as workspaceManifests } from './workspace/manifests.js';
+import { manifests as modalManifests } from './modals/manifests.js';
 export const manifests = [
+    ...modalManifests,
     ...repositoryManifests,
     ...menuItemManifests,
     ...treeManifests,

package/dist-cms/packages/templating/templates/modals/manifests.d.ts

@@ -0,0 +1,3 @@
+import { ManifestModal } from '../../../core/extension-registry/index.js';
+export declare const UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS = "Umb.Modal.Templating.Query.Builder.Sidebar";
+export declare const manifests: ManifestModal[];

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

@@ -0,0 +1,10 @@
+export const UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS = 'Umb.Modal.Templating.Query.Builder.Sidebar';
+const modals = [
+    {
+        type: 'modal',
+        alias: UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS,
+        name: 'Template query builder',
+        loader: () => import('./query-builder/query-builder.element.js'),
+    },
+];
+export const manifests = [...modals];

package/dist-cms/packages/templating/templates/modals/modal-tokens.d.ts

@@ -0,0 +1,3 @@
+import { TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult } from './query-builder/query-builder.element.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
+export declare const UMB_TEMPLATE_QUERY_BUILDER_MODAL: UmbModalToken<TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult>;

package/dist-cms/packages/templating/templates/modals/modal-tokens.js

@@ -0,0 +1,6 @@
+import { UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS } from './manifests.js';
+import { UmbModalToken } from '../../../core/modal/index.js';
+export const UMB_TEMPLATE_QUERY_BUILDER_MODAL = new UmbModalToken(UMB_MODAL_TEMPLATING_QUERY_BUILDER_SIDEBAR_ALIAS, {
+    type: 'sidebar',
+    size: 'large',
+});

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.d.ts

@@ -0,0 +1,24 @@
+import { PropertyValueMap } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { TemplateQueryExecuteFilterPresentationModel, TemplateQueryPropertyTypeModel, TemplateQuerySettingsResponseModel } from '../../../../../external/backend-api/index.js';
+export declare class UmbQueryBuilderFilterElement extends UmbLitElement {
+    #private;
+    private _propertyAliasDropdown?;
+    private _operatorDropdown?;
+    filter: TemplateQueryExecuteFilterPresentationModel;
+    unremovable: boolean;
+    settings?: TemplateQuerySettingsResponseModel;
+    currentPropertyType: TemplateQueryPropertyTypeModel | null;
+    get isFilterValid(): boolean;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private _renderOperatorsDropdown;
+    private _renderConstraintValueInput;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag").CSSResult[];
+}
+export default UmbQueryBuilderFilterElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-query-builder-filter': UmbQueryBuilderFilterElement;
+    }
+}

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder-filter.element.js

@@ -0,0 +1,156 @@
+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 { UUITextStyles } from '../../../../../external/uui/index.js';
+import { css, html, customElement, property, query, state } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../../shared/lit-element/index.js';
+import { TemplateQueryPropertyTypeModel, } from '../../../../../external/backend-api/index.js';
+export let UmbQueryBuilderFilterElement = class UmbQueryBuilderFilterElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.filter = {};
+        this.unremovable = false;
+        this.currentPropertyType = null;
+        this.#setPropertyAlias = (e) => {
+            const target = e.target;
+            const oldCurrentPropertyType = this.currentPropertyType;
+            this.filter = { ...this.filter, propertyAlias: target.value };
+            this.currentPropertyType =
+                this.settings?.properties?.find((p) => p.alias === this.filter.propertyAlias)?.type ?? null;
+            if (oldCurrentPropertyType !== this.currentPropertyType)
+                this.#resetOperator();
+            this._propertyAliasDropdown?.closePopover();
+        };
+        this.#setConstrainValue = (e) => {
+            const target = e.target;
+            this.filter = { ...this.filter, constraintValue: target.value };
+        };
+        this.#setOperator = (e) => {
+            const target = e.target;
+            this.filter = { ...this.filter, operator: target.value };
+            this._operatorDropdown?.closePopover();
+        };
+    }
+    #setPropertyAlias;
+    #setConstrainValue;
+    #setOperator;
+    #resetOperator() {
+        this.filter = { ...this.filter, operator: undefined };
+    }
+    #resetFilter() {
+        this.filter = {};
+    }
+    #removeOrReset() {
+        if (this.unremovable)
+            this.#resetFilter();
+        else
+            this.dispatchEvent(new Event('remove-filter'));
+    }
+    #addFilter() {
+        this.dispatchEvent(new Event('add-filter'));
+    }
+    get isFilterValid() {
+        return Object.keys(this.filter).length === 3 && Object.values(this.filter).every((v) => !!v);
+    }
+    willUpdate(_changedProperties) {
+        if (_changedProperties.has('filter')) {
+            if (this.isFilterValid) {
+                this.dispatchEvent(new Event('update-query'));
+            }
+        }
+    }
+    _renderOperatorsDropdown() {
+        return html `<umb-button-with-dropdown look="outline" id="operator-dropdown" label="choose operator">
+			${this.filter?.operator ?? ''}
+			<uui-combobox-list slot="dropdown" @change=${this.#setOperator} class="options-list">
+				${this.settings?.operators
+            ?.filter((operator) => this.currentPropertyType ? operator.applicableTypes?.includes(this.currentPropertyType) : true)
+            .map((operator) => html `<uui-combobox-list-option .value=${operator.operator ?? ''}
+								>${operator.operator}</uui-combobox-list-option
+							>`)}</uui-combobox-list
+			>
+		</umb-button-with-dropdown>`;
+    }
+    _renderConstraintValueInput() {
+        switch (this.currentPropertyType) {
+            case TemplateQueryPropertyTypeModel.INTEGER:
+                return html `<uui-input type="number" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            case TemplateQueryPropertyTypeModel.STRING:
+                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            case TemplateQueryPropertyTypeModel.DATE_TIME:
+                return html `<uui-input type="date" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+            default:
+                return html `<uui-input type="text" @change=${this.#setConstrainValue} label="constrain value"></uui-input>`;
+        }
+    }
+    render() {
+        return html `
+			<span>${this.unremovable ? 'where' : 'and'}</span>
+			<umb-button-with-dropdown look="outline" id="property-alias-dropdown" label="Property alias"
+				>${this.filter?.propertyAlias ?? ''}
+				<uui-combobox-list  slot="dropdown" @change=${this.#setPropertyAlias} class="options-list">
+					${this.settings?.properties?.map((property) => html `<uui-combobox-list-option tabindex="0" .value=${property.alias ?? ''}
+								>${property.alias}</uui-combobox-list-option
+							>`)}
+				</uui-combobox-list></umb-button-with-dropdown
+			>
+			${this.filter?.propertyAlias ? this._renderOperatorsDropdown() : ''}
+			${this.filter?.operator ? this._renderConstraintValueInput() : ''}
+			<uui-button-group>
+				<uui-button title="Add filter" label="Add filter" compact @click=${this.#addFilter}
+					><uui-icon name="add"></uui-icon
+				></uui-button>
+				<uui-button title="Remove filter" label="Remove filter" compact @click=${this.#removeOrReset}
+					><uui-icon name="delete"></uui-icon
+				></uui-button>
+			</uui-button-group>
+		`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: flex;
+				gap: 10px;
+				border-bottom: 1px solid #f3f3f5;
+				align-items: center;
+				padding: 20px 0;
+			}
+
+			.options-list {
+				min-width: 25ch;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+
+			uui-combobox-list-option {
+				padding: 8px 20px;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    query('#property-alias-dropdown')
+], UmbQueryBuilderFilterElement.prototype, "_propertyAliasDropdown", void 0);
+__decorate([
+    query('#operator-dropdown')
+], UmbQueryBuilderFilterElement.prototype, "_operatorDropdown", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbQueryBuilderFilterElement.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbQueryBuilderFilterElement.prototype, "unremovable", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbQueryBuilderFilterElement.prototype, "settings", void 0);
+__decorate([
+    state()
+], UmbQueryBuilderFilterElement.prototype, "currentPropertyType", void 0);
+UmbQueryBuilderFilterElement = __decorate([
+    customElement('umb-query-builder-filter')
+], UmbQueryBuilderFilterElement);
+export default UmbQueryBuilderFilterElement;

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.d.ts

@@ -0,0 +1,28 @@
+import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
+import './query-builder-filter.element.js';
+export interface TemplateQueryBuilderModalData {
+    hidePartialViews?: boolean;
+}
+export interface TemplateQueryBuilderModalResult {
+    value: string;
+}
+export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement<TemplateQueryBuilderModalData, TemplateQueryBuilderModalResult> {
+    #private;
+    private _contentTypeDropdown?;
+    private _sortDropdown?;
+    private _filterContainer?;
+    private _filterElements;
+    private _templateQuery?;
+    private _queryRequest;
+    private _queryBuilderSettings?;
+    private _selectedRootContentName;
+    private _defaultSortDirection;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-templating-query-builder-modal': UmbChooseInsertTypeModalElement;
+    }
+}