@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

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":"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","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"]}

package/dist/Tag.d.ts

@@ -0,0 +1,121 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { IIcon } from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/sys-help-2.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/information.js";
+import type WrappingType from "./types/WrappingType.js";
+import TagDesign from "./types/TagDesign.js";
+import type TagSize from "./types/TagSize.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-tag` is a component which serves
+ * the purpose to attract the user attention to some piece
+ * of information (state, quantity, condition, etc.).
+ * It can contain icon and text information, and its design can be chosen from specific design types.
+ *
+ * ### Usage Guidelines
+ *
+ * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.
+  * - Colors can be semantic or not semantic.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Tag.js";`
+ * @csspart root - Used to style the root element.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+declare class Tag extends UI5Element {
+    eventDetails: {
+        click: void;
+    };
+    /**
+     * Defines the design type of the component.
+     * @default "Neutral"
+     * @public
+     * @since 1.22.0
+     */
+    design: `${TagDesign}`;
+    /**
+     * Defines the color scheme of the component.
+     * There are 10 predefined schemes.
+     * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+     * @default "1"
+     * @public
+     */
+    colorScheme: string;
+    /**
+     * Defines if the default state icon is shown.
+     * @default false
+     * @public
+     * @since 1.22.0
+     */
+    hideStateIcon: boolean;
+    /**
+     * Defines if the component is interactive (focusable and pressable).
+     *
+     * @default false
+     * @public
+     * @since 1.22.0
+     */
+    interactive: boolean;
+    /**
+     * Defines how the text of a component will be displayed when there is not enough space.
+     *
+     * **Note:** For option "Normal" the text will wrap and the
+     * words will not be broken based on hyphenation.
+     * @default "Normal"
+     * @public
+     * @since 1.22.0
+     */
+    wrappingType: `${WrappingType}`;
+    /**
+     * Defines predefined size of the component.
+     * @default "S"
+     * @public
+     * @since 2.0.0
+     */
+    size: `${TagSize}`;
+    /**
+     * Defines if the tag has an icon.
+     * @private
+     */
+    _hasIcon: boolean;
+    /**
+     * Defines if the tag has only an icon (and no text).
+     * @private
+     */
+    _iconOnly: boolean;
+    /**
+     * Defines the text of the component.
+     *
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     * @public
+     */
+    text: Array<Node>;
+    /**
+     * Defines the icon to be displayed in the component.
+     * @public
+     */
+    icon: Array<IIcon>;
+    static i18nBundle: I18nBundle;
+    onEnterDOM(): void;
+    onBeforeRendering(): void;
+    get _roleDescription(): string;
+    get _valueState(): string | undefined;
+    get hasText(): boolean;
+    get hasIcon(): boolean;
+    get iconOnly(): boolean;
+    get _title(): string | undefined;
+    get tagDescription(): string | undefined;
+    get _semanticIconName(): "alert" | "sys-help-2" | "sys-enter-2" | "error" | "information" | null;
+    _onclick(e: Event): void;
+}
+export default Tag;