@ui5/webcomponents 2.8.0-rc.2 → 2.8.0

package/dist/TableSelectionBase.d.ts

@@ -0,0 +1,79 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type Table from "./Table.js";
+import type TableRowBase from "./TableRowBase.js";
+import type TableRow from "./TableRow.js";
+import type { ITableFeature } from "./Table.js";
+/**
+ * Fired when selection is changed by user interaction.
+ *
+ * @public
+ */
+type TableSelectionBaseChangeEventDetail = void;
+/**
+ * Fired when the selection is changed by user interaction.
+ *
+ * @public
+ */
+declare abstract class TableSelectionBase extends UI5Element implements ITableFeature {
+    eventDetails: {
+        change: TableSelectionBaseChangeEventDetail;
+    };
+    /**
+     * Defines the selected elements of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    selected?: string;
+    readonly identifier = "TableSelection";
+    protected _table?: Table;
+    onTableActivate(table: Table): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    isSelectable(): boolean;
+    /**
+     * Determines if the component allows multiple selection.
+     */
+    isMultiSelectable(): boolean;
+    /**
+     * Determines whether a row selector (for example, `radiobutton` or `checkbox`) is rendered.
+     */
+    isRowSelectorRequired(): boolean;
+    /**
+     * Returns the unique key associated with the table row.
+     *
+     * @param row The row instance
+     * @public
+     */
+    getRowKey(row: TableRow): string;
+    /**
+     * Returns the table row instance for the given row key.
+     *
+     * @param rowKey The row key
+     * @public
+     */
+    getRowByKey(rowKey: string): TableRow | undefined;
+    /**
+     * Determines whether the specified table row is currently selected.
+     *
+     * @param row The row instance
+     * @public
+     */
+    abstract isSelected(row: TableRowBase): boolean;
+    /**
+     * Sets the selected state of the specified table row.
+     *
+     * @param row The row instance
+     * @param selected Whether the row is selected
+     * @public
+     */
+    abstract setSelected(row: TableRowBase, selected: boolean, _fireEvent: boolean): void;
+    /**
+     * Invalidates the table and its rows to re-evaluate the selection.
+     *
+     * @protected
+     */
+    protected _invalidateTableAndRows(): void;
+}
+export default TableSelectionBase;
+export type { TableSelectionBaseChangeEventDetail, };

package/dist/TableSelectionBase.js

@@ -0,0 +1,108 @@
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { property, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
+import { isInstanceOfTable } from "./TableUtils.js";
+/**
+ * Fired when the selection is changed by user interaction.
+ *
+ * @public
+ */
+let TableSelectionBase = 
+/**
+ * @class
+ * The `TableSelectionBase` class serves as a foundation for table selections.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.8.0
+ * @public
+ */
+class TableSelectionBase extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this.identifier = "TableSelection";
+    }
+    onTableActivate(table) {
+        this._table = table;
+        this._invalidateTableAndRows();
+    }
+    onExitDOM() {
+        this._invalidateTableAndRows();
+        this._table = undefined;
+    }
+    onBeforeRendering() {
+        if (!this._table && this.parentElement && isInstanceOfTable(this.parentElement)) {
+            this._table = this.parentElement;
+        }
+        this._invalidateTableAndRows();
+    }
+    // this will be removed when the legacy selection component is removed
+    isSelectable() {
+        return true;
+    }
+    /**
+     * Determines if the component allows multiple selection.
+     */
+    isMultiSelectable() {
+        return false;
+    }
+    /**
+     * Determines whether a row selector (for example, `radiobutton` or `checkbox`) is rendered.
+     */
+    isRowSelectorRequired() {
+        return true;
+    }
+    /**
+     * Returns the unique key associated with the table row.
+     *
+     * @param row The row instance
+     * @public
+     */
+    getRowKey(row) {
+        return row.rowKey || "";
+    }
+    /**
+     * Returns the table row instance for the given row key.
+     *
+     * @param rowKey The row key
+     * @public
+     */
+    getRowByKey(rowKey) {
+        if (this._table && rowKey) {
+            return this._table.rows.find(row => this.getRowKey(row) === rowKey);
+        }
+    }
+    /**
+     * Invalidates the table and its rows to re-evaluate the selection.
+     *
+     * @protected
+     */
+    _invalidateTableAndRows() {
+        if (this._table) {
+            this._table._invalidate++;
+            this._table.rows.forEach(row => row._invalidate++);
+        }
+    }
+};
+__decorate([
+    property()
+], TableSelectionBase.prototype, "selected", void 0);
+TableSelectionBase = __decorate([
+    eventStrict("change", {
+        bubbles: false,
+    })
+    /**
+     * @class
+     * The `TableSelectionBase` class serves as a foundation for table selections.
+     * @constructor
+     * @extends UI5Element
+     * @since 2.8.0
+     * @public
+     */
+], TableSelectionBase);
+export default TableSelectionBase;
+//# sourceMappingURL=TableSelectionBase.js.map

package/dist/TableSelectionBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelectionBase.js","sourceRoot":"","sources":["../src/TableSelectionBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAapD;;;;GAIG;AAaH,IAAe,kBAAkB;AARjC;;;;;;;GAOG;AACH,MAAe,kBAAmB,SAAQ,UAAU;IAApD;;QAcU,eAAU,GAAG,gBAAgB,CAAC;IAyFxC,CAAC;IAtFA,eAAe,CAAC,KAAY;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAChC,CAAC;IAED,SAAS;QACR,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IACzB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YACjF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAChC,CAAC;IAED,sEAAsE;IACtE,YAAY;QACX,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;OAEG;IACH,qBAAqB;QACpB,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;;OAKG;IACH,SAAS,CAAC,GAAa;QACtB,OAAO,GAAG,CAAC,MAAM,IAAI,EAAE,CAAC;IACzB,CAAC;IAED;;;;;OAKG;IACH,WAAW,CAAC,MAAc;QACzB,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,MAAM,CAAC,CAAC;QACrE,CAAC;IACF,CAAC;IAmBD;;;;OAIG;IACO,uBAAuB;QAChC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;QACpD,CAAC;IACF,CAAC;CACD,CAAA;AA3FA;IADC,QAAQ,EAAE;oDACO;AAZJ,kBAAkB;IAZhC,WAAW,CAAC,QAAQ,EAAE;QACtB,OAAO,EAAE,KAAK;KACd,CAAC;IAEF;;;;;;;OAOG;GACY,kBAAkB,CAuGhC;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { property, eventStrict } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { isInstanceOfTable } from \"./TableUtils.js\";\nimport type Table from \"./Table.js\";\nimport type TableRowBase from \"./TableRowBase.js\";\nimport type TableRow from \"./TableRow.js\";\nimport type { ITableFeature } from \"./Table.js\";\n\n/**\n * Fired when selection is changed by user interaction.\n *\n * @public\n */\ntype TableSelectionBaseChangeEventDetail = void;\n\n/**\n * Fired when the selection is changed by user interaction.\n *\n * @public\n */\n@eventStrict(\"change\", {\n\tbubbles: false,\n})\n\n/**\n * @class\n * The `TableSelectionBase` class serves as a foundation for table selections.\n * @constructor\n * @extends UI5Element\n * @since 2.8.0\n * @public\n */\nabstract class TableSelectionBase extends UI5Element implements ITableFeature {\n\teventDetails!: {\n\t\tchange: TableSelectionBaseChangeEventDetail,\n\t}\n\n\t/**\n\t * Defines the selected elements of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tselected?: string;\n\n\treadonly identifier = \"TableSelection\";\n\tprotected _table?: Table;\n\n\tonTableActivate(table: Table) {\n\t\tthis._table = table;\n\t\tthis._invalidateTableAndRows();\n\t}\n\n\tonExitDOM() {\n\t\tthis._invalidateTableAndRows();\n\t\tthis._table = undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tif (!this._table && this.parentElement && isInstanceOfTable(this.parentElement)) {\n\t\t\tthis._table = this.parentElement;\n\t\t}\n\t\tthis._invalidateTableAndRows();\n\t}\n\n\t// this will be removed when the legacy selection component is removed\n\tisSelectable(): boolean {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Determines if the component allows multiple selection.\n\t */\n\tisMultiSelectable(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Determines whether a row selector (for example, `radiobutton` or `checkbox`) is rendered.\n\t */\n\tisRowSelectorRequired(): boolean {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns the unique key associated with the table row.\n\t *\n\t * @param row The row instance\n\t * @public\n\t */\n\tgetRowKey(row: TableRow): string {\n\t\treturn row.rowKey || \"\";\n\t}\n\n\t/**\n\t * Returns the table row instance for the given row key.\n\t *\n\t * @param rowKey The row key\n\t * @public\n\t */\n\tgetRowByKey(rowKey: string): TableRow | undefined {\n\t\tif (this._table && rowKey) {\n\t\t\treturn this._table.rows.find(row => this.getRowKey(row) === rowKey);\n\t\t}\n\t}\n\n\t/**\n\t * Determines whether the specified table row is currently selected.\n\t *\n\t * @param row The row instance\n\t * @public\n\t */\n\tabstract isSelected(row: TableRowBase): boolean;\n\n\t/**\n\t * Sets the selected state of the specified table row.\n\t *\n\t * @param row The row instance\n\t * @param selected Whether the row is selected\n\t * @public\n\t */\n\tabstract setSelected(row: TableRowBase, selected: boolean, _fireEvent: boolean): void;\n\n\t/**\n\t * Invalidates the table and its rows to re-evaluate the selection.\n\t *\n\t * @protected\n\t */\n\tprotected _invalidateTableAndRows() {\n\t\tif (this._table) {\n\t\t\tthis._table._invalidate++;\n\t\t\tthis._table.rows.forEach(row => row._invalidate++);\n\t\t}\n\t}\n}\n\nexport default TableSelectionBase;\n\nexport type {\n\tTableSelectionBaseChangeEventDetail,\n};\n"]}

package/dist/TableSelectionMulti.d.ts

@@ -0,0 +1,92 @@
+import TableSelectionBase from "./TableSelectionBase.js";
+import type TableRow from "./TableRow.js";
+import type TableRowBase from "./TableRowBase.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
+ */
+declare class TableSelectionMulti extends TableSelectionBase {
+    /**
+     * Defines the `row-key` values of selected rows, with each value separated by a space.
+     *
+     * @default undefined
+     * @public
+     */
+    selected?: string;
+    private _rowsLength;
+    private _rangeSelection?;
+    onTableBeforeRendering(): void;
+    isMultiSelectable(): boolean;
+    isSelected(row: TableRowBase): boolean;
+    setSelected(row: TableRowBase, selected: boolean, _fireEvent?: boolean): void;
+    /**
+     * Returns an array of the selected rows.
+     *
+     * @public
+     */
+    getSelectedRows(): TableRow[];
+    /**
+     * Determines whether all rows are selected.
+     *
+     * @public
+     */
+    areAllRowsSelected(): boolean;
+    /**
+     * Returns the `selected` property as a set of unique `row-key` values.
+     *
+     * @public
+     */
+    getSelectedAsSet(): Set<string>;
+    /**
+     * Sets the `selected` property using the provided set of unique `row-key` values.
+     *
+     * @param selectedSet A set of `row-key` values
+     * @public
+     */
+    setSelectedAsSet(selectedSet: Set<string>): void;
+    _invalidateTableAndRows(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _onclick(e: MouseEvent): void;
+    /**
+     * Start the range selection and initialises the range selection state
+     * @param row starting row
+     * @private
+     */
+    _startRangeSelection(row: TableRow, isMouse?: boolean): void;
+    /**
+     * Handles the range selection
+     * @param targetRow Row that is currently focused
+     * @param change indicates direction
+     * @private
+     */
+    _handleRangeSelection(targetRow: TableRow, change: number): void;
+    _stopRangeSelection(): void;
+    _reverseRangeSelection(): void;
+}
+export default TableSelectionMulti;

package/dist/TableSelectionMulti.js

@@ -0,0 +1,260 @@
+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.
+     *
+     * @public
+     */
+    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
+            this._startRangeSelection(focusedElement);
+        }
+        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);
+            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, true);
+        }
+    }
+    /**
+     * Start the range selection and initialises the range selection state
+     * @param row starting row
+     * @private
+     */
+    _startRangeSelection(row, isMouse = false) {
+        const selected = this.isSelected(row);
+        if (isMouse && !selected) {
+            // Do not initiate range selection if the row is not selected
+            return;
+        }
+        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\t_fireEvent && 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\t * @public\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\tthis._startRangeSelection(focusedElement as TableRow);\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\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, 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, isMouse = false) {\n\t\tconst selected = this.isSelected(row);\n\t\tif (isMouse && !selected) {\n\t\t\t// Do not initiate range selection if the row is not selected\n\t\t\treturn;\n\t\t}\n\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;