@sapudex/web-components 2.59.0 → 2.61.0

package/dist/SideNavigationItem.js

@@ -28,6 +28,73 @@ import { isDesktop } from "@ui5/webcomponents-base";
  * @public
  */
 let UDExSideNavigationItem = class UDExSideNavigationItem extends SideNavigationItem {
+    constructor() {
+        super(...arguments);
+        this._initialExpandDone = false;
+    }
+    get _selected() {
+        if (this.sideNavCollapsed) {
+            return this.selected || this.items.some(item => item.selected);
+        }
+        return this.selected;
+    }
+    get focusableItems() {
+        // Recurse one level into expanded level-2 sub-items so their level-3 children join
+        // the Side Navigation's keyboard focus set (UI5's base getter is flat). Only one level
+        // of recursion is needed because the component supports at most three nesting levels.
+        if (!this.sideNavCollapsed && this.expanded) {
+            return [this, ...this.items.reduce((result, item) => {
+                    return result.concat(item.focusableItems || [item]);
+                }, new Array())];
+        }
+        return super.focusableItems;
+    }
+    get selectableItems() {
+        // Recurse one level into level-2 sub-items so their level-3 children are part of the
+        // Side Navigation's selection registry (UI5's base getter is flat). Without this the
+        // selection sweep in SideNavigation._selectItem never reaches level 3, so selecting a
+        // level-3 item would not deselect items at other levels, and vice versa.
+        return this.items.reduce((result, item) => {
+            return result.concat(item.selectableItems || [item]);
+        }, new Array(this));
+    }
+    get allItems() {
+        // Recurse one level into level-2 sub-items so level-3 children are enumerated by
+        // SideNavigation._getAllItems. That loop wires `sideNavigation` (and collapsed state)
+        // onto every item; without this, level-3 items never get `sideNavigation` set and
+        // their click handler cannot reach SideNavigation._handleItemClick to fire selection-change.
+        return this.items.reduce((result, item) => {
+            return result.concat(item.allItems || [item]);
+        }, new Array(this));
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        // Open the group once on initial render if it contains a selected child, so the
+        // selection is visible. Do not re-apply on later renders — that would prevent the
+        // user from collapsing a group while one of its children stays selected.
+        if (!this._initialExpandDone) {
+            this._initialExpandDone = true;
+            if (!this.sideNavCollapsed && !this.expanded && this.items.some(item => item.selected)) {
+                this.expanded = true;
+            }
+        }
+    }
+    _onclick(e) {
+        // A grouping item (one with sub-items) toggles expand/collapse on click and
+        // never navigates — a parent with children must not have an href. Only leaf
+        // items navigate, so they fall through to the base handler.
+        if (this.hasSubItems && !this.sideNavCollapsed) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.expanded = !this.expanded;
+            return;
+        }
+        super._onclick(e);
+    }
+    _onToggleClick(e) {
+        e.preventDefault();
+        super._onToggleClick(e);
+    }
     onEnterDOM() {
         this.setAttribute("id", this._id);
         if (isDesktop()) {

package/dist/SideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,kBAAkB,MAAM,qDAAqD,CAAC;AAErF,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,kBAAkB;IACrD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACpB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YACzC,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAfK,sBAAsB;IAN3B,aAAa,CAAC;QACb,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,kBAAkB,CAAC,MAAM,EAAE,qBAAqB,CAAC;KAC3D,CAAC;GAEI,sBAAsB,CAe3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base\";\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-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}
+{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.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 SideNavigationItem from \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";\nimport type SideNavigationItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationItemBase.js\";\nimport type SideNavigationSelectableItemBase from \"@ui5/webcomponents-fiori/dist/SideNavigationSelectableItemBase.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base\";\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-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigationItem.js\";</code>\n *\n * @constructor\n * @extends SideNavigationItem\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-item\",\n  renderer: jsxRenderer,\n  styles: [SideNavigationItem.styles, SideNavigationItemCss],\n})\n\nclass UDExSideNavigationItem extends SideNavigationItem {\n  get _selected() {\n    if (this.sideNavCollapsed) {\n      return this.selected || this.items.some(item => item.selected);\n    }\n    return this.selected;\n  }\n\n  get focusableItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into expanded level-2 sub-items so their level-3 children join\n    // the Side Navigation's keyboard focus set (UI5's base getter is flat). Only one level\n    // of recursion is needed because the component supports at most three nesting levels.\n    if (!this.sideNavCollapsed && this.expanded) {\n      return [this, ...this.items.reduce((result, item) => {\n        return result.concat((item as UDExSideNavigationSubItem).focusableItems || [item]);\n      }, new Array<SideNavigationItemBase>())];\n    }\n    return super.focusableItems;\n  }\n\n  get selectableItems(): Array<SideNavigationSelectableItemBase> {\n    // Recurse one level into level-2 sub-items so their level-3 children are part of the\n    // Side Navigation's selection registry (UI5's base getter is flat). Without this the\n    // selection sweep in SideNavigation._selectItem never reaches level 3, so selecting a\n    // level-3 item would not deselect items at other levels, and vice versa.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).selectableItems || [item]);\n    }, new Array<SideNavigationSelectableItemBase>(this));\n  }\n\n  get allItems(): Array<SideNavigationItemBase> {\n    // Recurse one level into level-2 sub-items so level-3 children are enumerated by\n    // SideNavigation._getAllItems. That loop wires `sideNavigation` (and collapsed state)\n    // onto every item; without this, level-3 items never get `sideNavigation` set and\n    // their click handler cannot reach SideNavigation._handleItemClick to fire selection-change.\n    return this.items.reduce((result, item) => {\n      return result.concat((item as UDExSideNavigationSubItem).allItems || [item]);\n    }, new Array<SideNavigationItemBase>(this));\n  }\n\n  _initialExpandDone = false;\n\n  onBeforeRendering() {\n    super.onBeforeRendering();\n    // Open the group once on initial render if it contains a selected child, so the\n    // selection is visible. Do not re-apply on later renders — that would prevent the\n    // user from collapsing a group while one of its children stays selected.\n    if (!this._initialExpandDone) {\n      this._initialExpandDone = true;\n      if (!this.sideNavCollapsed && !this.expanded && this.items.some(item => item.selected)) {\n        this.expanded = true;\n      }\n    }\n  }\n\n  _onclick(e: MouseEvent) {\n    // A grouping item (one with sub-items) toggles expand/collapse on click and\n    // never navigates — a parent with children must not have an href. Only leaf\n    // items navigate, so they fall through to the base handler.\n    if (this.hasSubItems && !this.sideNavCollapsed) {\n      e.preventDefault();\n      e.stopPropagation();\n      this.expanded = !this.expanded;\n      return;\n    }\n    super._onclick(e);\n  }\n\n  _onToggleClick(e: CustomEvent) {\n    e.preventDefault();\n    super._onToggleClick(e);\n  }\n\n  onEnterDOM() {\n    this.setAttribute(\"id\", this._id);\n\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n\n    this.items.map(item => {\n      if (this.icon) {\n        item.setAttribute(\"with-icon\", \"true\");\n      }\n      return item;\n    });\n  }\n}\n\nUDExSideNavigationItem.define();\n\nexport default UDExSideNavigationItem;\n"]}

package/dist/SideNavigationMobileTemplate.js

@@ -6,6 +6,6 @@ import { PopoverActualHorizontalAlign, PopoverActualPlacement } from "@ui5/webco
 import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 export default function SideNavigationMobileTemplate() {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { id: `udex-${this._id}-side-navigation-mobile__opener`, class: "udex-side-navigation-mobile__trigger", "aria-haspopup": "true", tabindex: 0, onKeyDown: this.handleKeydown, onClick: this.handleTriggerClick, "accessible-role": "button", "active": this._dropdownOpened || undefined, children: [_jsx("div", { class: "udex-side-navigation-mobile__selected-item", children: this._selectedItem ? (_jsxs(_Fragment, { children: [this._selectedItem.icon ? (_jsx(Icon, { class: "udex-side-navigation-mobile__selected-item-icon", name: this._selectedItem.icon })) : undefined, _jsx("span", { children: this._selectedItem.text })] })) : undefined }), _jsx(Icon, { class: "udex-side-navigation-mobile__trigger-toggle-icon", name: slimArrowDown })] }), _jsx(UDExDropdown, { id: `udex-${this._id}-side-navigation-mobile__popover`, class: "udex-side-navigation-mobile__popover", placement: PopoverActualPlacement.Bottom, onOpen: this._afterDropdownOpen, onClose: this._afterDropdownClose, horizontalAlign: PopoverActualHorizontalAlign.Stretch, height: "none", "opener": `udex-${this._id}-side-navigation-mobile__opener`,
-                "disable-target-overlap": "true", children: _jsx(UDExSideNavigation, { ref: this._setNavItems, onSelectionChange: this._handleSelectionChanged }) })] }));
+                "disable-target-overlap": "true", children: _jsx(UDExSideNavigation, { ref: this._setNavItems, onSelectionChange: this._handleSelectionChanged, "in-mobile": "" }) })] }));
 }
 //# sourceMappingURL=SideNavigationMobileTemplate.js.map

package/dist/SideNavigationMobileTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationMobileTemplate.js","sourceRoot":"","sources":["../src/SideNavigationMobileTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,CACL,8BACE,eACE,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC,EACrD,KAAK,EAAC,sCAAsC,mBAC9B,MAAM,EACpB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,kBAAkB,qBAChB,QAAQ,EAEtB,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,SAAS,aAE7C,cAAK,KAAK,EAAC,4CAA4C,YACpD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,8BACG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IACH,KAAK,EAAC,iDAAiD,EACvD,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GACxB,CACR,CAAC,CAAC,CAAC,SAAS,EACb,yBAAO,IAAI,CAAC,aAAa,CAAC,IAAI,GAAQ,IACrC,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,EACN,KAAC,IAAI,IACH,KAAK,EAAC,kDAAkD,EACxD,IAAI,EAAE,aAAa,GACd,IACH,EACN,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,kCAAkC,EACtD,KAAK,EAAC,sCAAsC,EAC5C,SAAS,EAAE,sBAAsB,CAAC,MAAM,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,eAAe,EAAE,4BAA4B,CAAC,OAAO,EACrD,MAAM,EAAC,MAAM,EAEX,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC;gBAC3D,wBAAwB,EAAE,MAAM,YAElC,KAAC,kBAAkB,IACjB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,iBAAiB,EAAE,IAAI,CAAC,uBAA8B,GACnC,GACR,IACd,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSideNavigationMobile from \"./SideNavigationMobile.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport { PopoverActualHorizontalAlign, PopoverActualPlacement } from \"@ui5/webcomponents/Popover.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {\n  return (\n    <>\n      <div\n        id={`udex-${this._id}-side-navigation-mobile__opener`}\n        class=\"udex-side-navigation-mobile__trigger\"\n        aria-haspopup=\"true\"\n        tabindex={0}\n        onKeyDown={this.handleKeydown}\n        onClick={this.handleTriggerClick}\n        accessible-role=\"button\"\n        {...{\n          \"active\": this._dropdownOpened || undefined,\n        }}>\n        <div class=\"udex-side-navigation-mobile__selected-item\">\n          {this._selectedItem ? (\n            <>\n              {this._selectedItem.icon ? (\n                <Icon\n                  class=\"udex-side-navigation-mobile__selected-item-icon\"\n                  name={this._selectedItem.icon}>\n                </Icon>\n              ) : undefined}\n              <span>{this._selectedItem.text}</span>\n            </>\n          ) : undefined}\n        </div>\n        <Icon\n          class=\"udex-side-navigation-mobile__trigger-toggle-icon\"\n          name={slimArrowDown}>\n        </Icon>\n      </div>\n      <UDExDropdown\n        id={`udex-${this._id}-side-navigation-mobile__popover`}\n        class=\"udex-side-navigation-mobile__popover\"\n        placement={PopoverActualPlacement.Bottom}\n        onOpen={this._afterDropdownOpen}\n        onClose={this._afterDropdownClose}\n        horizontalAlign={PopoverActualHorizontalAlign.Stretch}\n        height=\"none\"\n        {...{\n          \"opener\": `udex-${this._id}-side-navigation-mobile__opener`,\n          \"disable-target-overlap\": \"true\",\n        }}>\n        <UDExSideNavigation\n          ref={this._setNavItems}\n          onSelectionChange={this._handleSelectionChanged as any}>\n        </UDExSideNavigation>\n      </UDExDropdown>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"SideNavigationMobileTemplate.js","sourceRoot":"","sources":["../src/SideNavigationMobileTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrG,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,4BAA4B;IAClD,OAAO,CACL,8BACE,eACE,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC,EACrD,KAAK,EAAC,sCAAsC,mBAC9B,MAAM,EACpB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,kBAAkB,qBAChB,QAAQ,EAEtB,QAAQ,EAAE,IAAI,CAAC,eAAe,IAAI,SAAS,aAE7C,cAAK,KAAK,EAAC,4CAA4C,YACpD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,8BACG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,KAAC,IAAI,IACH,KAAK,EAAC,iDAAiD,EACvD,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,GACxB,CACR,CAAC,CAAC,CAAC,SAAS,EACb,yBAAO,IAAI,CAAC,aAAa,CAAC,IAAI,GAAQ,IACrC,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,EACN,KAAC,IAAI,IACH,KAAK,EAAC,kDAAkD,EACxD,IAAI,EAAE,aAAa,GACd,IACH,EACN,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,kCAAkC,EACtD,KAAK,EAAC,sCAAsC,EAC5C,SAAS,EAAE,sBAAsB,CAAC,MAAM,EACxC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,eAAe,EAAE,4BAA4B,CAAC,OAAO,EACrD,MAAM,EAAC,MAAM,EAEX,QAAQ,EAAE,QAAQ,IAAI,CAAC,GAAG,iCAAiC;gBAC3D,wBAAwB,EAAE,MAAM,YAElC,KAAC,kBAAkB,IACjB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,iBAAiB,EAAE,IAAI,CAAC,uBAA8B,EAChD,WAAW,EAAE,EAAE,GACF,GACR,IACd,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSideNavigationMobile from \"./SideNavigationMobile.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport { PopoverActualHorizontalAlign, PopoverActualPlacement } from \"@ui5/webcomponents/Popover.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nexport default function SideNavigationMobileTemplate(this: UDExSideNavigationMobile) {\n  return (\n    <>\n      <div\n        id={`udex-${this._id}-side-navigation-mobile__opener`}\n        class=\"udex-side-navigation-mobile__trigger\"\n        aria-haspopup=\"true\"\n        tabindex={0}\n        onKeyDown={this.handleKeydown}\n        onClick={this.handleTriggerClick}\n        accessible-role=\"button\"\n        {...{\n          \"active\": this._dropdownOpened || undefined,\n        }}>\n        <div class=\"udex-side-navigation-mobile__selected-item\">\n          {this._selectedItem ? (\n            <>\n              {this._selectedItem.icon ? (\n                <Icon\n                  class=\"udex-side-navigation-mobile__selected-item-icon\"\n                  name={this._selectedItem.icon}>\n                </Icon>\n              ) : undefined}\n              <span>{this._selectedItem.text}</span>\n            </>\n          ) : undefined}\n        </div>\n        <Icon\n          class=\"udex-side-navigation-mobile__trigger-toggle-icon\"\n          name={slimArrowDown}>\n        </Icon>\n      </div>\n      <UDExDropdown\n        id={`udex-${this._id}-side-navigation-mobile__popover`}\n        class=\"udex-side-navigation-mobile__popover\"\n        placement={PopoverActualPlacement.Bottom}\n        onOpen={this._afterDropdownOpen}\n        onClose={this._afterDropdownClose}\n        horizontalAlign={PopoverActualHorizontalAlign.Stretch}\n        height=\"none\"\n        {...{\n          \"opener\": `udex-${this._id}-side-navigation-mobile__opener`,\n          \"disable-target-overlap\": \"true\",\n        }}>\n        <UDExSideNavigation\n          ref={this._setNavItems}\n          onSelectionChange={this._handleSelectionChanged as any}\n          {...{ \"in-mobile\": \"\" }}>\n        </UDExSideNavigation>\n      </UDExDropdown>\n    </>\n  );\n}\n"]}

package/dist/SideNavigationSubItem.d.ts

@@ -1,3 +1,4 @@
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
 /**
  * @class
@@ -17,5 +18,27 @@ import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationS
  * @public
  */
 declare class UDExSideNavigationSubItem extends SideNavigationSubItem {
+    /**
+     * Defines whether the sub-item is expanded (shows level-3 children).
+     *
+     * @default false
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Defines the level-3 sub-items slotted inside this sub-item.
+     * @public
+     */
+    subItems: DefaultSlot<UDExSideNavigationSubItem>;
+    get hasSubItems(): boolean;
+    get focusableItems(): Array<UDExSideNavigationSubItem>;
+    get selectableItems(): Array<UDExSideNavigationSubItem>;
+    get allItems(): Array<UDExSideNavigationSubItem>;
+    onBeforeRendering(): void;
+    get _subGroupId(): string | undefined;
+    get _subExpanded(): boolean | undefined;
+    _onToggleClick(e: Event): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onclick(e: MouseEvent): void;
 }
 export default UDExSideNavigationSubItem;

package/dist/SideNavigationSubItem.js

@@ -6,7 +6,11 @@ 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";
 /**
@@ -27,12 +31,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,
+        template: SideNavigationSubItemTemplate,
         styles: [SideNavigationSubItem.styles, 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":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAE1E,OAAO,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,MAAM,GACP,MAAM,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,MAAM,wDAAwD,CAAC;AAC3F,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAE/E,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,qBAAqB;IAA7D;;QACE;;;;;WAKG;QAED,aAAQ,GAAG,KAAK,CAAC;IAgGrB,CAAC;IAvFC,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,IAAI,eAAe;QACjB,kFAAkF;QAClF,wFAAwF;QACxF,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,QAAQ;QACV,sFAAsF;QACtF,wFAAwF;QACxF,oFAAoF;QACpF,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAAC,CAAC;QAC9E,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5D,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACtD,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,UAAU,CAAC,CAAgB;QACzB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC;YAC1C,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,OAAO;YACT,CAAC;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC;gBACvB,OAAO;YACT,CAAC;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,OAAO;YACT,CAAC;YACD,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,OAAO;YACT,CAAC;QACH,CAAC;QACD,8EAA8E;QAC9E,uEAAuE;QACvE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,QAAQ,CAAC,CAAa;QACpB,sFAAsF;QACtF,wFAAwF;QACxF,wFAAwF;QACxF,2CAA2C;QAC3C,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;CACF,CAAA;AAhGG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACT;AAOjB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;2DACxB;AAfhD,yBAAyB;IAR9B,aAAa,CAAC;QACb,GAAG,EAAE,+BAA+B;QACpC,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE,CAAC,qBAAqB,CAAC,MAAM,EAAE,wBAAwB,CAAC;QAChE,YAAY,EAAE,CAAC,yBAAyB,CAAC;KAC1C,CAAC;GAEI,yBAAyB,CAwG9B;AAED,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 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\";\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, 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,10 @@
+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";
+import navDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-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(Icon, { class: "ui5-sn-item-toggle-icon", name: this.expanded ? navDownArrow : 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;AACpF,OAAO,YAAY,MAAM,wDAAwD,CAAC;AAGlF,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,KAAC,IAAI,IACH,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAClD,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAC7C,CACH,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 navDownArrow from \"@ui5/webcomponents-icons/dist/navigation-down-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          <Icon\n            class=\"ui5-sn-item-toggle-icon\"\n            name={this.expanded ? navDownArrow : navRightArrow}\n            onClick={(e: Event) => this._onToggleClick(e)}\n          />\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":";;;;;;;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;AAE/C,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAC/E,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAU7C;;;;;;;;;;;;;;;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\";\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":"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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\";\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;
     }