@umbraco-cms/backoffice 14.0.0-3aaba617 → 14.0.0-41f35ef1

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/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 'lit';
+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").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,157 @@
+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 '@umbraco-ui/uui-css';
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.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;
+    }
+}