@meshmakers/octo-ui 3.3.410 → 3.3.430

package/fesm2022/meshmakers-octo-ui.mjs

@@ -17,7 +17,7 @@ import * as i3$1 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, DropDownsModule, AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
 import * as i5$1 from '@progress/kendo-angular-icons';
 import { IconsModule, SVGIconModule } from '@progress/kendo-angular-icons';
-import { searchIcon, sortAscSmallIcon, sortDescSmallIcon, filterClearIcon, chevronRightIcon, chevronDownIcon, downloadIcon, fileIcon, folderIcon, calendarIcon, checkboxCheckedIcon, listUnorderedIcon, arrowRightIcon, arrowLeftIcon, chevronDoubleRightIcon, chevronDoubleLeftIcon, arrowUpIcon, arrowDownIcon, plusIcon, minusIcon, trashIcon, dollarIcon, copyIcon } from '@progress/kendo-svg-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 i5 from '@progress/kendo-angular-dialog';
 import { DialogContentBase, DialogRef, DialogModule, DialogService } from '@progress/kendo-angular-dialog';
 import { Subject, firstValueFrom, of, forkJoin, Subscription } from 'rxjs';
@@ -910,485 +910,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }] });
 
-class CkTypeSelectorDialogComponent extends DialogContentBase {
-    ckTypeSelectorService = inject(CkTypeSelectorService);
-    searchSubject = new Subject();
-    subscriptions = new Subscription();
-    searchIcon = searchIcon;
-    filterClearIcon = filterClearIcon;
-    dialogTitle = 'Select Construction Kit Type';
-    allowAbstract = false;
-    searchText = '';
-    selectedModel = null;
-    availableModels = [];
-    gridData = { data: [], total: 0 };
-    isLoading = false;
-    pageSize = 50;
-    skip = 0;
-    selectedKeys = [];
-    selectedType = null;
-    // Selection key function - returns fullName as unique identifier
-    selectItemBy = (context) => context.dataItem.fullName;
-    initialCkModelIds;
-    constructor() {
-        super(inject(DialogRef));
-    }
-    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;
-            if (data.selectedCkTypeId) {
-                this.selectedKeys = [data.selectedCkTypeId];
-            }
-        }
-        // Set up search debouncing
-        this.subscriptions.add(this.searchSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
-            this.skip = 0;
-            this.loadTypes();
-        }));
-        // Load initial types and extract available models
-        this.loadTypes();
-        this.loadAvailableModels();
-    }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    loadTypes() {
-        this.isLoading = true;
-        const ckModelIds = this.selectedModel
-            ? [this.selectedModel]
-            : this.initialCkModelIds;
-        this.subscriptions.add(this.ckTypeSelectorService.getCkTypes({
-            ckModelIds,
-            searchText: this.searchText || undefined,
-            first: this.pageSize,
-            skip: this.skip
-        }).subscribe({
-            next: result => {
-                this.gridData = {
-                    data: result.items,
-                    total: result.totalCount
-                };
-                // Restore selection if exists
-                if (this.selectedKeys.length > 0) {
-                    const selectedItem = result.items.find(item => item.fullName === this.selectedKeys[0]);
-                    if (selectedItem) {
-                        this.selectedType = selectedItem;
-                    }
-                }
-                this.isLoading = false;
-            },
-            error: () => {
-                this.isLoading = false;
-                this.gridData = { data: [], total: 0 };
-            }
-        }));
-    }
-    loadAvailableModels() {
-        // Load all types to extract unique models
-        this.subscriptions.add(this.ckTypeSelectorService.getCkTypes({
-            first: 1000
-        }).subscribe(result => {
-            const modelSet = new Set();
-            result.items.forEach(item => {
-                // Extract model from fullName (format: "ModelName-Version/TypeName-Version")
-                const modelMatch = item.fullName.match(/^([^/]+)\//);
-                if (modelMatch) {
-                    modelSet.add(modelMatch[1]);
-                }
-            });
-            this.availableModels = Array.from(modelSet).sort();
-        }));
-    }
-    onSearchChange(value) {
-        this.searchSubject.next(value);
-    }
-    onModelFilterChange(_value) {
-        this.skip = 0;
-        this.loadTypes();
-    }
-    clearFilters() {
-        this.searchText = '';
-        this.selectedModel = null;
-        this.skip = 0;
-        this.loadTypes();
-    }
-    onPageChange(event) {
-        this.skip = event.skip;
-        this.pageSize = event.take;
-        this.loadTypes();
-    }
-    onSelectionChange(event) {
-        const selectedItems = event.selectedRows;
-        if (selectedItems && selectedItems.length > 0) {
-            this.selectedType = selectedItems[0].dataItem;
-        }
-        else {
-            this.selectedType = null;
-        }
-    }
-    onCancel() {
-        this.dialog.close();
-    }
-    onConfirm() {
-        if (this.selectedType) {
-            const result = {
-                selectedCkType: this.selectedType
-            };
-            this.dialog.close(result);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: CkTypeSelectorDialogComponent, isStandalone: true, selector: "mm-ck-type-selector-dialog", usesInheritance: true, ngImport: i0, template: `
-    <div class="ck-type-selector-container">
-      <div class="filter-container">
-        <div class="filter-row">
-          <div class="filter-item">
-            <label>Model Filter</label>
-            <kendo-combobox
-              [data]="availableModels"
-              [(ngModel)]="selectedModel"
-              (valueChange)="onModelFilterChange($event)"
-              [allowCustom]="false"
-              [clearButton]="true"
-              placeholder="All Models"
-              class="filter-input">
-            </kendo-combobox>
-          </div>
-          <div class="filter-item flex-grow">
-            <label>Type Search</label>
-            <kendo-textbox
-              [(ngModel)]="searchText"
-              (ngModelChange)="onSearchChange($event)"
-              placeholder="Search types..."
-              class="filter-input">
-              <ng-template kendoTextBoxSuffixTemplate>
-                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" size="small"></button>
-              </ng-template>
-            </kendo-textbox>
-          </div>
-          <div class="filter-item filter-actions">
-            <label>&nbsp;</label>
-            <button kendoButton [svgIcon]="filterClearIcon" (click)="clearFilters()" title="Clear filters"></button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-container">
-        <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)"
-          [kendoGridSelectBy]="selectItemBy"
-          [(selectedKeys)]="selectedKeys"
-          class="type-grid">
-          <kendo-grid-column field="rtCkTypeId" title="Type" [width]="300">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              <span [class.abstract-type]="dataItem.isAbstract" [class.final-type]="dataItem.isFinal">
-                {{ dataItem.rtCkTypeId }}
-              </span>
-              <span *ngIf="dataItem.isAbstract" class="type-badge abstract">abstract</span>
-              <span *ngIf="dataItem.isFinal" class="type-badge final">final</span>
-            </ng-template>
-          </kendo-grid-column>
-          <kendo-grid-column field="baseTypeRtCkTypeId" title="Base Type" [width]="200">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              {{ dataItem.baseTypeRtCkTypeId || '-' }}
-            </ng-template>
-          </kendo-grid-column>
-          <kendo-grid-column field="description" title="Description">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              {{ dataItem.description || '-' }}
-            </ng-template>
-          </kendo-grid-column>
-        </kendo-grid>
-      </div>
-
-      <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: i2$1.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i2$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i2$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i3.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: i4.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: i4.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: i5.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mm-ck-type-selector-dialog', standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        GridModule,
-                        ButtonsModule,
-                        InputsModule,
-                        DropDownsModule,
-                        IconsModule,
-                        LoaderModule,
-                        DialogModule
-                    ], template: `
-    <div class="ck-type-selector-container">
-      <div class="filter-container">
-        <div class="filter-row">
-          <div class="filter-item">
-            <label>Model Filter</label>
-            <kendo-combobox
-              [data]="availableModels"
-              [(ngModel)]="selectedModel"
-              (valueChange)="onModelFilterChange($event)"
-              [allowCustom]="false"
-              [clearButton]="true"
-              placeholder="All Models"
-              class="filter-input">
-            </kendo-combobox>
-          </div>
-          <div class="filter-item flex-grow">
-            <label>Type Search</label>
-            <kendo-textbox
-              [(ngModel)]="searchText"
-              (ngModelChange)="onSearchChange($event)"
-              placeholder="Search types..."
-              class="filter-input">
-              <ng-template kendoTextBoxSuffixTemplate>
-                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" size="small"></button>
-              </ng-template>
-            </kendo-textbox>
-          </div>
-          <div class="filter-item filter-actions">
-            <label>&nbsp;</label>
-            <button kendoButton [svgIcon]="filterClearIcon" (click)="clearFilters()" title="Clear filters"></button>
-          </div>
-        </div>
-      </div>
-
-      <div class="grid-container">
-        <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)"
-          [kendoGridSelectBy]="selectItemBy"
-          [(selectedKeys)]="selectedKeys"
-          class="type-grid">
-          <kendo-grid-column field="rtCkTypeId" title="Type" [width]="300">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              <span [class.abstract-type]="dataItem.isAbstract" [class.final-type]="dataItem.isFinal">
-                {{ dataItem.rtCkTypeId }}
-              </span>
-              <span *ngIf="dataItem.isAbstract" class="type-badge abstract">abstract</span>
-              <span *ngIf="dataItem.isFinal" class="type-badge final">final</span>
-            </ng-template>
-          </kendo-grid-column>
-          <kendo-grid-column field="baseTypeRtCkTypeId" title="Base Type" [width]="200">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              {{ dataItem.baseTypeRtCkTypeId || '-' }}
-            </ng-template>
-          </kendo-grid-column>
-          <kendo-grid-column field="description" title="Description">
-            <ng-template kendoGridCellTemplate let-dataItem>
-              {{ dataItem.description || '-' }}
-            </ng-template>
-          </kendo-grid-column>
-        </kendo-grid>
-      </div>
-
-      <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: () => [] });
-
-class CkTypeSelectorDialogService {
-    dialogService = inject(DialogService);
-    /**
-     * Opens the CkType selector dialog
-     * @param options Dialog options
-     * @returns Promise that resolves with the result containing selected CkType and confirmation status
-     */
-    async openCkTypeSelector(options = {}) {
-        const data = {
-            selectedCkTypeId: options.selectedCkTypeId,
-            ckModelIds: options.ckModelIds,
-            dialogTitle: options.dialogTitle,
-            allowAbstract: options.allowAbstract
-        };
-        const dialogRef = this.dialogService.open({
-            content: CkTypeSelectorDialogComponent,
-            width: 900,
-            height: 650,
-            minWidth: 750,
-            minHeight: 550,
-            title: options.dialogTitle || 'Select Construction Kit Type'
-        });
-        // Pass data to the component
-        if (dialogRef.content?.instance) {
-            dialogRef.content.instance.data = data;
-        }
-        try {
-            const result = await firstValueFrom(dialogRef.result);
-            if (result && typeof result === 'object' && 'selectedCkType' in result) {
-                // User clicked OK and we have a result
-                const dialogResult = result;
-                return {
-                    confirmed: true,
-                    selectedCkType: dialogResult.selectedCkType
-                };
-            }
-            else {
-                // User clicked Cancel or closed dialog
-                return {
-                    confirmed: false,
-                    selectedCkType: null
-                };
-            }
-        }
-        catch {
-            // Dialog was closed without result (e.g., ESC key, X button)
-            return {
-                confirmed: false,
-                selectedCkType: null
-            };
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService, decorators: [{
-            type: Injectable
-        }] });
-
-// noinspection JSUnusedGlobalSymbols
-class OctoGraphQlDataSource extends DataSourceTyped {
-    _searchFilterAttributePaths = [];
-    // noinspection JSUnusedGlobalSymbols
-    constructor(listViewComponent) {
-        super(listViewComponent);
-    }
-    get searchFilterAttributePaths() {
-        return this._searchFilterAttributePaths;
-    }
-    set searchFilterAttributePaths(value) {
-        this._searchFilterAttributePaths = value;
-    }
-    // noinspection JSUnusedGlobalSymbols
-    getFieldFilterDefinitions(state) {
-        let fieldFilters = null;
-        if (state.filter?.filters) {
-            fieldFilters = state.filter.filters.map((f) => {
-                if (isCompositeFilterDescriptor(f)) {
-                    throw new Error('Composite filter descriptor not supported');
-                }
-                const { operator, value } = OctoGraphQlDataSource.getOperatorAndValue(f.operator, f.value);
-                return {
-                    attributePath: f.field,
-                    operator: operator,
-                    comparisonValue: value
-                };
-            });
-        }
-        return fieldFilters;
-    }
-    // noinspection JSUnusedGlobalSymbols
-    getSearchFilterDefinitions(textSearchValue) {
-        let searchFilterDto = null;
-        if (textSearchValue) {
-            searchFilterDto = {
-                type: SearchFilterTypesDto.AttributeFilterDto,
-                attributePaths: this.searchFilterAttributePaths,
-                searchTerm: textSearchValue,
-            };
-        }
-        return searchFilterDto;
-    }
-    // noinspection JSUnusedGlobalSymbols
-    getSortDefinitions(state) {
-        let sort = null;
-        if (state.sort) {
-            sort = new Array();
-            state.sort.forEach((s) => {
-                switch (s.dir) {
-                    case 'asc':
-                        sort?.push({
-                            attributePath: s.field,
-                            sortOrder: SortOrdersDto.AscendingDto
-                        });
-                        break;
-                    case 'desc':
-                        sort?.push({
-                            attributePath: s.field,
-                            sortOrder: SortOrdersDto.DescendingDto,
-                        });
-                        break;
-                    default:
-                        sort?.push({
-                            attributePath: s.field,
-                            sortOrder: SortOrdersDto.DefaultDto,
-                        });
-                        break;
-                }
-            });
-        }
-        return sort;
-    }
-    static getOperatorAndValue(operator, value) {
-        switch (operator) {
-            case 'eq':
-                return { operator: FieldFilterOperatorsDto.EqualsDto, value: value };
-            case 'neq':
-                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: value };
-            case 'lt':
-                return { operator: FieldFilterOperatorsDto.LessThanDto, value: value };
-            case 'lte':
-                return { operator: FieldFilterOperatorsDto.LessEqualThanDto, value: value };
-            case 'gt':
-                return { operator: FieldFilterOperatorsDto.GreaterThanDto, value: value };
-            case 'gte':
-                return { operator: FieldFilterOperatorsDto.GreaterEqualThanDto, value: value };
-            case 'contains':
-                return { operator: FieldFilterOperatorsDto.LikeDto, value: value };
-            case 'doesnotcontain':
-                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: `^(?!.*${value}).*$` };
-            case 'startswith':
-                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: value + '.*' };
-            case 'endswith':
-                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: '.*' + value };
-            case 'isnull':
-                return { operator: FieldFilterOperatorsDto.EqualsDto, value: null };
-            case 'isnotnull':
-                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: null };
-            case 'isempty':
-                return { operator: FieldFilterOperatorsDto.EqualsDto, value: "" };
-            case 'isnotempty':
-                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: "" };
-            default:
-                throw new Error('The filter operator is not supported');
-        }
-    }
-}
-
-class OctoGraphQlHierarchyDataSource extends HierarchyDataSourceBase {
-}
-
 /**
  * Component for displaying property values with appropriate formatting
  */
@@ -1837,502 +1358,981 @@ class PropertyValueDisplayComponent {
                 </div>
               }
             </div>
-          }
-        </div>
-      } @else if (isBinaryLinkedWithDownload()) {
-        <!-- Binary Linked with download capability -->
-        <div class="binary-linked-display">
-          <div class="binary-info">
-            @if (getBinaryFilename()) {
-              <span class="filename">{{ getBinaryFilename() }}</span>
-            }
-            @if (getBinarySize()) {
-              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
-            }
-            @if (getBinaryContentType()) {
-              <span class="content-type">{{ getBinaryContentType() }}</span>
-            }
-          </div>
-          <button
-            kendoButton
-            size="small"
-            fillMode="flat"
-            [svgIcon]="downloadIcon"
-            title="Download file"
-            (click)="onDownload()">
-            Download
-          </button>
-        </div>
-      } @else {
-        <!-- Non-expandable value display -->
-        @switch (displayMode) {
-          @case (PropertyDisplayMode.Json) {
-            <pre class="json-display">{{ getFormattedValue() }}</pre>
-          }
-          @case (PropertyDisplayMode.Text) {
-            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
-          }
-          @default {
-            <span class="default-display">{{ getFormattedValue() }}</span>
-          }
-        }
+          }
+        </div>
+      } @else if (isBinaryLinkedWithDownload()) {
+        <!-- Binary Linked with download capability -->
+        <div class="binary-linked-display">
+          <div class="binary-info">
+            @if (getBinaryFilename()) {
+              <span class="filename">{{ getBinaryFilename() }}</span>
+            }
+            @if (getBinarySize()) {
+              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
+            }
+            @if (getBinaryContentType()) {
+              <span class="content-type">{{ getBinaryContentType() }}</span>
+            }
+          </div>
+          <button
+            kendoButton
+            size="small"
+            fillMode="flat"
+            [svgIcon]="downloadIcon"
+            title="Download file"
+            (click)="onDownload()">
+            Download
+          </button>
+        </div>
+      } @else {
+        <!-- Non-expandable value display -->
+        @switch (displayMode) {
+          @case (PropertyDisplayMode.Json) {
+            <pre class="json-display">{{ getFormattedValue() }}</pre>
+          }
+          @case (PropertyDisplayMode.Text) {
+            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
+          }
+          @default {
+            <span class="default-display">{{ getFormattedValue() }}</span>
+          }
+        }
+
+        @if (isComplexType() && !isExpandableRecord()) {
+          <span class="type-indicator" [title]="getTypeDescription()">
+            {{ getTypeIndicator() }}
+          </span>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;min-height:20px;font-family:inherit;width:100%}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.record-header:hover{background:var(--kendo-color-base-subtle)}.expand-icon{width:16px;height:16px;flex-shrink:0;transition:transform .2s}.record-summary{flex:1;font-size:.9em}.record-content{margin-left:22px;margin-top:8px;border-left:2px solid var(--kendo-color-border);padding-left:12px;background:var(--kendo-color-base-subtle);border-radius:0 4px 4px 0}.nested-properties{display:flex;flex-direction:column;gap:6px;padding:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;min-height:24px}.property-key{font-weight:500;color:var(--kendo-color-primary);min-width:100px;flex-shrink:0;font-size:.9em}.array-item{border:1px solid var(--kendo-color-border);border-radius:4px;margin-bottom:8px;background:transparent}.array-index{display:inline-block;background:var(--kendo-color-primary);color:#fff;padding:2px 8px;font-size:.8em;font-weight:700;border-radius:4px 0;margin-bottom:4px}.json-display{font-family:Courier New,monospace;font-size:12px;margin:0;padding:4px 8px;background:var(--kendo-color-base-subtle);border-radius:4px;max-width:300px;overflow:auto}.text-display,.default-display{flex:1;word-break:break-word;overflow-wrap:anywhere}.type-boolean .default-display{font-weight:500}.type-boolean .default-display.value-true{color:#28a745}.type-boolean .default-display.value-false{color:#dc3545}:is(.type-datetime,.type-datetimeoffset) .default-display{font-family:monospace;font-size:.9em}:is(.type-int,.type-integer,.type-double) .default-display{font-family:monospace;text-align:right}.type-indicator{font-size:.75em;padding:2px 6px;background:var(--kendo-color-primary);color:#fff;border-radius:3px;text-transform:uppercase;font-weight:500;flex-shrink:0}.empty-value{color:var(--kendo-color-subtle);font-style:italic}.null-value{color:var(--kendo-color-error);font-style:italic}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;color:var(--kendo-color-on-app-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyValueDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-property-value-display', standalone: true, imports: [CommonModule, SVGIconModule, ButtonModule], template: `
+    <div class="property-value-display" [ngClass]="'type-' + type.toLowerCase()">
+
+      @if (isExpandableRecord()) {
+        <div class="expandable-record">
+          <!-- Expand/Collapse Button and Summary -->
+          <div class="record-header" (click)="toggleExpansion()">
+            <kendo-svgicon
+              [icon]="isExpanded ? chevronDownIcon : chevronRightIcon"
+              class="expand-icon">
+            </kendo-svgicon>
+            <span class="record-summary">{{ getRecordSummary() }}</span>
+            <span class="type-indicator" [title]="getTypeDescription()">
+              {{ getTypeIndicator() }}
+            </span>
+          </div>
+
+          <!-- Expanded Content -->
+          @if (isExpanded) {
+            <div class="record-content">
+              @if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
+                @for (item of value; track $index) {
+                  <div class="array-item">
+                    <span class="array-index">[{{ $index }}]</span>
+                    <div class="nested-properties">
+                      @for (prop of getObjectProperties(item); track prop.key) {
+                        <div class="nested-property">
+                          <span class="property-key">{{ prop.key }}:</span>
+                          <mm-property-value-display
+                            [value]="prop.value"
+                            [type]="getPropertyType(prop.value)">
+                          </mm-property-value-display>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              } @else {
+                <div class="nested-properties">
+                  @for (prop of getObjectProperties(value); track prop.key) {
+                    <div class="nested-property">
+                      <span class="property-key">{{ prop.key }}:</span>
+                      <mm-property-value-display
+                        [value]="prop.value"
+                        [type]="getPropertyType(prop.value)">
+                      </mm-property-value-display>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </div>
+      } @else if (isBinaryLinkedWithDownload()) {
+        <!-- Binary Linked with download capability -->
+        <div class="binary-linked-display">
+          <div class="binary-info">
+            @if (getBinaryFilename()) {
+              <span class="filename">{{ getBinaryFilename() }}</span>
+            }
+            @if (getBinarySize()) {
+              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
+            }
+            @if (getBinaryContentType()) {
+              <span class="content-type">{{ getBinaryContentType() }}</span>
+            }
+          </div>
+          <button
+            kendoButton
+            size="small"
+            fillMode="flat"
+            [svgIcon]="downloadIcon"
+            title="Download file"
+            (click)="onDownload()">
+            Download
+          </button>
+        </div>
+      } @else {
+        <!-- Non-expandable value display -->
+        @switch (displayMode) {
+          @case (PropertyDisplayMode.Json) {
+            <pre class="json-display">{{ getFormattedValue() }}</pre>
+          }
+          @case (PropertyDisplayMode.Text) {
+            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
+          }
+          @default {
+            <span class="default-display">{{ getFormattedValue() }}</span>
+          }
+        }
+
+        @if (isComplexType() && !isExpandableRecord()) {
+          <span class="type-indicator" [title]="getTypeDescription()">
+            {{ getTypeIndicator() }}
+          </span>
+        }
+      }
+    </div>
+  `, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;min-height:20px;font-family:inherit;width:100%}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.record-header:hover{background:var(--kendo-color-base-subtle)}.expand-icon{width:16px;height:16px;flex-shrink:0;transition:transform .2s}.record-summary{flex:1;font-size:.9em}.record-content{margin-left:22px;margin-top:8px;border-left:2px solid var(--kendo-color-border);padding-left:12px;background:var(--kendo-color-base-subtle);border-radius:0 4px 4px 0}.nested-properties{display:flex;flex-direction:column;gap:6px;padding:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;min-height:24px}.property-key{font-weight:500;color:var(--kendo-color-primary);min-width:100px;flex-shrink:0;font-size:.9em}.array-item{border:1px solid var(--kendo-color-border);border-radius:4px;margin-bottom:8px;background:transparent}.array-index{display:inline-block;background:var(--kendo-color-primary);color:#fff;padding:2px 8px;font-size:.8em;font-weight:700;border-radius:4px 0;margin-bottom:4px}.json-display{font-family:Courier New,monospace;font-size:12px;margin:0;padding:4px 8px;background:var(--kendo-color-base-subtle);border-radius:4px;max-width:300px;overflow:auto}.text-display,.default-display{flex:1;word-break:break-word;overflow-wrap:anywhere}.type-boolean .default-display{font-weight:500}.type-boolean .default-display.value-true{color:#28a745}.type-boolean .default-display.value-false{color:#dc3545}:is(.type-datetime,.type-datetimeoffset) .default-display{font-family:monospace;font-size:.9em}:is(.type-int,.type-integer,.type-double) .default-display{font-family:monospace;text-align:right}.type-indicator{font-size:.75em;padding:2px 6px;background:var(--kendo-color-primary);color:#fff;border-radius:3px;text-transform:uppercase;font-weight:500;flex-shrink:0}.empty-value{color:var(--kendo-color-subtle);font-style:italic}.null-value{color:var(--kendo-color-error);font-style:italic}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;color:var(--kendo-color-on-app-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], displayMode: [{
+                type: Input
+            }], binaryDownload: [{
+                type: Output
+            }] } });
+
+/**
+ * Generic property grid component for OctoMesh
+ */
+class PropertyGridComponent {
+    data = [];
+    config = {};
+    showTypeColumn = false;
+    propertyChange = new EventEmitter();
+    saveRequested = new EventEmitter();
+    binaryDownload = new EventEmitter();
+    // Component state
+    filteredData = [];
+    searchTerm = '';
+    hasChanges = false;
+    pendingChanges = [];
+    // Icons
+    fileIcon = fileIcon;
+    folderIcon = folderIcon;
+    calendarIcon = calendarIcon;
+    checkboxCheckedIcon = checkboxCheckedIcon;
+    listUnorderedIcon = listUnorderedIcon;
+    // Enum reference
+    AttributeValueTypeDto = AttributeValueTypeDto;
+    ngOnInit() {
+        this.updateFilteredData();
+    }
+    ngOnChanges(changes) {
+        if (changes['data']) {
+            this.updateFilteredData();
+            this.hasChanges = false;
+            this.pendingChanges = [];
+        }
+    }
+    get gridHeight() {
+        const baseHeight = this.config.height || '400px';
+        const searchHeight = this.config.showSearch ? 40 : 0;
+        const toolbarHeight = !this.config.readOnlyMode ? 50 : 0;
+        const totalOffset = searchHeight + toolbarHeight;
+        if (baseHeight.includes('px')) {
+            const px = parseInt(baseHeight) - totalOffset;
+            return `${Math.max(px, 200)}px`;
+        }
+        return baseHeight;
+    }
+    /**
+     * Update filtered data based on search term
+     */
+    updateFilteredData() {
+        if (!this.searchTerm.trim()) {
+            this.filteredData = [...this.data];
+            return;
+        }
+        const term = this.searchTerm.toLowerCase();
+        this.filteredData = this.data.filter(item => item.name.toLowerCase().includes(term) ||
+            (item.displayName?.toLowerCase().includes(term)) ||
+            (item.description?.toLowerCase().includes(term)) ||
+            String(item.value).toLowerCase().includes(term));
+    }
+    /**
+     * Handle search input
+     */
+    onSearch() {
+        this.updateFilteredData();
+    }
+    /**
+     * Get appropriate icon for property type
+     */
+    getTypeIcon(type) {
+        switch (type) {
+            case AttributeValueTypeDto.BooleanDto:
+                return checkboxCheckedIcon;
+            case AttributeValueTypeDto.IntDto:
+            case AttributeValueTypeDto.IntegerDto:
+            case AttributeValueTypeDto.DoubleDto:
+                return fileIcon;
+            case AttributeValueTypeDto.DateTimeDto:
+            case AttributeValueTypeDto.DateTimeOffsetDto:
+                return calendarIcon;
+            case AttributeValueTypeDto.StringArrayDto:
+            case AttributeValueTypeDto.IntegerArrayDto:
+                return listUnorderedIcon;
+            case AttributeValueTypeDto.RecordDto:
+            case AttributeValueTypeDto.RecordArrayDto:
+                return folderIcon;
+            default:
+                return fileIcon;
+        }
+    }
+    /**
+     * Format type name for display
+     */
+    formatTypeName(type) {
+        return type.replace('_DTO', '').replace('DTO', '').replace('_', ' ');
+    }
+    /**
+     * Save pending changes
+     */
+    saveChanges() {
+        if (this.pendingChanges.length > 0) {
+            const updatedData = this.data.map(item => {
+                const change = this.pendingChanges.find(c => c.property.id === item.id);
+                return change ? { ...item, value: change.newValue } : item;
+            });
+            this.saveRequested.emit(updatedData);
+            this.hasChanges = false;
+            this.pendingChanges = [];
+        }
+    }
+    /**
+     * Discard pending changes
+     */
+    discardChanges() {
+        this.hasChanges = false;
+        this.pendingChanges = [];
+        this.updateFilteredData();
+    }
+    /**
+     * Handle property value change
+     */
+    onPropertyChange(property, oldValue, newValue) {
+        const changeEvent = {
+            property,
+            oldValue,
+            newValue
+        };
+        // Update or add to pending changes
+        const existingIndex = this.pendingChanges.findIndex(c => c.property.id === property.id);
+        if (existingIndex >= 0) {
+            this.pendingChanges[existingIndex] = changeEvent;
+        }
+        else {
+            this.pendingChanges.push(changeEvent);
+        }
+        this.hasChanges = this.pendingChanges.length > 0;
+        this.propertyChange.emit(changeEvent);
+    }
+    /**
+     * Handle binary download request from property value display
+     */
+    onBinaryDownload(event) {
+        this.binaryDownload.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PropertyGridComponent, isStandalone: true, selector: "mm-property-grid", inputs: { data: "data", config: "config", showTypeColumn: "showTypeColumn" }, outputs: { propertyChange: "propertyChange", saveRequested: "saveRequested", binaryDownload: "binaryDownload" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="mm-property-grid" [style.height]="config.height || '400px'">
+
+      @if (config.showSearch) {
+        <div class="search-toolbar">
+          <kendo-textbox
+            [(ngModel)]="searchTerm"
+            placeholder="Search attributes..."
+            (input)="onSearch()"
+            [clearButton]="true">
+          </kendo-textbox>
+        </div>
+      }
+
+      <kendo-grid
+        [data]="filteredData"
+        [sortable]="true"
+        [resizable]="true"
+        [style.height]="gridHeight"
+        [selectable]="{mode: 'single'}"
+        class="property-grid">
+
+        <!-- Property Name Column -->
+        <kendo-grid-column
+          field="displayName"
+          title="Property"
+          [width]="200"
+          [sortable]="true">
+          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+            <div class="property-name-cell">
+              @if (config.showTypeIcons !== false) {
+                <kendo-svgicon
+                  [icon]="getTypeIcon(dataItem.type)"
+                  class="type-icon">
+                </kendo-svgicon>
+              }
+              <div class="property-info">
+                <span class="property-name" [title]="dataItem.description">
+                  {{ dataItem.displayName || dataItem.name }}
+                </span>
+                @if (dataItem.required) {
+                  <span class="required-indicator">*</span>
+                }
+                @if (dataItem.readOnly) {
+                  <span class="readonly-indicator" title="Read-only">🔒</span>
+                }
+              </div>
+            </div>
+          </ng-template>
+        </kendo-grid-column>
 
-        @if (isComplexType() && !isExpandableRecord()) {
-          <span class="type-indicator" [title]="getTypeDescription()">
-            {{ getTypeIndicator() }}
-          </span>
+        <!-- Property Value Column -->
+        <kendo-grid-column
+          field="value"
+          title="Value"
+          [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+            <mm-property-value-display
+              [value]="dataItem.value"
+              [type]="dataItem.type"
+              (binaryDownload)="onBinaryDownload($event)">
+            </mm-property-value-display>
+          </ng-template>
+        </kendo-grid-column>
+
+        <!-- Type Column (optional) -->
+        @if (showTypeColumn) {
+          <kendo-grid-column
+            field="type"
+            title="Type"
+            [width]="120"
+            [sortable]="true">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="type-badge" [ngClass]="'type-' + dataItem.type.toLowerCase()">
+                {{ formatTypeName(dataItem.type) }}
+              </span>
+            </ng-template>
+          </kendo-grid-column>
         }
-      }
+
+      </kendo-grid>
     </div>
-  `, isInline: true, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;min-height:20px;font-family:inherit;width:100%}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.record-header:hover{background:var(--kendo-color-base-subtle)}.expand-icon{width:16px;height:16px;flex-shrink:0;transition:transform .2s}.record-summary{flex:1;font-size:.9em}.record-content{margin-left:22px;margin-top:8px;border-left:2px solid var(--kendo-color-border);padding-left:12px;background:var(--kendo-color-base-subtle);border-radius:0 4px 4px 0}.nested-properties{display:flex;flex-direction:column;gap:6px;padding:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;min-height:24px}.property-key{font-weight:500;color:var(--kendo-color-primary);min-width:100px;flex-shrink:0;font-size:.9em}.array-item{border:1px solid var(--kendo-color-border);border-radius:4px;margin-bottom:8px;background:transparent}.array-index{display:inline-block;background:var(--kendo-color-primary);color:#fff;padding:2px 8px;font-size:.8em;font-weight:700;border-radius:4px 0;margin-bottom:4px}.json-display{font-family:Courier New,monospace;font-size:12px;margin:0;padding:4px 8px;background:var(--kendo-color-base-subtle);border-radius:4px;max-width:300px;overflow:auto}.text-display,.default-display{flex:1;word-break:break-word;overflow-wrap:anywhere}.type-boolean .default-display{font-weight:500}.type-boolean .default-display.value-true{color:#28a745}.type-boolean .default-display.value-false{color:#dc3545}:is(.type-datetime,.type-datetimeoffset) .default-display{font-family:monospace;font-size:.9em}:is(.type-int,.type-integer,.type-double) .default-display{font-family:monospace;text-align:right}.type-indicator{font-size:.75em;padding:2px 6px;background:var(--kendo-color-primary);color:#fff;border-radius:3px;text-transform:uppercase;font-weight:500;flex-shrink:0}.empty-value{color:var(--kendo-color-subtle);font-style:italic}.null-value{color:var(--kendo-color-error);font-style:italic}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;color:var(--kendo-color-on-app-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.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"] }] });
+  `, isInline: true, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$1.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i2$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i2$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i4.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: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyValueDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-property-value-display', standalone: true, imports: [CommonModule, SVGIconModule, ButtonModule], template: `
-    <div class="property-value-display" [ngClass]="'type-' + type.toLowerCase()">
+            args: [{ selector: 'mm-property-grid', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        GridModule,
+                        InputsModule,
+                        DropDownsModule,
+                        ButtonsModule,
+                        SVGIconModule,
+                        PropertyValueDisplayComponent
+                    ], template: `
+    <div class="mm-property-grid" [style.height]="config.height || '400px'">
 
-      @if (isExpandableRecord()) {
-        <div class="expandable-record">
-          <!-- Expand/Collapse Button and Summary -->
-          <div class="record-header" (click)="toggleExpansion()">
-            <kendo-svgicon
-              [icon]="isExpanded ? chevronDownIcon : chevronRightIcon"
-              class="expand-icon">
-            </kendo-svgicon>
-            <span class="record-summary">{{ getRecordSummary() }}</span>
-            <span class="type-indicator" [title]="getTypeDescription()">
-              {{ getTypeIndicator() }}
-            </span>
-          </div>
+      @if (config.showSearch) {
+        <div class="search-toolbar">
+          <kendo-textbox
+            [(ngModel)]="searchTerm"
+            placeholder="Search attributes..."
+            (input)="onSearch()"
+            [clearButton]="true">
+          </kendo-textbox>
+        </div>
+      }
 
-          <!-- Expanded Content -->
-          @if (isExpanded) {
-            <div class="record-content">
-              @if (type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(value)) {
-                @for (item of value; track $index) {
-                  <div class="array-item">
-                    <span class="array-index">[{{ $index }}]</span>
-                    <div class="nested-properties">
-                      @for (prop of getObjectProperties(item); track prop.key) {
-                        <div class="nested-property">
-                          <span class="property-key">{{ prop.key }}:</span>
-                          <mm-property-value-display
-                            [value]="prop.value"
-                            [type]="getPropertyType(prop.value)">
-                          </mm-property-value-display>
-                        </div>
-                      }
-                    </div>
-                  </div>
-                }
-              } @else {
-                <div class="nested-properties">
-                  @for (prop of getObjectProperties(value); track prop.key) {
-                    <div class="nested-property">
-                      <span class="property-key">{{ prop.key }}:</span>
-                      <mm-property-value-display
-                        [value]="prop.value"
-                        [type]="getPropertyType(prop.value)">
-                      </mm-property-value-display>
-                    </div>
-                  }
-                </div>
+      <kendo-grid
+        [data]="filteredData"
+        [sortable]="true"
+        [resizable]="true"
+        [style.height]="gridHeight"
+        [selectable]="{mode: 'single'}"
+        class="property-grid">
+
+        <!-- Property Name Column -->
+        <kendo-grid-column
+          field="displayName"
+          title="Property"
+          [width]="200"
+          [sortable]="true">
+          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+            <div class="property-name-cell">
+              @if (config.showTypeIcons !== false) {
+                <kendo-svgicon
+                  [icon]="getTypeIcon(dataItem.type)"
+                  class="type-icon">
+                </kendo-svgicon>
               }
+              <div class="property-info">
+                <span class="property-name" [title]="dataItem.description">
+                  {{ dataItem.displayName || dataItem.name }}
+                </span>
+                @if (dataItem.required) {
+                  <span class="required-indicator">*</span>
+                }
+                @if (dataItem.readOnly) {
+                  <span class="readonly-indicator" title="Read-only">🔒</span>
+                }
+              </div>
             </div>
-          }
-        </div>
-      } @else if (isBinaryLinkedWithDownload()) {
-        <!-- Binary Linked with download capability -->
-        <div class="binary-linked-display">
-          <div class="binary-info">
-            @if (getBinaryFilename()) {
-              <span class="filename">{{ getBinaryFilename() }}</span>
-            }
-            @if (getBinarySize()) {
-              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
-            }
-            @if (getBinaryContentType()) {
-              <span class="content-type">{{ getBinaryContentType() }}</span>
-            }
-          </div>
-          <button
-            kendoButton
-            size="small"
-            fillMode="flat"
-            [svgIcon]="downloadIcon"
-            title="Download file"
-            (click)="onDownload()">
-            Download
-          </button>
-        </div>
-      } @else {
-        <!-- Non-expandable value display -->
-        @switch (displayMode) {
-          @case (PropertyDisplayMode.Json) {
-            <pre class="json-display">{{ getFormattedValue() }}</pre>
-          }
-          @case (PropertyDisplayMode.Text) {
-            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
-          }
-          @default {
-            <span class="default-display">{{ getFormattedValue() }}</span>
-          }
-        }
+          </ng-template>
+        </kendo-grid-column>
 
-        @if (isComplexType() && !isExpandableRecord()) {
-          <span class="type-indicator" [title]="getTypeDescription()">
-            {{ getTypeIndicator() }}
-          </span>
+        <!-- Property Value Column -->
+        <kendo-grid-column
+          field="value"
+          title="Value"
+          [sortable]="false">
+          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+            <mm-property-value-display
+              [value]="dataItem.value"
+              [type]="dataItem.type"
+              (binaryDownload)="onBinaryDownload($event)">
+            </mm-property-value-display>
+          </ng-template>
+        </kendo-grid-column>
+
+        <!-- Type Column (optional) -->
+        @if (showTypeColumn) {
+          <kendo-grid-column
+            field="type"
+            title="Type"
+            [width]="120"
+            [sortable]="true">
+            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
+              <span class="type-badge" [ngClass]="'type-' + dataItem.type.toLowerCase()">
+                {{ formatTypeName(dataItem.type) }}
+              </span>
+            </ng-template>
+          </kendo-grid-column>
         }
-      }
+
+      </kendo-grid>
     </div>
-  `, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;min-height:20px;font-family:inherit;width:100%}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.record-header:hover{background:var(--kendo-color-base-subtle)}.expand-icon{width:16px;height:16px;flex-shrink:0;transition:transform .2s}.record-summary{flex:1;font-size:.9em}.record-content{margin-left:22px;margin-top:8px;border-left:2px solid var(--kendo-color-border);padding-left:12px;background:var(--kendo-color-base-subtle);border-radius:0 4px 4px 0}.nested-properties{display:flex;flex-direction:column;gap:6px;padding:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;min-height:24px}.property-key{font-weight:500;color:var(--kendo-color-primary);min-width:100px;flex-shrink:0;font-size:.9em}.array-item{border:1px solid var(--kendo-color-border);border-radius:4px;margin-bottom:8px;background:transparent}.array-index{display:inline-block;background:var(--kendo-color-primary);color:#fff;padding:2px 8px;font-size:.8em;font-weight:700;border-radius:4px 0;margin-bottom:4px}.json-display{font-family:Courier New,monospace;font-size:12px;margin:0;padding:4px 8px;background:var(--kendo-color-base-subtle);border-radius:4px;max-width:300px;overflow:auto}.text-display,.default-display{flex:1;word-break:break-word;overflow-wrap:anywhere}.type-boolean .default-display{font-weight:500}.type-boolean .default-display.value-true{color:#28a745}.type-boolean .default-display.value-false{color:#dc3545}:is(.type-datetime,.type-datetimeoffset) .default-display{font-family:monospace;font-size:.9em}:is(.type-int,.type-integer,.type-double) .default-display{font-family:monospace;text-align:right}.type-indicator{font-size:.75em;padding:2px 6px;background:var(--kendo-color-primary);color:#fff;border-radius:3px;text-transform:uppercase;font-weight:500;flex-shrink:0}.empty-value{color:var(--kendo-color-subtle);font-style:italic}.null-value{color:var(--kendo-color-error);font-style:italic}.binary-linked-display{display:flex;align-items:center;gap:12px;width:100%}.binary-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.filename{font-weight:500;color:var(--kendo-color-on-app-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.85em;color:var(--kendo-color-subtle);flex-shrink:0}.content-type{font-size:.75em;padding:2px 6px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);flex-shrink:0}\n"] }]
-        }], propDecorators: { value: [{
+  `, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"] }]
+        }], propDecorators: { data: [{
                 type: Input
-            }], type: [{
+            }], config: [{
                 type: Input
-            }], displayMode: [{
+            }], showTypeColumn: [{
                 type: Input
+            }], propertyChange: [{
+                type: Output
+            }], saveRequested: [{
+                type: Output
             }], binaryDownload: [{
                 type: Output
             }] } });
 
-/**
- * Generic property grid component for OctoMesh
- */
-class PropertyGridComponent {
-    data = [];
-    config = {};
-    showTypeColumn = false;
-    propertyChange = new EventEmitter();
-    saveRequested = new EventEmitter();
-    binaryDownload = new EventEmitter();
-    // Component state
-    filteredData = [];
-    searchTerm = '';
-    hasChanges = false;
-    pendingChanges = [];
-    // Icons
-    fileIcon = fileIcon;
-    folderIcon = folderIcon;
-    calendarIcon = calendarIcon;
-    checkboxCheckedIcon = checkboxCheckedIcon;
-    listUnorderedIcon = listUnorderedIcon;
-    // Enum reference
-    AttributeValueTypeDto = AttributeValueTypeDto;
-    ngOnInit() {
-        this.updateFilteredData();
+// Models
+
+class CkTypeSelectorDialogComponent extends DialogContentBase {
+    ckTypeSelectorService = inject(CkTypeSelectorService);
+    searchSubject = new Subject();
+    subscriptions = new Subscription();
+    searchIcon = searchIcon;
+    filterClearIcon = filterClearIcon;
+    dialogTitle = 'Select Construction Kit Type';
+    allowAbstract = false;
+    searchText = '';
+    selectedModel = null;
+    availableModels = [];
+    gridData = { data: [], total: 0 };
+    isLoading = false;
+    pageSize = 50;
+    skip = 0;
+    selectedKeys = [];
+    selectedType = null;
+    // Selection key function - returns fullName as unique identifier
+    selectItemBy = (context) => context.dataItem.fullName;
+    initialCkModelIds;
+    constructor() {
+        super(inject(DialogRef));
     }
-    ngOnChanges(changes) {
-        if (changes['data']) {
-            this.updateFilteredData();
-            this.hasChanges = false;
-            this.pendingChanges = [];
+    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;
+            if (data.selectedCkTypeId) {
+                this.selectedKeys = [data.selectedCkTypeId];
+            }
         }
+        // Set up search debouncing
+        this.subscriptions.add(this.searchSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
+            this.skip = 0;
+            this.loadTypes();
+        }));
+        // Load initial types and extract available models
+        this.loadTypes();
+        this.loadAvailableModels();
     }
-    get gridHeight() {
-        const baseHeight = this.config.height || '400px';
-        const searchHeight = this.config.showSearch ? 40 : 0;
-        const toolbarHeight = !this.config.readOnlyMode ? 50 : 0;
-        const totalOffset = searchHeight + toolbarHeight;
-        if (baseHeight.includes('px')) {
-            const px = parseInt(baseHeight) - totalOffset;
-            return `${Math.max(px, 200)}px`;
-        }
-        return baseHeight;
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    /**
-     * Update filtered data based on search term
-     */
-    updateFilteredData() {
-        if (!this.searchTerm.trim()) {
-            this.filteredData = [...this.data];
-            return;
-        }
-        const term = this.searchTerm.toLowerCase();
-        this.filteredData = this.data.filter(item => item.name.toLowerCase().includes(term) ||
-            (item.displayName?.toLowerCase().includes(term)) ||
-            (item.description?.toLowerCase().includes(term)) ||
-            String(item.value).toLowerCase().includes(term));
+    loadTypes() {
+        this.isLoading = true;
+        const ckModelIds = this.selectedModel
+            ? [this.selectedModel]
+            : this.initialCkModelIds;
+        this.subscriptions.add(this.ckTypeSelectorService.getCkTypes({
+            ckModelIds,
+            searchText: this.searchText || undefined,
+            first: this.pageSize,
+            skip: this.skip
+        }).subscribe({
+            next: result => {
+                this.gridData = {
+                    data: result.items,
+                    total: result.totalCount
+                };
+                // Restore selection if exists
+                if (this.selectedKeys.length > 0) {
+                    const selectedItem = result.items.find(item => item.fullName === this.selectedKeys[0]);
+                    if (selectedItem) {
+                        this.selectedType = selectedItem;
+                    }
+                }
+                this.isLoading = false;
+            },
+            error: () => {
+                this.isLoading = false;
+                this.gridData = { data: [], total: 0 };
+            }
+        }));
     }
-    /**
-     * Handle search input
-     */
-    onSearch() {
-        this.updateFilteredData();
+    loadAvailableModels() {
+        // Load all types to extract unique models
+        this.subscriptions.add(this.ckTypeSelectorService.getCkTypes({
+            first: 1000
+        }).subscribe(result => {
+            const modelSet = new Set();
+            result.items.forEach(item => {
+                // Extract model from fullName (format: "ModelName-Version/TypeName-Version")
+                const modelMatch = item.fullName.match(/^([^/]+)\//);
+                if (modelMatch) {
+                    modelSet.add(modelMatch[1]);
+                }
+            });
+            this.availableModels = Array.from(modelSet).sort();
+        }));
     }
-    /**
-     * Get appropriate icon for property type
-     */
-    getTypeIcon(type) {
-        switch (type) {
-            case AttributeValueTypeDto.BooleanDto:
-                return checkboxCheckedIcon;
-            case AttributeValueTypeDto.IntDto:
-            case AttributeValueTypeDto.IntegerDto:
-            case AttributeValueTypeDto.DoubleDto:
-                return fileIcon;
-            case AttributeValueTypeDto.DateTimeDto:
-            case AttributeValueTypeDto.DateTimeOffsetDto:
-                return calendarIcon;
-            case AttributeValueTypeDto.StringArrayDto:
-            case AttributeValueTypeDto.IntegerArrayDto:
-                return listUnorderedIcon;
-            case AttributeValueTypeDto.RecordDto:
-            case AttributeValueTypeDto.RecordArrayDto:
-                return folderIcon;
-            default:
-                return fileIcon;
-        }
+    onSearchChange(value) {
+        this.searchSubject.next(value);
     }
-    /**
-     * Format type name for display
-     */
-    formatTypeName(type) {
-        return type.replace('_DTO', '').replace('DTO', '').replace('_', ' ');
+    onModelFilterChange(_value) {
+        this.skip = 0;
+        this.loadTypes();
     }
-    /**
-     * Save pending changes
-     */
-    saveChanges() {
-        if (this.pendingChanges.length > 0) {
-            const updatedData = this.data.map(item => {
-                const change = this.pendingChanges.find(c => c.property.id === item.id);
-                return change ? { ...item, value: change.newValue } : item;
-            });
-            this.saveRequested.emit(updatedData);
-            this.hasChanges = false;
-            this.pendingChanges = [];
-        }
+    clearFilters() {
+        this.searchText = '';
+        this.selectedModel = null;
+        this.skip = 0;
+        this.loadTypes();
     }
-    /**
-     * Discard pending changes
-     */
-    discardChanges() {
-        this.hasChanges = false;
-        this.pendingChanges = [];
-        this.updateFilteredData();
+    onPageChange(event) {
+        this.skip = event.skip;
+        this.pageSize = event.take;
+        this.loadTypes();
     }
-    /**
-     * Handle property value change
-     */
-    onPropertyChange(property, oldValue, newValue) {
-        const changeEvent = {
-            property,
-            oldValue,
-            newValue
-        };
-        // Update or add to pending changes
-        const existingIndex = this.pendingChanges.findIndex(c => c.property.id === property.id);
-        if (existingIndex >= 0) {
-            this.pendingChanges[existingIndex] = changeEvent;
+    onSelectionChange(event) {
+        const selectedItems = event.selectedRows;
+        if (selectedItems && selectedItems.length > 0) {
+            this.selectedType = selectedItems[0].dataItem;
         }
         else {
-            this.pendingChanges.push(changeEvent);
+            this.selectedType = null;
         }
-        this.hasChanges = this.pendingChanges.length > 0;
-        this.propertyChange.emit(changeEvent);
     }
-    /**
-     * Handle binary download request from property value display
-     */
-    onBinaryDownload(event) {
-        this.binaryDownload.emit(event);
+    onCancel() {
+        this.dialog.close();
+    }
+    onConfirm() {
+        if (this.selectedType) {
+            const result = {
+                selectedCkType: this.selectedType
+            };
+            this.dialog.close(result);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PropertyGridComponent, isStandalone: true, selector: "mm-property-grid", inputs: { data: "data", config: "config", showTypeColumn: "showTypeColumn" }, outputs: { propertyChange: "propertyChange", saveRequested: "saveRequested", binaryDownload: "binaryDownload" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="mm-property-grid" [style.height]="config.height || '400px'">
-
-      @if (config.showSearch) {
-        <div class="search-toolbar">
-          <kendo-textbox
-            [(ngModel)]="searchTerm"
-            placeholder="Search attributes..."
-            (input)="onSearch()"
-            [clearButton]="true">
-          </kendo-textbox>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: CkTypeSelectorDialogComponent, isStandalone: true, selector: "mm-ck-type-selector-dialog", usesInheritance: true, ngImport: i0, template: `
+    <div class="ck-type-selector-container">
+      <div class="filter-container">
+        <div class="filter-row">
+          <div class="filter-item">
+            <label>Model Filter</label>
+            <kendo-combobox
+              [data]="availableModels"
+              [(ngModel)]="selectedModel"
+              (valueChange)="onModelFilterChange($event)"
+              [allowCustom]="false"
+              [clearButton]="true"
+              placeholder="All Models"
+              class="filter-input">
+            </kendo-combobox>
+          </div>
+          <div class="filter-item flex-grow">
+            <label>Type Search</label>
+            <kendo-textbox
+              [(ngModel)]="searchText"
+              (ngModelChange)="onSearchChange($event)"
+              placeholder="Search types..."
+              class="filter-input">
+              <ng-template kendoTextBoxSuffixTemplate>
+                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" size="small"></button>
+              </ng-template>
+            </kendo-textbox>
+          </div>
+          <div class="filter-item filter-actions">
+            <label>&nbsp;</label>
+            <button kendoButton [svgIcon]="filterClearIcon" (click)="clearFilters()" title="Clear filters"></button>
+          </div>
         </div>
-      }
-
-      <kendo-grid
-        [data]="filteredData"
-        [sortable]="true"
-        [resizable]="true"
-        [style.height]="gridHeight"
-        [selectable]="{mode: 'single'}"
-        class="property-grid">
-
-        <!-- Property Name Column -->
-        <kendo-grid-column
-          field="displayName"
-          title="Property"
-          [width]="200"
-          [sortable]="true">
-          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-            <div class="property-name-cell">
-              @if (config.showTypeIcons !== false) {
-                <kendo-svgicon
-                  [icon]="getTypeIcon(dataItem.type)"
-                  class="type-icon">
-                </kendo-svgicon>
-              }
-              <div class="property-info">
-                <span class="property-name" [title]="dataItem.description">
-                  {{ dataItem.displayName || dataItem.name }}
-                </span>
-                @if (dataItem.required) {
-                  <span class="required-indicator">*</span>
-                }
-                @if (dataItem.readOnly) {
-                  <span class="readonly-indicator" title="Read-only">🔒</span>
-                }
-              </div>
-            </div>
-          </ng-template>
-        </kendo-grid-column>
-
-        <!-- Property Value Column -->
-        <kendo-grid-column
-          field="value"
-          title="Value"
-          [sortable]="false">
-          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-            <mm-property-value-display
-              [value]="dataItem.value"
-              [type]="dataItem.type"
-              (binaryDownload)="onBinaryDownload($event)">
-            </mm-property-value-display>
-          </ng-template>
-        </kendo-grid-column>
+      </div>
 
-        <!-- Type Column (optional) -->
-        @if (showTypeColumn) {
-          <kendo-grid-column
-            field="type"
-            title="Type"
-            [width]="120"
-            [sortable]="true">
-            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-              <span class="type-badge" [ngClass]="'type-' + dataItem.type.toLowerCase()">
-                {{ formatTypeName(dataItem.type) }}
+      <div class="grid-container">
+        <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)"
+          [kendoGridSelectBy]="selectItemBy"
+          [(selectedKeys)]="selectedKeys"
+          class="type-grid">
+          <kendo-grid-column field="rtCkTypeId" title="Type" [width]="300">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <span [class.abstract-type]="dataItem.isAbstract" [class.final-type]="dataItem.isFinal">
+                {{ dataItem.rtCkTypeId }}
               </span>
+              <span *ngIf="dataItem.isAbstract" class="type-badge abstract">abstract</span>
+              <span *ngIf="dataItem.isFinal" class="type-badge final">final</span>
             </ng-template>
           </kendo-grid-column>
-        }
+          <kendo-grid-column field="baseTypeRtCkTypeId" title="Base Type" [width]="200">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              {{ dataItem.baseTypeRtCkTypeId || '-' }}
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="description" title="Description">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              {{ dataItem.description || '-' }}
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      </div>
 
-      </kendo-grid>
+      <div class="selection-info" *ngIf="selectedType">
+        <strong>Selected:</strong> {{ selectedType.rtCkTypeId }}
+      </div>
     </div>
-  `, isInline: true, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2$1.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i2$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i2$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i4.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: "ngmodule", type: DropDownsModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i5$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode"], outputs: ["binaryDownload"] }] });
+
+    <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: i2$1.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", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$1.SelectionDirective, selector: "[kendoGridSelectBy]" }, { kind: "component", type: i2$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterVariant", "filterable", "editable"] }, { kind: "directive", type: i2$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i3.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: i4.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: i4.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: i5.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PropertyGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-property-grid', standalone: true, imports: [
+            args: [{ selector: 'mm-ck-type-selector-dialog', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         GridModule,
+                        ButtonsModule,
                         InputsModule,
                         DropDownsModule,
-                        ButtonsModule,
-                        SVGIconModule,
-                        PropertyValueDisplayComponent
+                        IconsModule,
+                        LoaderModule,
+                        DialogModule
                     ], template: `
-    <div class="mm-property-grid" [style.height]="config.height || '400px'">
-
-      @if (config.showSearch) {
-        <div class="search-toolbar">
-          <kendo-textbox
-            [(ngModel)]="searchTerm"
-            placeholder="Search attributes..."
-            (input)="onSearch()"
-            [clearButton]="true">
-          </kendo-textbox>
-        </div>
-      }
-
-      <kendo-grid
-        [data]="filteredData"
-        [sortable]="true"
-        [resizable]="true"
-        [style.height]="gridHeight"
-        [selectable]="{mode: 'single'}"
-        class="property-grid">
-
-        <!-- Property Name Column -->
-        <kendo-grid-column
-          field="displayName"
-          title="Property"
-          [width]="200"
-          [sortable]="true">
-          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-            <div class="property-name-cell">
-              @if (config.showTypeIcons !== false) {
-                <kendo-svgicon
-                  [icon]="getTypeIcon(dataItem.type)"
-                  class="type-icon">
-                </kendo-svgicon>
-              }
-              <div class="property-info">
-                <span class="property-name" [title]="dataItem.description">
-                  {{ dataItem.displayName || dataItem.name }}
-                </span>
-                @if (dataItem.required) {
-                  <span class="required-indicator">*</span>
-                }
-                @if (dataItem.readOnly) {
-                  <span class="readonly-indicator" title="Read-only">🔒</span>
-                }
-              </div>
-            </div>
-          </ng-template>
-        </kendo-grid-column>
-
-        <!-- Property Value Column -->
-        <kendo-grid-column
-          field="value"
-          title="Value"
-          [sortable]="false">
-          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-            <mm-property-value-display
-              [value]="dataItem.value"
-              [type]="dataItem.type"
-              (binaryDownload)="onBinaryDownload($event)">
-            </mm-property-value-display>
-          </ng-template>
-        </kendo-grid-column>
+    <div class="ck-type-selector-container">
+      <div class="filter-container">
+        <div class="filter-row">
+          <div class="filter-item">
+            <label>Model Filter</label>
+            <kendo-combobox
+              [data]="availableModels"
+              [(ngModel)]="selectedModel"
+              (valueChange)="onModelFilterChange($event)"
+              [allowCustom]="false"
+              [clearButton]="true"
+              placeholder="All Models"
+              class="filter-input">
+            </kendo-combobox>
+          </div>
+          <div class="filter-item flex-grow">
+            <label>Type Search</label>
+            <kendo-textbox
+              [(ngModel)]="searchText"
+              (ngModelChange)="onSearchChange($event)"
+              placeholder="Search types..."
+              class="filter-input">
+              <ng-template kendoTextBoxSuffixTemplate>
+                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" size="small"></button>
+              </ng-template>
+            </kendo-textbox>
+          </div>
+          <div class="filter-item filter-actions">
+            <label>&nbsp;</label>
+            <button kendoButton [svgIcon]="filterClearIcon" (click)="clearFilters()" title="Clear filters"></button>
+          </div>
+        </div>
+      </div>
 
-        <!-- Type Column (optional) -->
-        @if (showTypeColumn) {
-          <kendo-grid-column
-            field="type"
-            title="Type"
-            [width]="120"
-            [sortable]="true">
-            <ng-template kendoGridCellTemplate let-dataItem="dataItem">
-              <span class="type-badge" [ngClass]="'type-' + dataItem.type.toLowerCase()">
-                {{ formatTypeName(dataItem.type) }}
+      <div class="grid-container">
+        <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)"
+          [kendoGridSelectBy]="selectItemBy"
+          [(selectedKeys)]="selectedKeys"
+          class="type-grid">
+          <kendo-grid-column field="rtCkTypeId" title="Type" [width]="300">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              <span [class.abstract-type]="dataItem.isAbstract" [class.final-type]="dataItem.isFinal">
+                {{ dataItem.rtCkTypeId }}
               </span>
+              <span *ngIf="dataItem.isAbstract" class="type-badge abstract">abstract</span>
+              <span *ngIf="dataItem.isFinal" class="type-badge final">final</span>
             </ng-template>
           </kendo-grid-column>
-        }
+          <kendo-grid-column field="baseTypeRtCkTypeId" title="Base Type" [width]="200">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              {{ dataItem.baseTypeRtCkTypeId || '-' }}
+            </ng-template>
+          </kendo-grid-column>
+          <kendo-grid-column field="description" title="Description">
+            <ng-template kendoGridCellTemplate let-dataItem>
+              {{ dataItem.description || '-' }}
+            </ng-template>
+          </kendo-grid-column>
+        </kendo-grid>
+      </div>
 
-      </kendo-grid>
+      <div class="selection-info" *ngIf="selectedType">
+        <strong>Selected:</strong> {{ selectedType.rtCkTypeId }}
+      </div>
     </div>
-  `, styles: [".mm-property-grid{display:flex;flex-direction:column;border:1px solid var(--kendo-color-border);border-radius:4px;overflow:hidden}.search-toolbar{padding:8px;border-bottom:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle)}.property-grid{flex:1;border:none}.property-name-cell{display:flex;align-items:center;gap:8px;min-height:24px}.type-icon{width:16px;height:16px;opacity:.7}.property-info{display:flex;align-items:center;gap:4px;flex:1}.property-name{font-weight:500}.required-indicator{color:var(--kendo-color-error);font-weight:700}.readonly-indicator{font-size:12px;opacity:.7}.property-editor{width:100%;min-width:200px}.validation-error{color:var(--kendo-color-error);font-size:.8em;margin-top:4px}.type-badge{font-size:.75em;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500;background:var(--kendo-color-base-subtle);color:var(--kendo-color-on-base)}.grid-toolbar{padding:8px;border-top:1px solid var(--kendo-color-border);background:var(--kendo-color-base-subtle);display:flex;align-items:center;gap:8px}.changes-indicator{margin-left:auto;font-size:.9em;color:var(--kendo-color-primary);font-style:italic}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], showTypeColumn: [{
-                type: Input
-            }], propertyChange: [{
-                type: Output
-            }], saveRequested: [{
-                type: Output
-            }], binaryDownload: [{
-                type: Output
-            }] } });
 
-// Models
+    <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: () => [] });
+
+class CkTypeSelectorDialogService {
+    dialogService = inject(DialogService);
+    /**
+     * Opens the CkType selector dialog
+     * @param options Dialog options
+     * @returns Promise that resolves with the result containing selected CkType and confirmation status
+     */
+    async openCkTypeSelector(options = {}) {
+        const data = {
+            selectedCkTypeId: options.selectedCkTypeId,
+            ckModelIds: options.ckModelIds,
+            dialogTitle: options.dialogTitle,
+            allowAbstract: options.allowAbstract
+        };
+        const dialogRef = this.dialogService.open({
+            content: CkTypeSelectorDialogComponent,
+            width: 900,
+            height: 650,
+            minWidth: 750,
+            minHeight: 550,
+            title: options.dialogTitle || 'Select Construction Kit Type'
+        });
+        // Pass data to the component
+        if (dialogRef.content?.instance) {
+            dialogRef.content.instance.data = data;
+        }
+        try {
+            const result = await firstValueFrom(dialogRef.result);
+            if (result && typeof result === 'object' && 'selectedCkType' in result) {
+                // User clicked OK and we have a result
+                const dialogResult = result;
+                return {
+                    confirmed: true,
+                    selectedCkType: dialogResult.selectedCkType
+                };
+            }
+            else {
+                // User clicked Cancel or closed dialog
+                return {
+                    confirmed: false,
+                    selectedCkType: null
+                };
+            }
+        }
+        catch {
+            // Dialog was closed without result (e.g., ESC key, X button)
+            return {
+                confirmed: false,
+                selectedCkType: null
+            };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CkTypeSelectorDialogService, decorators: [{
+            type: Injectable
+        }] });
+
+// noinspection JSUnusedGlobalSymbols
+class OctoGraphQlDataSource extends DataSourceTyped {
+    _searchFilterAttributePaths = [];
+    // noinspection JSUnusedGlobalSymbols
+    constructor(listViewComponent) {
+        super(listViewComponent);
+    }
+    get searchFilterAttributePaths() {
+        return this._searchFilterAttributePaths;
+    }
+    set searchFilterAttributePaths(value) {
+        this._searchFilterAttributePaths = value;
+    }
+    // noinspection JSUnusedGlobalSymbols
+    getFieldFilterDefinitions(state) {
+        let fieldFilters = null;
+        if (state.filter?.filters) {
+            fieldFilters = state.filter.filters.map((f) => {
+                if (isCompositeFilterDescriptor(f)) {
+                    throw new Error('Composite filter descriptor not supported');
+                }
+                const { operator, value } = OctoGraphQlDataSource.getOperatorAndValue(f.operator, f.value);
+                return {
+                    attributePath: f.field,
+                    operator: operator,
+                    comparisonValue: value
+                };
+            });
+        }
+        return fieldFilters;
+    }
+    // noinspection JSUnusedGlobalSymbols
+    getSearchFilterDefinitions(textSearchValue) {
+        let searchFilterDto = null;
+        if (textSearchValue) {
+            searchFilterDto = {
+                type: SearchFilterTypesDto.AttributeFilterDto,
+                attributePaths: this.searchFilterAttributePaths,
+                searchTerm: textSearchValue,
+            };
+        }
+        return searchFilterDto;
+    }
+    // noinspection JSUnusedGlobalSymbols
+    getSortDefinitions(state) {
+        let sort = null;
+        if (state.sort) {
+            sort = new Array();
+            state.sort.forEach((s) => {
+                switch (s.dir) {
+                    case 'asc':
+                        sort?.push({
+                            attributePath: s.field,
+                            sortOrder: SortOrdersDto.AscendingDto
+                        });
+                        break;
+                    case 'desc':
+                        sort?.push({
+                            attributePath: s.field,
+                            sortOrder: SortOrdersDto.DescendingDto,
+                        });
+                        break;
+                    default:
+                        sort?.push({
+                            attributePath: s.field,
+                            sortOrder: SortOrdersDto.DefaultDto,
+                        });
+                        break;
+                }
+            });
+        }
+        return sort;
+    }
+    static getOperatorAndValue(operator, value) {
+        switch (operator) {
+            case 'eq':
+                return { operator: FieldFilterOperatorsDto.EqualsDto, value: value };
+            case 'neq':
+                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: value };
+            case 'lt':
+                return { operator: FieldFilterOperatorsDto.LessThanDto, value: value };
+            case 'lte':
+                return { operator: FieldFilterOperatorsDto.LessEqualThanDto, value: value };
+            case 'gt':
+                return { operator: FieldFilterOperatorsDto.GreaterThanDto, value: value };
+            case 'gte':
+                return { operator: FieldFilterOperatorsDto.GreaterEqualThanDto, value: value };
+            case 'contains':
+                return { operator: FieldFilterOperatorsDto.LikeDto, value: value };
+            case 'doesnotcontain':
+                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: `^(?!.*${value}).*$` };
+            case 'startswith':
+                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: value + '.*' };
+            case 'endswith':
+                return { operator: FieldFilterOperatorsDto.MatchRegExDto, value: '.*' + value };
+            case 'isnull':
+                return { operator: FieldFilterOperatorsDto.EqualsDto, value: null };
+            case 'isnotnull':
+                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: null };
+            case 'isempty':
+                return { operator: FieldFilterOperatorsDto.EqualsDto, value: "" };
+            case 'isnotempty':
+                return { operator: FieldFilterOperatorsDto.NotEqualsDto, value: "" };
+            default:
+                throw new Error('The filter operator is not supported');
+        }
+    }
+}
+
+class OctoGraphQlHierarchyDataSource extends HierarchyDataSourceBase {
+}
 
 class AttributeSelectorDialogComponent extends DialogContentBase {
     attributeService = inject(AttributeSelectorService);
@@ -4202,6 +4202,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Animated OctoMesh logo loader component.
+ * Displays the OctoMesh octopus SVG with a tentacle wave animation,
+ * gentle bob, and pulsing glow effect.
+ *
+ * Uses `--kendo-color-primary` for theme-independent coloring.
+ * Override the color via CSS `color` property on the host element.
+ *
+ * @example
+ * ```html
+ * <mm-octo-loader [size]="'medium'"></mm-octo-loader>
+ * <mm-octo-loader [size]="'small'"></mm-octo-loader>
+ * ```
+ */
+class OctoLoaderComponent {
+    size = 'medium';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OctoLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: OctoLoaderComponent, isStandalone: true, selector: "mm-octo-loader", inputs: { size: "size" }, ngImport: i0, template: `
+    <div class="octo-loader" [class.octo-loader--small]="size === 'small'" [class.octo-loader--medium]="size === 'medium'">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 97" class="octo-loader__svg" overflow="visible">
+        <!-- Body + head + outer arms -->
+        <polygon fill="currentColor"
+          points="58.19 72.13 53.34 72.13 53.34 52.74 63.04 52.74 63.04 43.04 63.04 38.19 63.04 28.49 67.89 0 43.64 4.24 34.01 4.24 14.61 4.24 0 4.24 0 18.79 0 28.49 0 40.61 0 52.74 9.7 52.74 9.7 72.13 4.85 72.13 4.85 67.28 0 67.28 0 72.13 0 76.98 4.85 76.98 14.55 76.98 14.55 72.13 14.55 52.74 14.55 52.13 14.55 47.89 4.85 47.89 4.85 43.04 4.85 36.37 4.85 23.64 4.85 17.58 4.85 9.09 19.4 9.09 33.94 9.09 43.64 9.09 62.01 6.02 58.19 28.49 58.19 33.34 58.19 38.19 58.19 43.04 58.19 47.89 48.49 47.89 48.49 52.13 48.49 52.74 48.49 72.13 48.49 76.98 58.19 76.98 63.04 76.98 63.04 76.98 63.04 67.28 58.19 67.28 58.19 72.13"/>
+        <!-- Eyes -->
+        <rect fill="currentColor" x="18.79" y="19.4" width="4.85" height="13.94"/>
+        <rect fill="currentColor" x="38.79" y="19.4" width="4.85" height="13.94"/>
+        <!-- Left tentacle pair -->
+        <polygon class="octo-leg octo-leg--left" fill="currentColor"
+          points="19.4 91.53 14.55 91.53 14.55 81.83 9.7 81.83 9.7 91.53 9.7 96.38 14.55 96.38 19.4 96.38 24.25 96.38 24.25 91.53 24.25 52.74 19.4 52.74 19.4 91.53"/>
+        <!-- Center tentacle -->
+        <rect class="octo-leg octo-leg--center" fill="currentColor"
+          x="29.1" y="52.74" width="4.85" height="33.94"/>
+        <!-- Right tentacle pair -->
+        <polygon class="octo-leg octo-leg--right" fill="currentColor"
+          points="48.49 91.53 43.64 91.53 43.64 52.74 38.79 52.74 38.79 91.53 38.79 96.38 43.64 96.38 48.49 96.38 53.34 96.38 53.34 91.53 53.34 81.83 48.49 81.83 48.49 91.53"/>
+      </svg>
+    </div>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;color:var(--kendo-color-primary, #64ceb9)}.octo-loader{display:inline-flex;align-items:center;justify-content:center;animation:octo-spin 6s ease-in-out infinite}.octo-loader--small .octo-loader__svg{width:24px;height:24px}.octo-loader--medium .octo-loader__svg{width:48px;height:48px}.octo-loader__svg{animation:octo-glow 6s ease-in-out infinite}.octo-leg{transform-box:fill-box;transform-origin:50% 0%}.octo-leg--left{animation:octo-wiggle-left 6s ease-in-out infinite}.octo-leg--center{animation:octo-wiggle-center 6s ease-in-out infinite}.octo-leg--right{animation:octo-wiggle-right 6s ease-in-out infinite}@keyframes octo-spin{0%{transform:rotate(0) scale(1)}5%{transform:rotate(0) scale(1)}15%{transform:rotate(360deg) scale(.85)}20%{transform:rotate(360deg) scale(1)}25%{transform:rotate(360deg) scale(1)}40%{transform:rotate(0) scale(.85)}45%{transform:rotate(0) scale(1)}to{transform:rotate(0) scale(1)}}@keyframes octo-glow{0%,5%{filter:drop-shadow(0 0 2px currentColor)}15%{filter:drop-shadow(0 0 14px currentColor)}20%,25%{filter:drop-shadow(0 0 6px currentColor)}40%{filter:drop-shadow(0 0 14px currentColor)}50%,to{filter:drop-shadow(0 0 2px currentColor)}}@keyframes octo-wiggle-left{0%,47%{transform:rotate(0)}50%{transform:rotate(12deg)}53%{transform:rotate(-10deg)}56%{transform:rotate(10deg)}59%{transform:rotate(-8deg)}62%{transform:rotate(6deg)}65%{transform:rotate(-3deg)}68%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes octo-wiggle-center{0%,48%{transform:rotate(0)}51%{transform:rotate(-10deg)}54%{transform:rotate(9deg)}57%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}63%{transform:rotate(-4deg)}66%{transform:rotate(2deg)}69%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes octo-wiggle-right{0%,49%{transform:rotate(0)}52%{transform:rotate(-12deg)}55%{transform:rotate(10deg)}58%{transform:rotate(-10deg)}61%{transform:rotate(8deg)}64%{transform:rotate(-6deg)}67%{transform:rotate(3deg)}70%{transform:rotate(0)}to{transform:rotate(0)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OctoLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-octo-loader', standalone: true, template: `
+    <div class="octo-loader" [class.octo-loader--small]="size === 'small'" [class.octo-loader--medium]="size === 'medium'">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 97" class="octo-loader__svg" overflow="visible">
+        <!-- Body + head + outer arms -->
+        <polygon fill="currentColor"
+          points="58.19 72.13 53.34 72.13 53.34 52.74 63.04 52.74 63.04 43.04 63.04 38.19 63.04 28.49 67.89 0 43.64 4.24 34.01 4.24 14.61 4.24 0 4.24 0 18.79 0 28.49 0 40.61 0 52.74 9.7 52.74 9.7 72.13 4.85 72.13 4.85 67.28 0 67.28 0 72.13 0 76.98 4.85 76.98 14.55 76.98 14.55 72.13 14.55 52.74 14.55 52.13 14.55 47.89 4.85 47.89 4.85 43.04 4.85 36.37 4.85 23.64 4.85 17.58 4.85 9.09 19.4 9.09 33.94 9.09 43.64 9.09 62.01 6.02 58.19 28.49 58.19 33.34 58.19 38.19 58.19 43.04 58.19 47.89 48.49 47.89 48.49 52.13 48.49 52.74 48.49 72.13 48.49 76.98 58.19 76.98 63.04 76.98 63.04 76.98 63.04 67.28 58.19 67.28 58.19 72.13"/>
+        <!-- Eyes -->
+        <rect fill="currentColor" x="18.79" y="19.4" width="4.85" height="13.94"/>
+        <rect fill="currentColor" x="38.79" y="19.4" width="4.85" height="13.94"/>
+        <!-- Left tentacle pair -->
+        <polygon class="octo-leg octo-leg--left" fill="currentColor"
+          points="19.4 91.53 14.55 91.53 14.55 81.83 9.7 81.83 9.7 91.53 9.7 96.38 14.55 96.38 19.4 96.38 24.25 96.38 24.25 91.53 24.25 52.74 19.4 52.74 19.4 91.53"/>
+        <!-- Center tentacle -->
+        <rect class="octo-leg octo-leg--center" fill="currentColor"
+          x="29.1" y="52.74" width="4.85" height="33.94"/>
+        <!-- Right tentacle pair -->
+        <polygon class="octo-leg octo-leg--right" fill="currentColor"
+          points="48.49 91.53 43.64 91.53 43.64 52.74 38.79 52.74 38.79 91.53 38.79 96.38 43.64 96.38 48.49 96.38 53.34 96.38 53.34 91.53 53.34 81.83 48.49 81.83 48.49 91.53"/>
+      </svg>
+    </div>
+  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;color:var(--kendo-color-primary, #64ceb9)}.octo-loader{display:inline-flex;align-items:center;justify-content:center;animation:octo-spin 6s ease-in-out infinite}.octo-loader--small .octo-loader__svg{width:24px;height:24px}.octo-loader--medium .octo-loader__svg{width:48px;height:48px}.octo-loader__svg{animation:octo-glow 6s ease-in-out infinite}.octo-leg{transform-box:fill-box;transform-origin:50% 0%}.octo-leg--left{animation:octo-wiggle-left 6s ease-in-out infinite}.octo-leg--center{animation:octo-wiggle-center 6s ease-in-out infinite}.octo-leg--right{animation:octo-wiggle-right 6s ease-in-out infinite}@keyframes octo-spin{0%{transform:rotate(0) scale(1)}5%{transform:rotate(0) scale(1)}15%{transform:rotate(360deg) scale(.85)}20%{transform:rotate(360deg) scale(1)}25%{transform:rotate(360deg) scale(1)}40%{transform:rotate(0) scale(.85)}45%{transform:rotate(0) scale(1)}to{transform:rotate(0) scale(1)}}@keyframes octo-glow{0%,5%{filter:drop-shadow(0 0 2px currentColor)}15%{filter:drop-shadow(0 0 14px currentColor)}20%,25%{filter:drop-shadow(0 0 6px currentColor)}40%{filter:drop-shadow(0 0 14px currentColor)}50%,to{filter:drop-shadow(0 0 2px currentColor)}}@keyframes octo-wiggle-left{0%,47%{transform:rotate(0)}50%{transform:rotate(12deg)}53%{transform:rotate(-10deg)}56%{transform:rotate(10deg)}59%{transform:rotate(-8deg)}62%{transform:rotate(6deg)}65%{transform:rotate(-3deg)}68%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes octo-wiggle-center{0%,48%{transform:rotate(0)}51%{transform:rotate(-10deg)}54%{transform:rotate(9deg)}57%{transform:rotate(-8deg)}60%{transform:rotate(7deg)}63%{transform:rotate(-4deg)}66%{transform:rotate(2deg)}69%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes octo-wiggle-right{0%,49%{transform:rotate(0)}52%{transform:rotate(-12deg)}55%{transform:rotate(10deg)}58%{transform:rotate(-10deg)}61%{transform:rotate(8deg)}64%{transform:rotate(-6deg)}67%{transform:rotate(3deg)}70%{transform:rotate(0)}to{transform:rotate(0)}}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of octo-ui
  */
@@ -4224,5 +4290,5 @@ function provideOctoUi() {
  * Generated bundle index. Do not edit.
  */
 
-export { AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DefaultPropertyCategory, EntityIdInfoComponent, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, provideOctoUi };
+export { AttributeSelectorDialogComponent, AttributeSelectorDialogService, AttributeSortSelectorDialogComponent, AttributeSortSelectorDialogService, AttributeValueTypeDto, CkTypeSelectorDialogComponent, CkTypeSelectorDialogService, CkTypeSelectorInputComponent, DefaultPropertyCategory, EntityIdInfoComponent, FieldFilterEditorComponent, OctoGraphQlDataSource, OctoGraphQlHierarchyDataSource, OctoLoaderComponent, PropertyConverterService, PropertyDisplayMode, PropertyGridComponent, PropertyValueDisplayComponent, provideOctoUi };
 //# sourceMappingURL=meshmakers-octo-ui.mjs.map