@meshmakers/octo-ui 3.3.470 → 3.3.490

package/fesm2022/meshmakers-octo-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, EventEmitter, Output, Input, forwardRef, ViewChild, makeEnvironmentProviders } from '@angular/core';
+import { inject, Component, Injectable, EventEmitter, Output, Input, ElementRef, forwardRef, ViewChild, makeEnvironmentProviders } from '@angular/core';
 import { AttributeSelectorService, AttributeValueTypeDto as AttributeValueTypeDto$1, CkTypeAttributeService, CkTypeSelectorService, SearchFilterTypesDto, SortOrdersDto, FieldFilterOperatorsDto, provideOctoServices } from '@meshmakers/octo-services';
 import { DataSourceTyped, HierarchyDataSourceBase, NotificationDisplayService, provideMmSharedUi } from '@meshmakers/shared-ui';
 import { provideMmSharedAuth } from '@meshmakers/shared-auth';
@@ -18,8 +18,7 @@ import { DropDownListModule, DropDownsModule, AutoCompleteModule } from '@progre
 import * as i5$1 from '@progress/kendo-angular-icons';
 import { IconsModule, SVGIconModule } from '@progress/kendo-angular-icons';
 import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, chevronRightIcon, chevronDownIcon, downloadIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, filterClearIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, plusIcon, minusIcon, trashIcon, dollarIcon, copyIcon } from '@progress/kendo-svg-icons';
-import * as i7 from '@progress/kendo-angular-dialog';
-import { WindowRef, WindowModule, WindowService, WindowCloseResult, DialogContentBase, DialogRef, DialogModule, DialogService } from '@progress/kendo-angular-dialog';
+import { WindowRef, WindowModule, WindowService, WindowCloseResult } from '@progress/kendo-angular-dialog';
 import { Subject, firstValueFrom, of, forkJoin, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap, map, tap, catchError } from 'rxjs/operators';
 import { LoaderModule } from '@progress/kendo-angular-indicators';
@@ -1891,7 +1890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 // Models
 
-class CkTypeSelectorDialogComponent extends DialogContentBase {
+class CkTypeSelectorDialogComponent {
+    windowRef = inject(WindowRef);
     ckTypeSelectorService = inject(CkTypeSelectorService);
     searchSubject = new Subject();
     subscriptions = new Subscription();
@@ -1912,18 +1912,18 @@ class CkTypeSelectorDialogComponent extends DialogContentBase {
     selectItemBy = (context) => context.dataItem.fullName;
     initialCkModelIds;
     derivedFromRtCkTypeId;
-    constructor() {
-        super(inject(DialogRef));
-    }
+    lastClickTime = 0;
+    lastClickRtCkTypeId = null;
+    /** Data passed from the service */
+    data;
     ngOnInit() {
-        const data = this.dialog.content?.instance?.data;
-        if (data) {
-            this.dialogTitle = data.dialogTitle || 'Select Construction Kit Type';
-            this.allowAbstract = data.allowAbstract ?? false;
-            this.initialCkModelIds = data.ckModelIds;
-            this.derivedFromRtCkTypeId = data.derivedFromRtCkTypeId;
-            if (data.selectedCkTypeId) {
-                this.selectedKeys = [data.selectedCkTypeId];
+        if (this.data) {
+            this.dialogTitle = this.data.dialogTitle || 'Select Construction Kit Type';
+            this.allowAbstract = this.data.allowAbstract ?? false;
+            this.initialCkModelIds = this.data.ckModelIds;
+            this.derivedFromRtCkTypeId = this.data.derivedFromRtCkTypeId;
+            if (this.data.selectedCkTypeId) {
+                this.selectedKeys = [this.data.selectedCkTypeId];
             }
         }
         // Set up search debouncing
@@ -2016,19 +2016,32 @@ class CkTypeSelectorDialogComponent extends DialogContentBase {
             this.selectedType = null;
         }
     }
+    onCellClick(event) {
+        const item = event.dataItem;
+        const now = Date.now();
+        if (item && item.rtCkTypeId === this.lastClickRtCkTypeId && (now - this.lastClickTime) < 400) {
+            // Double-click detected
+            if (!item.isAbstract || this.allowAbstract) {
+                this.selectedType = item;
+                this.onConfirm();
+            }
+        }
+        this.lastClickTime = now;
+        this.lastClickRtCkTypeId = item?.rtCkTypeId ?? null;
+    }
     onCancel() {
-        this.dialog.close();
+        this.windowRef.close();
     }
     onConfirm() {
         if (this.selectedType) {
             const result = {
                 selectedCkType: this.selectedType
             };
-            this.dialog.close(result);
+            this.windowRef.close(result);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CkTypeSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CkTypeSelectorDialogComponent, isStandalone: true, selector: "mm-ck-type-selector-dialog", usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: CkTypeSelectorDialogComponent, isStandalone: true, selector: "mm-ck-type-selector-dialog", ngImport: i0, template: `
     <div class="ck-type-selector-container">
       <div class="filter-container">
         <div class="filter-row">
@@ -2067,13 +2080,13 @@ class CkTypeSelectorDialogComponent extends DialogContentBase {
         <kendo-grid
           [data]="gridData"
           [loading]="isLoading"
-          [height]="400"
           [selectable]="{ mode: 'single' }"
           [pageable]="{ pageSizes: [25, 50, 100] }"
           [pageSize]="pageSize"
           [skip]="skip"
           (pageChange)="onPageChange($event)"
           (selectionChange)="onSelectionChange($event)"
+          (cellClick)="onCellClick($event)"
           [kendoGridSelectBy]="selectItemBy"
           [(selectedKeys)]="selectedKeys"
           class="type-grid">
@@ -2102,13 +2115,13 @@ class CkTypeSelectorDialogComponent extends DialogContentBase {
       <div class="selection-info" *ngIf="selectedType">
         <strong>Selected:</strong> {{ selectedType.rtCkTypeId }}
       </div>
-    </div>
 
-    <kendo-dialog-actions>
-      <button kendoButton (click)="onCancel()">Cancel</button>
-      <button kendoButton themeColor="primary" [disabled]="!selectedType || (selectedType.isAbstract && !allowAbstract)" (click)="onConfirm()">OK</button>
-    </kendo-dialog-actions>
-  `, isInline: true, styles: [".ck-type-selector-container{display:flex;flex-direction:column;height:100%;padding:20px;min-width:700px;box-sizing:border-box}.filter-container{margin-bottom:16px;flex-shrink:0}.filter-row{display:flex;gap:16px;align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:4px}.filter-item label{font-size:12px;font-weight:500}.filter-item.flex-grow{flex:1}.filter-item.filter-actions{flex-shrink:0}.filter-input{min-width:180px}.grid-container{flex:1;min-height:0}.type-grid{border-radius:4px}.type-grid ::ng-deep .k-grid-table tbody tr{cursor:pointer}.abstract-type{font-style:italic;opacity:.7}.final-type{font-weight:600}.type-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:8px;text-transform:uppercase}.type-badge.abstract{background-color:var(--kendo-color-warning, #ffc107);color:var(--kendo-color-on-warning, #000);opacity:.8}.type-badge.final{background-color:var(--kendo-color-success, #28a745);color:var(--kendo-color-on-success, #fff);opacity:.8}.selection-info{margin-top:12px;padding:8px 12px;background:var(--kendo-color-success-subtle, #d4edda);border:1px solid var(--kendo-color-success, #28a745);border-radius:4px;font-size:14px;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i3.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i5.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i3$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i7.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] });
+      <div class="dialog-actions">
+        <button kendoButton (click)="onCancel()">Cancel</button>
+        <button kendoButton themeColor="primary" [disabled]="!selectedType || (selectedType.isAbstract && !allowAbstract)" (click)="onConfirm()">OK</button>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.ck-type-selector-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:20px;box-sizing:border-box;gap:12px}.filter-container{margin-bottom:16px;flex-shrink:0}.filter-row{display:flex;gap:16px;align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:4px}.filter-item label{font-size:12px;font-weight:500}.filter-item.flex-grow{flex:1}.filter-item.filter-actions{flex-shrink:0}.filter-input{min-width:180px}.grid-container{flex:1;min-height:0;display:flex;flex-direction:column}.grid-container kendo-grid,.grid-container .type-grid{flex:1;min-height:200px}.type-grid{border-radius:4px}.type-grid ::ng-deep .k-grid-table tbody tr{cursor:pointer}.abstract-type{font-style:italic;opacity:.7}.final-type{font-weight:600}.type-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:8px;text-transform:uppercase}.type-badge.abstract{background-color:var(--kendo-color-warning, #ffc107);color:var(--kendo-color-on-warning, #000);opacity:.8}.type-badge.final{background-color:var(--kendo-color-success, #28a745);color:var(--kendo-color-on-success, #fff);opacity:.8}.selection-info{margin-top:12px;padding:8px 12px;background:var(--kendo-color-success-subtle, #d4edda);border:1px solid var(--kendo-color-success, #28a745);border-radius:4px;font-size:14px;flex-shrink:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 20px 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i3.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i5.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i3$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: LoaderModule }, { kind: "ngmodule", type: WindowModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CkTypeSelectorDialogComponent, decorators: [{
             type: Component,
@@ -2121,7 +2134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         DropDownsModule,
                         IconsModule,
                         LoaderModule,
-                        DialogModule
+                        WindowModule
                     ], template: `
     <div class="ck-type-selector-container">
       <div class="filter-container">
@@ -2161,13 +2174,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <kendo-grid
           [data]="gridData"
           [loading]="isLoading"
-          [height]="400"
           [selectable]="{ mode: 'single' }"
           [pageable]="{ pageSizes: [25, 50, 100] }"
           [pageSize]="pageSize"
           [skip]="skip"
           (pageChange)="onPageChange($event)"
           (selectionChange)="onSelectionChange($event)"
+          (cellClick)="onCellClick($event)"
           [kendoGridSelectBy]="selectItemBy"
           [(selectedKeys)]="selectedKeys"
           class="type-grid">
@@ -2196,17 +2209,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       <div class="selection-info" *ngIf="selectedType">
         <strong>Selected:</strong> {{ selectedType.rtCkTypeId }}
       </div>
-    </div>
 
-    <kendo-dialog-actions>
-      <button kendoButton (click)="onCancel()">Cancel</button>
-      <button kendoButton themeColor="primary" [disabled]="!selectedType || (selectedType.isAbstract && !allowAbstract)" (click)="onConfirm()">OK</button>
-    </kendo-dialog-actions>
-  `, styles: [".ck-type-selector-container{display:flex;flex-direction:column;height:100%;padding:20px;min-width:700px;box-sizing:border-box}.filter-container{margin-bottom:16px;flex-shrink:0}.filter-row{display:flex;gap:16px;align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:4px}.filter-item label{font-size:12px;font-weight:500}.filter-item.flex-grow{flex:1}.filter-item.filter-actions{flex-shrink:0}.filter-input{min-width:180px}.grid-container{flex:1;min-height:0}.type-grid{border-radius:4px}.type-grid ::ng-deep .k-grid-table tbody tr{cursor:pointer}.abstract-type{font-style:italic;opacity:.7}.final-type{font-weight:600}.type-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:8px;text-transform:uppercase}.type-badge.abstract{background-color:var(--kendo-color-warning, #ffc107);color:var(--kendo-color-on-warning, #000);opacity:.8}.type-badge.final{background-color:var(--kendo-color-success, #28a745);color:var(--kendo-color-on-success, #fff);opacity:.8}.selection-info{margin-top:12px;padding:8px 12px;background:var(--kendo-color-success-subtle, #d4edda);border:1px solid var(--kendo-color-success, #28a745);border-radius:4px;font-size:14px;flex-shrink:0}\n"] }]
-        }], ctorParameters: () => [] });
+      <div class="dialog-actions">
+        <button kendoButton (click)="onCancel()">Cancel</button>
+        <button kendoButton themeColor="primary" [disabled]="!selectedType || (selectedType.isAbstract && !allowAbstract)" (click)="onConfirm()">OK</button>
+      </div>
+    </div>
+  `, styles: [":host{display:flex;flex-direction:column;height:100%}.ck-type-selector-container{display:flex;flex-direction:column;flex:1;min-height:0;padding:20px;box-sizing:border-box;gap:12px}.filter-container{margin-bottom:16px;flex-shrink:0}.filter-row{display:flex;gap:16px;align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:4px}.filter-item label{font-size:12px;font-weight:500}.filter-item.flex-grow{flex:1}.filter-item.filter-actions{flex-shrink:0}.filter-input{min-width:180px}.grid-container{flex:1;min-height:0;display:flex;flex-direction:column}.grid-container kendo-grid,.grid-container .type-grid{flex:1;min-height:200px}.type-grid{border-radius:4px}.type-grid ::ng-deep .k-grid-table tbody tr{cursor:pointer}.abstract-type{font-style:italic;opacity:.7}.final-type{font-weight:600}.type-badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;margin-left:8px;text-transform:uppercase}.type-badge.abstract{background-color:var(--kendo-color-warning, #ffc107);color:var(--kendo-color-on-warning, #000);opacity:.8}.type-badge.final{background-color:var(--kendo-color-success, #28a745);color:var(--kendo-color-on-success, #fff);opacity:.8}.selection-info{margin-top:12px;padding:8px 12px;background:var(--kendo-color-success-subtle, #d4edda);border:1px solid var(--kendo-color-success, #28a745);border-radius:4px;font-size:14px;flex-shrink:0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 20px 0;flex-shrink:0}\n"] }]
+        }] });
 
 class CkTypeSelectorDialogService {
-    dialogService = inject(DialogService);
+    windowService = inject(WindowService);
     /**
      * Opens the CkType selector dialog
      * @param options Dialog options
@@ -2220,20 +2233,28 @@ class CkTypeSelectorDialogService {
             allowAbstract: options.allowAbstract,
             derivedFromRtCkTypeId: options.derivedFromRtCkTypeId
         };
-        const dialogRef = this.dialogService.open({
+        const windowRef = this.windowService.open({
             content: CkTypeSelectorDialogComponent,
             width: 900,
             height: 650,
             minWidth: 750,
             minHeight: 550,
+            resizable: true,
             title: options.dialogTitle || 'Select Construction Kit Type'
         });
         // Pass data to the component
-        if (dialogRef.content?.instance) {
-            dialogRef.content.instance.data = data;
+        const contentRef = windowRef.content;
+        if (contentRef?.instance) {
+            contentRef.instance.data = data;
         }
         try {
-            const result = await firstValueFrom(dialogRef.result);
+            const result = await firstValueFrom(windowRef.result);
+            if (result instanceof WindowCloseResult) {
+                return {
+                    confirmed: false,
+                    selectedCkType: null
+                };
+            }
             if (result && typeof result === 'object' && 'selectedCkType' in result) {
                 // User clicked OK and we have a result
                 const dialogResult = result;
@@ -3102,10 +3123,14 @@ class CkTypeSelectorInputComponent {
     onChange = () => { };
     onTouched = () => { };
     searchIcon = searchIcon;
+    popupSettings = { appendTo: 'root', popupClass: 'mm-ck-type-popup' };
+    static popupStyleInjected = false;
     ckTypeSelectorService = inject(CkTypeSelectorService);
     dialogService = inject(CkTypeSelectorDialogService, { optional: true });
+    elementRef = inject(ElementRef);
     ngOnInit() {
         this.setupSearch();
+        this.injectPopupStyles();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -3223,6 +3248,29 @@ class CkTypeSelectorInputComponent {
             this.typeMap = new Map(items.map(item => [item.rtCkTypeId, item]));
         }));
     }
+    injectPopupStyles() {
+        if (CkTypeSelectorInputComponent.popupStyleInjected)
+            return;
+        const style = document.createElement('style');
+        style.setAttribute('data-mm-ck-type-popup', '');
+        style.textContent = `
+      .mm-ck-type-popup {
+        max-width: 500px !important;
+        min-width: 0 !important;
+      }
+      .mm-ck-type-popup .k-child-animation-container {
+        max-width: 500px !important;
+      }
+      .mm-ck-type-popup .k-list-item {
+        padding: 4px 12px !important;
+        min-height: 0 !important;
+        font-size: 13px !important;
+        line-height: 20px !important;
+      }
+    `;
+        document.head.appendChild(style);
+        CkTypeSelectorInputComponent.popupStyleInjected = true;
+    }
     selectCkType(ckType) {
         this.selectedCkType = ckType;
         this.searchFormControl.setValue(ckType.rtCkTypeId, { emitEvent: false });
@@ -3276,6 +3324,7 @@ class CkTypeSelectorInputComponent {
         [suggest]="true"
         [clearButton]="true"
         [filterable]="true"
+        [popupSettings]="popupSettings"
         (filterChange)="onFilterChange($event)"
         (valueChange)="onSelectionChange($event)"
         (blur)="onBlur()"
@@ -3352,6 +3401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         [suggest]="true"
         [clearButton]="true"
         [filterable]="true"
+        [popupSettings]="popupSettings"
         (filterChange)="onFilterChange($event)"
         (valueChange)="onSelectionChange($event)"
         (blur)="onBlur()"
@@ -3427,6 +3477,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class FieldFilterEditorComponent {
+    attributeService = inject(AttributeSelectorService, { optional: true });
     plusIcon = plusIcon;
     minusIcon = minusIcon;
     trashIcon = trashIcon;
@@ -3451,10 +3502,21 @@ class FieldFilterEditorComponent {
     ];
     booleanOptions = ['true', 'false'];
     availableAttributes = [];
+    /**
+     * Optional CK type ID for self-loading attributes.
+     * When set, the component loads available attributes itself and shows
+     * navigation property controls (checkbox + max depth).
+     * When not set, the component uses the externally provided availableAttributes input.
+     */
+    ckTypeId;
     /** Enable variable mode - allows using variables instead of literal values */
     enableVariables = false;
     /** Available variables for selection when enableVariables is true */
     availableVariables = [];
+    /** Controls for self-loading mode (when ckTypeId is set) */
+    includeNavigationProperties = true;
+    maxDepth = null;
+    isLoadingAttributes = false;
     _filters = [];
     nextId = 1;
     filteredAttributeList = [];
@@ -3468,7 +3530,11 @@ class FieldFilterEditorComponent {
     }
     filtersChange = new EventEmitter();
     selectedKeys = [];
-    ngOnChanges() {
+    ngOnChanges(changes) {
+        // Self-load attributes when ckTypeId changes
+        if (changes?.['ckTypeId'] && this.ckTypeId) {
+            this.loadAttributesFromCkType();
+        }
         this.filteredAttributeList = [...this.availableAttributes];
         this.buildAttributeTypeMap();
         // Ensure useVariable flag is set correctly for filters with variable values
@@ -3493,6 +3559,43 @@ class FieldFilterEditorComponent {
             this.attributeTypeMap.set(attr.attributePath, attr.attributeValueType);
         }
     }
+    // ============================================================================
+    // Self-loading attribute methods (when ckTypeId is set)
+    // ============================================================================
+    onNavigationPropertiesChange() {
+        if (!this.includeNavigationProperties) {
+            this.maxDepth = null;
+        }
+        this.loadAttributesFromCkType();
+    }
+    onMaxDepthChange(value) {
+        this.maxDepth = value;
+        this.loadAttributesFromCkType();
+    }
+    async loadAttributesFromCkType() {
+        if (!this.ckTypeId || !this.attributeService)
+            return;
+        this.isLoadingAttributes = true;
+        try {
+            const result = await firstValueFrom(this.attributeService.getAvailableAttributes(this.ckTypeId, undefined, // filter
+            1000, // first
+            undefined, // after
+            undefined, // attributeValueType
+            undefined, // searchTerm
+            this.includeNavigationProperties, this.maxDepth ?? undefined));
+            this.availableAttributes = result.items;
+            this.filteredAttributeList = [...this.availableAttributes];
+            this.buildAttributeTypeMap();
+        }
+        catch (error) {
+            console.error('Error loading filter attributes:', error);
+            this.availableAttributes = [];
+            this.filteredAttributeList = [];
+        }
+        finally {
+            this.isLoadingAttributes = false;
+        }
+    }
     addFilter() {
         const newFilter = {
             id: this.nextId++,
@@ -3817,8 +3920,32 @@ class FieldFilterEditorComponent {
         return values;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldFilterEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FieldFilterEditorComponent, isStandalone: true, selector: "mm-field-filter-editor", inputs: { availableAttributes: "availableAttributes", enableVariables: "enableVariables", availableVariables: "availableVariables", filters: "filters" }, outputs: { filtersChange: "filtersChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FieldFilterEditorComponent, isStandalone: true, selector: "mm-field-filter-editor", inputs: { availableAttributes: "availableAttributes", ckTypeId: "ckTypeId", enableVariables: "enableVariables", availableVariables: "availableVariables", filters: "filters" }, outputs: { filtersChange: "filtersChange" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="field-filter-editor">
+      @if (ckTypeId) {
+        <div class="attribute-options">
+          <label class="inline-checkbox">
+            <input type="checkbox" kendoCheckBox
+              [(ngModel)]="includeNavigationProperties"
+              (ngModelChange)="onNavigationPropertiesChange()" />
+            Include Navigation Properties
+          </label>
+          <label class="inline-field">
+            Max Depth
+            <kendo-numerictextbox
+              [(ngModel)]="maxDepth"
+              [min]="1" [max]="5" [step]="1" [format]="'n0'"
+              [spinners]="true"
+              [disabled]="!includeNavigationProperties"
+              (valueChange)="onMaxDepthChange($event)"
+              class="depth-input">
+            </kendo-numerictextbox>
+          </label>
+          @if (isLoadingAttributes) {
+            <span class="loading-hint">Loading...</span>
+          }
+        </div>
+      }
       <div class="toolbar">
         <button
           kendoButton
@@ -3865,25 +3992,26 @@ class FieldFilterEditorComponent {
         <kendo-grid-column field="attributePath" title="Attribute Path" [width]="280">
           <ng-template kendoGridCellTemplate let-dataItem>
             @if (availableAttributes.length > 0) {
-              <kendo-dropdownlist
+              <kendo-combobox
                 [data]="filteredAttributeList"
                 [(ngModel)]="dataItem.attributePath"
                 (valueChange)="onAttributeChange(dataItem, $event)"
                 [textField]="'attributePath'"
                 [valueField]="'attributePath'"
                 [valuePrimitive]="true"
+                [allowCustom]="true"
                 [filterable]="true"
                 (filterChange)="onAttributeFilterChange($event)"
                 [listHeight]="300"
                 [popupSettings]="{ appendTo: 'root', animate: true }"
                 class="attribute-dropdown">
-                <ng-template kendoDropDownListItemTemplate let-item>
+                <ng-template kendoComboBoxItemTemplate let-item>
                   <div class="attribute-item">
                     <span class="attribute-path">{{ item.attributePath }}</span>
                     <span class="attribute-type">{{ item.attributeValueType }}</span>
                   </div>
                 </ng-template>
-              </kendo-dropdownlist>
+              </kendo-combobox>
             } @else {
               <kendo-textbox
                 [(ngModel)]="dataItem.attributePath"
@@ -4046,7 +4174,7 @@ class FieldFilterEditorComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".field-filter-editor{display:flex;flex-direction:column;gap:10px}.toolbar{display:flex;gap:10px;margin-bottom:5px}.filter-grid{border:1px solid #d5d5d5}.filter-grid ::ng-deep .k-grid-header .k-header{font-weight:600}.checkbox-column{text-align:center}.attribute-dropdown,.operator-dropdown,.attribute-input,.value-input{width:100%}.attribute-item{display:flex;justify-content:space-between;align-items:center;width:100%}.attribute-path{flex:1}.attribute-type{font-size:11px;color:#888;margin-left:8px;padding:2px 6px;background:#f0f0f0;border-radius:3px}.empty-state{padding:40px;text-align:center;border:1px dashed;border-radius:8px;font-family:Montserrat,sans-serif;font-size:.9rem}.empty-state p{margin:0}.value-cell{display:flex;gap:4px;align-items:center}.value-cell .value-input{flex:1}.variable-toggle{flex-shrink:0}.variable-item{display:flex;flex-direction:column;gap:2px}.variable-name{font-family:monospace;font-weight:500}.variable-label{font-size:11px;color:var(--kendo-color-subtle, #888)}.variable-value{font-family:monospace;color:var(--kendo-color-primary, #0d6efd)}.variable-placeholder{color:var(--kendo-color-subtle, #888)}.variable-dropdown ::ng-deep .k-input-value-text{font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i3.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i3$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i3$1.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DateInputsModule }, { kind: "component", type: i6.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: PopupModule }, { kind: "ngmodule", type: IntlModule }] });
+  `, isInline: true, styles: [".field-filter-editor{display:flex;flex-direction:column;gap:10px}.attribute-options{display:flex;align-items:center;gap:16px;font-size:.85rem}.inline-checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:400}.inline-field{display:flex;align-items:center;gap:6px;font-weight:400}.depth-input{width:80px}.loading-hint{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.toolbar{display:flex;gap:10px;margin-bottom:5px}.filter-grid{border:1px solid #d5d5d5}.filter-grid ::ng-deep .k-grid-header .k-header{font-weight:600}.checkbox-column{text-align:center}.attribute-dropdown,.operator-dropdown,.attribute-input,.value-input{width:100%}.attribute-item{display:flex;justify-content:space-between;align-items:center;width:100%}.attribute-path{flex:1}.attribute-type{font-size:11px;color:#888;margin-left:8px;padding:2px 6px;background:#f0f0f0;border-radius:3px}.empty-state{padding:40px;text-align:center;border:1px dashed;border-radius:8px;font-family:Montserrat,sans-serif;font-size:.9rem}.empty-state p{margin:0}.value-cell{display:flex;gap:4px;align-items:center}.value-cell .value-input{flex:1}.variable-toggle{flex-shrink:0}.variable-item{display:flex;flex-direction:column;gap:2px}.variable-name{font-family:monospace;font-weight:500}.variable-label{font-size:11px;color:var(--kendo-color-subtle, #888)}.variable-value{font-family:monospace;color:var(--kendo-color-primary, #0d6efd)}.variable-placeholder{color:var(--kendo-color-subtle, #888)}.variable-dropdown ::ng-deep .k-input-value-text{font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: GridModule }, { kind: "component", type: i3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "adaptiveMode", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "rowReorderable", "navigable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "showInactiveTools", "isDetailExpanded", "isGroupExpanded", "dataLayoutMode"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "gridStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "csvExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i3.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i3$1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i3$1.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i3$1.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: i5.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DateInputsModule }, { kind: "component", type: i6.DateTimePickerComponent, selector: "kendo-datetimepicker", inputs: ["focusableId", "weekDaysFormat", "showOtherMonthDays", "value", "format", "twoDigitYearMax", "tabindex", "disabledDates", "popupSettings", "adaptiveTitle", "adaptiveSubtitle", "disabled", "readonly", "readOnlyInput", "cancelButton", "formatPlaceholder", "placeholder", "steps", "focusedDate", "calendarType", "animateCalendarNavigation", "weekNumber", "min", "max", "rangeValidation", "disabledDatesValidation", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "clearButton", "autoFill", "adaptiveMode", "inputAttributes", "defaultTab", "size", "rounded", "fillMode", "headerTemplate", "footerTemplate", "footer"], outputs: ["valueChange", "open", "close", "focus", "blur", "escape"], exportAs: ["kendo-datetimepicker"] }, { kind: "ngmodule", type: IconsModule }, { kind: "ngmodule", type: PopupModule }, { kind: "ngmodule", type: IntlModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldFilterEditorComponent, decorators: [{
             type: Component,
@@ -4063,6 +4191,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         IntlModule
                     ], template: `
     <div class="field-filter-editor">
+      @if (ckTypeId) {
+        <div class="attribute-options">
+          <label class="inline-checkbox">
+            <input type="checkbox" kendoCheckBox
+              [(ngModel)]="includeNavigationProperties"
+              (ngModelChange)="onNavigationPropertiesChange()" />
+            Include Navigation Properties
+          </label>
+          <label class="inline-field">
+            Max Depth
+            <kendo-numerictextbox
+              [(ngModel)]="maxDepth"
+              [min]="1" [max]="5" [step]="1" [format]="'n0'"
+              [spinners]="true"
+              [disabled]="!includeNavigationProperties"
+              (valueChange)="onMaxDepthChange($event)"
+              class="depth-input">
+            </kendo-numerictextbox>
+          </label>
+          @if (isLoadingAttributes) {
+            <span class="loading-hint">Loading...</span>
+          }
+        </div>
+      }
       <div class="toolbar">
         <button
           kendoButton
@@ -4109,25 +4261,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         <kendo-grid-column field="attributePath" title="Attribute Path" [width]="280">
           <ng-template kendoGridCellTemplate let-dataItem>
             @if (availableAttributes.length > 0) {
-              <kendo-dropdownlist
+              <kendo-combobox
                 [data]="filteredAttributeList"
                 [(ngModel)]="dataItem.attributePath"
                 (valueChange)="onAttributeChange(dataItem, $event)"
                 [textField]="'attributePath'"
                 [valueField]="'attributePath'"
                 [valuePrimitive]="true"
+                [allowCustom]="true"
                 [filterable]="true"
                 (filterChange)="onAttributeFilterChange($event)"
                 [listHeight]="300"
                 [popupSettings]="{ appendTo: 'root', animate: true }"
                 class="attribute-dropdown">
-                <ng-template kendoDropDownListItemTemplate let-item>
+                <ng-template kendoComboBoxItemTemplate let-item>
                   <div class="attribute-item">
                     <span class="attribute-path">{{ item.attributePath }}</span>
                     <span class="attribute-type">{{ item.attributeValueType }}</span>
                   </div>
                 </ng-template>
-              </kendo-dropdownlist>
+              </kendo-combobox>
             } @else {
               <kendo-textbox
                 [(ngModel)]="dataItem.attributePath"
@@ -4290,9 +4443,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         </div>
       }
     </div>
-  `, styles: [".field-filter-editor{display:flex;flex-direction:column;gap:10px}.toolbar{display:flex;gap:10px;margin-bottom:5px}.filter-grid{border:1px solid #d5d5d5}.filter-grid ::ng-deep .k-grid-header .k-header{font-weight:600}.checkbox-column{text-align:center}.attribute-dropdown,.operator-dropdown,.attribute-input,.value-input{width:100%}.attribute-item{display:flex;justify-content:space-between;align-items:center;width:100%}.attribute-path{flex:1}.attribute-type{font-size:11px;color:#888;margin-left:8px;padding:2px 6px;background:#f0f0f0;border-radius:3px}.empty-state{padding:40px;text-align:center;border:1px dashed;border-radius:8px;font-family:Montserrat,sans-serif;font-size:.9rem}.empty-state p{margin:0}.value-cell{display:flex;gap:4px;align-items:center}.value-cell .value-input{flex:1}.variable-toggle{flex-shrink:0}.variable-item{display:flex;flex-direction:column;gap:2px}.variable-name{font-family:monospace;font-weight:500}.variable-label{font-size:11px;color:var(--kendo-color-subtle, #888)}.variable-value{font-family:monospace;color:var(--kendo-color-primary, #0d6efd)}.variable-placeholder{color:var(--kendo-color-subtle, #888)}.variable-dropdown ::ng-deep .k-input-value-text{font-family:monospace}\n"] }]
+  `, styles: [".field-filter-editor{display:flex;flex-direction:column;gap:10px}.attribute-options{display:flex;align-items:center;gap:16px;font-size:.85rem}.inline-checkbox{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:400}.inline-field{display:flex;align-items:center;gap:6px;font-weight:400}.depth-input{width:80px}.loading-hint{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.toolbar{display:flex;gap:10px;margin-bottom:5px}.filter-grid{border:1px solid #d5d5d5}.filter-grid ::ng-deep .k-grid-header .k-header{font-weight:600}.checkbox-column{text-align:center}.attribute-dropdown,.operator-dropdown,.attribute-input,.value-input{width:100%}.attribute-item{display:flex;justify-content:space-between;align-items:center;width:100%}.attribute-path{flex:1}.attribute-type{font-size:11px;color:#888;margin-left:8px;padding:2px 6px;background:#f0f0f0;border-radius:3px}.empty-state{padding:40px;text-align:center;border:1px dashed;border-radius:8px;font-family:Montserrat,sans-serif;font-size:.9rem}.empty-state p{margin:0}.value-cell{display:flex;gap:4px;align-items:center}.value-cell .value-input{flex:1}.variable-toggle{flex-shrink:0}.variable-item{display:flex;flex-direction:column;gap:2px}.variable-name{font-family:monospace;font-weight:500}.variable-label{font-size:11px;color:var(--kendo-color-subtle, #888)}.variable-value{font-family:monospace;color:var(--kendo-color-primary, #0d6efd)}.variable-placeholder{color:var(--kendo-color-subtle, #888)}.variable-dropdown ::ng-deep .k-input-value-text{font-family:monospace}\n"] }]
         }], propDecorators: { availableAttributes: [{
                 type: Input
+            }], ckTypeId: [{
+                type: Input
             }], enableVariables: [{
                 type: Input
             }], availableVariables: [{