@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/dist/TableSelectionMulti.js

@@ -0,0 +1,255 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableSelectionBase from "./TableSelectionBase.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { isSelectionCheckbox, isHeaderSelector, findRowInPath } from "./TableUtils.js";
+import { isUpShift } from "@ui5/webcomponents-base/dist/Keys.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.
+ * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.
+ * It must be placed inside the `features` slot of `ui5-table`.
+ * This component is not intended for standalone use.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection-multi slot="features" selected="Row1 Row3"></ui5-table-selection-multi>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelectionMulti.js";`
+ *
+ * @constructor
+ * @extends TableSelectionBase
+ * @since 2.8.0
+ * @public
+ */
+let TableSelectionMulti = class TableSelectionMulti extends TableSelectionBase {
+    constructor() {
+        super(...arguments);
+        this._rowsLength = 0;
+    }
+    onTableBeforeRendering() {
+        if (this._table && this._table.headerRow[0] && this._rowsLength !== this._table.rows.length) {
+            this._rowsLength = this._table.rows.length;
+            this._table.headerRow[0]._invalidate++;
+        }
+    }
+    isMultiSelectable() {
+        return true;
+    }
+    isSelected(row) {
+        if (row.isHeaderRow()) {
+            return this.areAllRowsSelected();
+        }
+        const rowKey = this.getRowKey(row);
+        return this.getSelectedAsSet().has(rowKey);
+    }
+    setSelected(row, selected, fireEvent = false) {
+        if (this._rangeSelection?.isMouse && this._rangeSelection.shiftPressed) {
+            return;
+        }
+        const tableRows = row.isHeaderRow() ? this._table.rows : [row];
+        const selectedSet = this.getSelectedAsSet();
+        tableRows.forEach(tableRow => {
+            const rowKey = this.getRowKey(tableRow);
+            selectedSet[selected ? "add" : "delete"](rowKey);
+        });
+        this.setSelectedAsSet(selectedSet);
+        fireEvent && this.fireDecoratorEvent("change");
+    }
+    /**
+     * Returns an array of the selected rows.
+     *
+     * @public
+     */
+    getSelectedRows() {
+        return this._table ? this._table.rows.filter(row => this.isSelected(row)) : [];
+    }
+    /**
+     * Determines whether all rows are selected.
+     */
+    areAllRowsSelected() {
+        if (!this._table || !this._table.rows.length) {
+            return false;
+        }
+        const selectedSet = this.getSelectedAsSet();
+        return this._table.rows.every(row => {
+            const rowKey = this.getRowKey(row);
+            return selectedSet.has(rowKey);
+        });
+    }
+    /**
+     * Returns the `selected` property as a set of unique `row-key` values.
+     *
+     * @public
+     */
+    getSelectedAsSet() {
+        const selected = this.selected || "";
+        const selectedArray = selected.split(" ").filter(String);
+        return new Set(selectedArray);
+    }
+    /**
+     * Sets the `selected` property using the provided set of unique `row-key` values.
+     *
+     * @param selectedSet A set of `row-key` values
+     * @public
+     */
+    setSelectedAsSet(selectedSet) {
+        this.selected = [...selectedSet].join(" ");
+    }
+    _invalidateTableAndRows() {
+        super._invalidateTableAndRows();
+        const headerRow = this._table?.headerRow[0];
+        headerRow && headerRow._invalidate++;
+    }
+    _onkeydown(e) {
+        if (!this._table || !e.shiftKey) {
+            return;
+        }
+        const focusedElement = getActiveElement(); // Assumption: The focused element is always the "next" row after navigation.
+        if (!(focusedElement?.hasAttribute("ui5-table-row") || this._rangeSelection?.isMouse || focusedElement?.hasAttribute("ui5-growing-row"))) {
+            this._stopRangeSelection();
+            return;
+        }
+        if (!this._rangeSelection) {
+            // If no range selection is active, start one
+            const row = focusedElement;
+            this._startRangeSelection(row, this.isSelected(row));
+        }
+        else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+            const change = isUpShift(e) ? -1 : 1;
+            this._handleRangeSelection(focusedElement, change);
+        }
+        if (this._rangeSelection) {
+            this._rangeSelection.shiftPressed = e.shiftKey;
+        }
+    }
+    _onkeyup(e, eventOrigin) {
+        if (!this._table) {
+            return;
+        }
+        if (!eventOrigin.hasAttribute("ui5-table-row") || !this._rangeSelection || !e.shiftKey) {
+            // Stop range selection if a) Shift is relased or b) the event target is not a row
+            this._stopRangeSelection();
+        }
+        if (this._rangeSelection) {
+            this._rangeSelection.shiftPressed = e.shiftKey;
+        }
+    }
+    _onclick(e) {
+        if (!this._table) {
+            return;
+        }
+        if (isHeaderSelector(e)) {
+            this._stopRangeSelection();
+            return;
+        }
+        if (!isSelectionCheckbox(e)) {
+            this._stopRangeSelection();
+            return;
+        }
+        const row = findRowInPath(e.composedPath());
+        if (e.shiftKey && this._rangeSelection?.isMouse) {
+            const startRow = this._rangeSelection.rows[0];
+            const startIndex = this._table.rows.indexOf(startRow);
+            const endIndex = this._table.rows.indexOf(row);
+            // When doing a range selection and clicking on an already selected row, the checked status should not change
+            // Therefore, we need to manually set the checked attribute again, as clicking it would deselect it and leads to
+            // a visual inconsistency.
+            row.shadowRoot?.querySelector("#selection-component")?.toggleAttribute("checked", true);
+            e.stopImmediatePropagation();
+            if (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {
+                return;
+            }
+            const change = endIndex - startIndex;
+            this._handleRangeSelection(row, change);
+        }
+        else if (row) {
+            this._startRangeSelection(row, !this.isSelected(row), true);
+        }
+    }
+    /**
+     * Start the range selection and initialises the range selection state
+     * @param row starting row
+     * @private
+     */
+    _startRangeSelection(row, selected, isMouse = false) {
+        this._rangeSelection = {
+            selected,
+            isUp: null,
+            rows: [row],
+            isMouse,
+            shiftPressed: false,
+        };
+    }
+    /**
+     * Handles the range selection
+     * @param targetRow Row that is currently focused
+     * @param change indicates direction
+     * @private
+     */
+    _handleRangeSelection(targetRow, change) {
+        if (!this._rangeSelection) {
+            return;
+        }
+        const isUp = change > 0;
+        this._rangeSelection.isUp ??= isUp;
+        const shouldReverseSelection = isUp !== this._rangeSelection.isUp && !this._rangeSelection.isMouse;
+        let selectionChanged = shouldReverseSelection && this.isSelected(targetRow);
+        if (shouldReverseSelection) {
+            this._reverseRangeSelection();
+        }
+        else {
+            const rowIndex = this._table.rows.indexOf(targetRow);
+            const [startIndex, endIndex] = [rowIndex, rowIndex - change].sort((a, b) => a - b);
+            const selectedSet = this.getSelectedAsSet();
+            selectionChanged = this._table?.rows.slice(startIndex, endIndex + 1).reduce((changed, row) => {
+                const isRowNotInSelection = !this._rangeSelection?.rows.includes(row);
+                const isRowSelectionDifferent = this.isSelected(row) !== this._rangeSelection.selected;
+                if (isRowNotInSelection) {
+                    this._rangeSelection?.rows.push(row);
+                }
+                selectedSet[this._rangeSelection.selected ? "add" : "delete"](this.getRowKey(row));
+                return changed || isRowSelectionDifferent;
+            }, selectionChanged) || false;
+            this.setSelectedAsSet(selectedSet);
+        }
+        selectionChanged && this.fireDecoratorEvent("change");
+    }
+    _stopRangeSelection() {
+        this._rangeSelection = null;
+    }
+    _reverseRangeSelection() {
+        const row = this._rangeSelection?.rows.pop();
+        if (row) {
+            this.setSelected(row, false);
+        }
+        if (this._rangeSelection?.rows.length === 1) {
+            this._rangeSelection.isUp = null;
+        }
+    }
+};
+__decorate([
+    property()
+], TableSelectionMulti.prototype, "selected", void 0);
+TableSelectionMulti = __decorate([
+    customElement({ tag: "ui5-table-selection-multi" })
+], TableSelectionMulti);
+TableSelectionMulti.define();
+export default TableSelectionMulti;
+//# sourceMappingURL=TableSelectionMulti.js.map

package/dist/TableSelectionMulti.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionMulti.js","sourceRoot":"","sources":["../src/TableSelectionMulti.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport TableSelectionBase from \"./TableSelectionBase.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { isSelectionCheckbox, isHeaderSelector, findRowInPath } from \"./TableUtils.js\";\nimport { isUpShift } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type TableRow from \"./TableRow.js\";\nimport type TableRowBase from \"./TableRowBase.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-selection-multi` component is used inside the `ui5-table` to add multi-selection capabilities to the `ui5-table`.\n * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n *\n * ### Usage\n *\n * The `ui5-table-selection-multi` component is a feature designed exclusively for use within the `ui5-table` component.\n * It must be placed inside the `features` slot of `ui5-table`.\n * This component is not intended for standalone use.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-selection-multi slot=\"features\" selected=\"Row1 Row3\"></ui5-table-selection-multi>\n * </ui5-table>\n * ```\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableSelectionMulti.js\";`\n *\n * @constructor\n * @extends TableSelectionBase\n * @since 2.8.0\n * @public\n */\n@customElement({ tag: \"ui5-table-selection-multi\" })\n\nclass TableSelectionMulti extends TableSelectionBase {\n\t/**\n\t * Defines the `row-key` values of selected rows, with each value separated by a space.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tselected?: string;\n\n\tprivate _rowsLength = 0;\n\tprivate _rangeSelection?: {\n\t\tselected: boolean,\n\t\tisUp: boolean | null,\n\t\trows: TableRow[],\n\t\tisMouse: boolean,\n\t\tshiftPressed: boolean\n\t} | null;\n\n\tonTableBeforeRendering() {\n\t\tif (this._table && this._table.headerRow[0] && this._rowsLength !== this._table.rows.length) {\n\t\t\tthis._rowsLength = this._table.rows.length;\n\t\t\tthis._table.headerRow[0]._invalidate++;\n\t\t}\n\t}\n\n\tisMultiSelectable(): boolean {\n\t\treturn true;\n\t}\n\n\tisSelected(row: TableRowBase): boolean {\n\t\tif (row.isHeaderRow()) {\n\t\t\treturn this.areAllRowsSelected();\n\t\t}\n\n\t\tconst rowKey = this.getRowKey(row as TableRow);\n\t\treturn this.getSelectedAsSet().has(rowKey);\n\t}\n\n\tsetSelected(row: TableRowBase, selected: boolean, fireEvent: boolean = false) {\n\t\tif (this._rangeSelection?.isMouse && this._rangeSelection.shiftPressed) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst tableRows = row.isHeaderRow() ? this._table!.rows : [row as TableRow];\n\t\tconst selectedSet = this.getSelectedAsSet();\n\t\ttableRows.forEach(tableRow => {\n\t\t\tconst rowKey = this.getRowKey(tableRow);\n\t\t\tselectedSet[selected ? \"add\" : \"delete\"](rowKey);\n\t\t});\n\n\t\tthis.setSelectedAsSet(selectedSet);\n\t\tfireEvent && this.fireDecoratorEvent(\"change\");\n\t}\n\n\t/**\n\t * Returns an array of the selected rows.\n\t *\n\t * @public\n\t */\n\tgetSelectedRows(): TableRow[] {\n\t\treturn this._table ? this._table.rows.filter(row => this.isSelected(row)) : [];\n\t}\n\n\t/**\n\t * Determines whether all rows are selected.\n\t */\n\tareAllRowsSelected(): boolean {\n\t\tif (!this._table || !this._table.rows.length) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst selectedSet = this.getSelectedAsSet();\n\t\treturn this._table.rows.every(row => {\n\t\t\tconst rowKey = this.getRowKey(row);\n\t\t\treturn selectedSet.has(rowKey);\n\t\t});\n\t}\n\n\t/**\n\t * Returns the `selected` property as a set of unique `row-key` values.\n\t *\n\t * @public\n\t */\n\tgetSelectedAsSet(): Set<string> {\n\t\tconst selected = this.selected || \"\";\n\t\tconst selectedArray = selected.split(\" \").filter(String);\n\t\treturn new Set(selectedArray);\n\t}\n\n\t/**\n\t * Sets the `selected` property using the provided set of unique `row-key` values.\n\t *\n\t * @param selectedSet A set of `row-key` values\n\t * @public\n\t */\n\tsetSelectedAsSet(selectedSet: Set<string>): void {\n\t\tthis.selected = [...selectedSet].join(\" \");\n\t}\n\n\t_invalidateTableAndRows() {\n\t\tsuper._invalidateTableAndRows();\n\t\tconst headerRow = this._table?.headerRow[0];\n\t\theaderRow && headerRow._invalidate++;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this._table || !e.shiftKey) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusedElement = getActiveElement(); // Assumption: The focused element is always the \"next\" row after navigation.\n\n\t\tif (!(focusedElement?.hasAttribute(\"ui5-table-row\") || this._rangeSelection?.isMouse || focusedElement?.hasAttribute(\"ui5-growing-row\"))) {\n\t\t\tthis._stopRangeSelection();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._rangeSelection) {\n\t\t\t// If no range selection is active, start one\n\t\t\tconst row = focusedElement as TableRow;\n\t\t\tthis._startRangeSelection(row, this.isSelected(row));\n\t\t} else if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n\t\t\tconst change = isUpShift(e) ? -1 : 1;\n\t\t\tthis._handleRangeSelection(focusedElement as TableRow, change);\n\t\t}\n\n\t\tif (this._rangeSelection) {\n\t\t\tthis._rangeSelection.shiftPressed = e.shiftKey;\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!eventOrigin.hasAttribute(\"ui5-table-row\") || !this._rangeSelection || !e.shiftKey) {\n\t\t\t// Stop range selection if a) Shift is relased or b) the event target is not a row\n\t\t\tthis._stopRangeSelection();\n\t\t}\n\n\t\tif (this._rangeSelection) {\n\t\t\tthis._rangeSelection.shiftPressed = e.shiftKey;\n\t\t}\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isHeaderSelector(e)) {\n\t\t\tthis._stopRangeSelection();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!isSelectionCheckbox(e)) {\n\t\t\tthis._stopRangeSelection();\n\t\t\treturn;\n\t\t}\n\n\t\tconst row = findRowInPath(e.composedPath());\n\n\t\tif (e.shiftKey && this._rangeSelection?.isMouse) {\n\t\t\tconst startRow = this._rangeSelection.rows[0];\n\t\t\tconst startIndex = this._table.rows.indexOf(startRow);\n\t\t\tconst endIndex = this._table.rows.indexOf(row);\n\n\t\t\t// When doing a range selection and clicking on an already selected row, the checked status should not change\n\t\t\t// Therefore, we need to manually set the checked attribute again, as clicking it would deselect it and leads to\n\t\t\t// a visual inconsistency.\n\t\t\trow.shadowRoot?.querySelector(\"#selection-component\")?.toggleAttribute(\"checked\", true);\n\t\t\te.stopImmediatePropagation();\n\n\t\t\tif (startIndex === -1 || endIndex === -1 || row.rowKey === startRow.rowKey || row.rowKey === this._rangeSelection.rows[this._rangeSelection.rows.length - 1].rowKey) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst change = endIndex - startIndex;\n\t\t\tthis._handleRangeSelection(row, change);\n\t\t} else if (row) {\n\t\t\tthis._startRangeSelection(row, !this.isSelected(row), true);\n\t\t}\n\t}\n\n\t/**\n\t * Start the range selection and initialises the range selection state\n\t * @param row starting row\n\t * @private\n\t */\n\t_startRangeSelection(row: TableRow, selected: boolean, isMouse = false) {\n\t\tthis._rangeSelection = {\n\t\t\tselected,\n\t\t\tisUp: null,\n\t\t\trows: [row],\n\t\t\tisMouse,\n\t\t\tshiftPressed: false,\n\t\t};\n\t}\n\n\t/**\n\t * Handles the range selection\n\t * @param targetRow Row that is currently focused\n\t * @param change indicates direction\n\t * @private\n\t */\n\t_handleRangeSelection(targetRow: TableRow, change: number) {\n\t\tif (!this._rangeSelection) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isUp = change > 0;\n\t\tthis._rangeSelection.isUp ??= isUp;\n\n\t\tconst shouldReverseSelection = isUp !== this._rangeSelection.isUp && !this._rangeSelection.isMouse;\n\t\tlet selectionChanged = shouldReverseSelection && this.isSelected(targetRow);\n\n\t\tif (shouldReverseSelection) {\n\t\t\tthis._reverseRangeSelection();\n\t\t} else {\n\t\t\tconst rowIndex = this._table!.rows.indexOf(targetRow);\n\t\t\tconst [startIndex, endIndex] = [rowIndex, rowIndex - change].sort((a, b) => a - b);\n\t\t\tconst selectedSet = this.getSelectedAsSet();\n\n\t\t\tselectionChanged = this._table?.rows.slice(startIndex, endIndex + 1).reduce((changed, row) => {\n\t\t\t\tconst isRowNotInSelection = !this._rangeSelection?.rows.includes(row);\n\t\t\t\tconst isRowSelectionDifferent = this.isSelected(row) !== this._rangeSelection!.selected;\n\n\t\t\t\tif (isRowNotInSelection) {\n\t\t\t\t\tthis._rangeSelection?.rows.push(row);\n\t\t\t\t}\n\n\t\t\t\tselectedSet[this._rangeSelection!.selected ? \"add\" : \"delete\"](this.getRowKey(row));\n\n\t\t\t\treturn changed || isRowSelectionDifferent;\n\t\t\t}, selectionChanged) || false;\n\n\t\t\tthis.setSelectedAsSet(selectedSet);\n\t\t}\n\n\t\tselectionChanged && this.fireDecoratorEvent(\"change\");\n\t}\n\n\t_stopRangeSelection() {\n\t\tthis._rangeSelection = null;\n\t}\n\n\t_reverseRangeSelection() {\n\t\tconst row = this._rangeSelection?.rows.pop();\n\t\tif (row) {\n\t\t\tthis.setSelected(row, false);\n\t\t}\n\n\t\tif (this._rangeSelection?.rows.length === 1) {\n\t\t\tthis._rangeSelection.isUp = null;\n\t\t}\n\t}\n}\n\nTableSelectionMulti.define();\n\nexport default TableSelectionMulti;\n"]}

package/dist/TableSelectionSingle.d.ts

@@ -0,0 +1,49 @@
+import TableSelectionBase from "./TableSelectionBase.js";
+import type TableRow from "./TableRow.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.
+ * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.
+ * It must be placed inside the `features` slot of `ui5-table`.
+ * This component is not intended for standalone use.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection-single slot="features" selected="Row1"></ui5-table-selection-single>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelectionSingle.js";`
+ *
+ * @constructor
+ * @extends TableSelectionBase
+ * @since 2.8.0
+ * @public
+ */
+declare class TableSelectionSingle extends TableSelectionBase {
+    /**
+     * Defines the `row-key` value of the selected row.
+     *
+     * @default undefined
+     * @public
+     */
+    selected?: string;
+    isSelected(row: TableRow): boolean;
+    setSelected(row: TableRow, selected: boolean, fireEvent?: boolean): void;
+    /**
+     * Returns the selected row.
+     *
+     * @public
+     */
+    getSelectedRow(): TableRow | undefined;
+}
+export default TableSelectionSingle;

package/dist/TableSelectionSingle.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableSelectionBase from "./TableSelectionBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.
+ * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.
+ * It must be placed inside the `features` slot of `ui5-table`.
+ * This component is not intended for standalone use.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection-single slot="features" selected="Row1"></ui5-table-selection-single>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelectionSingle.js";`
+ *
+ * @constructor
+ * @extends TableSelectionBase
+ * @since 2.8.0
+ * @public
+ */
+let TableSelectionSingle = class TableSelectionSingle extends TableSelectionBase {
+    isSelected(row) {
+        const rowKey = this.getRowKey(row);
+        return rowKey ? this.selected === rowKey : false;
+    }
+    setSelected(row, selected, fireEvent = false) {
+        const rowKey = this.getRowKey(row);
+        if (rowKey) {
+            this.selected = selected ? rowKey : undefined;
+            fireEvent && this.fireDecoratorEvent("change");
+        }
+    }
+    /**
+     * Returns the selected row.
+     *
+     * @public
+     */
+    getSelectedRow() {
+        return this._table?.rows.find(row => this.isSelected(row));
+    }
+};
+__decorate([
+    property()
+], TableSelectionSingle.prototype, "selected", void 0);
+TableSelectionSingle = __decorate([
+    customElement({ tag: "ui5-table-selection-single" })
+], TableSelectionSingle);
+TableSelectionSingle.define();
+export default TableSelectionSingle;
+//# sourceMappingURL=TableSelectionSingle.js.map

package/dist/TableSelectionSingle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionSingle.js","sourceRoot":"","sources":["../src/TableSelectionSingle.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AACrF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAGH,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,kBAAkB;IAUpD,UAAU,CAAC,GAAa;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACnC,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IAClD,CAAC;IAED,WAAW,CAAC,GAAa,EAAE,QAAiB,EAAE,YAAqB,KAAK;QACvE,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACnC,IAAI,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9C,SAAS,IAAI,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;IACF,CAAC;IAED;;;;OAIG;IACH,cAAc;QACb,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5D,CAAC;CACD,CAAA;AAvBA;IADC,QAAQ,EAAE;sDACO;AARb,oBAAoB;IAFzB,aAAa,CAAC,EAAE,GAAG,EAAE,4BAA4B,EAAE,CAAC;GAE/C,oBAAoB,CA+BzB;AAED,oBAAoB,CAAC,MAAM,EAAE,CAAC;AAE9B,eAAe,oBAAoB,CAAC","sourcesContent":["import { customElement, property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport TableSelectionBase from \"./TableSelectionBase.js\";\nimport type TableRow from \"./TableRow.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-selection-single` component is used inside the `ui5-table` to add single selection capabilities to the `ui5-table`.\n * Since selection is key-based, each `ui5-table-row` must define a unique `row-key` property.\n *\n * ### Usage\n *\n * The `ui5-table-selection-single` component is a feature designed exclusively for use within the `ui5-table` component.\n * It must be placed inside the `features` slot of `ui5-table`.\n * This component is not intended for standalone use.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-selection-single slot=\"features\" selected=\"Row1\"></ui5-table-selection-single>\n * </ui5-table>\n * ```\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableSelectionSingle.js\";`\n *\n * @constructor\n * @extends TableSelectionBase\n * @since 2.8.0\n * @public\n */\n@customElement({ tag: \"ui5-table-selection-single\" })\n\nclass TableSelectionSingle extends TableSelectionBase {\n\t/**\n\t * Defines the `row-key` value of the selected row.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tselected?: string;\n\n\tisSelected(row: TableRow): boolean {\n\t\tconst rowKey = this.getRowKey(row);\n\t\treturn rowKey ? this.selected === rowKey : false;\n\t}\n\n\tsetSelected(row: TableRow, selected: boolean, fireEvent: boolean = false) {\n\t\tconst rowKey = this.getRowKey(row);\n\t\tif (rowKey) {\n\t\t\tthis.selected = selected ? rowKey : undefined;\n\t\t\tfireEvent && this.fireDecoratorEvent(\"change\");\n\t\t}\n\t}\n\n\t/**\n\t * Returns the selected row.\n\t *\n\t * @public\n\t */\n\tgetSelectedRow(): TableRow | undefined {\n\t\treturn this._table?.rows.find(row => this.isSelected(row));\n\t}\n}\n\nTableSelectionSingle.define();\n\nexport default TableSelectionSingle;\n"]}

package/dist/TableTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Table from "./Table.js";
+export default function TableTemplate(this: Table): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TableTemplate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import TableRow from "./TableRow.js";
+import TableCell from "./TableCell.js";
+import DropIndicator from "./DropIndicator.js";
+import BusyIndicator from "./BusyIndicator.js";
+export default function TableTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { id: "before", role: "none", tabindex: 0, "ui5-table-dummy-focus-area": true }), _jsxs("div", { id: "table", role: "grid", style: this.styles.table, "aria-label": this._ariaLabel, "aria-rowcount": this._ariaRowCount, "aria-multiselectable": this._ariaMultiSelectable, children: [_jsx("slot", { name: "headerRow" }), _jsx("div", { id: "rows", children: _jsx("div", { id: "spacer", style: this.styles.spacer, children: _jsx("slot", {}) }) }), this.rows.length === 0 &&
+                        _jsx(TableRow, { id: "no-data-row", children: _jsx(TableCell, { id: "no-data-cell", "data-excluded-from-navigation": true, "horizontal-align": "Center", children: this.noData.length > 0 ?
+                                    _jsx("slot", { name: "noData" })
+                                    :
+                                        this._effectiveNoDataText }) }), this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&
+                        _jsx("div", { id: "footer", role: "rowgroup", children: growingRow.call(this) }), _jsx(DropIndicator, { orientation: "Horizontal", ownerReference: this }), _jsx("div", { "aria-hidden": "true", id: "table-end-row", children: _jsx("div", { id: "table-end-cell", children: _jsx("div", { id: "table-end", "aria-hidden": "true", tabindex: -1 }) }) }), this.loading &&
+                        _jsx(BusyIndicator, { id: "loading", delay: this.loadingDelay, active: true, "data-sap-focus-ref": true })] }), _jsx("div", { id: "after", role: "none", tabindex: 0, "ui5-table-dummy-focus-area": true })] }));
+}
+function growingRow() {
+    return (_jsx(TableRow, { id: "growing-row", "ui5-growing-row": true, children: _jsx(TableCell, { id: "growing-cell", children: _jsx("slot", { name: this._getGrowing()?._individualSlot }) }) }));
+}
+//# sourceMappingURL=TableTemplate.js.map

package/dist/TableTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableTemplate.js","sourceRoot":"","sources":["../src/TableTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CACN,8BACC,cAAK,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,uCAAmC,EAE3E,eAAK,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAC1B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,gBACZ,IAAI,CAAC,UAAU,mBACZ,IAAI,CAAC,aAAa,0BACX,IAAI,CAAC,oBAAoB,aAE/C,eAAM,IAAI,EAAC,WAAW,GAAQ,EAE9B,cAAK,EAAE,EAAC,MAAM,YACb,cAAK,EAAE,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YACzC,gBAAa,GACR,GACD,EAEJ,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;wBACvB,KAAC,QAAQ,IAAC,EAAE,EAAC,aAAa,YACzB,KAAC,SAAS,IAAC,EAAE,EAAC,cAAc,6DAAgD,QAAQ,YACjF,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oCACzB,eAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC3B,CAAC;wCACD,IAAI,CAAC,oBAAoB,GAEf,GACF,EAGV,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,mBAAmB,EAAE;wBAClE,cAAK,EAAE,EAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,YAC7B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAClB,EAGP,KAAC,aAAa,IACb,WAAW,EAAC,YAAY,EACxB,cAAc,EAAE,IAAI,GACJ,EAEjB,6BAAiB,MAAM,EAAC,EAAE,EAAC,eAAe,YACzC,cAAK,EAAE,EAAC,gBAAgB,YACvB,cAAK,EAAE,EAAC,WAAW,iBAAa,MAAM,EAAC,QAAQ,EAAE,CAAC,CAAC,GAAQ,GACtD,GACD,EAEJ,IAAI,CAAC,OAAO;wBACb,KAAC,aAAa,IAAC,EAAE,EAAC,SAAS,EAC1B,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,MAAM,EAAE,IAAI,+BAEI,IAEb,EAEN,cAAK,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,uCAAmC,IACxE,CACH,CAAC;AACH,CAAC;AAED,SAAS,UAAU;IAClB,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,aAAa,qCACzB,KAAC,SAAS,IAAC,EAAE,EAAC,cAAc,YAC3B,eAAM,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,eAAe,GAAS,GAC7C,GACF,CACX,CAAC;AACH,CAAC","sourcesContent":["import type Table from \"./Table.js\";\nimport TableRow from \"./TableRow.js\";\nimport TableCell from \"./TableCell.js\";\nimport DropIndicator from \"./DropIndicator.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\n\nexport default function TableTemplate(this: Table) {\n\treturn (\n\t\t<>\n\t\t\t<div id=\"before\" role=\"none\" tabindex={0} ui5-table-dummy-focus-area></div>\n\n\t\t\t<div id=\"table\" role=\"grid\"\n\t\t\t\tstyle={this.styles.table}\n\t\t\t\taria-label={this._ariaLabel}\n\t\t\t\taria-rowcount={this._ariaRowCount}\n\t\t\t\taria-multiselectable={this._ariaMultiSelectable}\n\t\t\t>\n\t\t\t\t<slot name=\"headerRow\"></slot>\n\n\t\t\t\t<div id=\"rows\">\n\t\t\t\t\t<div id=\"spacer\" style={this.styles.spacer}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.rows.length === 0 &&\n\t\t\t\t\t<TableRow id=\"no-data-row\">\n\t\t\t\t\t\t<TableCell id=\"no-data-cell\" data-excluded-from-navigation horizontal-align=\"Center\">\n\t\t\t\t\t\t\t{ this.noData.length > 0 ?\n\t\t\t\t\t\t\t\t<slot name=\"noData\"></slot>\n\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\tthis._effectiveNoDataText\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t</TableRow>\n\t\t\t\t}\n\n\t\t\t\t{ this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&\n\t\t\t\t\t<div id=\"footer\" role=\"rowgroup\">\n\t\t\t\t\t\t{ growingRow.call(this) }\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t<DropIndicator\n\t\t\t\t\torientation=\"Horizontal\"\n\t\t\t\t\townerReference={this}\n\t\t\t\t></DropIndicator>\n\n\t\t\t\t<div aria-hidden=\"true\" id=\"table-end-row\">\n\t\t\t\t\t<div id=\"table-end-cell\">\n\t\t\t\t\t\t<div id=\"table-end\" aria-hidden=\"true\" tabindex={-1}></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.loading &&\n\t\t\t\t\t<BusyIndicator id=\"loading\"\n\t\t\t\t\t\tdelay={this.loadingDelay}\n\t\t\t\t\t\tactive={true}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t></BusyIndicator>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div id=\"after\" role=\"none\" tabindex={0} ui5-table-dummy-focus-area></div>\n\t\t</>\n\t);\n}\n\nfunction growingRow(this: Table) {\n\treturn (\n\t\t<TableRow id=\"growing-row\" ui5-growing-row>\n\t\t\t<TableCell id=\"growing-cell\">\n\t\t\t\t<slot name={this._getGrowing()?._individualSlot}></slot>\n\t\t\t</TableCell>\n\t\t</TableRow>\n\t);\n}\n"]}

package/dist/TableUtils.d.ts

@@ -0,0 +1,19 @@
+import type Table from "./Table.js";
+import type TableRow from "./TableRow.js";
+declare const isInstanceOfTable: (obj: any) => obj is Table;
+declare const isSelectionCheckbox: (e: Event) => boolean;
+declare const isHeaderSelector: (e: Event) => boolean;
+declare const findRowInPath: (composedPath: Array<EventTarget>) => TableRow;
+declare const findVerticalScrollContainer: (element: HTMLElement) => HTMLElement;
+declare const scrollElementIntoView: (scrollContainer: HTMLElement, element: HTMLElement, stickyElements: HTMLElement[], isRtl: boolean) => void;
+declare const isFeature: <T>(element: any, identifier: string) => element is T;
+declare const throttle: (callback: () => void) => () => void;
+declare const toggleAttribute: (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => void;
+/**
+ * Checks if a given width is valid for a column.
+ *
+ * @param width Width string to check
+ * @returns {boolean} true if the width is valid, false otherwise
+ */
+declare const isValidColumnWidth: (width: string | undefined) => width is string;
+export { isInstanceOfTable, isSelectionCheckbox, isHeaderSelector, findRowInPath, findVerticalScrollContainer, scrollElementIntoView, isFeature, throttle, toggleAttribute, isValidColumnWidth, };

package/dist/TableUtils.js

@@ -0,0 +1,98 @@
+const isInstanceOfTable = (obj) => {
+    return !!obj && "isTable" in obj && !!obj.isTable;
+};
+const isSelectionCheckbox = (e) => {
+    return e.composedPath().some((el) => el.hasAttribute?.("data-ui5-table-selection-component"));
+};
+const isHeaderSelector = (e) => {
+    return isSelectionCheckbox(e) && e.composedPath().some((el) => el instanceof HTMLElement && el.hasAttribute("ui5-table-header-row"));
+};
+const findRowInPath = (composedPath) => {
+    return composedPath.find((el) => el instanceof HTMLElement && el.hasAttribute("ui5-table-row"));
+};
+const findVerticalScrollContainer = (element) => {
+    while (element) {
+        const { overflowY } = window.getComputedStyle(element);
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return element;
+        }
+        if (element.parentNode instanceof ShadowRoot) {
+            element = element.parentNode.host;
+        }
+        else {
+            element = element.parentElement;
+        }
+    }
+    return document.scrollingElement || document.documentElement;
+};
+const scrollElementIntoView = (scrollContainer, element, stickyElements, isRtl) => {
+    if (stickyElements.length === 0) {
+        return;
+    }
+    const elementRect = element.getBoundingClientRect();
+    const inline = isRtl ? "right" : "left";
+    const { x: stickyX, y: stickyY } = stickyElements.reduce(({ x, y }, stickyElement) => {
+        const { top, [inline]: inlineStart } = getComputedStyle(stickyElement);
+        const stickyElementRect = stickyElement.getBoundingClientRect();
+        if (top !== "auto" && stickyElementRect.bottom > elementRect.top) {
+            y = Math.max(y, stickyElementRect.bottom);
+        }
+        if (inlineStart !== "auto") {
+            if (!isRtl && stickyElementRect.right > elementRect.left) {
+                x = Math.max(x, stickyElementRect.right);
+            }
+            else if (isRtl && stickyElementRect.left < elementRect.right) {
+                x = Math.min(x, stickyElementRect.left);
+            }
+        }
+        return { x, y };
+    }, { x: elementRect[inline], y: elementRect.top });
+    const scrollX = elementRect[inline] - stickyX;
+    const scrollY = elementRect.top - stickyY;
+    if (scrollX === 0 && scrollY === 0) {
+        // avoid unnecessary scroll call, when nothing changes
+        return;
+    }
+    scrollContainer.scrollBy({
+        top: scrollY,
+        left: scrollX,
+    });
+};
+const isFeature = (element, identifier) => {
+    return element.identifier === identifier;
+};
+const throttle = (callback) => {
+    let timer;
+    return () => {
+        cancelAnimationFrame(timer);
+        timer = requestAnimationFrame(() => {
+            callback();
+        });
+    };
+};
+const toggleAttribute = (element, attribute, condition, value) => {
+    if (condition) {
+        if (value === undefined) {
+            element.toggleAttribute(attribute, true);
+        }
+        else {
+            element.setAttribute(attribute, value);
+        }
+    }
+    else if (element.hasAttribute(attribute)) {
+        element.removeAttribute(attribute);
+    }
+};
+/**
+ * Checks if a given width is valid for a column.
+ *
+ * @param width Width string to check
+ * @returns {boolean} true if the width is valid, false otherwise
+ */
+const isValidColumnWidth = (width) => {
+    const element = document.createElement("div");
+    element.style.width = `max(3rem, ${width})`;
+    return element.style.width !== "";
+};
+export { isInstanceOfTable, isSelectionCheckbox, isHeaderSelector, findRowInPath, findVerticalScrollContainer, scrollElementIntoView, isFeature, throttle, toggleAttribute, isValidColumnWidth, };
+//# sourceMappingURL=TableUtils.js.map

package/dist/TableUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableUtils.js","sourceRoot":"","sources":["../src/TableUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import type Table from \"./Table.js\";\nimport type TableRow from \"./TableRow.js\";\n\nconst isInstanceOfTable = (obj: any): obj is Table => {\n\treturn !!obj && \"isTable\" in obj && !!obj.isTable;\n};\n\nconst isSelectionCheckbox = (e: Event) => {\n\treturn e.composedPath().some((el: EventTarget) => (el as HTMLElement).hasAttribute?.(\"data-ui5-table-selection-component\"));\n};\n\nconst isHeaderSelector = (e: Event) => {\n\treturn isSelectionCheckbox(e) && e.composedPath().some((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-header-row\"));\n};\n\nconst findRowInPath = (composedPath: Array<EventTarget>) => {\n\treturn composedPath.find((el: EventTarget) => el instanceof HTMLElement && el.hasAttribute(\"ui5-table-row\")) as TableRow;\n};\n\nconst findVerticalScrollContainer = (element: HTMLElement): HTMLElement => {\n\twhile (element) {\n\t\tconst { overflowY } = window.getComputedStyle(element);\n\t\tif (overflowY === \"auto\" || overflowY === \"scroll\") {\n\t\t\treturn element;\n\t\t}\n\n\t\tif (element.parentNode instanceof ShadowRoot) {\n\t\t\telement = element.parentNode.host as HTMLElement;\n\t\t} else {\n\t\t\telement = element.parentElement as HTMLElement;\n\t\t}\n\t}\n\n\treturn document.scrollingElement as HTMLElement || document.documentElement;\n};\n\nconst scrollElementIntoView = (scrollContainer: HTMLElement, element: HTMLElement, stickyElements: HTMLElement[], isRtl: boolean) => {\n\tif (stickyElements.length === 0) {\n\t\treturn;\n\t}\n\n\tconst elementRect = element.getBoundingClientRect();\n\tconst inline = isRtl ? \"right\" : \"left\";\n\n\tconst { x: stickyX, y: stickyY } = stickyElements.reduce(({ x, y }, stickyElement) => {\n\t\tconst { top, [inline]: inlineStart } = getComputedStyle(stickyElement);\n\t\tconst stickyElementRect = stickyElement.getBoundingClientRect();\n\t\tif (top !== \"auto\" && stickyElementRect.bottom > elementRect.top) {\n\t\t\ty = Math.max(y, stickyElementRect.bottom);\n\t\t}\n\t\tif (inlineStart !== \"auto\") {\n\t\t\tif (!isRtl && stickyElementRect.right > elementRect.left) {\n\t\t\t\tx = Math.max(x, stickyElementRect.right);\n\t\t\t} else if (isRtl && stickyElementRect.left < elementRect.right) {\n\t\t\t\tx = Math.min(x, stickyElementRect.left);\n\t\t\t}\n\t\t}\n\n\t\treturn { x, y };\n\t}, { x: elementRect[inline], y: elementRect.top });\n\n\tconst scrollX = elementRect[inline] - stickyX;\n\tconst scrollY = elementRect.top - stickyY;\n\n\tif (scrollX === 0 && scrollY === 0) {\n\t\t// avoid unnecessary scroll call, when nothing changes\n\t\treturn;\n\t}\n\n\tscrollContainer.scrollBy({\n\t\ttop: scrollY,\n\t\tleft: scrollX,\n\t});\n};\n\nconst isFeature = <T>(element: any, identifier: string): element is T => {\n\treturn element.identifier === identifier;\n};\n\nconst throttle = (callback: () => void) => {\n\tlet timer: number;\n\treturn () => {\n\t\tcancelAnimationFrame(timer);\n\t\ttimer = requestAnimationFrame(() => {\n\t\t\tcallback();\n\t\t});\n\t};\n};\n\nconst toggleAttribute = (element: HTMLElement, attribute: string, condition: boolean | undefined, value?: string) => {\n\tif (condition) {\n\t\tif (value === undefined) {\n\t\t\telement.toggleAttribute(attribute, true);\n\t\t} else {\n\t\t\telement.setAttribute(attribute, value);\n\t\t}\n\t} else if (element.hasAttribute(attribute)) {\n\t\telement.removeAttribute(attribute);\n\t}\n};\n\n/**\n * Checks if a given width is valid for a column.\n *\n * @param width Width string to check\n * @returns {boolean} true if the width is valid, false otherwise\n */\nconst isValidColumnWidth = (width: string | undefined): width is string => {\n\tconst element = document.createElement(\"div\");\n\telement.style.width = `max(3rem, ${width})`;\n\treturn element.style.width !== \"\";\n};\n\nexport {\n\tisInstanceOfTable,\n\tisSelectionCheckbox,\n\tisHeaderSelector,\n\tfindRowInPath,\n\tfindVerticalScrollContainer,\n\tscrollElementIntoView,\n\tisFeature,\n\tthrottle,\n\ttoggleAttribute,\n\tisValidColumnWidth,\n};\n"]}