@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/TableCell.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import TableCellTemplate from "./TableCellTemplate.js";
 import TableCellStyles from "./generated/themes/TableCell.css.js";
 import TableCellBase from "./TableCellBase.js";
@@ -25,40 +26,43 @@ import { LABEL_COLON } from "./generated/i18n/i18n-defaults.js";
  * @extends TableCellBase
  * @since 2.0.0
  * @public
- * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
 let TableCell = class TableCell extends TableCellBase {
     onBeforeRendering() {
         super.onBeforeRendering();
         if (this.horizontalAlign) {
+            this.style.textAlign = this.horizontalAlign;
             this.style.justifyContent = this.horizontalAlign;
         }
-        else if (this._individualSlot) {
-            this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+        else if (this._headerCell) {
+            this.style.textAlign = `var(--halign-${this._headerCell._id})`;
+            this.style.justifyContent = `var(--halign-${this._headerCell._id})`;
         }
     }
-    injectHeaderNodes(ref) {
+    _injectHeaderNodes(ref) {
         if (ref && !ref.hasChildNodes()) {
             ref.replaceChildren(...this._popinHeaderNodes);
         }
     }
     get _headerCell() {
         const row = this.parentElement;
-        const table = row.parentElement;
-        const index = row.cells.indexOf(this);
-        return table.headerRow[0].cells[index];
+        const table = row?.parentElement;
+        const index = row?.cells?.indexOf(this) ?? -1;
+        return (index !== -1) ? table?.headerRow?.[0]?.cells?.[index] : null;
     }
     get _popinHeaderNodes() {
         const nodes = [];
         const headerCell = this._headerCell;
-        if (headerCell.popinText) {
-            nodes.push(headerCell.popinText);
-        }
-        else {
-            nodes.push(...this._headerCell.content.map(node => node.cloneNode(true)));
-        }
-        if (headerCell.action[0]) {
-            nodes.push(headerCell.action[0].cloneNode(true));
+        if (headerCell) {
+            if (headerCell.popinText) {
+                nodes.push(document.createTextNode(headerCell.popinText));
+            }
+            else {
+                nodes.push(...headerCell.content.map(node => node.cloneNode(true)));
+            }
+            if (headerCell.action[0]) {
+                nodes.push(headerCell.action[0].cloneNode(true));
+            }
         }
         return nodes;
     }
@@ -66,6 +70,12 @@ let TableCell = class TableCell extends TableCellBase {
         return TableCellBase.i18nBundle.getText(LABEL_COLON);
     }
 };
+__decorate([
+    query("#popin-header")
+], TableCell.prototype, "_popinHeader", void 0);
+__decorate([
+    query("#popin-content")
+], TableCell.prototype, "_popinContent", void 0);
 TableCell = __decorate([
     customElement({
         tag: "ui5-table-cell",

package/dist/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../src/TableCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AAMH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,aAAa;IACpC,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QAClD,CAAC;aAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACjC,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;QAC/E,CAAC;IACF,CAAC;IAED,iBAAiB,CAAC,GAAuB;QACxC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,EAAE,CAAC;YACjC,GAAG,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAChD,CAAC;IACF,CAAC;IAED,IAAI,WAAW;QACd,MAAM,GAAG,GAAG,IAAI,CAAC,aAAyB,CAAC;QAC3C,MAAM,KAAK,GAAG,GAAG,CAAC,aAAsB,CAAC;QACzC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACtC,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,iBAAiB;QACpB,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QACpC,IAAI,UAAU,CAAC,SAAS,EAAE,CAAC;YAC1B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC;aAAM,CAAC;YACP,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAC3E,CAAC;QACD,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,aAAa,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACtD,CAAC;CACD,CAAA;AAxCK,SAAS;IALd,aAAa,CAAC;QACd,GAAG,EAAE,gBAAgB;QACrB,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,eAAe,CAAC;QAC/C,QAAQ,EAAE,iBAAiB;KAC3B,CAAC;GACI,SAAS,CAwCd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\nimport TableCellStyles from \"./generated/themes/TableCell.css.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport type TableRow from \"./TableRow.js\";\nimport type Table from \"./Table.js\";\nimport { LABEL_COLON } from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-cell` represents a cell inside of a `ui5-table`.\n * It is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n *\n * ### ES6 Module Import\n *\n * `import @ui5/webcomponents/dist/TableCell.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-cell\",\n\tstyles: [TableCellBase.styles, TableCellStyles],\n\ttemplate: TableCellTemplate,\n})\nclass TableCell extends TableCellBase {\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tif (this.horizontalAlign) {\n\t\t\tthis.style.justifyContent = this.horizontalAlign;\n\t\t} else if (this._individualSlot) {\n\t\t\tthis.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n\t\t}\n\t}\n\n\tinjectHeaderNodes(ref: HTMLElement | null) {\n\t\tif (ref && !ref.hasChildNodes()) {\n\t\t\tref.replaceChildren(...this._popinHeaderNodes);\n\t\t}\n\t}\n\n\tget _headerCell() {\n\t\tconst row = this.parentElement as TableRow;\n\t\tconst table = row.parentElement as Table;\n\t\tconst index = row.cells.indexOf(this);\n\t\treturn table.headerRow[0].cells[index];\n\t}\n\n\tget _popinHeaderNodes() {\n\t\tconst nodes = [];\n\t\tconst headerCell = this._headerCell;\n\t\tif (headerCell.popinText) {\n\t\t\tnodes.push(headerCell.popinText);\n\t\t} else {\n\t\t\tnodes.push(...this._headerCell.content.map(node => node.cloneNode(true)));\n\t\t}\n\t\tif (headerCell.action[0]) {\n\t\t\tnodes.push(headerCell.action[0].cloneNode(true));\n\t\t}\n\t\treturn nodes;\n\t}\n\n\tget _i18nPopinColon() {\n\t\treturn TableCellBase.i18nBundle.getText(LABEL_COLON);\n\t}\n}\n\nTableCell.define();\n\nexport default TableCell;\n"]}
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../src/TableCell.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\nimport TableCellStyles from \"./generated/themes/TableCell.css.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport type TableRow from \"./TableRow.js\";\nimport type Table from \"./Table.js\";\nimport { LABEL_COLON } from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-cell` represents a cell inside of a `ui5-table`.\n * It is tightly coupled to the `ui5-table` and thus should only be used in the table component.\n *\n * ### ES6 Module Import\n *\n * `import @ui5/webcomponents/dist/TableCell.js;`\n *\n * @constructor\n * @extends TableCellBase\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-table-cell\",\n\tstyles: [TableCellBase.styles, TableCellStyles],\n\ttemplate: TableCellTemplate,\n})\nclass TableCell extends TableCellBase {\n\t@query(\"#popin-header\")\n\t_popinHeader?: HTMLElement;\n\n\t@query(\"#popin-content\")\n\t_popinContent?: HTMLElement;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tif (this.horizontalAlign) {\n\t\t\tthis.style.textAlign = this.horizontalAlign;\n\t\t\tthis.style.justifyContent = this.horizontalAlign;\n\t\t} else if (this._headerCell) {\n\t\t\tthis.style.textAlign = `var(--halign-${this._headerCell._id})`;\n\t\t\tthis.style.justifyContent = `var(--halign-${this._headerCell._id})`;\n\t\t}\n\t}\n\n\t_injectHeaderNodes(ref: HTMLElement | null) {\n\t\tif (ref && !ref.hasChildNodes()) {\n\t\t\tref.replaceChildren(...this._popinHeaderNodes);\n\t\t}\n\t}\n\n\tget _headerCell() {\n\t\tconst row = this.parentElement as TableRow | null;\n\t\tconst table = row?.parentElement as Table | null;\n\t\tconst index = row?.cells?.indexOf(this) ?? -1;\n\n\t\treturn (index !== -1) ? table?.headerRow?.[0]?.cells?.[index] : null;\n\t}\n\n\tget _popinHeaderNodes() {\n\t\tconst nodes: Node[] = [];\n\t\tconst headerCell = this._headerCell;\n\t\tif (headerCell) {\n\t\t\tif (headerCell.popinText) {\n\t\t\t\tnodes.push(document.createTextNode(headerCell.popinText));\n\t\t\t} else {\n\t\t\t\tnodes.push(...headerCell.content.map(node => node.cloneNode(true)));\n\t\t\t}\n\t\t\tif (headerCell.action[0]) {\n\t\t\t\tnodes.push(headerCell.action[0].cloneNode(true));\n\t\t\t}\n\t\t}\n\t\treturn nodes;\n\t}\n\n\tget _i18nPopinColon() {\n\t\treturn TableCellBase.i18nBundle.getText(LABEL_COLON);\n\t}\n}\n\nTableCell.define();\n\nexport default TableCell;\n"]}

package/dist/TableCellBase.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type TableCellHorizontalAlign from "./types/TableCellHorizontalAlign.js";
 /**
@@ -16,7 +17,7 @@ declare abstract class TableCellBase extends UI5Element {
      *
      * @public
      */
-    content: Array<Node>;
+    content: DefaultSlot<Node>;
     /**
      * Determines the horizontal alignment of table cells.
      *
@@ -26,10 +27,9 @@ declare abstract class TableCellBase extends UI5Element {
     horizontalAlign?: `${TableCellHorizontalAlign}`;
     _popin: boolean;
     _popinHidden: boolean;
-    protected ariaRole: string;
+    ariaRole: string;
     static i18nBundle: I18nBundle;
     onEnterDOM(): void;
-    onBeforeRendering(): void;
     getFocusDomRef(): this;
     isTableCellBase(): boolean;
 }

package/dist/TableCellBase.js

@@ -5,8 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { customElement, slot, property, i18n, } from "@ui5/webcomponents-base/dist/decorators.js";
-import { toggleAttribute } from "./TableUtils.js";
+import { customElement, slotStrict as slot, property, i18n, } from "@ui5/webcomponents-base/dist/decorators.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
 /**
@@ -26,11 +25,9 @@ let TableCellBase = class TableCellBase extends UI5Element {
         this.ariaRole = "gridcell";
     }
     onEnterDOM() {
+        !this.role && this.setAttribute("role", this.ariaRole);
         this.toggleAttribute("ui5-table-cell-base", true);
     }
-    onBeforeRendering() {
-        toggleAttribute(this, "role", !this._popin, this.ariaRole);
-    }
     getFocusDomRef() {
         return this;
     }

package/dist/TableCellBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EACN,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,GACnC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAI1E;;;;;;;;GAQG;AAKH,IAAe,aAAa,GAA5B,MAAe,aAAc,SAAQ,UAAU;IAA/C;;QAmBC,WAAM,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAG,KAAK,CAAC;QAEX,aAAQ,GAAW,UAAU,CAAC;IAoBzC,CAAC;IAfA,UAAU;QACT,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,iBAAiB;QAChB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5D,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC;IACb,CAAC;IAED,eAAe;QACd,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AArCA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAChB;AASnB;IADF,QAAQ,EAAE;sDACwC;AAGnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDAC1B;AAKd;IADN,IAAI,CAAC,oBAAoB,CAAC;uCACG;AA3BhB,aAAa;IAJ3B,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,mBAAmB;KAC3B,CAAC;GACa,aAAa,CA4C3B;AAED,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, slot, property, i18n,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport { toggleAttribute } from \"./TableUtils.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TableCellBaseStyles from \"./generated/themes/TableCellBase.css.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type TableCellHorizontalAlign from \"./types/TableCellHorizontalAlign.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\trenderer: jsxRenderer,\n\tstyles: TableCellBaseStyles,\n})\nabstract class TableCellBase extends UI5Element {\n\t/**\n\t * Defines the content of the component.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\tcontent!: Array<Node>;\n\n\t/**\n\t * Determines the horizontal alignment of table cells.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n    horizontalAlign?: `${TableCellHorizontalAlign}`;\n\n\t@property({ type: Boolean })\n\t_popin = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popinHidden = false;\n\n\tprotected ariaRole: string = \"gridcell\";\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tthis.toggleAttribute(\"ui5-table-cell-base\", true);\n\t}\n\n\tonBeforeRendering() {\n\t\ttoggleAttribute(this, \"role\", !this._popin, this.ariaRole);\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\tisTableCellBase() {\n\t\treturn true;\n\t}\n}\n\nexport default TableCellBase;\n"]}
+{"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EACN,aAAa,EAAE,UAAU,IAAI,IAAI,EAAE,QAAQ,EAAE,IAAI,GACjD,MAAM,4CAA4C,CAAC;AACpD,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAI1E;;;;;;;;GAQG;AAKH,IAAe,aAAa,GAA5B,MAAe,aAAc,SAAQ,UAAU;IAA/C;;QAmBC,WAAM,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAG,KAAK,CAAC;QAErB,aAAQ,GAAW,UAAU,CAAC;IAiB/B,CAAC;IAZA,UAAU;QACT,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvD,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC;IACb,CAAC;IAED,eAAe;QACd,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AAlCA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CACV;AASzB;IADF,QAAQ,EAAE;sDACwC;AAGnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDAC1B;AAKd;IADN,IAAI,CAAC,oBAAoB,CAAC;uCACG;AA3BhB,aAAa;IAJ3B,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,mBAAmB;KAC3B,CAAC;GACa,aAAa,CAyC3B;AAED,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, slotStrict as slot, property, i18n,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport TableCellBaseStyles from \"./generated/themes/TableCellBase.css.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type TableCellHorizontalAlign from \"./types/TableCellHorizontalAlign.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\trenderer: jsxRenderer,\n\tstyles: TableCellBaseStyles,\n})\nabstract class TableCellBase extends UI5Element {\n\t/**\n\t * Defines the content of the component.\n\t *\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\tcontent!: DefaultSlot<Node>;\n\n\t/**\n\t * Determines the horizontal alignment of table cells.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n    horizontalAlign?: `${TableCellHorizontalAlign}`;\n\n\t@property({ type: Boolean })\n\t_popin = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popinHidden = false;\n\n\tariaRole: string = \"gridcell\";\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\t!this.role && this.setAttribute(\"role\", this.ariaRole);\n\t\tthis.toggleAttribute(\"ui5-table-cell-base\", true);\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\tisTableCellBase() {\n\t\treturn true;\n\t}\n}\n\nexport default TableCellBase;\n"]}

package/dist/TableCellTemplate.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 export default function TableCellTemplate() {
-    return (_jsxs(_Fragment, { children: [this._popin &&
-                _jsxs(_Fragment, { children: [_jsx("div", { class: "popin-header", ref: this.injectHeaderNodes.bind(this) }), _jsx("span", { class: "popin-colon", children: this._i18nPopinColon })] }), _jsx("slot", {})] }));
+    return (_jsx(_Fragment, { children: this._popin ?
+            _jsxs(_Fragment, { children: [_jsx("div", { id: "popin-header", ref: this._injectHeaderNodes.bind(this) }), _jsx("span", { id: "popin-colon", "aria-hidden": "true", children: this._i18nPopinColon }), _jsx("slot", { id: "popin-content" })] })
+            :
+                _jsx("slot", {}) }));
 }
 //# sourceMappingURL=TableCellTemplate.js.map

package/dist/TableCellTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellTemplate.js","sourceRoot":"","sources":["../src/TableCellTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACxC,OAAO,CACN,8BACG,IAAI,CAAC,MAAM;gBACZ,8BACC,cAAK,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAQ,EACxE,eAAM,KAAK,EAAC,aAAa,YAAE,IAAI,CAAC,eAAe,GAAQ,IACrD,EAEJ,gBAAa,IACX,CACH,CAAC;AACH,CAAC","sourcesContent":["import type TableCell from \"./TableCell.js\";\n\nexport default function TableCellTemplate(this: TableCell) {\n\treturn (\n\t\t<>\n\t\t\t{ this._popin &&\n\t\t\t\t<>\n\t\t\t\t\t<div class=\"popin-header\" ref={this.injectHeaderNodes.bind(this)}></div>\n\t\t\t\t\t<span class=\"popin-colon\">{this._i18nPopinColon}</span>\n\t\t\t\t</>\n\t\t\t}\n\t\t\t<slot></slot>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"TableCellTemplate.js","sourceRoot":"","sources":["../src/TableCellTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACxC,OAAO,CACN,4BACG,IAAI,CAAC,MAAM,CAAC,CAAC;YACd,8BACC,cAAK,EAAE,EAAC,cAAc,EAAC,GAAG,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAQ,EACtE,eAAM,EAAE,EAAC,aAAa,iBAAa,MAAM,YAAE,IAAI,CAAC,eAAe,GAAQ,EACvE,eAAM,EAAE,EAAC,eAAe,GAAQ,IAC9B;YACH,CAAC;gBACD,gBAAa,GAEZ,CACH,CAAC;AACH,CAAC","sourcesContent":["import type TableCell from \"./TableCell.js\";\n\nexport default function TableCellTemplate(this: TableCell) {\n\treturn (\n\t\t<>\n\t\t\t{ this._popin ?\n\t\t\t\t<>\n\t\t\t\t\t<div id=\"popin-header\" ref={this._injectHeaderNodes.bind(this)}></div>\n\t\t\t\t\t<span id=\"popin-colon\" aria-hidden=\"true\">{this._i18nPopinColon}</span>\n\t\t\t\t\t<slot id=\"popin-content\"></slot>\n\t\t\t\t</>\n\t\t\t\t:\n\t\t\t\t<slot></slot>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/TableCustomAnnouncement.d.ts

@@ -0,0 +1,24 @@
+import TableExtension from "./TableExtension.js";
+import type Table from "./Table.js";
+import type TableRow from "./TableRow.js";
+import type TableCell from "./TableCell.js";
+import type TableHeaderRow from "./TableHeaderRow.js";
+/**
+ * Handles the custom announcement for the ui5-table.
+ *
+ * @class
+ * @private
+ */
+declare class TableCustomAnnouncement extends TableExtension {
+    _table: Table;
+    _tableAttributes: string[];
+    constructor(table: Table);
+    private get i18nBundle();
+    _onfocusin(e: FocusEvent, eventOrigin: HTMLElement): void;
+    _onfocusout(e: FocusEvent, eventOrigin: HTMLElement): void;
+    _handleTableElementFocusin(element: HTMLElement): void;
+    _handleTableHeaderRowFocusin(headerRow: TableHeaderRow): void;
+    _handleTableRowFocusin(row: TableRow): void;
+    _handleTableCellFocusin(cell: TableCell): void;
+}
+export default TableCustomAnnouncement;

package/dist/TableCustomAnnouncement.js

@@ -0,0 +1,106 @@
+import TableExtension from "./TableExtension.js";
+import { getCustomAnnouncement, applyCustomAnnouncement } from "./CustomAnnouncement.js";
+import { TABLE_ROW, TABLE_ROW_INDEX, TABLE_ROW_SELECTED, TABLE_ROW_ACTIVE, TABLE_ROW_NAVIGABLE, TABLE_ROW_NAVIGATED, TABLE_COLUMN_HEADER_ROW, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * Handles the custom announcement for the ui5-table.
+ *
+ * @class
+ * @private
+ */
+class TableCustomAnnouncement extends TableExtension {
+    constructor(table) {
+        super();
+        this._tableAttributes = ["ui5-table-header-row", "ui5-table-header-cell", "ui5-table-row", "ui5-table-cell"];
+        this._table = table;
+    }
+    get i18nBundle() {
+        return this._table.constructor.i18nBundle;
+    }
+    _onfocusin(e, eventOrigin) {
+        const tableAttribute = this._tableAttributes.find(attr => eventOrigin.hasAttribute(attr));
+        if (!tableAttribute) {
+            return;
+        }
+        const tableElementName = tableAttribute.replace("ui5-table", "Table").replace(/-([a-z])/g, g => g[1].toUpperCase());
+        const eventHandlerName = `_handle${tableElementName}Focusin`;
+        const eventHandler = this[eventHandlerName];
+        if (typeof eventHandler === "function") {
+            eventHandler.call(this, eventOrigin, e);
+        }
+        else {
+            this._handleTableElementFocusin(eventOrigin);
+        }
+    }
+    _onfocusout(e, eventOrigin) {
+        const isTableElement = this._tableAttributes.some(attr => eventOrigin.hasAttribute(attr));
+        isTableElement && applyCustomAnnouncement(eventOrigin);
+    }
+    _handleTableElementFocusin(element) {
+        const description = getCustomAnnouncement(element);
+        applyCustomAnnouncement(element, description);
+    }
+    _handleTableHeaderRowFocusin(headerRow) {
+        const descriptions = [
+            this.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW),
+        ];
+        if (headerRow._hasSelector) {
+            descriptions.push(headerRow._isMultiSelect ? headerRow._selectionCellAriaDescription : headerRow._i18nSelection);
+        }
+        headerRow._visibleCells.forEach(headerCell => {
+            const cellDescription = getCustomAnnouncement(headerCell, { lessDetails: true });
+            descriptions.push(cellDescription);
+        });
+        if (headerRow._rowActionCount > 0) {
+            descriptions.push(headerRow._i18nRowActions);
+        }
+        applyCustomAnnouncement(headerRow, descriptions);
+    }
+    _handleTableRowFocusin(row) {
+        if (!row._table) {
+            return;
+        }
+        const descriptions = [
+            this.i18nBundle.getText(TABLE_ROW),
+            this.i18nBundle.getText(TABLE_ROW_INDEX, row.ariaRowIndex, this._table._ariaRowCount),
+        ];
+        if (row._isSelected) {
+            descriptions.push(this.i18nBundle.getText(TABLE_ROW_SELECTED));
+        }
+        if (row._isNavigable) {
+            descriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGABLE));
+        }
+        else if (row.interactive) {
+            descriptions.push(this.i18nBundle.getText(TABLE_ROW_ACTIVE));
+        }
+        const cells = [...row._visibleCells, ...row._popinCells];
+        cells.flatMap(cell => {
+            return cell._popin ? [cell._popinHeader, cell._popinContent] : [cell._headerCell, cell];
+        }).forEach(node => {
+            const nodeDescription = getCustomAnnouncement(node, { lessDetails: true });
+            descriptions.push(nodeDescription);
+        });
+        if (row._availableActionsCount > 0) {
+            descriptions.push(row._actionCellAccText);
+        }
+        if (row._renderNavigated && row.navigated) {
+            descriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGATED));
+        }
+        applyCustomAnnouncement(row, descriptions);
+    }
+    _handleTableCellFocusin(cell) {
+        if (cell.hasAttribute("data-ui5-table-popin-cell")) {
+            const popinCells = cell.getDomRef().assignedNodes({ flatten: true });
+            const descriptions = popinCells.flatMap(popinCell => {
+                const headerDescription = getCustomAnnouncement(popinCell._popinHeader);
+                const contentDescription = getCustomAnnouncement(popinCell._popinContent);
+                return [headerDescription, contentDescription];
+            });
+            applyCustomAnnouncement(cell, descriptions);
+        }
+        else {
+            this._handleTableElementFocusin(cell);
+        }
+    }
+}
+export default TableCustomAnnouncement;
+//# sourceMappingURL=TableCustomAnnouncement.js.map

package/dist/TableCustomAnnouncement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCustomAnnouncement.js","sourceRoot":"","sources":["../src/TableCustomAnnouncement.ts"],"names":[],"mappings":"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","sourcesContent":["import TableExtension from \"./TableExtension.js\";\nimport { getCustomAnnouncement, applyCustomAnnouncement } from \"./CustomAnnouncement.js\";\nimport type Table from \"./Table.js\";\nimport type TableRow from \"./TableRow.js\";\nimport type TableCell from \"./TableCell.js\";\nimport type TableHeaderRow from \"./TableHeaderRow.js\";\nimport {\n\tTABLE_ROW,\n\tTABLE_ROW_INDEX,\n\tTABLE_ROW_SELECTED,\n\tTABLE_ROW_ACTIVE,\n\tTABLE_ROW_NAVIGABLE,\n\tTABLE_ROW_NAVIGATED,\n\tTABLE_COLUMN_HEADER_ROW,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * Handles the custom announcement for the ui5-table.\n *\n * @class\n * @private\n */\nclass TableCustomAnnouncement extends TableExtension {\n\t_table: Table;\n\t_tableAttributes = [\"ui5-table-header-row\", \"ui5-table-header-cell\", \"ui5-table-row\", \"ui5-table-cell\"];\n\n\tconstructor(table: Table) {\n\t\tsuper();\n\t\tthis._table = table;\n\t}\n\n\tprivate get i18nBundle() {\n\t\treturn (this._table.constructor as typeof Table).i18nBundle;\n\t}\n\n\t_onfocusin(e: FocusEvent, eventOrigin: HTMLElement) {\n\t\tconst tableAttribute = this._tableAttributes.find(attr => eventOrigin.hasAttribute(attr));\n\t\tif (!tableAttribute) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst tableElementName = tableAttribute.replace(\"ui5-table\", \"Table\").replace(/-([a-z])/g, g => g[1].toUpperCase());\n\t\tconst eventHandlerName = `_handle${tableElementName}Focusin` as keyof TableCustomAnnouncement;\n\t\tconst eventHandler = this[eventHandlerName] as (target: HTMLElement, e?: FocusEvent) => void;\n\t\tif (typeof eventHandler === \"function\") {\n\t\t\teventHandler.call(this, eventOrigin, e);\n\t\t} else {\n\t\t\tthis._handleTableElementFocusin(eventOrigin);\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent, eventOrigin: HTMLElement) {\n\t\tconst isTableElement = this._tableAttributes.some(attr => eventOrigin.hasAttribute(attr));\n\t\tisTableElement && applyCustomAnnouncement(eventOrigin);\n\t}\n\n\t_handleTableElementFocusin(element: HTMLElement) {\n\t\tconst description = getCustomAnnouncement(element);\n\t\tapplyCustomAnnouncement(element, description);\n\t}\n\n\t_handleTableHeaderRowFocusin(headerRow: TableHeaderRow) {\n\t\tconst descriptions = [\n\t\t\tthis.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW),\n\t\t];\n\n\t\tif (headerRow._hasSelector) {\n\t\t\tdescriptions.push(headerRow._isMultiSelect ? headerRow._selectionCellAriaDescription! : headerRow._i18nSelection);\n\t\t}\n\n\t\theaderRow._visibleCells.forEach(headerCell => {\n\t\t\tconst cellDescription = getCustomAnnouncement(headerCell, { lessDetails: true });\n\t\t\tdescriptions.push(cellDescription);\n\t\t});\n\n\t\tif (headerRow._rowActionCount > 0) {\n\t\t\tdescriptions.push(headerRow._i18nRowActions);\n\t\t}\n\n\t\tapplyCustomAnnouncement(headerRow, descriptions);\n\t}\n\n\t_handleTableRowFocusin(row: TableRow) {\n\t\tif (!row._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst descriptions = [\n\t\t\tthis.i18nBundle.getText(TABLE_ROW),\n\t\t\tthis.i18nBundle.getText(TABLE_ROW_INDEX, row.ariaRowIndex!, this._table._ariaRowCount),\n\t\t];\n\n\t\tif (row._isSelected) {\n\t\t\tdescriptions.push(this.i18nBundle.getText(TABLE_ROW_SELECTED));\n\t\t}\n\n\t\tif (row._isNavigable) {\n\t\t\tdescriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGABLE));\n\t\t} else if (row.interactive) {\n\t\t\tdescriptions.push(this.i18nBundle.getText(TABLE_ROW_ACTIVE));\n\t\t}\n\n\t\tconst cells = [...row._visibleCells, ...row._popinCells];\n\t\tcells.flatMap(cell => {\n\t\t\treturn cell._popin ? [cell._popinHeader!, cell._popinContent!] : [cell._headerCell!, cell];\n\t\t}).forEach(node => {\n\t\t\tconst nodeDescription = getCustomAnnouncement(node, { lessDetails: true });\n\t\t\tdescriptions.push(nodeDescription);\n\t\t});\n\n\t\tif (row._availableActionsCount > 0) {\n\t\t\tdescriptions.push(row._actionCellAccText!);\n\t\t}\n\n\t\tif (row._renderNavigated && row.navigated) {\n\t\t\tdescriptions.push(this.i18nBundle.getText(TABLE_ROW_NAVIGATED));\n\t\t}\n\n\t\tapplyCustomAnnouncement(row, descriptions);\n\t}\n\n\t_handleTableCellFocusin(cell: TableCell) {\n\t\tif (cell.hasAttribute(\"data-ui5-table-popin-cell\")) {\n\t\t\tconst popinCells = (cell.getDomRef() as HTMLSlotElement).assignedNodes({ flatten: true }) as TableCell[];\n\t\t\tconst descriptions = popinCells.flatMap(popinCell => {\n\t\t\t\tconst headerDescription = getCustomAnnouncement(popinCell._popinHeader!);\n\t\t\t\tconst contentDescription = getCustomAnnouncement(popinCell._popinContent!);\n\t\t\t\treturn [headerDescription, contentDescription];\n\t\t\t});\n\t\t\tapplyCustomAnnouncement(cell, descriptions);\n\t\t} else {\n\t\t\tthis._handleTableElementFocusin(cell);\n\t\t}\n\t}\n}\n\nexport default TableCustomAnnouncement;\n"]}

package/dist/TableDragAndDrop.d.ts

@@ -3,6 +3,8 @@ import type Table from "./Table.js";
 export default class TableDragAndDrop extends TableExtension {
     _table: Table;
     constructor(table: Table);
+    _ondragstart(e: DragEvent): void;
+    _ondragend(): void;
     _ondragenter(e: DragEvent): void;
     _ondragleave(e: DragEvent): void;
     _ondragover(e: DragEvent): void;

package/dist/TableDragAndDrop.js

@@ -8,7 +8,12 @@ export default class TableDragAndDrop extends TableExtension {
     constructor(table) {
         super();
         this._table = table;
-        DragRegistry.subscribe(this._table); // TODO: Where unsubscribe?
+    }
+    _ondragstart(e) {
+        DragRegistry.setDraggedElement(e.target, e);
+    }
+    _ondragend() {
+        DragRegistry.clearDraggedElement();
     }
     _ondragenter(e) {
         e.preventDefault();

package/dist/TableDragAndDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableDragAndDrop.js","sourceRoot":"","sources":["../src/TableDragAndDrop.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,+DAA+D,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sEAAsE,CAAC;AAC3G,OAAO,WAAW,MAAM,mDAAmD,CAAC;AAC5E,OAAO,cAAc,MAAM,iEAAiE,CAAC;AAC7F,OAAO,UAAU,MAAM,6DAA6D,CAAC;AACrF,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAGjD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,cAAc;IAG3D,YAAY,KAAY;QACvB,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B;IACjE,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;IACpB,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,IAAI,CAAC,CAAC,aAAa,YAAY,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1F,OAAO;QACR,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;IACrD,CAAC;IAED,WAAW,CAAC,CAAY;QACvB,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE,CAAC;YACxC,OAAO;QACR,CAAC;QAED,MAAM,eAAe,GAAG,mBAAmB,CAC1C,IAAI,CAAC,MAAM,CAAC,IAAI,EAChB,CAAC,CAAC,OAAO,EACT,WAAW,CAAC,QAAQ,CACpB,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;YACpD,OAAO;QACR,CAAC;QAED,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,eAAe,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACzJ,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,eAAe,CAAC;QAC/D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,GAAG,SAAS,CAAC;IACpD,CAAC;IAED,OAAO,CAAC,CAAY;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC;YAChG,OAAO;QACR,CAAC;QAED,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACjH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;IACrD,CAAC;CACD","sourcesContent":["import DragRegistry from \"@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js\";\nimport { findClosestPosition } from \"@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js\";\nimport Orientation from \"@ui5/webcomponents-base/dist/types/Orientation.js\";\nimport handleDragOver from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js\";\nimport handleDrop from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js\";\nimport TableExtension from \"./TableExtension.js\";\nimport type Table from \"./Table.js\";\n\nexport default class TableDragAndDrop extends TableExtension {\n\t_table: Table;\n\n\tconstructor(table: Table) {\n\t\tsuper();\n\t\tthis._table = table;\n\t\tDragRegistry.subscribe(this._table); // TODO: Where unsubscribe?\n\t}\n\n\t_ondragenter(e: DragEvent) {\n\t\te.preventDefault();\n\t}\n\n\t_ondragleave(e: DragEvent) {\n\t\tif (e.relatedTarget instanceof Node && this._table.shadowRoot!.contains(e.relatedTarget)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t}\n\n\t_ondragover(e: DragEvent) {\n\t\tif (!(e.target instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestPosition = findClosestPosition(\n\t\t\tthis._table.rows,\n\t\t\te.clientY,\n\t\t\tOrientation.Vertical,\n\t\t);\n\n\t\tif (!closestPosition) {\n\t\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t\t\treturn;\n\t\t}\n\n\t\tconst { targetReference, placement } = handleDragOver(e, this._table, closestPosition, closestPosition.element, { crossDnD: true, originalEvent: true });\n\t\tthis._table.dropIndicatorDOM.targetReference = targetReference;\n\t\tthis._table.dropIndicatorDOM.placement = placement;\n\t}\n\n\t_ondrop(e: DragEvent) {\n\t\tif (!this._table.dropIndicatorDOM?.targetReference || !this._table.dropIndicatorDOM?.placement) {\n\t\t\treturn;\n\t\t}\n\n\t\thandleDrop(e, this._table, this._table.dropIndicatorDOM.targetReference, this._table.dropIndicatorDOM.placement);\n\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t}\n}\n"]}
+{"version":3,"file":"TableDragAndDrop.js","sourceRoot":"","sources":["../src/TableDragAndDrop.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,+DAA+D,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sEAAsE,CAAC;AAC3G,OAAO,WAAW,MAAM,mDAAmD,CAAC;AAC5E,OAAO,cAAc,MAAM,iEAAiE,CAAC;AAC7F,OAAO,UAAU,MAAM,6DAA6D,CAAC;AACrF,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAGjD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,cAAc;IAG3D,YAAY,KAAY;QACvB,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED,UAAU;QACT,YAAY,CAAC,mBAAmB,EAAE,CAAC;IACpC,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,CAAC,CAAC,cAAc,EAAE,CAAC;IACpB,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,IAAI,CAAC,CAAC,aAAa,YAAY,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1F,OAAO;QACR,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;IACrD,CAAC;IAED,WAAW,CAAC,CAAY;QACvB,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE,CAAC;YACxC,OAAO;QACR,CAAC;QAED,MAAM,eAAe,GAAG,mBAAmB,CAC1C,IAAI,CAAC,MAAM,CAAC,IAAI,EAChB,CAAC,CAAC,OAAO,EACT,WAAW,CAAC,QAAQ,CACpB,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;YACpD,OAAO;QACR,CAAC;QAED,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,eAAe,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QACzJ,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,eAAe,CAAC;QAC/D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,GAAG,SAAS,CAAC;IACpD,CAAC;IAED,OAAO,CAAC,CAAY;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,eAAe,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,EAAE,CAAC;YAChG,OAAO;QACR,CAAC;QAED,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QACjH,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;IACrD,CAAC;CACD","sourcesContent":["import DragRegistry from \"@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js\";\nimport { findClosestPosition } from \"@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js\";\nimport Orientation from \"@ui5/webcomponents-base/dist/types/Orientation.js\";\nimport handleDragOver from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDragOver.js\";\nimport handleDrop from \"@ui5/webcomponents-base/dist/util/dragAndDrop/handleDrop.js\";\nimport TableExtension from \"./TableExtension.js\";\nimport type Table from \"./Table.js\";\n\nexport default class TableDragAndDrop extends TableExtension {\n\t_table: Table;\n\n\tconstructor(table: Table) {\n\t\tsuper();\n\t\tthis._table = table;\n\t}\n\n\t_ondragstart(e: DragEvent) {\n\t\tDragRegistry.setDraggedElement(e.target as HTMLElement, e);\n\t}\n\n\t_ondragend() {\n\t\tDragRegistry.clearDraggedElement();\n\t}\n\n\t_ondragenter(e: DragEvent) {\n\t\te.preventDefault();\n\t}\n\n\t_ondragleave(e: DragEvent) {\n\t\tif (e.relatedTarget instanceof Node && this._table.shadowRoot!.contains(e.relatedTarget)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t}\n\n\t_ondragover(e: DragEvent) {\n\t\tif (!(e.target instanceof HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst closestPosition = findClosestPosition(\n\t\t\tthis._table.rows,\n\t\t\te.clientY,\n\t\t\tOrientation.Vertical,\n\t\t);\n\n\t\tif (!closestPosition) {\n\t\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t\t\treturn;\n\t\t}\n\n\t\tconst { targetReference, placement } = handleDragOver(e, this._table, closestPosition, closestPosition.element, { crossDnD: true, originalEvent: true });\n\t\tthis._table.dropIndicatorDOM.targetReference = targetReference;\n\t\tthis._table.dropIndicatorDOM.placement = placement;\n\t}\n\n\t_ondrop(e: DragEvent) {\n\t\tif (!this._table.dropIndicatorDOM?.targetReference || !this._table.dropIndicatorDOM?.placement) {\n\t\t\treturn;\n\t\t}\n\n\t\thandleDrop(e, this._table, this._table.dropIndicatorDOM.targetReference, this._table.dropIndicatorDOM.placement);\n\t\tthis._table.dropIndicatorDOM.targetReference = null;\n\t}\n}\n"]}

package/dist/TableGrowing.d.ts

@@ -39,7 +39,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
  * @extends UI5Element
  * @since 2.0.0
  * @public
- * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
 declare class TableGrowing extends UI5Element implements ITableGrowing {
     eventDetails: {

package/dist/TableGrowing.js

@@ -52,7 +52,6 @@ import { findVerticalScrollContainer } from "./TableUtils.js";
  * @extends UI5Element
  * @since 2.0.0
  * @public
- * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
 let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
     constructor() {

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 {\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"]}
+{"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/TableHeaderCell.d.ts

@@ -1,6 +1,7 @@
 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
  *
@@ -19,7 +20,6 @@ import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
  * @extends TableCellBase
  * @since 2.0.0
  * @public
- * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
 declare class TableHeaderCell extends TableCellBase {
     /**
@@ -97,10 +97,14 @@ declare class TableHeaderCell extends TableCellBase {
      * @public
      * @since 2.8.0
      */
-    action: Array<TableHeaderCellActionBase>;
-    _popin: boolean;
-    protected ariaRole: string;
+    action: Slot<TableHeaderCellActionBase>;
+    _defaultSlot: HTMLSlotElement;
+    _actionSlot: HTMLSlotElement;
+    ariaRole: string;
     _popinWidth: number;
     onBeforeRendering(): void;
+    get accessibilityInfo(): {
+        children: HTMLSlotElement[];
+    };
 }
 export default TableHeaderCell;

package/dist/TableHeaderCell.js

@@ -4,12 +4,13 @@ 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, property, slot } from "@ui5/webcomponents-base/dist/decorators.js";
+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
  *
@@ -28,7 +29,6 @@ import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
  * @extends TableCellBase
  * @since 2.0.0
  * @public
- * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
  */
 let TableHeaderCell = class TableHeaderCell extends TableCellBase {
     constructor() {
@@ -63,18 +63,20 @@ let TableHeaderCell = class TableHeaderCell extends TableCellBase {
          * @public
          */
         this.popinHidden = false;
-        this._popin = false;
         this.ariaRole = "columnheader";
         this._popinWidth = 0;
     }
     onBeforeRendering() {
         super.onBeforeRendering();
-        if (this._individualSlot) {
-            // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
-            this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
-        }
+        this.style.textAlign = this.horizontalAlign || "";
+        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()
@@ -98,8 +100,11 @@ __decorate([
     slot()
 ], TableHeaderCell.prototype, "action", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
-], TableHeaderCell.prototype, "_popin", void 0);
+    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",

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"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"]}
+{"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;IAczB,CAAC;IAZA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC;QAClD,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;AAlGA;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,CAgHpB;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.textAlign = this.horizontalAlign || \"\";\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

@@ -16,7 +16,6 @@ import "@ui5/webcomponents-icons/dist/ai.js";
  * @extends TableHeaderCellActionBase
  * @since 2.8.0
  * @public
- * @experimental
  */
 declare class TableHeaderCellActionAI extends TableHeaderCellActionBase {
     static i18nBundle: I18nBundle;