@acorex/cdk 20.2.0-next.13 → 20.2.0-next.15

package/common/index.d.ts

@@ -996,8 +996,8 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
      */
     private createCacheKey;
     /**
-     * Normalizes currently selected items and updates the data service
-     */
+  * Normalizes currently selected items and updates the data service
+  */
     private _normalizeSelectedItems;
     /**
      * Unselects the specified items from the selection
@@ -1026,6 +1026,12 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
      * @returns True if the item is disabled
      */
     isItemDisabled(item: T): boolean;
+    /**
+     * Checks if an item is currently loading
+     * @param item Item to check
+     * @returns True if the item is loading
+     */
+    isItemLoading(item: T): boolean;
     /**
      * Gets the display text for an item using template or text field
      * @param item Item to get display text for
@@ -1046,6 +1052,25 @@ declare abstract class MXSelectionValueComponent<T = unknown> extends MXValueCom
      * Clears only the cache while preserving selected items
      */
     protected softClearSelectionCache(): void;
+    /**
+     * Clears the debouncing cache for specific items to ensure fresh data is displayed
+     */
+    protected clearItemDebouncingCache(item: T): void;
+    /**
+     * Forces a refresh of the display when items are loaded asynchronously
+     * This should be called when the data source is updated
+     */
+    protected refreshDisplay(): void;
+    /**
+     * Refreshes the display for all selected items to ensure consistency
+     * This is useful when the data source has been updated
+     */
+    protected refreshSelectedItemsDisplay(): void;
+    /**
+     * Forces a refresh of all selected items by clearing their debouncing cache
+     * This ensures fresh data is displayed when the data source is updated
+     */
+    protected forceRefreshSelectedItems(): void;
     /**
      * Asynchronously loads an item by its key and caches the result
      * @param key Key to load item by

package/fesm2022/acorex-cdk-common.mjs

@@ -1806,9 +1806,15 @@ class MXSelectionValueComponent extends MXValueComponent {
         if (value == null || (isArray && value.length === 0)) {
             return this.multiple ? [] : null;
         }
-        // Normalize items and find by key if needed
+        // Check if items already have text properties to avoid unnecessary findByKey calls
         const itemsToNormalize = isArray ? value : [value];
-        const normalizedItems = this.normalizeItemsList(itemsToNormalize, true);
+        const needsFindByKey = itemsToNormalize.some(item => {
+            if (typeof item === 'object' && item !== null) {
+                return get(item, this.textField) == null;
+            }
+            return true; // Primitive values need findByKey
+        });
+        const normalizedItems = this.normalizeItemsList(itemsToNormalize, needsFindByKey);
         if (normalizedItems.length === 0) {
             return this.multiple ? [] : null;
         }
@@ -1858,13 +1864,14 @@ class MXSelectionValueComponent extends MXValueComponent {
         }
         const hasTextProperty = !isComplexObject || get(itemRecord, this.textField) != null;
         const normalizedObj = {};
-        if (isComplexObject && hasTextProperty) {
-            // Item already has all required properties
-            Object.assign(normalizedObj, item);
+        // If findByKey is true, we need to resolve the item to get its text
+        // This is needed for string values like 'ir', 'us' that don't have text
+        if (findByKey) {
+            this.handleItemNormalization(normalizedObj, item, key, true, cacheKey);
         }
         else {
-            // Need to find or create item properties
-            this.handleItemNormalization(normalizedObj, item, key, findByKey, cacheKey);
+            // Item already has all required properties, just copy them
+            Object.assign(normalizedObj, item);
         }
         this.dataService.cacheList[cacheKey] = normalizedObj;
         return normalizedObj;
@@ -1891,7 +1898,7 @@ class MXSelectionValueComponent extends MXValueComponent {
         // Set loading state
         obj[this.valueField] = key;
         obj['isLoading'] = true;
-        obj[this.textField] = 'Loading';
+        obj[this.textField] = 'Loading...';
         promise
             .then(result => {
             if (typeof result === 'object' && result) {
@@ -1901,11 +1908,23 @@ class MXSelectionValueComponent extends MXValueComponent {
                 obj[this.valueField] = result || key;
                 obj[this.textField] = result;
             }
+        })
+            .catch(error => {
+            console.warn('Failed to load item by key:', key, error);
+            // On error, keep the original value but mark as failed
+            obj[this.textField] = this.defaultText;
         })
             .finally(() => {
             delete obj['isLoading'];
+            delete obj['_displayTextLoading'];
+            delete obj['_loadingTriggered'];
             this.dataService.cacheList[cacheKey] = obj;
-            this.cdr.markForCheck();
+            // Use setTimeout to defer change detection and prevent immediate re-rendering
+            setTimeout(() => {
+                if (this.cdr) {
+                    this.cdr.markForCheck();
+                }
+            }, 0);
         });
     }
     /**
@@ -1934,13 +1953,19 @@ class MXSelectionValueComponent extends MXValueComponent {
         return `k-${key}`;
     }
     /**
-     * Normalizes currently selected items and updates the data service
-     */
+  * Normalizes currently selected items and updates the data service
+  */
     _normalizeSelectedItems() {
         const values = Array.isArray(this.value)
             ? this.value
             : this.value != null ? [this.value] : [];
-        this.dataService.selectedItems = values.map(value => this.normalizeItem(value));
+        // Only call normalizeItem with findByKey=true if the item doesn't have text
+        // This prevents unnecessary API calls for items that already have text
+        this.dataService.selectedItems = values.map(value => {
+            const hasText = typeof value === 'object' && value !== null &&
+                get(value, this.textField) != null;
+            return this.normalizeItem(value, !hasText);
+        });
     }
     // #endregion
     // #region Public Selection Methods
@@ -2017,6 +2042,15 @@ class MXSelectionValueComponent extends MXValueComponent {
             coerceBooleanProperty(get(itemRecord, this.disabledField)) === true ||
             (this.disabledCallback?.({ item, index: -1 }) ?? false));
     }
+    /**
+     * Checks if an item is currently loading
+     * @param item Item to check
+     * @returns True if the item is loading
+     */
+    isItemLoading(item) {
+        const normalizedItem = this.normalizeItem(item);
+        return normalizedItem['isLoading'] === true;
+    }
     // #endregion
     // #region Protected Utility Methods
     /**
@@ -2025,26 +2059,108 @@ class MXSelectionValueComponent extends MXValueComponent {
      * @returns Formatted display text
      */
     getDisplayText(item) {
-        const normalizedItem = this.normalizeItem(item);
+        // Prevent recursive calls that could cause infinite loops
+        if (item && typeof item === 'object' && item['_displayTextLoading']) {
+            return 'Loading...';
+        }
+        // Add timestamp-based debouncing to prevent excessive calls for ALL item types
+        const now = Date.now();
+        const itemKey = typeof item === 'string' ? item : get(item, this.valueField);
+        const cacheKey = this.createCacheKey(String(itemKey));
+        // Check if we have a recent result in the cache to prevent duplicate processing
+        const cachedResult = this.dataService.cacheList[cacheKey];
+        if (cachedResult && cachedResult['_lastDisplayTextCall']) {
+            const timeSinceLastCall = now - cachedResult['_lastDisplayTextCall'];
+            if (timeSinceLastCall < 50) { // 50ms debounce
+                return cachedResult['_lastDisplayTextResult'] || String(itemKey || '');
+            }
+        }
+        // For string values, we need to normalize with findByKey=true to trigger async loading
+        const isStringValue = typeof item === 'string';
+        const normalizedItem = this.normalizeItem(item, isStringValue);
+        // Check if this item is already in the cache with proper text
+        const itemValue = get(normalizedItem, this.valueField);
+        if (itemValue != null && itemValue !== '') {
+            const cacheKey = this.createCacheKey(String(itemValue));
+            const cachedItem = this.dataService.cacheList[cacheKey];
+            if (cachedItem && get(cachedItem, this.textField) != null) {
+                // Use cached text if available
+                const cachedText = get(cachedItem, this.textField);
+                if (cachedText && cachedText !== 'Loading...') {
+                    const result = String(cachedText);
+                    // Cache the timestamp and result for debouncing in the cache (works for all item types)
+                    if (cachedItem) {
+                        cachedItem['_lastDisplayTextCall'] = now;
+                        cachedItem['_lastDisplayTextResult'] = result;
+                    }
+                    return result;
+                }
+            }
+        }
         // Try template formatting first
         if (this.textTemplate) {
             const formattedTemplate = this.formatService.format(this.textTemplate, 'string', normalizedItem);
             if (formattedTemplate !== this.textTemplate) {
-                return formattedTemplate;
+                const result = formattedTemplate;
+                // Cache the timestamp and result for debouncing in the cache
+                if (normalizedItem) {
+                    normalizedItem['_lastDisplayTextCall'] = now;
+                    normalizedItem['_lastDisplayTextResult'] = result;
+                }
+                return result;
             }
         }
         // Use text field or fallback to value field
         const textValue = get(normalizedItem, this.textField);
         if (textValue != null && textValue !== '') {
-            return String(textValue);
+            const result = String(textValue);
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
+        }
+        // If text is missing and item is loading, show loading state
+        if (normalizedItem['isLoading']) {
+            const result = 'Loading...';
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
         }
         // Attempt to load item by key if text is missing
         const value = get(normalizedItem, this.valueField);
         if (value == null || value === '') {
-            return this.defaultText;
+            const result = this.defaultText;
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
         }
-        this.loadAndCacheItemByKey(value);
-        return String(value);
+        // If we have a value but no text, trigger async loading only once
+        // Use a flag to prevent multiple calls
+        if (!normalizedItem['_loadingTriggered'] && !normalizedItem[this.textField]) {
+            normalizedItem['_loadingTriggered'] = true;
+            normalizedItem['_displayTextLoading'] = true;
+            // Use setTimeout to defer the async loading and prevent immediate change detection
+            setTimeout(() => {
+                this.loadAndCacheItemByKey(value);
+            }, 0);
+        }
+        // Return the value itself as a fallback
+        // This will be updated once the async loading completes
+        const result = String(value);
+        // Cache the timestamp and result for debouncing in the cache
+        if (normalizedItem) {
+            normalizedItem['_lastDisplayTextCall'] = now;
+            normalizedItem['_lastDisplayTextResult'] = result;
+        }
+        return result;
     }
     /**
      * Gets the value of an item
@@ -2070,6 +2186,52 @@ class MXSelectionValueComponent extends MXValueComponent {
         this.dataService.cacheList = {};
         this.cdr.markForCheck();
     }
+    /**
+     * Clears the debouncing cache for specific items to ensure fresh data is displayed
+     */
+    clearItemDebouncingCache(item) {
+        // Get the cache key for this item
+        const itemKey = typeof item === 'string' ? item : get(item, this.valueField);
+        if (itemKey != null) {
+            const cacheKey = this.createCacheKey(String(itemKey));
+            const cachedItem = this.dataService.cacheList[cacheKey];
+            if (cachedItem) {
+                delete cachedItem['_lastDisplayTextCall'];
+                delete cachedItem['_lastDisplayTextResult'];
+                delete cachedItem['_displayTextLoading'];
+                delete cachedItem['_loadingTriggered'];
+            }
+        }
+    }
+    /**
+     * Forces a refresh of the display when items are loaded asynchronously
+     * This should be called when the data source is updated
+     */
+    refreshDisplay() {
+        this.cdr.markForCheck();
+    }
+    /**
+     * Refreshes the display for all selected items to ensure consistency
+     * This is useful when the data source has been updated
+     */
+    refreshSelectedItemsDisplay() {
+        // Force a refresh of the display without re-normalizing to avoid infinite loops
+        if (this.selectedItems.length > 0) {
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Forces a refresh of all selected items by clearing their debouncing cache
+     * This ensures fresh data is displayed when the data source is updated
+     */
+    forceRefreshSelectedItems() {
+        if (this.selectedItems.length > 0) {
+            this.selectedItems.forEach(item => {
+                this.clearItemDebouncingCache(item);
+            });
+            this.cdr.markForCheck();
+        }
+    }
     // #endregion
     // #region Private Helper Methods
     /**
@@ -2082,12 +2244,29 @@ class MXSelectionValueComponent extends MXValueComponent {
             if (item) {
                 const normalizedItem = this.normalizeItem(item);
                 const cacheKey = this.createCacheKey(String(normalizedItem[this.valueField]));
+                // Update the cache with the loaded item
                 this.dataService.cacheList[cacheKey] = normalizedItem;
-                this.cdr.markForCheck();
+                // Clear loading flags
+                if (this.dataService.cacheList[cacheKey]) {
+                    delete this.dataService.cacheList[cacheKey]['_displayTextLoading'];
+                    delete this.dataService.cacheList[cacheKey]['_loadingTriggered'];
+                }
+                // Use setTimeout to defer change detection and prevent immediate re-rendering
+                setTimeout(() => {
+                    if (this.cdr) {
+                        this.cdr.markForCheck();
+                    }
+                }, 0);
             }
         }
         catch (error) {
             console.warn('Failed to load item by key:', key, error);
+            // Clear loading flags on error too
+            const cacheKey = this.createCacheKey(String(key));
+            if (this.dataService.cacheList[cacheKey]) {
+                delete this.dataService.cacheList[cacheKey]['_displayTextLoading'];
+                delete this.dataService.cacheList[cacheKey]['_loadingTriggered'];
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }