@limetech/lime-elements 35.0.0-next.3 → 35.0.0-next.4

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
+  return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"selectable":[4],"selection":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-color-picker-palette_2.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}],[1,"limel-popover",{"open":[4]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-list_3.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
   });
 };
 

package/dist/collection/components/table/columns.js

@@ -134,7 +134,7 @@ export function createCustomComponent(cell, column, value, pool) {
  * @param {HTMLElement} element the custom element
  * @param {object} props object of properties and event listeners
  */
-function setElementProperties(element, props) {
+export function setElementProperties(element, props) {
   const properties = pickBy(props, negate(isEventListener));
   Object.assign(element, properties);
   const listeners = pickBy(props, isEventListener);

package/dist/collection/components/table/selection.js

@@ -0,0 +1,111 @@
+/**
+ * Contains a set of selected data objects with methods for adding and removing
+ * items to the selection by referring to them by their index/position.
+ * Maintains a memory of the last toggled item which can be used to select or
+ * deselect a range of items between the last toggled item and a given item.
+ */
+export class Selection {
+  /**
+   * Creates an instance of the Selection class.
+   * The provided function `getDataByIndex` is used to provide data for the
+   * selected items when selection is toggled by using the item index,
+   * which can be the row position in a table.
+   *
+   * @param {Function} getDataByIndex A function that returns the data at the given index
+   */
+  constructor(getDataByIndex) {
+    this.getDataByIndex = getDataByIndex;
+    this.toggleRange = (fromIndex, toIndex) => {
+      const select = !this.selectedItems.has(this.getDataByIndex(toIndex));
+      const lowerBound = Math.min(fromIndex, toIndex);
+      const upperBound = Math.max(fromIndex, toIndex);
+      const updatedIndexes = [];
+      const updatedItems = [];
+      for (let index = lowerBound; index <= upperBound; index++) {
+        const data = this.getDataByIndex(index);
+        if (!data) {
+          continue;
+        }
+        const isSelected = this.selectedItems.has(data);
+        if (isSelected === select) {
+          continue;
+        }
+        if (select) {
+          this.selectedItems.add(data);
+        }
+        else {
+          this.selectedItems.delete(data);
+        }
+        updatedIndexes.push(index);
+        updatedItems.push(data);
+      }
+      this.lastToggledIndex = toIndex;
+      return {
+        selected: select,
+        items: updatedItems,
+        indexes: updatedIndexes,
+      };
+    };
+    this.clear();
+  }
+  /**
+   * @returns {number} The size of the selection
+   */
+  get size() {
+    return this.selectedItems.size;
+  }
+  /**
+   * @returns {any[]} The selected items
+   */
+  get items() {
+    return Array.from(this.selectedItems);
+  }
+  /**
+   * @param {any[]} items The selected items
+   */
+  set items(items) {
+    this.selectedItems = new Set(items);
+    this.lastToggledIndex = -1;
+  }
+  /**
+   * Checks whether the given item exist in the selection
+   *
+   * @param {any} data The data to look up
+   * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
+   */
+  has(data) {
+    return this.selectedItems.has(data);
+  }
+  /**
+   * Toggles the item at the given index in the selection
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelection(index) {
+    return this.toggleRange(index, index);
+  }
+  /**
+   * Toggles the items from the last toggled index to the given index in the selection.
+   * The toggled items will be toggled as the item at the given index no matter
+   * their current state in the selection.
+   * Initially, when no last toggled index exist, this function behaves like
+   * `toggleSelection`.
+   *
+   * @param {number} index The index of the item to toggle
+   * @returns {SelectionChangeSet} The changes made to the selection
+   */
+  toggleSelectionFromLastIndex(index) {
+    if (this.lastToggledIndex < 0) {
+      return this.toggleSelection(index);
+    }
+    return this.toggleRange(this.lastToggledIndex, index);
+  }
+  /**
+   * Clears the current selection and resets last toggled index
+   */
+  clear() {
+    this.selectedItems = new Set();
+    this.lastToggledIndex = -1;
+  }
+}

package/dist/collection/components/table/table-selection.js

@@ -0,0 +1,125 @@
+import { setElementProperties } from './columns';
+import { Selection } from './selection';
+import { isEqual } from 'lodash-es';
+const LIMEL_CHECKBOX = 'limel-checkbox';
+/**
+ * Provides row selection to Tabulator with shift-click support for range selections
+ */
+export class TableSelection {
+  /**
+   * Creates an instance of the TableSelection class
+   *
+   * @param {Function} getTable Function that returns the Tabulator instance
+   * @param {ElementPool} pool The element pool used to cache the checkbox components
+   * @param {EventEmitter<object[]>} selectEvent The event emitter to use when checkboxes are toggled
+   */
+  constructor(getTable, pool, selectEvent) {
+    this.getTable = getTable;
+    this.pool = pool;
+    this.selectEvent = selectEvent;
+    /**
+     * Tabulator cell click handler that updates the selection for the clicked
+     * row and toggles the selection from the last clicked row if the shift key
+     * is pressed down.
+     *
+     * @param {PointerEvent} ev The pointer event
+     * @param {Tabulator.CellComponent} cell The clicked cell component
+     */
+    this.rowSelectorCellClick = (ev, cell) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      const clickedRow = cell.getRow();
+      const rowPosition = clickedRow.getPosition(true);
+      if (ev.shiftKey) {
+        this.updateRowSelectors(this.selection.toggleSelectionFromLastIndex(rowPosition));
+      }
+      else {
+        this.updateRowSelectors(this.selection.toggleSelection(rowPosition));
+      }
+      this.selectEvent.emit(this.selection.items);
+    };
+    this.updateRowSelectors = (changeSet) => {
+      changeSet.indexes
+        .map(this.getRowByIndex)
+        .forEach((row) => this.updateRowSelector(row, changeSet.selected));
+    };
+    this.updateRowSelector = (row, checked) => {
+      const cell = row.getCells()[0];
+      if (cell) {
+        const checkBox = cell.getElement().querySelector(LIMEL_CHECKBOX);
+        checkBox.checked = checked;
+      }
+    };
+    this.getActiveRows = () => {
+      const table = this.getTable();
+      if (!table) {
+        return [];
+      }
+      return table.getRows('active');
+    };
+    this.getRowByIndex = (index) => {
+      return this.getTable().getRowFromPosition(index, true);
+    };
+    this.selection = new Selection((index) => this.getRowByIndex(index).getData());
+  }
+  /**
+   * @returns {boolean} Returns `true` when the selection is non-empty, otherwise `false`
+   */
+  get hasSelection() {
+    return this.selection.size > 0;
+  }
+  /**
+   * Clears the selection
+   */
+  clear() {
+    this.selection.clear();
+  }
+  /**
+   * Sets the selected items
+   *
+   * @param {any[]} data The selected items
+   */
+  setSelection(data) {
+    if (isEqual(this.selection.items, data)) {
+      return;
+    }
+    this.selection.items = data;
+    const rows = this.getActiveRows();
+    rows.forEach((row) => this.updateRowSelector(row, this.selection.has(row.getData())));
+  }
+  /**
+   * Prepends a checkbox column used for row selection to the given column definitions
+   *
+   * @param {Tabulator.ColumnDefinition[]} columnDefinitions The column definition for the table
+   * @returns {Tabulator.ColumnDefinition[]} The column definitions with the checkbox column prepended to it
+   */
+  getColumnDefinitions(columnDefinitions) {
+    return [this.getRowSelectorColumnDefinition(), ...columnDefinitions];
+  }
+  getRowSelectorColumnDefinition() {
+    return {
+      title: '',
+      formatter: this.getRowSelectorFormatter(),
+      cellClick: this.rowSelectorCellClick,
+      headerClick: this.headerClick,
+      headerSort: false,
+      cssClass: 'limel-table--row-selector',
+      resizable: false,
+      htmlOutput: false,
+      clipboard: false,
+    };
+  }
+  headerClick(ev) {
+    ev.stopPropagation();
+  }
+  getRowSelectorFormatter() {
+    return (cell) => {
+      const element = this.pool.get(LIMEL_CHECKBOX);
+      setElementProperties(element, {
+        checked: this.selection.has(cell.getData()),
+      });
+      element.style.display = 'inline-block';
+      return element;
+    };
+  }
+}

package/dist/collection/components/table/table.css

@@ -952,13 +952,13 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   cursor: pointer;
 }
 [aria-sort=none] .tabulator-arrow {
-  border-bottom-color: rgb(var(--contrast-800)) !important;
+  border-bottom-color: rgb(var(--table-arrow-color)) !important;
 }
 [aria-sort=desc] .tabulator-arrow {
-  border-top-color: rgb(var(--color-teal-light)) !important;
+  border-top-color: rgb(var(--table-arrow-color--active)) !important;
 }
 [aria-sort=asc] .tabulator-arrow {
-  border-bottom-color: rgb(var(--color-teal-light)) !important;
+  border-bottom-color: rgb(var(--table-arrow-color--active)) !important;
 }
 .tabulator-arrow:before, .tabulator-arrow:after {
   display: block;
@@ -967,7 +967,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   bottom: 0;
 }
 .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color));
   width: 0.5rem;
   height: 0.5rem;
   transform: rotate(45deg);
@@ -976,7 +976,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 .tabulator-arrow:after {
   width: 0.125rem;
-  background-color: rgb(var(--contrast-800));
+  background-color: rgb(var(--table-arrow-color));
   height: 0.5625rem;
   top: 0.125rem;
   left: -0.0625rem;
@@ -991,7 +991,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   top: -0.6875rem;
 }
 [aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
-  background-color: rgb(var(--color-teal-light));
+  background-color: rgb(var(--table-arrow-color--active));
 }
 
 @keyframes indicate-sortable-column {
@@ -1156,21 +1156,21 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:active {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
-  z-index: 1;
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
+  z-index: 2;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-100));
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:not(.active):hover {
+  background-color: rgb(var(--table-row-background-color--hover));
 }
 
 :host(.has-low-density) #tabulator-table {
@@ -1263,26 +1263,109 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator.has-movable-columns .tabulator-header {
   overflow-y: visible;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col {
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen) {
   cursor: move !important;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving {
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving {
   animation: detach-a-column-header 0.2s ease forwards;
   opacity: 0.9;
   border: none;
   border-radius: 0.25rem;
-  background-color: rgb(var(--contrast-100));
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
   box-shadow: var(--shadow-depth-16);
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving:hover {
-  background-color: rgb(var(--contrast-100));
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving:hover {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
+}
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving .tabulator-arrow:before {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.select-all,
+.limel-table--row-selector {
+  --mdc-checkbox-ripple-size: 1rem;
+}
+
+.select-all {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0.4375rem;
+  width: 2.5625rem;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+.select-all limel-checkbox {
+  transform: translate(-0.25rem, 0);
+}
+
+.limel-table--row-selector {
+  position: sticky !important;
+  left: 0;
+  border-width: 0;
+  justify-content: center;
+  z-index: 1;
+}
+.tabulator-row-odd .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--odd)) 70%, rgb(var(--table-row-background-color--odd), 0));
+}
+.tabulator-row-even .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--even)) 70%, rgb(var(--table-row-background-color--even), 0));
+}
+.tabulator-row.active .limel-table--row-selector, .tabulator-row.active:hover .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--active)) 70%, rgb(var(--table-row-background-color--active), 0));
+}
+.tabulator-row:not(.tabulator-calcs):hover .limel-table--row-selector {
+  will-change: background-image;
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--hover)) 70%, rgb(var(--table-row-background-color--hover), 0));
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-100));
+.limel-table--row-selector limel-checkbox {
+  transition: opacity 0.2s ease;
+  align-self: center;
+  opacity: 0.3;
+  transform: translate(-0.25rem, 0);
+}
+.tabulator-row:hover .limel-table--row-selector limel-checkbox {
+  opacity: 1;
+}
+.has-selection .limel-table--row-selector limel-checkbox {
+  opacity: 1;
+}
+.limel-table--row-selector .tabulator-col-resize-handle {
+  display: none;
+}
+.limel-table--row-selector + .tabulator-col .tabulator-col-resize-handle.prev, .limel-table--row-selector + .tabulator-cell .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator.has-movable-columns .tabulator-header .tabulator-col.limel-table--row-selector {
+  border: none;
+  cursor: default;
+  pointer-events: unset;
+  background-color: transparent;
+  background-image: linear-gradient(to right, rgb(var(--table-header-background-color--hover)) 70%, rgb(var(--table-header-background-color--hover), 0));
+  position: sticky;
+  left: 0;
 }
 
 :host {
   display: block;
+  --table-header-background-color: var(--contrast-500);
+  --table-header-background-color--hover: var(--contrast-400);
+  --table-header-background-color-when-being-dragged: var(--contrast-100);
+  --table-row-background-color--odd: var(--contrast-200);
+  --table-row-background-color--even: var(--contrast-100);
+  --table-row-background-color--hover: var(--contrast-100);
+  --table-row-background-color--active: var(--color-teal-lighter);
+  --table-arrow-color: var(--contrast-800);
+  --table-arrow-color--active: var(--color-teal-default);
 }
 
 #tabulator-container {
@@ -1304,46 +1387,46 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 
 .tabulator .tabulator-header {
   border-bottom: 0;
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
 }
 .tabulator .tabulator-header .tabulator-col {
   transition: background-color 0.2s ease;
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
   border-right-color: rgb(var(--contrast-200));
 }
-.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
 .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-  background-color: rgb(var(--contrast-400));
+  background-color: var(--table-header-background-color--hover);
 }
 .tabulator .tabulator-header .tabulator-col-title {
   font-weight: 500;
   padding-left: 0.125rem;
 }
 .tabulator .tabulator-footer {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
   border: none;
+  user-select: auto;
 }
 .tabulator .tabulator-footer .tabulator-calcs-holder {
   border-color: rgb(var(--contrast-600));
 }
 
+.tabulator-row.tabulator-calcs {
+  cursor: default !important;
+}
 .tabulator-row.tabulator-selectable {
   transition: background-color 0.2s ease;
 }
 .tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color));
 }
 .tabulator-row.tabulator-row-odd {
-  background-color: rgb(var(--contrast-200));
+  background-color: rgb(var(--table-row-background-color--odd));
 }
 .tabulator-row.tabulator-row-even {
-  background-color: rgb(var(--contrast-100));
+  background-color: rgb(var(--table-row-background-color--even));
 }
 .tabulator-row.active, .tabulator-row.active:hover {
-  background-color: rgba(var(--color-teal-light), 0.16);
+  background-color: rgb(var(--table-row-background-color--active));
 }
 .tabulator-row .tabulator-cell {
   border-right: transparent;