handsontable 16.2.0 → 17.0.0-rc10

package/editors/multiSelectEditor/controllers/inputController.mjs

@@ -0,0 +1,96 @@
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+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 { mixin } from "../../../helpers/object.mjs";
+import localHooks from "../../../mixins/localHooks.mjs";
+/**
+ * Controller for managing the input.
+ *
+ * @private
+ * @class InputController
+ */
+var _InputController_brand = /*#__PURE__*/new WeakSet();
+export class InputController {
+  /**
+   * Creates a new InputController.
+   *
+   * @param {object} options Options object.
+   * @param {HTMLInputElement} options.input Input element.
+   * @param {EventManager} options.eventManager Event manager.
+   */
+  constructor(_ref) {
+    let {
+      input,
+      eventManager
+    } = _ref;
+    /**
+     * Triggers the filtering.
+     *
+     * @param {string} value The value of the input.
+     */
+    _classPrivateMethodInitSpec(this, _InputController_brand);
+    this.input = input;
+    this.eventManager = eventManager;
+    this.enabled = true;
+    this.onInput = this.onInput.bind(this);
+  }
+
+  /**
+   * Gets the input element.
+   *
+   * @returns {HTMLInputElement} The input element.
+   */
+  getInputElement() {
+    return this.input;
+  }
+
+  /**
+   * Sets the value of the input.
+   *
+   * @param {string} value The value to set.
+   */
+  setValue(value) {
+    this.input.value = value;
+  }
+
+  /**
+   * Toggles the input.
+   *
+   * @param {boolean} enabled If true, the input will be enabled.
+   */
+  toggle(enabled) {
+    this.enabled = enabled;
+    if (this.input) {
+      if (enabled) {
+        this.listen();
+      } else {
+        this.unlisten();
+      }
+    }
+  }
+
+  /**
+   * Listens to the input keyup event.
+   */
+  listen() {
+    this.eventManager.addEventListener(this.input, 'input', this.onInput);
+  }
+
+  /**
+   * Unlistens to the input keyup event.
+   */
+  unlisten() {
+    this.eventManager.removeEventListener(this.input, 'input', this.onInput);
+  }
+
+  /**
+   * OnInput listener.
+   */
+  onInput() {
+    _assertClassBrand(_InputController_brand, this, _triggerFilter).call(this, this.input.value);
+  }
+}
+function _triggerFilter(value) {
+  this.runLocalHooks('triggerFilter', value);
+}
+mixin(InputController, localHooks);

package/editors/multiSelectEditor/controllers/selectedItemsController.js

@@ -0,0 +1,124 @@
+"use strict";
+
+exports.__esModule = true;
+var _object = require("../../../helpers/object");
+var _utils = require("../utils/utils");
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Controller for managing the selected items.
+ *
+ * @private
+ * @class SelectedItemsController
+ */
+class SelectedItemsController {
+  /**
+   * Creates a new SelectedItemsController.
+   *
+   * @param {Array<*>|undefined} selectedItems Array of selected items.
+   */
+  constructor(selectedItems) {
+    var _this$selectedItems;
+    /**
+     * Set of selected items.
+     *
+     * @private
+     * @type {Set<*>}
+     */
+    _defineProperty(this, "selectedItems", (_this$selectedItems = this.selectedItems) !== null && _this$selectedItems !== void 0 ? _this$selectedItems : new Set());
+    /**
+     * Maximum number of selections.
+     *
+     * @private
+     * @type {number}
+     */
+    _defineProperty(this, "maxSelectionsCount", Infinity);
+    if (Array.isArray(selectedItems)) {
+      this.selectedItems = new Set(selectedItems);
+    } else {
+      this.selectedItems = new Set();
+    }
+  }
+
+  /**
+   * Sets the maximum number of selections.
+   *
+   * @param {number} maxSelectionsCount Maximum number of selections.
+   */
+  setMaxSelectionCount(maxSelectionsCount) {
+    this.maxSelectionsCount = maxSelectionsCount;
+  }
+
+  /**
+   * Adds selected values (single or array) to the set.
+   *
+   * @param {string|object|Array<string|object>} items Items to add.
+   */
+  add(items) {
+    if (this.selectedItems.size >= this.maxSelectionsCount) {
+      return;
+    }
+    if (Array.isArray(items)) {
+      items.forEach(item => this.selectedItems.add(item));
+    } else {
+      this.selectedItems.add(items);
+    }
+  }
+
+  /**
+   * Removes a selected value from the set.
+   *
+   * @param {string|object} item Item to remove.
+   * @returns {boolean} True if the item was removed, false otherwise.
+   */
+  remove(item) {
+    if ((0, _object.isKeyValueObject)(item)) {
+      const itemsArray = Array.from(this.selectedItems);
+      const foundItem = itemsArray.find(selectedItem => (0, _object.isObjectEqual)(selectedItem, item));
+      if (foundItem !== undefined) {
+        this.selectedItems.delete(foundItem);
+        return true;
+      }
+    } else {
+      return this.selectedItems.delete(item);
+    }
+    return false;
+  }
+
+  /**
+   * Checks if a value is in the set.
+   *
+   * @param {*} value Value to check.
+   * @returns {boolean}
+   */
+  has(value) {
+    return (0, _utils.includesValue)(this.getItemsArray(), value);
+  }
+
+  /**
+   * Clears the set.
+   */
+  clear() {
+    this.selectedItems.clear();
+  }
+
+  /**
+   * Gets the number of selected items.
+   *
+   * @returns {number}
+   */
+  getSize() {
+    return this.selectedItems.size;
+  }
+
+  /**
+   * Gets the elements of the set.
+   *
+   * @returns {Array<*>}
+   */
+  getItemsArray() {
+    return Array.from(this.selectedItems);
+  }
+}
+exports.SelectedItemsController = SelectedItemsController;

package/editors/multiSelectEditor/controllers/selectedItemsController.mjs

@@ -0,0 +1,120 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { isObjectEqual, isKeyValueObject } from "../../../helpers/object.mjs";
+import { includesValue } from "../utils/utils.mjs";
+/**
+ * Controller for managing the selected items.
+ *
+ * @private
+ * @class SelectedItemsController
+ */
+export class SelectedItemsController {
+  /**
+   * Creates a new SelectedItemsController.
+   *
+   * @param {Array<*>|undefined} selectedItems Array of selected items.
+   */
+  constructor(selectedItems) {
+    var _this$selectedItems;
+    /**
+     * Set of selected items.
+     *
+     * @private
+     * @type {Set<*>}
+     */
+    _defineProperty(this, "selectedItems", (_this$selectedItems = this.selectedItems) !== null && _this$selectedItems !== void 0 ? _this$selectedItems : new Set());
+    /**
+     * Maximum number of selections.
+     *
+     * @private
+     * @type {number}
+     */
+    _defineProperty(this, "maxSelectionsCount", Infinity);
+    if (Array.isArray(selectedItems)) {
+      this.selectedItems = new Set(selectedItems);
+    } else {
+      this.selectedItems = new Set();
+    }
+  }
+
+  /**
+   * Sets the maximum number of selections.
+   *
+   * @param {number} maxSelectionsCount Maximum number of selections.
+   */
+  setMaxSelectionCount(maxSelectionsCount) {
+    this.maxSelectionsCount = maxSelectionsCount;
+  }
+
+  /**
+   * Adds selected values (single or array) to the set.
+   *
+   * @param {string|object|Array<string|object>} items Items to add.
+   */
+  add(items) {
+    if (this.selectedItems.size >= this.maxSelectionsCount) {
+      return;
+    }
+    if (Array.isArray(items)) {
+      items.forEach(item => this.selectedItems.add(item));
+    } else {
+      this.selectedItems.add(items);
+    }
+  }
+
+  /**
+   * Removes a selected value from the set.
+   *
+   * @param {string|object} item Item to remove.
+   * @returns {boolean} True if the item was removed, false otherwise.
+   */
+  remove(item) {
+    if (isKeyValueObject(item)) {
+      const itemsArray = Array.from(this.selectedItems);
+      const foundItem = itemsArray.find(selectedItem => isObjectEqual(selectedItem, item));
+      if (foundItem !== undefined) {
+        this.selectedItems.delete(foundItem);
+        return true;
+      }
+    } else {
+      return this.selectedItems.delete(item);
+    }
+    return false;
+  }
+
+  /**
+   * Checks if a value is in the set.
+   *
+   * @param {*} value Value to check.
+   * @returns {boolean}
+   */
+  has(value) {
+    return includesValue(this.getItemsArray(), value);
+  }
+
+  /**
+   * Clears the set.
+   */
+  clear() {
+    this.selectedItems.clear();
+  }
+
+  /**
+   * Gets the number of selected items.
+   *
+   * @returns {number}
+   */
+  getSize() {
+    return this.selectedItems.size;
+  }
+
+  /**
+   * Gets the elements of the set.
+   *
+   * @returns {Array<*>}
+   */
+  getItemsArray() {
+    return Array.from(this.selectedItems);
+  }
+}

package/editors/multiSelectEditor/controllers/utils.js

@@ -0,0 +1,277 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createListElement = createListElement;
+exports.createListItemElement = createListItemElement;
+exports.createSearchIcon = createSearchIcon;
+exports.createSearchInputElement = createSearchInputElement;
+exports.createSearchInputWrapper = createSearchInputWrapper;
+exports.createSeparatorElement = createSeparatorElement;
+exports.defocusItem = defocusItem;
+exports.deselectAllItems = deselectAllItems;
+exports.deselectItem = deselectItem;
+exports.disableUncheckedCheckboxes = disableUncheckedCheckboxes;
+exports.enableAllCheckboxes = enableAllCheckboxes;
+exports.focusItemAt = focusItemAt;
+exports.getDropdownWidth = getDropdownWidth;
+exports.selectItem = selectItem;
+var _element = require("../../../helpers/dom/element");
+var _a11y = require("../../../helpers/a11y");
+var _utils = require("../utils/utils");
+const classPrefix = 'ht-multi-select-editor';
+const SEARCH_INPUT_WRAPPER_CLASS = `${classPrefix}-search-input-wrapper`;
+const SEARCH_ICON_CLASS = `${classPrefix}-search-icon`;
+const SEARCH_INPUT_CLASS = `${classPrefix}-search-input`;
+const SEPARATOR_CLASS = `${classPrefix}-separator`;
+const SEARCH_INPUT_PLACEHOLDER = 'Search...';
+const SEARCH_INPUT_ARIA_LABEL = 'Search options';
+const CHECKBOX_ID_PREFIX = `${classPrefix}-item-`;
+const SELECTED_ITEM_CLASS = exports.SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
+
+/**
+ * Applies visual selection state and checks the checkbox.
+ *
+ * @param {HTMLLIElement} itemElement Dropdown row element.
+ */
+function selectItem(itemElement) {
+  const checkbox = (0, _utils.getCheckboxElement)(itemElement);
+  (0, _element.addClass)(itemElement, SELECTED_ITEM_CLASS);
+  if (!checkbox.checked) {
+    checkbox.checked = true;
+  }
+}
+
+/**
+ * Clears selection classes and unchecks the checkbox.
+ *
+ * @param {HTMLLIElement} itemElement Dropdown row element.
+ */
+function deselectItem(itemElement) {
+  const checkbox = (0, _utils.getCheckboxElement)(itemElement);
+  (0, _element.removeClass)(itemElement, SELECTED_ITEM_CLASS);
+  if (checkbox.checked) {
+    checkbox.checked = false;
+  }
+}
+
+/**
+ * Creates the wrapper div for the search input.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.root Root document element.
+ * @returns {HTMLDivElement}
+ */
+function createSearchInputWrapper(_ref) {
+  let {
+    root
+  } = _ref;
+  const wrapperElement = root.createElement('div');
+  wrapperElement.className = SEARCH_INPUT_WRAPPER_CLASS;
+  return wrapperElement;
+}
+
+/**
+ * Creates the search icon element.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.root Root document element.
+ * @returns {HTMLElement}
+ */
+function createSearchIcon(_ref2) {
+  let {
+    root
+  } = _ref2;
+  const iconElement = root.createElement('div');
+  (0, _element.addClass)(iconElement, SEARCH_ICON_CLASS);
+  (0, _element.setAttribute)(iconElement, [(0, _a11y.A11Y_HIDDEN)()]);
+  return iconElement;
+}
+
+/**
+ * Creates the search input element.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.root Root document element.
+ * @returns {HTMLInputElement}
+ */
+function createSearchInputElement(_ref3) {
+  let {
+    root
+  } = _ref3;
+  const inputElement = root.createElement('input');
+  (0, _element.setAttribute)(inputElement, [(0, _a11y.A11Y_LABEL)(SEARCH_INPUT_ARIA_LABEL), ['type', 'text'], ['size', 3], ['placeholder', SEARCH_INPUT_PLACEHOLDER], ['id', SEARCH_INPUT_CLASS]]);
+  (0, _element.addClass)(inputElement, SEARCH_INPUT_CLASS);
+  return inputElement;
+}
+
+/**
+ * Creates the separator line element.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.root Root document element.
+ * @returns {HTMLElement}
+ */
+function createSeparatorElement(_ref4) {
+  let {
+    root
+  } = _ref4;
+  const separatorElement = root.createElement('div');
+  separatorElement.className = SEPARATOR_CLASS;
+  return separatorElement;
+}
+
+/**
+ * Creates the list element that holds dropdown items.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.root Root document element.
+ * @returns {HTMLUListElement}
+ */
+function createListElement(_ref5) {
+  let {
+    root
+  } = _ref5;
+  return root.createElement('ul');
+}
+
+/**
+ * Gets the width of the dropdown.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ * @returns {number} Width of the dropdown.
+ */
+function getDropdownWidth(_ref6) {
+  let {
+    dropdownListElement
+  } = _ref6;
+  return dropdownListElement.offsetWidth;
+}
+
+/**
+ * Deselects all items in the dropdown.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ */
+function deselectAllItems(_ref7) {
+  let {
+    dropdownListElement
+  } = _ref7;
+  dropdownListElement.querySelectorAll(`.${SELECTED_ITEM_CLASS}`).forEach(itemElement => deselectItem(itemElement));
+}
+
+/**
+ * Defocuses the item at the given index.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ * @param {number} options.index Index of the item to defocus.
+ */
+function defocusItem(_ref8) {
+  let {
+    dropdownListElement,
+    index
+  } = _ref8;
+  const itemElement = dropdownListElement.children[index];
+  if (itemElement) {
+    const checkbox = (0, _utils.getCheckboxElement)(itemElement);
+    if (checkbox) {
+      checkbox.blur();
+    }
+  }
+}
+
+/**
+ * Focuses the item at the given index.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ * @param {number} options.index Index of the item to focus.
+ */
+function focusItemAt(_ref9) {
+  let {
+    dropdownListElement,
+    index
+  } = _ref9;
+  const itemElement = dropdownListElement.children[index];
+  if (itemElement) {
+    const checkbox = (0, _utils.getCheckboxElement)(itemElement);
+    if (checkbox) {
+      checkbox.focus();
+    }
+  }
+}
+
+/**
+ * Disables the unchecked checkboxes in the dropdown.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ */
+function disableUncheckedCheckboxes(_ref0) {
+  let {
+    dropdownListElement
+  } = _ref0;
+  dropdownListElement.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach(checkbox => {
+    checkbox.dataset.disabled = true;
+  });
+}
+
+/**
+ * Enables all checkboxes in the dropdown.
+ *
+ * @param {object} options Options object.
+ * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
+ */
+function enableAllCheckboxes(_ref1) {
+  let {
+    dropdownListElement
+  } = _ref1;
+  dropdownListElement.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+    checkbox.dataset.disabled = false;
+  });
+}
+
+/**
+ * Creates a single dropdown row with a checkbox and label.
+ *
+ * @param {object} options Options object.
+ * @param {Document} options.rootDocument Root document element.
+ * @param {string} options.instanceId Handsontable instance id.
+ * @param {string} options.itemKey Key stored in the associated checkbox dataset.
+ * @param {string} options.itemValue Text shown next to the checkbox.
+ * @param {number} options.indexWithinList Index of the item within the list.
+ * @param {boolean} [options.checked=false] Flag indicating whether the checkbox starts selected.
+ * @param {boolean} [options.disabled=false] Flag indicating whether the checkbox starts disabled.
+ * @returns {HTMLLIElement}
+ */
+function createListItemElement(_ref10) {
+  let {
+    rootDocument,
+    instanceId,
+    itemKey,
+    itemValue,
+    indexWithinList,
+    checked = false,
+    disabled = false
+  } = _ref10;
+  const itemElement = rootDocument.createElement('li');
+  const innerContainer = rootDocument.createElement('div');
+  const checkboxElement = rootDocument.createElement('input');
+  const labelElement = rootDocument.createElement('label');
+  checkboxElement.id = `${instanceId}-${CHECKBOX_ID_PREFIX}${indexWithinList}`;
+  checkboxElement.type = 'checkbox';
+  checkboxElement.dataset.value = itemValue;
+  checkboxElement.dataset.index = indexWithinList;
+  checkboxElement.dataset.disabled = checked ? false : disabled;
+  if (itemKey) {
+    checkboxElement.dataset.key = itemKey;
+  }
+  labelElement.htmlFor = checkboxElement.id;
+  labelElement.textContent = itemValue;
+  innerContainer.appendChild(checkboxElement);
+  innerContainer.appendChild(labelElement);
+  itemElement.appendChild(innerContainer);
+  return itemElement;
+}