@handsontable/angular-wrapper 17.1.0 → 18.0.0-rc1

package/fesm2022/handsontable-angular-wrapper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component, createComponent, EventEmitter, Output, HostBinding, Directive, Injectable, InjectionToken, Inject, ViewEncapsulation, NgModule } from '@angular/core';
+import { ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component, createComponent, Directive, EventEmitter, Output, HostBinding, Injectable, InjectionToken, Inject, inject, DestroyRef, ViewEncapsulation, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import Handsontable from 'handsontable/base';
 import { take, skip } from 'rxjs/operators';
@@ -43,8 +43,8 @@ class CustomEditorPlaceholderComponent {
     detachEditor() {
         this.container.detach();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CustomEditorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: CustomEditorPlaceholderComponent, isStandalone: true, selector: "ng-component", inputs: { top: "top", left: "left", height: "height", width: "width", isVisible: "isVisible", placeholderCustomClass: "placeholderCustomClass", componentRef: "componentRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["inputPlaceholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: ` <div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomEditorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: CustomEditorPlaceholderComponent, isStandalone: true, selector: "ng-component", inputs: { top: "top", left: "left", height: "height", width: "width", isVisible: "isVisible", placeholderCustomClass: "placeholderCustomClass", componentRef: "componentRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["inputPlaceholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: ` <div
     [class]="placeholderCustomClass"
     [style.display]="display"
     [style.width.px]="width"
@@ -57,7 +57,7 @@ class CustomEditorPlaceholderComponent {
     <ng-template #inputPlaceholder></ng-template>
   </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: CustomEditorPlaceholderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CustomEditorPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     template: ` <div
@@ -136,14 +136,7 @@ class BaseEditorAdapter extends Handsontable.editors.BaseEditor {
                 this._isPlaceholderReady = true;
             }
             this._componentRef = columnMeta._editorComponentReference;
-            if (this._finishEditSubscription) {
-                this._finishEditSubscription.unsubscribe();
-                this._finishEditSubscription = undefined;
-            }
-            if (this._cancelEditSubscription) {
-                this._cancelEditSubscription.unsubscribe();
-                this._cancelEditSubscription = undefined;
-            }
+            this.cleanupSubscriptions();
             this._finishEditSubscription = this._componentRef.instance.finishEdit
                 .pipe(take(1))
                 .subscribe(() => {
@@ -162,23 +155,23 @@ class BaseEditorAdapter extends Handsontable.editors.BaseEditor {
     close() {
         if (this.isOpened()) {
             this.resetEditorState();
-            this._editorPlaceHolderRef.changeDetectorRef.detectChanges();
-            this._editorPlaceHolderRef.instance.detachEditor();
-            this._componentRef.instance.onClose();
+            this._editorPlaceHolderRef?.changeDetectorRef.detectChanges();
+            this._editorPlaceHolderRef?.instance.detachEditor();
+            this._componentRef?.instance.onClose();
         }
     }
     /**
      * Focuses the editor. This event is triggered by Handsontable.
      */
     focus() {
-        this._componentRef.instance.onFocus();
+        this._componentRef?.instance.onFocus();
     }
     /**
      * Gets the value from the editor.
      * @returns The value from the editor.
      */
     getValue() {
-        return this._componentRef.instance?.getValue();
+        return this._componentRef?.instance?.getValue();
     }
     /**
      * Opens the editor. This event is triggered by Handsontable.
@@ -190,20 +183,23 @@ class BaseEditorAdapter extends Handsontable.editors.BaseEditor {
     open(event) {
         this.hot.getShortcutManager().setActiveContextName('editor');
         this.applyPropsToEditor();
-        this._componentRef.instance.onOpen(event);
+        this._componentRef?.instance.onOpen(event);
     }
     /**
      * Sets the value for the custom editor.
      * @param newValue The value to set.
      */
     setValue(newValue) {
-        this._componentRef.instance?.setValue(newValue);
-        this._componentRef.changeDetectorRef.detectChanges();
+        this._componentRef?.instance?.setValue(newValue);
+        this._componentRef?.changeDetectorRef.detectChanges();
     }
     /**
      * Applies properties to the custom editor and editor placeholder.
      */
     applyPropsToEditor() {
+        if (!this._componentRef || !this._editorPlaceHolderRef) {
+            return;
+        }
         const rect = this.getEditedCellRect();
         if (!this.isInFullEditMode()) {
             this._componentRef.instance.setValue(null);
@@ -253,14 +249,33 @@ class BaseEditorAdapter extends Handsontable.editors.BaseEditor {
      * Handles the after destroy event.
      */
     onAfterDestroy() {
+        this.cleanupSubscriptions();
         this._editorPlaceHolderRef?.destroy();
     }
+    /**
+     * Unsubscribes the finish/cancel edit subscriptions if they are still active.
+     * Without this, destroying the table while an editor was prepared but never
+     * finished/cancelled leaves the `take(1)` subscriptions hanging (they never emit).
+     */
+    cleanupSubscriptions() {
+        if (this._finishEditSubscription) {
+            this._finishEditSubscription.unsubscribe();
+            this._finishEditSubscription = undefined;
+        }
+        if (this._cancelEditSubscription) {
+            this._cancelEditSubscription.unsubscribe();
+            this._cancelEditSubscription = undefined;
+        }
+    }
     /**
      * Resets the editor placeholder state.
      * We need to reset the editor placeholder state because we use it
      * to store multiple references to the custom editor.
      */
     resetEditorState() {
+        if (!this._editorPlaceHolderRef) {
+            return;
+        }
         this._editorPlaceHolderRef.setInput('top', undefined);
         this._editorPlaceHolderRef.setInput('left', undefined);
         this._editorPlaceHolderRef.setInput('height', undefined);
@@ -271,44 +286,28 @@ class BaseEditorAdapter extends Handsontable.editors.BaseEditor {
 }
 
 /**
- * Abstract base component for creating custom cell renderer components for Handsontable.
+ * Shared base directive for HotCellRendererComponent and HotCellRendererAdvancedComponent.
+ * Holds all @Input() properties and getProps() that both renderer variants share.
  *
- * This class provides a common interface and properties required by any custom cell renderer.
- *
- * @template TValue - The type of the component renderer.
+ * @template TValue - The type of the rendered cell value.
  * @template TProps - The type of additional renderer properties.
  */
-class HotCellRendererComponent {
-    static RENDERER_MARKER = Symbol('HotCellRendererComponent');
+class HotCellRendererBase {
     value = '';
     instance;
     td;
     row;
     col;
     prop;
-    /**
-     * The cell properties provided by Handsontable, extended with optional renderer-specific properties.
-     */
     cellProperties;
-    /**
-     * Retrieves the renderer-specific properties from the cell properties.
-     *
-     * @returns The additional properties for the renderer.
-     */
     getProps() {
         return this.cellProperties?.rendererProps ?? {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: HotCellRendererComponent, isStandalone: true, selector: "hot-cell-renderer", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HotCellRendererBase, isStandalone: true, inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'hot-cell-renderer',
-                    template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererBase, decorators: [{
+            type: Directive
         }], propDecorators: { value: [{
                 type: Input
             }], instance: [{
@@ -326,77 +325,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
             }] } });
 
 /**
- * Abstract class representing a Handsontable editor in angular.
+ * Abstract base component for creating custom cell renderer components for Handsontable.
+ *
+ * Extend this component and provide your own template to implement a custom renderer.
+ * Value type is limited to primitives (`string | number | boolean`).
+ * For object and array values use {@link HotCellRendererAdvancedComponent}.
+ *
+ * @template TValue - The type of the component renderer.
+ * @template TProps - The type of additional renderer properties.
  */
-class HotCellEditorComponent {
-    static EDITOR_MARKER = Symbol('HotCellEditorComponent');
-    /** The tabindex attribute for the editor. */
-    tabindex = -1;
-    /** The data-hot-input attribute for the editor. */
-    dataHotInput = '';
-    /** The handsontableInput class for the editor. */
-    handsontableInputClass = true;
-    /** The height of the editor as a percentage of the parent container. */
+class HotCellRendererComponent extends HotCellRendererBase {
+    static RENDERER_MARKER = Symbol('HotCellRendererComponent');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HotCellRendererComponent, isStandalone: true, selector: "hot-cell-renderer", usesInheritance: true, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hot-cell-renderer',
+                    template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+/**
+ * Shared base directive for HotCellEditorComponent and HotCellEditorAdvancedComponent.
+ * Holds all @Input(), @Output() and @HostBinding() declarations that both editor variants share.
+ *
+ * @template T - The type of the edited cell value.
+ */
+class HotCellEditorBase {
     heightFitParentContainer = 100;
-    /** The width of the editor as a percentage of the parent container. */
     widthFitParentContainer = 100;
-    /** The row index of the cell being edited. */
     row;
-    /** The column index of the cell being edited. */
     column;
-    /** The property name of the cell being edited. */
     prop;
-    /** The original value of the cell being edited. */
     originalValue;
-    /** The cell properties of the cell being edited. */
     cellProperties;
-    /** Event emitted when the edit is finished.
-     * The data will be saved to the model.
-     */
     finishEdit = new EventEmitter();
-    /** Event emitted when the edit is canceled.
-     * The entered data will be reverted to the original value.
-     */
     cancelEdit = new EventEmitter();
-    /** The current value of the editor. */
-    _value;
-    /** Event triggered by Handsontable on closing the editor.
-     * The user can define their own actions for
-     * the custom editor to be called after the base logic. */
-    onClose() { }
-    /** Event triggered by Handsontable on open the editor.
-     * The user can define their own actions for
-     * the custom editor to be called after the base logic. */
-    onOpen(event) { }
-    /**
-     * Gets the current value of the editor.
-     * @returns The current value of the editor.
-     */
+    value;
     getValue() {
-        return this._value;
+        return this.value;
     }
-    /**
-     * Sets the current value of the editor.
-     * @param value The value to set.
-     */
     setValue(value) {
-        this._value = value;
+        this.value = value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: HotCellEditorComponent, isStandalone: true, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "attr.tabindex": "this.tabindex", "attr.data-hot-input": "this.dataHotInput", "class.handsontableInput": "this.handsontableInputClass", "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HotCellEditorBase, isStandalone: true, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorBase, decorators: [{
             type: Directive
-        }], propDecorators: { tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], dataHotInput: [{
-                type: HostBinding,
-                args: ['attr.data-hot-input']
-            }], handsontableInputClass: [{
-                type: HostBinding,
-                args: ['class.handsontableInput']
-            }], heightFitParentContainer: [{
+        }], propDecorators: { heightFitParentContainer: [{
                 type: HostBinding,
                 args: ['style.height.%']
             }], widthFitParentContainer: [{
@@ -418,6 +399,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Abstract class representing a basic Handsontable cell editor in Angular.
+ *
+ * Extend this class and decorate the subclass with `@Component()` to implement a custom editor.
+ * Value type is limited to primitives (`string | number | boolean`).
+ * For object and array values use {@link HotCellEditorAdvancedComponent}.
+ */
+class HotCellEditorComponent extends HotCellEditorBase {
+    static EDITOR_MARKER = Symbol('HotCellEditorComponent');
+    /** The tabindex attribute for the editor. */
+    tabindex = -1;
+    /** The data-hot-input attribute for the editor. */
+    dataHotInput = '';
+    /** The handsontableInput class for the editor. */
+    handsontableInputClass = true;
+    /** Event triggered by Handsontable on closing the editor. */
+    onClose() { }
+    /** Event triggered by Handsontable on opening the editor. */
+    onOpen(event) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HotCellEditorComponent, isStandalone: true, host: { properties: { "attr.tabindex": "this.tabindex", "attr.data-hot-input": "this.dataHotInput", "class.handsontableInput": "this.handsontableInputClass" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], dataHotInput: [{
+                type: HostBinding,
+                args: ['attr.data-hot-input']
+            }], handsontableInputClass: [{
+                type: HostBinding,
+                args: ['class.handsontableInput']
+            }] } });
+
 /**
  * Factory function to create a custom Handsontable editor adapter for Angular components.
  *
@@ -438,7 +454,7 @@ const FactoryEditorAdapter = (componentRef) => editorFactory({
         editor._finishEditSubscription = undefined;
         editor._cancelEditSubscription = undefined;
         createEditorPlaceholder(editor, editor.hot._angularEnvironmentInjector);
-        editor.input = editor._editorPlaceHolderRef.location.nativeElement;
+        editor.input = editor._editorPlaceHolderRef?.location.nativeElement ?? document.createElement('div');
         editor._afterRowResizeCallback = () => {
             if (editor.isOpened()) {
                 applyPropsToEditor(editor);
@@ -450,6 +466,7 @@ const FactoryEditorAdapter = (componentRef) => editorFactory({
             }
         };
         editor._afterDestroyCallback = () => {
+            cleanupSubscriptions(editor);
             if (editor._editorPlaceHolderRef) {
                 editor._editorPlaceHolderRef.destroy();
             }
@@ -477,8 +494,8 @@ const FactoryEditorAdapter = (componentRef) => editorFactory({
     onFocus: (editor) => editor._componentRef.instance.onFocus?.(editor),
     afterClose: (editor) => {
         resetEditorState(editor);
-        editor._editorPlaceHolderRef.changeDetectorRef.detectChanges();
-        editor._editorPlaceHolderRef.instance.detachEditor();
+        editor._editorPlaceHolderRef?.changeDetectorRef.detectChanges();
+        editor._editorPlaceHolderRef?.instance.detachEditor();
         editor._componentRef.instance.afterClose?.(editor);
     },
     getValue: (editor) => editor._componentRef.instance.getValue(),
@@ -557,35 +574,18 @@ function cleanupSubscriptions(editor) {
 /**
  * Abstract base component for creating advanced custom cell renderer components for Handsontable.
  *
- * This class provides a common interface and properties required by any custom cell renderer.
+ * Extend this component and provide your own template to implement a custom renderer.
+ * Unlike {@link HotCellRendererComponent}, this variant also accepts object and array values.
  *
  * @template TValue - The type of the component renderer.
  * @template TProps - The type of additional renderer properties.
  */
-class HotCellRendererAdvancedComponent {
+class HotCellRendererAdvancedComponent extends HotCellRendererBase {
     static RENDERER_MARKER = Symbol('HotCellRendererAdvancedComponent');
-    value = '';
-    instance;
-    td;
-    row;
-    col;
-    prop;
-    /**
-     * The cell properties provided by Handsontable, extended with optional renderer-specific properties.
-     */
-    cellProperties;
-    /**
-     * Retrieves the renderer-specific properties from the cell properties.
-     *
-     * @returns The additional properties for the renderer.
-     */
-    getProps() {
-        return this.cellProperties?.rendererProps ?? {};
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellRendererAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: HotCellRendererAdvancedComponent, isStandalone: true, selector: "hot-cell-renderer-advanced", inputs: { value: "value", instance: "instance", td: "td", row: "row", col: "col", prop: "prop", cellProperties: "cellProperties" }, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererAdvancedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HotCellRendererAdvancedComponent, isStandalone: true, selector: "hot-cell-renderer-advanced", usesInheritance: true, ngImport: i0, template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellRendererAdvancedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellRendererAdvancedComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hot-cell-renderer-advanced',
@@ -593,111 +593,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], instance: [{
-                type: Input
-            }], td: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], col: [{
-                type: Input
-            }], prop: [{
-                type: Input
-            }], cellProperties: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
- * Abstract class representing a Handsontable editor in angular.
+ * Abstract class representing an advanced Handsontable cell editor in Angular.
+ *
+ * Extend this class and decorate the subclass with `@Component()` to implement a custom editor.
+ * Unlike {@link HotCellEditorComponent}, this variant also accepts object and array values
+ * and provides additional lifecycle hooks and positioning options.
  */
-class HotCellEditorAdvancedComponent {
+class HotCellEditorAdvancedComponent extends HotCellEditorBase {
     static EDITOR_MARKER = Symbol('HotCellEditorAdvancedComponent');
-    /** The height of the editor as a percentage of the parent container. */
-    heightFitParentContainer = 100;
-    /** The width of the editor as a percentage of the parent container. */
-    widthFitParentContainer = 100;
-    /** The row index of the cell being edited. */
-    row;
-    /** The column index of the cell being edited. */
-    column;
-    /** The property name of the cell being edited. */
-    prop;
-    /** The original value of the cell being edited. */
-    originalValue;
-    /** The cell properties of the cell being edited. */
-    cellProperties;
-    /** Event emitted when the edit is finished.
-     * The data will be saved to the model.
-     */
-    finishEdit = new EventEmitter();
-    /** Event emitted when the edit is canceled.
-     * The entered data will be reverted to the original value.
-     */
-    cancelEdit = new EventEmitter();
-    /** The current value of the editor. */
-    value;
-    /** Event triggered by Handsontable on focus the editor.
-     * The user have to define focus logic.
-     */
+    /** Event triggered by Handsontable on focusing the editor. Available in advanced mode. */
     onFocus(editor) { }
-    /**
-     * Gets the current value of the editor.
-     * @returns The current value of the editor.
-     */
-    getValue() {
-        return this.value;
-    }
-    /**
-     * Sets the current value of the editor.
-     * @param value The value to set.
-     */
-    setValue(value) {
-        this.value = value;
-    }
-    /** The position of the editor in the DOM. Used by Handsontable API. Available in advanced mode. */
+    /** The position of the editor in the DOM. Available in advanced mode. */
     position = 'container';
     /** The shortcuts available for the editor. Available in advanced mode. */
     shortcuts;
-    /** The group name for the shortcuts. Available in advanced mode.*/
+    /** The group name for the shortcuts. Available in advanced mode. */
     shortcutsGroup;
-    /** Configuration. Available in advanced mode. */
+    /** Configuration object. Available in advanced mode. */
     config;
-    /** Lifecycle hook called after the editor is opened. Available in advanced mode.*/
+    /** Lifecycle hook called after the editor is opened. Available in advanced mode. */
     afterOpen(editor, event) { }
     /** Lifecycle hook called after the editor is closed. Available in advanced mode. */
     afterClose(editor) { }
-    /** Lifecycle hook called after the editor is initialized. Available in advanced mode.*/
+    /** Lifecycle hook called after the editor is initialized. Available in advanced mode. */
     afterInit(editor) { }
     /** Lifecycle hook called before the editor is opened. Available in advanced mode. */
     beforeOpen(editor, { row, col, prop, td, originalValue, cellProperties, }) { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellEditorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.22", type: HotCellEditorAdvancedComponent, isStandalone: true, inputs: { row: "row", column: "column", prop: "prop", originalValue: "originalValue", cellProperties: "cellProperties" }, outputs: { finishEdit: "finishEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.height.%": "this.heightFitParentContainer", "style.width.%": "this.widthFitParentContainer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorAdvancedComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: HotCellEditorAdvancedComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotCellEditorAdvancedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotCellEditorAdvancedComponent, decorators: [{
             type: Directive
-        }], propDecorators: { heightFitParentContainer: [{
-                type: HostBinding,
-                args: ['style.height.%']
-            }], widthFitParentContainer: [{
-                type: HostBinding,
-                args: ['style.width.%']
-            }], row: [{
-                type: Input
-            }], column: [{
-                type: Input
-            }], prop: [{
-                type: Input
-            }], originalValue: [{
-                type: Input
-            }], cellProperties: [{
-                type: Input
-            }], finishEdit: [{
-                type: Output
-            }], cancelEdit: [{
-                type: Output
-            }] } });
+        }] });
 
 const INVALID_RENDERER_WARNING = 'The provided renderer component was not recognized as a valid custom renderer. ' +
     'It must either extend HotCellRendererComponent or be a valid TemplateRef. ' +
@@ -705,6 +635,11 @@ const INVALID_RENDERER_WARNING = 'The provided renderer component was not recogn
 const INVALID_ADVANCED_RENDERER_WARNING = 'The provided renderer component was not recognized as a valid custom renderer. ' +
     'It must either extend HotCellRendererAdvancedComponent. ' +
     'Please ensure that your custom renderer is implemented correctly and imported from the proper source.';
+// Renderer component inputs, listed once at module scope so the per-cell render path can set them
+// without allocating a fresh key array (via Object.keys) on every cell of every render frame.
+const RENDERER_INPUT_KEYS = [
+    'instance', 'td', 'row', 'col', 'prop', 'value', 'cellProperties',
+];
 /**
  * Type guard that checks if the given object is a TemplateRef.
  *
@@ -712,7 +647,7 @@ const INVALID_ADVANCED_RENDERER_WARNING = 'The provided renderer component was n
  * @returns True if the object is a TemplateRef; otherwise, false.
  */
 function isTemplateRef(obj) {
-    return obj && typeof obj.createEmbeddedView === 'function';
+    return !!obj && typeof obj.createEmbeddedView === 'function';
 }
 /**
  * Type guard to check if an object is an instance of HotCellRendererComponent.
@@ -745,6 +680,23 @@ function isAdvancedHotCellRendererComponent(obj) {
 class DynamicComponentService {
     appRef;
     environmentInjector;
+    // Track Angular component refs and embedded views keyed by the TD element they are attached to.
+    // When a cell is re-rendered the previous component is destroyed before a new one is created.
+    _tdComponentRefs = new WeakMap();
+    _tdEmbeddedViews = new WeakMap();
+    // Per-instance registries of every renderer ref/view currently attached to the application.
+    // The WeakMaps above only allow per-TD lookup; these sets let us sweep refs whose TD was dropped
+    // from Handsontable's virtual viewport (scrolling, updateData), which would otherwise stay
+    // attached to ApplicationRef forever and leak both memory and change-detection work.
+    //
+    // The registries are scoped per Handsontable instance (not one global set) because this service
+    // is a root singleton shared by every <hot-table>. A global sweep would scan the cells of every
+    // table on the page on each `afterViewRender`, i.e. on every scroll frame of any one of them.
+    // Keying by instance bounds each sweep to the cells of the table that actually re-rendered.
+    _instanceComponentRefs = new WeakMap();
+    _instanceEmbeddedViews = new WeakMap();
+    // Instances we already wired the sweep hook into, so each instance is hooked at most once.
+    _hookedInstances = new WeakSet();
     constructor(appRef, environmentInjector) {
         this.appRef = appRef;
         this.environmentInjector = environmentInjector;
@@ -759,6 +711,7 @@ class DynamicComponentService {
      * @returns A renderer function that can be used in Handsontable's configuration.
      */
     createRendererFromComponent(component, componentProps = {}, register = false) {
+        let registered = false;
         return (instance, td, row, col, prop, value, cellProperties) => {
             const properties = {
                 value,
@@ -769,24 +722,24 @@ class DynamicComponentService {
                 prop,
                 cellProperties,
             };
-            if (componentProps) {
-                Object.assign(cellProperties, { rendererProps: componentProps });
-            }
-            const rendererParameters = [instance, td, row, col, prop, value, cellProperties];
-            baseRenderer.apply(this, rendererParameters);
-            td.innerHTML = '';
+            cellProperties.rendererProps = componentProps;
+            baseRenderer.call(this, instance, td, row, col, prop, value, cellProperties);
+            this.registerSweepHook(instance);
             if (isTemplateRef(component)) {
-                this.attachTemplateToElement(component, td, properties);
+                // Embedded views carry a per-render context, so they are always rebuilt.
+                this.replaceCellContent(instance, td);
+                const embeddedView = this.attachTemplateToElement(component, td, properties);
+                this.trackEmbeddedView(instance, td, embeddedView);
             }
             else if (isHotCellRendererComponent(component)) {
-                const componentRef = this.createComponent(component, properties);
-                this.attachComponentToElement(componentRef, td);
+                this.renderComponent(td, component, properties);
             }
             else {
                 console.warn(INVALID_RENDERER_WARNING);
             }
-            if (register && isHotCellRendererComponent(component)) {
-                Handsontable.renderers.registerRenderer(component.constructor.name, component);
+            if (register && !registered && isHotCellRendererComponent(component)) {
+                Handsontable.renderers.registerRenderer(component.name, component);
+                registered = true;
             }
             return td;
         };
@@ -801,6 +754,7 @@ class DynamicComponentService {
      * @returns A renderer function that can be used in Handsontable's configuration.
      */
     createRendererWithFactory(component, componentProps = {}, register = false) {
+        let registered = false;
         return rendererFactory(({ instance, td, row, column, prop, value, cellProperties }) => {
             const properties = {
                 value,
@@ -811,28 +765,161 @@ class DynamicComponentService {
                 prop,
                 cellProperties,
             };
-            if (componentProps) {
-                Object.assign(cellProperties, { rendererProps: componentProps });
-            }
-            td.innerHTML = '';
+            cellProperties.rendererProps = componentProps;
+            // Apply the base renderer so the TD gets the same base classes/attributes as the
+            // createRendererFromComponent path (rendererFactory itself does not call it).
+            baseRenderer.call(this, instance, td, row, column, prop, value, cellProperties);
+            this.registerSweepHook(instance);
             if (isAdvancedHotCellRendererComponent(component)) {
-                const componentRef = this.createComponent(component, properties);
-                this.attachComponentToElement(componentRef, td);
+                this.renderComponent(td, component, properties);
             }
             else {
                 console.warn(INVALID_ADVANCED_RENDERER_WARNING);
             }
-            if (register && isAdvancedHotCellRendererComponent(component)) {
-                registerRenderer(component.constructor.name, component);
+            if (register && !registered && isAdvancedHotCellRendererComponent(component)) {
+                registerRenderer(component.name, component);
+                registered = true;
+            }
+        });
+    }
+    /**
+     * Destroys all renderer components and embedded views attached to cells within a container element.
+     * Must be called before destroying the Handsontable instance to prevent Angular component leaks.
+     *
+     * @param container - The root DOM element of the Handsontable instance.
+     * @param instance - The Handsontable instance whose registries should be torn down. When omitted
+     *   (e.g. test stubs), only refs reachable through TDs still in the container are destroyed.
+     */
+    cleanupContainer(container, instance) {
+        const compRefs = instance ? this._instanceComponentRefs.get(instance) : undefined;
+        const embViews = instance ? this._instanceEmbeddedViews.get(instance) : undefined;
+        container.querySelectorAll('td').forEach((td) => {
+            const compRef = this._tdComponentRefs.get(td);
+            if (compRef) {
+                this.destroyComponent(compRef);
+                this._tdComponentRefs.delete(td);
+                compRefs?.delete(compRef);
+            }
+            const embView = this._tdEmbeddedViews.get(td);
+            if (embView) {
+                this.destroyEmbeddedView(embView);
+                this._tdEmbeddedViews.delete(td);
+                embViews?.delete(embView);
+            }
+        });
+        // The loop above only reaches TDs still present in the container. Refs for cells already
+        // dropped from the viewport (but not yet swept) would otherwise be orphaned once this
+        // instance's afterViewRender hook is gone after destroy. Tear down whatever is left and drop
+        // the per-instance registries so a repeated cleanup call is a no-op. (Entries removed in the
+        // loop above are already gone from these sets, so nothing is destroyed twice.)
+        compRefs?.forEach((ref) => this.destroyComponent(ref));
+        embViews?.forEach((view) => this.destroyEmbeddedView(view));
+        if (instance) {
+            this._instanceComponentRefs.delete(instance);
+            this._instanceEmbeddedViews.delete(instance);
+        }
+    }
+    /**
+     * Registers a one-time `afterViewRender` hook on the given Handsontable instance that sweeps
+     * renderer refs whose TD is no longer connected to the document. Handsontable recycles a pool of
+     * TD elements while virtualizing rows; cells that leave the viewport are never re-rendered, so
+     * without this sweep their Angular components stay attached to ApplicationRef and leak.
+     *
+     * Guarded against instances that do not expose `addHook` (e.g. test stubs).
+     *
+     * @param instance - The Handsontable instance whose render cycle drives the sweep.
+     */
+    registerSweepHook(instance) {
+        if (this._hookedInstances.has(instance) || typeof instance?.addHook !== 'function') {
+            return;
+        }
+        this._hookedInstances.add(instance);
+        instance.addHook('afterViewRender', () => this.sweepDetachedViews(instance));
+    }
+    /**
+     * Destroys every renderer ref/view tracked for the given instance whose root node is no longer
+     * attached to the document.
+     *
+     * @param instance - The Handsontable instance whose registries should be swept.
+     */
+    sweepDetachedViews(instance) {
+        const compRefs = this._instanceComponentRefs.get(instance);
+        compRefs?.forEach((ref) => {
+            if (!this.isViewConnected(ref.hostView)) {
+                this.destroyComponent(ref);
+                compRefs.delete(ref);
+            }
+        });
+        const embViews = this._instanceEmbeddedViews.get(instance);
+        embViews?.forEach((view) => {
+            if (!this.isViewConnected(view)) {
+                this.destroyEmbeddedView(view);
+                embViews.delete(view);
             }
         });
     }
+    /**
+     * @returns True if any of the view's root nodes is still connected to the document.
+     */
+    isViewConnected(view) {
+        return view.rootNodes.some((node) => !!node?.isConnected);
+    }
+    /**
+     * Destroys the renderer ref/view previously attached to a cell and clears the cell content,
+     * so a fresh renderer can take over the TD without leaking the old one.
+     *
+     * @param instance - The Handsontable instance owning the cell, used to update its registries.
+     * @param td - The table cell whose previous content should be torn down.
+     */
+    replaceCellContent(instance, td) {
+        const prevRef = this._tdComponentRefs.get(td);
+        if (prevRef) {
+            this.destroyComponent(prevRef);
+            this._tdComponentRefs.delete(td);
+            this._instanceComponentRefs.get(instance)?.delete(prevRef);
+        }
+        const prevView = this._tdEmbeddedViews.get(td);
+        if (prevView) {
+            this.destroyEmbeddedView(prevView);
+            this._tdEmbeddedViews.delete(td);
+            this._instanceEmbeddedViews.get(instance)?.delete(prevView);
+        }
+        td.innerHTML = '';
+    }
+    /**
+     * Tracks a component ref both by its TD (for fast replacement) and in the instance registry
+     * (for sweeping and full teardown).
+     */
+    trackComponentRef(instance, td, ref) {
+        this._tdComponentRefs.set(td, ref);
+        this.registryFor(this._instanceComponentRefs, instance).add(ref);
+    }
+    /**
+     * Tracks an embedded view both by its TD (for fast replacement) and in the instance registry
+     * (for sweeping and full teardown).
+     */
+    trackEmbeddedView(instance, td, view) {
+        this._tdEmbeddedViews.set(td, view);
+        this.registryFor(this._instanceEmbeddedViews, instance).add(view);
+    }
+    /**
+     * Returns the per-instance registry set for the given instance, creating it on first use.
+     */
+    registryFor(registry, instance) {
+        let set = registry.get(instance);
+        if (!set) {
+            set = new Set();
+            registry.set(instance, set);
+        }
+        return set;
+    }
     /**
      * Attaches an embedded view created from a TemplateRef to a given DOM element.
      *
      * @param template - The TemplateRef to create an embedded view from.
      * @param tdEl - The target DOM element (a table cell) to which the view will be appended.
      * @param properties - Context object providing properties to be used within the template.
+     * @returns The created EmbeddedViewRef so the caller can track and destroy it later.
      */
     attachTemplateToElement(template, tdEl, properties) {
         const embeddedView = template.createEmbeddedView({
@@ -843,6 +930,7 @@ class DynamicComponentService {
         embeddedView.rootNodes.forEach((node) => {
             tdEl.appendChild(node);
         });
+        return embeddedView;
     }
     /**
      * Dynamically creates an Angular component of the given type.
@@ -855,18 +943,46 @@ class DynamicComponentService {
         const componentRef = createComponent(component, {
             environmentInjector: this.environmentInjector,
         });
-        Object.keys(rendererParameters).forEach((key) => {
-            if (Object.prototype.hasOwnProperty.call(rendererParameters, key)) {
-                componentRef.setInput(key, rendererParameters[key]);
-            }
-            else {
-                console.warn(`Input property "${key}" does not exist on component instance: ${component?.name}.`);
-            }
-        });
+        this.applyInputs(componentRef, rendererParameters);
         componentRef.changeDetectorRef.detectChanges();
         this.appRef.attachView(componentRef.hostView);
         return componentRef;
     }
+    /**
+     * Renders an Angular component into the given cell, recycling the component already attached to
+     * the TD when it is of the same type. Handsontable recycles its pool of TD elements heavily while
+     * virtualizing rows, so recreating an Angular component on every re-render would cause needless
+     * teardown/instantiation churn and GC pressure. When the type matches we only refresh the inputs.
+     *
+     * @param td - The target table cell.
+     * @param component - The renderer component type to render.
+     * @param properties - The renderer parameters to feed as component inputs.
+     */
+    renderComponent(td, component, properties) {
+        const prevRef = this._tdComponentRefs.get(td);
+        if (prevRef &&
+            prevRef.componentType === component &&
+            this.isViewConnected(prevRef.hostView)) {
+            this.applyInputs(prevRef, properties);
+            prevRef.changeDetectorRef.detectChanges();
+            return;
+        }
+        this.replaceCellContent(properties.instance, td);
+        const componentRef = this.createComponent(component, properties);
+        this.attachComponentToElement(componentRef, td);
+        this.trackComponentRef(properties.instance, td, componentRef);
+    }
+    /**
+     * Assigns every renderer parameter as an input on the given component ref.
+     *
+     * @param componentRef - The component ref whose inputs should be set.
+     * @param rendererParameters - The renderer parameters to assign.
+     */
+    applyInputs(componentRef, rendererParameters) {
+        RENDERER_INPUT_KEYS.forEach((key) => {
+            componentRef.setInput(key, rendererParameters[key]);
+        });
+    }
     /**
      * Attaches a dynamically created component's view to a specified DOM container element.
      *
@@ -874,22 +990,44 @@ class DynamicComponentService {
      * @param container - The target DOM element to which the component's root node will be appended.
      */
     attachComponentToElement(componentRef, container) {
-        const domElem = componentRef.hostView.rootNodes[0];
-        container.appendChild(domElem);
+        componentRef.hostView.rootNodes.forEach((node) => {
+            container.appendChild(node);
+        });
     }
     /**
      * Destroys a dynamically created component and detaches its view from the Angular application.
      *
+     * Idempotent: a TD recycled after `sweepDetachedViews` already destroyed its ref still maps to that
+     * stale ref in `_tdComponentRefs`, so the next render path may reach this with an already-destroyed
+     * ref. Guarding on `destroyed` skips the redundant detach/destroy instead of relying on Angular's
+     * internal no-op behaviour.
+     *
      * @param componentRef - The reference to the component to be destroyed.
      */
     destroyComponent(componentRef) {
-        this.appRef.detachView(componentRef.hostView);
+        const hostView = componentRef.hostView;
+        if (hostView.destroyed) {
+            return;
+        }
+        this.appRef.detachView(hostView);
         componentRef.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
+    /**
+     * Destroys an embedded view. Idempotent for the same reason as {@link destroyComponent}: a recycled
+     * TD can still map to an already-destroyed view in `_tdEmbeddedViews`.
+     *
+     * @param view - The embedded view to destroy.
+     */
+    destroyEmbeddedView(view) {
+        if (view.destroyed) {
+            return;
+        }
+        view.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: DynamicComponentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicComponentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -897,6 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
 const AVAILABLE_HOOKS_SET = new Set(Handsontable.hooks.getRegistered());
+const HOT_ZONE_WRAPPED = Symbol('hotZoneWrapped');
 /**
  * Service to resolve and apply custom settings for Handsontable settings object.
  */
@@ -912,15 +1051,26 @@ class HotSettingsResolver {
     /**
      * Applies custom settings to the provided GridSettings.
      * @param settings The original grid settings.
+     * @param previousColumns The previously resolved columns (from the prior settings cycle). When
+     *   supplied, an editor component already created for a column whose editor type is unchanged is
+     *   recycled instead of being recreated, avoiding needless Angular component teardown/rebuild.
      * @returns The merged grid settings with custom settings applied.
      */
-    applyCustomSettings(settings) {
-        const mergedSettings = settings;
+    applyCustomSettings(settings, previousColumns) {
+        // Shallow-clone the user settings (and each column) before mutating. Otherwise we would
+        // write generated renderers/editors and `_editorComponentReference` straight onto the
+        // caller's objects. When the same settings/columns are shared across two <hot-table>
+        // instances, the second resolution would overwrite the first instance's editor refs,
+        // leaking them and cross-wiring a single editor component between tables.
+        const mergedSettings = { ...settings };
+        if (Array.isArray(mergedSettings.columns)) {
+            mergedSettings.columns = mergedSettings.columns.map((column) => ({ ...column }));
+        }
         this.updateColumnRendererForGivenCustomRenderer(mergedSettings);
-        this.updateColumnEditorForGivenCustomEditor(mergedSettings);
+        this.updateColumnEditorForGivenCustomEditor(mergedSettings, previousColumns);
         this.updateColumnValidatorForGivenCustomValidator(mergedSettings);
         this.wrapHooksInNgZone(mergedSettings);
-        return mergedSettings ?? {};
+        return mergedSettings;
     }
     /**
      * Ensures that hook callbacks in the provided grid settings run inside Angular's zone.
@@ -929,12 +1079,18 @@ class HotSettingsResolver {
      */
     wrapHooksInNgZone(settings) {
         const ngZone = this.ngZone;
-        AVAILABLE_HOOKS_SET.forEach((key) => {
+        // Iterate only the keys actually present in settings instead of all ~100 registered HOT hooks.
+        Object.keys(settings).forEach((key) => {
+            if (!AVAILABLE_HOOKS_SET.has(key)) {
+                return;
+            }
             const option = settings[key];
-            if (typeof option === 'function') {
-                settings[key] = function (...args) {
+            if (typeof option === 'function' && !option[HOT_ZONE_WRAPPED]) {
+                const wrapped = function (...args) {
                     return ngZone.run(() => option.apply(this, args));
                 };
+                wrapped[HOT_ZONE_WRAPPED] = true;
+                settings[key] = wrapped;
             }
         });
     }
@@ -961,31 +1117,73 @@ class HotSettingsResolver {
     }
     /**
      * Updates the column editor for columns with a custom editor.
+     *
+     * Iterates by original column index (not a filtered subset) so each column can be matched against
+     * the column at the same index in `previousColumns` for editor-component recycling.
+     *
      * @param mergedSettings The merged grid settings.
+     * @param previousColumns The previously resolved columns, used to recycle editor components.
      */
-    updateColumnEditorForGivenCustomEditor(mergedSettings) {
+    updateColumnEditorForGivenCustomEditor(mergedSettings, previousColumns) {
         if (!Array.isArray(mergedSettings?.columns)) {
             return;
         }
-        mergedSettings?.columns
-            ?.filter((settings) => this.isEditorComponentRefType(settings.editor) || this.isAdvancedEditorComponentRefType(settings.editor))
-            ?.forEach((cellSettings) => {
-            if (this.isAdvancedEditorComponentRefType(cellSettings.editor)) {
-                const component = createComponent(cellSettings.editor, {
-                    environmentInjector: this.environmentInjector,
-                });
+        mergedSettings.columns.forEach((cellSettings, index) => {
+            const isAdvanced = this.isAdvancedEditorComponentRefType(cellSettings.editor);
+            const isBasic = this.isEditorComponentRefType(cellSettings.editor);
+            if (!isAdvanced && !isBasic) {
+                return;
+            }
+            const editorType = cellSettings.editor;
+            const reusableRef = this.reusableEditorRef(previousColumns?.[index], cellSettings, editorType);
+            const internalSettings = cellSettings;
+            // Recycle the editor component from the previous settings cycle when the same editor type
+            // sits at the same column index AND the same logical column (by `data`) still occupies it.
+            // Recreating it on every settings change would tear down and rebuild an Angular component
+            // (and its DOM/internal state) for no reason. The reused ref is carried into the new column;
+            // HotTableComponent.ngOnChanges detects it by identity and skips destroying it.
+            const component = reusableRef ?? createComponent(editorType, {
+                environmentInjector: this.environmentInjector,
+            });
+            internalSettings._editorComponentReference = component;
+            if (isAdvanced) {
                 cellSettings.editor = FactoryEditorAdapter(component);
             }
             else {
-                const component = createComponent(cellSettings.editor, {
-                    environmentInjector: this.environmentInjector,
-                });
-                cellSettings['_editorComponentReference'] = component;
-                cellSettings['_environmentInjector'] = this.environmentInjector;
+                internalSettings._environmentInjector = this.environmentInjector;
                 cellSettings.editor = BaseEditorAdapter;
             }
         });
     }
+    /**
+     * Returns the previous column's editor component ref when it can be reused for the new column, or
+     * `undefined` to signal a fresh component is needed.
+     *
+     * A ref is only recycled when, at the same index, both the editor component type AND the logical
+     * column identity (its `data` binding) are unchanged. The component-type check alone would already
+     * be functionally safe — a Handsontable editor is not per-cell rendered state but a single
+     * on-demand component that `BaseEditorAdapter`/`FactoryEditorAdapter` re-prepare on every edit
+     * (`prepare()` re-reads the ref from the *current* column meta and `applyPropsToEditor()` re-applies
+     * the full cell context on each `open()`). The extra `data` check is a defensive guard: when columns
+     * are reordered/shortened so a *different* logical column lands on an index, we build a fresh editor
+     * rather than carry the previous column's instance over, so no custom editor that caches
+     * column-specific config at construction can leak stale state into the new cell.
+     *
+     * @param previousColumn The column at the same index in the previous settings cycle.
+     * @param currentColumn The column now occupying this index.
+     * @param editorType The editor component type requested for the new column.
+     */
+    reusableEditorRef(previousColumn, currentColumn, editorType) {
+        const previousRef = previousColumn?._editorComponentReference;
+        if (!previousRef || previousRef.componentType !== editorType) {
+            return undefined;
+        }
+        // Same logical column still occupies this index. Columns without a `data` binding are identified
+        // purely by position, so two `undefined` data values compare equal and recycle as before.
+        const sameLogicalColumn = previousColumn?.data ===
+            currentColumn.data;
+        return sameLogicalColumn ? previousRef : undefined;
+    }
     /**
      * Updates the column validator for columns with a custom validator.
      * @param mergedSettings The merged grid settings.
@@ -1038,10 +1236,10 @@ class HotSettingsResolver {
             this.isTemplateRef(renderer) ||
             this.isAdvancedRendererComponentRefType(renderer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotSettingsResolver, deps: [{ token: DynamicComponentService }, { token: i0.EnvironmentInjector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotSettingsResolver });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotSettingsResolver, deps: [{ token: DynamicComponentService }, { token: i0.EnvironmentInjector }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotSettingsResolver });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotSettingsResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotSettingsResolver, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DynamicComponentService }, { type: i0.EnvironmentInjector }, { type: i0.NgZone }] });
 
@@ -1134,10 +1332,10 @@ class HotGlobalConfigService {
     resetConfig() {
         this.configSubject.next({ ...this.defaultConfig });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotGlobalConfigService, deps: [{ token: HOT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotGlobalConfigService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotGlobalConfigService, deps: [{ token: HOT_GLOBAL_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotGlobalConfigService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotGlobalConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotGlobalConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1147,37 +1345,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
                     args: [HOT_GLOBAL_CONFIG]
                 }] }] });
 
-const HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be used properly.';
+const HOT_DESTROYED_WARNING = 'The Handsontable instance bound to this component was destroyed and cannot be' + ' used properly.';
 class HotTableComponent {
     _hotSettingsResolver;
     _hotConfig;
     ngZone;
     environmentInjector;
-    destroyRef;
+    _dynamicComponentService;
+    // component inputs
     /** The data for the Handsontable instance. */
     data = null;
     /** The settings for the Handsontable instance. */
     settings = {};
+    /** The container element for the Handsontable instance. */
     container;
     /** The Handsontable instance. */
     __hotInstance = null;
-    constructor(_hotSettingsResolver, _hotConfig, ngZone, environmentInjector, destroyRef) {
+    _destroyRef = inject(DestroyRef);
+    constructor(_hotSettingsResolver, _hotConfig, ngZone, environmentInjector, _dynamicComponentService) {
         this._hotSettingsResolver = _hotSettingsResolver;
         this._hotConfig = _hotConfig;
         this.ngZone = ngZone;
         this.environmentInjector = environmentInjector;
-        this.destroyRef = destroyRef;
+        this._dynamicComponentService = _dynamicComponentService;
     }
     /**
      * Gets the Handsontable instance.
      * @returns The Handsontable instance or `null` if it's not yet been created or has been destroyed.
      */
     get hotInstance() {
-        if (this.__hotInstance?.isDestroyed) {
+        if (!this.__hotInstance || !this.__hotInstance.isDestroyed) {
+            // Will return the Handsontable instance or `null` if it's not yet been created.
+            return this.__hotInstance;
+        }
+        else {
             console.warn(HOT_DESTROYED_WARNING);
             return null;
         }
-        return this.__hotInstance;
     }
     /**
      * Sets the Handsontable instance.
@@ -1193,13 +1397,13 @@ class HotTableComponent {
     ngAfterViewInit() {
         let options = this._hotSettingsResolver.applyCustomSettings(this.settings);
         const negotiatedSettings = this.getNegotiatedSettings(options);
-        options = { ...options, ...negotiatedSettings, data: this.data };
+        options = { ...options, ...negotiatedSettings, ...(this.data != null ? { data: this.data } : {}) };
         this.ngZone.runOutsideAngular(() => {
             this.hotInstance = new Handsontable.Core(this.container.nativeElement, options);
             this.hotInstance._angularEnvironmentInjector = this.environmentInjector;
             this.hotInstance.init();
         });
-        this._hotConfig.config$.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+        this._hotConfig.config$.pipe(skip(1), takeUntilDestroyed(this._destroyRef)).subscribe((config) => {
             if (this.hotInstance) {
                 const negotiatedSettings = this.getNegotiatedSettings(this.settings);
                 this.updateHotTable(negotiatedSettings);
@@ -1211,37 +1415,56 @@ class HotTableComponent {
             return;
         }
         if (changes.settings && !changes.settings.firstChange) {
-            this.destroyEditorComponentRefs();
-            const newOptions = this._hotSettingsResolver.applyCustomSettings(changes.settings.currentValue);
-            const dataChanged = changes.data && !changes.data.firstChange;
-            this.updateHotTable(dataChanged ? { ...newOptions, data: changes.data.currentValue } : newOptions);
-            return;
+            // Capture old editor refs before applying new settings so HOT can close any active editor first.
+            const prevColumns = this.__hotInstance?.getSettings().columns;
+            const prevColumnsArray = Array.isArray(prevColumns) ? prevColumns : undefined;
+            // Pass the previous columns so unchanged editor types recycle their existing component
+            // instead of creating a fresh one on every settings change.
+            const newOptions = this._hotSettingsResolver.applyCustomSettings(changes.settings.currentValue, prevColumnsArray);
+            // updateHotTable closes any active editor via HOT.updateSettings before we destroy old refs.
+            this.updateHotTable(newOptions);
+            // Only destroy old editor refs when new settings actually replace columns.
+            // If newOptions has no columns, HOT keeps the old column objects active — destroying
+            // their refs would crash FactoryEditorAdapter / BaseEditorAdapter on next edit.
+            if (prevColumnsArray && Array.isArray(newOptions.columns)) {
+                // Refs recycled into the new columns must survive — destroy only the ones left behind.
+                const reusedRefs = new Set(newOptions.columns
+                    .map((column) => column._editorComponentReference)
+                    .filter((ref) => !!ref));
+                prevColumnsArray.forEach((column) => {
+                    if (column._editorComponentReference && !reusedRefs.has(column._editorComponentReference)) {
+                        column._editorComponentReference.destroy();
+                    }
+                });
+            }
         }
         if (changes.data && !changes.data.firstChange) {
-            this.ngZone.runOutsideAngular(() => {
-                this.hotInstance.updateData(changes.data.currentValue);
-            });
+            this.hotInstance?.updateData(changes.data.currentValue);
         }
     }
     /**
      * Destroys the Handsontable instance and clears the columns from custom editors.
      */
     ngOnDestroy() {
-        if (!this.hotInstance) {
-            return;
-        }
-        this.destroyEditorComponentRefs();
         this.ngZone.runOutsideAngular(() => {
-            this.hotInstance.destroy();
-            this.hotInstance = null;
+            if (!this.__hotInstance || this.__hotInstance.isDestroyed) {
+                return;
+            }
+            // Destroy renderer Angular components attached to table cells before HOT removes the DOM.
+            if (this.container) {
+                this._dynamicComponentService.cleanupContainer(this.container.nativeElement, this.__hotInstance);
+            }
+            const columns = this.__hotInstance.getSettings().columns;
+            if (columns && Array.isArray(columns)) {
+                columns.forEach((column) => {
+                    if (column._editorComponentReference) {
+                        column._editorComponentReference.destroy();
+                    }
+                });
+            }
+            this.__hotInstance.destroy();
         });
     }
-    destroyEditorComponentRefs() {
-        const columns = this.hotInstance.getSettings().columns;
-        if (Array.isArray(columns)) {
-            columns.forEach((column) => column._editorComponentReference?.destroy());
-        }
-    }
     /**
      * Updates the Handsontable instance with new settings.
      * @param newSettings The new settings to apply to the Handsontable instance.
@@ -1258,7 +1481,7 @@ class HotTableComponent {
             }
         }
         this.ngZone.runOutsideAngular(() => {
-            this.hotInstance.updateSettings(filteredSettings, false);
+            this.hotInstance?.updateSettings(filteredSettings, false);
         });
     }
     /**
@@ -1290,28 +1513,28 @@ class HotTableComponent {
         }
         return negotiatedSettings;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.22", type: HotTableComponent, isStandalone: true, selector: "hot-table", inputs: { data: "data", settings: "settings" }, providers: [HotSettingsResolver], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }, { token: DynamicComponentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: HotTableComponent, isStandalone: true, selector: "hot-table", inputs: { data: "data", settings: "settings" }, providers: [HotSettingsResolver], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: '<div #container></div>', isInline: true, styles: [":host{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'hot-table', template: '<div #container></div>', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [HotSettingsResolver], styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }, { type: i0.DestroyRef }], propDecorators: { data: [{
+            args: [{ selector: 'hot-table', template: '<div #container></div>', encapsulation: ViewEncapsulation.None, providers: [HotSettingsResolver], styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }, { type: DynamicComponentService }], propDecorators: { data: [{
                 type: Input
             }], settings: [{
                 type: Input
             }], container: [{
                 type: ViewChild,
-                args: ['container']
+                args: ['container', { static: false }]
             }] } });
 
 class HotTableModule {
-    static version = '17.1.0';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.22", ngImport: i0, type: HotTableModule, imports: [HotTableComponent], exports: [HotTableComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotTableModule });
+    static version = '18.0.0-rc1';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: HotTableModule, imports: [HotTableComponent], exports: [HotTableComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotTableModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: HotTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HotTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [HotTableComponent],