@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/TableRowTemplate.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import TableCell from "./TableCell.js";
+import CheckBox from "./CheckBox.js";
+import RadioButton from "./RadioButton.js";
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import iconOverflow from "@ui5/webcomponents-icons/dist/overflow.js";
+export default function TableRowTemplate(ariaColIndex = 1) {
+    return (_jsxs(_Fragment, { children: [this._hasSelector &&
+                _jsx(TableCell, { id: "selection-cell", "aria-selected": this._isSelected, "aria-colindex": ariaColIndex++, "data-ui5-table-selection-cell": true, "data-ui5-table-cell-fixed": true, "data-ui5-acc-text": "", children: this._isMultiSelect ?
+                        _jsx(CheckBox, { id: "selection-component", tabindex: -1, checked: this._isSelected, onChange: this._onSelectionChange, accessibleName: this._i18nRowSelector })
+                        :
+                            _jsx(RadioButton, { id: "selection-component", tabindex: -1, name: this._tableId, checked: this._isSelected, onChange: this._onSelectionChange, accessibleName: this._i18nRowSelector }) }), this.cells.flatMap(cell => {
+                if (cell._popin) {
+                    cell.role = null;
+                    cell.ariaColIndex = null;
+                    return [];
+                }
+                cell.role ??= cell.ariaRole;
+                cell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;
+                return [_jsx("slot", { name: cell._individualSlot })];
+            }), this._rowActionCount > 0 &&
+                _jsxs(TableCell, { id: "actions-cell", "aria-colindex": ariaColIndex++, "data-ui5-acc-text": this._actionCellAccText, children: [this._flexibleActions.map(action => (_jsx("slot", { name: action._individualSlot }))), this._hasOverflowActions &&
+                            _jsx(Button, { id: "overflow", icon: iconOverflow, design: ButtonDesign.Transparent, onClick: this._onOverflowButtonClick }), this._fixedActions.map(action => (_jsx("slot", { name: action._individualSlot })))] }), this._renderNavigated &&
+                _jsx(TableCell, { id: "navigated-cell", "data-excluded-from-navigation": true, "aria-hidden": true, role: "none", children: _jsx("div", { id: "navigated" }) }), this._popinCells.length > 0 &&
+                _jsx(TableCell, { id: "popin-cell", "data-ui5-table-popin-cell": true, "aria-colindex": ariaColIndex++, children: this._popinCells.map(cell => (_jsx("slot", { name: cell._individualSlot }))) })] }));
+}
+//# sourceMappingURL=TableRowTemplate.js.map

package/dist/TableRowTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowTemplate.js","sourceRoot":"","sources":["../src/TableRowTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import TableCell from \"./TableCell.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport RadioButton from \"./RadioButton.js\";\nimport Button from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport iconOverflow from \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type TableRow from \"./TableRow.js\";\n\nexport default function TableRowTemplate(this: TableRow, ariaColIndex: number = 1) {\n\treturn (\n\t\t<>\n\t\t\t{ this._hasSelector &&\n\t\t\t\t<TableCell id=\"selection-cell\"\n\t\t\t\t\taria-selected={this._isSelected}\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-ui5-table-selection-cell\n\t\t\t\t\tdata-ui5-table-cell-fixed\n\t\t\t\t\tdata-ui5-acc-text=\"\"\n\t\t\t\t>\n\t\t\t\t\t{ this._isMultiSelect ?\n\t\t\t\t\t\t<CheckBox id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></CheckBox>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<RadioButton id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tname={this._tableId}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></RadioButton>\n\t\t\t\t\t}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this.cells.flatMap(cell => {\n\t\t\t\tif (cell._popin) {\n\t\t\t\t\tcell.role = null;\n\t\t\t\t\tcell.ariaColIndex = null;\n\t\t\t\t\treturn [];\n\t\t\t\t}\n\n\t\t\t\tcell.role ??= cell.ariaRole;\n\t\t\t\tcell.ariaColIndex = (cell.role === cell.ariaRole) ? `${ariaColIndex++}` : null;\n\t\t\t\treturn [<slot name={cell._individualSlot}></slot>];\n\t\t\t})}\n\n\t\t\t{ this._rowActionCount > 0 &&\n\t\t\t\t<TableCell id=\"actions-cell\"\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t\tdata-ui5-acc-text={this._actionCellAccText}\n\t\t\t\t>\n\t\t\t\t\t{ this._flexibleActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\n\t\t\t\t\t{ this._hasOverflowActions &&\n\t\t\t\t\t\t<Button id=\"overflow\"\n\t\t\t\t\t\t\ticon={iconOverflow}\n\t\t\t\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\t\t\t\tonClick={this._onOverflowButtonClick}\n\t\t\t\t\t\t></Button>\n\t\t\t\t\t}\n\n\t\t\t\t\t{ this._fixedActions.map(action => (\n\t\t\t\t\t\t<slot name={action._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._renderNavigated &&\n\t\t\t\t<TableCell id=\"navigated-cell\"\n\t\t\t\t\tdata-excluded-from-navigation\n\t\t\t\t\taria-hidden={true}\n\t\t\t\t\trole=\"none\"\n\t\t\t\t>\n\t\t\t\t\t<div id=\"navigated\"></div>\n\t\t\t\t</TableCell>\n\t\t\t}\n\n\t\t\t{ this._popinCells.length > 0 &&\n\t\t\t\t<TableCell id=\"popin-cell\"\n\t\t\t\t\tdata-ui5-table-popin-cell\n\t\t\t\t\taria-colindex={ariaColIndex++}\n\t\t\t\t>\n\t\t\t\t\t{ this._popinCells.map(cell => (\n\t\t\t\t\t\t<slot name={cell._individualSlot}></slot>\n\t\t\t\t\t))}\n\t\t\t\t</TableCell>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/TableSelection.d.ts

@@ -0,0 +1,115 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import TableSelectionMode from "./types/TableSelectionMode.js";
+import type Table from "./Table.js";
+import type { ITableFeature } from "./Table.js";
+import type TableRow from "./TableRow.js";
+import type TableRowBase from "./TableRowBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.
+ *
+ * The component offers three selection modes:
+ * * Single - select a single row.
+ * * Multiple - select multiple rows.
+ * * None - no selection active.
+ *
+ * As the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.
+ * It has to be slotted inside the `ui5-table` in the `features` slot.
+ * The component is not intended to be used as a standalone component.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection mode="Multiple" slot="features"></ui5-table-selection>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelection.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ * @deprecated This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+declare class TableSelection extends UI5Element implements ITableFeature {
+    eventDetails: {
+        change: void;
+    };
+    /**
+     * Defines the selection mode.
+     *
+     * @default "Multiple"
+     * @public
+     */
+    mode: `${TableSelectionMode}`;
+    /**
+     * Defines the selected rows separated by a space.
+     *
+     * @default ""
+     * @public
+     */
+    selected: string;
+    readonly identifier = "TableSelection";
+    _table?: Table;
+    _rowsLength: number;
+    _rangeSelection?: {
+        selected: boolean;
+        isUp: boolean | null;
+        rows: TableRow[];
+        isMouse: boolean;
+        shiftPressed: boolean;
+    } | null;
+    onClickCaptureBound: (e: MouseEvent) => void;
+    constructor();
+    onTableActivate(table: Table): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    onTableBeforeRendering(): void;
+    onTableAfterRendering(): void;
+    isSelectable(): boolean;
+    isMultiSelectable(): boolean;
+    isRowSelectorRequired(): boolean;
+    getAriaDescriptionForTable(): string | undefined;
+    getAriaDescriptionForColumnHeader(): string | undefined;
+    getRowKey(row: TableRow): string;
+    isSelected(row: TableRowBase): boolean;
+    hasSelectedRow(): boolean;
+    areAllRowsSelected(): boolean;
+    setSelected(row: TableRowBase, selected: boolean, fireEvent?: boolean): void;
+    get selectedAsArray(): string[];
+    set selectedAsArray(selectedArray: string[]);
+    get selectedAsSet(): Set<string>;
+    set selectedAsSet(selectedSet: Set<string>);
+    _selectRow(row: TableRow, selected: boolean): void;
+    _selectHeaderRow(selected: boolean): void;
+    _invalidateTableAndRows(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _onClickCapture(e: MouseEvent): void;
+    /**
+     * Start the range selection and initialises the range selection state
+     * @param row starting row
+     * @private
+     */
+    _startRangeSelection(row: TableRow, selected: boolean, 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 TableSelection;

package/dist/TableSelection.js

@@ -0,0 +1,348 @@
+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 { isUpShift, } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import TableSelectionMode from "./types/TableSelectionMode.js";
+import { isSelectionCell, isHeaderSelectionCell, findRowInPath } from "./TableUtils.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-selection` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.
+ *
+ * The component offers three selection modes:
+ * * Single - select a single row.
+ * * Multiple - select multiple rows.
+ * * None - no selection active.
+ *
+ * As the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.
+ * It has to be slotted inside the `ui5-table` in the `features` slot.
+ * The component is not intended to be used as a standalone component.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-selection mode="Multiple" slot="features"></ui5-table-selection>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableSelection.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ * @deprecated This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+let TableSelection = class TableSelection extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the selection mode.
+         *
+         * @default "Multiple"
+         * @public
+         */
+        this.mode = "Multiple";
+        /**
+         * Defines the selected rows separated by a space.
+         *
+         * @default ""
+         * @public
+         */
+        this.selected = "";
+        this.identifier = "TableSelection";
+        this._rowsLength = 0;
+        this.onClickCaptureBound = this._onClickCapture.bind(this);
+    }
+    onTableActivate(table) {
+        this._table = table;
+        this._invalidateTableAndRows();
+    }
+    onExitDOM() {
+        this.mode = TableSelectionMode.None;
+        this._invalidateTableAndRows();
+        this._table = undefined;
+    }
+    onBeforeRendering() {
+        this._invalidateTableAndRows();
+    }
+    onTableBeforeRendering() {
+        if (this.isMultiSelectable() && this._table && this._table.headerRow[0] && this._rowsLength !== this._table.rows.length) {
+            this._rowsLength = this._table.rows.length;
+            this._table.headerRow[0]._invalidate++;
+        }
+        this._table?.removeEventListener("click", this.onClickCaptureBound);
+    }
+    onTableAfterRendering() {
+        this._table?.addEventListener("click", this.onClickCaptureBound, { capture: true });
+    }
+    isSelectable() {
+        return this.mode !== TableSelectionMode.None;
+    }
+    isMultiSelectable() {
+        return this.mode === TableSelectionMode.Multiple;
+    }
+    isRowSelectorRequired() {
+        return this.mode !== TableSelectionMode.None;
+    }
+    getAriaDescriptionForTable() {
+        return undefined;
+    }
+    getAriaDescriptionForColumnHeader() {
+        return undefined;
+    }
+    getRowKey(row) {
+        return row.rowKey || "";
+    }
+    isSelected(row) {
+        if (!this._table || !this.isSelectable()) {
+            return false;
+        }
+        if (row.isHeaderRow()) {
+            return this.areAllRowsSelected();
+        }
+        const rowKey = this.getRowKey(row);
+        return this.selectedAsArray.includes(rowKey);
+    }
+    hasSelectedRow() {
+        if (!this._table || !this.isSelectable()) {
+            return false;
+        }
+        const selectedArray = this.selectedAsArray;
+        return this._table.rows.some(row => {
+            const rowKey = this.getRowKey(row);
+            return selectedArray.includes(rowKey);
+        });
+    }
+    areAllRowsSelected() {
+        if (!this._table || !this._table.rows.length || this.mode !== TableSelectionMode.Multiple) {
+            return false;
+        }
+        const selectedArray = this.selectedAsArray;
+        return this._table.rows.every(row => {
+            const rowKey = this.getRowKey(row);
+            return selectedArray.includes(rowKey);
+        });
+    }
+    setSelected(row, selected, fireEvent = false) {
+        if (this._rangeSelection?.isMouse && this._rangeSelection.shiftPressed) {
+            return;
+        }
+        if (row.isHeaderRow()) {
+            this._selectHeaderRow(selected);
+        }
+        else {
+            this._selectRow(row, selected);
+        }
+        if (fireEvent) {
+            this.fireDecoratorEvent("change");
+        }
+    }
+    get selectedAsArray() {
+        return this.selected.split(" ").filter(String);
+    }
+    set selectedAsArray(selectedArray) {
+        this.selected = selectedArray.filter(String).join(" ");
+    }
+    get selectedAsSet() {
+        return new Set(this.selectedAsArray);
+    }
+    set selectedAsSet(selectedSet) {
+        this.selectedAsArray = [...selectedSet];
+    }
+    _selectRow(row, selected) {
+        const rowKey = this.getRowKey(row);
+        if (this.mode === TableSelectionMode.Multiple) {
+            const selectedSet = this.selectedAsSet;
+            selectedSet[selected ? "add" : "delete"](rowKey);
+            this.selectedAsSet = selectedSet;
+        }
+        else {
+            this.selected = selected ? rowKey : "";
+        }
+    }
+    _selectHeaderRow(selected) {
+        const selectedSet = this.selectedAsSet;
+        this._table.rows.forEach(row => {
+            const rowKey = this.getRowKey(row);
+            selectedSet[selected ? "add" : "delete"](rowKey);
+        });
+        this.selectedAsSet = selectedSet;
+    }
+    _invalidateTableAndRows() {
+        if (!this._table) {
+            return;
+        }
+        if (!this.isSelectable()) {
+            this.selected = "";
+        }
+        else if (!this.isMultiSelectable()) {
+            this.selected = this.selectedAsArray.shift() || "";
+        }
+        this._table._invalidate++;
+        this._table.headerRow[0]._invalidate++;
+        this._table.rows.forEach(row => row._invalidate++);
+    }
+    _onkeydown(e) {
+        if (!this.isMultiSelectable() || !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)) {
+            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;
+        }
+    }
+    _onClickCapture(e) {
+        if (!this._table || this.mode !== TableSelectionMode.Multiple) {
+            return;
+        }
+        if (isHeaderSelectionCell(e)) {
+            this._stopRangeSelection();
+            return;
+        }
+        if (!isSelectionCell(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);
+            const selectionState = this.isSelected(startRow);
+            // 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", selectionState);
+            e.stopPropagation();
+            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);
+            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);
+                }
+                this._selectRow(row, this._rangeSelection.selected);
+                return changed || isRowSelectionDifferent;
+            }, selectionChanged) || false;
+        }
+        selectionChanged && this.fireDecoratorEvent("change");
+    }
+    _stopRangeSelection() {
+        this._rangeSelection = null;
+    }
+    _reverseRangeSelection() {
+        const row = this._rangeSelection?.rows.pop();
+        if (row) {
+            this._selectRow(row, false);
+        }
+        if (this._rangeSelection?.rows.length === 1) {
+            this._rangeSelection.isUp = null;
+        }
+    }
+};
+__decorate([
+    property()
+], TableSelection.prototype, "mode", void 0);
+__decorate([
+    property()
+], TableSelection.prototype, "selected", void 0);
+TableSelection = __decorate([
+    customElement({ tag: "ui5-table-selection" })
+    /**
+     * Fired when the selection is changed by user interaction.
+     *
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+    })
+], TableSelection);
+TableSelection.define();
+export default TableSelection;
+//# sourceMappingURL=TableSelection.js.map

package/dist/TableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSelection.js","sourceRoot":"","sources":["../src/TableSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisUpShift,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport TableSelectionMode from \"./types/TableSelectionMode.js\";\nimport { isSelectionCell, isHeaderSelectionCell, findRowInPath } from \"./TableUtils.js\";\nimport type Table from \"./Table.js\";\nimport type { ITableFeature } from \"./Table.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` component is used inside the `ui5-table` to add key-based selection capabilities to the `ui5-table`.\n *\n * The component offers three selection modes:\n * * Single - select a single row.\n * * Multiple - select multiple rows.\n * * None - no selection active.\n *\n * As the selection is key-based, `ui5-table-row` components need to define a unique `row-key` property.\n *\n * ### Usage\n *\n * The `ui5-table-selection` component is only used inside the `ui5-table` component as a feature.\n * It has to be slotted inside the `ui5-table` in the `features` slot.\n * The component is not intended to be used as a standalone component.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-selection mode=\"Multiple\" slot=\"features\"></ui5-table-selection>\n * </ui5-table>\n * ```\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableSelection.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @deprecated This component is deprecated and will be removed in future releases. Use the `ui5-table-selection-single` or `ui5-table-selection-multi` components instead.\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({ tag: \"ui5-table-selection\" })\n\n/**\n * Fired when the selection is changed by user interaction.\n *\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\n\nclass TableSelection extends UI5Element implements ITableFeature {\n\teventDetails!: {\n\t\tchange: void,\n\t}\n\t/**\n\t * Defines the selection mode.\n\t *\n\t * @default \"Multiple\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${TableSelectionMode}` = \"Multiple\";\n\n\t/**\n\t * Defines the selected rows separated by a space.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tselected = \"\";\n\n\treadonly identifier = \"TableSelection\";\n\t_table?: Table;\n\t_rowsLength = 0;\n\t_rangeSelection?: {selected: boolean, isUp: boolean | null, rows: TableRow[], isMouse: boolean, shiftPressed: boolean} | null;\n\n\tonClickCaptureBound: (e: MouseEvent) => void;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.onClickCaptureBound = this._onClickCapture.bind(this);\n\t}\n\n\tonTableActivate(table: Table) {\n\t\tthis._table = table;\n\t\tthis._invalidateTableAndRows();\n\t}\n\n\tonExitDOM() {\n\t\tthis.mode = TableSelectionMode.None;\n\t\tthis._invalidateTableAndRows();\n\t\tthis._table = undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._invalidateTableAndRows();\n\t}\n\n\tonTableBeforeRendering() {\n\t\tif (this.isMultiSelectable() && 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\n\t\tthis._table?.removeEventListener(\"click\", this.onClickCaptureBound);\n\t}\n\n\tonTableAfterRendering(): void {\n\t\tthis._table?.addEventListener(\"click\", this.onClickCaptureBound, { capture: true });\n\t}\n\n\tisSelectable(): boolean {\n\t\treturn this.mode !== TableSelectionMode.None;\n\t}\n\n\tisMultiSelectable(): boolean {\n\t\treturn this.mode === TableSelectionMode.Multiple;\n\t}\n\n\tisRowSelectorRequired(): boolean {\n\t\treturn this.mode !== TableSelectionMode.None;\n\t}\n\n\tgetAriaDescriptionForTable(): string | undefined {\n\t\treturn undefined;\n\t}\n\n\tgetAriaDescriptionForColumnHeader(): string | undefined {\n\t\treturn undefined;\n\t}\n\n\tgetRowKey(row: TableRow): string {\n\t\treturn row.rowKey || \"\";\n\t}\n\n\tisSelected(row: TableRowBase): boolean {\n\t\tif (!this._table || !this.isSelectable()) {\n\t\t\treturn false;\n\t\t}\n\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.selectedAsArray.includes(rowKey);\n\t}\n\n\thasSelectedRow(): boolean {\n\t\tif (!this._table || !this.isSelectable()) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst selectedArray = this.selectedAsArray;\n\t\treturn this._table.rows.some(row => {\n\t\t\tconst rowKey = this.getRowKey(row);\n\t\t\treturn selectedArray.includes(rowKey);\n\t\t});\n\t}\n\n\tareAllRowsSelected(): boolean {\n\t\tif (!this._table || !this._table.rows.length || this.mode !== TableSelectionMode.Multiple) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst selectedArray = this.selectedAsArray;\n\t\treturn this._table.rows.every(row => {\n\t\t\tconst rowKey = this.getRowKey(row);\n\t\t\treturn selectedArray.includes(rowKey);\n\t\t});\n\t}\n\n\tsetSelected(row: TableRowBase, selected: boolean, fireEvent = false) {\n\t\tif (this._rangeSelection?.isMouse && this._rangeSelection.shiftPressed) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (row.isHeaderRow()) {\n\t\t\tthis._selectHeaderRow(selected);\n\t\t} else {\n\t\t\tthis._selectRow(row as TableRow, selected);\n\t\t}\n\n\t\tif (fireEvent) {\n\t\t\tthis.fireDecoratorEvent(\"change\");\n\t\t}\n\t}\n\n\tget selectedAsArray(): string[] {\n\t\treturn this.selected.split(\" \").filter(String);\n\t}\n\n\tset selectedAsArray(selectedArray: string[]) {\n\t\tthis.selected = selectedArray.filter(String).join(\" \");\n\t}\n\n\tget selectedAsSet(): Set<string> {\n\t\treturn new Set(this.selectedAsArray);\n\t}\n\n\tset selectedAsSet(selectedSet: Set<string>) {\n\t\tthis.selectedAsArray = [...selectedSet];\n\t}\n\n\t_selectRow(row: TableRow, selected: boolean) {\n\t\tconst rowKey = this.getRowKey(row);\n\t\tif (this.mode === TableSelectionMode.Multiple) {\n\t\t\tconst selectedSet = this.selectedAsSet;\n\t\t\tselectedSet[selected ? \"add\" : \"delete\"](rowKey);\n\t\t\tthis.selectedAsSet = selectedSet;\n\t\t} else {\n\t\t\tthis.selected = selected ? rowKey : \"\";\n\t\t}\n\t}\n\n\t_selectHeaderRow(selected: boolean) {\n\t\tconst selectedSet = this.selectedAsSet;\n\t\tthis._table!.rows.forEach(row => {\n\t\t\tconst rowKey = this.getRowKey(row);\n\t\t\tselectedSet[selected ? \"add\" : \"delete\"](rowKey);\n\t\t});\n\t\tthis.selectedAsSet = selectedSet;\n\t}\n\n\t_invalidateTableAndRows() {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.isSelectable()) {\n\t\t\tthis.selected = \"\";\n\t\t} else if (!this.isMultiSelectable()) {\n\t\t\tthis.selected = this.selectedAsArray.shift() || \"\";\n\t\t}\n\n\t\tthis._table._invalidate++;\n\t\tthis._table.headerRow[0]._invalidate++;\n\t\tthis._table.rows.forEach(row => row._invalidate++);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this.isMultiSelectable() || !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)) {\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_onClickCapture(e: MouseEvent) {\n\t\tif (!this._table || this.mode !== TableSelectionMode.Multiple) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isHeaderSelectionCell(e)) {\n\t\t\tthis._stopRangeSelection();\n\t\t\treturn;\n\t\t}\n\n\t\tif (!isSelectionCell(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\tconst selectionState = this.isSelected(startRow);\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\", selectionState);\n\t\t\te.stopPropagation();\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\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\tthis._selectRow(row, this._rangeSelection!.selected);\n\n\t\t\t\treturn changed || isRowSelectionDifferent;\n\t\t\t}, selectionChanged) || false;\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._selectRow(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\nTableSelection.define();\n\nexport default TableSelection;\n"]}

package/dist/TableSelectionBase.d.ts

@@ -0,0 +1,94 @@
+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";
+import TableSelectionBehavior from "./types/TableSelectionBehavior.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;
+    /**
+     * Defines the selection behavior.
+     *
+     * @default "RowSelector"
+     * @public
+     * @since 2.11
+     */
+    behavior: `${TableSelectionBehavior}`;
+    readonly identifier = "TableSelection";
+    protected _table?: Table;
+    private _rowsLength;
+    onTableActivate(table: Table): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    onTableBeforeRendering(): 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 ARIA description of the Table as an alternative to aria-multiselectable.
+     */
+    getAriaDescriptionForTable(): string | undefined;
+    /**
+     * Returns the ARIA description of the selection component displayed in the column header.
+     */
+    getAriaDescriptionForColumnHeader(): string | undefined;
+    /**
+     * Returns the unique key associated with the table row.
+     *
+     * @param row The row instance
+     */
+    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
+     */
+    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
+     * @param fireEvent Whether the change event should be fired
+     */
+    abstract setSelected(row: TableRowBase, selected: boolean, fireEvent: boolean): void;
+    /**
+     * Invalidates the table and its rows to re-evaluate the selection.
+     */
+    protected _invalidateTableAndRows(): void;
+}
+export default TableSelectionBase;
+export type { TableSelectionBaseChangeEventDetail, };