@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/TableVirtualizer.js.map

@@ -1 +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"]}
+{"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 * **Note:** The `ui5-table-group-row` component is not supported by the virtualizer. Only `ui5-table-row` elements can be virtualized.\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

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } 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";
@@ -99,12 +100,12 @@ declare class Tag extends UI5Element {
      * **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>;
+    text: DefaultSlot<Node>;
     /**
      * Defines the icon to be displayed in the component.
      * @public
      */
-    icon: Array<IIcon>;
+    icon: Slot<IIcon>;
     static i18nBundle: I18nBundle;
     onEnterDOM(): void;
     onBeforeRendering(): void;

package/dist/Tag.js

@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-help-2.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport TagDesign from \"./types/TagDesign.js\";\nimport type TagSize from \"./types/TagSize.js\";\n// Template\nimport TagTemplate from \"./TagTemplate.js\";\n\nimport {\n\tTAG_DESCRIPTION_TAG,\n\tTAG_ROLE_DESCRIPTION,\n\tTAG_ERROR,\n\tTAG_WARNING,\n\tTAG_SUCCESS,\n\tTAG_INFORMATION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport tagCss from \"./generated/themes/Tag.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-tag` is a component which serves\n * the purpose to attract the user attention to some piece\n * of information (state, quantity, condition, etc.).\n * It can contain icon and text information, and its design can be chosen from specific design types.\n *\n * ### Usage Guidelines\n *\n * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n  * - Colors can be semantic or not semantic.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Tag.js\";`\n * @csspart root - Used to style the root element.\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-tag\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TagTemplate,\n\tstyles: tagCss,\n})\n\n/**\n * Fired when the user clicks on an interactive tag.\n *\n * **Note:** The event will be fired if the `interactive` property is `true`\n * @public\n * @since 1.22.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Tag extends UI5Element {\n\teventDetails!: {\n\t\tclick: void;\n\t}\n\t/**\n\t * Defines the design type of the component.\n\t * @default \"Neutral\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property()\n\tdesign: `${TagDesign}` = \"Neutral\"\n\n\t/**\n\t * Defines the color scheme of the component.\n\t * There are 10 predefined schemes.\n\t * To use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\t * @default \"1\"\n\t * @public\n\t */\n\t@property()\n\tcolorScheme = \"1\";\n\n\t/**\n\t * Defines if the default state icon is shown.\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\thideStateIcon = false;\n\n\t/**\n\t * Defines if the component is interactive (focusable and pressable).\n\t *\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines how the text of a component will be displayed when there is not enough space.\n\t *\n\t * **Note:** For option \"Normal\" the text will wrap and the\n\t * words will not be broken based on hyphenation.\n\t * @default \"Normal\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tsize: `${TagSize}` = \"S\";\n\n\t/**\n\t * Defines if the tag has an icon.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasIcon = false;\n\n\t/**\n\t * Defines if the tag has only an icon (and no text).\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_iconOnly = false;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t/**\n\t * Defines the icon to be displayed in the component.\n\t * @public\n\t */\n\t@slot()\n\ticon!: Array<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._hasIcon = this.hasIcon || !!this._semanticIconName;\n\t\tthis._iconOnly = this.iconOnly;\n\t}\n\n\tget _roleDescription() {\n\t\treturn Tag.i18nBundle.getText(TAG_ROLE_DESCRIPTION);\n\t}\n\n\tget _valueState() {\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Positive:\n\t\t\treturn Tag.i18nBundle.getText(TAG_SUCCESS);\n\t\tcase TagDesign.Negative:\n\t\t\treturn Tag.i18nBundle.getText(TAG_ERROR);\n\t\tcase TagDesign.Critical:\n\t\t\treturn Tag.i18nBundle.getText(TAG_WARNING);\n\t\tcase TagDesign.Information:\n\t\t\treturn Tag.i18nBundle.getText(TAG_INFORMATION);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget hasIcon() {\n\t\treturn !!this.icon.length;\n\t}\n\n\tget iconOnly() {\n\t\treturn this.hasIcon && !this.hasText;\n\t}\n\n\tget _title() {\n\t\treturn this.title || undefined;\n\t}\n\n\tget tagDescription() {\n\t\tif (this.interactive) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst valueState = this._valueState;\n\t\tlet description = Tag.i18nBundle.getText(TAG_DESCRIPTION_TAG);\n\n\t\tif (valueState) {\n\t\t\tdescription = `${description} ${valueState}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\tget _semanticIconName() {\n\t\tif (this.hideStateIcon || this.hasIcon) {\n\t\t\treturn null;\n\t\t}\n\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Neutral:\n\t\t\treturn \"sys-help-2\";\n\t\tcase TagDesign.Positive:\n\t\t\treturn \"sys-enter-2\";\n\t\tcase TagDesign.Negative:\n\t\t\treturn \"error\";\n\t\tcase TagDesign.Critical:\n\t\t\treturn \"alert\";\n\t\tcase TagDesign.Information:\n\t\t\treturn \"information\";\n\t\tdefault:\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t_onclick(e: Event) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n}\n\nTag.define();\n\nexport default Tag;\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IIcon } from \"./Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-help-2.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport type WrappingType from \"./types/WrappingType.js\";\nimport TagDesign from \"./types/TagDesign.js\";\nimport type TagSize from \"./types/TagSize.js\";\n// Template\nimport TagTemplate from \"./TagTemplate.js\";\n\nimport {\n\tTAG_DESCRIPTION_TAG,\n\tTAG_ROLE_DESCRIPTION,\n\tTAG_ERROR,\n\tTAG_WARNING,\n\tTAG_SUCCESS,\n\tTAG_INFORMATION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport tagCss from \"./generated/themes/Tag.css.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-tag` is a component which serves\n * the purpose to attract the user attention to some piece\n * of information (state, quantity, condition, etc.).\n * It can contain icon and text information, and its design can be chosen from specific design types.\n *\n * ### Usage Guidelines\n *\n * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n  * - Colors can be semantic or not semantic.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Tag.js\";`\n * @csspart root - Used to style the root element.\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-tag\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: TagTemplate,\n\tstyles: tagCss,\n})\n\n/**\n * Fired when the user clicks on an interactive tag.\n *\n * **Note:** The event will be fired if the `interactive` property is `true`\n * @public\n * @since 1.22.0\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Tag extends UI5Element {\n\teventDetails!: {\n\t\tclick: void;\n\t}\n\t/**\n\t * Defines the design type of the component.\n\t * @default \"Neutral\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property()\n\tdesign: `${TagDesign}` = \"Neutral\"\n\n\t/**\n\t * Defines the color scheme of the component.\n\t * There are 10 predefined schemes.\n\t * To use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\t * @default \"1\"\n\t * @public\n\t */\n\t@property()\n\tcolorScheme = \"1\";\n\n\t/**\n\t * Defines if the default state icon is shown.\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\thideStateIcon = false;\n\n\t/**\n\t * Defines if the component is interactive (focusable and pressable).\n\t *\n\t * @default false\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines how the text of a component will be displayed when there is not enough space.\n\t *\n\t * **Note:** For option \"Normal\" the text will wrap and the\n\t * words will not be broken based on hyphenation.\n\t * @default \"Normal\"\n\t * @public\n\t * @since 1.22.0\n\t */\n\t@property()\n\twrappingType: `${WrappingType}` = \"Normal\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tsize: `${TagSize}` = \"S\";\n\n\t/**\n\t * Defines if the tag has an icon.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasIcon = false;\n\n\t/**\n\t * Defines if the tag has only an icon (and no text).\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_iconOnly = false;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: DefaultSlot<Node>;\n\n\t/**\n\t * Defines the icon to be displayed in the component.\n\t * @public\n\t */\n\t@slot()\n\ticon!: Slot<IIcon>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._hasIcon = this.hasIcon || !!this._semanticIconName;\n\t\tthis._iconOnly = this.iconOnly;\n\t}\n\n\tget _roleDescription() {\n\t\treturn Tag.i18nBundle.getText(TAG_ROLE_DESCRIPTION);\n\t}\n\n\tget _valueState() {\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Positive:\n\t\t\treturn Tag.i18nBundle.getText(TAG_SUCCESS);\n\t\tcase TagDesign.Negative:\n\t\t\treturn Tag.i18nBundle.getText(TAG_ERROR);\n\t\tcase TagDesign.Critical:\n\t\t\treturn Tag.i18nBundle.getText(TAG_WARNING);\n\t\tcase TagDesign.Information:\n\t\t\treturn Tag.i18nBundle.getText(TAG_INFORMATION);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget hasIcon() {\n\t\treturn !!this.icon.length;\n\t}\n\n\tget iconOnly() {\n\t\treturn this.hasIcon && !this.hasText;\n\t}\n\n\tget _title() {\n\t\treturn this.title || undefined;\n\t}\n\n\tget tagDescription() {\n\t\tif (this.interactive) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst valueState = this._valueState;\n\t\tlet description = Tag.i18nBundle.getText(TAG_DESCRIPTION_TAG);\n\n\t\tif (valueState) {\n\t\t\tdescription = `${description} ${valueState}`;\n\t\t}\n\n\t\treturn description;\n\t}\n\n\tget _semanticIconName() {\n\t\tif (this.hideStateIcon || this.hasIcon) {\n\t\t\treturn null;\n\t\t}\n\n\t\tswitch (this.design) {\n\t\tcase TagDesign.Neutral:\n\t\t\treturn \"sys-help-2\";\n\t\tcase TagDesign.Positive:\n\t\t\treturn \"sys-enter-2\";\n\t\tcase TagDesign.Negative:\n\t\t\treturn \"error\";\n\t\tcase TagDesign.Critical:\n\t\t\treturn \"alert\";\n\t\tcase TagDesign.Information:\n\t\t\treturn \"information\";\n\t\tdefault:\n\t\t\treturn null;\n\t\t}\n\t}\n\n\t_onclick(e: Event) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n}\n\nTag.define();\n\nexport default Tag;\n"]}

package/dist/Text.d.ts

@@ -1,28 +1,29 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
 /**
  * @class
  *
- * <h3>Overview</h3>
+ * ### Overview
  *
  * The `ui5-text` component displays text that can be used in any content area of an application.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.
  * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).
  *
- * <h3>Responsive behavior</h3>
+ * ### Responsive behavior
  *
  * The `ui5-text` component is fully adaptive to all screen sizes.
  * By default, the text will wrap when the space is not enough.
- * In addition, the component supports truncation via the <code>max-lines</code> property,
+ * In addition, the component supports truncation via the `max-lines` property,
  * by defining the number of lines the text should wrap before start truncating.
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/Text";</code>
+ * `import "@ui5/webcomponents/dist/Text";`
  *
  * @constructor
  * @extends UI5Element
@@ -47,7 +48,7 @@ declare class Text extends UI5Element {
      * Defines the text of the component.
      * @public
      */
-    text: Array<Node>;
+    text: DefaultSlot<Node>;
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
     get hasText(): boolean;

package/dist/Text.js

@@ -8,9 +8,8 @@ var Text_1;
 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 import TextEmptyIndicatorMode from "./types/TextEmptyIndicatorMode.js";
@@ -22,25 +21,25 @@ import styles from "./generated/themes/Text.css.js";
 /**
  * @class
  *
- * <h3>Overview</h3>
+ * ### Overview
  *
  * The `ui5-text` component displays text that can be used in any content area of an application.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.
  * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).
  *
- * <h3>Responsive behavior</h3>
+ * ### Responsive behavior
  *
  * The `ui5-text` component is fully adaptive to all screen sizes.
  * By default, the text will wrap when the space is not enough.
- * In addition, the component supports truncation via the <code>max-lines</code> property,
+ * In addition, the component supports truncation via the `max-lines` property,
  * by defining the number of lines the text should wrap before start truncating.
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/Text";</code>
+ * `import "@ui5/webcomponents/dist/Text";`
  *
  * @constructor
  * @extends UI5Element
@@ -65,7 +64,7 @@ let Text = Text_1 = class Text extends UI5Element {
         this.emptyIndicatorMode = "Off";
     }
     onBeforeRendering() {
-        this.style.setProperty(getScopedVarName("--_ui5_text_max_lines"), `${this.maxLines}`);
+        this.style.setProperty("--_ui5_text_max_lines", `${this.maxLines}`);
     }
     get hasText() {
         return willShowContent(this.text);

package/dist/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,eAAe,MAAM,sDAAsD,CAAC;AACnF,OAAO,sBAAsB,MAAM,mCAAmC,CAAC;AACvE,WAAW;AACX,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EACN,sBAAsB,EACtB,+BAA+B,GAC/B,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,IAAI,YAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;QACC;;;;WAIG;QAEH,aAAQ,GAAW,QAAQ,CAAC;QAE5B;;;;;WAKG;QAEH,uBAAkB,GAAgC,KAAK,CAAC;IA+BzD,CAAC;IAnBA,iBAAiB;QAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvF,CAAC;IAED,IAAI,OAAO;QACV,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,KAAK,sBAAsB,CAAC,EAAE,CAAC;IAC/E,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACxD,CAAC;CACD,CAAA;AAxCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACC;AAS5B;IADC,QAAQ,EAAE;gDAC6C;AAOxD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kCACnB;AAGZ;IADN,IAAI,CAAC,oBAAoB,CAAC;8BACG;AA1BzB,IAAI;IANT,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,aAAa;QACvB,MAAM;KACN,CAAC;GACI,IAAI,CA+CT;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport TextEmptyIndicatorMode from \"./types/TextEmptyIndicatorMode.js\";\n// Template\nimport TextTemplate2 from \"./TextTemplate.js\";\n\nimport {\n\tEMPTY_INDICATOR_SYMBOL,\n\tEMPTY_INDICATOR_ACCESSIBLE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport styles from \"./generated/themes/Text.css.js\";\n\n/**\n * @class\n *\n * <h3>Overview</h3>\n *\n * The `ui5-text` component displays text that can be used in any content area of an application.\n *\n * <h3>Usage</h3>\n *\n * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n *\n * <h3>Responsive behavior</h3>\n *\n * The `ui5-text` component is fully adaptive to all screen sizes.\n * By default, the text will wrap when the space is not enough.\n * In addition, the component supports truncation via the <code>max-lines</code> property,\n * by defining the number of lines the text should wrap before start truncating.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Text\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-text\",\n\trenderer: jsxRenderer,\n\ttemplate: TextTemplate2,\n\tstyles,\n})\nclass Text extends UI5Element {\n\t/**\n\t * Defines the number of lines the text should wrap before it truncates.\n\t * @default Infinity\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmaxLines: number = Infinity;\n\n\t/**\n\t * Specifies if an empty indicator should be displayed when there is no text.\n\t * @default \"Off\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\temptyIndicatorMode: `${TextEmptyIndicatorMode}` = \"Off\";\n\n\t/**\n\t * Defines the text of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: Array<Node>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis.style.setProperty(getScopedVarName(\"--_ui5_text_max_lines\"), `${this.maxLines}`);\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget _renderEmptyIndicator() {\n\t\treturn !this.hasText && this.emptyIndicatorMode === TextEmptyIndicatorMode.On;\n\t}\n\n\tget _emptyIndicatorAriaLabel() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_ACCESSIBLE_TEXT);\n\t}\n\n\tget _emptyIndicatorSymbol() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_SYMBOL);\n\t}\n}\n\nText.define();\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../src/Text.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,eAAe,MAAM,sDAAsD,CAAC;AACnF,OAAO,sBAAsB,MAAM,mCAAmC,CAAC;AACvE,WAAW;AACX,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EACN,sBAAsB,EACtB,+BAA+B,GAC/B,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,IAAM,IAAI,YAAV,MAAM,IAAK,SAAQ,UAAU;IAA7B;;QACC;;;;WAIG;QAEH,aAAQ,GAAW,QAAQ,CAAC;QAE5B;;;;;WAKG;QAEH,uBAAkB,GAAgC,KAAK,CAAC;IA+BzD,CAAC;IAnBA,iBAAiB;QAChB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,IAAI,OAAO;QACV,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,KAAK,sBAAsB,CAAC,EAAE,CAAC;IAC/E,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,MAAI,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IACxD,CAAC;CACD,CAAA;AAxCA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACC;AAS5B;IADC,QAAQ,EAAE;gDAC6C;AAOxD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kCACb;AAGlB;IADN,IAAI,CAAC,oBAAoB,CAAC;8BACG;AA1BzB,IAAI;IANT,aAAa,CAAC;QACd,GAAG,EAAE,UAAU;QACf,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,aAAa;QACvB,MAAM;KACN,CAAC;GACI,IAAI,CA+CT;AAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAEd,eAAe,IAAI,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport TextEmptyIndicatorMode from \"./types/TextEmptyIndicatorMode.js\";\n// Template\nimport TextTemplate2 from \"./TextTemplate.js\";\n\nimport {\n\tEMPTY_INDICATOR_SYMBOL,\n\tEMPTY_INDICATOR_ACCESSIBLE_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport styles from \"./generated/themes/Text.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-text` component displays text that can be used in any content area of an application.\n *\n * ### Usage\n *\n * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n *\n * ### Responsive behavior\n *\n * The `ui5-text` component is fully adaptive to all screen sizes.\n * By default, the text will wrap when the space is not enough.\n * In addition, the component supports truncation via the `max-lines` property,\n * by defining the number of lines the text should wrap before start truncating.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Text\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-text\",\n\trenderer: jsxRenderer,\n\ttemplate: TextTemplate2,\n\tstyles,\n})\nclass Text extends UI5Element {\n\t/**\n\t * Defines the number of lines the text should wrap before it truncates.\n\t * @default Infinity\n\t * @public\n\t */\n\t@property({ type: Number })\n\tmaxLines: number = Infinity;\n\n\t/**\n\t * Specifies if an empty indicator should be displayed when there is no text.\n\t * @default \"Off\"\n\t * @since 2.2.0\n\t * @public\n\t */\n\t@property()\n\temptyIndicatorMode: `${TextEmptyIndicatorMode}` = \"Off\";\n\n\t/**\n\t * Defines the text of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\ttext!: DefaultSlot<Node>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis.style.setProperty(\"--_ui5_text_max_lines\", `${this.maxLines}`);\n\t}\n\n\tget hasText() {\n\t\treturn willShowContent(this.text);\n\t}\n\n\tget _renderEmptyIndicator() {\n\t\treturn !this.hasText && this.emptyIndicatorMode === TextEmptyIndicatorMode.On;\n\t}\n\n\tget _emptyIndicatorAriaLabel() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_ACCESSIBLE_TEXT);\n\t}\n\n\tget _emptyIndicatorSymbol() {\n\t\treturn Text.i18nBundle.getText(EMPTY_INDICATOR_SYMBOL);\n\t}\n}\n\nText.define();\n\nexport default Text;\n"]}

package/dist/TextArea.d.ts

@@ -1,10 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type Popover from "./Popover.js";
-import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import type InputComposition from "./features/InputComposition.js";
 type TokenizedText = Array<string>;
 type IndexedTokenizedText = Array<{
     text: string;
@@ -191,6 +192,12 @@ declare class TextArea extends UI5Element implements IFormInputElement {
      * @private
      */
     _width?: number;
+    /**
+     * Indicates whether IME composition is currently active
+     * @default false
+     * @private
+     */
+    _isComposing: boolean;
     /**
      * Defines the value state message that will be displayed as pop up under the component.
      * The value state message slot should contain only one root element.
@@ -202,7 +209,7 @@ declare class TextArea extends UI5Element implements IFormInputElement {
      * @since 1.0.0-rc.7
      * @public
      */
-    valueStateMessage: Array<HTMLElement>;
+    valueStateMessage: Slot<HTMLElement>;
     _fnOnResize: ResizeObserverCallback;
     _firstRendering: boolean;
     _openValueStateMsgPopover: boolean;
@@ -210,8 +217,10 @@ declare class TextArea extends UI5Element implements IFormInputElement {
     _keyDown?: boolean;
     previousValue: string;
     valueStatePopover?: Popover;
+    _composition?: InputComposition;
     static i18nBundle: I18nBundle;
-    get formValidityMessage(): string;
+    static composition: typeof InputComposition;
+    get formValidityMessage(): string | undefined;
     get formValidity(): ValidityStateFlags;
     formElementAnchor(): Promise<HTMLElement | undefined>;
     get formFormattedValue(): FormData | string | null;
@@ -248,6 +257,7 @@ declare class TextArea extends UI5Element implements IFormInputElement {
         leftCharactersCount: number | undefined;
         calcedMaxLength: number | undefined;
     };
+    _enableComposition(): void;
     get classes(): {
         root: {
             "ui5-textarea-root": boolean;
@@ -271,7 +281,6 @@ declare class TextArea extends UI5Element implements IFormInputElement {
     get displayValueStateMessagePopover(): boolean;
     get hasCustomValueState(): boolean;
     get hasValueState(): boolean;
-    get _valueStatePopoverHorizontalAlign(): `${PopoverHorizontalAlign}`;
     get valueStateTextMappings(): {
         Positive: string;
         Information: string;

package/dist/TextArea.js

@@ -8,7 +8,7 @@ var TextArea_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
@@ -17,7 +17,7 @@ import { getEffectiveAriaLabelText, getAssociatedLabelForTexts, getEffectiveAria
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import TextAreaTemplate from "./TextAreaTemplate.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, TEXTAREA_CHARACTERS_LEFT, TEXTAREA_CHARACTERS_EXCEEDED, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, TEXTAREA_CHARACTERS_LEFT, TEXTAREA_CHARACTERS_EXCEEDED, FORM_TEXTFIELD_REQUIRED, TEXTAREA_EXCEEDS_MAXLENGTH, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import textareaStyles from "./generated/themes/TextArea.css.js";
 import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js";
@@ -41,10 +41,18 @@ import valueStateMessageStyles from "./generated/themes/ValueStateMessage.css.js
  */
 let TextArea = TextArea_1 = class TextArea extends UI5Element {
     get formValidityMessage() {
-        return TextArea_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+        if (this.formValidity.valueMissing) {
+            return TextArea_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+        }
+        if (this.formValidity.tooLong) {
+            return TextArea_1.i18nBundle.getText(TEXTAREA_EXCEEDS_MAXLENGTH, this.value.length - (this.maxlength ?? 0));
+        }
     }
     get formValidity() {
-        return { valueMissing: this.required && !this.value };
+        return {
+            valueMissing: this.required && !this.value,
+            tooLong: this.showExceededText && (this.value.length > (this.maxlength ?? 0)),
+        };
     }
     async formElementAnchor() {
         return this.getFocusDomRefAsync();
@@ -145,6 +153,12 @@ let TextArea = TextArea_1 = class TextArea extends UI5Element {
          * @private
          */
         this._mirrorText = [];
+        /**
+         * Indicates whether IME composition is currently active
+         * @default false
+         * @private
+         */
+        this._isComposing = false;
         this._firstRendering = true;
         this._openValueStateMsgPopover = false;
         this._fnOnResize = this._onResize.bind(this);
@@ -152,9 +166,11 @@ let TextArea = TextArea_1 = class TextArea extends UI5Element {
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._fnOnResize);
+        this._enableComposition();
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._fnOnResize);
+        this._composition?.removeEventListeners();
     }
     onBeforeRendering() {
         if (!this.value) {
@@ -182,6 +198,9 @@ let TextArea = TextArea_1 = class TextArea extends UI5Element {
     }
     _onkeydown(e) {
         this._keyDown = true;
+        if (this._isComposing) {
+            return;
+        }
         if (isEscape(e)) {
             const nativeTextArea = this.getInputDomRef();
             const prevented = !this.fireDecoratorEvent("input", {
@@ -301,6 +320,29 @@ let TextArea = TextArea_1 = class TextArea extends UI5Element {
             exceededText, leftCharactersCount, calcedMaxLength,
         };
     }
+    _enableComposition() {
+        if (this._composition) {
+            return;
+        }
+        const setup = (FeatureClass) => {
+            this._composition = new FeatureClass({
+                getInputEl: () => this.getInputDomRef(),
+                updateCompositionState: (isComposing) => {
+                    this._isComposing = isComposing;
+                },
+            });
+            this._composition.addEventListeners();
+        };
+        if (TextArea_1.composition) {
+            setup(TextArea_1.composition);
+        }
+        else {
+            import("./features/InputComposition.js").then(CompositionModule => {
+                TextArea_1.composition = CompositionModule.default;
+                setup(CompositionModule.default);
+            });
+        }
+    }
     get classes() {
         return {
             root: {
@@ -373,9 +415,6 @@ let TextArea = TextArea_1 = class TextArea extends UI5Element {
     get hasValueState() {
         return this.valueState === ValueState.Negative || this.valueState === ValueState.Critical || this.valueState === ValueState.Information;
     }
-    get _valueStatePopoverHorizontalAlign() {
-        return this.effectiveDir !== "rtl" ? "Start" : "End";
-    }
     get valueStateTextMappings() {
         return {
             "Positive": TextArea_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -448,7 +487,7 @@ __decorate([
     property({ type: Boolean })
 ], TextArea.prototype, "exceeding", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, noAttribute: true })
 ], TextArea.prototype, "_mirrorText", void 0);
 __decorate([
     property({ noAttribute: true })
@@ -456,6 +495,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TextArea.prototype, "_width", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TextArea.prototype, "_isComposing", void 0);
 __decorate([
     slot()
 ], TextArea.prototype, "valueStateMessage", void 0);