@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/dist/TableRow.js

@@ -1,162 +1,164 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
-
-// Styles
-import styles from "./generated/themes/TableRow.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-table-row",
-	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
-		/**
-		 * Defines the cells of the <code>ui5-table-row</code>.
-		 * <br><br>
-		 * <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		"default": {
-			propertyName: "cells",
-			type: HTMLElement,
-			individualSlots: true,
-		},
-	},
-	properties: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
-		_columnsInfo: {
-			type: Object,
-			multiple: true,
-		},
-		_tabIndex: {
-			type: String,
-			defaultValue: "-1",
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
-		_focused: {},
-
-		_click: {},
-	},
+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 from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
+import TableRowBase from "./TableRowBase.js";
+import TableRowCss from "./generated/themes/TableRow.css.js";
+import TableCell from "./TableCell.js";
+import RadioButton from "./RadioButton.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
+ *
+ * The `ui5-table-row` component represents a row in the `ui5-table`.
  *
- * The <code>ui5-table-row</code> component represents a row in the <code>ui5-table</code>.
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableRow.js";`
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.TableRow
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-table-row
+ * @extends TableRowBase
+ * @since 2.0.0
  * @public
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
-class TableRow extends UI5Element {
-	constructor() {
-		super();
-		this.fnOnCellClick = this._oncellclick.bind(this);
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return styles;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return TableRowTemplate;
-	}
-
-	_onfocusin(event, forceSelfFocus = false) {
-		if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
-			this.getDomRef().focus();
-		}
-
-		this.fireEvent("_focused", event);
-	}
-
-	_oncellclick(event) {
-		if (this._getActiveElementTagName() === "body") {
-			// If the user clickes on non-focusable element within the ui5-table-cell,
-			// the focus goes to the body, se we have to bring it back to the row.
-			// If the user clicks on input, button or similar clickable element,
-			// the focus remains on that element.
-			this._onfocusin(event, true /* force row focus */);
-		}
-
-		this.fireEvent("_click");
-	}
-
-	_getActiveElementTagName() {
-		return document.activeElement.localName.toLocaleLowerCase();
-	}
-
-	get shouldPopin() {
-		return this._columnsInfo.filter(el => {
-			return el.demandPopin;
-		}).length;
-	}
-
-	onBeforeRendering() {
-		if (!this.shouldPopin) {
-			return;
-		}
-
-		this.visibleCells = [];
-		this.popinCells = [];
-
-		if (this.cells.length === 0) {
-			return;
-		}
-
-		this._columnsInfo.forEach((info, index) => {
-			const cell = this.cells[index];
-
-			if (!cell) {
-				return;
-			}
-
-			if (info.visible) {
-				this.visibleCells.push(cell);
-				cell.firstInRow = (index === 0);
-				cell.popined = false;
-			} else if (info.demandPopin) {
-				this.popinCells.push({
-					cell,
-					popinText: info.popinText,
-				});
-
-				cell.popined = true;
-			} else {
-				cell.popined = false;
-			}
-		}, this);
-
-		const lastVisibleCell = this.visibleCells[this.visibleCells.length - 1];
-
-		if (lastVisibleCell) {
-			lastVisibleCell.lastInRow = true;
-		}
-	}
-
-	get visibleCellsCount() {
-		return this.visibleCells.length;
-	}
-}
-
+let TableRow = class TableRow extends TableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique identifier of the row.
+         *
+         * @default ""
+         * @public
+         */
+        this.rowKey = "";
+        /**
+         * Defines the position of the row respect to the total number of rows within the table when the <code>ui5-table-virtualizer</code> feature is used.
+         *
+         * @default -1
+         * @since 2.5.0
+         * @public
+         */
+        this.position = -1;
+        /**
+         * Defines the interactive state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.interactive = false;
+        /**
+         * Defines the navigated state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.navigated = false;
+        /**
+         * Defines whether the row is movable.
+         *
+         * @default false
+         * @since 2.6.0
+         * @public
+         */
+        this.movable = false;
+        this._renderNavigated = false;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.toggleAttribute("_interactive", this._isInteractive);
+        if (this.position !== -1) {
+            this.setAttribute("aria-rowindex", `${this.position + 1}`);
+        }
+        if (this._renderNavigated && this.navigated) {
+            this.setAttribute("aria-current", "true");
+        }
+        else {
+            this.removeAttribute("aria-current");
+        }
+        if (this.movable) {
+            this.setAttribute("draggable", "true");
+        }
+        else {
+            this.removeAttribute("draggable");
+        }
+    }
+    async focus(focusOptions) {
+        this.setAttribute("tabindex", "-1");
+        HTMLElement.prototype.focus.call(this, focusOptions);
+        return Promise.resolve();
+    }
+    _onkeydown(e, eventOrigin) {
+        super._onkeydown(e, eventOrigin);
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (eventOrigin === this && this._isInteractive && isEnter(e)) {
+            this.toggleAttribute("_active", true);
+            this._table?._onRowPress(this);
+        }
+    }
+    _onclick() {
+        if (this._isInteractive && this === getActiveElement()) {
+            this._table?._onRowPress(this);
+        }
+    }
+    _onkeyup() {
+        this.removeAttribute("_active");
+    }
+    _onfocusout() {
+        this.removeAttribute("_active");
+    }
+    get _isInteractive() {
+        return this.interactive;
+    }
+};
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+        invalidateOnChildChange: {
+            properties: ["_popin"],
+            slots: false,
+        },
+    })
+], TableRow.prototype, "cells", void 0);
+__decorate([
+    property()
+], TableRow.prototype, "rowKey", void 0);
+__decorate([
+    property({ type: Number })
+], TableRow.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "navigated", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "movable", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TableRow.prototype, "_renderNavigated", void 0);
+TableRow = __decorate([
+    customElement({
+        tag: "ui5-table-row",
+        styles: [TableRowBase.styles, TableRowCss],
+        template: TableRowTemplate,
+        dependencies: [...TableRowBase.dependencies, RadioButton, TableCell],
+    })
+], TableRow);
 TableRow.define();
-
 export default TableRow;
+//# sourceMappingURL=TableRow.js.map

package/dist/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport TableRowTemplate from \"./generated/templates/TableRowTemplate.lit.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableRowCss from \"./generated/themes/TableRow.css.js\";\nimport TableCell from \"./TableCell.js\";\nimport RadioButton from \"./RadioButton.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-row` component represents a row in the `ui5-table`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableRow.js\";`\n *\n * @constructor\n * @extends TableRowBase\n * @since 2.0.0\n * @public\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({\n\ttag: \"ui5-table-row\",\n\tstyles: [TableRowBase.styles, TableRowCss],\n\ttemplate: TableRowTemplate,\n\tdependencies: [...TableRowBase.dependencies, RadioButton, TableCell],\n})\nclass TableRow extends TableRowBase {\n\t/**\n\t * Defines the cells of the component.\n\t *\n\t * **Note:** Use `ui5-table-cell` for the intended design.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"_popin\"],\n\t\t\tslots: false,\n\t\t},\n\t})\n\tcells!: Array<TableCell>;\n\n\t/**\n\t * Unique identifier of the row.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\trowKey = \"\";\n\n\t/**\n\t * Defines the position of the row respect to the total number of rows within the table when the <code>ui5-table-virtualizer</code> feature is used.\n\t *\n     * @default -1\n\t * @since 2.5.0\n     * @public\n     */\n\t@property({ type: Number })\n\tposition = -1;\n\n\t/**\n\t * Defines the interactive state of the row.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the navigated state of the row.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnavigated = false;\n\n\t/**\n\t * Defines whether the row is movable.\n\t *\n\t * @default false\n\t * @since 2.6.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tmovable = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_renderNavigated = false;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.toggleAttribute(\"_interactive\", this._isInteractive);\n\t\tif (this.position !== -1) {\n\t\t\tthis.setAttribute(\"aria-rowindex\", `${this.position + 1}`);\n\t\t}\n\t\tif (this._renderNavigated && this.navigated) {\n\t\t\tthis.setAttribute(\"aria-current\", \"true\");\n\t\t} else {\n\t\t\tthis.removeAttribute(\"aria-current\");\n\t\t}\n\t\tif (this.movable) {\n\t\t\tthis.setAttribute(\"draggable\", \"true\");\n\t\t} else {\n\t\t\tthis.removeAttribute(\"draggable\");\n\t\t}\n\t}\n\n\tasync focus(focusOptions?: FocusOptions | undefined): Promise<void> {\n\t\tthis.setAttribute(\"tabindex\", \"-1\");\n\t\tHTMLElement.prototype.focus.call(this, focusOptions);\n\t\treturn Promise.resolve();\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tsuper._onkeydown(e, eventOrigin);\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (eventOrigin === this && this._isInteractive && isEnter(e)) {\n\t\t\tthis.toggleAttribute(\"_active\", true);\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tif (this._isInteractive && this === getActiveElement()) {\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onkeyup() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\t_onfocusout() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\tget _isInteractive() {\n\t\treturn this.interactive;\n\t}\n}\n\nTableRow.define();\n\nexport default TableRow;\n"]}

package/dist/TableRowBase.d.ts

@@ -0,0 +1,37 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type TableCellBase from "./TableCellBase.js";
+import type Table from "./Table.js";
+/**
+ * @class
+ * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+declare abstract class TableRowBase extends UI5Element {
+    cells: Array<TableCellBase>;
+    _invalidate: number;
+    static i18nBundle: I18nBundle;
+    onEnterDOM(): void;
+    onBeforeRendering(): void;
+    getFocusDomRef(): this;
+    _informSelectionChange(): void;
+    isHeaderRow(): boolean;
+    _onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    get _table(): Table | undefined;
+    get _tableId(): string | undefined;
+    get _tableSelection(): import("./TableSelection.js").default | undefined;
+    get _isSelected(): boolean | undefined;
+    get _isSelectable(): boolean | undefined;
+    get _isMultiSelect(): boolean | undefined;
+    get _hasRowSelector(): boolean | undefined;
+    get _selectionCell(): HTMLElement | null;
+    get _visibleCells(): TableCellBase[];
+    get _popinCells(): TableCellBase[];
+    get _stickyCells(): (Element | null | undefined)[];
+    get _i18nRowSelector(): string;
+}
+export default TableRowBase;

package/dist/TableRowBase.js

@@ -0,0 +1,113 @@
+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;
+};
+var TableRowBase_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import TableRowBaseCss from "./generated/themes/TableRowBase.css.js";
+import CheckBox from "./CheckBox.js";
+import { isInstanceOfTable } from "./TableUtils.js";
+import { TABLE_ROW_SELECTOR, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+let TableRowBase = TableRowBase_1 = class TableRowBase extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._invalidate = 0;
+    }
+    onEnterDOM() {
+        this.setAttribute("role", "row");
+        this.toggleAttribute("ui5-table-row-base", true);
+    }
+    onBeforeRendering() {
+        if (this._isSelectable) {
+            this.setAttribute("aria-selected", `${this._isSelected}`);
+        }
+        else {
+            this.removeAttribute("aria-selected");
+        }
+    }
+    getFocusDomRef() {
+        return this;
+    }
+    _informSelectionChange() {
+        this._tableSelection?.informSelectionChange(this);
+    }
+    isHeaderRow() {
+        return false;
+    }
+    _onkeydown(e, eventOrigin) {
+        if ((eventOrigin === this && this._isSelectable && isSpace(e)) || (eventOrigin === this._selectionCell && (isSpace(e) || isEnter(e)))) {
+            this._informSelectionChange();
+            e.preventDefault();
+        }
+    }
+    get _table() {
+        const element = this.parentElement;
+        return isInstanceOfTable(element) ? element : undefined;
+    }
+    get _tableId() {
+        return this._table?._id;
+    }
+    get _tableSelection() {
+        return this._table?._getSelection();
+    }
+    get _isSelected() {
+        return this._tableSelection?.isSelected(this);
+    }
+    get _isSelectable() {
+        return this._tableSelection?.isSelectable();
+    }
+    get _isMultiSelect() {
+        return this._tableSelection?.isMultiSelect();
+    }
+    get _hasRowSelector() {
+        return this._tableSelection?.hasRowSelector();
+    }
+    get _selectionCell() {
+        return this.shadowRoot.getElementById("selection-cell");
+    }
+    get _visibleCells() {
+        return this.cells.filter(c => !c._popin);
+    }
+    get _popinCells() {
+        return this.cells.filter(c => c._popin);
+    }
+    get _stickyCells() {
+        const selectionCell = this.shadowRoot?.querySelector("#selection-cell"), navigatedCell = this.shadowRoot?.querySelector("#navigated-cell");
+        // filter out null/undefined
+        return [selectionCell, ...this.cells, navigatedCell].filter(cell => cell?.hasAttribute("fixed"));
+    }
+    get _i18nRowSelector() {
+        return TableRowBase_1.i18nBundle.getText(TABLE_ROW_SELECTOR);
+    }
+};
+__decorate([
+    property({ type: Number, noAttribute: true })
+], TableRowBase.prototype, "_invalidate", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TableRowBase, "i18nBundle", void 0);
+TableRowBase = TableRowBase_1 = __decorate([
+    customElement({
+        renderer: litRender,
+        styles: TableRowBaseCss,
+        dependencies: [CheckBox],
+    })
+], TableRowBase);
+export default TableRowBase;
+//# sourceMappingURL=TableRowBase.js.map

package/dist/TableRowBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRowBase.js","sourceRoot":"","sources":["../src/TableRowBase.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAE7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAErE,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EACN,kBAAkB,GAClB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;GAQG;AAMH,IAAe,YAAY,oBAA3B,MAAe,YAAa,SAAQ,UAAU;IAA9C;;QAIC,gBAAW,GAAG,CAAC,CAAC;IAyFjB,CAAC;IApFA,UAAU;QACT,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QAC3D,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC;IACb,CAAC;IAED,sBAAsB;QACrB,IAAI,CAAC,eAAe,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,WAAW;QACV,OAAO,KAAK,CAAC;IACd,CAAC;IAED,UAAU,CAAC,CAAgB,EAAE,WAAwB;QACpD,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACvI,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;QACpB,CAAC;IACF,CAAC;IAED,IAAI,MAAM;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACnC,OAAO,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IACzB,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC;IACrC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,eAAe,EAAE,YAAY,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,eAAe,EAAE,aAAa,EAAE,CAAC;IAC9C,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,IAAI,CAAC,eAAe,EAAE,cAAc,EAAE,CAAC;IAC/C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAW,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,YAAY;QACf,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,iBAAiB,CAAC,EACtE,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAEnE,4BAA4B;QAC5B,OAAO,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAClG,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5D,CAAC;CACD,CAAA;AAzFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;iDAC9B;AAGT;IADN,IAAI,CAAC,oBAAoB,CAAC;sCACG;AAPhB,YAAY;IAL1B,aAAa,CAAC;QACd,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,eAAe;QACvB,YAAY,EAAE,CAAC,QAAQ,CAAC;KACxB,CAAC;GACa,YAAY,CA6F1B;AAED,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type TableCellBase from \"./TableCellBase.js\";\nimport TableRowBaseCss from \"./generated/themes/TableRowBase.css.js\";\nimport type Table from \"./Table.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport { isInstanceOfTable } from \"./TableUtils.js\";\nimport {\n\tTABLE_ROW_SELECTOR,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\trenderer: litRender,\n\tstyles: TableRowBaseCss,\n\tdependencies: [CheckBox],\n})\nabstract class TableRowBase extends UI5Element {\n\tcells!: Array<TableCellBase>;\n\n\t@property({ type: Number, noAttribute: true })\n\t_invalidate = 0;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tthis.setAttribute(\"role\", \"row\");\n\t\tthis.toggleAttribute(\"ui5-table-row-base\", true);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._isSelectable) {\n\t\t\tthis.setAttribute(\"aria-selected\", `${this._isSelected}`);\n\t\t} else {\n\t\t\tthis.removeAttribute(\"aria-selected\");\n\t\t}\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\t_informSelectionChange() {\n\t\tthis._tableSelection?.informSelectionChange(this);\n\t}\n\n\tisHeaderRow(): boolean {\n\t\treturn false;\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif ((eventOrigin === this && this._isSelectable && isSpace(e)) || (eventOrigin === this._selectionCell && (isSpace(e) || isEnter(e)))) {\n\t\t\tthis._informSelectionChange();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\tget _table(): Table | undefined {\n\t\tconst element = this.parentElement;\n\t\treturn isInstanceOfTable(element) ? element : undefined;\n\t}\n\n\tget _tableId() {\n\t\treturn this._table?._id;\n\t}\n\n\tget _tableSelection() {\n\t\treturn this._table?._getSelection();\n\t}\n\n\tget _isSelected() {\n\t\treturn this._tableSelection?.isSelected(this);\n\t}\n\n\tget _isSelectable() {\n\t\treturn this._tableSelection?.isSelectable();\n\t}\n\n\tget _isMultiSelect() {\n\t\treturn this._tableSelection?.isMultiSelect();\n\t}\n\n\tget _hasRowSelector() {\n\t\treturn this._tableSelection?.hasRowSelector();\n\t}\n\n\tget _selectionCell() {\n\t\treturn this.shadowRoot!.getElementById(\"selection-cell\");\n\t}\n\n\tget _visibleCells() {\n\t\treturn this.cells.filter(c => !c._popin);\n\t}\n\n\tget _popinCells() {\n\t\treturn this.cells.filter(c => c._popin);\n\t}\n\n\tget _stickyCells() {\n\t\tconst selectionCell = this.shadowRoot?.querySelector(\"#selection-cell\"),\n\t\t\tnavigatedCell = this.shadowRoot?.querySelector(\"#navigated-cell\");\n\n\t\t// filter out null/undefined\n\t\treturn [selectionCell, ...this.cells, navigatedCell].filter(cell => cell?.hasAttribute(\"fixed\"));\n\t}\n\n\tget _i18nRowSelector(): string {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_ROW_SELECTOR);\n\t}\n}\n\nexport default TableRowBase;\n"]}

package/dist/TableSelection.d.ts

@@ -0,0 +1,108 @@
+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` ti 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
+ * @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;
+    _rangeSelection?: {
+        selected: boolean;
+        isUp: boolean | null;
+        rows: TableRow[];
+        isMouse: boolean;
+        shiftPressed: boolean;
+    } | null;
+    onTableActivate(table: Table): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    isSelectable(): boolean;
+    isMultiSelect(): boolean;
+    hasRowSelector(): boolean;
+    getRowIdentifier(row: TableRow): string;
+    isSelected(row: TableRowBase): boolean;
+    hasSelectedRow(): boolean;
+    areAllRowsSelected(): boolean;
+    informSelectionChange(row: TableRowBase): void;
+    get selectedAsArray(): string[];
+    set selectedAsArray(selectedArray: string[]);
+    get selectedAsSet(): Set<string>;
+    set selectedAsSet(selectedSet: Set<string>);
+    _selectRow(row: TableRow, selected: boolean): void;
+    _informRowSelectionChange(row: TableRow): void;
+    _informHeaderRowSelectionChange(): 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 TableSelection;