@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/dist/TableGrowing.js

@@ -6,16 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var TableGrowing_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isSpace, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { customElement, property, eventStrict, i18n, } from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
-import TableGrowingTemplate from "./generated/templates/TableGrowingTemplate.lit.js";
+import TableGrowingTemplate from "./TableGrowingTemplate.js";
 import TableGrowingCss from "./generated/themes/TableGrowing.css.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { TABLE_MORE, TABLE_MORE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import { findVerticalScrollContainer } from "./TableUtils.js";
 // The documentation should be similar to the Table.ts class documentation!
 // Please only use that style where it uses markdown and the documentation is more readable.
 /**
@@ -38,10 +36,14 @@ import { TABLE_MORE, TABLE_MORE_DESCRIPTION, } from "./generated/i18n/i18n-defau
  *
  * ```html
  * <ui5-table>
- * 	<ui5-table-growing type="Button" growing-text="More" slot="features"></ui5-table-growing>
+ * 	<ui5-table-growing mode="Button" text="More" slot="features"></ui5-table-growing>
  * </ui5-table>
  * ```
  *
+ * **Notes**:
+ * * When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,
+ * the component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.
+ *
  * ### ES6 Module Import
  *
  * `import "@ui5/webcomponents/dist/TableGrowing.js";`
@@ -62,11 +64,12 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
          *
          * Button - Shows a More button at the bottom of the table, pressing it will load more rows.
          *
-         * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.
+         * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,
+         * a growing button will be rendered instead to ensure growing functionality.
          * @default "Button"
          * @public
          */
-        this.type = "Button";
+        this.mode = "Button";
         /**
          * Defines the active state of the growing button.
          * Used for keyboard interaction.
@@ -109,15 +112,14 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
     onBeforeRendering() {
         this._observer?.disconnect();
         this._observer = undefined;
-        this._currentLastRow = undefined;
         this._renderContent = this.hasGrowingComponent();
         this._invalidateTable();
     }
     hasGrowingComponent() {
-        if (this.type === TableGrowingMode.Scroll) {
+        if (this.mode === TableGrowingMode.Scroll) {
             return !!this._table && this._table._scrollContainer.clientHeight >= this._table._tableElement.scrollHeight;
         }
-        return this.type === `${TableGrowingMode.Button}`;
+        return this.mode === `${TableGrowingMode.Button}`;
     }
     /**
      * An event handler that can be used by the Table to notify the TableGrowing that
@@ -127,12 +129,12 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
         // remembers the last row. only do this when the table has a growing component rendered.
         if (this._table && this.hasGrowingComponent()) {
             this._currentLastRow = this._table.rows[this._table.rows.length - 1];
+            this._shouldFocusRow = true;
         }
-        this._shouldFocusRow = true;
         this.fireDecoratorEvent("load-more");
     }
     _hasScrollToLoad() {
-        return this.type === TableGrowingMode.Scroll;
+        return this.mode === TableGrowingMode.Scroll;
     }
     /**
      * Observes the end of the table.
@@ -142,10 +144,7 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
         if (!this._table) {
             return;
         }
-        const lastElement = this._table.shadowRoot?.querySelector("#table-end-row");
-        if (lastElement) {
-            this._getIntersectionObserver().observe(lastElement);
-        }
+        this._getIntersectionObserver().observe(this._table._endRow);
     }
     /**
      * Returns the IntersectionObserver instance. If it does not exist, it will be created.
@@ -154,7 +153,10 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
      */
     _getIntersectionObserver() {
         if (!this._observer) {
-            this._observer = new IntersectionObserver(this._onIntersection.bind(this), { root: document });
+            this._observer = new IntersectionObserver(this._onIntersection.bind(this), {
+                root: findVerticalScrollContainer(this._table ?? document.body),
+                rootMargin: "5px",
+            });
         }
         return this._observer;
     }
@@ -194,27 +196,27 @@ let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
     _onFocusout() {
         this._activeState = false;
     }
-    get _growingButtonText() {
-        return this.growingText || TableGrowing_1.i18nBundle.getText(TABLE_MORE);
+    get _buttonText() {
+        return this.text || TableGrowing_1.i18nBundle.getText(TABLE_MORE);
     }
-    get _growingButtonDescription() {
+    get _buttonDescription() {
         return TableGrowing_1.i18nBundle.getText(TABLE_MORE_DESCRIPTION);
     }
-    get _hasGrowingButton() {
+    get _hasButton() {
         return this.hasGrowingComponent();
     }
 };
 __decorate([
     property()
-], TableGrowing.prototype, "type", void 0);
+], TableGrowing.prototype, "mode", void 0);
 __decorate([
     property()
-], TableGrowing.prototype, "growingText", void 0);
+], TableGrowing.prototype, "text", void 0);
 __decorate([
     property()
-], TableGrowing.prototype, "growingSubText", void 0);
+], TableGrowing.prototype, "subtext", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, noAttribute: true })
 ], TableGrowing.prototype, "_activeState", void 0);
 __decorate([
     property({ type: Number, noAttribute: true })
@@ -225,7 +227,7 @@ __decorate([
 TableGrowing = TableGrowing_1 = __decorate([
     customElement({
         tag: "ui5-table-growing",
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: TableGrowingTemplate,
         styles: TableGrowingCss,
     })
@@ -235,8 +237,8 @@ TableGrowing = TableGrowing_1 = __decorate([
      * @public
      */
     ,
-    event("load-more", {
-        bubbles: true,
+    eventStrict("load-more", {
+        bubbles: false,
     })
 ], TableGrowing);
 TableGrowing.define();

package/dist/TableGrowing.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrowing.js","sourceRoot":"","sources":["../src/TableGrowing.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.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\";\n\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport {\n\tisSpace,\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport type Table from \"./Table.js\";\nimport type { ITableGrowing } from \"./Table.js\";\nimport TableGrowingMode from \"./types/TableGrowingMode.js\";\nimport TableGrowingTemplate from \"./generated/templates/TableGrowingTemplate.lit.js\";\nimport TableGrowingCss from \"./generated/themes/TableGrowing.css.js\";\nimport {\n\tTABLE_MORE,\n\tTABLE_MORE_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// The documentation should be similar to the Table.ts class documentation!\n// Please only use that style where it uses markdown and the documentation is more readable.\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\n * to the table.\n *\n * The component offers two options:\n * * Button - a More button is displayed, clicking it will load more data.\n * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n *\n * ### Usage\n *\n * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\n * It has to be slotted inside the `ui5-table` in the `features` slot.\n * The component is not intended to be used as a standalone component.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n * </ui5-table>\n * ```\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-growing\",\n\trenderer: litRender,\n\ttemplate: TableGrowingTemplate,\n\tstyles: TableGrowingCss,\n})\n\n/**\n * Fired when the growing button is pressed or the user scrolls to the end of the table.\n *\n * @public\n */\n@event(\"load-more\", {\n\tbubbles: true,\n})\n\nclass TableGrowing extends UI5Element implements ITableGrowing {\n\teventDetails!: {\n\t\t\"load-more\": void;\n\t}\n\t/**\n\t * Defines the mode of the <code>ui5-table</code> growing.\n\t *\n\t * Available options are:\n\t *\n\t * Button - Shows a More button at the bottom of the table, pressing it will load more rows.\n\t *\n\t * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.\n\t * @default \"Button\"\n\t * @public\n\t */\n\t@property()\n\ttype: `${TableGrowingMode}` = \"Button\";\n\n\t/**\n\t * Defines the text that will be displayed inside the growing button.\n\t * Has no effect when type is set to `Scroll`.\n\t *\n\t * **Note:** When not provided and the type is set to Button, a default text is displayed, corresponding to the\n\t * current language.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tgrowingText?: string;\n\n\t/**\n\t * Defines the text that will be displayed below the `growingText` inside the growing button.\n\t * Has no effect when type is set to Scroll.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tgrowingSubText?: string;\n\n\t/**\n\t * Defines the active state of the growing button.\n\t * Used for keyboard interaction.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_activeState = false;\n\n\t@property({ type: Number, noAttribute: true })\n\t_invalidate = 0;\n\n\treadonly identifier = \"TableGrowing\";\n\t_table?: Table;\n\t_observer?: IntersectionObserver;\n\t_currentLastRow?: HTMLElement;\n\t_shouldFocusRow?: boolean;\n\t_renderContent = true;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonTableActivate(table: Table): void {\n\t\tthis._table = table;\n\t\tthis._shouldFocusRow = false;\n\t}\n\n\tonTableAfterRendering(): void {\n\t\t// Focus the first row after growing, when the growing button is used\n\t\tif (this._shouldFocusRow) {\n\t\t\tthis._shouldFocusRow = false;\n\t\t\tlet focusRow = this._currentLastRow?.nextElementSibling as HTMLElement;\n\n\t\t\tif (this.hasGrowingComponent()) {\n\t\t\t\tfocusRow ||= this.getFocusDomRef() as HTMLElement;\n\t\t\t}\n\n\t\t\tfocusRow ||= this._table?.rows[0] as HTMLElement;\n\n\t\t\tfocusRow?.focus();\n\t\t}\n\n\t\tif (this._renderContent !== this.hasGrowingComponent()) {\n\t\t\tthis._invalidate++;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._hasScrollToLoad() && !this.hasGrowingComponent() && !this._observer) {\n\t\t\tthis._observeTableEnd();\n\t\t}\n\t}\n\n\tonExitDOM(): void {\n\t\tthis._table = undefined;\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._currentLastRow = undefined;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._currentLastRow = undefined;\n\t\tthis._renderContent = this.hasGrowingComponent();\n\t\tthis._invalidateTable();\n\t}\n\n\thasGrowingComponent(): boolean {\n\t\tif (this.type === TableGrowingMode.Scroll) {\n\t\t\treturn !!this._table && this._table._scrollContainer.clientHeight >= this._table._tableElement.scrollHeight;\n\t\t}\n\n\t\treturn this.type === `${TableGrowingMode.Button}`;\n\t}\n\n\t/**\n\t * An event handler that can be used by the Table to notify the TableGrowing that\n\t * the Table is growing either by pressing the load more button or by scrolling to the end of the table.\n\t */\n\tloadMore(): void {\n\t\t// remembers the last row. only do this when the table has a growing component rendered.\n\t\tif (this._table && this.hasGrowingComponent()) {\n\t\t\tthis._currentLastRow = this._table.rows[this._table.rows.length - 1];\n\t\t}\n\t\tthis._shouldFocusRow = true;\n\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\t_hasScrollToLoad() {\n\t\treturn this.type === TableGrowingMode.Scroll;\n\t}\n\n\t/**\n\t * Observes the end of the table.\n\t * @private\n\t */\n\t_observeTableEnd(): void {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst lastElement = this._table.shadowRoot?.querySelector(\"#table-end-row\");\n\t\tif (lastElement) {\n\t\t\tthis._getIntersectionObserver().observe(lastElement);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the IntersectionObserver instance. If it does not exist, it will be created.\n\t * The observer will call the loadMore function when the end of the table is reached.\n\t * @private\n\t */\n\t_getIntersectionObserver(): IntersectionObserver {\n\t\tif (!this._observer) {\n\t\t\tthis._observer = new IntersectionObserver(this._onIntersection.bind(this), { root: document });\n\t\t}\n\t\treturn this._observer;\n\t}\n\n\t_onIntersection(entries: Array<IntersectionObserverEntry>) {\n\t\tif (entries.some(entry => entry.isIntersecting)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t}\n\n\t_invalidateTable() {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\t\tthis._table._invalidate++;\n\t}\n\n\t/**\n\t * Handles the keydown event on the growing button.\n\t *\n\t * Calls the loadMore function when the Enter and Space keys are pressed.\n\t * @private\n\t */\n\t_onKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._activeState = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.loadMore();\n\t\t\tthis._activeState = true;\n\t\t}\n\t}\n\n\t_onKeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t\tthis._activeState = false;\n\t}\n\n\t_onFocusout() {\n\t\tthis._activeState = false;\n\t}\n\n\tget _growingButtonText() {\n\t\treturn this.growingText || TableGrowing.i18nBundle.getText(TABLE_MORE);\n\t}\n\n\tget _growingButtonDescription() {\n\t\treturn TableGrowing.i18nBundle.getText(TABLE_MORE_DESCRIPTION);\n\t}\n\n\tget _hasGrowingButton() {\n\t\treturn this.hasGrowingComponent();\n\t}\n}\n\nTableGrowing.define();\n\nexport default TableGrowing;\n"]}
+{"version":3,"file":"TableGrowing.js","sourceRoot":"","sources":["../src/TableGrowing.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, property, eventStrict, i18n,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TableGrowingMode from \"./types/TableGrowingMode.js\";\nimport TableGrowingTemplate from \"./TableGrowingTemplate.js\";\nimport TableGrowingCss from \"./generated/themes/TableGrowing.css.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type Table from \"./Table.js\";\nimport type { ITableGrowing } from \"./Table.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n\tTABLE_MORE,\n\tTABLE_MORE_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport { findVerticalScrollContainer } from \"./TableUtils.js\";\n\n// The documentation should be similar to the Table.ts class documentation!\n// Please only use that style where it uses markdown and the documentation is more readable.\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\n * to the table.\n *\n * The component offers two options:\n * * Button - a More button is displayed, clicking it will load more data.\n * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n *\n * ### Usage\n *\n * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\n * It has to be slotted inside the `ui5-table` in the `features` slot.\n * The component is not intended to be used as a standalone component.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n * </ui5-table>\n * ```\n *\n * **Notes**:\n * * When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\n * the component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-growing\",\n\trenderer: jsxRenderer,\n\ttemplate: TableGrowingTemplate,\n\tstyles: TableGrowingCss,\n})\n\n/**\n * Fired when the growing button is pressed or the user scrolls to the end of the table.\n *\n * @public\n */\n@eventStrict(\"load-more\", {\n\tbubbles: false,\n})\n\nclass TableGrowing extends UI5Element implements ITableGrowing {\n\teventDetails!: {\n\t\t\"load-more\": void;\n\t}\n\t/**\n\t * Defines the mode of the <code>ui5-table</code> growing.\n\t *\n\t * Available options are:\n\t *\n\t * Button - Shows a More button at the bottom of the table, pressing it will load more rows.\n\t *\n\t * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\n\t * a growing button will be rendered instead to ensure growing functionality.\n\t * @default \"Button\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${TableGrowingMode}` = \"Button\";\n\n\t/**\n\t * Defines the text that will be displayed inside the growing button.\n\t * Has no effect when mode is set to `Scroll`.\n\t *\n\t * **Note:** When not provided and the mode is set to Button, a default text is displayed, corresponding to the\n\t * current language.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the text that will be displayed below the `text` inside the growing button.\n\t * Has no effect when mode is set to Scroll.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tsubtext?: string;\n\n\t/**\n\t * Defines the active state of the growing button.\n\t * Used for keyboard interaction.\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_activeState = false;\n\n\t@property({ type: Number, noAttribute: true })\n\t_invalidate = 0;\n\n\treadonly identifier = \"TableGrowing\";\n\t_table?: Table;\n\t_observer?: IntersectionObserver;\n\t_currentLastRow?: HTMLElement;\n\t_shouldFocusRow?: boolean;\n\t_renderContent = true;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonTableActivate(table: Table): void {\n\t\tthis._table = table;\n\t\tthis._shouldFocusRow = false;\n\t}\n\n\tonTableAfterRendering(): void {\n\t\t// Focus the first row after growing, when the growing button is used\n\t\tif (this._shouldFocusRow) {\n\t\t\tthis._shouldFocusRow = false;\n\t\t\tlet focusRow = this._currentLastRow?.nextElementSibling as HTMLElement;\n\n\t\t\tif (this.hasGrowingComponent()) {\n\t\t\t\tfocusRow ||= this.getFocusDomRef() as HTMLElement;\n\t\t\t}\n\n\t\t\tfocusRow ||= this._table?.rows[0] as HTMLElement;\n\n\t\t\tfocusRow?.focus();\n\t\t}\n\n\t\tif (this._renderContent !== this.hasGrowingComponent()) {\n\t\t\tthis._invalidate++;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._hasScrollToLoad() && !this.hasGrowingComponent() && !this._observer) {\n\t\t\tthis._observeTableEnd();\n\t\t}\n\t}\n\n\tonExitDOM(): void {\n\t\tthis._table = undefined;\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._currentLastRow = undefined;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._renderContent = this.hasGrowingComponent();\n\t\tthis._invalidateTable();\n\t}\n\n\thasGrowingComponent(): boolean {\n\t\tif (this.mode === TableGrowingMode.Scroll) {\n\t\t\treturn !!this._table && this._table._scrollContainer.clientHeight >= this._table._tableElement.scrollHeight;\n\t\t}\n\n\t\treturn this.mode === `${TableGrowingMode.Button}`;\n\t}\n\n\t/**\n\t * An event handler that can be used by the Table to notify the TableGrowing that\n\t * the Table is growing either by pressing the load more button or by scrolling to the end of the table.\n\t */\n\tloadMore(): void {\n\t\t// remembers the last row. only do this when the table has a growing component rendered.\n\t\tif (this._table && this.hasGrowingComponent()) {\n\t\t\tthis._currentLastRow = this._table.rows[this._table.rows.length - 1];\n\t\t\tthis._shouldFocusRow = true;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\t_hasScrollToLoad() {\n\t\treturn this.mode === TableGrowingMode.Scroll;\n\t}\n\n\t/**\n\t * Observes the end of the table.\n\t * @private\n\t */\n\t_observeTableEnd(): void {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._getIntersectionObserver().observe(this._table._endRow);\n\t}\n\n\t/**\n\t * Returns the IntersectionObserver instance. If it does not exist, it will be created.\n\t * The observer will call the loadMore function when the end of the table is reached.\n\t * @private\n\t */\n\t_getIntersectionObserver(): IntersectionObserver {\n\t\tif (!this._observer) {\n\t\t\tthis._observer = new IntersectionObserver(this._onIntersection.bind(this), {\n\t\t\t\troot: findVerticalScrollContainer(this._table ?? document.body),\n\t\t\t\trootMargin: \"5px\",\n\t\t\t});\n\t\t}\n\t\treturn this._observer;\n\t}\n\n\t_onIntersection(entries: Array<IntersectionObserverEntry>) {\n\t\tif (entries.some(entry => entry.isIntersecting)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t}\n\n\t_invalidateTable() {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\t\tthis._table._invalidate++;\n\t}\n\n\t/**\n\t * Handles the keydown event on the growing button.\n\t *\n\t * Calls the loadMore function when the Enter and Space keys are pressed.\n\t * @private\n\t */\n\t_onKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._activeState = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.loadMore();\n\t\t\tthis._activeState = true;\n\t\t}\n\t}\n\n\t_onKeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t\tthis._activeState = false;\n\t}\n\n\t_onFocusout() {\n\t\tthis._activeState = false;\n\t}\n\n\tget _buttonText() {\n\t\treturn this.text || TableGrowing.i18nBundle.getText(TABLE_MORE);\n\t}\n\n\tget _buttonDescription() {\n\t\treturn TableGrowing.i18nBundle.getText(TABLE_MORE_DESCRIPTION);\n\t}\n\n\tget _hasButton() {\n\t\treturn this.hasGrowingComponent();\n\t}\n}\n\nTableGrowing.define();\n\nexport default TableGrowing;\n"]}

package/dist/TableGrowingTemplate.d.ts

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

package/dist/TableGrowingTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function TableGrowingTemplate() {
+    return (_jsxs("div", { id: "button", tabindex: -1, "data-ui5-growing-active": this._activeState, onClick: this.loadMore, onKeyDown: this._onKeydown, onKeyUp: this._onKeyup, onFocusOut: this._onFocusout, role: "button", "aria-labelledby": "text subtext", "aria-describedby": "description", children: [_jsx("span", { id: "text", children: this._buttonText }), this.subtext &&
+                _jsx("span", { id: "subtext", children: this.subtext }), _jsx("span", { id: "description", class: "ui5-hidden-text", "aria-hidden": "true", children: this._buttonDescription })] }));
+}
+//# sourceMappingURL=TableGrowingTemplate.js.map

package/dist/TableGrowingTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGrowingTemplate.js","sourceRoot":"","sources":["../src/TableGrowingTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,eACC,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAE,CAAC,CAAC,6BACa,IAAI,CAAC,YAAY,EAC1C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,IAAI,EAAC,QAAQ,qBACG,cAAc,sBACb,aAAa,aAC9B,eAAM,EAAE,EAAC,MAAM,YAAE,IAAI,CAAC,WAAW,GAAQ,EACvC,IAAI,CAAC,OAAO;gBACb,eAAM,EAAE,EAAC,SAAS,YAAE,IAAI,CAAC,OAAO,GAAQ,EAEzC,eAAM,EAAE,EAAC,aAAa,EAAC,KAAK,EAAC,iBAAiB,iBAAa,MAAM,YAAE,IAAI,CAAC,kBAAkB,GAAQ,IAC7F,CACN,CAAC;AACH,CAAC","sourcesContent":["import type TableGrowing from \"./TableGrowing.js\";\n\nexport default function TableGrowingTemplate(this: TableGrowing) {\n\treturn (\n\t\t<div\n\t\t\tid=\"button\"\n\t\t\ttabindex={-1}\n\t\t\tdata-ui5-growing-active={this._activeState}\n\t\t\tonClick={this.loadMore}\n\t\t\tonKeyDown={this._onKeydown}\n\t\t\tonKeyUp={this._onKeyup}\n\t\t\tonFocusOut={this._onFocusout}\n\t\t\trole=\"button\"\n\t\t\taria-labelledby=\"text subtext\"\n\t\t\taria-describedby=\"description\">\n\t\t\t<span id=\"text\">{this._buttonText}</span>\n\t\t\t{ this.subtext &&\n\t\t\t\t<span id=\"subtext\">{this.subtext}</span>\n\t\t\t}\n\t\t\t<span id=\"description\" class=\"ui5-hidden-text\" aria-hidden=\"true\">{this._buttonDescription}</span>\n\t\t</div>\n\t);\n}\n"]}

package/dist/TableHeaderCell.d.ts

@@ -1,4 +1,6 @@
 import TableCellBase from "./TableCellBase.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
 /**
  * @class
  *
@@ -21,31 +23,34 @@ import TableCellBase from "./TableCellBase.js";
  */
 declare class TableHeaderCell extends TableCellBase {
     /**
-     * Defines the width of column.
+     * Defines the width of the column.
      *
-     * @default "auto"
+     * By default, the column will grow and shrink according to the available space.
+     * This will distribute the space proportionally among all columns with no specific width set.
+     *
+     * See [\<length\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and
+     * [\<percentage\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.
+     *
+     * @default undefined
      * @public
      */
-    width: string;
+    width?: string;
     /**
      * Defines the minimum width of the column.
      *
      * If the table is in `Popin` mode and the minimum width does not fit anymore,
      * the column will move into the popin.
      *
-     * **Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.
+     * By default, the table prevents the column from becoming too small.
+     * Changing this value to a small value might lead to accessibility issues.
      *
-     * @default "auto"
-     * @public
-     */
-    minWidth: string;
-    /**
-     * Defines the maximum width of the column.
+     * **Note:** This property only takes effect for columns with a [\<percentage\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value
+     * or the default width.
      *
-     * @default "auto"
      * @public
+     * @default undefined
      */
-    maxWidth: string;
+    minWidth?: string;
     /**
      * Defines the importance of the column.
      *
@@ -57,10 +62,45 @@ declare class TableHeaderCell extends TableCellBase {
      * @public
      */
     importance: number;
+    /**
+     * The text for the column when it pops in.
+     *
+     * @default undefined
+     * @since 2.7.0
+     * @public
+     */
+    popinText?: string;
+    /**
+     * Defines the sort indicator of the column.
+     *
+     * @default "None"
+     * @since 2.8.0
+     * @public
+     */
+    sortIndicator: `${SortOrder}`;
+    /**
+     * Defines if the column is hidden in the popin.
+     *
+     * **Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as
+     * users might not be able to access the content of the column on small screens.
+     *
+     * @default false
+     * @since 2.8.0
+     * @public
+     */
+    popinHidden: boolean;
+    /**
+     * Defines the action of the column.
+     *
+     * **Note:** While multiple actions are technically possible, this is not supported.
+     *
+     * @public
+     * @since 2.8.0
+     */
+    action: Array<TableHeaderCellActionBase>;
     _popin: boolean;
     protected ariaRole: string;
     _popinWidth: number;
-    onEnterDOM(): void;
     onBeforeRendering(): void;
 }
 export default TableHeaderCell;

package/dist/TableHeaderCell.js

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { customElement, property, slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import { toggleAttribute } from "./TableUtils.js";
 import TableCellBase from "./TableCellBase.js";
-import TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
+import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
 import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
 /**
  * @class
  *
@@ -33,56 +34,46 @@ let TableHeaderCell = class TableHeaderCell extends TableCellBase {
     constructor() {
         super(...arguments);
         /**
-         * Defines the width of column.
-         *
-         * @default "auto"
-         * @public
-         */
-        this.width = "auto";
-        /**
-         * Defines the minimum width of the column.
-         *
-         * If the table is in `Popin` mode and the minimum width does not fit anymore,
-         * the column will move into the popin.
+         * Defines the importance of the column.
          *
-         * **Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.
+         * This property affects the popin behaviour.
+         * Columns with higher importance will move into the popin area later then less important
+         * columns.
          *
-         * @default "auto"
+         * @default 0
          * @public
          */
-        this.minWidth = "auto";
+        this.importance = 0;
         /**
-         * Defines the maximum width of the column.
+         * Defines the sort indicator of the column.
          *
-         * @default "auto"
+         * @default "None"
+         * @since 2.8.0
          * @public
          */
-        this.maxWidth = "auto";
+        this.sortIndicator = "None";
         /**
-         * Defines the importance of the column.
+         * Defines if the column is hidden in the popin.
          *
-         * This property affects the popin behaviour.
-         * Columns with higher importance will move into the popin area later then less important
-         * columns.
+         * **Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as
+         * users might not be able to access the content of the column on small screens.
          *
-         * @default 0
+         * @default false
+         * @since 2.8.0
          * @public
          */
-        this.importance = 0;
+        this.popinHidden = false;
         this._popin = false;
         this.ariaRole = "columnheader";
         this._popinWidth = 0;
     }
-    onEnterDOM() {
-        super.onEnterDOM();
-        this.style.minWidth = this.minWidth;
-        this.style.maxWidth = this.maxWidth;
-        this.style.width = this.width;
-    }
     onBeforeRendering() {
         super.onBeforeRendering();
-        // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
-        this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+        if (this._individualSlot) {
+            // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
+            this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+        }
+        toggleAttribute(this, "aria-sort", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase());
     }
 };
 __decorate([
@@ -91,12 +82,21 @@ __decorate([
 __decorate([
     property()
 ], TableHeaderCell.prototype, "minWidth", void 0);
-__decorate([
-    property()
-], TableHeaderCell.prototype, "maxWidth", void 0);
 __decorate([
     property({ type: Number })
 ], TableHeaderCell.prototype, "importance", void 0);
+__decorate([
+    property()
+], TableHeaderCell.prototype, "popinText", void 0);
+__decorate([
+    property()
+], TableHeaderCell.prototype, "sortIndicator", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableHeaderCell.prototype, "popinHidden", void 0);
+__decorate([
+    slot()
+], TableHeaderCell.prototype, "action", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], TableHeaderCell.prototype, "_popin", void 0);

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QACC;;;;;WAKG;QAEH,UAAK,GAAG,MAAM,CAAC;QAEf;;;;;;;;;;WAUG;QAEH,aAAQ,GAAG,MAAM,CAAC;QAElB;;;;;WAKG;QAEH,aAAQ,GAAG,MAAM,CAAC;QAElB;;;;;;;;;WASG;QAEH,eAAU,GAAG,CAAC,CAAC;QAGf,WAAM,GAAG,KAAK,CAAC;QAEL,aAAQ,GAAW,cAAc,CAAC;QAC5C,gBAAW,GAAW,CAAC,CAAC;IAczB,CAAC;IAZA,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,+FAA+F;QAC/F,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAC/E,CAAC;CACD,CAAA;AAxDA;IADC,QAAQ,EAAE;8CACI;AAcf;IADC,QAAQ,EAAE;iDACO;AASlB;IADC,QAAQ,EAAE;iDACO;AAalB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CAChC;AA/CV,eAAe;IALpB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,qBAAqB,CAAC;QACrD,QAAQ,EAAE,uBAAuB;KACjC,CAAC;GACI,eAAe,CAgEpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport TableHeaderCellTemplate from \"./generated/templates/TableHeaderCellTemplate.lit.js\";\nimport TableHeaderCellStyles from \"./generated/themes/TableHeaderCell.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-header-cell` component represents a column in the `ui5-table`.\n *\n * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\n * to ensure correct layout and design.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n *\n * @constructor\n * @extends TableCellBase\n * @since 2.0.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-header-cell\",\n\tstyles: [TableCellBase.styles, TableHeaderCellStyles],\n\ttemplate: TableHeaderCellTemplate,\n})\nclass TableHeaderCell extends TableCellBase {\n\t/**\n\t * Defines the width of column.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\twidth = \"auto\";\n\n\t/**\n \t * Defines the minimum width of the column.\n\t *\n\t * If the table is in `Popin` mode and the minimum width does not fit anymore,\n\t * the column will move into the popin.\n\t *\n\t * **Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\tminWidth = \"auto\";\n\n\t/**\n\t * Defines the maximum width of the column.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\tmaxWidth = \"auto\";\n\n\t/**\n\t * Defines the importance of the column.\n\t *\n\t * This property affects the popin behaviour.\n\t * Columns with higher importance will move into the popin area later then less important\n\t * columns.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\timportance = 0;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popin = false;\n\n\tprotected ariaRole: string = \"columnheader\";\n\t_popinWidth: number = 0;\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\tthis.style.minWidth = this.minWidth;\n\t\tthis.style.maxWidth = this.maxWidth;\n\t\tthis.style.width = this.width;\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\t// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable\n\t\tthis.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n\t}\n}\n\nTableHeaderCell.define();\n\nexport default TableHeaderCell;\n"]}
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAC9E,OAAO,SAAS,MAAM,iDAAiD,CAAC;AAGxE;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QAkCC;;;;;;;;;WASG;QAEH,eAAU,GAAG,CAAC,CAAC;QAYf;;;;;;WAMG;QAEH,kBAAa,GAAmB,MAAM,CAAC;QAEvC;;;;;;;;;WASG;QAEH,gBAAW,GAAY,KAAK,CAAC;QAc7B,WAAM,GAAG,KAAK,CAAC;QAEL,aAAQ,GAAW,cAAc,CAAC;QAC5C,gBAAW,GAAW,CAAC,CAAC;IAUzB,CAAC;IARA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,+FAA+F;YAC/F,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;QAC/E,CAAC;QACD,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7G,CAAC;CACD,CAAA;AA3FA;IADC,QAAQ,EAAE;8CACI;AAkBf;IADC,QAAQ,EAAE;iDACO;AAalB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AAUf;IADC,QAAQ,EAAE;kDACQ;AAUnB;IADC,QAAQ,EAAE;sDAC4B;AAavC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACC;AAW7B;IADC,IAAI,EAAE;+CACmC;AAG1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CAChC;AA5FV,eAAe;IALpB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,qBAAqB,CAAC;QACrD,QAAQ,EAAE,uBAAuB;KACjC,CAAC;GACI,eAAe,CAyGpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import { customElement, property, slot } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { toggleAttribute } from \"./TableUtils.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport TableHeaderCellTemplate from \"./TableHeaderCellTemplate.js\";\nimport TableHeaderCellStyles from \"./generated/themes/TableHeaderCell.css.js\";\nimport SortOrder from \"@ui5/webcomponents-base/dist/types/SortOrder.js\";\nimport type TableHeaderCellActionBase from \"./TableHeaderCellActionBase.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-header-cell` component represents a column in the `ui5-table`.\n *\n * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\n * to ensure correct layout and design.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n *\n * @constructor\n * @extends TableCellBase\n * @since 2.0.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-header-cell\",\n\tstyles: [TableCellBase.styles, TableHeaderCellStyles],\n\ttemplate: TableHeaderCellTemplate,\n})\nclass TableHeaderCell extends TableCellBase {\n\t/**\n\t * Defines the width of the column.\n\t *\n\t * By default, the column will grow and shrink according to the available space.\n\t * This will distribute the space proportionally among all columns with no specific width set.\n\t *\n\t * See [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n\t * [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\twidth?: string;\n\n\t/**\n \t * Defines the minimum width of the column.\n\t *\n\t * If the table is in `Popin` mode and the minimum width does not fit anymore,\n\t * the column will move into the popin.\n\t *\n\t * By default, the table prevents the column from becoming too small.\n\t * Changing this value to a small value might lead to accessibility issues.\n\t *\n\t * **Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\n\t * or the default width.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\tminWidth?: string;\n\n\t/**\n\t * Defines the importance of the column.\n\t *\n\t * This property affects the popin behaviour.\n\t * Columns with higher importance will move into the popin area later then less important\n\t * columns.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\timportance = 0;\n\n\t/**\n\t * The text for the column when it pops in.\n\t *\n\t * @default undefined\n\t * @since 2.7.0\n\t * @public\n\t */\n\t@property()\n\tpopinText?: string;\n\n\t/**\n\t * Defines the sort indicator of the column.\n\t *\n\t * @default \"None\"\n\t * @since 2.8.0\n\t * @public\n\t */\n\t@property()\n\tsortIndicator: `${SortOrder}` = \"None\";\n\n\t/**\n\t * Defines if the column is hidden in the popin.\n\t *\n\t * **Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\n\t * users might not be able to access the content of the column on small screens.\n\t *\n\t * @default false\n\t * @since 2.8.0\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tpopinHidden: boolean = false;\n\n\t/**\n\t * Defines the action of the column.\n\t *\n\t * **Note:** While multiple actions are technically possible, this is not supported.\n\t *\n\t * @public\n\t * @since 2.8.0\n\t */\n\t@slot()\n\taction!: Array<TableHeaderCellActionBase>;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popin = false;\n\n\tprotected ariaRole: string = \"columnheader\";\n\t_popinWidth: number = 0;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tif (this._individualSlot) {\n\t\t\t// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable\n\t\t\tthis.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n\t\t}\n\t\ttoggleAttribute(this, \"aria-sort\", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase());\n\t}\n}\n\nTableHeaderCell.define();\n\nexport default TableHeaderCell;\n"]}

package/dist/TableHeaderCellActionAI.d.ts

@@ -0,0 +1,29 @@
+import TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/ai.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCellActionAI.js";`
+ *
+ * @constructor
+ * @extends TableHeaderCellActionBase
+ * @since 2.8.0
+ * @public
+ * @experimental
+ */
+declare class TableHeaderCellActionAI extends TableHeaderCellActionBase {
+    static i18nBundle: I18nBundle;
+    onAfterRendering(): void;
+    getRenderInfo(): {
+        icon: string;
+        tooltip: string;
+    };
+}
+export default TableHeaderCellActionAI;

package/dist/TableHeaderCellActionAI.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TableHeaderCellActionAI_1;
+import { customElement, i18n } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+import { TABLE_GENERATED_BY_AI } from "./generated/i18n/i18n-defaults.js";
+import "@ui5/webcomponents-icons/dist/ai.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCellActionAI.js";`
+ *
+ * @constructor
+ * @extends TableHeaderCellActionBase
+ * @since 2.8.0
+ * @public
+ * @experimental
+ */
+let TableHeaderCellActionAI = TableHeaderCellActionAI_1 = class TableHeaderCellActionAI extends TableHeaderCellActionBase {
+    onAfterRendering() {
+        super.onAfterRendering();
+        this.toggleAttribute("_popin", !this.parentElement?.hasAttribute("ui5-table-header-cell"));
+    }
+    getRenderInfo() {
+        return {
+            icon: "ai",
+            tooltip: TableHeaderCellActionAI_1.i18nBundle.getText(TABLE_GENERATED_BY_AI),
+        };
+    }
+};
+__decorate([
+    i18n("@ui5/webcomponents")
+], TableHeaderCellActionAI, "i18nBundle", void 0);
+TableHeaderCellActionAI = TableHeaderCellActionAI_1 = __decorate([
+    customElement({ tag: "ui5-table-header-cell-action-ai" })
+], TableHeaderCellActionAI);
+TableHeaderCellActionAI.define();
+export default TableHeaderCellActionAI;
+//# sourceMappingURL=TableHeaderCellActionAI.js.map

package/dist/TableHeaderCellActionAI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCellActionAI.js","sourceRoot":"","sources":["../src/TableHeaderCellActionAI.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,qCAAqC,CAAC;AAE7C;;;;;;;;;;;;;;;;GAgBG;AAGH,IAAM,uBAAuB,+BAA7B,MAAM,uBAAwB,SAAQ,yBAAyB;IAI9D,gBAAgB;QACf,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAC5F,CAAC;IAED,aAAa;QACZ,OAAO;YACN,IAAI,EAAE,IAAI;YACV,OAAO,EAAE,yBAAuB,CAAC,UAAU,CAAC,OAAO,CAAC,qBAAqB,CAAC;SAC1E,CAAC;IACH,CAAC;CACD,CAAA;AAbO;IADN,IAAI,CAAC,oBAAoB,CAAC;iDACG;AAFzB,uBAAuB;IAF5B,aAAa,CAAC,EAAE,GAAG,EAAE,iCAAiC,EAAE,CAAC;GAEpD,uBAAuB,CAe5B;AAED,uBAAuB,CAAC,MAAM,EAAE,CAAC;AAEjC,eAAe,uBAAuB,CAAC","sourcesContent":["import { customElement, i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport TableHeaderCellActionBase from \"./TableHeaderCellActionBase.js\";\nimport { TABLE_GENERATED_BY_AI } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/ai.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-header-cell-action-ai` component defines a dedicated AI action for the table column.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableHeaderCellActionAI.js\";`\n *\n * @constructor\n * @extends TableHeaderCellActionBase\n * @since 2.8.0\n * @public\n * @experimental\n */\n@customElement({ tag: \"ui5-table-header-cell-action-ai\" })\n\nclass TableHeaderCellActionAI extends TableHeaderCellActionBase {\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonAfterRendering() {\n\t\tsuper.onAfterRendering();\n\t\tthis.toggleAttribute(\"_popin\", !this.parentElement?.hasAttribute(\"ui5-table-header-cell\"));\n\t}\n\n\tgetRenderInfo() {\n\t\treturn {\n\t\t\ticon: \"ai\",\n\t\t\ttooltip: TableHeaderCellActionAI.i18nBundle.getText(TABLE_GENERATED_BY_AI),\n\t\t};\n\t}\n}\n\nTableHeaderCellActionAI.define();\n\nexport default TableHeaderCellActionAI;\n"]}

package/dist/TableHeaderCellActionBase.d.ts

@@ -0,0 +1,35 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type Button from "./Button.js";
+/**
+ * Fired when a header cell action is clicked.
+ *
+ * @param {HTMLElement} targetRef The reference to the element that triggered the event
+ * @public
+ * @since 2.8.0
+ */
+type TableHeaderCellActionClickEventDetail = {
+    targetRef: HTMLElement;
+};
+/**
+ * Fired when a header cell action is clicked.
+ *
+ * @param {HTMLElement} targetRef The reference to the element that triggered the event
+ * @public
+ * @since 2.8.0
+ */
+declare abstract class TableHeaderCellActionBase extends UI5Element {
+    eventDetails: {
+        "click": TableHeaderCellActionClickEventDetail;
+    };
+    abstract getRenderInfo(): {
+        icon: string;
+        tooltip: string;
+    };
+    onBeforeRendering(): void;
+    _onClick(e: UI5CustomEvent<Button, "click">): void;
+    get _tooltip(): string;
+    get _icon(): string;
+}
+export default TableHeaderCellActionBase;
+export type { TableHeaderCellActionClickEventDetail, };