handsontable 16.1.1-next-895fbb8-20250923 → 16.2.0-next-216dbd0-20251112

package/plugins/dialog/dialog.mjs

@@ -1,4 +1,8 @@
 import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.array.at.js";
+import "core-js/modules/es.string.at-alternative.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.every.js";
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -7,8 +11,8 @@ function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 import { BasePlugin } from "../base/index.mjs";
 import { DialogUI } from "./ui.mjs";
-import { installFocusDetector } from "../../utils/focusDetector.mjs";
 import { isObject } from "../../helpers/object.mjs";
+import * as C from "../../i18n/constants.mjs";
 export const PLUGIN_KEY = 'dialog';
 export const PLUGIN_PRIORITY = 360;
 const SHORTCUTS_GROUP = PLUGIN_KEY;
@@ -26,6 +30,15 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * In order to enable the dialog mechanism, {@link Options#dialog} option must be set to `true`.
  *
  * The plugin provides several configuration options to customize the dialog behavior and appearance:
+ * - `template`: The template to use for the dialog (default: `null`). The error will be thrown when
+ * the template is provided together with the `content` option.
+ *   - `type`: The type of the template ('confirm')
+ *   - `title`: The title of the dialog
+ *   - `description`: The description of the dialog (default: '')
+ *   - `buttons`: The buttons to display in the dialog (default: [])
+ *     - `text`: The text of the button
+ *     - `type`: The type of the button ('primary' | 'secondary')
+ *     - `callback`: The callback to trigger when the button is clicked
  * - `content`: The string or HTMLElement content to display in the dialog (default: '')
  * - `customClassName`: Custom class name to apply to the dialog (default: '')
  * - `background`: Dialog background variant 'solid' | 'semi-transparent' (default: 'solid')
@@ -33,14 +46,10 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  * - `animation`: Whether to enable animations (default: true)
  * - `closable`: Whether the dialog can be closed (default: false)
  * - `a11y`: Object with accessibility options (default object below)
- * ```js
- * {
- *   role: 'dialog', // Role of the dialog 'dialog' | 'alertdialog' (default: 'dialog')
- *   ariaLabel: 'Dialog', // Label for the dialog (default: 'Dialog')
- *   ariaLabelledby: '', // ID of the element that labels the dialog (default: '')
- *   ariaDescribedby: '', // ID of the element that describes the dialog (default: ''),
- * }
- * ```
+ *   - `role`: The role of the dialog ('dialog' | 'alertdialog') (default: 'dialog')
+ *   - `ariaLabel`: The label of the dialog (default: 'Dialog')
+ *   - `ariaLabelledby`: The ID of the element that labels the dialog (default: '')
+ *   - `ariaDescribedby`: The ID of the element that describes the dialog (default: ''),
  *
  * @example
  *
@@ -65,6 +74,31 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  *   }
  * }
  *
+ * // Enable dialog plugin using prebuild templates
+ * dialog: {
+ *   template: {
+ *     type: 'confirm',
+ *     title: 'Confirm',
+ *     description: 'This is a confirm',
+ *     buttons: [
+ *       {
+ *         text: 'Ok',
+ *         type: 'primary',
+ *         callback: () => {
+ *           console.log('Ok');
+ *         }
+ *       },
+ *       {
+ *         text: 'Cancel',
+ *         type: 'secondary',
+ *         callback: () => {
+ *           console.log('Cancel');
+ *         }
+ *       },
+ *     ],
+ *   },
+ * }
+ *
  * // Access to dialog plugin instance:
  * const dialogPlugin = hot.getPlugin('dialog');
  *
@@ -136,7 +170,6 @@ const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
  */
 var _ui = /*#__PURE__*/new WeakMap();
 var _isVisible = /*#__PURE__*/new WeakMap();
-var _focusDetector = /*#__PURE__*/new WeakMap();
 var _selectionState = /*#__PURE__*/new WeakMap();
 var _Dialog_brand = /*#__PURE__*/new WeakSet();
 export class Dialog extends BasePlugin {
@@ -158,12 +191,6 @@ export class Dialog extends BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _isVisible, false);
-    /**
-     * Focus detector instance.
-     *
-     * @type {FocusDetector}
-     */
-    _classPrivateFieldInitSpec(this, _focusDetector, null);
     /**
      * Keeps the selection state that will be restored after the dialog is closed.
      *
@@ -179,6 +206,7 @@ export class Dialog extends BasePlugin {
   }
   static get DEFAULT_SETTINGS() {
     return {
+      template: null,
       content: '',
       customClassName: '',
       background: 'solid',
@@ -195,6 +223,7 @@ export class Dialog extends BasePlugin {
   }
   static get SETTINGS_VALIDATORS() {
     return {
+      template: value => isObject(value) && typeof ['alert', 'confirm'].includes(value.type) && typeof value.title === 'string' && (typeof (value === null || value === void 0 ? void 0 : value.description) === 'undefined' || typeof (value === null || value === void 0 ? void 0 : value.description) === 'string') && (typeof (value === null || value === void 0 ? void 0 : value.buttons) === 'undefined' || Array.isArray(value === null || value === void 0 ? void 0 : value.buttons) && value.buttons.every(item => typeof item === 'object' && 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,
       customClassName: value => typeof value === 'string',
       background: value => ['solid', 'semi-transparent'].includes(value),
@@ -225,20 +254,10 @@ export class Dialog extends BasePlugin {
         rootElement: this.hot.rootGridElement,
         isRtl: this.hot.isRtl()
       }));
-      _classPrivateFieldGet(_ui, this).addLocalHook('clickDialogElement', () => _assertClassBrand(_Dialog_brand, this, _onDialogClick).call(this));
-      _classPrivateFieldSet(_focusDetector, this, installFocusDetector(this.hot, _classPrivateFieldGet(_ui, this).getDialogElement(), {
-        onFocus: from => {
-          this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-          this.hot.listen();
-          this.hot.runHooks('afterDialogFocus', `tab_${from}`);
-        }
-      }));
     }
     _assertClassBrand(_Dialog_brand, this, _registerShortcuts).call(this);
-    this.addHook('modifyFocusOnTabNavigation', from => _assertClassBrand(_Dialog_brand, this, _onFocusTabNavigation).call(this, from), 1);
-    this.addHook('afterViewRender', () => _assertClassBrand(_Dialog_brand, this, _onAfterRender).call(this));
-    this.addHook('afterListen', () => _assertClassBrand(_Dialog_brand, this, _onAfterListen).call(this));
-    this.addHook('afterUnlisten', () => _assertClassBrand(_Dialog_brand, this, _onAfterUnlisten).call(this));
+    _assertClassBrand(_Dialog_brand, this, _registerFocusScope).call(this);
+    this.addHook('afterViewRender', () => _assertClassBrand(_Dialog_brand, this, _onAfterViewRender).call(this));
     super.enablePlugin();
   }
 
@@ -257,8 +276,10 @@ export class Dialog extends BasePlugin {
   disablePlugin() {
     this.hide();
     _assertClassBrand(_Dialog_brand, this, _unregisterShortcuts).call(this);
+    _assertClassBrand(_Dialog_brand, this, _unregisterFocusScope).call(this);
     super.disablePlugin();
   }
+
   /**
    * Check if the dialog is currently visible.
    *
@@ -273,6 +294,15 @@ export class Dialog extends BasePlugin {
    * Displays the dialog with the specified content and options.
    *
    * @param {object} options Dialog configuration object containing content and display options.
+   * @param {object} options.template The template to use for the dialog (default: `null`). The error will be thrown when
+   * the template is provided together with the `content` option.
+   * @param {'confirm'} options.template.type The type of the template ('confirm').
+   * @param {string} options.template.title The title of the dialog.
+   * @param {string} options.template.description The description of the dialog. Default: ''.
+   * @param {object[]} options.template.buttons The buttons to display in the dialog. Default: [].
+   * @param {string} options.template.buttons.text The text of the button.
+   * @param {'primary' | 'secondary'} options.template.buttons.type The type of the button.
+   * @param {function(MouseEvent)} options.template.buttons.callback The callback to trigger when the button is clicked.
    * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
    * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
    * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
@@ -298,19 +328,10 @@ export class Dialog extends BasePlugin {
     this.update(options);
     _classPrivateFieldGet(_ui, this).showDialog(this.getSetting('animation'));
     _classPrivateFieldSet(_isVisible, this, true);
+    this.hot.getFocusScopeManager().activateScope(PLUGIN_KEY);
     _classPrivateFieldSet(_selectionState, this, this.hot.selection.exportSelection());
     this.hot.deselectCell();
     this.hot.runHooks('afterDialogShow');
-    const {
-      activeElement
-    } = this.hot.rootDocument;
-    if (this.hot.rootWrapperElement.contains(activeElement) || this.hot.rootPortalElement.contains(activeElement)) {
-      this.hot.unlisten();
-      this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-      this.hot.listen();
-      _classPrivateFieldGet(_ui, this).focusDialog();
-      this.hot.runHooks('afterDialogFocus', 'show');
-    }
   }
 
   /**
@@ -318,14 +339,15 @@ export class Dialog extends BasePlugin {
    * Closes the dialog and restores the focus to the table.
    */
   hide() {
+    var _classPrivateFieldGet2;
     if (!this.isVisible()) {
       return;
     }
     this.hot.runHooks('beforeDialogHide');
     _classPrivateFieldGet(_ui, this).hideDialog(this.getSetting('animation'));
-    this.hot.getShortcutManager().setActiveContextName('grid');
     _classPrivateFieldSet(_isVisible, this, false);
-    if (_classPrivateFieldGet(_selectionState, this)) {
+    this.hot.getFocusScopeManager().deactivateScope(PLUGIN_KEY);
+    if (((_classPrivateFieldGet2 = _classPrivateFieldGet(_selectionState, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.ranges.length) > 0) {
       this.hot.selection.importSelection(_classPrivateFieldGet(_selectionState, this));
       this.hot.view.render();
       _classPrivateFieldSet(_selectionState, this, null);
@@ -339,6 +361,15 @@ export class Dialog extends BasePlugin {
    * Update the dialog configuration.
    *
    * @param {object} options Dialog configuration object containing content and display options.
+   * @param {object} options.template The template to use for the dialog (default: `null`). The error will be thrown when
+   * the template is provided together with the `content` option.
+   * @param {'confirm'} options.template.type The type of the template ('confirm').
+   * @param {string} options.template.title The title of the dialog.
+   * @param {string} options.template.description The description of the dialog. Default: ''.
+   * @param {object[]} options.template.buttons The buttons to display in the dialog. Default: [].
+   * @param {string} options.template.buttons.text The text of the button.
+   * @param {'primary' | 'secondary'} options.template.buttons.type The type of the button.
+   * @param {function(MouseEvent)} options.template.buttons.callback The callback to trigger when the button is clicked.
    * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
    * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
    * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
@@ -356,6 +387,18 @@ export class Dialog extends BasePlugin {
       return;
     }
     this.updatePluginSettings(options);
+    const templateValue = this.getSetting('template');
+    if (templateValue !== Dialog.DEFAULT_SETTINGS.template && this.getSetting('content') !== Dialog.DEFAULT_SETTINGS.content) {
+      throw new Error('The `template` option cannot be used together with the `content` option.');
+    }
+    if (templateValue) {
+      _classPrivateFieldGet(_ui, this).useTemplate(templateValue.type, {
+        id: this.hot.guid,
+        ...templateValue
+      });
+    } else {
+      _classPrivateFieldGet(_ui, this).useDefaultTemplate();
+    }
     _classPrivateFieldGet(_ui, this).updateDialog({
       isVisible: this.isVisible(),
       content: this.getSetting('content'),
@@ -368,28 +411,103 @@ export class Dialog extends BasePlugin {
   }
 
   /**
-   * Focus the dialog.
+   * Displays the alert dialog with the specified content.
+   *
+   * @param {string | { title: string, description: string }} message The message to display in the dialog.
+   * Can be a string or an object with `title` and `description` properties.
+   * @param {function(MouseEvent): void} [callback] The callback to trigger when the button is clicked.
    */
-  focus() {
-    _classPrivateFieldGet(_ui, this).focusDialog();
+  showAlert(message, callback) {
+    const {
+      title = 'Alert',
+      description
+    } = isObject(message) ? message : {
+      title: message
+    };
+    this.show({
+      template: {
+        type: 'confirm',
+        title,
+        description,
+        buttons: [{
+          text: this.hot.getTranslatedPhrase(C.OK),
+          type: 'primary',
+          callback: function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+            return callback === null || callback === void 0 ? void 0 : callback(...args);
+          }
+        }]
+      },
+      contentBackground: false,
+      background: 'solid',
+      animation: true,
+      closable: false
+    });
   }
 
   /**
-   * Handle focus tab navigation event.
+   * Displays the confirm dialog with the specified content and options.
    *
-   * @param {'from_above' | 'from_below'} from The direction from which the focus was modified.
-   * @returns {boolean} Returns `false` to prevent the default focus behavior.
+   * @param {string | { title: string, description: string }} message The message to display in the dialog.
+   * Can be a string or an object with `title` and `description` properties.
+   * @param {function(MouseEvent): void} [onOk] The callback to trigger when the OK button is clicked.
+   * @param {function(MouseEvent): void} [onCancel] The callback to trigger when the Cancel button is clicked.
    */
+  showConfirm(message, onOk, onCancel) {
+    const {
+      title = 'Confirm',
+      description
+    } = isObject(message) ? message : {
+      title: message
+    };
+    this.show({
+      template: {
+        type: 'confirm',
+        title,
+        description,
+        buttons: [{
+          text: this.hot.getTranslatedPhrase(C.CANCEL),
+          type: 'secondary',
+          callback: function () {
+            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+              args[_key2] = arguments[_key2];
+            }
+            return onCancel === null || onCancel === void 0 ? void 0 : onCancel(...args);
+          }
+        }, {
+          text: this.hot.getTranslatedPhrase(C.OK),
+          type: 'primary',
+          callback: function () {
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = arguments[_key3];
+            }
+            return onOk === null || onOk === void 0 ? void 0 : onOk(...args);
+          }
+        }]
+      },
+      contentBackground: true,
+      background: 'semi-transparent',
+      animation: true,
+      closable: false
+    });
+  }
 
+  /**
+   * Focus the dialog.
+   */
+  focus() {
+    _classPrivateFieldGet(_ui, this).focusDialog();
+  }
   /**
    * Destroy dialog and reset plugin state.
    */
   destroy() {
-    var _classPrivateFieldGet2;
-    (_classPrivateFieldGet2 = _classPrivateFieldGet(_ui, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.destroyDialog();
+    var _classPrivateFieldGet3;
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_ui, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroyDialog();
     _classPrivateFieldSet(_ui, this, null);
     _classPrivateFieldSet(_isVisible, this, false);
-    _classPrivateFieldSet(_focusDetector, this, null);
     _classPrivateFieldSet(_selectionState, this, null);
     super.destroy();
   }
@@ -411,19 +529,12 @@ function _registerShortcuts() {
     preventDefault: false,
     callback: event => {
       this.hot._registerTimeout(() => {
-        const {
-          activeElement
-        } = this.hot.rootDocument;
-        if (!_classPrivateFieldGet(_ui, this).isInsideDialog(activeElement)) {
-          this.hot.unlisten();
-          return;
-        }
         if (event.shiftKey) {
           this.hot.runHooks('dialogFocusPreviousElement');
         } else {
           this.hot.runHooks('dialogFocusNextElement');
         }
-      }, 0);
+      });
     },
     group: SHORTCUTS_GROUP
   });
@@ -436,39 +547,43 @@ function _unregisterShortcuts() {
   const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
   pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
 }
-function _onFocusTabNavigation(from) {
-  if (this.isVisible()) {
-    _classPrivateFieldGet(_focusDetector, this).focus(from);
-    return false;
-  }
-}
 /**
- * Handle dialog click event.
+ * Registers the focus scope for the dialog plugin.
  */
-function _onDialogClick() {
-  if (this.isVisible() && !this.hot.isListening()) {
-    this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
-    this.hot.runHooks('afterDialogFocus', 'click');
-  }
-  this.hot.listen();
-}
-/**
- * Called after the table is listened.
- */
-function _onAfterListen() {
-  _classPrivateFieldGet(_focusDetector, this).deactivate();
+function _registerFocusScope() {
+  this.hot.getFocusScopeManager().registerScope(PLUGIN_KEY, _classPrivateFieldGet(_ui, this).getContainer(), {
+    shortcutsContextName: SHORTCUTS_CONTEXT_NAME,
+    type: 'modal',
+    runOnlyIf: () => this.isVisible(),
+    onActivate: focusSource => {
+      const isListening = this.hot.isListening();
+      const focusableElements = _classPrivateFieldGet(_ui, this).getFocusableElements();
+      if (focusableElements.length > 0) {
+        if (focusSource === 'tab_from_above') {
+          focusableElements.at(0).focus();
+        } else if (focusSource === 'tab_from_below') {
+          focusableElements.at(-1).focus();
+        }
+      } else if (focusSource !== 'tab_from_above' && focusSource !== 'tab_from_below' && isListening && !_classPrivateFieldGet(_ui, this).getContainer().contains(this.hot.rootDocument.activeElement)) {
+        _classPrivateFieldGet(_ui, this).getContainer().focus();
+      }
+      if (isListening) {
+        this.hot.runHooks('afterDialogFocus', focusSource === 'unknown' ? 'show' : focusSource);
+      }
+    }
+  });
 }
 /**
- * Called after the table is unlistened.
+ * Unregisters the focus scope for the dialog plugin.
  */
-function _onAfterUnlisten() {
-  _classPrivateFieldGet(_focusDetector, this).activate();
+function _unregisterFocusScope() {
+  this.hot.getFocusScopeManager().unregisterScope(PLUGIN_KEY);
 }
 /**
  * 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.
  */
-function _onAfterRender() {
+function _onAfterViewRender() {
   const {
     view,
     rootWrapperElement,
@@ -479,7 +594,7 @@ function _onAfterRender() {
   const dialogInfo = rootWrapperElement.querySelector('.hot-display-license-info');
   if (dialogInfo) {
     const height = dialogInfo.offsetHeight;
-    const marginTop = parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
+    const marginTop = Number.parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
     _classPrivateFieldGet(_ui, this).updateHeight(height + marginTop);
   }
 }

package/plugins/dialog/templates/base.js

@@ -0,0 +1,60 @@
+"use strict";
+
+exports.__esModule = true;
+exports.baseTemplate = baseTemplate;
+require("core-js/modules/es.error.cause.js");
+var _constants = require("../constants");
+var _templateLiteralTag = require("../../../helpers/templateLiteralTag");
+/**
+ * The `baseTemplate` function returns a HTML string with the base template.
+ *
+ * @returns {string} HTML string with the base template.
+ */
+function baseTemplate() {
+  /**
+   * Returns the HTML string for the template.
+   *
+   * @returns {string}
+   */
+  function template() {
+    return `
+      <div data-ref="contentElement" class="${_constants.DIALOG_CLASS_NAME}__content"></div>
+    `;
+  }
+  let fragment = null;
+  const refs = {};
+
+  /**
+   * Compiles the template.
+   *
+   * @returns {object} The compiled template.
+   */
+  function compile() {
+    const elements = (0, _templateLiteralTag.html)`${template()}`;
+    Object.assign(refs, elements.refs);
+    fragment = elements.fragment;
+    return elements;
+  }
+
+  /**
+   * Gets the focusable elements of the template.
+   *
+   * @returns {HTMLElement[]} The focusable elements.
+   */
+  function focusableElements() {
+    if (fragment === null) {
+      throw new Error('Compile the template first.');
+    }
+    return [];
+  }
+  return {
+    TEMPLATE_NAME: 'base',
+    dialogA11YOptions() {
+      return {
+        role: 'dialog'
+      };
+    },
+    compile,
+    focusableElements
+  };
+}

package/plugins/dialog/templates/base.mjs

@@ -0,0 +1,56 @@
+import "core-js/modules/es.error.cause.js";
+import { DIALOG_CLASS_NAME } from "../constants.mjs";
+import { html } from "../../../helpers/templateLiteralTag.mjs";
+/**
+ * The `baseTemplate` function returns a HTML string with the base template.
+ *
+ * @returns {string} HTML string with the base template.
+ */
+export function baseTemplate() {
+  /**
+   * Returns the HTML string for the template.
+   *
+   * @returns {string}
+   */
+  function template() {
+    return `
+      <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
+    `;
+  }
+  let fragment = null;
+  const refs = {};
+
+  /**
+   * Compiles the template.
+   *
+   * @returns {object} The compiled template.
+   */
+  function compile() {
+    const elements = html`${template()}`;
+    Object.assign(refs, elements.refs);
+    fragment = elements.fragment;
+    return elements;
+  }
+
+  /**
+   * Gets the focusable elements of the template.
+   *
+   * @returns {HTMLElement[]} The focusable elements.
+   */
+  function focusableElements() {
+    if (fragment === null) {
+      throw new Error('Compile the template first.');
+    }
+    return [];
+  }
+  return {
+    TEMPLATE_NAME: 'base',
+    dialogA11YOptions() {
+      return {
+        role: 'dialog'
+      };
+    },
+    compile,
+    focusableElements
+  };
+}

package/plugins/dialog/templates/confirm.js

@@ -0,0 +1,106 @@
+"use strict";
+
+exports.__esModule = true;
+exports.confirmTemplate = confirmTemplate;
+require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _constants = require("../constants");
+var _string = require("../../../helpers/string");
+var _templateLiteralTag = require("../../../helpers/templateLiteralTag");
+/**
+ * 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.
+ */
+function confirmTemplate(_ref) {
+  let {
+    id = '',
+    title = '',
+    description = '',
+    buttons = []
+  } = _ref;
+  /**
+   * Returns the HTML string for the template.
+   *
+   * @returns {string}
+   */
+  function template() {
+    return `
+      <div tabindex="-1" data-ref="contentElement" class="${_constants.DIALOG_CLASS_NAME}__content-wrapper-inner">
+        <div class="${_constants.DIALOG_CLASS_NAME}__content">
+          <h2
+            id="${id}-dialog-confirm-title"
+            class="${_constants.DIALOG_CLASS_NAME}__title">${(0, _string.stripTags)(title)}</h2>
+          <p
+            id="${id}-dialog-confirm-description"
+            class="${_constants.DIALOG_CLASS_NAME}__description">${(0, _string.stripTags)(description)}</p>
+        </div>
+        ${buttons.length > 0 ? `
+          <div data-ref="buttonsContainer" class="${_constants.DIALOG_CLASS_NAME}__buttons">
+            ${buttons.map(button => `
+              <button class="ht-button ht-button--${button.type}">${(0, _string.stripTags)(button.text)}</button>
+            `).join('')}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+  let fragment = null;
+  const refs = {};
+
+  /**
+   * Compiles the template.
+   *
+   * @returns {object} The compiled template.
+   */
+  function compile() {
+    const elements = (0, _templateLiteralTag.html)`${template()}`;
+    Object.assign(refs, elements.refs);
+    fragment = elements.fragment;
+    return elements;
+  }
+
+  /**
+   * Gets the focusable elements of the template.
+   *
+   * @returns {HTMLElement[]} The focusable elements.
+   */
+  function focusableElements() {
+    if (fragment === null) {
+      throw new Error('Compile the template first.');
+    }
+    const {
+      contentElement,
+      buttonsContainer
+    } = refs;
+    const elements = [];
+    if (buttonsContainer) {
+      elements.push(...Array.from(buttonsContainer.children));
+    } else {
+      elements.push(contentElement);
+    }
+    return elements;
+  }
+  return {
+    TEMPLATE_NAME: 'confirm',
+    dialogA11YOptions() {
+      return {
+        role: 'alertdialog',
+        ariaLabelledby: `${id}-dialog-confirm-title`,
+        ariaDescribedby: description ? `${id}-dialog-confirm-description` : undefined
+      };
+    },
+    compile,
+    focusableElements
+  };
+}