@handsontable/angular-wrapper 16.2.0 → 17.0.0-rc1

package/fesm2022/handsontable-angular-wrapper.mjs

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, createComponent, Injectable, InjectionToken, Inject, ViewEncapsulation, NgModule, EventEmitter, Directive, HostBinding, Output } from '@angular/core';
+import { ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, createComponent, EventEmitter, Directive, HostBinding, Output, Injectable, InjectionToken, Inject, ViewEncapsulation, NgModule } from '@angular/core';
 import Handsontable from 'handsontable/base';
 import { take } from 'rxjs/operators';
-import { baseRenderer } from 'handsontable/renderers';
+import { editorFactory } from 'handsontable/editors/factory';
+import { baseRenderer, rendererFactory, registerRenderer } from 'handsontable/renderers';
 import { BehaviorSubject } from 'rxjs';
 
 /**
@@ -21,6 +22,7 @@ class CustomEditorPlaceholderComponent {
     set isVisible(value) {
         this._isVisible = value;
     }
+    placeholderCustomClass = 'handsontableInputHolder ht_clone_master';
     /** The reference to the component instance of the editor. */
     set componentRef(hotEditorComponentRef) {
         if (hotEditorComponentRef) {
@@ -41,8 +43,8 @@ class CustomEditorPlaceholderComponent {
         this.container.detach();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomEditorPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomEditorPlaceholderComponent, selector: "ng-component", inputs: { top: "top", left: "left", height: "height", width: "width", isVisible: "isVisible", componentRef: "componentRef" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["inputPlaceholder"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: ` <div
-    class="handsontableInputHolder ht_clone_master"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomEditorPlaceholderComponent, 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"
     [style.height.px]="height"
@@ -58,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Component,
             args: [{
                     template: ` <div
-    class="handsontableInputHolder ht_clone_master"
+    [class]="placeholderCustomClass"
     [style.display]="display"
     [style.width.px]="width"
     [style.height.px]="height"
@@ -82,6 +84,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isVisible: [{
                 type: Input
+            }], placeholderCustomClass: [{
+                type: Input
             }], componentRef: [{
                 type: Input
             }], container: [{
@@ -318,9 +322,384 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Abstract class representing a Handsontable editor in angular.
+ */
+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. */
+    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.
+     */
+    getValue() {
+        return this._value;
+    }
+    /**
+     * Sets the current value of the editor.
+     * @param value The value to set.
+     */
+    setValue(value) {
+        this._value = value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HotCellEditorComponent, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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']
+            }], 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
+            }] } });
+
+/**
+ * Factory function to create a custom Handsontable editor adapter for Angular components.
+ *
+ * This adapter integrates Angular components with Handsontable's editor system using the new
+ * editorFactory API, allowing you to use Angular components as custom cell editors while
+ * maintaining full Angular lifecycle management and change detection.
+ *
+ * @returns A custom editor class that can be used in Handsontable column settings.
+ *
+ */
+const FactoryEditorAdapter = (componentRef) => editorFactory({
+    position: componentRef.instance.position,
+    shortcuts: componentRef.instance.shortcuts,
+    config: componentRef.instance.config,
+    init(editor) {
+        editor._componentRef = componentRef;
+        editor._editorPlaceHolderRef = undefined;
+        editor._finishEditSubscription = undefined;
+        editor._cancelEditSubscription = undefined;
+        createEditorPlaceholder(editor, editor.hot._angularEnvironmentInjector);
+        editor.input = editor._editorPlaceHolderRef.location.nativeElement;
+        editor._afterRowResizeCallback = () => {
+            if (editor.isOpened()) {
+                applyPropsToEditor(editor);
+            }
+        };
+        editor._afterColumnResizeCallback = () => {
+            if (editor.isOpened()) {
+                applyPropsToEditor(editor);
+            }
+        };
+        editor._afterDestroyCallback = () => {
+            if (editor._editorPlaceHolderRef) {
+                editor._editorPlaceHolderRef.destroy();
+            }
+        };
+        // Hooks are automatically removed by Handsontable on table destroy
+        editor.hot.addHook('afterRowResize', editor._afterRowResizeCallback);
+        editor.hot.addHook('afterColumnResize', editor._afterColumnResizeCallback);
+        editor.hot.addHook('afterDestroy', editor._afterDestroyCallback);
+    },
+    afterInit: (editor) => editor._componentRef.instance.afterInit?.(editor),
+    beforeOpen: (editor, context) => {
+        cleanupSubscriptions(editor);
+        applyPropsToEditor(editor);
+        editor._finishEditSubscription = editor._componentRef.instance.finishEdit.pipe(take(1)).subscribe(() => {
+            editor.finishEditing();
+        });
+        editor._cancelEditSubscription = editor._componentRef.instance.cancelEdit.pipe(take(1)).subscribe(() => {
+            editor.cancelChanges();
+        });
+        editor._componentRef.instance.beforeOpen?.(editor, context);
+    },
+    afterOpen: (editor, event) => {
+        editor._componentRef.instance.afterOpen?.(editor, event);
+    },
+    onFocus: (editor) => editor._componentRef.instance.onFocus?.(editor),
+    afterClose: (editor) => {
+        resetEditorState(editor);
+        editor._editorPlaceHolderRef.changeDetectorRef.detectChanges();
+        editor._editorPlaceHolderRef.instance.detachEditor();
+        editor._componentRef.instance.afterClose?.(editor);
+    },
+    getValue: (editor) => editor._componentRef.instance.getValue(),
+    setValue: (editor, value) => {
+        editor.value = value;
+        editor._componentRef.instance.setValue(value);
+        editor._componentRef.changeDetectorRef.detectChanges();
+    },
+});
+/**
+ * Creates the editor placeholder component.
+ * @param editor The editor instance.
+ * @param injector The environment injector from Angular.
+ */
+function createEditorPlaceholder(editor, injector) {
+    if (!injector) {
+        return;
+    }
+    editor._editorPlaceHolderRef = createComponent(CustomEditorPlaceholderComponent, {
+        environmentInjector: injector,
+    });
+}
+/**
+ * Applies properties to the custom Angular editor and editor placeholder.
+ * Updates position, size, and cell context information.
+ * @param editor The editor instance.
+ */
+function applyPropsToEditor(editor) {
+    if (!editor._componentRef || !editor._editorPlaceHolderRef) {
+        return;
+    }
+    editor._componentRef.setInput('originalValue', editor.originalValue);
+    editor._componentRef.setInput('row', editor.row);
+    editor._componentRef.setInput('column', editor.col);
+    editor._componentRef.setInput('prop', editor.prop);
+    editor._componentRef.setInput('cellProperties', editor.cellProperties);
+    const rect = editor.hot.getCell(editor.row, editor.col)?.getBoundingClientRect();
+    editor._editorPlaceHolderRef.setInput('placeholderCustomClass', '');
+    editor._editorPlaceHolderRef.setInput('height', rect.height);
+    editor._editorPlaceHolderRef.setInput('width', rect.width);
+    editor._editorPlaceHolderRef.setInput('isVisible', true);
+    editor._editorPlaceHolderRef.setInput('componentRef', editor._componentRef);
+    editor._editorPlaceHolderRef.changeDetectorRef.detectChanges();
+}
+/**
+ * Resets the editor placeholder state.
+ * Clears all positioning and visibility settings.
+ * @param editor The editor instance.
+ */
+function resetEditorState(editor) {
+    if (!editor._editorPlaceHolderRef) {
+        return;
+    }
+    editor._editorPlaceHolderRef.setInput('top', undefined);
+    editor._editorPlaceHolderRef.setInput('left', undefined);
+    editor._editorPlaceHolderRef.setInput('height', undefined);
+    editor._editorPlaceHolderRef.setInput('width', undefined);
+    editor._editorPlaceHolderRef.setInput('isVisible', false);
+    editor._editorPlaceHolderRef.setInput('componentRef', undefined);
+}
+/**
+ * Cleans up existing subscriptions.
+ * @param editor The editor instance.
+ */
+function cleanupSubscriptions(editor) {
+    if (editor._finishEditSubscription) {
+        editor._finishEditSubscription.unsubscribe();
+        editor._finishEditSubscription = undefined;
+    }
+    if (editor._cancelEditSubscription) {
+        editor._cancelEditSubscription.unsubscribe();
+        editor._cancelEditSubscription = undefined;
+    }
+}
+
+/**
+ * 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.
+ *
+ * @template TValue - The type of the component renderer.
+ * @template TProps - The type of additional renderer properties.
+ */
+class HotCellRendererAdvancedComponent {
+    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: "16.2.12", ngImport: i0, type: HotCellRendererAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HotCellRendererAdvancedComponent, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellRendererAdvancedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hot-cell-renderer-advanced',
+                    template: `<!-- This is an abstract component. Extend this component and provide your own template. -->`,
+                }]
+        }], 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.
+ */
+class HotCellEditorAdvancedComponent {
+    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.
+     */
+    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. */
+    position = 'container';
+    /** The shortcuts available for the editor. Available in advanced mode. */
+    shortcuts;
+    /** The group name for the shortcuts. Available in advanced mode.*/
+    shortcutsGroup;
+    /** Configuration. Available in advanced mode. */
+    config;
+    /** 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.*/
+    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: "16.2.12", ngImport: i0, type: HotCellEditorAdvancedComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HotCellEditorAdvancedComponent, 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: "16.2.12", 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. ' +
     'Please ensure that your custom renderer is implemented correctly and imported from the proper source.';
+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.';
 /**
  * Type guard that checks if the given object is a TemplateRef.
  *
@@ -339,6 +718,15 @@ function isTemplateRef(obj) {
 function isHotCellRendererComponent(obj) {
     return obj?.RENDERER_MARKER === HotCellRendererComponent.RENDERER_MARKER;
 }
+/**
+ * Type guard to check if an object is an instance of HotCellRendererAdvancedComponent.
+ *
+ * @param obj - The object to check.
+ * @returns True if the object is a HotCellRendererAdvancedComponent, false otherwise.
+ */
+function isAdvancedHotCellRendererComponent(obj) {
+    return obj?.RENDERER_MARKER === HotCellRendererAdvancedComponent.RENDERER_MARKER;
+}
 /**
  * Service for dynamically creating Angular components or templates as custom renderers for Handsontable.
  *
@@ -368,14 +756,18 @@ class DynamicComponentService {
     createRendererFromComponent(component, componentProps = {}, register = false) {
         return (instance, td, row, col, prop, value, cellProperties) => {
             const properties = {
-                value, instance, td, row, col, prop, cellProperties
+                value,
+                instance,
+                td,
+                row,
+                col,
+                prop,
+                cellProperties,
             };
             if (componentProps) {
                 Object.assign(cellProperties, { rendererProps: componentProps });
             }
-            const rendererParameters = [
-                instance, td, row, col, prop, value, cellProperties
-            ];
+            const rendererParameters = [instance, td, row, col, prop, value, cellProperties];
             baseRenderer.apply(this, rendererParameters);
             td.innerHTML = '';
             if (isTemplateRef(component)) {
@@ -394,6 +786,42 @@ class DynamicComponentService {
             return td;
         };
     }
+    /**
+     * Creates a custom renderer function using rendererFactory from Handsontable.
+     * This is an alternative implementation that uses the factory pattern.
+     *
+     * @param component - The Angular component type to use as renderer.
+     * @param componentProps - An object containing additional properties to use by the renderer.
+     * @param register - If true, registers the renderer with Handsontable using the component's name.
+     * @returns A renderer function that can be used in Handsontable's configuration.
+     */
+    createRendererWithFactory(component, componentProps = {}, register = false) {
+        return rendererFactory(({ instance, td, row, column, prop, value, cellProperties }) => {
+            const properties = {
+                value,
+                instance,
+                td,
+                row,
+                col: column,
+                prop,
+                cellProperties,
+            };
+            if (componentProps) {
+                Object.assign(cellProperties, { rendererProps: componentProps });
+            }
+            td.innerHTML = '';
+            if (isAdvancedHotCellRendererComponent(component)) {
+                const componentRef = this.createComponent(component, properties);
+                this.attachComponentToElement(componentRef, td);
+            }
+            else {
+                console.warn(INVALID_ADVANCED_RENDERER_WARNING);
+            }
+            if (register && isAdvancedHotCellRendererComponent(component)) {
+                registerRenderer(component.constructor.name, component);
+            }
+        });
+    }
     /**
      * Attaches an embedded view created from a TemplateRef to a given DOM element.
      *
@@ -420,9 +848,9 @@ class DynamicComponentService {
      */
     createComponent(component, rendererParameters) {
         const componentRef = createComponent(component, {
-            environmentInjector: this.environmentInjector
+            environmentInjector: this.environmentInjector,
         });
-        Object.keys(rendererParameters).forEach(key => {
+        Object.keys(rendererParameters).forEach((key) => {
             if (rendererParameters.hasOwnProperty(key)) {
                 componentRef.setInput(key, rendererParameters[key]);
             }
@@ -441,8 +869,7 @@ 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];
+        const domElem = componentRef.hostView.rootNodes[0];
         container.appendChild(domElem);
     }
     /**
@@ -498,7 +925,7 @@ class HotSettingsResolver {
      */
     wrapHooksInNgZone(settings, ngZone) {
         const options = AVAILABLE_HOOKS.concat(AVAILABLE_OPTIONS);
-        options.forEach(key => {
+        options.forEach((key) => {
             const isHook = AVAILABLE_HOOKS.indexOf(key) > -1;
             let option;
             if (isHook) {
@@ -507,7 +934,7 @@ class HotSettingsResolver {
             if (option === void 0) {
                 return;
             }
-            else if (!!ngZone && (typeof option === 'function' && isHook)) {
+            else if (!!ngZone && typeof option === 'function' && isHook) {
                 settings[key] = function (...args) {
                     return ngZone.run(() => option.apply(this, args));
                 };
@@ -526,13 +953,16 @@ class HotSettingsResolver {
             return;
         }
         mergedSettings?.columns
-            ?.filter((settings) => this.isRendererComponentRefType(settings.renderer) || this.isTemplateRef(settings.renderer))
+            ?.filter((settings) => this.isCustomRenderer(settings.renderer))
             ?.forEach((cellSettings) => {
-            const renderer = this.isTemplateRef(cellSettings.renderer)
-                ? cellSettings.renderer
-                : cellSettings.renderer;
+            const renderer = cellSettings.renderer;
             const props = cellSettings.rendererProps ?? {};
-            cellSettings.renderer = this.dynamicComponentService.createRendererFromComponent(renderer, props);
+            if (this.isAdvancedRendererComponentRefType(renderer)) {
+                cellSettings.renderer = this.dynamicComponentService.createRendererWithFactory(renderer, props);
+            }
+            else if (this.isRendererComponentRefType(renderer) || this.isTemplateRef(renderer)) {
+                cellSettings.renderer = this.dynamicComponentService.createRendererFromComponent(renderer, props);
+            }
         });
     }
     /**
@@ -544,14 +974,22 @@ class HotSettingsResolver {
             return;
         }
         mergedSettings?.columns
-            ?.filter((settings) => this.isEditorComponentRefType(settings.editor))
+            ?.filter((settings) => this.isEditorComponentRefType(settings.editor) || this.isAdvancedEditorComponentRefType(settings.editor))
             ?.forEach((cellSettings) => {
-            const customEditor = cellSettings.editor;
-            cellSettings['_editorComponentReference'] = createComponent(customEditor, {
-                environmentInjector: this.environmentInjector,
-            });
-            cellSettings['_environmentInjector'] = this.environmentInjector;
-            cellSettings.editor = BaseEditorAdapter;
+            if (this.isAdvancedEditorComponentRefType(cellSettings.editor)) {
+                const component = createComponent(cellSettings.editor, {
+                    environmentInjector: this.environmentInjector,
+                });
+                cellSettings.editor = FactoryEditorAdapter(component);
+            }
+            else {
+                const component = createComponent(cellSettings.editor, {
+                    environmentInjector: this.environmentInjector,
+                });
+                cellSettings['_editorComponentReference'] = component;
+                cellSettings['_environmentInjector'] = this.environmentInjector;
+                cellSettings.editor = BaseEditorAdapter;
+            }
         });
     }
     /**
@@ -576,15 +1014,36 @@ class HotSettingsResolver {
     }
     isEditorComponentRefType(editor) {
         // ecmp - we need it to check if the editor is a component
-        return typeof editor === 'function' && !!editor?.ɵcmp;
+        return typeof editor === 'function' &&
+            !!editor?.ɵcmp &&
+            editor?.EDITOR_MARKER === HotCellEditorComponent.EDITOR_MARKER;
+    }
+    isAdvancedEditorComponentRefType(editor) {
+        // ecmp - we need it to check if the editor is a component
+        return typeof editor === 'function' &&
+            !!editor?.ɵcmp &&
+            editor?.EDITOR_MARKER === HotCellEditorAdvancedComponent.EDITOR_MARKER;
     }
     isRendererComponentRefType(renderer) {
         // ecmp - we need it to check if the renderer is a component
-        return typeof renderer === 'function' && !!renderer?.ɵcmp;
+        return typeof renderer === 'function' &&
+            !!renderer?.ɵcmp &&
+            renderer?.RENDERER_MARKER === HotCellRendererComponent.RENDERER_MARKER;
+    }
+    isAdvancedRendererComponentRefType(renderer) {
+        // ecmp - we need it to check if the renderer is a component
+        return typeof renderer === 'function' &&
+            !!renderer?.ɵcmp &&
+            renderer?.RENDERER_MARKER === HotCellRendererAdvancedComponent.RENDERER_MARKER;
     }
     isTemplateRef(renderer) {
         return renderer && typeof renderer.createEmbeddedView === 'function';
     }
+    isCustomRenderer(renderer) {
+        return this.isRendererComponentRefType(renderer) ||
+            this.isTemplateRef(renderer) ||
+            this.isAdvancedRendererComponentRefType(renderer);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotSettingsResolver, deps: [{ token: DynamicComponentService }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotSettingsResolver });
 }
@@ -633,7 +1092,6 @@ class HotGlobalConfigService {
      */
     defaultConfig = {
         license: undefined,
-        themeName: ''
     };
     /**
      * A BehaviorSubject that holds the current Handsontable configuration.
@@ -702,6 +1160,7 @@ class HotTableComponent {
     _hotSettingsResolver;
     _hotConfig;
     ngZone;
+    environmentInjector;
     // component inputs
     /** The data for the Handsontable instance. */
     data = null;
@@ -712,10 +1171,11 @@ class HotTableComponent {
     /** The Handsontable instance. */
     __hotInstance = null;
     configSubscription;
-    constructor(_hotSettingsResolver, _hotConfig, ngZone) {
+    constructor(_hotSettingsResolver, _hotConfig, ngZone, environmentInjector) {
         this._hotSettingsResolver = _hotSettingsResolver;
         this._hotConfig = _hotConfig;
         this.ngZone = ngZone;
+        this.environmentInjector = environmentInjector;
     }
     /**
      * Gets the Handsontable instance.
@@ -748,6 +1208,7 @@ class HotTableComponent {
         options = { ...options, ...negotiatedSettings, data: this.data };
         this.ngZone.runOutsideAngular(() => {
             this.hotInstance = new Handsontable.Core(this.container.nativeElement, options);
+            this.hotInstance._angularEnvironmentInjector = this.environmentInjector;
             this.hotInstance.init();
         });
         this.configSubscription = this._hotConfig.config$.subscribe((config) => {
@@ -815,21 +1276,28 @@ class HotTableComponent {
         const hotConfig = this._hotConfig.getConfig();
         const negotiatedSettings = {};
         negotiatedSettings.licenseKey = settings.licenseKey ?? hotConfig.license;
-        negotiatedSettings.themeName = settings.themeName ?? hotConfig.themeName;
         negotiatedSettings.language = settings.language ?? hotConfig.language;
+        const theme = settings.theme ?? hotConfig.theme;
+        const themeName = settings.themeName ?? hotConfig.themeName;
+        if (theme !== undefined) {
+            negotiatedSettings.theme = theme;
+        }
+        else if (themeName) {
+            negotiatedSettings.themeName = themeName;
+        }
         // settings that can be set only before the Handsontable instance is initialized
         if (!this.__hotInstance) {
             negotiatedSettings.layoutDirection = settings.layoutDirection ?? hotConfig.layoutDirection;
         }
         return negotiatedSettings;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotTableComponent, deps: [{ token: HotSettingsResolver }, { token: HotGlobalConfigService }, { token: i0.NgZone }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HotTableComponent, 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: "16.2.12", ngImport: i0, type: HotTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hot-table', template: '<div #container></div>', encapsulation: ViewEncapsulation.None, providers: [HotSettingsResolver], styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: HotSettingsResolver }, { type: HotGlobalConfigService }, { type: i0.NgZone }, { type: i0.EnvironmentInjector }]; }, propDecorators: { data: [{
                 type: Input
             }], settings: [{
                 type: Input
@@ -843,7 +1311,7 @@ class HotTableModule {
      * Placeholder for the library version.
      * Replaced automatically during the pre-build/post-build process.
      */
-    static version = '16.2.0';
+    static version = '17.0.0-rc1';
     constructor() { }
     static forRoot() {
         return {
@@ -863,98 +1331,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
-/**
- * Abstract class representing a Handsontable editor in angular.
- */
-class 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. */
-    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.
-     */
-    getValue() {
-        return this._value;
-    }
-    /**
-     * Sets the current value of the editor.
-     * @param value The value to set.
-     */
-    setValue(value) {
-        this._value = value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HotCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HotCellEditorComponent, 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 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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']
-            }], 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
-            }] } });
-
 /*
  * Public API Surface of hot-table
  */
@@ -963,5 +1339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DynamicComponentService, HOT_DESTROYED_WARNING, HOT_GLOBAL_CONFIG, HotCellEditorComponent, HotCellRendererComponent, HotGlobalConfigService, HotSettingsResolver, HotTableComponent, HotTableModule, INVALID_RENDERER_WARNING, NON_COMMERCIAL_LICENSE, PredefinedTheme, isHotCellRendererComponent, isTemplateRef };
+export { DynamicComponentService, HOT_DESTROYED_WARNING, HOT_GLOBAL_CONFIG, HotCellEditorAdvancedComponent, HotCellEditorComponent, HotCellRendererAdvancedComponent, HotCellRendererComponent, HotGlobalConfigService, HotSettingsResolver, HotTableComponent, HotTableModule, INVALID_ADVANCED_RENDERER_WARNING, INVALID_RENDERER_WARNING, NON_COMMERCIAL_LICENSE, PredefinedTheme, isAdvancedHotCellRendererComponent, isHotCellRendererComponent, isTemplateRef };
 //# sourceMappingURL=handsontable-angular-wrapper.mjs.map