ng-virtual-list 19.7.13 → 19.7.15

package/fesm2022/ng-virtual-list.mjs

@@ -161,6 +161,9 @@ class NgVirtualListService {
     set methodOfSelecting(v) {
         this._$methodOfSelecting.next(v);
     }
+    _$focusedId = new BehaviorSubject(null);
+    $focusedId = this._$focusedId.asObservable();
+    get focusedId() { return this._$focusedId.getValue(); }
     selectByClick = DEFAULT_SELECT_BY_CLICK;
     collapseByClick = DEFAULT_COLLAPSE_BY_CLICK;
     _trackBox;
@@ -311,6 +314,9 @@ class NgVirtualListService {
             this.itemToFocus?.(element, pos);
         }
     }
+    areaFocus(id) {
+        this._$focusedId.next(id);
+    }
     initialize(trackBox) {
         this._trackBox = trackBox;
     }
@@ -328,6 +334,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+const isUndefinable = (value) => {
+    return value === undefined;
+};
+const isNullable = (value) => {
+    return value === null;
+};
+/**
+ * Int validator
+ * @param value Int
+ */
+const validateInt = (value, undefinable = false) => {
+    return (undefinable && isUndefinable(value)) || !Number.isNaN(Number.parseInt(`${value}`));
+};
+/**
+ * Float validator
+ * @param value Float
+ */
+const validateFloat = (value, undefinable = false) => {
+    return (undefinable && isUndefinable(value)) || !Number.isNaN(Number.parseFloat(`${value}`));
+};
+/**
+ * String validator
+ * @param value String
+ */
+const validateString = (value, undefinable = false, nullable = false) => {
+    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'string';
+};
+/**
+ * Boolean validator
+ * @param value Boolean
+ */
+const validateBoolean = (value, undefinable = false) => {
+    return (undefinable && isUndefinable(value)) || typeof value === 'boolean';
+};
+/**
+ * Array validator
+ * @param value Array
+ */
+const validateArray = (value, undefinable = false, nullable = false) => {
+    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || Array.isArray(value);
+};
+/**
+ * Object validator
+ * @param value Object
+ */
+const validateObject = (value, undefinable = false, nullable = false) => {
+    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'object';
+};
+/**
+ * Function validator
+ * @param value Function
+ */
+const validateFunction = (value, undefinable = false, nullable = false) => {
+    return (undefinable && isUndefinable(value)) || (nullable && isNullable(value)) || typeof value === 'function';
+};
+
 const ATTR_AREA_SELECTED = 'area-selected', TABINDEX = 'ng-vl-index', KEY_SPACE = " ", KEY_ARR_LEFT = "ArrowLeft", KEY_ARR_UP = "ArrowUp", KEY_ARR_RIGHT = "ArrowRight", KEY_ARR_DOWN = "ArrowDown", EVENT_FOCUS_IN = 'focusin', EVENT_FOCUS_OUT = 'focusout', EVENT_KEY_DOWN = 'keydown';
 const getElementByIndex = (index) => {
     return `[${TABINDEX}="${index}"]`;
@@ -392,6 +454,11 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
      * @param selected - If the value is undefined, then the toggle method is executed, if false or true, then the selection/deselection is performed.
      */
     (selected = undefined) => {
+        const valid = validateBoolean(selected, true);
+        if (!valid) {
+            console.error('The "selected" parameter must be of type `boolean` or `undefined`.');
+            return;
+        }
         this._service.select(data, selected);
     };
     _collapseHandler = (data) => 
@@ -400,12 +467,21 @@ class NgVirtualListItemComponent extends BaseVirtualListItemComponent {
     * @param collapsed - If the value is undefined, then the toggle method is executed, if false or true, then the collapse/expand is performed.
     */
     (collapsed = undefined) => {
+        const valid = validateBoolean(collapsed, true);
+        if (!valid) {
+            console.error('The "collapsed" parameter must be of type `boolean` or `undefined`.');
+            return;
+        }
         this._service.collapse(data, collapsed);
     };
     constructor() {
         super();
         this._id = this._service.generateComponentId();
-        const $data = toObservable(this.data);
+        this._elementRef.nativeElement.setAttribute('id', String(this._id));
+        const $data = toObservable(this.data), $focus = toObservable(this.focus);
+        $focus.pipe(takeUntilDestroyed(), tap(v => {
+            this._service.areaFocus(v ? this._id : this._service.focusedId === this._id ? null : this._service.focusedId);
+        })).subscribe();
         fromEvent(this.element, EVENT_FOCUS_IN).pipe(takeUntilDestroyed(), tap(e => {
             this.focus.set(true);
             this.updateConfig(this._data);
@@ -1977,9 +2053,52 @@ const isMethodForSelecting = (src, expected) => {
     return MULTI_SELECT_ALIASES.includes(src);
 };
 
+const objectAsReadonly = (source) => {
+    if (!source) {
+        return source;
+    }
+    const result = {};
+    for (const prop in source) {
+        const value = source[prop];
+        Object.defineProperty(result, prop, {
+            value,
+            writable: false,
+            enumerable: true,
+        });
+    }
+    return result;
+};
+const copyValueAsReadonly = (source) => {
+    if (!source) {
+        return source;
+    }
+    if (Array.isArray(source)) {
+        return Object.freeze([...source]);
+    }
+    if (typeof source === 'object') {
+        return objectAsReadonly(source);
+    }
+    return source;
+};
+
 const ROLE_LIST = 'list', ROLE_LIST_BOX = 'listbox';
 const validateScrollIteration = (value) => {
     return Number.isNaN(value) || (value < 0) ? 0 : value > MAX_SCROLL_TO_ITERATIONS ? MAX_SCROLL_TO_ITERATIONS : value;
+}, validateId = (id) => {
+    const valid = validateString(id) || validateFloat(id);
+    if (!valid) {
+        throw Error('The "id" parameter must be of type `Id`.');
+    }
+}, validateScrollBehavior = (behavior) => {
+    const valid = validateString(behavior) && (behavior === 'auto' || behavior === 'instant' || behavior === 'smooth');
+    if (!valid) {
+        throw Error('The "behavior" parameter must have the value `auto`, `instant` or `smooth`.');
+    }
+}, validateIteration = (iteration) => {
+    const valid = validateInt(iteration, true);
+    if (!valid) {
+        throw Error('The "iteration" parameter must be of type `number`.');
+    }
 };
 /**
  * Virtual list component.
@@ -2028,7 +2147,25 @@ class NgVirtualListComponent {
     onCollapse = output();
     _itemsOptions = {
         transform: (v) => {
-            // etc
+            let valid = validateArray(v, true);
+            if (valid) {
+                if (v) {
+                    for (let i = 0, l = v.length; i < l; i++) {
+                        const item = v[i];
+                        valid = validateObject(item, true);
+                        if (valid) {
+                            if (item && !(validateFloat(item.id, true) || validateString(item.id, true))) {
+                                valid = false;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            if (!valid) {
+                console.error('The "items" parameter must be of type `IVirtualListCollection` or `undefined`.');
+                return [];
+            }
             return v;
         },
     };
@@ -2038,40 +2175,159 @@ class NgVirtualListComponent {
     items = input.required({
         ...this._itemsOptions,
     });
+    _selectedIdsOptions = {
+        transform: (v) => {
+            let valid = validateArray(v, true) || validateString(v, true) || validateFloat(v, true);
+            if (valid) {
+                if (v && Array.isArray(v)) {
+                    for (let i = 0, l = v.length; i < l; i++) {
+                        const item = v[i];
+                        valid = validateString(item) || validateFloat(item);
+                        if (!valid) {
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!valid) {
+                console.error('The "selectedIds" parameter must be of type `Array<Id> | Id` or `undefined`.');
+                return this._isMultiSelecting ? [] : undefined;
+            }
+            return v;
+        },
+    };
     /**
      * Sets the selected items.
      */
-    selectedIds = input(undefined);
+    selectedIds = input(undefined, { ...this._selectedIdsOptions });
+    _collapsedIdsOptions = {
+        transform: (v) => {
+            let valid = validateArray(v, true) || validateString(v, true) || validateFloat(v, true);
+            if (valid) {
+                if (v && Array.isArray(v)) {
+                    for (let i = 0, l = v.length; i < l; i++) {
+                        const item = v[i];
+                        valid = validateString(item) || validateFloat(item);
+                        if (!valid) {
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!valid) {
+                console.error('The "collapsedIds" parameter must be of type `Array<Id> | Id` or `undefined`.');
+                return [];
+            }
+            return v;
+        },
+    };
     /**
      * Sets the collapsed items.
      */
-    collapsedIds = input([]);
+    collapsedIds = input([], { ...this._collapsedIdsOptions });
+    _selectByClickOptions = {
+        transform: (v) => {
+            const valid = validateBoolean(v);
+            if (!valid) {
+                console.error('The "selectByClick" parameter must be of type `boolean`.');
+                return DEFAULT_SELECT_BY_CLICK;
+            }
+            return v;
+        },
+    };
     /**
      * If `false`, the element is selected using the config.select method passed to the template;
      * if `true`, the element is selected by clicking on it. The default value is `true`.
      */
-    selectByClick = input(DEFAULT_SELECT_BY_CLICK);
+    selectByClick = input(DEFAULT_SELECT_BY_CLICK, { ...this._selectByClickOptions });
+    _collapseByClickOptions = {
+        transform: (v) => {
+            const valid = validateBoolean(v);
+            if (!valid) {
+                console.error('The "collapseByClick" parameter must be of type `boolean`.');
+                return DEFAULT_COLLAPSE_BY_CLICK;
+            }
+            return v;
+        },
+    };
     /**
      * If `false`, the element is collapsed using the config.collapse method passed to the template;
      * if `true`, the element is collapsed by clicking on it. The default value is `true`.
      */
-    collapseByClick = input(DEFAULT_COLLAPSE_BY_CLICK);
+    collapseByClick = input(DEFAULT_COLLAPSE_BY_CLICK, { ...this._collapseByClickOptions });
+    _snapOptions = {
+        transform: (v) => {
+            const valid = validateBoolean(v);
+            if (!valid) {
+                console.error('The "snap" parameter must be of type `boolean`.');
+                return DEFAULT_SNAP;
+            }
+            return v;
+        },
+    };
     /**
      * Determines whether elements will snap. Default value is "true".
      */
-    snap = input(DEFAULT_SNAP);
+    snap = input(DEFAULT_SNAP, { ...this._snapOptions });
+    _enabledBufferOptimizationOptions = {
+        transform: (v) => {
+            const valid = validateBoolean(v);
+            if (!valid) {
+                console.error('The "enabledBufferOptimization" parameter must be of type `boolean`.');
+                return DEFAULT_ENABLED_BUFFER_OPTIMIZATION;
+            }
+            return v;
+        },
+    };
     /**
      * Experimental!
      * Enables buffer optimization.
      * Can only be used if items in the collection are not added or updated. Otherwise, artifacts in the form of twitching of the scroll area are possible.
      * Works only if the property dynamic = true
      */
-    enabledBufferOptimization = input(DEFAULT_ENABLED_BUFFER_OPTIMIZATION);
+    enabledBufferOptimization = input(DEFAULT_ENABLED_BUFFER_OPTIMIZATION, { ...this._enabledBufferOptimizationOptions });
+    _itemRendererOptions = {
+        transform: (v) => {
+            const valid = validateObject(v);
+            if (v) {
+                Object.hasOwn(v, 'elementRef');
+                Object.hasOwn(v, 'createEmbeddedView');
+            }
+            if (!valid) {
+                throw Error('The "itemRenderer" parameter must be of type `TemplateRef`.');
+            }
+            return v;
+        },
+    };
     /**
      * Rendering element template.
      */
-    itemRenderer = input.required();
+    itemRenderer = input.required({ ...this._itemRendererOptions });
     _itemRenderer = signal(undefined);
+    _itemConfigMapOptions = {
+        transform: (v) => {
+            let valid = validateObject(v);
+            if (valid) {
+                if (v) {
+                    for (let id in v) {
+                        const item = v[id];
+                        if (!item ||
+                            !validateBoolean(item.collapsable, true) ||
+                            !validateBoolean(item.selectable, true) ||
+                            !(item.sticky === undefined || item.sticky === 0 || item.sticky === 1 || item.sticky === 2)) {
+                            valid = false;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (!valid) {
+                console.error('The "itemConfigMap" parameter must be of type `IVirtualListItemConfigMap`.');
+                return {};
+            }
+            return v;
+        },
+    };
     /**
      * Sets `sticky` position, `collapsable` and `selectable` for the list item element. If `sticky` position is greater than `0`, then `sticky` position is applied.
      * If the `sticky` value is greater than `0`, then the `sticky` position mode is enabled for the element. `1` - position start, `2` - position end. Default value is `0`.
@@ -2081,14 +2337,15 @@ class NgVirtualListComponent {
      * @author Evgenii Grebennikov
      * @email djonnyx@gmail.com
      */
-    itemConfigMap = input({});
+    itemConfigMap = input({}, { ...this._itemConfigMapOptions });
     _itemSizeOptions = {
         transform: (v) => {
-            if (v === undefined) {
+            const valid = validateFloat(v);
+            if (!valid) {
+                console.error('The "itemSize" parameter must be of type `number` or `undefined`.');
                 return DEFAULT_ITEM_SIZE;
             }
-            const val = Number(v);
-            return Number.isNaN(val) || val <= 0 ? DEFAULT_ITEM_SIZE : val;
+            return v;
         },
     };
     /**
@@ -2096,26 +2353,62 @@ class NgVirtualListComponent {
      * Ignored if the dynamicSize property is true.
      */
     itemSize = input(DEFAULT_ITEM_SIZE, { ...this._itemSizeOptions });
+    _dynamicSizeOptions = {
+        transform: (v) => {
+            const valid = validateBoolean(v);
+            if (!valid) {
+                console.error('The "dynamicSize" parameter must be of type `boolean`.');
+                return DEFAULT_DYNAMIC_SIZE;
+            }
+            return v;
+        },
+    };
     /**
      * If true then the items in the list can have different sizes and the itemSize property is ignored.
      * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
      */
-    dynamicSize = input(DEFAULT_DYNAMIC_SIZE);
+    dynamicSize = input(DEFAULT_DYNAMIC_SIZE, { ...this._dynamicSizeOptions });
+    _directionOptions = {
+        transform: (v) => {
+            const valid = validateString(v) && (v === 'horizontal' || v === 'vertical');
+            if (!valid) {
+                console.error('The "direction" parameter must have the value `horizontal` or `vertical`.');
+                return DEFAULT_DIRECTION;
+            }
+            return v;
+        },
+    };
     /**
      * Determines the direction in which elements are placed. Default value is "vertical".
      */
-    direction = input(DEFAULT_DIRECTION);
+    direction = input(DEFAULT_DIRECTION, { ...this._directionOptions });
+    _bufferSizeOptions = {
+        transform: (v) => {
+            const valid = validateInt(v);
+            if (!valid) {
+                console.error('The "bufferSize" parameter must be of type `number`.');
+                return DEFAULT_BUFFER_SIZE;
+            }
+            return v;
+        },
+    };
     /**
      * Number of elements outside the scope of visibility. Default value is 2.
      */
-    bufferSize = input(DEFAULT_BUFFER_SIZE);
+    bufferSize = input(DEFAULT_BUFFER_SIZE, { ...this._bufferSizeOptions });
     _maxBufferSizeTransform = {
         transform: (v) => {
+            let val = v;
+            const valid = validateInt(v, true);
+            if (!valid) {
+                console.error('The "maxBufferSize" parameter must be of type `number`.');
+                val = DEFAULT_MAX_BUFFER_SIZE;
+            }
             const bufferSize = this.bufferSize();
-            if (v === undefined || v <= bufferSize) {
+            if (val === undefined || val <= bufferSize) {
                 return bufferSize;
             }
-            return v;
+            return val;
         }
     };
     /**
@@ -2124,19 +2417,53 @@ class NgVirtualListComponent {
      * The greater the scroll size, the more elements are allocated for rendering.
      */
     maxBufferSize = input(DEFAULT_MAX_BUFFER_SIZE, { ...this._maxBufferSizeTransform });
+    _snappingMethodOptions = {
+        transform: (v) => {
+            const valid = validateString(v) && (v === 'normal' || v === 'advanced');
+            if (!valid) {
+                console.error('The "snappingMethod" parameter must have the value `normal` or `advanced`.');
+                return DEFAULT_SNAPPING_METHOD;
+            }
+            return v;
+        },
+    };
     /**
      * Snapping method.
      * 'default' - Normal group rendering.
      * 'advanced' - The group is rendered on a transparent background. List items below the group are not rendered.
      */
-    snappingMethod = input(DEFAULT_SNAPPING_METHOD);
+    snappingMethod = input(DEFAULT_SNAPPING_METHOD, { ...this._snappingMethodOptions });
+    _methodForSelectingOptions = {
+        transform: (v) => {
+            const valid = validateString(v) && (v === 'none' || v === 'select' || 'multi-select');
+            if (!valid) {
+                console.error('The "methodForSelecting" parameter must have the value `none`, `select` or `multi-select`.');
+                return DEFAULT_SELECT_METHOD;
+            }
+            return v;
+        },
+    };
     /**
      *  Method for selecting list items. Default value is 'none'.
      * 'select' - List items are selected one by one.
      * 'multi-select' - Multiple selection of list items.
      * 'none' - List items are not selectable.
      */
-    methodForSelecting = input(DEFAULT_SELECT_METHOD);
+    methodForSelecting = input(DEFAULT_SELECT_METHOD, { ...this._methodForSelectingOptions });
+    _trackByOptions = {
+        transform: (v) => {
+            const valid = validateString(v);
+            if (!valid) {
+                console.error('The "trackBy" parameter must be of type `string`.');
+                return TRACK_BY_PROPERTY_NAME;
+            }
+            return v;
+        },
+    };
+    /**
+     * The name of the property by which tracking is performed
+     */
+    trackBy = input(TRACK_BY_PROPERTY_NAME, { ...this._trackByOptions });
     _isNotSelecting = this.getIsNotSelecting();
     get isNotSelecting() { return this._isNotSelecting; }
     _isSingleSelecting = this.getIsSingleSelecting();
@@ -2149,6 +2476,7 @@ class NgVirtualListComponent {
     get orientation() {
         return this._isVertical ? Directions.VERTICAL : Directions.HORIZONTAL;
     }
+    focusedElement = signal(undefined);
     _actualItems = signal([]);
     _collapsedItemIds = signal([]);
     _displayComponents = [];
@@ -2222,10 +2550,6 @@ class NgVirtualListComponent {
     _elementRef = inject((ElementRef));
     _initialized;
     $initialized;
-    /**
-     * The name of the property by which tracking is performed
-     */
-    trackBy = input(TRACK_BY_PROPERTY_NAME);
     /**
      * Base class of the element component
      */
@@ -2251,6 +2575,9 @@ class NgVirtualListComponent {
         this._initialized = signal(false);
         this.$initialized = toObservable(this._initialized);
         this._trackBox.displayComponents = this._displayComponents;
+        this._service.$focusedId.pipe(takeUntilDestroyed(), tap(v => {
+            this.focusedElement.set(v ?? undefined);
+        })).subscribe();
         toObservable(this._list).pipe(takeUntilDestroyed(), filter(v => !!v), tap(v => {
             this._service.listElement = v.nativeElement;
         })).subscribe();
@@ -2264,7 +2591,7 @@ class NgVirtualListComponent {
         $trackBy.pipe(takeUntilDestroyed(), tap(v => {
             this._trackBox.trackingPropertyName = v;
         })).subscribe();
-        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds), $collapsedItemIds = toObservable(this._collapsedItemIds), $actualItems = toObservable(this._actualItems), $cacheVersion = toObservable(this._cacheVersion);
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $bufferSize = toObservable(this.bufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $maxBufferSize = toObservable(this.maxBufferSize).pipe(map(v => v < 0 ? DEFAULT_BUFFER_SIZE : v)), $itemConfigMap = toObservable(this.itemConfigMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $enabledBufferOptimization = toObservable(this.enabledBufferOptimization), $snappingMethod = toObservable(this.snappingMethod).pipe(map(v => this.getIsSnappingMethodAdvanced(v || DEFAULT_SNAPPING_METHOD))), $methodForSelecting = toObservable(this.methodForSelecting), $selectedIds = toObservable(this.selectedIds), $collapsedIds = toObservable(this.collapsedIds).pipe(map(v => Array.isArray(v) ? v : [])), $collapsedItemIds = toObservable(this._collapsedItemIds).pipe(map(v => Array.isArray(v) ? v : [])), $actualItems = toObservable(this._actualItems), $cacheVersion = toObservable(this._cacheVersion);
         combineLatest([$items, $itemSize]).pipe(takeUntilDestroyed(), map(([items, itemSize]) => ({ items, itemSize })), tap(({ items, itemSize }) => {
             this._trackBox.resetCollection(items, itemSize);
         })).subscribe();
@@ -2365,17 +2692,17 @@ class NgVirtualListComponent {
             this._itemRenderer.set(v);
         })).subscribe();
         $bounds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(value => {
-            this.onViewportChange.emit(value);
+            this.onViewportChange.emit(objectAsReadonly(value));
         })).subscribe();
         this._service.$itemClick.pipe(takeUntilDestroyed(), tap(v => {
-            this.onItemClick.emit(v);
+            this.onItemClick.emit(objectAsReadonly(v));
         })).subscribe();
         let isSelectedIdsFirstEmit = 0;
         this._service.$selectedIds.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             if (this.isSingleSelecting || (this.isMultiSelecting && isSelectedIdsFirstEmit >= 2)) {
                 const curr = this.selectedIds();
                 if ((this.isSingleSelecting && JSON.stringify(v) !== JSON.stringify(curr)) || (isSelectedIdsFirstEmit === 2 && JSON.stringify(v) !== JSON.stringify(curr)) || isSelectedIdsFirstEmit > 2) {
-                    this.onSelect.emit(v);
+                    this.onSelect.emit(copyValueAsReadonly(v));
                 }
             }
             if (isSelectedIdsFirstEmit < 3) {
@@ -2391,7 +2718,7 @@ class NgVirtualListComponent {
             if (isCollapsedIdsFirstEmit >= 2) {
                 const curr = this.collapsedIds();
                 if ((isCollapsedIdsFirstEmit === 2 && JSON.stringify(v) !== JSON.stringify(curr)) || isCollapsedIdsFirstEmit > 2) {
-                    this.onCollapse.emit(v);
+                    this.onCollapse.emit(copyValueAsReadonly(v));
                 }
             }
             if (isCollapsedIdsFirstEmit < 3) {
@@ -2502,6 +2829,7 @@ class NgVirtualListComponent {
      * Returns the bounds of an element with a given id
      */
     getItemBounds(id) {
+        validateId(id);
         return this._trackBox.getItemBounds(id);
     }
     /**
@@ -2509,6 +2837,9 @@ class NgVirtualListComponent {
      * Behavior accepts the values ​​"auto", "instant" and "smooth".
      */
     scrollTo(id, behavior = BEHAVIOR_AUTO, iteration = 0) {
+        validateId(id);
+        validateScrollBehavior(behavior);
+        validateIteration(iteration);
         this.scrollToExecutor(id, behavior, validateScrollIteration(iteration));
     }
     _scrollToRepeatExecutionTimeout;
@@ -2582,6 +2913,8 @@ class NgVirtualListComponent {
      * Scrolls the scroll area to the desired element with the specified ID.
      */
     scrollToEnd(behavior = BEHAVIOR_INSTANT, iteration = 0) {
+        validateScrollBehavior(behavior);
+        validateIteration(iteration);
         const items = this.items(), latItem = items[items.length > 0 ? items.length - 1 : 0];
         this.scrollTo(latItem.id, behavior, validateScrollIteration(iteration));
     }
@@ -2660,13 +2993,13 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, collapsedIds: { classPropertyName: "collapsedIds", publicName: "collapsedIds", isSignal: true, isRequired: false, transformFunction: null }, selectByClick: { classPropertyName: "selectByClick", publicName: "selectByClick", isSignal: true, isRequired: false, transformFunction: null }, collapseByClick: { classPropertyName: "collapseByClick", publicName: "collapseByClick", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, enabledBufferOptimization: { classPropertyName: "enabledBufferOptimization", publicName: "enabledBufferOptimization", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, itemConfigMap: { classPropertyName: "itemConfigMap", publicName: "itemConfigMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, bufferSize: { classPropertyName: "bufferSize", publicName: "bufferSize", isSignal: true, isRequired: false, transformFunction: null }, maxBufferSize: { classPropertyName: "maxBufferSize", publicName: "maxBufferSize", isSignal: true, isRequired: false, transformFunction: null }, snappingMethod: { classPropertyName: "snappingMethod", publicName: "snappingMethod", isSignal: true, isRequired: false, transformFunction: null }, methodForSelecting: { classPropertyName: "methodForSelecting", publicName: "methodForSelecting", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd", onViewportChange: "onViewportChange", onItemClick: "onItemClick", onSelect: "onSelect", onCollapse: "onCollapse" }, host: { styleAttribute: "position: relative;" }, providers: [NgVirtualListService], viewQueries: [{ propertyName: "_snappedContainer", first: true, predicate: ["snapped"], descendants: true, isSignal: true }, { propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "_snapContainerRef", first: true, predicate: ["snapRendererContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" #list\r\n    part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-virtual-list', imports: [CommonModule], host: {
                         'style': 'position: relative;'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], template: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.ShadowDom, providers: [NgVirtualListService], template: "@if (snap()) {\r\n  <div #snapped part=\"snapped-item\" class=\"ngvl__list-snapper\">\r\n    <ng-container #snapRendererContainer></ng-container>\r\n  </div>\r\n}\r\n<div #container part=\"scroller\" class=\"ngvl__scroller\">\r\n  <div [attr.aria-orientation]=\"orientation\" [attr.aria-activedescendant]=\"focusedElement()\" tabindex=\"0\" #list\r\n    part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.horizontal) .ngvl__list{display:inline-flex}:host(.horizontal) .ngvl__scroller{overflow:auto hidden}:host(.vertical) .ngvl__scroller{overflow:hidden auto}:host(.vertical){height:320px}.ngvl__scroller{overflow:auto;width:100%;height:100%}.ngvl__list-snapper{pointer-events:none;position:absolute;list-style:none;left:0;top:0;z-index:1}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _listContainerRef: [{
                 type: ViewChild,
                 args: ['renderersContainer', { read: ViewContainerRef }]