@sapudex/web-components 2.58.0 → 2.59.0

package/dist/SecondaryNavigationSubItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryNavigationSubItem.js","sourceRoot":"","sources":["../src/SecondaryNavigationSubItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,iCAAiC,CAAC;AAEtD,OAAO,+BAA+B,MAAM,kCAAkC,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,kDAAkD,CAAC;AAC1D,OAAO,mDAAmD,CAAC;AAC3D,OAAO,kCAAkC,MAAM,iEAAiE,CAAC;AACjH,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,SAAS;AACT,OAAO,6BAA6B,MAAM,sDAAsD,CAAC;AAWjG;;;;;;;;;;;;;;;;;GAiBG;AA4BH,IAAM,8BAA8B,sCAApC,MAAM,8BAA+B,SAAQ,+BAA+B;IAA5E;;QAcE;;;;;WAKG;QAED,gBAAW,GAAmB,EAAE,CAAC;IAgCrC,CAAC;IA3BC,WAAW,CAAC,CAAe;QACzB,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,EAAE;YACxC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACrC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC3D,CAAC;IAED,IAAI,mBAAmB;QACrB,MAAM,KAAK,GAAG,SAAS,CAAC,gCAA8B,EAAE,iBAAiB,CAAC,CAAC;QAC3E,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;IACvC,CAAC;CACF,CAAA;AAzCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8DACT;AASjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEACQ;AAG5B;IADN,IAAI,CAAC,yBAAyB,CAAC;wDACF;AAxB1B,8BAA8B;IA3BnC,aAAa,CAAC;QACb,GAAG,EAAE,oCAAoC;QACzC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,6BAA6B;QACrC,QAAQ,EAAE,kCAAkC;QAC5C,YAAY,EAAE,CAAC,OAAO,CAAC;KACxB,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;IAE7D;;;;;;OAMG;;IACF,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;GAExD,8BAA8B,CAqDnC;AAED,8BAA8B,CAAC,MAAM,EAAE,CAAC;AAExC,eAAe,8BAA8B,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport UDExSecondaryNavigationItemBase from \"./SecondaryNavigationItemBase.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { BACK_BUTTON_LABEL } from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport SecondaryNavigationSubItemTemplate from \"./generated/templates/SecondaryNavigationSubItemTemplate.lit.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport SecondaryNavigationSubItemCss from \"./generated/themes/SecondaryNavigationSubItem.css.js\";\n\ntype UDExSecondaryNavigationSubItemClickEventDetail = {\n  item: UDExSecondaryNavigationSubItem,\n  originalEvent: PointerEvent\n}\n\ntype UDExSecondaryNavigationSubItemBackClickEventDetail = {\n  originalEvent: PointerEvent\n}\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-secondary-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SecondaryNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends UDExSecondaryNavigationItemBase\n * @tagname udex-secondary-navigation-sub-item\n * @public\n */\n@customElement({\n  tag: \"udex-secondary-navigation-sub-item\",\n  renderer: litRender,\n  styles: SecondaryNavigationSubItemCss,\n  template: SecondaryNavigationSubItemTemplate,\n  dependencies: [UI5Icon],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n * @param {PointerEvent} originalEvent the original event object\n * @param {UDExSecondaryNavigationSubItem} item the clicked item\n */\n@event(\"sub-item-click\", { bubbles: true, cancelable: true })\n\n/**\n * Fires when back item is clicked\n *\n * @allowPreventDefault\n * @public\n * @param {PointerEvent} originalEvent the original event object\n */\n@event(\"back-item-click\", { bubbles: true, cancelable: true })\n\nclass UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {\n  eventDetails!: {\n    \"sub-item-click\": UDExSecondaryNavigationSubItemClickEventDetail,\n    \"back-item-click\": UDExSecondaryNavigationSubItemBackClickEventDetail,\n  };\n  /**\n   * Defines back item.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    isBack!: boolean;\n\n  /**\n   * List of the nested items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: Object })\n    nestedItems: Array<NavItem> = [];\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onItemClick(e: PointerEvent): void {\n    this.fireDecoratorEvent(\"sub-item-click\", {\n      item: this,\n      originalEvent: e,\n    });\n  }\n\n  onBackItemClick(e: PointerEvent): void {\n    this.fireDecoratorEvent(\"back-item-click\", { originalEvent: e });\n  }\n\n  get hasItems(): boolean {\n    return !!this.nestedItems?.length;\n  }\n\n  get isButton(): boolean {\n    return this.hasItems || !this.path;\n  }\n\n  get isSubItemActive(): boolean {\n    return !!this.getActiveSubItem(this.nestedItems)?.active;\n  }\n\n  get backButtonAriaLabel(): string {\n    const label = translate(UDExSecondaryNavigationSubItem, BACK_BUTTON_LABEL);\n    return `${this.itemLabel}, ${label}`;\n  }\n}\n\nUDExSecondaryNavigationSubItem.define();\n\nexport default UDExSecondaryNavigationSubItem;\nexport type { UDExSecondaryNavigationSubItemClickEventDetail, UDExSecondaryNavigationSubItemBackClickEventDetail };\n"]}
+{"version":3,"file":"SecondaryNavigationSubItem.js","sourceRoot":"","sources":["../src/SecondaryNavigationSubItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAE1E,OAAO,+BAA+B,MAAM,kCAAkC,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,kCAAkC,MAAM,yCAAyC,CAAC;AACzF,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,SAAS;AACT,OAAO,6BAA6B,MAAM,sDAAsD,CAAC;AAWjG;;;;;;;;;;;;;;;;;GAiBG;AA2BH,IAAM,8BAA8B,sCAApC,MAAM,8BAA+B,SAAQ,+BAA+B;IAA5E;;QAcE;;;;;WAKG;QAED,gBAAW,GAAmB,EAAE,CAAC;IAgCrC,CAAC;IA3BC,WAAW,CAAC,CAAe;QACzB,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,EAAE;YACxC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,eAAe,CAAC,CAAe;QAC7B,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACrC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC3D,CAAC;IAED,IAAI,mBAAmB;QACrB,MAAM,KAAK,GAAG,SAAS,CAAC,gCAA8B,EAAE,iBAAiB,CAAC,CAAC;QAC3E,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;IACvC,CAAC;CACF,CAAA;AAzCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8DACT;AASjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEACQ;AAG5B;IADN,IAAI,CAAC,yBAAyB,CAAC;wDACF;AAxB1B,8BAA8B;IA1BnC,aAAa,CAAC;QACb,GAAG,EAAE,oCAAoC;QACzC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,6BAA6B;QACrC,QAAQ,EAAE,kCAAkC;KAC7C,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;IAE7D;;;;;;OAMG;;IACF,KAAK,CAAC,iBAAiB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;GAExD,8BAA8B,CAqDnC;AAED,8BAA8B,CAAC,MAAM,EAAE,CAAC;AAExC,eAAe,8BAA8B,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport type { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport UDExSecondaryNavigationItemBase from \"./SecondaryNavigationItemBase.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { BACK_BUTTON_LABEL } from \"./generated/i18n/i18n-defaults.js\";\nimport SecondaryNavigationSubItemTemplate from \"./SecondaryNavigationSubItemTemplate.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport SecondaryNavigationSubItemCss from \"./generated/themes/SecondaryNavigationSubItem.css.js\";\n\ntype UDExSecondaryNavigationSubItemClickEventDetail = {\n  item: UDExSecondaryNavigationSubItem,\n  originalEvent: PointerEvent\n}\n\ntype UDExSecondaryNavigationSubItemBackClickEventDetail = {\n  originalEvent: PointerEvent\n}\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-secondary-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SecondaryNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends UDExSecondaryNavigationItemBase\n * @tagname udex-secondary-navigation-sub-item\n * @public\n */\n@customElement({\n  tag: \"udex-secondary-navigation-sub-item\",\n  renderer: jsxRenderer,\n  styles: SecondaryNavigationSubItemCss,\n  template: SecondaryNavigationSubItemTemplate,\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n * @param {PointerEvent} originalEvent the original event object\n * @param {UDExSecondaryNavigationSubItem} item the clicked item\n */\n@event(\"sub-item-click\", { bubbles: true, cancelable: true })\n\n/**\n * Fires when back item is clicked\n *\n * @allowPreventDefault\n * @public\n * @param {PointerEvent} originalEvent the original event object\n */\n@event(\"back-item-click\", { bubbles: true, cancelable: true })\n\nclass UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {\n  eventDetails!: {\n    \"sub-item-click\": UDExSecondaryNavigationSubItemClickEventDetail,\n    \"back-item-click\": UDExSecondaryNavigationSubItemBackClickEventDetail,\n  };\n  /**\n   * Defines back item.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    isBack!: boolean;\n\n  /**\n   * List of the nested items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: Object })\n    nestedItems: Array<NavItem> = [];\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onItemClick(e: PointerEvent): void {\n    this.fireDecoratorEvent(\"sub-item-click\", {\n      item: this,\n      originalEvent: e,\n    });\n  }\n\n  onBackItemClick(e: PointerEvent): void {\n    this.fireDecoratorEvent(\"back-item-click\", { originalEvent: e });\n  }\n\n  get hasItems(): boolean {\n    return !!this.nestedItems?.length;\n  }\n\n  get isButton(): boolean {\n    return this.hasItems || !this.path;\n  }\n\n  get isSubItemActive(): boolean {\n    return !!this.getActiveSubItem(this.nestedItems)?.active;\n  }\n\n  get backButtonAriaLabel(): string {\n    const label = translate(UDExSecondaryNavigationSubItem, BACK_BUTTON_LABEL);\n    return `${this.itemLabel}, ${label}`;\n  }\n}\n\nUDExSecondaryNavigationSubItem.define();\n\nexport default UDExSecondaryNavigationSubItem;\nexport type { UDExSecondaryNavigationSubItemClickEventDetail, UDExSecondaryNavigationSubItemBackClickEventDetail };\n"]}

package/dist/SecondaryNavigationSubItemTemplate.d.ts

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

package/dist/SecondaryNavigationSubItemTemplate.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import slimArrowLeftIcon from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+export default function SecondaryNavigationSubItemTemplate() {
+    if (this.isBack) {
+        return (_jsxs("button", { className: "udex-secondary-navigation__dropdown-item", onClick: this.onBackItemClick, "aria-label": this.backButtonAriaLabel, tabindex: 0, "is-back": "", children: [_jsx(UI5Icon, { class: "udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back", name: slimArrowLeftIcon, mode: IconMode.Decorative }), this.itemLabel] }));
+    }
+    if (this.isButton) {
+        return (_jsxs("button", { onClick: this.onItemClick, "aria-haspopup": this.hasItems || undefined, "sub-active": this.isSubItemActive || undefined,
+            "active": this.active || undefined, "aria-label": this.label || undefined, tabindex: 0, "aria-current": (this.ariaCurrent || undefined), className: "udex-secondary-navigation__dropdown-item", children: [this.itemLabel, this.hasItems && (_jsx(UI5Icon, { class: "udex-secondary-navigation__dropdown-icon", name: slimArrowRightIcon, mode: IconMode.Decorative }))] }));
+    }
+    return (_jsx("a", { className: "udex-secondary-navigation__dropdown-item", onClick: this.onItemClick, href: this.path, target: this.target, tabindex: 0, "aria-current": (this.ariaCurrent || undefined), "active": this.active || undefined, children: this.itemLabel }));
+}
+//# sourceMappingURL=SecondaryNavigationSubItemTemplate.js.map

package/dist/SecondaryNavigationSubItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SecondaryNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,iBAAiB,MAAM,kDAAkD,CAAC;AACjF,OAAO,kBAAkB,MAAM,mDAAmD,CAAC;AAEnF,MAAM,CAAC,OAAO,UAAU,kCAAkC;IACxD,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,OAAO,CACL,kBACE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,IAAI,CAAC,eAAsB,gBACxB,IAAI,CAAC,mBAAmB,EACpC,QAAQ,EAAE,CAAC,EACL,SAAS,EAAE,EAAE,aACnB,KAAC,OAAO,IACN,KAAK,EAAC,wFAAwF,EAC9F,IAAI,EAAE,iBAAiB,EACvB,IAAI,EAAE,QAAQ,CAAC,UAAU,GACjB,EACT,IAAI,CAAC,SAAS,IACR,CACV,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO,CACL,kBACE,OAAO,EAAE,IAAI,CAAC,WAAkB,mBACjB,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEvC,YAAY,EAAE,IAAI,CAAC,eAAe,IAAI,SAAS;YAC/C,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,gBAExB,IAAI,CAAC,KAAK,IAAI,SAAS,EACnC,QAAQ,EAAE,CAAC,kBACG,CAAC,IAAI,CAAC,WAAW,IAAI,SAAS,CAAuB,EACnE,SAAS,EAAC,0CAA0C,aACnD,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,QAAQ,IAAI,CAChB,KAAC,OAAO,IACN,KAAK,EAAC,0CAA0C,EAChD,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,QAAQ,CAAC,UAAU,GACjB,CACX,IACM,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,YACE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,IAAI,CAAC,WAAkB,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,CAAC,kBACG,CAAC,IAAI,CAAC,WAAW,IAAI,SAAS,CAAuB,EAC7D,QAAQ,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,YACvC,IAAI,CAAC,SAAS,GACb,CACL,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSecondaryNavigationSubItem from \"./SecondaryNavigationSubItem.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport slimArrowLeftIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRightIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function SecondaryNavigationSubItemTemplate(this: UDExSecondaryNavigationSubItem) {\n  if (this.isBack) {\n    return (\n      <button\n        className=\"udex-secondary-navigation__dropdown-item\"\n        onClick={this.onBackItemClick as any}\n        aria-label={this.backButtonAriaLabel}\n        tabindex={0}\n        {...{ \"is-back\": \"\" }}>\n        <UI5Icon\n          class=\"udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back\"\n          name={slimArrowLeftIcon}\n          mode={IconMode.Decorative}>\n        </UI5Icon>\n        {this.itemLabel}\n      </button>\n    );\n  }\n\n  if (this.isButton) {\n    return (\n      <button\n        onClick={this.onItemClick as any}\n        aria-haspopup={this.hasItems || undefined}\n        {...{\n          \"sub-active\": this.isSubItemActive || undefined,\n          \"active\": this.active || undefined,\n        }}\n        aria-label={this.label || undefined}\n        tabindex={0}\n        aria-current={(this.ariaCurrent || undefined) as \"page\" | undefined}\n        className=\"udex-secondary-navigation__dropdown-item\">\n        {this.itemLabel}\n        {this.hasItems && (\n          <UI5Icon\n            class=\"udex-secondary-navigation__dropdown-icon\"\n            name={slimArrowRightIcon}\n            mode={IconMode.Decorative}>\n          </UI5Icon>\n        )}\n      </button>\n    );\n  }\n\n  return (\n    <a\n      className=\"udex-secondary-navigation__dropdown-item\"\n      onClick={this.onItemClick as any}\n      href={this.path}\n      target={this.target}\n      tabindex={0}\n      aria-current={(this.ariaCurrent || undefined) as \"page\" | undefined}\n      {...{ \"active\": this.active || undefined }}>\n      {this.itemLabel}\n    </a>\n  );\n}\n"]}

package/dist/SecondaryNavigationTemplate.d.ts

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

package/dist/SecondaryNavigationTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExSecondaryNavigationItem from "./SecondaryNavigationItem.js";
+export default function SecondaryNavigationTemplate() {
+    return (_jsxs("div", { className: this.rootClass, children: [this.hasBreadcrumbsSlot && (_jsx("div", { className: "udex-secondary-navigation__breadcrumbs", children: _jsx("slot", { name: "breadcrumbs" }) })), _jsxs("div", { className: "udex-secondary-navigation__holder", children: [this.heading.length > 0 && (_jsx("div", { className: "udex-secondary-navigation__heading", children: this.headingHref.length > 0 ? (_jsx("a", { className: "udex-secondary-navigation__title", tabindex: 0, onClick: this.handleHeadingClick, href: this.headingHref, children: this.heading })) : (_jsx("span", { className: "udex-secondary-navigation__title", children: this.heading })) })), _jsxs("nav", { className: "udex-secondary-navigation__wrap", children: [_jsxs("ul", { className: "udex-secondary-navigation__list", onKeyDown: this.handleKeyDown, children: [this.visibleItems.map((item, index) => (_jsx("li", { className: "udex-secondary-navigation__list-item", children: _jsx(UDExSecondaryNavigationItem, { index: index, active: item.active, path: item.path, label: item.title, "mobile-link-title": item.mobileLinkTitle, target: item.target, subItems: item.items ?? [], "onui5-sub-item-click": this.handleSubItemClick, "onui5-nav-item-click": this.handleItemClick, "_nav-items-length": this.visibleItems.length }) }))), this._showMoreButton && (_jsx("li", { className: "udex-secondary-navigation__list-item", children: _jsx(UDExSecondaryNavigationItem, { index: this.visibleItems.length, "onui5-sub-item-click": this.handleSubItemClick, "onui5-nav-item-click": this.handleItemClick, label: this.moreButtonText, subItems: this._overflowItems, "_nav-items-length": this.visibleItems.length }) }))] }), this.hasDesktopButtonsSlot && (_jsx("div", { className: "udex-secondary-navigation__buttons", children: _jsx("slot", { name: "buttons" }) }))] })] }), _jsx(UDExSecondaryNavigationItem, { class: "udex-secondary-navigation__mobile-nav", role: "button", "aria-label": this.mobileMenuOpenerAriaLabel, label: this.heading, "mobile-link-title": this.title, "onui5-nav-item-click": this.handleMobileMenuOpenerClick, "onui5-sub-item-click": this.handleSubItemClick, onKeyDown: this.handleKeyDown, subItems: this.parsedItems, "_is-mobile-menu-opener": "",
+                "_max-height": this.maxDropdownHeight, children: this.hasMobileButtonsSlot && (_jsx("div", { className: "udex-secondary-navigation__buttons", onClick: this.handleMobileButtonsClick, children: _jsx("slot", { name: "buttons" }) })) })] }));
+}
+//# sourceMappingURL=SecondaryNavigationTemplate.js.map

package/dist/SecondaryNavigationTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationTemplate.js","sourceRoot":"","sources":["../src/SecondaryNavigationTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,2BAA2B,MAAM,8BAA8B,CAAC;AAEvE,MAAM,CAAC,OAAO,UAAU,2BAA2B;IACjD,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,SAAS,aAC3B,IAAI,CAAC,kBAAkB,IAAI,CAC1B,cAAK,SAAS,EAAC,wCAAwC,YACrD,eAAM,IAAI,EAAC,aAAa,GAAQ,GAC5B,CACP,EACD,eAAK,SAAS,EAAC,mCAAmC,aAC/C,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1B,cAAK,SAAS,EAAC,oCAAoC,YAChD,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,YACE,SAAS,EAAC,kCAAkC,EAC5C,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,kBAAyB,EACvC,IAAI,EAAE,IAAI,CAAC,WAAW,YACrB,IAAI,CAAC,OAAO,GACX,CACL,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,kCAAkC,YAAE,IAAI,CAAC,OAAO,GAAQ,CACzE,GACG,CACP,EACD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,cACE,SAAS,EAAC,iCAAiC,EAC3C,SAAS,EAAE,IAAI,CAAC,aAAa,aAC5B,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,aAAI,SAAS,EAAC,sCAAsC,YAClD,KAAC,2BAA2B,IAC1B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,uBACE,IAAI,CAAC,eAAe,EACvC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE,0BACJ,IAAI,CAAC,kBAAkB,0BACvB,IAAI,CAAC,eAAe,EACpC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GACvB,GAC3B,CACN,CAAC,EACD,IAAI,CAAC,eAAe,IAAI,CACvB,aAAI,SAAS,EAAC,sCAAsC,YAClD,KAAC,2BAA2B,IAC1B,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,0BACT,IAAI,CAAC,kBAAkB,0BACvB,IAAI,CAAC,eAAe,EAC1C,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,QAAQ,EAAE,IAAI,CAAC,cAAc,EACvB,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GACvB,GAC3B,CACN,IACE,EACJ,IAAI,CAAC,qBAAqB,IAAI,CAC7B,cAAK,SAAS,EAAC,oCAAoC,YACjD,eAAM,IAAI,EAAC,SAAS,GAAQ,GACxB,CACP,IACG,IACF,EACN,KAAC,2BAA2B,IAC1B,KAAK,EAAC,uCAAuC,EAC7C,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,yBAAyB,EAC1C,KAAK,EAAE,IAAI,CAAC,OAAO,uBACA,IAAI,CAAC,KAAK,0BACP,IAAI,CAAC,2BAA2B,0BAChC,IAAI,CAAC,kBAAkB,EAC7C,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,WAAW,EAExB,wBAAwB,EAAE,EAAE;gBAC5B,aAAa,EAAE,IAAI,CAAC,iBAAiB,YAEtC,IAAI,CAAC,oBAAoB,IAAI,CAC5B,cAAK,SAAS,EAAC,oCAAoC,EAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,YACxF,eAAM,IAAI,EAAC,SAAS,GAAQ,GACxB,CACP,GAC2B,IAC1B,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type UDExSecondaryNavigation from \"./SecondaryNavigation.js\";\nimport UDExSecondaryNavigationItem from \"./SecondaryNavigationItem.js\";\n\nexport default function SecondaryNavigationTemplate(this: UDExSecondaryNavigation) {\n  return (\n    <div className={this.rootClass}>\n      {this.hasBreadcrumbsSlot && (\n        <div className=\"udex-secondary-navigation__breadcrumbs\">\n          <slot name=\"breadcrumbs\"></slot>\n        </div>\n      )}\n      <div className=\"udex-secondary-navigation__holder\">\n        {this.heading.length > 0 && (\n          <div className=\"udex-secondary-navigation__heading\">\n            {this.headingHref.length > 0 ? (\n              <a\n                className=\"udex-secondary-navigation__title\"\n                tabindex={0}\n                onClick={this.handleHeadingClick as any}\n                href={this.headingHref}>\n                {this.heading}\n              </a>\n            ) : (\n              <span className=\"udex-secondary-navigation__title\">{this.heading}</span>\n            )}\n          </div>\n        )}\n        <nav className=\"udex-secondary-navigation__wrap\">\n          <ul\n            className=\"udex-secondary-navigation__list\"\n            onKeyDown={this.handleKeyDown}>\n            {this.visibleItems.map((item, index) => (\n              <li className=\"udex-secondary-navigation__list-item\">\n                <UDExSecondaryNavigationItem\n                  index={index}\n                  active={item.active}\n                  path={item.path}\n                  label={item.title}\n                  mobile-link-title={item.mobileLinkTitle}\n                  target={item.target}\n                  subItems={item.items ?? []}\n                  onui5-sub-item-click={this.handleSubItemClick}\n                  onui5-nav-item-click={this.handleItemClick}\n                  {...{ \"_nav-items-length\": this.visibleItems.length }}>\n                </UDExSecondaryNavigationItem>\n              </li>\n            ))}\n            {this._showMoreButton && (\n              <li className=\"udex-secondary-navigation__list-item\">\n                <UDExSecondaryNavigationItem\n                  index={this.visibleItems.length}\n                  onui5-sub-item-click={this.handleSubItemClick}\n                  onui5-nav-item-click={this.handleItemClick}\n                  label={this.moreButtonText}\n                  subItems={this._overflowItems}\n                  {...{ \"_nav-items-length\": this.visibleItems.length }}>\n                </UDExSecondaryNavigationItem>\n              </li>\n            )}\n          </ul>\n          {this.hasDesktopButtonsSlot && (\n            <div className=\"udex-secondary-navigation__buttons\">\n              <slot name=\"buttons\"></slot>\n            </div>\n          )}\n        </nav>\n      </div>\n      <UDExSecondaryNavigationItem\n        class=\"udex-secondary-navigation__mobile-nav\"\n        role=\"button\"\n        aria-label={this.mobileMenuOpenerAriaLabel}\n        label={this.heading}\n        mobile-link-title={this.title}\n        onui5-nav-item-click={this.handleMobileMenuOpenerClick}\n        onui5-sub-item-click={this.handleSubItemClick}\n        onKeyDown={this.handleKeyDown}\n        subItems={this.parsedItems}\n        {...{\n          \"_is-mobile-menu-opener\": \"\",\n          \"_max-height\": this.maxDropdownHeight\n        }}>\n        {this.hasMobileButtonsSlot && (\n          <div className=\"udex-secondary-navigation__buttons\" onClick={this.handleMobileButtonsClick}>\n            <slot name=\"buttons\"></slot>\n          </div>\n        )}\n      </UDExSecondaryNavigationItem>\n    </div>\n  );\n}\n"]}

package/dist/SideNavigationMobile.d.ts

@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
-import UDExDropdown from "./Dropdown.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import type UDExDropdown from "./Dropdown.js";
 import type UDExSideNavigationItem from "./SideNavigationItem.js";
 import type UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
 import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
@@ -56,10 +55,10 @@ declare class UDExSideNavigationMobile extends UI5Element {
      */
     _selectedItem: SelectedItem;
     _navItems: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
-    _initialized: boolean;
     _dropdown: UDExDropdown;
     onBeforeRendering(): void;
     onAfterRendering(): void;
+    _setNavItems: (sideNavigation: HTMLElement | null) => void;
     _getResponsePopover(): UDExDropdown;
     _afterDropdownOpen(): void;
     _afterDropdownClose(): void;

package/dist/SideNavigationMobile.js

@@ -8,12 +8,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
-import UDExSideNavigation from "./SideNavigation.js";
-import UDExDropdown from "./Dropdown.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
-import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SideNavigationMobileTemplate from "./SideNavigationMobileTemplate.js";
 // Styles
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
 import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
@@ -37,16 +33,27 @@ import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMo
 let UDExSideNavigationMobile = class UDExSideNavigationMobile extends UI5Element {
     constructor() {
         super(...arguments);
-        this._initialized = false;
+        this._setNavItems = (sideNavigation) => {
+            if (!sideNavigation) {
+                return;
+            }
+            this._navItems?.forEach(item => {
+                if (item.parentElement !== sideNavigation) {
+                    sideNavigation.appendChild(item);
+                }
+            });
+        };
     }
     onBeforeRendering() {
-        if (!this._initialized) {
-            const items = this.getSlottedNodes("navItems");
-            const fixedItems = this.getSlottedNodes("fixedItems");
-            this._navItems = items.concat(fixedItems);
+        const items = this.getSlottedNodes("navItems");
+        const fixedItems = this.getSlottedNodes("fixedItems");
+        const allItems = items.concat(fixedItems);
+        if (allItems.length > 0) {
+            this._navItems = allItems;
+        }
+        if (!this._selectedItem && this._navItems?.length) {
             this._selectedItem = this.getSelectedItem() || null;
         }
-        this._initialized = true;
     }
     onAfterRendering() {
         this._dropdown = this._getResponsePopover();
@@ -75,9 +82,9 @@ let UDExSideNavigationMobile = class UDExSideNavigationMobile extends UI5Element
     }
     getSelectedItem() {
         const items = this._navItems.reduce((result, item) => {
-            return (result).concat(item.allItems);
+            return (result).concat(item.allItems || []);
         }, new Array());
-        return items.find(item => item._selected);
+        return items.find(item => item?._selected);
     }
 };
 __decorate([
@@ -95,10 +102,9 @@ __decorate([
 UDExSideNavigationMobile = __decorate([
     customElement({
         tag: "udex-side-navigation-mobile",
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: SideNavigationMobileTemplate,
         styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
-        dependencies: [UDExSideNavigation, UDExDropdown, Icon],
     })
 ], UDExSideNavigationMobile);
 UDExSideNavigationMobile.define();

package/dist/SideNavigationMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExSideNavigation from \"./SideNavigation.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport SideNavigationMobileTemplate from \"./generated/templates/SideNavigationMobileTemplate.lit.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport type UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\nimport SideNavigationMobileDropdownCss from \"./generated/themes/SideNavigationMobileDropdown.css.js\";\n\nexport type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: litRender,\n  template: SideNavigationMobileTemplate,\n  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],\n  dependencies: [UDExSideNavigation, UDExDropdown, Icon],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: DefaultSlot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Slot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _initialized = false;\n  _dropdown!: UDExDropdown;\n\n  onBeforeRendering() {\n    if (!this._initialized) {\n      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n      this._navItems = items.concat(fixedItems);\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n    this._initialized = true;\n  }\n\n  onAfterRendering() {\n    this._dropdown = this._getResponsePopover();\n  }\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  handleTriggerClick() {\n    this._dropdown.open = !this._dropdown.open;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      this.handleTriggerClick();\n    }\n  }\n\n  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = this._getResponsePopover();\n    this._dropdown.open = false;\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item._selected);\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}
+{"version":3,"file":"SideNavigationMobile.js","sourceRoot":"","sources":["../src/SideNavigationMobile.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationMobileTemplate from \"./SideNavigationMobileTemplate.js\";\nimport type UDExDropdown from \"./Dropdown.js\";\nimport type UDExSideNavigationItem from \"./SideNavigationItem.js\";\nimport type UDExSideNavigationSubItem from \"./SideNavigationSubItem.js\";\nimport type UDExSideNavigationGroup from \"./SideNavigationGroup.js\";\n\n// Styles\nimport SideNavigationMobileCss from \"./generated/themes/SideNavigationMobile.css.js\";\nimport SideNavigationMobileDropdownCss from \"./generated/themes/SideNavigationMobileDropdown.css.js\";\n\nexport type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;\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-mobile</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/SideNavigation.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-side-navigation-mobile\",\n  renderer: jsxRenderer,\n  template: SideNavigationMobileTemplate,\n  styles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],\n})\n\nclass UDExSideNavigationMobile extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\n   * inside the items.\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    navItems!: DefaultSlot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\n   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\n   *\n   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n   *\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true })\n    fixedItems!: Slot<UDExSideNavigationItem | UDExSideNavigationGroup>;\n\n  /**\n   * Indicates selected item element\n   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Object })\n    _selectedItem!: SelectedItem;\n\n  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;\n  _dropdown!: UDExDropdown;\n\n  onBeforeRendering() {\n    const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"navItems\");\n    const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>(\"fixedItems\");\n    const allItems = items.concat(fixedItems);\n    if (allItems.length > 0) {\n      this._navItems = allItems;\n    }\n    if (!this._selectedItem && this._navItems?.length) {\n      this._selectedItem = this.getSelectedItem() || null;\n    }\n  }\n\n  onAfterRendering() {\n    this._dropdown = this._getResponsePopover();\n  }\n\n  _setNavItems = (sideNavigation: HTMLElement | null) => {\n    if (!sideNavigation) {\n      return;\n    }\n    this._navItems?.forEach(item => {\n      if (item.parentElement !== sideNavigation) {\n        sideNavigation.appendChild(item);\n      }\n    });\n  };\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`[udex-dropdown]`)!;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  handleTriggerClick() {\n    this._dropdown.open = !this._dropdown.open;\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if ((event.key === \"Enter\" || event.key === \" \")) {\n      this.handleTriggerClick();\n    }\n  }\n\n  _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {\n    this._dropdown = this._getResponsePopover();\n    this._dropdown.open = false;\n    this._selectedItem = event.detail.item;\n  }\n\n  getSelectedItem(): UDExSideNavigationItem | UDExSideNavigationSubItem | undefined {\n    const items = this._navItems.reduce((result, item) => {\n      return (result).concat((item.allItems as UDExSideNavigationSubItem[]) || []);\n    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());\n    return items.find(item => item?._selected);\n  }\n}\n\nUDExSideNavigationMobile.define();\n\nexport default UDExSideNavigationMobile;\n"]}

package/dist/SideNavigationMobileTemplate.d.ts

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

package/dist/SideNavigationMobileTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExSideNavigation from "./SideNavigation.js";
+import { PopoverActualHorizontalAlign, PopoverActualPlacement } from "@ui5/webcomponents/Popover.js";
+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 }) })] }));
+}
+//# sourceMappingURL=SideNavigationMobileTemplate.js.map

package/dist/SideNavigationMobileTemplate.js.map

@@ -0,0 +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"]}

package/dist/TabNavigation.d.ts

@@ -139,6 +139,17 @@ declare class UDExTabNavigation extends UI5Element {
      */
     processTab: boolean;
     tabWidth: string;
+    /**
+     * Defines the accessible name of the tab list.
+     *
+     * When set, screen readers announce this text as the name of the tab group
+     * (e.g. "Profile navigation") as focus enters the tabs. When empty, the tab
+     * list is exposed by its role only, with no accessible name.
+     *
+     * @public
+     * @default ""
+     */
+    accessibleName: string;
     /**
      * Defines selected tab.
      *
@@ -269,6 +280,7 @@ declare class UDExTabNavigation extends UI5Element {
     get isHorizontal(): boolean;
     get isVertical(): boolean;
     get ariaOrientationValue(): string;
+    get tablistAriaLabel(): string | undefined;
     get isDesktop(): boolean;
     get moreButtonText(): string;
     static registerStaticAreaTabStyles(styles: StyleData): void;

package/dist/TabNavigation.js

@@ -150,6 +150,17 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
          */
         this.processTab = false;
         this.tabWidth = "auto";
+        /**
+         * Defines the accessible name of the tab list.
+         *
+         * When set, screen readers announce this text as the name of the tab group
+         * (e.g. "Profile navigation") as focus enters the tabs. When empty, the tab
+         * list is exposed by its role only, with no accessible name.
+         *
+         * @public
+         * @default ""
+         */
+        this.accessibleName = "";
         this._isExpanded = false;
         this._maxTitleLength = 25;
         this._maxTitleLengthInSecondLines = this._maxTitleLength * 2;
@@ -779,6 +790,9 @@ let UDExTabNavigation = UDExTabNavigation_1 = class UDExTabNavigation extends UI
     get ariaOrientationValue() {
         return this.isVertical ? "vertical" : "horizontal";
     }
+    get tablistAriaLabel() {
+        return this.accessibleName || undefined;
+    }
     get isDesktop() {
         return isDesktop();
     }
@@ -882,6 +896,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], UDExTabNavigation.prototype, "tabWidth", void 0);
+__decorate([
+    property()
+], UDExTabNavigation.prototype, "accessibleName", void 0);
 __decorate([
     property({ type: Object })
 ], UDExTabNavigation.prototype, "_selectedTab", void 0);