handsontable 17.1.0 → 18.0.0-rc2

package/plugins/dialog/dialog.mjs

@@ -51,7 +51,8 @@ function _class_private_method_init(obj, privateSet) {
 import { BasePlugin } from '../base/index.mjs';
 import { throwWithCause } from '../../helpers/errors.mjs';
 import { DialogUI } from './ui.mjs';
-import { isObject } from '../../helpers/object.mjs';
+import { isObject, isPlainObject } from '../../helpers/object.mjs';
+import { isHTMLElement } from '../../helpers/dom/element.mjs';
 import * as C from '../../i18n/constants.mjs';
 export const PLUGIN_KEY = 'dialog';
 export const PLUGIN_PRIORITY = 360;
@@ -81,7 +82,7 @@ var /**
    * Called after the rendering of the table is completed. It updates the width and
    * height of the dialog container to the same size as the table.
    */ _onAfterViewRender = /*#__PURE__*/ new WeakSet();
-/* eslint-disable jsdoc/require-description-complete-sentence */ /**
+/**
  * @plugin Dialog
  * @class Dialog
  *
@@ -230,13 +231,19 @@ var /**
  * ```
  * :::
  */ export class Dialog extends BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
-    static get DEFAULT_SETTINGS() {
+    /**
+   * Returns the default settings applied when the plugin is enabled without explicit configuration.
+   */ static get DEFAULT_SETTINGS() {
         return {
             template: null,
             content: '',
@@ -253,28 +260,30 @@ var /**
             }
         };
     }
-    static get SETTINGS_VALIDATORS() {
+    /**
+   * Returns validator functions for each plugin setting to verify their values are valid before applying them.
+   */ static get SETTINGS_VALIDATORS() {
         return {
-            template: (value)=>isObject(value) && typeof [
+            template: (value)=>isPlainObject(value) && typeof [
                     'alert',
                     'confirm'
-                ].includes(value.type) && typeof value.title === 'string' && (typeof value?.description === 'undefined' || typeof value?.description === 'string') && (typeof value?.buttons === 'undefined' || Array.isArray(value?.buttons) && value.buttons.every((item)=>typeof item === 'object' && typeof item.text === 'string' && [
+                ].includes(String(value.type)) && typeof value.title === 'string' && (typeof value?.description === 'undefined' || typeof value?.description === 'string') && (typeof value?.buttons === 'undefined' || Array.isArray(value?.buttons) && value.buttons.every((item)=>isPlainObject(item) && typeof item.text === 'string' && [
                         'primary',
                         'secondary'
-                    ].includes(item.type) && (typeof item.callback === 'undefined' || typeof item.callback === 'function'))),
-            content: (value)=>typeof value === 'string' || typeof HTMLElement !== 'undefined' && value instanceof HTMLElement || typeof DocumentFragment !== 'undefined' && value instanceof DocumentFragment,
+                    ].includes(String(item.type)) && (typeof item.callback === 'undefined' || typeof item.callback === 'function'))),
+            content: (value)=>typeof value === 'string' || isHTMLElement(value) || typeof DocumentFragment !== 'undefined' && value instanceof DocumentFragment,
             customClassName: (value)=>typeof value === 'string',
-            background: (value)=>[
+            background: (value)=>typeof value === 'string' && [
                     'solid',
                     'semi-transparent'
                 ].includes(value),
             contentBackground: (value)=>typeof value === 'boolean',
             animation: (value)=>typeof value === 'boolean',
             closable: (value)=>typeof value === 'boolean',
-            a11y: (value)=>isObject(value) && (typeof value?.role === 'undefined' || [
+            a11y: (value)=>isPlainObject(value) && (typeof value?.role === 'undefined' || typeof value?.role === 'string' && [
                     'dialog',
                     'alertdialog'
-                ].includes(value?.role)) && (typeof value?.ariaLabel === 'undefined' || typeof value?.ariaLabel === 'string') && (typeof value?.ariaLabelledby === 'undefined' || typeof value?.ariaLabelledby === 'string') && (typeof value?.ariaDescribedby === 'undefined' || typeof value?.ariaDescribedby === 'string')
+                ].includes(value.role)) && (typeof value?.ariaLabel === 'undefined' || typeof value?.ariaLabel === 'string') && (typeof value?.ariaLabelledby === 'undefined' || typeof value?.ariaLabelledby === 'string') && (typeof value?.ariaDescribedby === 'undefined' || typeof value?.ariaDescribedby === 'string')
         };
     }
     /**
@@ -292,13 +301,16 @@ var /**
         }
         if (!_class_private_field_get(this, _ui)) {
             _class_private_field_set(this, _ui, new DialogUI({
-                rootElement: this.hot.rootGridElement,
+                overlayContainer: this.hot.rootOverlaysElement,
                 sanitizer: this.hot.getSettings().sanitizer,
                 isRtl: this.hot.isRtl()
             }));
         }
         _class_private_method_get(this, _registerShortcuts, registerShortcuts).call(this);
         _class_private_method_get(this, _registerFocusScope, registerFocusScope).call(this);
+        // The dialog renders in the overlays layer (`ht-overlay`), a fixed internal element like the
+        // grid — not a layout slot. The UI's `install` already appended its container into that element,
+        // so there is nothing to register with the layout manager.
         this.addHook('afterViewRender', ()=>_class_private_method_get(this, _onAfterViewRender, onAfterViewRender).call(this));
         super.enablePlugin();
     }
@@ -315,6 +327,10 @@ var /**
         this.hide();
         _class_private_method_get(this, _unregisterShortcuts, unregisterShortcuts).call(this);
         _class_private_method_get(this, _unregisterFocusScope, unregisterFocusScope).call(this);
+        // The dialog owns its element in the overlays layer (no layout slot to remove from), so detach
+        // it here and drop the UI; `enablePlugin` rebuilds it when the plugin is re-enabled.
+        _class_private_field_get(this, _ui)?.destroyDialog();
+        _class_private_field_set(this, _ui, null);
         super.disablePlugin();
     }
     /**
@@ -377,8 +393,16 @@ var /**
         _class_private_field_get(this, _ui).hideDialog(this.getSetting('animation'));
         _class_private_field_set(this, _isVisible, false);
         this.hot.getFocusScopeManager().deactivateScope(PLUGIN_KEY);
-        if (_class_private_field_get(this, _selectionState)?.ranges.length > 0) {
-            this.hot.selection.importSelection(_class_private_field_get(this, _selectionState));
+        if (_class_private_field_get(this, _selectionState) && _class_private_field_get(this, _selectionState).ranges.length > 0 && _class_private_field_get(this, _selectionState).activeRange) {
+            const state = _class_private_field_get(this, _selectionState);
+            this.hot.selection.importSelection({
+                ranges: state.ranges,
+                activeRange: state.activeRange,
+                activeSelectionLayer: state.activeSelectionLayer,
+                selectedByRowHeader: state.selectedByRowHeader,
+                selectedByColumnHeader: state.selectedByColumnHeader,
+                disableHeadersHighlight: state.disableHeadersHighlight
+            });
             this.hot.view.render();
             _class_private_field_set(this, _selectionState, null);
         } else {
@@ -421,9 +445,10 @@ var /**
             throwWithCause('The `template` option cannot be used together with the `content` option.');
         }
         if (templateValue) {
-            _class_private_field_get(this, _ui).useTemplate(templateValue.type, {
+            const template = templateValue;
+            _class_private_field_get(this, _ui).useTemplate(template.type, {
                 id: this.hot.guid,
-                ...templateValue
+                ...template
             });
         } else {
             _class_private_field_get(this, _ui).useDefaultTemplate();
@@ -541,7 +566,7 @@ function registerShortcuts() {
         callback: ()=>{
             this.hide();
         },
-        runOnlyIf: ()=>_class_private_field_get(this, _isVisible) && this.getSetting('closable'),
+        runOnlyIf: ()=>_class_private_field_get(this, _isVisible) && Boolean(this.getSetting('closable')),
         group: SHORTCUTS_GROUP
     });
     pluginContext.addShortcut({
@@ -570,7 +595,7 @@ function registerShortcuts() {
 function unregisterShortcuts() {
     const shortcutManager = this.hot.getShortcutManager();
     const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
-    pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
+    pluginContext?.removeShortcutsByGroup(SHORTCUTS_GROUP);
 }
 function registerFocusScope() {
     this.hot.getFocusScopeManager().registerScope(PLUGIN_KEY, _class_private_field_get(this, _ui).getContainer(), {
@@ -582,9 +607,9 @@ function registerFocusScope() {
             const focusableElements = _class_private_field_get(this, _ui).getFocusableElements();
             if (focusableElements.length > 0) {
                 if (focusSource === 'tab_from_above') {
-                    focusableElements.at(0).focus();
+                    focusableElements.at(0)?.focus();
                 } else if (focusSource === 'tab_from_below') {
-                    focusableElements.at(-1).focus();
+                    focusableElements.at(-1)?.focus();
                 }
             } else if (focusSource !== 'tab_from_above' && focusSource !== 'tab_from_below' && isListening && !_class_private_field_get(this, _ui).getContainer().contains(this.hot.rootDocument.activeElement)) {
                 _class_private_field_get(this, _ui).getContainer().focus();
@@ -599,13 +624,7 @@ function unregisterFocusScope() {
     this.hot.getFocusScopeManager().unregisterScope(PLUGIN_KEY);
 }
 function onAfterViewRender() {
-    const { view, rootWrapperElement, rootWindow } = this.hot;
+    const { view } = this.hot;
     const width = view.isHorizontallyScrollableByWindow() ? view.getTotalTableWidth() : view.getWorkspaceWidth();
     _class_private_field_get(this, _ui).updateWidth(width);
-    const dialogInfo = rootWrapperElement.querySelector('.hot-display-license-info');
-    if (dialogInfo) {
-        const height = dialogInfo.offsetHeight;
-        const marginTop = Number.parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
-        _class_private_field_get(this, _ui).updateHeight(height + marginTop);
-    }
 }

package/plugins/dialog/index.d.mts

@@ -0,0 +1 @@
+export * from './index.js';

package/plugins/dialog/index.d.ts

@@ -1 +1 @@
-export * from './dialog'; 
+export { PLUGIN_KEY, PLUGIN_PRIORITY, Dialog, } from './dialog';

package/plugins/dialog/templates/base.d.mts

@@ -0,0 +1 @@
+export * from './base.js';

package/plugins/dialog/templates/base.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The `baseTemplate` function returns a HTML string with the base template.
+ *
+ * @returns {string} HTML string with the base template.
+ */
+export declare function baseTemplate(): {
+    TEMPLATE_NAME: string;
+    dialogA11YOptions(): {
+        role: string;
+    };
+    compile: () => {
+        fragment: DocumentFragment;
+        refs: Record<string, HTMLElement>;
+    };
+    focusableElements: () => HTMLElement[];
+};

package/plugins/dialog/templates/confirm.d.mts

@@ -0,0 +1 @@
+export * from './confirm.js';

package/plugins/dialog/templates/confirm.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The `confirmTemplate` function returns a HTML string with the confirm template.
+ *
+ * @param {object} vars The variables to use for the template.
+ * @param {string} vars.id The ID of the confirm.
+ * @param {string} vars.title The title of the confirm.
+ * @param {string} vars.description The description of the confirm.
+ * @param {object[]} vars.buttons The buttons to display in the confirm.
+ *   - `text`: The text of the button.
+ *   - `type`: The type of the button ('primary' | 'secondary').
+ *   - `callback`: The callback to trigger when the button is clicked.
+ * @returns {string} HTML string with the confirm template.
+ */
+export declare function confirmTemplate({ id, title, description, buttons }: {
+    id?: string;
+    title?: string;
+    description?: string;
+    buttons?: Array<{
+        type: string;
+        text: string;
+        callback?: Function;
+    }>;
+}): {
+    TEMPLATE_NAME: string;
+    dialogA11YOptions(): {
+        role: string;
+        ariaLabelledby: string;
+        ariaDescribedby: string | undefined;
+    };
+    compile: () => {
+        fragment: DocumentFragment;
+        refs: Record<string, HTMLElement>;
+    };
+    focusableElements: () => Element[];
+};

package/plugins/dialog/templates/index.d.mts

@@ -0,0 +1 @@
+export * from './index.js';

package/plugins/dialog/templates/index.d.ts

@@ -0,0 +1,4 @@
+import type { DialogTemplateResult } from '../ui';
+type TemplateFactory = (...args: unknown[]) => DialogTemplateResult;
+declare const TEMPLATES: Map<string, TemplateFactory>;
+export { TEMPLATES };

package/plugins/dialog/templates/index.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "TEMPLATES", {
 });
 const _base = require("./base");
 const _confirm = require("./confirm");
+// eslint-disable-next-line no-spaced-func, func-call-spacing
 const TEMPLATES = new Map([
     [
         'base',

package/plugins/dialog/templates/index.mjs

@@ -1,5 +1,6 @@
 import { baseTemplate } from './base.mjs';
 import { confirmTemplate } from './confirm.mjs';
+// eslint-disable-next-line no-spaced-func, func-call-spacing
 const TEMPLATES = new Map([
     [
         'base',

package/plugins/dialog/ui.d.mts

@@ -0,0 +1 @@
+export * from './ui.js';

package/plugins/dialog/ui.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Represents the compiled template object returned by template factory functions.
+ */
+export interface DialogTemplateResult {
+    TEMPLATE_NAME: string;
+    dialogA11YOptions(): Record<string, string | undefined>;
+    compile(): {
+        fragment: DocumentFragment;
+        refs: Record<string, HTMLElement>;
+    };
+    focusableElements(): HTMLElement[];
+}
+/**
+ * DialogUI is a UI component that renders and manages dialog elements.
+ * It handles dialog creation, content updates, visibility toggling, and styling.
+ *
+ * @private
+ * @class DialogUI
+ */
+export declare class DialogUI {
+    #private;
+    /**
+     * Initializes the dialog UI with an overlay container, RTL layout flag, and an optional HTML sanitizer, then installs the DOM structure.
+     */
+    constructor({ overlayContainer, isRtl, sanitizer }: {
+        overlayContainer: HTMLElement;
+        isRtl: boolean;
+        sanitizer?: (html: string) => string | undefined;
+    });
+    /**
+     * Uses the specified template for the dialog.
+     *
+     * @param {string} templateName The name of the template to use.
+     * @param {object} templateVars The variables to use for the template.
+     */
+    useTemplate(templateName: string, templateVars?: Record<string, unknown>): void;
+    /**
+     * Uses the default template for the dialog for the `content` option.
+     */
+    useDefaultTemplate(): void;
+    /**
+     * Creates the dialog UI elements and sets up the structure.
+     */
+    install(): void;
+    /**
+     * Returns the dialog element.
+     *
+     * @returns {HTMLElement} The dialog element.
+     */
+    getContainer(): HTMLElement;
+    /**
+     * Gets the focusable elements.
+     *
+     * @returns {HTMLElement[]} The focusable elements.
+     */
+    getFocusableElements(): HTMLElement[];
+    /**
+     * Updates the dialog content and class name.
+     *
+     * @param {object} options - Class name update options.
+     * @param {boolean} options.isVisible - Whether the dialog is visible.
+     * @param {string|HTMLElement} options.content - The content to render in the dialog.
+     * @param {string} options.customClassName - The custom class name to add to the dialog.
+     * @param {string} options.background - The background to add to the dialog.
+     * @param {boolean} options.contentBackground - Whether to show content background.
+     * @param {boolean} options.animation - Whether to add the animation class to the dialog.
+     * @param {object} options.a11y - The accessibility options for the dialog.
+     *
+     * @returns {DialogUI} The instance of the DialogUI.
+     */
+    updateDialog({ isVisible, content, customClassName, background, contentBackground, animation, a11y }: Record<string, unknown>): this;
+    /**
+     * Shows the dialog with optional animation.
+     *
+     * @param {boolean} animation - Whether to add the animation class to the dialog.
+     * @returns {DialogUI} The instance of the DialogUI.
+     */
+    showDialog(animation: boolean): this;
+    /**
+     * Hides the dialog with optional animation.
+     *
+     * @param {boolean} animation - Whether to add the animation class to the dialog.
+     * @returns {DialogUI} The instance of the DialogUI.
+     */
+    hideDialog(animation: boolean): this;
+    /**
+     * Focuses the dialog element.
+     */
+    focusDialog(): void;
+    /**
+     * Updates the width of the dialog container to the same size as the table.
+     *
+     * @param {number} width - The width of the table.
+     * @returns {DialogUI} The instance of the DialogUI.
+     */
+    updateWidth(width: number): this;
+    /**
+     * Removes the dialog UI elements from the DOM and clears the refs.
+     */
+    destroyDialog(): void;
+}

package/plugins/dialog/ui.js

@@ -77,10 +77,10 @@ const CONTAINER_TEMPLATE = `
 </div>
 `;
 var /**
-   * The root element where the dialog UI will be installed.
+   * The overlay container where the dialog UI will be installed.
    *
    * @type {HTMLElement}
-   */ _rootElement = /*#__PURE__*/ new WeakMap(), /**
+   */ _overlayContainer = /*#__PURE__*/ new WeakMap(), /**
    * The references to the UI elements.
    *
    * @type {object}
@@ -101,9 +101,7 @@ var /**
    *
    * @type {Array<function(MouseEvent)>}
    */ _templateButtonCallbacks = /*#__PURE__*/ new WeakMap(), /**
-   * The sanitizer to use for the dialog.
-   *
-   * @type {function(string): string}
+   * Optional sanitizer for dialog content (from settings).
    */ _sanitizer = /*#__PURE__*/ new WeakMap(), /**
    * Handles the transition end event.
    */ _onTransitionEnd = /*#__PURE__*/ new WeakSet(), /**
@@ -149,8 +147,9 @@ class DialogUI {
         ]);
         dialogElement.addEventListener('transitionstart', ()=>_class_private_method_get(this, _onTransitionStart, onTransitionStart).call(this));
         dialogElement.addEventListener('transitionend', ()=>_class_private_method_get(this, _onTransitionEnd, onTransitionEnd).call(this));
-        // Append to Handsontable after table grid element
-        _class_private_field_get(this, _rootElement).after(elements.fragment);
+        if (_class_private_field_get(this, _overlayContainer)) {
+            _class_private_field_get(this, _overlayContainer).appendChild(elements.fragment);
+        }
     }
     /**
    * Returns the dialog element.
@@ -182,12 +181,13 @@ class DialogUI {
    */ updateDialog({ isVisible, content, customClassName, background, contentBackground, animation, a11y }) {
         const elements = _class_private_field_get(this, _template).compile();
         const { dialogElement, dialogWrapperElement } = _class_private_field_get(this, _refs);
+        const typedA11y = a11y;
         dialogWrapperElement.innerHTML = '';
         dialogWrapperElement.appendChild(elements.fragment);
         Object.assign(_class_private_field_get(this, _refs), elements.refs);
         const { contentElement, buttonsContainer } = _class_private_field_get(this, _refs);
         if (_class_private_field_get(this, _template).TEMPLATE_NAME !== 'base') {
-            Object.assign(a11y, _class_private_field_get(this, _template).dialogA11YOptions());
+            Object.assign(typedA11y, _class_private_field_get(this, _template).dialogA11YOptions());
         }
         // Dialog class name
         const customClass = customClassName ? ` ${customClassName}` : '';
@@ -204,30 +204,32 @@ class DialogUI {
             animationClass,
             showClass
         ].join(' ');
-        (0, _element.setAttribute)(dialogElement, [
-            _class_private_field_get(this, _template).TEMPLATE_NAME === 'base' ? (0, _a11y.A11Y_TABINDEX)(-1) : undefined
-        ]);
+        if (_class_private_field_get(this, _template).TEMPLATE_NAME === 'base') {
+            (0, _element.setAttribute)(dialogElement, [
+                (0, _a11y.A11Y_TABINDEX)(-1)
+            ]);
+        }
         // Dialog aria attributes
         (0, _element.setAttribute)(dialogElement, [
-            a11y.role === 'alertdialog' ? (0, _a11y.A11Y_ALERTDIALOG)() : (0, _a11y.A11Y_DIALOG)()
+            typedA11y.role === 'alertdialog' ? (0, _a11y.A11Y_ALERTDIALOG)() : (0, _a11y.A11Y_DIALOG)()
         ]);
-        if (a11y.ariaLabel && !a11y.ariaLabelledby) {
+        if (typedA11y.ariaLabel && !typedA11y.ariaLabelledby) {
             (0, _element.setAttribute)(dialogElement, [
-                a11y.ariaLabel ? (0, _a11y.A11Y_LABEL)(a11y.ariaLabel) : undefined
+                (0, _a11y.A11Y_LABEL)(typedA11y.ariaLabel)
             ]);
         } else {
             (0, _element.removeAttribute)(dialogElement, 'aria-label');
         }
-        if (a11y.ariaLabelledby) {
+        if (typedA11y.ariaLabelledby) {
             (0, _element.setAttribute)(dialogElement, [
-                (0, _a11y.A11Y_LABELED_BY)(a11y.ariaLabelledby)
+                (0, _a11y.A11Y_LABELED_BY)(typedA11y.ariaLabelledby)
             ]);
         } else {
             (0, _element.removeAttribute)(dialogElement, 'aria-labelledby');
         }
-        if (a11y.ariaDescribedby) {
+        if (typedA11y.ariaDescribedby) {
             (0, _element.setAttribute)(dialogElement, [
-                (0, _a11y.A11Y_DESCRIBED_BY)(a11y.ariaDescribedby)
+                (0, _a11y.A11Y_DESCRIBED_BY)(typedA11y.ariaDescribedby)
             ]);
         } else {
             (0, _element.removeAttribute)(dialogElement, 'aria-describedby');
@@ -241,8 +243,8 @@ class DialogUI {
             contentElement.innerHTML = '';
             // Render new dialog content
             if (typeof content === 'string') {
-                (0, _element.fastInnerHTML)(contentElement, content, _class_private_field_get(this, _sanitizer));
-            } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+                (0, _element.fastInnerHTML)(contentElement, content, _class_private_field_get(this, _sanitizer) ? (html, ctx)=>_class_private_field_get(this, _sanitizer).call(this, html) ?? html : undefined, 'dialog', _class_private_field_get(this, _overlayContainer));
+            } else if ((0, _element.isHTMLElement)(content) || content instanceof DocumentFragment) {
                 contentElement.appendChild(content);
             }
         } else if (buttonsContainer) {
@@ -302,24 +304,17 @@ class DialogUI {
         return this;
     }
     /**
-   * Updates the height of the dialog container.
-   *
-   * @param {number} licenseInfoHeight - The height of the license info.
-   * @returns {DialogUI} The instance of the DialogUI.
-   */ updateHeight(licenseInfoHeight) {
-        _class_private_field_get(this, _refs).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
-        return this;
-    }
-    /**
    * Removes the dialog UI elements from the DOM and clears the refs.
    */ destroyDialog() {
         _class_private_field_get(this, _refs)?.dialogElement.remove();
-        _class_private_field_set(this, _refs, null);
+        _class_private_field_set(this, _refs, undefined);
     }
-    constructor({ rootElement, isRtl, sanitizer }){
+    /**
+   * Initializes the dialog UI with an overlay container, RTL layout flag, and an optional HTML sanitizer, then installs the DOM structure.
+   */ constructor({ overlayContainer, isRtl, sanitizer }){
         _class_private_method_init(this, _onTransitionEnd);
         _class_private_method_init(this, _onTransitionStart);
-        _class_private_field_init(this, _rootElement, {
+        _class_private_field_init(this, _overlayContainer, {
             writable: true,
             value: void 0
         });
@@ -349,9 +344,9 @@ class DialogUI {
         });
         _class_private_field_set(this, _isRtl, false);
         _class_private_field_set(this, _animationStarted, false);
-        _class_private_field_set(this, _template, _templates.TEMPLATES.get('base'));
+        _class_private_field_set(this, _template, _templates.TEMPLATES.get('base')());
         _class_private_field_set(this, _templateButtonCallbacks, []);
-        _class_private_field_set(this, _rootElement, rootElement);
+        _class_private_field_set(this, _overlayContainer, overlayContainer);
         _class_private_field_set(this, _isRtl, isRtl);
         _class_private_field_set(this, _sanitizer, sanitizer);
         this.install();