@sapudex/web-components 2.60.0 → 2.62.0

package/dist/SideNavigationSubItem.js

@@ -6,9 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import { isLeft, isRight, isMinus, isPlus, } from "@ui5/webcomponents-base/dist/Keys.js";
 import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
 // Styles
 import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
+import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
 /**
  * @class
  *
@@ -27,12 +32,111 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
  * @public
  */
 let UDExSideNavigationSubItem = class UDExSideNavigationSubItem extends SideNavigationSubItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the sub-item is expanded (shows level-3 children).
+         *
+         * @default false
+         * @public
+         */
+        this.expanded = false;
+    }
+    get hasSubItems() {
+        return this.subItems.length > 0;
+    }
+    get focusableItems() {
+        if (this.hasSubItems && this.expanded) {
+            return [this, ...this.subItems];
+        }
+        return [this];
+    }
+    get selectableItems() {
+        // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's
+        // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.
+        return this.hasSubItems ? [this, ...this.subItems] : [this];
+    }
+    get allItems() {
+        // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires
+        // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's
+        // click handler has no `sideNavigation` reference and cannot fire selection-change.
+        return this.hasSubItems ? [this, ...this.subItems] : [this];
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.subItems.forEach(subItem => {
+            if (!subItem.hasAttribute("nested")) {
+                subItem.setAttribute("nested", "");
+            }
+        });
+    }
+    get _subGroupId() {
+        return this.hasSubItems ? `${this._id}-group` : undefined;
+    }
+    get _subExpanded() {
+        return this.hasSubItems ? this.expanded : undefined;
+    }
+    _onToggleClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.expanded = !this.expanded;
+    }
+    _onkeydown(e) {
+        if (this.hasSubItems && !this.sideNavCollapsed) {
+            const isRTL = this.effectiveDir === "rtl";
+            if (isLeft(e)) {
+                e.preventDefault();
+                this.expanded = isRTL;
+                return;
+            }
+            if (isRight(e)) {
+                e.preventDefault();
+                this.expanded = !isRTL;
+                return;
+            }
+            if (isMinus(e)) {
+                e.preventDefault();
+                this.expanded = false;
+                return;
+            }
+            if (isPlus(e)) {
+                e.preventDefault();
+                this.expanded = true;
+                return;
+            }
+        }
+        // Level-3 leaves fall through to the base, which activates on Enter and fires
+        // selection-change — the same behaviour as level-1 and level-2 leaves.
+        super._onkeydown(e);
+    }
+    _onclick(e) {
+        // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —
+        // a parent with children must not have an href. A leaf (including a level-3 leaf) falls
+        // through to the base handler, which fires selection-change and navigates via its href,
+        // exactly like level-1 and level-2 leaves.
+        if (this.hasSubItems) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.expanded = !this.expanded;
+        }
+        else {
+            super._onclick(e);
+        }
+    }
 };
+__decorate([
+    property({ type: Boolean })
+], UDExSideNavigationSubItem.prototype, "expanded", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], UDExSideNavigationSubItem.prototype, "subItems", void 0);
 UDExSideNavigationSubItem = __decorate([
     customElement({
         tag: "udex-side-navigation-sub-item",
         renderer: jsxRenderer,
-        styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
+        template: SideNavigationSubItemTemplate,
+        styles: [SideNavigationSubItem.styles, SideNavigationItemCss, SideNavigationSubItemCss],
+        dependencies: [UDExSideNavigationSubItem],
     })
 ], UDExSideNavigationSubItem);
 UDExSideNavigationSubItem.define();

package/dist/SideNavigationSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,qBAAqB,MAAM,wDAAwD,CAAC;AAE3F,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,qBAAqB;CAAG,CAAA;AAA1D,yBAAyB;IAN9B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC;KACjE,CAAC;GAEI,yBAAyB,CAAiC;AAEhE,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}
+{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n  isLeft,\n  isRight,\n  isMinus,\n  isPlus,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SideNavigationSubItem from \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";\nimport SideNavigationSubItemTemplate from \"./SideNavigationSubItemTemplate.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-side-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationSubItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-sub-item\",\n  renderer: jsxRenderer,\n  template: SideNavigationSubItemTemplate,\n  styles: [SideNavigationSubItem.styles, SideNavigationItemCss, SideNavigationSubItemCss],\n  dependencies: [UDExSideNavigationSubItem],\n})\n\nclass UDExSideNavigationSubItem extends SideNavigationSubItem {\n  /**\n   * Defines whether the sub-item is expanded (shows level-3 children).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Defines the level-3 sub-items slotted inside this sub-item.\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    subItems!: DefaultSlot<UDExSideNavigationSubItem>;\n\n  get hasSubItems() {\n    return this.subItems.length > 0;\n  }\n\n  get focusableItems(): Array<UDExSideNavigationSubItem> {\n    if (this.hasSubItems && this.expanded) {\n      return [this, ...this.subItems];\n    }\n    return [this];\n  }\n\n  get selectableItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this level-2 sub-item plus its level-3 children so the Side Navigation's\n    // selection registry (built by UDExSideNavigationItem.selectableItems) reaches level 3.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  get allItems(): Array<UDExSideNavigationSubItem> {\n    // Expose this sub-item plus its level-3 children so SideNavigation._getAllItems wires\n    // `sideNavigation` and collapsed state onto level-3 items. Without it, a level-3 leaf's\n    // click handler has no `sideNavigation` reference and cannot fire selection-change.\n    return this.hasSubItems ? [this, ...this.subItems] : [this];\n  }\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.subItems.forEach(subItem => {\n      if (!subItem.hasAttribute(\"nested\")) { subItem.setAttribute(\"nested\", \"\"); }\n    });\n  }\n\n  get _subGroupId(): string | undefined {\n    return this.hasSubItems ? `${this._id}-group` : undefined;\n  }\n\n  get _subExpanded(): boolean | undefined {\n    return this.hasSubItems ? this.expanded : undefined;\n  }\n\n  _onToggleClick(e: Event) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.expanded = !this.expanded;\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      const isRTL = this.effectiveDir === \"rtl\";\n      if (isLeft(e)) {\n        e.preventDefault();\n        this.expanded = isRTL;\n        return;\n      }\n      if (isRight(e)) {\n        e.preventDefault();\n        this.expanded = !isRTL;\n        return;\n      }\n      if (isMinus(e)) {\n        e.preventDefault();\n        this.expanded = false;\n        return;\n      }\n      if (isPlus(e)) {\n        e.preventDefault();\n        this.expanded = true;\n        return;\n      }\n    }\n    // Level-3 leaves fall through to the base, which activates on Enter and fires\n    // selection-change — the same behaviour as level-1 and level-2 leaves.\n    super._onkeydown(e);\n  }\n\n  _onclick(e: MouseEvent) {\n    // A group sub-item (one with sub-items) toggles expand/collapse and never navigates —\n    // a parent with children must not have an href. A leaf (including a level-3 leaf) falls\n    // through to the base handler, which fires selection-change and navigates via its href,\n    // exactly like level-1 and level-2 leaves.\n    if (this.hasSubItems) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n    } else {\n      super._onclick(e);\n    }\n  }\n}\n\nUDExSideNavigationSubItem.define();\n\nexport default UDExSideNavigationSubItem;\n"]}

package/dist/SideNavigationSubItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+export default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/SideNavigationSubItemTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+import navRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+export default function SideNavigationSubItemTemplate() {
+    const EffectiveTag = this._effectiveTag;
+    return (_jsxs("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: [_jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, "aria-label": this.accessibleName || undefined, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, "aria-describedby": this._describedBy, "aria-expanded": this._subExpanded, "aria-owns": this._subGroupId, children: [this.icon && _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", id: this._textId, children: this.text }), this.hasTag && (_jsx("div", { id: this._tagId, class: "ui5-sn-item-tag-slot", children: _jsx("slot", { name: "tag" }) })), this.hasSubItems && (_jsx("div", { class: "ui5-sn-item-toggle-icon-wrap", children: _jsx(Icon, { class: "ui5-sn-item-toggle-icon", name: navRightArrow, onClick: (e) => this._onToggleClick(e) }) })), this.isExternalLink && _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] }), this.hasSubItems && (_jsx("ul", { id: this._subGroupId, class: "ui5-sn-item-ul", role: "group", children: _jsx("slot", {}) }))] }));
+}
+//# sourceMappingURL=SideNavigationSubItemTemplate.js.map

package/dist/SideNavigationSubItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AACtE,OAAO,aAAa,MAAM,yDAAyD,CAAC;AAGpF,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACnD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;IACxC,OAAO,CACL,cAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,aAClD,MAAC,YAAY,IACX,EAAE,EAAE,IAAI,CAAC,GAAG,8BAEZ,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EACxD,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,kBAClB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,cAAc,IAAI,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,QAAQ,mBACL,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,mBACL,IAAI,CAAC,aAAa,sBACf,IAAI,CAAC,YAAY,mBACpB,IAAI,CAAC,YAAY,eACrB,IAAI,CAAC,WAAW,aAE1B,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EAChE,cAAK,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,IAAI,GAAO,EAChE,IAAI,CAAC,MAAM,IAAI,CACd,cAAK,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,sBAAsB,YAChD,eAAM,IAAI,EAAC,KAAK,GAAG,GACf,CACP,EACA,IAAI,CAAC,WAAW,IAAI,CACnB,cAAK,KAAK,EAAC,8BAA8B,YACvC,KAAC,IAAI,IACH,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC7C,GACE,CACP,EACA,IAAI,CAAC,cAAc,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAE,UAAU,GAAI,IAC5E,EACd,IAAI,CAAC,WAAW,IAAI,CACnB,aAAI,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,YAC3D,gBAAQ,GACL,CACN,IACE,CACN,CAAC;AACJ,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport navRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationSubItemTemplate(this: UDExSideNavigationSubItem) {\n  const EffectiveTag = this._effectiveTag;\n  return (\n    <li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n      <EffectiveTag\n        id={this._id}\n        data-sap-focus-ref\n        class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n        role={this.ariaRole}\n        onKeyDown={this._onkeydown}\n        onKeyUp={this._onkeyup}\n        onClick={this._onclick}\n        onFocusIn={this._onfocusin}\n        tabIndex={this.effectiveTabIndex}\n        aria-current={this._ariaCurrent}\n        aria-selected={this._ariaSelected}\n        aria-label={this.accessibleName || undefined}\n        title={this._tooltip}\n        aria-disabled={this.effectiveDisabled}\n        href={this._href}\n        target={this._target}\n        aria-haspopup={this._ariaHasPopup}\n        aria-describedby={this._describedBy}\n        aria-expanded={this._subExpanded}\n        aria-owns={this._subGroupId}\n      >\n        {this.icon && <Icon class=\"ui5-sn-item-icon\" name={this.icon} />}\n        <div class=\"ui5-sn-item-text\" id={this._textId}>{this.text}</div>\n        {this.hasTag && (\n          <div id={this._tagId} class=\"ui5-sn-item-tag-slot\">\n            <slot name=\"tag\" />\n          </div>\n        )}\n        {this.hasSubItems && (\n          <div class=\"ui5-sn-item-toggle-icon-wrap\">\n            <Icon\n              class=\"ui5-sn-item-toggle-icon\"\n              name={navRightArrow}\n              onClick={(e: Event) => this._onToggleClick(e)}\n            />\n          </div>\n        )}\n        {this.isExternalLink && <Icon class=\"ui5-sn-item-external-link-icon\" name={arrowRight} />}\n      </EffectiveTag>\n      {this.hasSubItems && (\n        <ul id={this._subGroupId} class=\"ui5-sn-item-ul\" role=\"group\">\n          <slot />\n        </ul>\n      )}\n    </li>\n  );\n}\n"]}

package/dist/Table.js

@@ -15,10 +15,10 @@ import UDExTableGroupRow from "./TableGroupRow.js";
 import { TABLE_NO_DATA_FOUND } from "./generated/i18n/i18n-defaults.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import TableTemplate from "./TableTemplate.js";
+import translate from "./utils/translate.js";
 // Styles
 import TableCss from "./generated/themes/Table.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
-import translate from "./utils/translate.js";
 /**
  * @class
  *

package/dist/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport {\n  isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport type UDExTableRow from \"./TableRow.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport type UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TableTemplate from \"./TableTemplate.js\";\n\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\nimport translate from \"./utils/translate.js\";\n\nexport type TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\nexport type KeyBoardItem = {\n  id: string;\n  group?: boolean;\n  elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-table\",\n  renderer: jsxRenderer,\n  styles: [TableCss, getEffectiveScrollbarStyle()],\n  template: TableTemplate,\n})\n\nclass UDExTable extends UI5Element {\n  /**\n   * Defines the height of the table.\n   * Allows control over the maximum height.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    maxHeight!: string;\n\n  /**\n   * Defines the accessible ARIA name of the table.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the heading of the table.\n   * @public\n   */\n  @property({ type: String })\n    heading!: string;\n\n  /**\n   * Defines the text to be displayed when there are no rows in the component.\n   * @public\n   */\n  @property()\n    noDataText?: string;\n\n  /**\n   * Defines if the loading indicator should be shown.\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    loading!: boolean;\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n   * @default 1000\n   * @public\n   */\n  @property({ type: Number })\n    loadingDelay: number = 1000;\n\n  /**\n   * Sticks the toolbar and header row to the top of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyHeader!: boolean;\n\n  /**\n   * Sticks the first column to the left of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyColumn!: boolean;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    rows!: DefaultSlot<UDExTableRow | UDExTableGroupRow>;\n\n  /**\n   * Defines the header row of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    headerRow!: Slot<UDExTableHeaderRow>;\n\n  /**\n   * Defines the actions of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    actions!: Slot<HTMLElement>;\n\n  /**\n   * Defines the custom visualization if there is no data available.\n   * @public\n   */\n  @slot()\n    noData!: Slot<HTMLElement>;\n\n  /**\n   * Defines the footnotes of the table.\n   * @public\n   */\n  @slot()\n    footnotes!: Slot<HTMLElement>;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @property({ type: String })\n    customColumns!: string;\n\n  /**\n   * Defines the table has vertical scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _verticalOffset?: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering() {\n    if (this.stickyColumn) {\n      this._setStickyAttrToCells();\n    }\n\n    this._setIndexToCells();\n\n    if (this.headerRow) {\n      this._setCellsHighlighter();\n    }\n  }\n\n  _handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleLeftArrow(e);\n    this.handleRightArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.navigateRows(-1);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.navigateRows(1);\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent) {\n    if (isRight(e)) {\n      e.preventDefault();\n      this.navigateCells(1);\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent) {\n    if (isLeft(e)) {\n      e.preventDefault();\n      this.navigateCells(-1);\n    }\n  }\n\n  navigateRows(offset: number) {\n    const items = this.getKeyboardNavigationItems();\n    const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n    const activeIndex = items.indexOf(activeItem);\n    const nextItem = items[activeIndex + offset];\n\n    nextItem?.elements[0]?.focus();\n  }\n\n  navigateCells(offset: number) {\n    const parentRow = this.getParentRow();\n\n    if (!(parentRow as UDExTableGroupRow).isGroup) {\n      const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n      const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n      const targetIndex = currentIndex + offset;\n      if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n        interactiveElements[targetIndex]?.focus();\n      }\n    }\n  }\n\n  _onScroll() {\n    const { scrollLeft, scrollTop } = this._tableHolder;\n\n    if (this.stickyHeader) {\n      this._verticalOffset = scrollTop > 0;\n    }\n\n    if (this.stickyColumn) {\n      this._setHorizontalOffsetToCells(scrollLeft);\n    }\n  }\n\n  _setCellsHighlighter(): void {\n    const highlightedHeaderCells = this.headerRow.flatMap(header => {\n      return header.cells\n        .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n        .map(cell => cell._individualSlot);\n    });\n\n    this.rows.forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells.forEach(cell => {\n          if (highlightedHeaderCells.includes(cell._individualSlot)) {\n            cell.setAttribute(\"_highlighted\", \"\");\n          }\n        });\n      }\n    });\n  }\n\n  _setStickyAttrToCells():void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._sticky = true;\n      }\n    });\n  }\n\n  _setIndexToCells(): void {\n    [...this.headerRow, ...this.rows].forEach((row, index) => {\n      row._index = index;\n    });\n  }\n\n  _setHorizontalOffsetToCells(scrollLeft: number):void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._horizontalOffset = scrollLeft > 0;\n      }\n    });\n  }\n\n  getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n    const focusedElement = document.activeElement as HTMLElement;\n    return focusedElement.closest(\"[udex-table-row], [udex-table-header-row], [udex-table-group-row]\")!;\n  }\n\n  getKeyboardNavigationItems(): Array<KeyBoardItem> {\n    const items: Array<KeyBoardItem> = [];\n\n    const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n      if (collapsible) {\n        items.push(<KeyBoardItem>{\n          id: row._id,\n          elements: [row.shadowRoot?.querySelector(\"button\")],\n        });\n      }\n      (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n        items.push({\n          id: rowGroup._id,\n          group: true,\n          elements: this.getInteractiveElements(rowGroup),\n        });\n      });\n    };\n\n    const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n      items.push(<KeyBoardItem>{\n        id: row._id,\n        group: false,\n        elements: row.isGroup\n          ? [row.shadowRoot?.querySelector(\"button\")]\n          : this.getInteractiveElements(row as TableBaseRow),\n      });\n    };\n\n    [...this.headerRow, ...this.rows].forEach(row => {\n      const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n      if (isGroup && _isOpen) {\n        pushItemGroupToItems(row, collapsible);\n      } else {\n        pushItemBaseToItems(row);\n      }\n    });\n\n    return items.filter(({ elements }) => elements.length);\n  }\n\n  getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n    return el.cells.flatMap(cell => Array.from(\n      cell.querySelectorAll(\"button, a, [udex-button], [udex-link], [udex-rating-indicator]\"),\n    ));\n  }\n\n  get _effectiveNoDataText() {\n    return this.noDataText || translate(UDExTable, TABLE_NO_DATA_FOUND);\n  }\n\n  get _hasToolbar(): boolean {\n    return this.heading?.length > 0 || this.actions?.length > 0;\n  }\n\n  get _tableMaxHeight(): string {\n    return this.maxHeight ? this.maxHeight : \"auto\";\n  }\n\n  get _tableHolder(): HTMLElement {\n    return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n  }\n\n  get _gridTemplateColumns(): string {\n    const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n    return `repeat(${cellsLength}, auto)`;\n  }\n\n  get _styles() {\n    const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n      if (headerCell.horizontalAlign !== undefined) {\n        headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n      }\n      return headerStyles;\n    }, {} as { [key: string]: string });\n\n    return {\n      table: {\n        \"grid-template-columns\": this.customColumns || this._gridTemplateColumns,\n        \"max-height\": this._tableMaxHeight,\n        ...headerStyleMap,\n      },\n    };\n  }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../src/Table.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EACL,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAC9B,MAAM,sCAAsC,CAAC;AAG9C,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAU/E;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,iBAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA0CE;;;;WAIG;QAED,iBAAY,GAAW,IAAI,CAAC;IA4RhC,CAAC;IAlNC,gBAAgB;QACd,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACZ,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,CAAgB;QAC/B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,eAAe,CAAC,CAAgB;QAC9B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED,YAAY,CAAC,MAAc;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAChD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAiB,CAAC;QAC3F,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QAE7C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,aAAa,CAAC,MAAc;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEtC,IAAI,CAAE,SAA+B,CAAC,OAAO,EAAE,CAAC;YAC9C,MAAM,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,CAAC,SAAyB,CAAC,CAAC;YACnF,MAAM,YAAY,GAAG,mBAAmB,CAAC,OAAO,CAAc,QAAQ,CAAC,aAAa,CAAC,CAAC;YACtF,MAAM,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;YAC1C,IAAI,WAAW,IAAI,CAAC,IAAI,WAAW,GAAG,mBAAmB,CAAC,MAAM,EAAE,CAAC;gBACjE,mBAAmB,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS;QACP,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEpD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,2BAA2B,CAAC,UAAU,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC7D,OAAO,MAAM,CAAC,KAAK;iBAChB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAE,IAA4B,CAAC,WAAW,KAAK,IAAI,CAAC;iBAClE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACtB,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACvB,IAAI,sBAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;wBAC1D,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;oBACxC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB;QACnB,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YACvD,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2BAA2B,CAAC,UAAkB;QAC5C,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,YAAY,iBAAiB,CAAC,EAAE,CAAC;gBACxC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,UAAU,GAAG,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,MAAM,cAAc,GAAG,QAAQ,CAAC,aAA4B,CAAC;QAC7D,OAAO,cAAc,CAAC,OAAO,CAAC,mEAAmE,CAAE,CAAC;IACtG,CAAC;IAED,0BAA0B;QACxB,MAAM,KAAK,GAAwB,EAAE,CAAC;QAEtC,MAAM,oBAAoB,GAAG,CAAC,GAA0D,EAAE,WAAgC,EAAE,EAAE;YAC5H,IAAI,WAAW,EAAE,CAAC;gBAChB,KAAK,CAAC,IAAI,CAAe;oBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;oBACX,QAAQ,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;iBACpD,CAAC,CAAC;YACL,CAAC;YACA,GAAyB,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBACjD,KAAK,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,QAAQ,CAAC,GAAG;oBAChB,KAAK,EAAE,IAAI;oBACX,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC;iBAChD,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,GAA0D,EAAE,EAAE;YACzF,KAAK,CAAC,IAAI,CAAe;gBACvB,EAAE,EAAE,GAAG,CAAC,GAAG;gBACX,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,GAAG,CAAC,OAAO;oBACnB,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;oBAC3C,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,GAAmB,CAAC;aACrD,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,GAAwB,CAAC;YACnE,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;gBACvB,oBAAoB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACN,mBAAmB,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IAED,sBAAsB,CAAC,EAAgB;QACrC,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CACxC,IAAI,CAAC,gBAAgB,CAAC,gEAAgE,CAAC,CACxF,CAAC,CAAC;IACL,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC,WAAS,EAAE,mBAAmB,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAClD,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,EAAE,cAAc,CAAC,OAAO,CAAgB,CAAC;IACjE,CAAC;IAED,IAAI,oBAAoB;QACtB,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAkB,CAAA,CAAC,KAAK,CAAC,MAAM,CAAC;QACvG,OAAO,UAAU,WAAW,SAAS,CAAC;IACxC,CAAC;IAED,IAAI,OAAO;QACT,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,YAAY,EAAE,UAAU,EAAE,EAAE;YACrF,IAAI,UAAU,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;gBAC7C,YAAY,CAAC,sBAAsB,UAAU,CAAC,eAAe,EAAE,CAAC,GAAG,UAAU,CAAC,eAAe,CAAC;YAChG,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,EAAE,EAA+B,CAAC,CAAC;QAEpC,OAAO;YACL,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB;gBACxE,YAAY,EAAE,IAAI,CAAC,eAAe;gBAClC,GAAG,cAAc;aAClB;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAnUG;IADD,QAAQ,EAAE;4CACU;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACD;AAOxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAOjB;IADD,QAAQ,EAAE;6CACW;AAQpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACR;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACG;AAS5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACH;AAOvB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uCACU;AAOrD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;4CACW;AAOrC;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;0CACE;AAO5B;IADD,IAAI,EAAE;yCACsB;AAO3B;IADD,IAAI,EAAE;4CACyB;AAO9B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACA;AAGrB;IADN,IAAI,CAAC,yBAAyB,CAAC;mCACF;AAxH1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,QAAQ,EAAE,0BAA0B,EAAE,CAAC;QAChD,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CA4Ud;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport {\n  isUp, isDown, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type UDExTableHeaderRow from \"./TableHeaderRow.js\";\nimport type UDExTableRow from \"./TableRow.js\";\nimport UDExTableGroupRow from \"./TableGroupRow.js\";\nimport type UDExTableHeaderCell from \"./TableHeaderCell.js\";\nimport { TABLE_NO_DATA_FOUND } from \"./generated/i18n/i18n-defaults.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TableTemplate from \"./TableTemplate.js\";\nimport translate from \"./utils/translate.js\";\n// Styles\nimport TableCss from \"./generated/themes/Table.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nexport type TableBaseRow = UDExTableHeaderRow | UDExTableRow;\n\nexport type KeyBoardItem = {\n  id: string;\n  group?: boolean;\n  elements: Array<HTMLElement>;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Table.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-table\",\n  renderer: jsxRenderer,\n  styles: [TableCss, getEffectiveScrollbarStyle()],\n  template: TableTemplate,\n})\n\nclass UDExTable extends UI5Element {\n  /**\n   * Defines the height of the table.\n   * Allows control over the maximum height.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    maxHeight!: string;\n\n  /**\n   * Defines the accessible ARIA name of the table.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the heading of the table.\n   * @public\n   */\n  @property({ type: String })\n    heading!: string;\n\n  /**\n   * Defines the text to be displayed when there are no rows in the component.\n   * @public\n   */\n  @property()\n    noDataText?: string;\n\n  /**\n   * Defines if the loading indicator should be shown.\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    loading!: boolean;\n\n  /**\n   * Defines the delay in milliseconds, after which the loading indicator will show up for this component.\n   * @default 1000\n   * @public\n   */\n  @property({ type: Number })\n    loadingDelay: number = 1000;\n\n  /**\n   * Sticks the toolbar and header row to the top of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyHeader!: boolean;\n\n  /**\n   * Sticks the first column to the left of the table.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    stickyColumn!: boolean;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    rows!: DefaultSlot<UDExTableRow | UDExTableGroupRow>;\n\n  /**\n   * Defines the header row of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    headerRow!: Slot<UDExTableHeaderRow>;\n\n  /**\n   * Defines the actions of the table.\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    actions!: Slot<HTMLElement>;\n\n  /**\n   * Defines the custom visualization if there is no data available.\n   * @public\n   */\n  @slot()\n    noData!: Slot<HTMLElement>;\n\n  /**\n   * Defines the footnotes of the table.\n   * @public\n   */\n  @slot()\n    footnotes!: Slot<HTMLElement>;\n\n  /**\n   * Defines the rows of the table.\n   * @public\n   */\n  @property({ type: String })\n    customColumns!: string;\n\n  /**\n   * Defines the table has vertical scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _verticalOffset?: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering() {\n    if (this.stickyColumn) {\n      this._setStickyAttrToCells();\n    }\n\n    this._setIndexToCells();\n\n    if (this.headerRow) {\n      this._setCellsHighlighter();\n    }\n  }\n\n  _handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleLeftArrow(e);\n    this.handleRightArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.navigateRows(-1);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.navigateRows(1);\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent) {\n    if (isRight(e)) {\n      e.preventDefault();\n      this.navigateCells(1);\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent) {\n    if (isLeft(e)) {\n      e.preventDefault();\n      this.navigateCells(-1);\n    }\n  }\n\n  navigateRows(offset: number) {\n    const items = this.getKeyboardNavigationItems();\n    const activeItem = items.find(item => item.id === this.getParentRow()._id) as KeyBoardItem;\n    const activeIndex = items.indexOf(activeItem);\n    const nextItem = items[activeIndex + offset];\n\n    nextItem?.elements[0]?.focus();\n  }\n\n  navigateCells(offset: number) {\n    const parentRow = this.getParentRow();\n\n    if (!(parentRow as UDExTableGroupRow).isGroup) {\n      const interactiveElements = this.getInteractiveElements(parentRow as TableBaseRow);\n      const currentIndex = interactiveElements.indexOf(<HTMLElement>document.activeElement);\n      const targetIndex = currentIndex + offset;\n      if (targetIndex >= 0 && targetIndex < interactiveElements.length) {\n        interactiveElements[targetIndex]?.focus();\n      }\n    }\n  }\n\n  _onScroll() {\n    const { scrollLeft, scrollTop } = this._tableHolder;\n\n    if (this.stickyHeader) {\n      this._verticalOffset = scrollTop > 0;\n    }\n\n    if (this.stickyColumn) {\n      this._setHorizontalOffsetToCells(scrollLeft);\n    }\n  }\n\n  _setCellsHighlighter(): void {\n    const highlightedHeaderCells = this.headerRow.flatMap(header => {\n      return header.cells\n        .filter(cell => (cell as UDExTableHeaderCell).highlighted === true)\n        .map(cell => cell._individualSlot);\n    });\n\n    this.rows.forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells.forEach(cell => {\n          if (highlightedHeaderCells.includes(cell._individualSlot)) {\n            cell.setAttribute(\"_highlighted\", \"\");\n          }\n        });\n      }\n    });\n  }\n\n  _setStickyAttrToCells():void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._sticky = true;\n      }\n    });\n  }\n\n  _setIndexToCells(): void {\n    [...this.headerRow, ...this.rows].forEach((row, index) => {\n      row._index = index;\n    });\n  }\n\n  _setHorizontalOffsetToCells(scrollLeft: number):void {\n    [...this.headerRow, ...this.rows].forEach(row => {\n      if (!(row instanceof UDExTableGroupRow)) {\n        row.cells[0]._horizontalOffset = scrollLeft > 0;\n      }\n    });\n  }\n\n  getParentRow(): UDExTableRow | UDExTableHeaderRow | UDExTableGroupRow {\n    const focusedElement = document.activeElement as HTMLElement;\n    return focusedElement.closest(\"[udex-table-row], [udex-table-header-row], [udex-table-group-row]\")!;\n  }\n\n  getKeyboardNavigationItems(): Array<KeyBoardItem> {\n    const items: Array<KeyBoardItem> = [];\n\n    const pushItemGroupToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow, collapsible: boolean | undefined) => {\n      if (collapsible) {\n        items.push(<KeyBoardItem>{\n          id: row._id,\n          elements: [row.shadowRoot?.querySelector(\"button\")],\n        });\n      }\n      (row as UDExTableGroupRow).rows.forEach(rowGroup => {\n        items.push({\n          id: rowGroup._id,\n          group: true,\n          elements: this.getInteractiveElements(rowGroup),\n        });\n      });\n    };\n\n    const pushItemBaseToItems = (row: UDExTableHeaderRow | UDExTableRow | UDExTableGroupRow) => {\n      items.push(<KeyBoardItem>{\n        id: row._id,\n        group: false,\n        elements: row.isGroup\n          ? [row.shadowRoot?.querySelector(\"button\")]\n          : this.getInteractiveElements(row as TableBaseRow),\n      });\n    };\n\n    [...this.headerRow, ...this.rows].forEach(row => {\n      const { isGroup, _isOpen, collapsible } = row as UDExTableGroupRow;\n      if (isGroup && _isOpen) {\n        pushItemGroupToItems(row, collapsible);\n      } else {\n        pushItemBaseToItems(row);\n      }\n    });\n\n    return items.filter(({ elements }) => elements.length);\n  }\n\n  getInteractiveElements(el: TableBaseRow): Array<HTMLElement> {\n    return el.cells.flatMap(cell => Array.from(\n      cell.querySelectorAll(\"button, a, [udex-button], [udex-link], [udex-rating-indicator]\"),\n    ));\n  }\n\n  get _effectiveNoDataText() {\n    return this.noDataText || translate(UDExTable, TABLE_NO_DATA_FOUND);\n  }\n\n  get _hasToolbar(): boolean {\n    return this.heading?.length > 0 || this.actions?.length > 0;\n  }\n\n  get _tableMaxHeight(): string {\n    return this.maxHeight ? this.maxHeight : \"auto\";\n  }\n\n  get _tableHolder(): HTMLElement {\n    return this.shadowRoot?.getElementById(\"table\") as HTMLElement;\n  }\n\n  get _gridTemplateColumns(): string {\n    const cellsLength = this.headerRow?.[0]?.cells.length || (this.rows?.[0] as TableBaseRow).cells.length;\n    return `repeat(${cellsLength}, auto)`;\n  }\n\n  get _styles() {\n    const headerStyleMap = this.headerRow?.[0]?.cells?.reduce((headerStyles, headerCell) => {\n      if (headerCell.horizontalAlign !== undefined) {\n        headerStyles[`--horizontal-align-${headerCell._individualSlot}`] = headerCell.horizontalAlign;\n      }\n      return headerStyles;\n    }, {} as { [key: string]: string });\n\n    return {\n      table: {\n        \"grid-template-columns\": this.customColumns || this._gridTemplateColumns,\n        \"max-height\": this._tableMaxHeight,\n        ...headerStyleMap,\n      },\n    };\n  }\n}\n\nUDExTable.define();\n\nexport default UDExTable;\n"]}

package/dist/TableCell.d.ts

@@ -1,4 +1,5 @@
 import UDExTableCellBase from "./TableCellBase.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 /**
  * @class
  *
@@ -30,7 +31,12 @@ declare class UDExTableCell extends UDExTableCellBase {
      * @private
      */
     _highlighted?: boolean;
-    onBeforeRendering(): void;
-    setJustifyContent(): void;
+    /**
+     * Determines the vertical alignment of the cell content.
+     *
+     * @default "Center"
+     * @public
+     */
+    verticalAlign: `${UDExTableCellVerticalAlign}`;
 }
 export default UDExTableCell;

package/dist/TableCell.js

@@ -9,6 +9,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableCellBase from "./TableCellBase.js";
 import TableCellTemplate from "./TableCellTemplate.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 // Styles
 import TableCellCss from "./generated/themes/TableCell.css.js";
 /**
@@ -29,17 +30,15 @@ import TableCellCss from "./generated/themes/TableCell.css.js";
  * @public
  */
 let UDExTableCell = class UDExTableCell extends UDExTableCellBase {
-    onBeforeRendering() {
-        super.onBeforeRendering();
-        this.setJustifyContent();
-    }
-    setJustifyContent() {
-        if (this.horizontalAlign) {
-            this.style.justifyContent = this.horizontalAlign;
-        }
-        else {
-            this.style.justifyContent = `var(--horizontal-align-${(this)._individualSlot})`;
-        }
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines the vertical alignment of the cell content.
+         *
+         * @default "Center"
+         * @public
+         */
+        this.verticalAlign = UDExTableCellVerticalAlign.Center;
     }
 };
 __decorate([
@@ -48,6 +47,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExTableCell.prototype, "_highlighted", void 0);
+__decorate([
+    property()
+], UDExTableCell.prototype, "verticalAlign", void 0);
 UDExTableCell = __decorate([
     customElement({
         tag: "udex-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,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AACnD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,iBAAiB;IAkB3C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC,eAAe,GAAG,CAAC;QAClF,CAAC;IACH,CAAC;CACF,CAAA;AAtBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACH;AAhBrB,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,YAAY,CAAC;QAChD,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,EAAE;KACjB,CAAC;GAEI,aAAa,CA8BlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\n\n// Styles\nimport TableCellCss from \"./generated/themes/TableCell.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-cell\",\n  renderer: jsxRenderer,\n  styles: [UDExTableCellBase.styles, TableCellCss],\n  template: TableCellTemplate,\n  dependencies: [],\n})\n\nclass UDExTableCell extends UDExTableCellBase {\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines highlighted of the table cell.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _highlighted?: boolean;\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.setJustifyContent();\n  }\n\n  setJustifyContent(): void {\n    if (this.horizontalAlign) {\n      this.style.justifyContent = this.horizontalAlign;\n    } else {\n      this.style.justifyContent = `var(--horizontal-align-${(this)._individualSlot})`;\n    }\n  }\n}\n\nUDExTableCell.define();\n\nexport default UDExTableCell;\n"]}
+{"version":3,"file":"TableCell.js","sourceRoot":"","sources":["../src/TableCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AACnD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,iBAAiB;IAA7C;;QAkBE;;;;;WAKG;QAED,kBAAa,GAAoC,0BAA0B,CAAC,MAAM,CAAC;IACvF,CAAC;CAAA,CAAA;AAlBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACH;AASvB;IADD,QAAQ,EAAE;oDAC0E;AAzBjF,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,YAAY,CAAC;QAChD,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,EAAE;KACjB,CAAC;GAEI,aAAa,CA0BlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\nimport TableCellTemplate from \"./TableCellTemplate.js\";\nimport { UDExTableCellVerticalAlign } from \"./types/Table.js\";\n\n// Styles\nimport TableCellCss from \"./generated/themes/TableCell.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-cell\",\n  renderer: jsxRenderer,\n  styles: [UDExTableCellBase.styles, TableCellCss],\n  template: TableCellTemplate,\n  dependencies: [],\n})\n\nclass UDExTableCell extends UDExTableCellBase {\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    icon?: string;\n\n  /**\n   * Defines highlighted of the table cell.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _highlighted?: boolean;\n\n  /**\n   * Determines the vertical alignment of the cell content.\n   *\n   * @default \"Center\"\n   * @public\n   */\n  @property()\n    verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;\n}\n\nUDExTableCell.define();\n\nexport default UDExTableCell;\n"]}

package/dist/TableCellBase.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type UDExTableCellHorizontalAlign from "./types/Table.js";
+import type { UDExTableCellHorizontalAlign } from "./types/Table.js";
 /**
  * @class
  * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.
@@ -38,5 +38,6 @@ declare abstract class UDExTableCellBase extends UI5Element {
     _individualSlot?: string;
     protected ariaRole: string;
     onBeforeRendering(): void;
+    setJustifyContent(): void;
 }
 export default UDExTableCellBase;

package/dist/TableCellBase.js

@@ -26,6 +26,15 @@ let UDExTableCellBase = class UDExTableCellBase extends UI5Element {
     }
     onBeforeRendering() {
         this.setAttribute("role", this.ariaRole);
+        this.setJustifyContent();
+    }
+    setJustifyContent() {
+        if (this.horizontalAlign) {
+            this.style.justifyContent = this.horizontalAlign;
+        }
+        else {
+            this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+        }
     }
 };
 __decorate([

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;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAG7E,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;GAOG;AAMH,IAAe,iBAAiB,GAAhC,MAAe,iBAAkB,SAAQ,UAAU;IAAnD;;QAoCY,aAAQ,GAAW,MAAM,CAAC;IAKtC,CAAC;IAHC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAjCG;IADD,QAAQ,EAAE;0DAC2C;AAOpD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kDACR;AAQ5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACR;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACE;AAhCjB,iBAAiB;IAL/B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;KACzB,CAAC;GAEa,iBAAiB,CAyC/B;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type UDExTableCellHorizontalAlign from \"./types/Table.js\";\n\n// Styles\nimport TableCellBaseCss from \"./generated/themes/TableCellBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n  renderer: litRender,\n  styles: TableCellBaseCss,\n})\n\nabstract class UDExTableCellBase extends UI5Element {\n  /**\n   * Determines the horizontal alignment of table cells.\n   * Note: All values valid for justify-content can be used not just the ones inside the enum.\n   * @default undefined\n   * @public\n   */\n  @property()\n    horizontalAlign?: `${UDExTableCellHorizontalAlign}`;\n\n  /**\n   * Defines the content of the component.\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines position sticky of the table cell.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _sticky?: boolean;\n\n  /**\n   * Defines the table has horizontal scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _horizontalOffset?: boolean;\n\n  _individualSlot?: string;\n\n  protected ariaRole: string = \"cell\";\n\n  onBeforeRendering() {\n    this.setAttribute(\"role\", this.ariaRole);\n  }\n}\n\nexport default UDExTableCellBase;\n"]}
+{"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAG7E,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE;;;;;;;GAOG;AAMH,IAAe,iBAAiB,GAAhC,MAAe,iBAAkB,SAAQ,UAAU;IAAnD;;QAoCY,aAAQ,GAAW,MAAM,CAAC;IActC,CAAC;IAZC,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QACnD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;QAChF,CAAC;IACH,CAAC;CACF,CAAA;AA1CG;IADD,QAAQ,EAAE;0DAC2C;AAOpD;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kDACR;AAQ5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACR;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACE;AAhCjB,iBAAiB;IAL/B,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;KACzB,CAAC;GAEa,iBAAiB,CAkD/B;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type { UDExTableCellHorizontalAlign } from \"./types/Table.js\";\n\n// Styles\nimport TableCellBaseCss from \"./generated/themes/TableCellBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `UDExTableCell` and `UDExTableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @public\n */\n@customElement({\n  renderer: litRender,\n  styles: TableCellBaseCss,\n})\n\nabstract class UDExTableCellBase extends UI5Element {\n  /**\n   * Determines the horizontal alignment of table cells.\n   * Note: All values valid for justify-content can be used not just the ones inside the enum.\n   * @default undefined\n   * @public\n   */\n  @property()\n    horizontalAlign?: `${UDExTableCellHorizontalAlign}`;\n\n  /**\n   * Defines the content of the component.\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: DefaultSlot<Node>;\n\n  /**\n   * Defines position sticky of the table cell.\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _sticky?: boolean;\n\n  /**\n   * Defines the table has horizontal scrolling.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _horizontalOffset?: boolean;\n\n  _individualSlot?: string;\n\n  protected ariaRole: string = \"cell\";\n\n  onBeforeRendering() {\n    this.setAttribute(\"role\", this.ariaRole);\n    this.setJustifyContent();\n  }\n\n  setJustifyContent(): void {\n    if (this.horizontalAlign) {\n      this.style.justifyContent = this.horizontalAlign;\n    } else {\n      this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n    }\n  }\n}\n\nexport default UDExTableCellBase;\n"]}

package/dist/TableHeaderCell.d.ts

@@ -39,7 +39,6 @@ declare class UDExTableHeaderCell extends UDExTableCellBase {
      */
     iconEnd: string;
     protected ariaRole: string;
-    onBeforeRendering(): void;
     get _hasIcons(): boolean;
 }
 export default UDExTableHeaderCell;

package/dist/TableHeaderCell.js

@@ -47,10 +47,6 @@ let UDExTableHeaderCell = class UDExTableHeaderCell extends UDExTableCellBase {
         this.iconEnd = "";
         this.ariaRole = "columnheader";
     }
-    onBeforeRendering() {
-        super.onBeforeRendering();
-        this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
-    }
     get _hasIcons() {
         return this.iconStart.length > 0 || this.iconEnd.length > 0;
     }

package/dist/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAUE;;;;;WAKG;QAED,cAAS,GAAW,EAAE,CAAC;QAEzB;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEb,aAAQ,GAAW,cAAc,CAAC;IAU9C,CAAC;IARC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAChF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AA1BnB,mBAAmB;IAPxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;KAClC,CAAC;GAEI,mBAAmB,CAsCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport TableHeaderCellTemplate from \"./TableHeaderCellTemplate.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-header-cell\",\n  renderer: jsxRenderer,\n  styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n  template: TableHeaderCellTemplate,\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n  /**\n   * Defines highlighted the header cell.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconStart: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconEnd: string = \"\";\n\n  protected ariaRole: string = \"columnheader\";\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n  }\n\n  get _hasIcons(): boolean {\n    return this.iconStart.length > 0 || this.iconEnd.length > 0;\n  }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AACnE,OAAO,iBAAiB,MAAM,oBAAoB,CAAC;AAEnD,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;IAAnD;;QAUE;;;;;WAKG;QAED,cAAS,GAAW,EAAE,CAAC;QAEzB;;;;;WAKG;QAED,YAAO,GAAW,EAAE,CAAC;QAEb,aAAQ,GAAW,cAAc,CAAC;IAK9C,CAAC;IAHC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;IAC9D,CAAC;CACF,CAAA;AAzBG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACJ;AA1BnB,mBAAmB;IAPxB,aAAa,CAAC;QACb,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC,MAAM,EAAE,kBAAkB,CAAC;QACtD,QAAQ,EAAE,uBAAuB;KAClC,CAAC;GAEI,mBAAmB,CAiCxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport TableHeaderCellTemplate from \"./TableHeaderCellTemplate.js\";\nimport UDExTableCellBase from \"./TableCellBase.js\";\n\n// Styles\nimport TableHeaderCellCss from \"./generated/themes/TableHeaderCell.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-header-cell</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableHeaderCell.js\";</code>\n *\n * @constructor\n * @extends UDExTableCellBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-header-cell\",\n  renderer: jsxRenderer,\n  styles: [UDExTableCellBase.styles, TableHeaderCellCss],\n  template: TableHeaderCellTemplate,\n})\n\nclass UDExTableHeaderCell extends UDExTableCellBase {\n  /**\n   * Defines highlighted the header cell.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconStart: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed at the end of the content.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    iconEnd: string = \"\";\n\n  protected ariaRole: string = \"columnheader\";\n\n  get _hasIcons(): boolean {\n    return this.iconStart.length > 0 || this.iconEnd.length > 0;\n  }\n}\n\nUDExTableHeaderCell.define();\n\nexport default UDExTableHeaderCell;\n"]}

package/dist/TableRow.d.ts

@@ -1,5 +1,6 @@
 import UDExTableRowBase from "./TableRowBase.js";
 import type UDExTableCell from "./TableCell.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 /**
  * @class
  *
@@ -32,8 +33,17 @@ declare class UDExTableRow extends UDExTableRowBase {
      * @public
      */
     highlighted?: boolean;
+    /**
+     * Determines the vertical alignment of all cells in the row.
+     * Applies to every cell that does not define its own verticalAlign.
+     *
+     * @default "Center"
+     * @public
+     */
+    verticalAlign: `${UDExTableCellVerticalAlign}`;
     onBeforeRendering(): void;
     _setHighlightToCells(): void;
+    _setVerticalAlignToCells(): void;
     get isGroup(): boolean;
     get cellsInRow(): Array<UDExTableCell>;
 }

package/dist/TableRow.js

@@ -9,6 +9,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableRowBase from "./TableRowBase.js";
 import TableRowTemplate from "./TableRowTemplate.js";
+import { UDExTableCellVerticalAlign } from "./types/Table.js";
 /**
  * @class
  *
@@ -27,16 +28,35 @@ import TableRowTemplate from "./TableRowTemplate.js";
  * @public
  */
 let UDExTableRow = class UDExTableRow extends UDExTableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines the vertical alignment of all cells in the row.
+         * Applies to every cell that does not define its own verticalAlign.
+         *
+         * @default "Center"
+         * @public
+         */
+        this.verticalAlign = UDExTableCellVerticalAlign.Center;
+    }
     onBeforeRendering() {
         if (this.highlighted) {
             this._setHighlightToCells();
         }
+        this._setVerticalAlignToCells();
     }
     _setHighlightToCells() {
         this.cellsInRow.forEach(cell => {
             cell._highlighted = true;
         });
     }
+    _setVerticalAlignToCells() {
+        this.cellsInRow.forEach(cell => {
+            if (cell.verticalAlign === UDExTableCellVerticalAlign.Center) {
+                cell.verticalAlign = this.verticalAlign;
+            }
+        });
+    }
     get isGroup() {
         return false;
     }
@@ -50,6 +70,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExTableRow.prototype, "highlighted", void 0);
+__decorate([
+    property()
+], UDExTableRow.prototype, "verticalAlign", void 0);
 UDExTableRow = __decorate([
     customElement({
         tag: "udex-table-row",

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB;IAmBzC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,eAAe,CAAgB,OAAO,CAAC,CAAC;IACtD,CAAC;CACF,CAAA;AA9BG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAjBpB,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC;QACjC,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CAsCjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableRowBase from \"./TableRowBase.js\";\nimport type UDExTableCell from \"./TableCell.js\";\nimport TableRowTemplate from \"./TableRowTemplate.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-row</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableRow.js\";</code>\n *\n * @constructor\n * @extends UDExTableRowBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-row\",\n  renderer: jsxRenderer,\n  styles: [UDExTableRowBase.styles],\n  template: TableRowTemplate,\n})\n\nclass UDExTableRow extends UDExTableRowBase {\n  /**\n   * Defines the interactive state of the row.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive?: boolean;\n\n  /**\n   * Defines highlighted the row.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  onBeforeRendering(): void {\n    if (this.highlighted) {\n      this._setHighlightToCells();\n    }\n  }\n\n  _setHighlightToCells(): void {\n    this.cellsInRow.forEach(cell => {\n      cell._highlighted = true;\n    });\n  }\n\n  get isGroup(): boolean {\n    return false;\n  }\n\n  get cellsInRow(): Array<UDExTableCell> {\n    return this.getSlottedNodes<UDExTableCell>(\"cells\");\n  }\n}\n\nUDExTableRow.define();\n\nexport default UDExTableRow;\n"]}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAE9D;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QAmBE;;;;;;WAMG;QAED,kBAAa,GAAoC,0BAA0B,CAAC,MAAM,CAAC;IA8BvF,CAAC;IA5BC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,wBAAwB;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,0BAA0B,CAAC,MAAM,EAAE,CAAC;gBAC7D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,eAAe,CAAgB,OAAO,CAAC,CAAC;IACtD,CAAC;CACF,CAAA;AAjDG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAStB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACJ;AAUtB;IADD,QAAQ,EAAE;mDAC0E;AA3BjF,YAAY;IAPjB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC;QACjC,QAAQ,EAAE,gBAAgB;KAC3B,CAAC;GAEI,YAAY,CAyDjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UDExTableRowBase from \"./TableRowBase.js\";\nimport type UDExTableCell from \"./TableCell.js\";\nimport TableRowTemplate from \"./TableRowTemplate.js\";\nimport { UDExTableCellVerticalAlign } from \"./types/Table.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-table-row</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/TableRow.js\";</code>\n *\n * @constructor\n * @extends UDExTableRowBase\n * @public\n */\n@customElement({\n  tag: \"udex-table-row\",\n  renderer: jsxRenderer,\n  styles: [UDExTableRowBase.styles],\n  template: TableRowTemplate,\n})\n\nclass UDExTableRow extends UDExTableRowBase {\n  /**\n   * Defines the interactive state of the row.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive?: boolean;\n\n  /**\n   * Defines highlighted the row.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    highlighted?: boolean;\n\n  /**\n   * Determines the vertical alignment of all cells in the row.\n   * Applies to every cell that does not define its own verticalAlign.\n   *\n   * @default \"Center\"\n   * @public\n   */\n  @property()\n    verticalAlign: `${UDExTableCellVerticalAlign}` = UDExTableCellVerticalAlign.Center;\n\n  onBeforeRendering(): void {\n    if (this.highlighted) {\n      this._setHighlightToCells();\n    }\n    this._setVerticalAlignToCells();\n  }\n\n  _setHighlightToCells(): void {\n    this.cellsInRow.forEach(cell => {\n      cell._highlighted = true;\n    });\n  }\n\n  _setVerticalAlignToCells(): void {\n    this.cellsInRow.forEach(cell => {\n      if (cell.verticalAlign === UDExTableCellVerticalAlign.Center) {\n        cell.verticalAlign = this.verticalAlign;\n      }\n    });\n  }\n\n  get isGroup(): boolean {\n    return false;\n  }\n\n  get cellsInRow(): Array<UDExTableCell> {\n    return this.getSlottedNodes<UDExTableCell>(\"cells\");\n  }\n}\n\nUDExTableRow.define();\n\nexport default UDExTableRow;\n"]}

package/dist/TagGroup.d.ts

@@ -113,10 +113,13 @@ declare class UDExTagGroup extends UI5Element {
     _nMoreBtn: HTMLElement | null;
     _resizeHandler: () => void;
     _keydownCaptureHandler: (e: KeyboardEvent) => void;
+    _observedTokenizer?: Tokenizer;
     constructor();
     onEnterDOM(): void;
     onExitDOM(): void;
     onAfterRendering(): void;
+    /** @private UI5 exposes an empty listbox when all tokens have overflowed. */
+    _syncTokenizerAriaAfterRendering: () => void;
     _nMoreKeyDownHandler: (e: KeyboardEvent) => void;
     _onKeydownCapture(e: KeyboardEvent): void;
     handleTagFocusin(e: FocusEvent): void;

package/dist/TagGroup.js

@@ -63,6 +63,29 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
          * @private
          */
         this._scrollToEnd = false;
+        /** @private UI5 exposes an empty listbox when all tokens have overflowed. */
+        this._syncTokenizerAriaAfterRendering = () => {
+            const tokenizer = this._observedTokenizer;
+            renderFinished().then(() => {
+                if (!this.isConnected || !tokenizer || this._observedTokenizer !== tokenizer) {
+                    return;
+                }
+                const list = tokenizer.shadowRoot?.querySelector(".ui5-tokenizer--list");
+                if (!list) {
+                    return;
+                }
+                const hasVisibleTokens = tokenizer._tokens.some(token => !token.overflows);
+                // Do not hide the tokenizer: its sibling "n more" button must stay
+                // accessible. Only the list with no exposed options is presentational.
+                list.setAttribute("role", hasVisibleTokens ? "listbox" : "presentation");
+                if (hasVisibleTokens) {
+                    list.setAttribute("aria-label", tokenizer.tokenizerLabel);
+                }
+                else {
+                    ["aria-label", "aria-description", "aria-disabled", "aria-readonly"].forEach(attribute => list.removeAttribute(attribute));
+                }
+            });
+        };
         this._nMoreKeyDownHandler = (e) => {
             if (isSpace(e) || isEnter(e)) {
                 this.showMoreItems();
@@ -79,9 +102,17 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
         ResizeHandler.deregister(this, this._resizeHandler);
         this.removeEventListener("keydown", this._keydownCaptureHandler, true);
         this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler);
+        this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+        this._observedTokenizer = undefined;
     }
     onAfterRendering() {
         this._tokenizer = this.tokenizer;
+        if (this._observedTokenizer !== this._tokenizer) {
+            this._observedTokenizer?.detachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+            this._observedTokenizer = this._tokenizer;
+            this._observedTokenizer.attachComponentStateFinalized(this._syncTokenizerAriaAfterRendering);
+        }
+        this._syncTokenizerAriaAfterRendering();
         const prevMoreBtn = this._nMoreBtn;
         this._nMoreBtn = this._tokenizer.moreLink || null;
         if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {