@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/TableSelectionSingle.js

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

package/dist/TableSelectionSingle.js.map

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

package/dist/TableTemplate.d.ts

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

package/dist/TableTemplate.js

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

package/dist/TableTemplate.js.map

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

package/dist/TableUtils.d.ts

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

package/dist/TableUtils.js

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

package/dist/TableUtils.js.map

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

package/dist/TableVirtualizer.d.ts

@@ -0,0 +1,100 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { InvalidationInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ITableFeature } from "./Table.js";
+import type Table from "./Table.js";
+declare enum TabBlocking {
+    None = 0,
+    Next = 1,
+    Previous = 2,
+    Released = 4,
+    NextReleased = 5,
+    PreviousReleased = 6
+}
+/**
+ * Fired when the virtualizer is changed by user interaction e.g. on scrolling.
+ * @param number {first} The 0-based index of the first children currently rendered
+ * @param number {last} The 0-based index of the last children currently rendered
+ * @public
+ */
+type RangeChangeEventDetail = {
+    first: number;
+    last: number;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.
+ * It is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.
+ * This allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.
+ *
+ * **Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/TableVirtualizer.js";`
+ *
+ * @constructor
+ * @since 2.5.0
+ * @extends UI5Element
+ * @public
+ * @experimental This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.
+ */
+declare class TableVirtualizer extends UI5Element implements ITableFeature {
+    eventDetails: {
+        "range-change": RangeChangeEventDetail;
+    };
+    /**
+     * Defines the height of the rows in the table.
+     *
+     * **Note:** For virtualization to work properly, this property is mandatory.
+     *
+     * @default 45
+     * @public
+     */
+    rowHeight: number;
+    /**
+     * Defines the total count of rows in the table.
+     *
+     * **Note:** For virtualization to work properly, this property is mandatory.
+     *
+     * @default 100
+     * @public
+     */
+    rowCount: number;
+    /**
+     * Defines the count of extra rows to be rendered at the top and bottom of the table.
+     *
+     * **Note:** This property is experimental and may be changed or deleted in the future.
+     *
+     * @default 0
+     * @public
+     */
+    extraRows: number;
+    readonly identifier = "TableVirtualizer";
+    _table?: Table;
+    _lastRowPosition: number;
+    _firstRowPosition: number;
+    _visibleRowCount: number;
+    _tabBlockingState: TabBlocking;
+    _onRowInvalidateBound: (invalidationInfo: InvalidationInfo) => void;
+    _onScrollBound: () => void;
+    constructor();
+    onAfterRendering(): void;
+    onTableAfterRendering(table: Table): void;
+    onExitDOM(): void;
+    /**
+     * Resets the virtualizer to its initial state and triggers the `range-change` event.
+     * @public
+     */
+    reset(): void;
+    get _scrollContainer(): HTMLElement;
+    get _rowsContainer(): HTMLElement;
+    _onScroll(): void;
+    _updateRowsHeight(): void;
+    _getTransform(): string | undefined;
+    _onRowInvalidate(invalidationInfo: InvalidationInfo): void;
+    _onKeyDown(e: KeyboardEvent): void;
+}
+export default TableVirtualizer;
+export type { RangeChangeEventDetail, };

package/dist/TableVirtualizer.js

@@ -0,0 +1,253 @@
+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;
+};
+/* eslint-disable no-bitwise */
+import { isUp, isUpShift, isDown, isDownShift, isPageUp, isPageDown, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.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 getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import { throttle } from "./TableUtils.js";
+var TabBlocking;
+(function (TabBlocking) {
+    TabBlocking[TabBlocking["None"] = 0] = "None";
+    TabBlocking[TabBlocking["Next"] = 1] = "Next";
+    TabBlocking[TabBlocking["Previous"] = 2] = "Previous";
+    TabBlocking[TabBlocking["Released"] = 4] = "Released";
+    TabBlocking[TabBlocking["NextReleased"] = 5] = "NextReleased";
+    TabBlocking[TabBlocking["PreviousReleased"] = 6] = "PreviousReleased";
+})(TabBlocking || (TabBlocking = {}));
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.
+ * It is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.
+ * This allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.
+ *
+ * **Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/TableVirtualizer.js";`
+ *
+ * @constructor
+ * @since 2.5.0
+ * @extends UI5Element
+ * @public
+ * @experimental This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.
+ */
+let TableVirtualizer = class TableVirtualizer extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the height of the rows in the table.
+         *
+         * **Note:** For virtualization to work properly, this property is mandatory.
+         *
+         * @default 45
+         * @public
+         */
+        this.rowHeight = 45;
+        /**
+         * Defines the total count of rows in the table.
+         *
+         * **Note:** For virtualization to work properly, this property is mandatory.
+         *
+         * @default 100
+         * @public
+         */
+        this.rowCount = 100;
+        /**
+         * Defines the count of extra rows to be rendered at the top and bottom of the table.
+         *
+         * **Note:** This property is experimental and may be changed or deleted in the future.
+         *
+         * @default 0
+         * @public
+         */
+        this.extraRows = 0;
+        this.identifier = "TableVirtualizer";
+        this._lastRowPosition = 0;
+        this._firstRowPosition = 0;
+        this._visibleRowCount = 0;
+        this._tabBlockingState = TabBlocking.None;
+        this._onScrollBound = throttle(this._onScroll.bind(this));
+        this._onRowInvalidateBound = this._onRowInvalidate.bind(this);
+    }
+    onAfterRendering() {
+        this._table && this._table._invalidate++;
+    }
+    onTableAfterRendering(table) {
+        if (!this._table) {
+            this._table = table;
+            this._scrollContainer.addEventListener("scroll", this._onScrollBound, { passive: true });
+            this._updateRowsHeight();
+            this._onScroll();
+        }
+        else {
+            this._updateRowsHeight();
+        }
+        if (this._tabBlockingState & TabBlocking.Released) {
+            const tabBlockingRow = this._table.rows.at(this._tabBlockingState & TabBlocking.Next ? -1 : 0);
+            const tabForwardingElement = getTabbableElements(tabBlockingRow).at(this._tabBlockingState & TabBlocking.Next ? 0 : -1);
+            this._tabBlockingState = TabBlocking.None;
+            (tabForwardingElement || tabBlockingRow).focus();
+        }
+    }
+    onExitDOM() {
+        if (this._table) {
+            this._scrollContainer.removeEventListener("scroll", this._onScrollBound);
+            this._table = undefined;
+        }
+    }
+    /**
+     * Resets the virtualizer to its initial state and triggers the `range-change` event.
+     * @public
+     */
+    reset() {
+        this._lastRowPosition = -1;
+        this._firstRowPosition = -1;
+        if (this._table) {
+            if (this._scrollContainer.scrollTop > 0) {
+                this._scrollContainer.scrollTop = 0;
+            }
+            else {
+                this._onScroll();
+            }
+        }
+    }
+    get _scrollContainer() {
+        return this._table._tableElement;
+    }
+    get _rowsContainer() {
+        return this._table.shadowRoot.getElementById("rows");
+    }
+    _onScroll() {
+        const headerRow = this._table.headerRow[0];
+        const headerHeight = headerRow.offsetHeight;
+        let scrollTop = this._scrollContainer.scrollTop;
+        let scrollableHeight = this._scrollContainer.clientHeight;
+        if (headerRow.sticky) {
+            scrollableHeight = Math.max(0, scrollableHeight - headerHeight);
+        }
+        else {
+            scrollTop = Math.max(0, scrollTop - headerHeight);
+        }
+        this._visibleRowCount = Math.ceil(scrollableHeight / this.rowHeight);
+        let firstRowPosition = Math.floor(scrollTop / this.rowHeight) - this.extraRows;
+        firstRowPosition = Math.max(0, firstRowPosition);
+        let lastRowPosition = Math.max(0, firstRowPosition + this._visibleRowCount + 2 * this.extraRows);
+        lastRowPosition = Math.min(lastRowPosition, this.rowCount);
+        if (this._firstRowPosition === firstRowPosition && this._lastRowPosition === lastRowPosition) {
+            return;
+        }
+        this._lastRowPosition = lastRowPosition;
+        this._firstRowPosition = firstRowPosition;
+        this.fireDecoratorEvent("range-change", {
+            first: firstRowPosition,
+            last: lastRowPosition,
+        });
+    }
+    _updateRowsHeight() {
+        const rowsHeight = this.rowCount * this.rowHeight;
+        this._rowsContainer.style.height = `${rowsHeight}px`;
+    }
+    _getTransform() {
+        if (!this._table) {
+            return;
+        }
+        const firstRow = this._table.rows[0];
+        if (firstRow && firstRow.position !== undefined && firstRow.position > 0) {
+            const transform = firstRow.position * this.rowHeight;
+            return `translateY(${transform}px)`;
+        }
+    }
+    _onRowInvalidate(invalidationInfo) {
+        if (invalidationInfo.name === "position") {
+            invalidationInfo.target.detachInvalidate(this._onRowInvalidateBound);
+            this._tabBlockingState |= TabBlocking.Released;
+        }
+    }
+    _onKeyDown(e) {
+        if (!this._table) {
+            return;
+        }
+        let scrollTopChange = 0;
+        const rows = this._table.rows;
+        const firstRow = rows[0];
+        const lastRow = rows[rows.length - 1];
+        const hasDataBeforeFirstRow = firstRow.position !== 0;
+        const hasDataAfterLastRow = lastRow.position !== this.rowCount - 1;
+        const tableNavigation = this._table._tableNavigation;
+        const activeElement = getActiveElement();
+        if (isTabNext(e) && hasDataAfterLastRow && getTabbableElements(this._rowsContainer).pop() === activeElement) {
+            this._tabBlockingState = TabBlocking.Next;
+            lastRow.attachInvalidate(this._onRowInvalidateBound);
+            scrollTopChange = this.rowHeight;
+        }
+        else if (isTabPrevious(e) && hasDataBeforeFirstRow && getTabbableElements(this._rowsContainer).shift() === activeElement) {
+            this._tabBlockingState = TabBlocking.Previous;
+            firstRow.attachInvalidate(this._onRowInvalidateBound);
+            scrollTopChange = this.rowHeight * -1;
+        }
+        else if (hasDataAfterLastRow && tableNavigation._getNavigationItemsOfRow(lastRow).includes(activeElement)) {
+            if (isDown(e) || isDownShift(e)) {
+                scrollTopChange = this.rowHeight;
+            }
+            else if (isPageDown(e)) {
+                scrollTopChange = this._visibleRowCount * this.rowHeight;
+            }
+            else if (isEnd(e) && activeElement === lastRow) {
+                scrollTopChange = this.rowCount * this.rowHeight;
+            }
+        }
+        else if (hasDataBeforeFirstRow && tableNavigation._getNavigationItemsOfRow(firstRow).includes(activeElement)) {
+            if (isUp(e) || isUpShift(e)) {
+                scrollTopChange = this.rowHeight * -1;
+            }
+            else if (isPageUp(e)) {
+                scrollTopChange = this._visibleRowCount * this.rowHeight * -1;
+            }
+            else if (isHome(e) && activeElement === firstRow) {
+                scrollTopChange = this.rowCount * this.rowHeight * -1;
+            }
+        }
+        if (scrollTopChange) {
+            const scrollTop = this._table.scrollTop;
+            this._scrollContainer.scrollTop += scrollTopChange;
+            if (this._scrollContainer.scrollTop !== scrollTop) {
+                e.preventDefault();
+            }
+        }
+    }
+};
+__decorate([
+    property({ type: Number })
+], TableVirtualizer.prototype, "rowHeight", void 0);
+__decorate([
+    property({ type: Number })
+], TableVirtualizer.prototype, "rowCount", void 0);
+__decorate([
+    property({ type: Number })
+], TableVirtualizer.prototype, "extraRows", void 0);
+TableVirtualizer = __decorate([
+    customElement({ tag: "ui5-table-virtualizer" })
+    /**
+     * Fired when the virtualizer is changed by user interaction e.g. on scrolling.
+     *
+     * @param {number} first The 0-based index of the first children currently rendered
+     * @param {number} last The 0-based index of the last children currently rendered
+     * @public
+     */
+    ,
+    event("range-change")
+], TableVirtualizer);
+TableVirtualizer.define();
+export default TableVirtualizer;
+//# sourceMappingURL=TableVirtualizer.js.map

package/dist/TableVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableVirtualizer.js","sourceRoot":"","sources":["../src/TableVirtualizer.ts"],"names":[],"mappings":";;;;;;AAAA,+BAA+B;AAC/B,OAAO,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,WAAW,EACX,QAAQ,EACR,UAAU,EACV,MAAM,EACN,KAAK,EACL,SAAS,EACT,aAAa,GACb,MAAM,sCAAsC,CAAC;AAC9C,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAI3C,IAAK,WAOJ;AAPD,WAAK,WAAW;IACf,6CAAQ,CAAA;IACR,6CAAQ,CAAA;IACR,qDAAY,CAAA;IACZ,qDAAY,CAAA;IACZ,6DAA8B,CAAA;IAC9B,qEAAsC,CAAA;AACvC,CAAC,EAPI,WAAW,KAAX,WAAW,QAOf;AAaD;;;;;;;;;;;;;;;;;;;GAmBG;AAYH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IA+CxC;QACC,KAAK,EAAE,CAAC;QA5CT;;;;;;;WAOG;QAEH,cAAS,GAAG,EAAE,CAAC;QAEf;;;;;;;WAOG;QAEH,aAAQ,GAAG,GAAG,CAAC;QAEf;;;;;;;WAOG;QAEH,cAAS,GAAG,CAAC,CAAC;QAEL,eAAU,GAAG,kBAAkB,CAAC;QAGzC,qBAAgB,GAAW,CAAC,CAAC;QAC7B,sBAAiB,GAAW,CAAC,CAAC;QAC9B,qBAAgB,GAAW,CAAC,CAAC;QAC7B,sBAAiB,GAAgB,WAAW,CAAC,IAAI,CAAC;QAMjD,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;IAED,qBAAqB,CAAC,KAAY;QACjC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACzF,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,EAAE,CAAC;QAClB,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC1B,CAAC;QAED,IAAI,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;YACnD,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAgB,CAAC;YAC9G,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxH,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC;YAC1C,CAAC,oBAAoB,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE,CAAC;QAClD,CAAC;IACF,CAAC;IAED,SAAS;QACR,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACzE,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACzB,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,KAAK;QACJ,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;gBACzC,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,CAAC,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,SAAS,EAAE,CAAC;YAClB,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,MAAO,CAAC,aAAa,CAAC;IACnC,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,MAAO,CAAC,UAAW,CAAC,cAAc,CAAC,MAAM,CAAE,CAAC;IACzD,CAAC;IAED,SAAS;QACR,MAAM,SAAS,GAAG,IAAI,CAAC,MAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;QAC5C,IAAI,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC;QAChD,IAAI,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;QAC1D,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;YACtB,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,GAAG,YAAY,CAAC,CAAC;QACjE,CAAC;aAAM,CAAC;YACP,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC/E,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;QACjD,IAAI,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjG,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE3D,IAAI,IAAI,CAAC,iBAAiB,KAAK,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,KAAK,eAAe,EAAE,CAAC;YAC9F,OAAO;QACR,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE;YACvC,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,eAAe;SACrB,CAAC,CAAC;IACJ,CAAC;IAED,iBAAiB;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAClD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,UAAU,IAAI,CAAC;IACtD,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAClB,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACrC,IAAI,QAAQ,IAAI,QAAQ,CAAC,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC;YAC1E,MAAM,SAAS,GAAG,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;YACrD,OAAO,cAAc,SAAS,KAAK,CAAC;QACrC,CAAC;IACF,CAAC;IAED,gBAAgB,CAAC,gBAAkC;QAClD,IAAI,gBAAgB,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC1C,gBAAgB,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACrE,IAAI,CAAC,iBAAiB,IAAI,WAAW,CAAC,QAAQ,CAAC;QAChD,CAAC;IACF,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAClB,OAAO;QACR,CAAC;QAED,IAAI,eAAe,GAAG,CAAC,CAAC;QACxB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACtC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,QAAQ,KAAK,CAAC,CAAC;QACtD,MAAM,mBAAmB,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QACnE,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAiB,CAAC;QACtD,MAAM,aAAa,GAAG,gBAAgB,EAAiB,CAAC;QAExD,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,mBAAmB,IAAI,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,EAAE,KAAK,aAAa,EAAE,CAAC;YAC7G,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,IAAI,CAAC;YAC1C,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACrD,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,CAAC;aAAM,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,qBAAqB,IAAI,mBAAmB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,KAAK,aAAa,EAAE,CAAC;YAC5H,IAAI,CAAC,iBAAiB,GAAG,WAAW,CAAC,QAAQ,CAAC;YAC9C,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YACtD,eAAe,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,mBAAmB,IAAI,eAAe,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAC7G,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC;YAClC,CAAC;iBAAM,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC1B,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;YAC1D,CAAC;iBAAM,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,aAAa,KAAK,OAAO,EAAE,CAAC;gBAClD,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;YAClD,CAAC;QACF,CAAC;aAAM,IAAI,qBAAqB,IAAI,eAAe,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAChH,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC7B,eAAe,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YACvC,CAAC;iBAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBACxB,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YAC/D,CAAC;iBAAM,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;gBACpD,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;YACvD,CAAC;QACF,CAAC;QAED,IAAI,eAAe,EAAE,CAAC;YACrB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,gBAAgB,CAAC,SAAS,IAAI,eAAe,CAAC;YACnD,IAAI,IAAI,CAAC,gBAAgB,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;gBACnD,CAAC,CAAC,cAAc,EAAE,CAAC;YACpB,CAAC;QACF,CAAC;IACF,CAAC;CACD,CAAA;AAlMA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AAWf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACZ;AAWf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACb;AAnCT,gBAAgB;IAXrB,aAAa,CAAC,EAAE,GAAG,EAAE,uBAAuB,EAAE,CAAC;IAEhD;;;;;;OAMG;;IACF,KAAK,CAAC,cAAc,CAAC;GAEhB,gBAAgB,CA+MrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["/* eslint-disable no-bitwise */\nimport {\n\tisUp,\n\tisUpShift,\n\tisDown,\n\tisDownShift,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n\tisTabNext,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { InvalidationInfo } 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 getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport { throttle } from \"./TableUtils.js\";\nimport type { ITableFeature } from \"./Table.js\";\nimport type Table from \"./Table.js\";\n\nenum TabBlocking {\n\tNone = 0,\n\tNext = 1,\n\tPrevious = 2,\n\tReleased = 4,\n\tNextReleased = Next | Released,\n\tPreviousReleased = Previous | Released,\n}\n\n/**\n * Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n * @param number {first} The 0-based index of the first children currently rendered\n * @param number {last} The 0-based index of the last children currently rendered\n * @public\n */\ntype RangeChangeEventDetail = {\n\tfirst: number,\n\tlast: number,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\n * It is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\n * This allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n *\n * **Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n *\n * @constructor\n * @since 2.5.0\n * @extends UI5Element\n * @public\n * @experimental This component is not intended to be used in a productive enviroment. The API is under development and may be changed in the future.\n */\n@customElement({ tag: \"ui5-table-virtualizer\" })\n\n/**\n * Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n *\n * @param {number} first The 0-based index of the first children currently rendered\n * @param {number} last The 0-based index of the last children currently rendered\n * @public\n */\n@event(\"range-change\")\n\nclass TableVirtualizer extends UI5Element implements ITableFeature {\n\teventDetails!: {\n\t\t\"range-change\": RangeChangeEventDetail\n\t}\n\t/**\n\t * Defines the height of the rows in the table.\n\t *\n\t * **Note:** For virtualization to work properly, this property is mandatory.\n\t *\n\t * @default 45\n\t * @public\n\t */\n\t@property({ type: Number })\n\trowHeight = 45;\n\n\t/**\n\t * Defines the total count of rows in the table.\n\t *\n\t * **Note:** For virtualization to work properly, this property is mandatory.\n\t *\n\t * @default 100\n\t * @public\n\t */\n\t@property({ type: Number })\n\trowCount = 100;\n\n\t/**\n\t * Defines the count of extra rows to be rendered at the top and bottom of the table.\n\t *\n\t * **Note:** This property is experimental and may be changed or deleted in the future.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\textraRows = 0;\n\n\treadonly identifier = \"TableVirtualizer\";\n\n\t_table?: Table;\n\t_lastRowPosition: number = 0;\n\t_firstRowPosition: number = 0;\n\t_visibleRowCount: number = 0;\n\t_tabBlockingState: TabBlocking = TabBlocking.None;\n\t_onRowInvalidateBound: (invalidationInfo: InvalidationInfo) => void;\n\t_onScrollBound: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._onScrollBound = throttle(this._onScroll.bind(this));\n\t\tthis._onRowInvalidateBound = this._onRowInvalidate.bind(this);\n\t}\n\n\tonAfterRendering(): void {\n\t\tthis._table && this._table._invalidate++;\n\t}\n\n\tonTableAfterRendering(table: Table): void {\n\t\tif (!this._table) {\n\t\t\tthis._table = table;\n\t\t\tthis._scrollContainer.addEventListener(\"scroll\", this._onScrollBound, { passive: true });\n\t\t\tthis._updateRowsHeight();\n\t\t\tthis._onScroll();\n\t\t} else {\n\t\t\tthis._updateRowsHeight();\n\t\t}\n\n\t\tif (this._tabBlockingState & TabBlocking.Released) {\n\t\t\tconst tabBlockingRow = this._table.rows.at(this._tabBlockingState & TabBlocking.Next ? -1 : 0) as HTMLElement;\n\t\t\tconst tabForwardingElement = getTabbableElements(tabBlockingRow).at(this._tabBlockingState & TabBlocking.Next ? 0 : -1);\n\t\t\tthis._tabBlockingState = TabBlocking.None;\n\t\t\t(tabForwardingElement || tabBlockingRow).focus();\n\t\t}\n\t}\n\n\tonExitDOM(): void {\n\t\tif (this._table) {\n\t\t\tthis._scrollContainer.removeEventListener(\"scroll\", this._onScrollBound);\n\t\t\tthis._table = undefined;\n\t\t}\n\t}\n\n\t/**\n\t * Resets the virtualizer to its initial state and triggers the `range-change` event.\n\t * @public\n\t */\n\treset(): void {\n\t\tthis._lastRowPosition = -1;\n\t\tthis._firstRowPosition = -1;\n\t\tif (this._table) {\n\t\t\tif (this._scrollContainer.scrollTop > 0) {\n\t\t\t\tthis._scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis._onScroll();\n\t\t\t}\n\t\t}\n\t}\n\n\tget _scrollContainer() {\n\t\treturn this._table!._tableElement;\n\t}\n\n\tget _rowsContainer() {\n\t\treturn this._table!.shadowRoot!.getElementById(\"rows\")!;\n\t}\n\n\t_onScroll(): void {\n\t\tconst headerRow = this._table!.headerRow[0];\n\t\tconst headerHeight = headerRow.offsetHeight;\n\t\tlet scrollTop = this._scrollContainer.scrollTop;\n\t\tlet scrollableHeight = this._scrollContainer.clientHeight;\n\t\tif (headerRow.sticky) {\n\t\t\tscrollableHeight = Math.max(0, scrollableHeight - headerHeight);\n\t\t} else {\n\t\t\tscrollTop = Math.max(0, scrollTop - headerHeight);\n\t\t}\n\n\t\tthis._visibleRowCount = Math.ceil(scrollableHeight / this.rowHeight);\n\t\tlet firstRowPosition = Math.floor(scrollTop / this.rowHeight) - this.extraRows;\n\t\tfirstRowPosition = Math.max(0, firstRowPosition);\n\t\tlet lastRowPosition = Math.max(0, firstRowPosition + this._visibleRowCount + 2 * this.extraRows);\n\t\tlastRowPosition = Math.min(lastRowPosition, this.rowCount);\n\n\t\tif (this._firstRowPosition === firstRowPosition && this._lastRowPosition === lastRowPosition) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._lastRowPosition = lastRowPosition;\n\t\tthis._firstRowPosition = firstRowPosition;\n\t\tthis.fireDecoratorEvent(\"range-change\", {\n\t\t\tfirst: firstRowPosition,\n\t\t\tlast: lastRowPosition,\n\t\t});\n\t}\n\n\t_updateRowsHeight() {\n\t\tconst rowsHeight = this.rowCount * this.rowHeight;\n\t\tthis._rowsContainer.style.height = `${rowsHeight}px`;\n\t}\n\n\t_getTransform() {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst firstRow = this._table.rows[0];\n\t\tif (firstRow && firstRow.position !== undefined && firstRow.position > 0) {\n\t\t\tconst transform = firstRow.position * this.rowHeight;\n\t\t\treturn `translateY(${transform}px)`;\n\t\t}\n\t}\n\n\t_onRowInvalidate(invalidationInfo: InvalidationInfo) {\n\t\tif (invalidationInfo.name === \"position\") {\n\t\t\tinvalidationInfo.target.detachInvalidate(this._onRowInvalidateBound);\n\t\t\tthis._tabBlockingState |= TabBlocking.Released;\n\t\t}\n\t}\n\n\t_onKeyDown(e: KeyboardEvent) {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet scrollTopChange = 0;\n\t\tconst rows = this._table.rows;\n\t\tconst firstRow = rows[0];\n\t\tconst lastRow = rows[rows.length - 1];\n\t\tconst hasDataBeforeFirstRow = firstRow.position !== 0;\n\t\tconst hasDataAfterLastRow = lastRow.position !== this.rowCount - 1;\n\t\tconst tableNavigation = this._table._tableNavigation!;\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\n\t\tif (isTabNext(e) && hasDataAfterLastRow && getTabbableElements(this._rowsContainer).pop() === activeElement) {\n\t\t\tthis._tabBlockingState = TabBlocking.Next;\n\t\t\tlastRow.attachInvalidate(this._onRowInvalidateBound);\n\t\t\tscrollTopChange = this.rowHeight;\n\t\t} else if (isTabPrevious(e) && hasDataBeforeFirstRow && getTabbableElements(this._rowsContainer).shift() === activeElement) {\n\t\t\tthis._tabBlockingState = TabBlocking.Previous;\n\t\t\tfirstRow.attachInvalidate(this._onRowInvalidateBound);\n\t\t\tscrollTopChange = this.rowHeight * -1;\n\t\t} else if (hasDataAfterLastRow && tableNavigation._getNavigationItemsOfRow(lastRow).includes(activeElement)) {\n\t\t\tif (isDown(e) || isDownShift(e)) {\n\t\t\t\tscrollTopChange = this.rowHeight;\n\t\t\t} else if (isPageDown(e)) {\n\t\t\t\tscrollTopChange = this._visibleRowCount * this.rowHeight;\n\t\t\t} else if (isEnd(e) && activeElement === lastRow) {\n\t\t\t\tscrollTopChange = this.rowCount * this.rowHeight;\n\t\t\t}\n\t\t} else if (hasDataBeforeFirstRow && tableNavigation._getNavigationItemsOfRow(firstRow).includes(activeElement)) {\n\t\t\tif (isUp(e) || isUpShift(e)) {\n\t\t\t\tscrollTopChange = this.rowHeight * -1;\n\t\t\t} else if (isPageUp(e)) {\n\t\t\t\tscrollTopChange = this._visibleRowCount * this.rowHeight * -1;\n\t\t\t} else if (isHome(e) && activeElement === firstRow) {\n\t\t\t\tscrollTopChange = this.rowCount * this.rowHeight * -1;\n\t\t\t}\n\t\t}\n\n\t\tif (scrollTopChange) {\n\t\t\tconst scrollTop = this._table.scrollTop;\n\t\t\tthis._scrollContainer.scrollTop += scrollTopChange;\n\t\t\tif (this._scrollContainer.scrollTop !== scrollTop) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n}\n\nTableVirtualizer.define();\n\nexport default TableVirtualizer;\n\nexport type {\n\tRangeChangeEventDetail,\n};\n"]}