@meshmakers/octo-ui 3.3.760 → 3.3.780

package/fesm2022/meshmakers-octo-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, EventEmitter, Output, Input, ElementRef, forwardRef, ViewChild, signal, computed, Directive, input, output, effect, InjectionToken, HostListener, makeEnvironmentProviders } from '@angular/core';
+import { inject, Component, Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ElementRef, forwardRef, ViewChild, signal, computed, Directive, input, output, effect, InjectionToken, HostListener, makeEnvironmentProviders } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { AttributeSelectorService, AttributeValueTypeDto as AttributeValueTypeDto$1, CkTypeSelectorService, CkTypeAttributeService, GetEntitiesByCkTypeDtoGQL, RuntimeEntitySelectDataSource, RuntimeEntityDialogDataSource, SearchFilterTypesDto, SortOrdersDto, FieldFilterOperatorsDto, GraphDirectionDto, GraphQL, AssociationModOptionsDto, GetCkTypesDtoGQL, GetCkModelByIdDtoGQL, LevelMetaData, RtAssociationMetaData, CkTypeMetaData, provideOctoServices } from '@meshmakers/octo-services';
 import { Roles, provideMmSharedAuth } from '@meshmakers/shared-auth';
@@ -1487,6 +1487,18 @@ class PropertyValueDisplayComponent {
     binaryDownload = new EventEmitter();
     // Expansion state
     isExpanded = false;
+    // Pre-computed template properties (computed once in ngOnInit)
+    expandableRecord = false;
+    complexType = false;
+    binaryLinkedWithDownload = false;
+    formattedValue = '';
+    recordSummary = '';
+    typeIndicator = '';
+    typeDescription = '';
+    binaryFilename = null;
+    binarySize = null;
+    binaryContentType = null;
+    formattedBinarySize = '';
     PropertyDisplayMode = PropertyDisplayMode;
     AttributeValueTypeDto = AttributeValueTypeDto;
     Array = Array;
@@ -1494,19 +1506,22 @@ class PropertyValueDisplayComponent {
     chevronDownIcon = chevronDownIcon;
     downloadIcon = downloadIcon;
     ngOnInit() {
-        // Debug every property value display component creation
-        console.log('PropertyValueDisplayComponent ngOnInit:', {
-            type: this.type,
-            value: this.value,
-            valueType: typeof this.value,
-            valueStringified: JSON.stringify(this.value),
-            isExpandableRecord: this.isExpandableRecord()
-        });
-    }
-    /**
-     * Get formatted display value
-     */
-    getFormattedValue() {
+        this.expandableRecord = this.computeIsExpandableRecord();
+        this.complexType = this.computeIsComplexType();
+        this.binaryLinkedWithDownload = this.computeIsBinaryLinkedWithDownload();
+        this.formattedValue = this.computeFormattedValue();
+        this.recordSummary = this.computeRecordSummary();
+        this.typeIndicator = this.computeTypeIndicator();
+        this.typeDescription = this.computeTypeDescription();
+        if (this.binaryLinkedWithDownload) {
+            const bv = this.value;
+            this.binaryFilename = bv?.filename || null;
+            this.binarySize = bv?.size || null;
+            this.binaryContentType = bv?.contentType || null;
+            this.formattedBinarySize = this.formatFileSize(this.binarySize);
+        }
+    }
+    computeFormattedValue() {
         if (this.value === null) {
             return '<null>';
         }
@@ -1545,49 +1560,13 @@ class PropertyValueDisplayComponent {
                 return String(this.value);
         }
     }
-    /**
-     * Check if this is an expandable record type
-     */
-    isExpandableRecord() {
-        // Comprehensive debug logging
-        console.log('PropertyValueDisplay: isExpandableRecord check:', {
-            type: this.type,
-            typeString: String(this.type),
-            typeOf: typeof this.type,
-            AttributeValueTypeDtoRecordDto: AttributeValueTypeDto.RecordDto,
-            AttributeValueTypeDtoRecordArrayDto: AttributeValueTypeDto.RecordArrayDto,
-            typeIsRecordDto: this.type === AttributeValueTypeDto.RecordDto,
-            typeIsRecordDtoString: this.type === 'RECORD',
-            typeIsRecordArrayDto: this.type === AttributeValueTypeDto.RecordArrayDto,
-            value: this.value,
-            valueType: typeof this.value,
-            valueIsNull: this.value == null,
-            valueKeys: this.value && typeof this.value === 'object' ? Object.keys(this.value) : 'not object'
-        });
-        // Check for record types
-        const isRecordDto = this.type === AttributeValueTypeDto.RecordDto;
-        const isRecordArrayDto = this.type === AttributeValueTypeDto.RecordArrayDto;
-        const isRecordType = isRecordDto || isRecordArrayDto;
-        // Simple check: does it have a value?
-        const hasValue = this.value != null;
-        // Simple check: is it an object or array?
-        const isObjectLike = typeof this.value === 'object' && this.value != null;
-        const result = isRecordType && hasValue && isObjectLike;
-        console.log('PropertyValueDisplay: Expandable result:', {
-            isRecordDto,
-            isRecordArrayDto,
-            isRecordType,
-            hasValue,
-            isObjectLike,
-            finalResult: result
-        });
-        return result;
+    computeIsExpandableRecord() {
+        const isRecordType = this.type === AttributeValueTypeDto.RecordDto
+            || this.type === AttributeValueTypeDto.RecordArrayDto;
+        return isRecordType && this.value != null && typeof this.value === 'object';
     }
-    /**
-     * Check if the type is complex (object/array)
-     */
-    isComplexType() {
-        return [
+    computeIsComplexType() {
+        const isComplexDataType = [
             AttributeValueTypeDto.RecordDto,
             AttributeValueTypeDto.RecordArrayDto,
             AttributeValueTypeDto.StringArrayDto,
@@ -1596,11 +1575,13 @@ class PropertyValueDisplayComponent {
             AttributeValueTypeDto.BinaryDto,
             AttributeValueTypeDto.BinaryLinkedDto
         ].includes(this.type);
+        // Only show inline type indicator when the value is actually complex
+        // (not when a simple string is passed for a complex-typed property)
+        if (!isComplexDataType)
+            return false;
+        return this.value != null && typeof this.value === 'object';
     }
-    /**
-     * Get type indicator text
-     */
-    getTypeIndicator() {
+    computeTypeIndicator() {
         switch (this.type) {
             case AttributeValueTypeDto.RecordDto:
                 return 'RECORD';
@@ -1618,10 +1599,7 @@ class PropertyValueDisplayComponent {
                 return this.type.replace('_DTO', '').replace('DTO', '');
         }
     }
-    /**
-     * Get type description for tooltip
-     */
-    getTypeDescription() {
+    computeTypeDescription() {
         switch (this.type) {
             case AttributeValueTypeDto.RecordDto:
                 return 'Complex object';
@@ -1723,14 +1701,13 @@ class PropertyValueDisplayComponent {
         this.isExpanded = !this.isExpanded;
     }
     /**
-     * Get summary text for record header
+     * Compute summary text for record header
      */
-    getRecordSummary() {
+    computeRecordSummary() {
         if (this.type === AttributeValueTypeDto.RecordArrayDto && Array.isArray(this.value)) {
             return `Array with ${this.value.length} item${this.value.length !== 1 ? 's' : ''}`;
         }
         if (typeof this.value === 'object' && this.value !== null) {
-            // Handle regular objects
             const keys = Object.keys(this.value);
             return `Object with ${keys.length} propert${keys.length !== 1 ? 'ies' : 'y'}`;
         }
@@ -1744,13 +1721,11 @@ class PropertyValueDisplayComponent {
             return [];
         }
         if (Array.isArray(obj) && obj.length > 0 && typeof obj[0] === 'object' && obj[0] !== null && 'id' in obj[0] && obj[0].id === 'ckRecordId') {
-            // Handle array of records
             return obj.map((item) => ({
                 key: String(item['name']),
                 value: item['value']
             }));
         }
-        // Handle regular objects
         const record = obj;
         return Object.keys(record).map(key => ({
             key,
@@ -1771,7 +1746,6 @@ class PropertyValueDisplayComponent {
             return Number.isInteger(value) ? AttributeValueTypeDto.IntegerDto : AttributeValueTypeDto.DoubleDto;
         }
         if (typeof value === 'string') {
-            // Check if it looks like a date
             if (value.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
                 return AttributeValueTypeDto.DateTimeDto;
             }
@@ -1790,48 +1764,17 @@ class PropertyValueDisplayComponent {
             if (value.length > 0 && typeof value[0] === 'number') {
                 return AttributeValueTypeDto.IntegerArrayDto;
             }
-            return AttributeValueTypeDto.StringArrayDto; // fallback
+            return AttributeValueTypeDto.StringArrayDto;
         }
         return AttributeValueTypeDto.StringDto;
     }
     // ========== Binary Linked Methods ==========
-    /**
-     * Check if this is a BINARY_LINKED type with download capability
-     */
-    isBinaryLinkedWithDownload() {
+    computeIsBinaryLinkedWithDownload() {
         if (this.type !== AttributeValueTypeDto.BinaryLinkedDto) {
             return false;
         }
-        // Check if value has binaryId or downloadUri (LargeBinaryInfo structure)
         return !!this.value && typeof this.value === 'object' && ('binaryId' in this.value || 'downloadUri' in this.value);
     }
-    /**
-     * Get the filename from binary info
-     */
-    getBinaryFilename() {
-        if (!this.value || typeof this.value !== 'object') {
-            return null;
-        }
-        return this.value.filename || null;
-    }
-    /**
-     * Get the file size from binary info
-     */
-    getBinarySize() {
-        if (!this.value || typeof this.value !== 'object') {
-            return null;
-        }
-        return this.value.size || null;
-    }
-    /**
-     * Get the content type from binary info
-     */
-    getBinaryContentType() {
-        if (!this.value || typeof this.value !== 'object') {
-            return null;
-        }
-        return this.value.contentType || null;
-    }
     /**
      * Format file size to human readable format
      */
@@ -1853,16 +1796,13 @@ class PropertyValueDisplayComponent {
      */
     onDownload() {
         if (!this.value || typeof this.value !== 'object') {
-            console.warn('No binary value available');
             return;
         }
         const binaryValue = this.value;
-        // If downloadUri is available, open directly
         if (binaryValue.downloadUri) {
             window.open(binaryValue.downloadUri, '_blank', 'noopener,noreferrer');
             return;
         }
-        // Otherwise, emit event for parent to handle (needs to load downloadUri)
         if (binaryValue.binaryId) {
             const event = {
                 binaryId: binaryValue.binaryId,
@@ -1871,15 +1811,12 @@ class PropertyValueDisplayComponent {
             };
             this.binaryDownload.emit(event);
         }
-        else {
-            console.warn('No binaryId or downloadUri available');
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PropertyValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: PropertyValueDisplayComponent, isStandalone: true, selector: "mm-property-value-display", inputs: { value: "value", type: "type", displayMode: "displayMode" }, outputs: { binaryDownload: "binaryDownload" }, ngImport: i0, template: `
     <div class="property-value-display" [ngClass]="'type-' + type.toLowerCase()">
 
-      @if (isExpandableRecord()) {
+      @if (expandableRecord) {
         <div class="expandable-record">
           <!-- Expand/Collapse Button and Summary -->
           <div class="record-header" (click)="toggleExpansion()">
@@ -1887,9 +1824,9 @@ class PropertyValueDisplayComponent {
               [icon]="isExpanded ? chevronDownIcon : chevronRightIcon"
               class="expand-icon">
             </kendo-svgicon>
-            <span class="record-summary">{{ getRecordSummary() }}</span>
-            <span class="type-indicator" [title]="getTypeDescription()">
-              {{ getTypeIndicator() }}
+            <span class="record-summary">{{ recordSummary }}</span>
+            <span class="type-indicator" [title]="typeDescription">
+              {{ typeIndicator }}
             </span>
           </div>
 
@@ -1929,18 +1866,18 @@ class PropertyValueDisplayComponent {
             </div>
           }
         </div>
-      } @else if (isBinaryLinkedWithDownload()) {
+      } @else if (binaryLinkedWithDownload) {
         <!-- Binary Linked with download capability -->
         <div class="binary-linked-display">
           <div class="binary-info">
-            @if (getBinaryFilename()) {
-              <span class="filename">{{ getBinaryFilename() }}</span>
+            @if (binaryFilename) {
+              <span class="filename">{{ binaryFilename }}</span>
             }
-            @if (getBinarySize()) {
-              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
+            @if (binarySize) {
+              <span class="file-size">({{ formattedBinarySize }})</span>
             }
-            @if (getBinaryContentType()) {
-              <span class="content-type">{{ getBinaryContentType() }}</span>
+            @if (binaryContentType) {
+              <span class="content-type">{{ binaryContentType }}</span>
             }
           </div>
           <button
@@ -1957,31 +1894,31 @@ class PropertyValueDisplayComponent {
         <!-- Non-expandable value display -->
         @switch (displayMode) {
           @case (PropertyDisplayMode.Json) {
-            <pre class="json-display">{{ getFormattedValue() }}</pre>
+            <pre class="json-display">{{ formattedValue }}</pre>
           }
           @case (PropertyDisplayMode.Text) {
-            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
+            <span class="text-display" [innerHTML]="formattedValue"></span>
           }
           @default {
-            <span class="default-display">{{ getFormattedValue() }}</span>
+            <span class="default-display">{{ formattedValue }}</span>
           }
         }
 
-        @if (isComplexType() && !isExpandableRecord()) {
-          <span class="type-indicator" [title]="getTypeDescription()">
-            {{ getTypeIndicator() }}
+        @if (complexType && !expandableRecord) {
+          <span class="type-indicator" [title]="typeDescription">
+            {{ typeIndicator }}
           </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$1.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$1.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: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.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;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$1.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$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PropertyValueDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-property-value-display', standalone: true, imports: [CommonModule, SVGIconModule, ButtonModule], template: `
+            args: [{ selector: 'mm-property-value-display', standalone: true, imports: [CommonModule, SVGIconModule, ButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="property-value-display" [ngClass]="'type-' + type.toLowerCase()">
 
-      @if (isExpandableRecord()) {
+      @if (expandableRecord) {
         <div class="expandable-record">
           <!-- Expand/Collapse Button and Summary -->
           <div class="record-header" (click)="toggleExpansion()">
@@ -1989,9 +1926,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
               [icon]="isExpanded ? chevronDownIcon : chevronRightIcon"
               class="expand-icon">
             </kendo-svgicon>
-            <span class="record-summary">{{ getRecordSummary() }}</span>
-            <span class="type-indicator" [title]="getTypeDescription()">
-              {{ getTypeIndicator() }}
+            <span class="record-summary">{{ recordSummary }}</span>
+            <span class="type-indicator" [title]="typeDescription">
+              {{ typeIndicator }}
             </span>
           </div>
 
@@ -2031,18 +1968,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             </div>
           }
         </div>
-      } @else if (isBinaryLinkedWithDownload()) {
+      } @else if (binaryLinkedWithDownload) {
         <!-- Binary Linked with download capability -->
         <div class="binary-linked-display">
           <div class="binary-info">
-            @if (getBinaryFilename()) {
-              <span class="filename">{{ getBinaryFilename() }}</span>
+            @if (binaryFilename) {
+              <span class="filename">{{ binaryFilename }}</span>
             }
-            @if (getBinarySize()) {
-              <span class="file-size">({{ formatFileSize(getBinarySize()) }})</span>
+            @if (binarySize) {
+              <span class="file-size">({{ formattedBinarySize }})</span>
             }
-            @if (getBinaryContentType()) {
-              <span class="content-type">{{ getBinaryContentType() }}</span>
+            @if (binaryContentType) {
+              <span class="content-type">{{ binaryContentType }}</span>
             }
           </div>
           <button
@@ -2059,24 +1996,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <!-- Non-expandable value display -->
         @switch (displayMode) {
           @case (PropertyDisplayMode.Json) {
-            <pre class="json-display">{{ getFormattedValue() }}</pre>
+            <pre class="json-display">{{ formattedValue }}</pre>
           }
           @case (PropertyDisplayMode.Text) {
-            <span class="text-display" [innerHTML]="getFormattedValue()"></span>
+            <span class="text-display" [innerHTML]="formattedValue"></span>
           }
           @default {
-            <span class="default-display">{{ getFormattedValue() }}</span>
+            <span class="default-display">{{ formattedValue }}</span>
           }
         }
 
-        @if (isComplexType() && !isExpandableRecord()) {
-          <span class="type-indicator" [title]="getTypeDescription()">
-            {{ getTypeIndicator() }}
+        @if (complexType && !expandableRecord) {
+          <span class="type-indicator" [title]="typeDescription">
+            {{ typeIndicator }}
           </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"] }]
+  `, styles: [".property-value-display{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}.text-display,.default-display{word-break:break-word;white-space:pre-wrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.json-display{font-family:Roboto Mono,monospace;font-size:.8em;white-space:pre-wrap;word-break:break-word;margin:0;flex:1;min-width:0}.type-indicator{font-family:Roboto Mono,monospace;font-size:.7em;padding:1px 5px;background:var(--kendo-color-base-subtle);border-radius:3px;color:var(--kendo-color-subtle);white-space:nowrap;flex-shrink:0}.expandable-record{width:100%}.record-header{display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0;border-radius:3px;transition:background-color .15s ease}.record-header:hover{background-color:var(--kendo-color-base-subtle, rgba(0,0,0,.04))}.expand-icon{flex-shrink:0;width:14px;height:14px;color:var(--kendo-color-subtle)}.record-summary{color:var(--kendo-color-subtle);font-size:.85em;font-style:italic;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-content{margin-left:20px;padding-left:8px;border-left:1px solid var(--kendo-color-border, #dee2e6)}.array-item{margin:4px 0}.array-index{font-family:Roboto Mono,monospace;font-size:.8em;color:var(--kendo-color-subtle)}.nested-properties{margin-left:8px}.nested-property{display:flex;align-items:flex-start;gap:8px;padding:2px 0}.property-key{font-weight:500;white-space:nowrap;flex-shrink:0;color:var(--kendo-color-subtle);font-size:.85em}.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;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: [{