@ui5/webcomponents 0.0.0-037d08c67

package/dist/TableGrowing.js

@@ -0,0 +1,245 @@
+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 TableGrowing_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 "./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.
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities
+ * to the table.
+ *
+ * The component offers two options:
+ * * Button - a More button is displayed, clicking it will load more data.
+ * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.
+ * It has to be slotted inside the `ui5-table` in the `features` slot.
+ * The component is not intended to be used as a standalone component.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-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";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the mode of the <code>ui5-table</code> growing.
+         *
+         * Available options are:
+         *
+         * 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,
+         * a growing button will be rendered instead to ensure growing functionality.
+         * @default "Button"
+         * @public
+         */
+        this.mode = "Button";
+        /**
+         * Defines the active state of the growing button.
+         * Used for keyboard interaction.
+         * @private
+         */
+        this._activeState = false;
+        this._invalidate = 0;
+        this.identifier = "TableGrowing";
+        this._renderContent = true;
+    }
+    onTableActivate(table) {
+        this._table = table;
+        this._shouldFocusRow = false;
+    }
+    onTableAfterRendering() {
+        // Focus the first row after growing, when the growing button is used
+        if (this._shouldFocusRow) {
+            this._shouldFocusRow = false;
+            let focusRow = this._currentLastRow?.nextElementSibling;
+            if (this.hasGrowingComponent()) {
+                focusRow ||= this.getFocusDomRef();
+            }
+            focusRow ||= this._table?.rows[0];
+            focusRow?.focus();
+        }
+        if (this._renderContent !== this.hasGrowingComponent()) {
+            this._invalidate++;
+            return;
+        }
+        if (this._hasScrollToLoad() && !this.hasGrowingComponent() && !this._observer) {
+            this._observeTableEnd();
+        }
+    }
+    onExitDOM() {
+        this._table = undefined;
+        this._observer?.disconnect();
+        this._observer = undefined;
+        this._currentLastRow = undefined;
+    }
+    onBeforeRendering() {
+        this._observer?.disconnect();
+        this._observer = undefined;
+        this._renderContent = this.hasGrowingComponent();
+        this._invalidateTable();
+    }
+    hasGrowingComponent() {
+        if (this.mode === TableGrowingMode.Scroll) {
+            return !!this._table && this._table._scrollContainer.clientHeight >= this._table._tableElement.scrollHeight;
+        }
+        return this.mode === `${TableGrowingMode.Button}`;
+    }
+    /**
+     * An event handler that can be used by the Table to notify the TableGrowing that
+     * the Table is growing either by pressing the load more button or by scrolling to the end of the table.
+     */
+    loadMore() {
+        // 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.fireDecoratorEvent("load-more");
+    }
+    _hasScrollToLoad() {
+        return this.mode === TableGrowingMode.Scroll;
+    }
+    /**
+     * Observes the end of the table.
+     * @private
+     */
+    _observeTableEnd() {
+        if (!this._table) {
+            return;
+        }
+        this._getIntersectionObserver().observe(this._table._endRow);
+    }
+    /**
+     * Returns the IntersectionObserver instance. If it does not exist, it will be created.
+     * The observer will call the loadMore function when the end of the table is reached.
+     * @private
+     */
+    _getIntersectionObserver() {
+        if (!this._observer) {
+            this._observer = new IntersectionObserver(this._onIntersection.bind(this), {
+                root: findVerticalScrollContainer(this._table ?? document.body),
+                rootMargin: "5px",
+            });
+        }
+        return this._observer;
+    }
+    _onIntersection(entries) {
+        if (entries.some(entry => entry.isIntersecting)) {
+            this.loadMore();
+        }
+    }
+    _invalidateTable() {
+        if (!this._table) {
+            return;
+        }
+        this._table._invalidate++;
+    }
+    /**
+     * Handles the keydown event on the growing button.
+     *
+     * Calls the loadMore function when the Enter and Space keys are pressed.
+     * @private
+     */
+    _onKeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+            this._activeState = true;
+        }
+        if (isEnter(e)) {
+            this.loadMore();
+            this._activeState = true;
+        }
+    }
+    _onKeyup(e) {
+        if (isSpace(e)) {
+            this.loadMore();
+        }
+        this._activeState = false;
+    }
+    _onFocusout() {
+        this._activeState = false;
+    }
+    get _buttonText() {
+        return this.text || TableGrowing_1.i18nBundle.getText(TABLE_MORE);
+    }
+    get _buttonDescription() {
+        return TableGrowing_1.i18nBundle.getText(TABLE_MORE_DESCRIPTION);
+    }
+    get _hasButton() {
+        return this.hasGrowingComponent();
+    }
+};
+__decorate([
+    property()
+], TableGrowing.prototype, "mode", void 0);
+__decorate([
+    property()
+], TableGrowing.prototype, "text", void 0);
+__decorate([
+    property()
+], TableGrowing.prototype, "subtext", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TableGrowing.prototype, "_activeState", void 0);
+__decorate([
+    property({ type: Number, noAttribute: true })
+], TableGrowing.prototype, "_invalidate", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TableGrowing, "i18nBundle", void 0);
+TableGrowing = TableGrowing_1 = __decorate([
+    customElement({
+        tag: "ui5-table-growing",
+        renderer: jsxRenderer,
+        template: TableGrowingTemplate,
+        styles: TableGrowingCss,
+    })
+    /**
+     * Fired when the growing button is pressed or the user scrolls to the end of the table.
+     *
+     * @public
+     */
+    ,
+    eventStrict("load-more", {
+        bubbles: false,
+    })
+], TableGrowing);
+TableGrowing.define();
+export default TableGrowing;
+//# sourceMappingURL=TableGrowing.js.map

package/dist/TableGrowing.js.map

@@ -0,0 +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 {\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 */\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

@@ -0,0 +1,110 @@
+import TableCellBase from "./TableCellBase.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell` component represents a column in the `ui5-table`.
+ *
+ * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`
+ * to ensure correct layout and design.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCell.js";`
+ *
+ * @constructor
+ * @extends TableCellBase
+ * @since 2.0.0
+ * @public
+ */
+declare class TableHeaderCell extends TableCellBase {
+    /**
+     * Defines the width of the column.
+     *
+     * 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;
+    /**
+     * 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.
+     *
+     * By default, the table prevents the column from becoming too small.
+     * Changing this value to a small value might lead to accessibility issues.
+     *
+     * **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.
+     *
+     * @public
+     * @default undefined
+     */
+    minWidth?: string;
+    /**
+     * Defines the importance of the column.
+     *
+     * This property affects the popin behaviour.
+     * Columns with higher importance will move into the popin area later then less important
+     * columns.
+     *
+     * @default 0
+     * @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: Slot<TableHeaderCellActionBase>;
+    _defaultSlot: HTMLSlotElement;
+    _actionSlot: HTMLSlotElement;
+    ariaRole: string;
+    _popinWidth: number;
+    onBeforeRendering(): void;
+    get accessibilityInfo(): {
+        children: HTMLSlotElement[];
+    };
+}
+export default TableHeaderCell;

package/dist/TableHeaderCell.js

@@ -0,0 +1,116 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property, slotStrict as slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import { toggleAttribute } from "./TableUtils.js";
+import TableCellBase from "./TableCellBase.js";
+import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
+import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell` component represents a column in the `ui5-table`.
+ *
+ * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`
+ * to ensure correct layout and design.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCell.js";`
+ *
+ * @constructor
+ * @extends TableCellBase
+ * @since 2.0.0
+ * @public
+ */
+let TableHeaderCell = class TableHeaderCell extends TableCellBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the importance of the column.
+         *
+         * This property affects the popin behaviour.
+         * Columns with higher importance will move into the popin area later then less important
+         * columns.
+         *
+         * @default 0
+         * @public
+         */
+        this.importance = 0;
+        /**
+         * Defines the sort indicator of the column.
+         *
+         * @default "None"
+         * @since 2.8.0
+         * @public
+         */
+        this.sortIndicator = "None";
+        /**
+         * 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
+         */
+        this.popinHidden = false;
+        this.ariaRole = "columnheader";
+        this._popinWidth = 0;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.style.justifyContent = this.horizontalAlign || "";
+        toggleAttribute(this, "aria-sort", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase());
+    }
+    get accessibilityInfo() {
+        return {
+            children: [this._defaultSlot, this._actionSlot],
+        };
+    }
+};
+__decorate([
+    property()
+], TableHeaderCell.prototype, "width", void 0);
+__decorate([
+    property()
+], TableHeaderCell.prototype, "minWidth", 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([
+    query("slot:not([name])")
+], TableHeaderCell.prototype, "_defaultSlot", void 0);
+__decorate([
+    query("slot[name=action]")
+], TableHeaderCell.prototype, "_actionSlot", void 0);
+TableHeaderCell = __decorate([
+    customElement({
+        tag: "ui5-table-header-cell",
+        styles: [TableCellBase.styles, TableHeaderCellStyles],
+        template: TableHeaderCellTemplate,
+    })
+], TableHeaderCell);
+TableHeaderCell.define();
+export default TableHeaderCell;
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,IAAI,IAAI,EAAE,MAAM,4CAA4C,CAAC;AACzG,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;AACxE,OAAO,KAAK,MAAM,kDAAkD,CAAC;AAIrE;;;;;;;;;;;;;;;;;;GAkBG;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;QAmB7B,aAAQ,GAAW,cAAc,CAAC;QAClC,gBAAW,GAAW,CAAC,CAAC;IAazB,CAAC;IAXA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC;QACvD,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC,CAAC;IAC7G,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO;YACN,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,WAAW,CAAC;SAC/C,CAAC;IACH,CAAC;CACD,CAAA;AAjGA;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;+CACkC;AAGzC;IADC,KAAK,CAAC,kBAAkB,CAAC;qDACK;AAG/B;IADC,KAAK,CAAC,mBAAmB,CAAC;oDACG;AA/FzB,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,CA+GpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import { customElement, property, slotStrict as 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 query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport type TableHeaderCellActionBase from \"./TableHeaderCellActionBase.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.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 */\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!: Slot<TableHeaderCellActionBase>;\n\n\t@query(\"slot:not([name])\")\n\t_defaultSlot!: HTMLSlotElement;\n\n\t@query(\"slot[name=action]\")\n\t_actionSlot!: HTMLSlotElement;\n\n\tariaRole: string = \"columnheader\";\n\t_popinWidth: number = 0;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.style.justifyContent = this.horizontalAlign || \"\";\n\t\ttoggleAttribute(this, \"aria-sort\", this.sortIndicator !== SortOrder.None, this.sortIndicator.toLowerCase());\n\t}\n\n\tget accessibilityInfo() {\n\t\treturn {\n\t\t\tchildren: [this._defaultSlot, this._actionSlot],\n\t\t};\n\t}\n}\n\nTableHeaderCell.define();\n\nexport default TableHeaderCell;\n"]}

package/dist/TableHeaderCellActionAI.d.ts

@@ -0,0 +1,28 @@
+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
+ */
+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,48 @@
+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
+ */
+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;;;;;;;;;;;;;;;GAeG;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 */\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,38 @@
+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 accessibilityInfo(): {
+        description: string;
+    };
+    get _tooltip(): string;
+    get _icon(): string;
+}
+export default TableHeaderCellActionBase;
+export type { TableHeaderCellActionClickEventDetail, };