@meshmakers/octo-ui 3.3.470 → 3.3.480

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';
@@ -3102,10 +3102,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 +3227,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 +3303,7 @@ class CkTypeSelectorInputComponent {
         [suggest]="true"
         [clearButton]="true"
         [filterable]="true"
+        [popupSettings]="popupSettings"
         (filterChange)="onFilterChange($event)"
         (valueChange)="onSelectionChange($event)"
         (blur)="onBlur()"
@@ -3352,6 +3380,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 +3456,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 +3481,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 +3509,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 +3538,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 +3899,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 +3971,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 +4153,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 +4170,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 +4240,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 +4422,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: [{