@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/ShellBarPopoverTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
+export default function PopoversTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx(Popover, { class: "ui5-shellbar-menu-popover", hideArrow: true, placement: "Bottom", preventInitialFocus: true, onBeforeOpen: this._menuPopoverBeforeOpen, onClose: this._menuPopoverAfterClose, children: _jsx(List, { separators: "None", selectionMode: "Single", onItemClick: this._menuItemPress, children: _jsx("slot", { name: "menuItems" }) }) }), _jsx(Popover, { class: "ui5-shellbar-overflow-popover", placement: "Bottom", preventInitialFocus: true, horizontalAlign: PopoverHorizontalAlign.End, hideArrow: true, onBeforeOpen: this._overflowPopoverBeforeOpen, onClose: this._overflowPopoverAfterClose, children: _jsx(List, { separators: "None", onItemClick: this._handleActionListClick, children: this._hiddenIcons.map((icon, index) => (_jsx(ListItemStandard, { "data-count": icon.count, "data-ui5-external-action-item-id": icon.refItemid, "data-ui5-stable": icon.stableDomRef, icon: icon.icon ? icon.icon : "", type: "Active", "onui5-_press": icon.press, tooltip: icon.tooltip, accessibilityAttributes: this.accInfo.search.accessibilityAttributes, children: icon.text }, index))) }) })] }));
+}
+//# sourceMappingURL=ShellBarPopoverTemplate.js.map

package/dist/ShellBarPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarPopoverTemplate.js","sourceRoot":"","sources":["../src/ShellBarPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAG3E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,8BACC,KAAC,OAAO,IAAC,KAAK,EAAC,2BAA2B,EACzC,SAAS,EAAE,IAAI,EACf,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,YAAY,EAAE,IAAI,CAAC,sBAAsB,EACzC,OAAO,EAAE,IAAI,CAAC,sBAAsB,YAEpC,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,cAAc,YAC9E,eAAM,IAAI,EAAC,WAAW,GAAQ,GACxB,GACE,EAEV,KAAC,OAAO,IAAC,KAAK,EAAC,+BAA+B,EAC7C,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,eAAe,EAAE,sBAAsB,CAAC,GAAG,EAC3C,SAAS,EAAE,IAAI,EACf,YAAY,EAAE,IAAI,CAAC,0BAA0B,EAC7C,OAAO,EAAE,IAAI,CAAC,0BAA0B,YAExC,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAE,IAAI,CAAC,sBAAsB,YAC9D,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,KAAC,gBAAgB,kBAEJ,IAAI,CAAC,KAAK,sCACY,IAAI,CAAC,SAAS,qBAC/B,IAAI,CAAC,YAAY,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAChC,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,YAEnE,IAAI,CAAC,IAAI,IAVL,KAAK,CAWQ,CACnB,CAAC,GACI,GACE,IACR,CACH,CAAC;AACH,CAAC","sourcesContent":["import Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport type ShellBar from \"./ShellBar.js\";\n\nexport default function PopoversTemplate(this: ShellBar) {\n\treturn (\n\t\t<>\n\t\t\t<Popover class=\"ui5-shellbar-menu-popover\"\n\t\t\t\thideArrow={true}\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tonBeforeOpen={this._menuPopoverBeforeOpen}\n\t\t\t\tonClose={this._menuPopoverAfterClose}\n\t\t\t>\n\t\t\t\t<List separators=\"None\" selectionMode=\"Single\" onItemClick={this._menuItemPress}>\n\t\t\t\t\t<slot name=\"menuItems\"></slot>\n\t\t\t\t</List>\n\t\t\t</Popover>\n\n\t\t\t<Popover class=\"ui5-shellbar-overflow-popover\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\thorizontalAlign={PopoverHorizontalAlign.End}\n\t\t\t\thideArrow={true}\n\t\t\t\tonBeforeOpen={this._overflowPopoverBeforeOpen}\n\t\t\t\tonClose={this._overflowPopoverAfterClose}\n\t\t\t>\n\t\t\t\t<List separators=\"None\" onItemClick={this._handleActionListClick}>\n\t\t\t\t\t{this._hiddenIcons.map((icon, index) => (\n\t\t\t\t\t\t<ListItemStandard\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tdata-count={icon.count}\n\t\t\t\t\t\t\tdata-ui5-external-action-item-id={icon.refItemid}\n\t\t\t\t\t\t\tdata-ui5-stable={icon.stableDomRef}\n\t\t\t\t\t\t\ticon={icon.icon ? icon.icon : \"\"}\n\t\t\t\t\t\t\ttype=\"Active\"\n\t\t\t\t\t\t\tonui5-_press={icon.press}\n\t\t\t\t\t\t\ttooltip={icon.tooltip}\n\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.search.accessibilityAttributes}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{icon.text}\n\t\t\t\t\t\t</ListItemStandard>\n\t\t\t\t\t))}\n\t\t\t\t</List>\n\t\t\t</Popover>\n\t\t</>\n\t);\n}\n"]}

package/dist/ShellBarSearch.d.ts

@@ -0,0 +1,26 @@
+import Search from "./Search.js";
+/**
+ * @class
+ * Search field for the ShellBar component.
+ * @constructor
+ * @extends Search
+ * @public
+ * @since 2.10.0
+ * @experimental
+ */
+declare class ShellBarSearch extends Search {
+    /**
+     * Indicates whether the suggestions popover should be opened on focus.
+     * @default false
+     * @public
+     */
+    autoOpen: boolean;
+    _handleSearchIconPress(): void;
+    _onFocusOutSearch(e: FocusEvent): void;
+    _handleInput(e: InputEvent): void;
+    get _effectiveIconTooltip(): string;
+    get nativeInput(): HTMLInputElement | null | undefined;
+    _onfocusin(): void;
+    onBeforeRendering(): void;
+}
+export default ShellBarSearch;

package/dist/ShellBarSearch.js

@@ -0,0 +1,97 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ShellBarSearch_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import Search from "./Search.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import ShellBarSearchTemplate from "./ShellBarSearchTemplate.js";
+import ShellBarSearchCss from "./generated/themes/ShellBarSearch.css.js";
+import { SEARCH_FIELD_SEARCH_ICON, SHELLBAR_SEARCH_EXPANDED, SHELLBAR_SEARCH_COLLAPSED, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ * Search field for the ShellBar component.
+ * @constructor
+ * @extends Search
+ * @public
+ * @since 2.10.0
+ * @experimental
+ */
+let ShellBarSearch = ShellBarSearch_1 = class ShellBarSearch extends Search {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates whether the suggestions popover should be opened on focus.
+         * @default false
+         * @public
+         */
+        this.autoOpen = false;
+    }
+    _handleSearchIconPress() {
+        super._handleSearchIconPress();
+        if (this.collapsed) {
+            this.collapsed = false;
+        }
+        else if (!this.value) {
+            this.collapsed = true;
+        }
+    }
+    _onFocusOutSearch(e) {
+        if (isPhone()) {
+            return;
+        }
+        super._onFocusOutSearch(e);
+    }
+    _handleInput(e) {
+        super._handleInput(e);
+        if (isPhone()) {
+            this._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e.inputType);
+        }
+    }
+    get _effectiveIconTooltip() {
+        if (this.collapsed) {
+            return ShellBarSearch_1.i18nBundle.getText(SHELLBAR_SEARCH_COLLAPSED);
+        }
+        if (this.value) {
+            return ShellBarSearch_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON);
+        }
+        return ShellBarSearch_1.i18nBundle.getText(SHELLBAR_SEARCH_EXPANDED);
+    }
+    get nativeInput() {
+        const domRef = this.shadowRoot;
+        return isPhone() ? domRef?.querySelector(`[ui5-responsive-popover] input`) : super.nativeInput;
+    }
+    _onfocusin() {
+        super._onfocusin();
+        if (this.autoOpen) {
+            this.open = true;
+            this.fireDecoratorEvent("open");
+        }
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        if (isPhone()) {
+            this.collapsed = true;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ShellBarSearch.prototype, "autoOpen", void 0);
+ShellBarSearch = ShellBarSearch_1 = __decorate([
+    customElement({
+        tag: "ui5-shellbar-search",
+        template: ShellBarSearchTemplate,
+        styles: [
+            Search.styles,
+            ShellBarSearchCss,
+        ],
+    })
+], ShellBarSearch);
+ShellBarSearch.define();
+export default ShellBarSearch;
+//# sourceMappingURL=ShellBarSearch.js.map

package/dist/ShellBarSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearch.js","sourceRoot":"","sources":["../src/ShellBarSearch.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AAEzE,OAAO,EACN,wBAAwB,EACxB,wBAAwB,EACxB,yBAAyB,GACzB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;GAQG;AAUH,IAAM,cAAc,sBAApB,MAAM,cAAe,SAAQ,MAAM;IAAnC;;QACC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA8DlB,CAAC;IA5DA,sBAAsB;QACrB,KAAK,CAAC,sBAAsB,EAAE,CAAC;QAE/B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACxB,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC;IACF,CAAC;IAED,iBAAiB,CAAC,CAAa;QAC9B,IAAI,OAAO,EAAE,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC5B,CAAC;IAED,YAAY,CAAC,CAAa;QACzB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAEtB,IAAI,OAAO,EAAE,EAAE,CAAC;YACf,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACxF,CAAC;IACF,CAAC;IAED,IAAI,qBAAqB;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;QACrE,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,WAAW;QACd,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAE/B,OAAO,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,aAAa,CAAmB,gCAAgC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC;IAClH,CAAC;IAED,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,OAAO,EAAE,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC;IACF,CAAC;CACD,CAAA;AA9DA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACX;AAPZ,cAAc;IATnB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE;YACP,MAAM,CAAC,MAAM;YACb,iBAAiB;SACjB;KACD,CAAC;GAEI,cAAc,CAqEnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport Search from \"./Search.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ShellBarSearchTemplate from \"./ShellBarSearchTemplate.js\";\nimport ShellBarSearchCss from \"./generated/themes/ShellBarSearch.css.js\";\n\nimport {\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSHELLBAR_SEARCH_EXPANDED,\n\tSHELLBAR_SEARCH_COLLAPSED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n * Search field for the ShellBar component.\n * @constructor\n * @extends Search\n * @public\n * @since 2.10.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-shellbar-search\",\n\ttemplate: ShellBarSearchTemplate,\n\tstyles: [\n\t\tSearch.styles,\n\t\tShellBarSearchCss,\n\t],\n})\n\nclass ShellBarSearch extends Search {\n\t/**\n\t * Indicates whether the suggestions popover should be opened on focus.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tautoOpen = false;\n\n\t_handleSearchIconPress() {\n\t\tsuper._handleSearchIconPress();\n\n\t\tif (this.collapsed) {\n\t\t\tthis.collapsed = false;\n\t\t} else if (!this.value) {\n\t\t\tthis.collapsed = true;\n\t\t}\n\t}\n\n\t_onFocusOutSearch(e: FocusEvent) {\n\t\tif (isPhone()) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._onFocusOutSearch(e);\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tsuper._handleInput(e);\n\n\t\tif (isPhone()) {\n\t\t\tthis._performItemSelectionOnMobile = this._shouldPerformSelectionOnMobile(e.inputType);\n\t\t}\n\t}\n\n\tget _effectiveIconTooltip() {\n\t\tif (this.collapsed) {\n\t\t\treturn ShellBarSearch.i18nBundle.getText(SHELLBAR_SEARCH_COLLAPSED);\n\t\t}\n\n\t\tif (this.value) {\n\t\t\treturn ShellBarSearch.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON);\n\t\t}\n\n\t\treturn ShellBarSearch.i18nBundle.getText(SHELLBAR_SEARCH_EXPANDED);\n\t}\n\n\tget nativeInput() {\n\t\tconst domRef = this.shadowRoot;\n\n\t\treturn isPhone() ? domRef?.querySelector<HTMLInputElement>(`[ui5-responsive-popover] input`) : super.nativeInput;\n\t}\n\n\t_onfocusin() {\n\t\tsuper._onfocusin();\n\n\t\tif (this.autoOpen) {\n\t\t\tthis.open = true;\n\t\t\tthis.fireDecoratorEvent(\"open\");\n\t\t}\n\t}\n\n\tonBeforeRendering(): void {\n\t\tsuper.onBeforeRendering();\n\n\t\tif (isPhone()) {\n\t\t\tthis.collapsed = true;\n\t\t}\n\t}\n}\n\nShellBarSearch.define();\n\nexport default ShellBarSearch;\n"]}

package/dist/ShellBarSearchPopoverTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ShellBarSearch from "./ShellBarSearch.js";
+export default function ShellBarSearchPopoverTemplate(this: ShellBarSearch): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ShellBarSearchPopoverTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import SearchPopoverTemplate from "./SearchPopoverTemplate.js";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+export default function ShellBarSearchPopoverTemplate() {
+    return (SearchPopoverTemplate.call(this, ShellBarSearchDialogHeader));
+}
+function ShellBarSearchDialogHeader() {
+    return (_jsx(_Fragment, { children: _jsxs("header", { slot: "header", class: "ui5-search-popup-searching-header", children: [_jsx("div", { class: "ui5-shellbar-search-field-wrapper", children: SearchFieldTemplate.call(this, { forceExpanded: true }) }), _jsx(Button, { design: ButtonDesign.Transparent, onClick: this._handleCancel, children: this.cancelButtonText })] }) }));
+}
+//# sourceMappingURL=ShellBarSearchPopoverTemplate.js.map

package/dist/ShellBarSearchPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearchPopoverTemplate.js","sourceRoot":"","sources":["../src/ShellBarSearchPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACpD,OAAO,CACN,qBAAqB,CAAC,IAAI,CAAC,IAAI,EAAE,0BAA0B,CAAC,CAC5D,CAAC;AACH,CAAC;AAED,SAAS,0BAA0B;IAClC,OAAO,CAAC,4BACP,kBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mCAAmC,aAE9D,cAAK,KAAK,EAAC,mCAAmC,YAC3C,mBAAmB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,GACpD,EAEN,KAAC,MAAM,IAAC,MAAM,EAAE,YAAY,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,YAAG,IAAI,CAAC,gBAAgB,GAAU,IAC/F,GACP,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport type ShellBarSearch from \"./ShellBarSearch.js\";\nimport SearchPopoverTemplate from \"./SearchPopoverTemplate.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\n\nexport default function ShellBarSearchPopoverTemplate(this: ShellBarSearch) {\n\treturn (\n\t\tSearchPopoverTemplate.call(this, ShellBarSearchDialogHeader)\n\t);\n}\n\nfunction ShellBarSearchDialogHeader(this: ShellBarSearch) {\n\treturn (<>\n\t\t<header slot=\"header\" class=\"ui5-search-popup-searching-header\">\n\n\t\t\t<div class=\"ui5-shellbar-search-field-wrapper\">\n\t\t\t\t{ SearchFieldTemplate.call(this, { forceExpanded: true }) }\n\t\t\t</div>\n\n\t\t\t<Button design={ButtonDesign.Transparent} onClick={this._handleCancel}>{this.cancelButtonText}</Button>\n\t\t</header>\n\t</>);\n}\n"]}

package/dist/ShellBarSearchTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ShellBarSearch from "./ShellBarSearch.js";
+export default function ShellBarSearchTemplate(this: ShellBarSearch): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ShellBarSearchTemplate.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.js";
+export default function ShellBarSearchTemplate() {
+    return (_jsxs(_Fragment, { children: [SearchFieldTemplate.call(this), ShellBarSearchPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=ShellBarSearchTemplate.js.map

package/dist/ShellBarSearchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSearchTemplate.js","sourceRoot":"","sources":["../src/ShellBarSearchTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAE3D,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CACN,8BACG,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,IACxC,CACH,CAAC;AACH,CAAC","sourcesContent":["import SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport type ShellBarSearch from \"./ShellBarSearch.js\";\nimport ShellBarSearchPopoverTemplate from \"./ShellBarSearchPopoverTemplate.js\";\n\nexport default function ShellBarSearchTemplate(this: ShellBarSearch) {\n\treturn (\n\t\t<>\n\t\t\t{ SearchFieldTemplate.call(this) }\n\t\t\t{ ShellBarSearchPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/ShellBarSpacer.d.ts

@@ -0,0 +1,17 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.
+ * **Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.7.0
+ * @abstract
+ * @public
+ */
+declare class ShellBarSpacer extends UI5Element {
+    visible: boolean;
+}
+export default ShellBarSpacer;

package/dist/ShellBarSpacer.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.
+ * **Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.
+ * @constructor
+ * @extends UI5Element
+ * @since 2.7.0
+ * @abstract
+ * @public
+ */
+let ShellBarSpacer = class ShellBarSpacer extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ShellBarSpacer.prototype, "visible", void 0);
+ShellBarSpacer = __decorate([
+    customElement({
+        tag: "ui5-shellbar-spacer",
+    })
+], ShellBarSpacer);
+ShellBarSpacer.define();
+export default ShellBarSpacer;
+//# sourceMappingURL=ShellBarSpacer.js.map

package/dist/ShellBarSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarSpacer.js","sourceRoot":"","sources":["../src/ShellBarSpacer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE;;;;;;;;;;;GAWG;AAKH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAEC,YAAO,GAAG,KAAK,CAAC;IACjB,CAAC;CAAA,CAAA;AADA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACZ;AAFX,cAAc;IAJnB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;KAC1B,CAAC;GAEI,cAAc,CAGnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n * **Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.\n * @constructor\n * @extends UI5Element\n * @since 2.7.0\n * @abstract\n * @public\n */\n@customElement({\n\ttag: \"ui5-shellbar-spacer\",\n})\n\nclass ShellBarSpacer extends UI5Element {\n\t@property({ type: Boolean })\n\tvisible = false;\n}\n\nShellBarSpacer.define();\n\nexport default ShellBarSpacer;\n"]}

package/dist/ShellBarTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ShellBar from "./ShellBar.js";
+export default function ShellBarTemplate(this: ShellBar): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ShellBarTemplate.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ShellBarPopoverTemplate from "./ShellBarPopoverTemplate.js";
+import slimArrowDown from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+export default function ShellBarTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { class: this.classes.wrapper, "aria-label": this._shellbarText, onKeyDown: this._onKeyDown, part: "root", children: [_jsxs("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left", children: [this.startButton.length > 0 && _jsx("slot", { name: "startButton" }), this.hasBranding && (_jsx("slot", { name: "branding" })), this.hasMenuItems && !this.hasBranding && (_jsxs(_Fragment, { children: [!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this), this.showTitleInMenuButton && _jsx("h1", { class: "ui5-hidden-text", children: this.primaryTitle }), this.showMenuButton && (_jsx(_Fragment, { children: _jsxs("button", { class: {
+                                                "ui5-shellbar-menu-button": true,
+                                                ...this.classes.button,
+                                            }, onClick: this._headerPress, "aria-haspopup": "menu", "aria-expanded": this._menuPopoverExpanded, "aria-label": this._brandingText, "data-ui5-stable": "menu", tabIndex: 0, children: [this.showLogoInMenuButton && (_jsx("span", { class: "ui5-shellbar-logo", "aria-label": this._logoText, title: this._logoText, children: _jsx("slot", { name: "logo" }) })), this.showTitleInMenuButton && (_jsx("div", { class: "ui5-shellbar-menu-button-title", children: this.primaryTitle })), _jsx(Icon, { class: "ui5-shellbar-menu-button-arrow", name: slimArrowDown })] }) }))] })), this.hasMenuItems && (
+                            // The secondary title remains visible when both menu items and the branding slot are present,
+                            // as the branding slot has higher priority and takes precedence in visibility.
+                            _jsx(_Fragment, { children: this.secondaryTitle && !this.isSBreakPoint && (_jsx("div", { style: { display: "block" }, class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle })) })), !this.hasMenuItems && (_jsxs(_Fragment, { children: [this.isSBreakPoint && this.hasLogo && !this.hasBranding && singleLogo.call(this), !this.isSBreakPoint && (this.hasLogo || this.primaryTitle) && (_jsxs(_Fragment, { children: [!this.hasBranding && combinedLogo.call(this), this.secondaryTitle && (this.primaryTitle || this.hasBranding) && (_jsx("h2", { class: "ui5-shellbar-secondary-title", "data-ui5-stable": "secondary-title", children: this.secondaryTitle }))] }))] }))] }), this.hasMidContent && (_jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-mid-content", children: _jsx("slot", { name: "midContent" }) })), _jsx("div", { class: "ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right", children: _jsxs("div", { class: "ui5-shellbar-overflow-container-right-inner", children: [this.hasContentItems && (_jsxs("div", { class: "ui5-shellbar-content-items", role: this._contentItemsRole, "aria-label": this._contentItemsText, children: [this.showStartSeparator && (_jsx("div", { class: {
+                                                "ui5-shellbar-separator": true,
+                                                "ui5-shellbar-separator-start": true,
+                                            } })), this.startContent.map(item => {
+                                            const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+                                            return (_jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
+                                                    // never displayed, only "packed" with last item that was hidden, used for measurement purposes
+                                                    _jsx("div", { class: {
+                                                            "ui5-shellbar-separator": true,
+                                                            "ui5-shellbar-separator-start": true,
+                                                        } })), _jsx("slot", { name: item._individualSlot })] }, item._individualSlot));
+                                        }), _jsx("div", { class: "ui5-shellbar-spacer" }), this.endContent.map(item => {
+                                            const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
+                                            return (_jsxs("div", { id: item._individualSlot, class: itemInfo?.classes, children: [_jsx("slot", { name: item._individualSlot }), this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
+                                                    // never displayed, only "packed" with last item that was hidden, used for measurement purposes
+                                                    _jsx("div", { class: {
+                                                            "ui5-shellbar-separator": true,
+                                                            "ui5-shellbar-separator-end": true,
+                                                        } }))] }, item._individualSlot));
+                                        }), this.showEndSeparator && (_jsx("div", { class: {
+                                                "ui5-shellbar-separator": true,
+                                                "ui5-shellbar-separator-end": true,
+                                            } }))] })), !this.hasContentItems && _jsx("div", { class: "ui5-shellbar-spacer" }), _jsxs("div", { class: "ui5-shellbar-overflow-container-right-child", role: this._rightChildRole, children: [this.hasSearchField && (_jsxs(_Fragment, { children: [this.showFullWidthSearch && (_jsxs("div", { class: "ui5-shellbar-search-full-width-wrapper", style: this.styles.searchField, children: [_jsx("div", { class: "ui5-shellbar-search-full-field", children: _jsx("slot", { name: "searchField" }) }), _jsx(Button, { onClick: this._handleCancelButtonPress, class: "ui5-shellbar-button ui5-shellbar-cancel-button", "data-ui5-stable": "cancel-search", children: this._cancelBtnText })] })), _jsx("div", { id: this.hasSelfCollapsibleSearch ? `${this._id}-item-1` : undefined, class: this.classes.searchField, style: this.styles.searchField, children: _jsx("slot", { name: "searchField" }) }), !(this.hasSelfCollapsibleSearch || this.hideSearchButton) && (_jsx(Button, { id: `${this._id}-item-1`, class: {
+                                                        "ui5-shellbar-button": true,
+                                                        "ui5-shellbar-search-button": true,
+                                                        "ui5-shellbar-search-item-for-arrow-nav": true,
+                                                        ...this.classes.search,
+                                                    }, icon: "sap-icon://search", "data-ui5-text": "Search", "data-ui5-notifications-count": this.notificationsCount, "data-ui5-stable": "toggle-search", onClick: this._handleSearchIconPress, tooltip: this._searchBtnOpen, "aria-label": this._searchBtnOpen, "aria-expanded": this.showSearchField, accessibilityAttributes: this.accInfo.search.accessibilityAttributes }))] })), this.hasAssistant && (_jsx("div", { id: `${this._id}-assistant`, class: this.classes.assistant, children: _jsx("slot", { name: "assistant" }) })), this.showNotifications && (_jsx(Button, { id: `${this._id}-item-2`, class: {
+                                                "ui5-shellbar-button": true,
+                                                "ui5-shellbar-bell-button": true,
+                                                "ui5-shellbar-items-for-arrow-nav": true,
+                                                ...this.classes.notification,
+                                            }, icon: "sap-icon://bell", "data-ui5-text": "Notifications", onClick: this._handleNotificationsPress, tooltip: this._notificationsText, accessibilityAttributes: this.accInfo.notifications.accessibilityAttributes, "data-ui5-stable": "notifications", children: this.notificationsCount && (_jsx(ButtonBadge, { slot: "badge", design: "OverlayText", text: this.notificationsCount })) })), this.customItemsInfo.map(item => (_jsx(Button, { id: item.id, class: `${item.classes} ui5-shellbar-items-for-arrow-nav`, icon: item.icon, tooltip: item.tooltip, "data-ui5-notifications-count": this.notificationsCount, "data-ui5-external-action-item-id": item.refItemid, "data-ui5-stable": item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined, onClick: item.press, accessibilityAttributes: item.accessibilityAttributes, children: item.count && (_jsx(ButtonBadge, { slot: "badge", design: "OverlayText", text: item.count })) }, item.id)))] })] }) }), _jsx(Button, { id: `${this._id}-item-5`, class: {
+                            "ui5-shellbar-button": true,
+                            "ui5-shellbar-overflow-button": true,
+                            "ui5-shellbar-items-for-arrow-nav": true,
+                            ...this.classes.overflow,
+                        }, icon: "sap-icon://overflow", onClick: this._handleOverflowPress, tooltip: this._overflowText, accessibilityAttributes: this.accInfo.overflow.accessibilityAttributes, "data-ui5-stable": "overflow", children: this._overflowNotifications && (_jsx(ButtonBadge, { slot: "badge", design: this._overflowNotifications === " " ? "AttentionDot" : "OverlayText", text: this._overflowNotifications === " " ? "" : this._overflowNotifications })) }), this.hasProfile && profileButton.call(this), this.showProductSwitch && (_jsx(Button, { id: `${this._id}-item-4`, class: "ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav", icon: "sap-icon://grid", "data-ui5-text": "Product Switch", onClick: this._handleProductSwitchPress, tooltip: this._productsText, "aria-label": this._productSwitchBtnText, "aria-haspopup": "dialog", "aria-expanded": this.accInfo.products.accessibilityAttributes.expanded, accessibilityAttributes: this.accInfo.products.accessibilityAttributes, "data-ui5-stable": "product-switch" }))] }), ShellBarPopoverTemplate.call(this)] }));
+}
+function profileButton() {
+    return (_jsx(Button, { "data-profile-btn": true, id: `${this._id}-item-3`, onClick: this._handleProfilePress, tooltip: this._profileText, class: "ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-no-overflow-button ui5-shellbar-items-for-arrow-nav", "aria-label": this.imageBtnText, "aria-haspopup": "dialog", accessibilityAttributes: this.accInfo.profile.accessibilityAttributes, "data-ui5-stable": "profile", children: _jsx("slot", { name: "profile" }) }));
+}
+function singleLogo() {
+    return (_jsx("span", { role: this.accLogoRole, class: "ui5-shellbar-logo", "aria-label": this._logoText, title: this._logoText, onClick: this._logoPress, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, tabIndex: 0, "data-ui5-stable": "logo", children: _jsx("slot", { name: "logo" }) }));
+}
+function combinedLogo() {
+    return (_jsxs("div", { role: this.accLogoRole, class: "ui5-shellbar-logo-area", onClick: this._logoPress, tabIndex: 0, onKeyDown: this._logoKeydown, onKeyUp: this._logoKeyup, "aria-label": this.accessibilityAttributes.branding?.name || this._logoAreaText, children: [this.hasLogo && (_jsx("span", { class: "ui5-shellbar-logo", title: this._logoText, "data-ui5-stable": "logo", children: _jsx("slot", { name: "logo" }) })), _jsx("div", { class: "ui5-shellbar-headings", children: this.primaryTitle && (_jsx("h1", { class: "ui5-shellbar-title", children: _jsx("bdi", { children: this.primaryTitle }) })) })] }));
+}
+//# sourceMappingURL=ShellBarTemplate.js.map

package/dist/ShellBarTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarTemplate.js","sourceRoot":"","sources":["../src/ShellBarTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type ShellBar from \"./ShellBar.js\";\nimport ShellBarPopoverTemplate from \"./ShellBarPopoverTemplate.js\";\nimport slimArrowDown from \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport ButtonBadge from \"@ui5/webcomponents/dist/ButtonBadge.js\";\n\nexport default function ShellBarTemplate(this: ShellBar) {\n\treturn (\n\t\t<>\n\t\t\t<header\n\t\t\t\tclass={this.classes.wrapper}\n\t\t\t\taria-label={this._shellbarText}\n\t\t\t\tonKeyDown={this._onKeyDown}\n\t\t\t\tpart=\"root\">\n\t\t\t\t<div class=\"ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left\">\n\t\t\t\t\t{this.startButton.length > 0 && <slot name=\"startButton\"></slot>}\n\n\t\t\t\t\t{this.hasBranding && (\n\t\t\t\t\t\t<slot name=\"branding\"></slot>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.hasMenuItems && !this.hasBranding && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!this.showLogoInMenuButton && this.hasLogo && singleLogo.call(this)}\n\t\t\t\t\t\t\t{this.showTitleInMenuButton && <h1 class=\"ui5-hidden-text\">{this.primaryTitle}</h1>}\n\t\t\t\t\t\t\t{this.showMenuButton && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-menu-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t...this.classes.button,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonClick={this._headerPress}\n\t\t\t\t\t\t\t\t\t\taria-haspopup=\"menu\"\n\t\t\t\t\t\t\t\t\t\taria-expanded={this._menuPopoverExpanded}\n\t\t\t\t\t\t\t\t\t\taria-label={this._brandingText}\n\t\t\t\t\t\t\t\t\t\tdata-ui5-stable=\"menu\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={0}>\n\t\t\t\t\t\t\t\t\t\t{this.showLogoInMenuButton && (\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"ui5-shellbar-logo\" aria-label={this._logoText} title={this._logoText}>\n\t\t\t\t\t\t\t\t\t\t\t\t<slot name=\"logo\"></slot>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t{this.showTitleInMenuButton && (\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-menu-button-title\">{this.primaryTitle}</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<Icon class=\"ui5-shellbar-menu-button-arrow\" name={slimArrowDown} />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.hasMenuItems && (\n\t\t\t\t\t\t// The secondary title remains visible when both menu items and the branding slot are present,\n\t\t\t\t\t\t// as the branding slot has higher priority and takes precedence in visibility.\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{this.secondaryTitle && !this.isSBreakPoint && (\n\t\t\t\t\t\t\t\t<div style={{ display: \"block\" }} class=\"ui5-shellbar-secondary-title\" data-ui5-stable=\"secondary-title\">\n\t\t\t\t\t\t\t\t\t{this.secondaryTitle}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{!this.hasMenuItems && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{this.isSBreakPoint && this.hasLogo && !this.hasBranding && singleLogo.call(this)}\n\t\t\t\t\t\t\t{!this.isSBreakPoint && (this.hasLogo || this.primaryTitle) && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!this.hasBranding && combinedLogo.call(this)}\n\t\t\t\t\t\t\t\t\t{this.secondaryTitle && (this.primaryTitle || this.hasBranding) && (\n\t\t\t\t\t\t\t\t\t\t<h2 class=\"ui5-shellbar-secondary-title\" data-ui5-stable=\"secondary-title\">\n\t\t\t\t\t\t\t\t\t\t\t{this.secondaryTitle}\n\t\t\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.hasMidContent && (\n\t\t\t\t\t<div class=\"ui5-shellbar-overflow-container ui5-shellbar-mid-content\">\n\t\t\t\t\t\t<slot name=\"midContent\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class=\"ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right\">\n\t\t\t\t\t<div class=\"ui5-shellbar-overflow-container-right-inner\">\n\t\t\t\t\t\t{this.hasContentItems && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"ui5-shellbar-content-items\"\n\t\t\t\t\t\t\t\trole={this._contentItemsRole}\n\t\t\t\t\t\t\t\taria-label={this._contentItemsText}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.showStartSeparator && (\n\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator\": true,\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator-start\": true,\n\t\t\t\t\t\t\t\t\t}}></div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{this.startContent.map(item => {\n\t\t\t\t\t\t\t\t\tconst itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>\n\t\t\t\t\t\t\t\t\t\t\t{this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (\n\t\t\t\t\t\t\t\t\t\t\t\t// never displayed, only \"packed\" with last item that was hidden, used for measurement purposes\n\t\t\t\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator-start\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t}}></div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t<slot name={(item as any)._individualSlot}></slot>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-spacer\"></div>\n\t\t\t\t\t\t\t\t{this.endContent.map(item => {\n\t\t\t\t\t\t\t\t\tconst itemInfo = this._contentInfo.find(info => info.id === (item as any)._individualSlot);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div key={(item as any)._individualSlot} id={(item as any)._individualSlot} class={itemInfo?.classes}>\n\t\t\t\t\t\t\t\t\t\t\t<slot name={(item as any)._individualSlot}></slot>\n\t\t\t\t\t\t\t\t\t\t\t{this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (\n\t\t\t\t\t\t\t\t\t\t\t\t// never displayed, only \"packed\" with last item that was hidden, used for measurement purposes\n\t\t\t\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator-end\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t}}></div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{this.showEndSeparator && (\n\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator\": true,\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-separator-end\": true,\n\t\t\t\t\t\t\t\t\t}}></div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!this.hasContentItems && <div class=\"ui5-shellbar-spacer\"></div>}\n\t\t\t\t\t\t<div class=\"ui5-shellbar-overflow-container-right-child\" role={this._rightChildRole}>\n\t\t\t\t\t\t\t{this.hasSearchField && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{this.showFullWidthSearch && (\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-search-full-width-wrapper\" style={this.styles.searchField}>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-search-full-field\">\n\t\t\t\t\t\t\t\t\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={this._handleCancelButtonPress}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"ui5-shellbar-button ui5-shellbar-cancel-button\"\n\t\t\t\t\t\t\t\t\t\t\t\tdata-ui5-stable=\"cancel-search\">\n\t\t\t\t\t\t\t\t\t\t\t\t{this._cancelBtnText}\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t<div id={this.hasSelfCollapsibleSearch ? `${this._id}-item-1` : undefined} class={this.classes.searchField} style={this.styles.searchField}>\n\t\t\t\t\t\t\t\t\t\t<slot name=\"searchField\"></slot>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{!(this.hasSelfCollapsibleSearch || this.hideSearchButton) && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tid={`${this._id}-item-1`}\n\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-search-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-search-item-for-arrow-nav\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t...this.classes.search,\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\ticon=\"sap-icon://search\"\n\t\t\t\t\t\t\t\t\t\t\tdata-ui5-text=\"Search\"\n\t\t\t\t\t\t\t\t\t\t\tdata-ui5-notifications-count={this.notificationsCount}\n\t\t\t\t\t\t\t\t\t\t\tdata-ui5-stable=\"toggle-search\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\t\t\t\t\t\t\t\ttooltip={this._searchBtnOpen}\n\t\t\t\t\t\t\t\t\t\t\taria-label={this._searchBtnOpen}\n\t\t\t\t\t\t\t\t\t\t\taria-expanded={this.showSearchField}\n\t\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.search.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.hasAssistant && (\n\t\t\t\t\t\t\t\t<div id={`${this._id}-assistant`} class={this.classes.assistant}>\n\t\t\t\t\t\t\t\t\t<slot name=\"assistant\"></slot>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showNotifications && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tid={`${this._id}-item-2`}\n\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-button\": true,\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-bell-button\": true,\n\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-items-for-arrow-nav\": true,\n\t\t\t\t\t\t\t\t\t\t...this.classes.notification,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\ticon=\"sap-icon://bell\"\n\t\t\t\t\t\t\t\t\tdata-ui5-text=\"Notifications\"\n\t\t\t\t\t\t\t\t\tonClick={this._handleNotificationsPress}\n\t\t\t\t\t\t\t\t\ttooltip={this._notificationsText}\n\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.notifications.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\tdata-ui5-stable=\"notifications\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{this.notificationsCount && (\n\t\t\t\t\t\t\t\t\t\t<ButtonBadge slot=\"badge\" design=\"OverlayText\" text={this.notificationsCount} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.customItemsInfo.map(item => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\t\t\tclass={`${item.classes} ui5-shellbar-items-for-arrow-nav`}\n\t\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\t\ttooltip={item.tooltip}\n\t\t\t\t\t\t\t\t\tdata-ui5-notifications-count={this.notificationsCount}\n\t\t\t\t\t\t\t\t\tdata-ui5-external-action-item-id={item.refItemid}\n\t\t\t\t\t\t\t\t\tdata-ui5-stable={item.icon && !this.isIconHidden(item.icon) ? item.stableDomRef : undefined}\n\t\t\t\t\t\t\t\t\tonClick={item.press}\n\t\t\t\t\t\t\t\t\taccessibilityAttributes={item.accessibilityAttributes}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{item.count && (\n\t\t\t\t\t\t\t\t\t\t<ButtonBadge slot=\"badge\" design=\"OverlayText\" text={item.count} />\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\tid={`${this._id}-item-5`}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-shellbar-button\": true,\n\t\t\t\t\t\t\"ui5-shellbar-overflow-button\": true,\n\t\t\t\t\t\t\"ui5-shellbar-items-for-arrow-nav\": true,\n\t\t\t\t\t\t...this.classes.overflow,\n\t\t\t\t\t}}\n\t\t\t\t\ticon=\"sap-icon://overflow\"\n\t\t\t\t\tonClick={this._handleOverflowPress}\n\t\t\t\t\ttooltip={this._overflowText}\n\t\t\t\t\taccessibilityAttributes={this.accInfo.overflow.accessibilityAttributes}\n\t\t\t\t\tdata-ui5-stable=\"overflow\"\n\t\t\t\t>\n\t\t\t\t\t{this._overflowNotifications && (\n\t\t\t\t\t\t<ButtonBadge\n\t\t\t\t\t\t\tslot=\"badge\"\n\t\t\t\t\t\t\tdesign={this._overflowNotifications === \" \" ? \"AttentionDot\" : \"OverlayText\"}\n\t\t\t\t\t\t\ttext={this._overflowNotifications === \" \" ? \"\" : this._overflowNotifications}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</Button>\n\n\t\t\t\t{this.hasProfile && profileButton.call(this)}\n\t\t\t\t{this.showProductSwitch && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tid={`${this._id}-item-4`}\n\t\t\t\t\t\tclass=\"ui5-shellbar-no-overflow-button ui5-shellbar-button ui5-shellbar-button-product-switch ui5-shellbar-items-for-arrow-nav\"\n\t\t\t\t\t\ticon=\"sap-icon://grid\"\n\t\t\t\t\t\tdata-ui5-text=\"Product Switch\"\n\t\t\t\t\t\tonClick={this._handleProductSwitchPress}\n\t\t\t\t\t\ttooltip={this._productsText}\n\t\t\t\t\t\taria-label={this._productSwitchBtnText}\n\t\t\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\t\t\taria-expanded={this.accInfo.products.accessibilityAttributes.expanded}\n\t\t\t\t\t\taccessibilityAttributes={this.accInfo.products.accessibilityAttributes}\n\t\t\t\t\t\tdata-ui5-stable=\"product-switch\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</header>\n\t\t\t{ShellBarPopoverTemplate.call(this)}\n\t\t</>\n\t);\n}\n\nfunction profileButton(this: ShellBar) {\n\treturn (\n\t\t<Button\n\t\t\tdata-profile-btn\n\t\t\tid={`${this._id}-item-3`}\n\t\t\tonClick={this._handleProfilePress}\n\t\t\ttooltip={this._profileText}\n\t\t\tclass=\"ui5-shellbar-button ui5-shellbar-image-button ui5-shellbar-no-overflow-button ui5-shellbar-items-for-arrow-nav\"\n\t\t\taria-label={this.imageBtnText}\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taccessibilityAttributes={this.accInfo.profile.accessibilityAttributes}\n\t\t\tdata-ui5-stable=\"profile\"\n\t\t>\n\t\t\t<slot name=\"profile\"></slot>\n\t\t</Button>\n\t);\n}\n\nfunction singleLogo(this: ShellBar) {\n\treturn (\n\t\t<span\n\t\t\trole={this.accLogoRole}\n\t\t\tclass=\"ui5-shellbar-logo\"\n\t\t\taria-label={this._logoText}\n\t\t\ttitle={this._logoText}\n\t\t\tonClick={this._logoPress}\n\t\t\tonKeyDown={this._logoKeydown}\n\t\t\tonKeyUp={this._logoKeyup}\n\t\t\ttabIndex={0}\n\t\t\tdata-ui5-stable=\"logo\">\n\t\t\t<slot name=\"logo\"></slot>\n\t\t</span>\n\t);\n}\n\nfunction combinedLogo(this: ShellBar) {\n\treturn (\n\t\t<div\n\t\t\trole={this.accLogoRole}\n\t\t\tclass=\"ui5-shellbar-logo-area\"\n\t\t\tonClick={this._logoPress}\n\t\t\ttabIndex={0}\n\t\t\tonKeyDown={this._logoKeydown}\n\t\t\tonKeyUp={this._logoKeyup}\n\t\t\taria-label={this.accessibilityAttributes.branding?.name || this._logoAreaText}>\n\t\t\t{this.hasLogo && (\n\t\t\t\t<span\n\t\t\t\t\tclass=\"ui5-shellbar-logo\"\n\t\t\t\t\ttitle={this._logoText}\n\t\t\t\t\tdata-ui5-stable=\"logo\">\n\t\t\t\t\t<slot name=\"logo\"></slot>\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<div class=\"ui5-shellbar-headings\">\n\t\t\t\t{this.primaryTitle && (\n\t\t\t\t\t<h1 class=\"ui5-shellbar-title\">\n\t\t\t\t\t\t<bdi>{this.primaryTitle}</bdi>\n\t\t\t\t\t</h1>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/SideNavigation.d.ts

@@ -0,0 +1,178 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import type NavigationMenu from "./NavigationMenu.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type SideNavigationItemBase from "./SideNavigationItemBase.js";
+import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
+import type SideNavigationItem from "./SideNavigationItem.js";
+import type SideNavigationSubItem from "./SideNavigationSubItem.js";
+type SideNavigationPopoverContents = {
+    item: SideNavigationItem;
+    subItems: Array<SideNavigationSubItem>;
+};
+type SideNavigationSelectionChangeEventDetail = {
+    item: SideNavigationItemBase;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `SideNavigation` is used as a standard menu in applications.
+ * It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).
+ *
+ *  - The header is meant for displaying user related information - profile data, avatar, etc.
+ *  - The main navigation section is related to the user’s current work context
+ *  - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).
+ *
+ * ### Usage
+ *
+ * Use the available `ui5-side-navigation-group`, `ui5-side-navigation-item`
+ * and `ui5-side-navigation-sub-item` components to build your menu.
+ * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
+ * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
+ *
+ * The `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.
+ *
+ * Using it standalone may not match the intended design and functionality.
+ * For example, the side navigation may not exhibit the correct behavior on smaller screens.
+ * Additionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.
+ *
+ * ### Keyboard Handling
+ *
+ * ### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigation.js"`
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";` (for `ui5-side-navigation-group`)
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";` (for `ui5-side-navigation-item`)
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";` (for `ui5-side-navigation-sub-item`)
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.8
+ * @public
+ */
+declare class SideNavigation extends UI5Element {
+    eventDetails: {
+        "selection-change": SideNavigationSelectionChangeEventDetail;
+    };
+    /**
+     * Defines whether the `ui5-side-navigation` is expanded or collapsed.
+     *
+     * **Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in
+     * expanded mode the side navigation will take the whole width of the screen.
+     * The `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`
+     * component to ensure proper responsive behavior. If you choose not to use the
+     * `ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,
+     * particularly for smaller screens where the collapsed mode should not be used.
+     *
+     * @public
+     * @default false
+     */
+    collapsed: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 2.9.0
+     */
+    accessibleName?: string;
+    /**
+     * Defines the main items of the component.
+     *
+     * @public
+     */
+    items: DefaultSlot<SideNavigationItemBase>;
+    /**
+     * Defines the fixed items at the bottom of the component.
+     *
+     * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
+     *
+     * @public
+     */
+    fixedItems: Slot<SideNavigationItemBase>;
+    /**
+     * Defines the header of the `ui5-side-navigation`.
+     *
+     * **Note:** The header is displayed when the component is expanded - the property `collapsed` is false;
+     *
+     * @public
+     * @since 1.0.0-rc.11
+     */
+    header: Slot<HTMLElement>;
+    /**
+     * @private
+     */
+    _popoverContents: SideNavigationPopoverContents;
+    inPopover: boolean;
+    _menuPopoverItems: Array<SideNavigationItem>;
+    _isOverflow: boolean;
+    _flexibleItemNavigation: ItemNavigation;
+    _fixedItemNavigation: ItemNavigation;
+    static i18nBundle: I18nBundle;
+    constructor();
+    _handleResizeBound: () => void;
+    onBeforeRendering(): void;
+    initGroupsSettings(items: Array<SideNavigationItemBase>): void;
+    _onAfterPopoverOpen(): void;
+    _onBeforePopoverOpen(): void;
+    _onBeforePopoverClose(): void;
+    _onBeforeMenuOpen(): void;
+    _onBeforeMenuClose(): void;
+    _bn?: SideNavigationSelectableItemBase;
+    _onMenuClose(): void;
+    get accSideNavigationPopoverHiddenText(): string;
+    get ariaRoleDescNavigationList(): string;
+    get navigationMenuPrimaryHiddenText(): string;
+    get navigationMenuFooterHiddenText(): string;
+    get overflowAccessibleName(): string;
+    handlePopupItemClick(e: KeyboardEvent | PointerEvent): void;
+    getOverflowPopover(): NavigationMenu;
+    getPicker(): ResponsivePopover;
+    openPicker(opener: HTMLElement): void;
+    openOverflowMenu(opener: HTMLElement): void;
+    closePicker(): void;
+    closeMenu(preventFocusRestore?: boolean): void;
+    getPickerTree(): SideNavigation;
+    get hasHeader(): boolean;
+    get showHeader(): boolean;
+    get hasFixedItems(): boolean;
+    get _rootRole(): "none" | undefined;
+    getEnabledFixedItems(): Array<ITabbable>;
+    getEnabledFlexibleItems(): Array<ITabbable>;
+    getEnabledItems(items: Array<SideNavigationItemBase>): Array<ITabbable>;
+    focusItem(item: SideNavigationItemBase): void;
+    onAfterRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    handleResize(): void;
+    _updateOverflowItems(): null | undefined;
+    _findFocusedItem(items: Array<SideNavigationItemBase>): SideNavigationItemBase | undefined;
+    _getSelectableItems(items: Array<SideNavigationItemBase>): Array<SideNavigationSelectableItemBase>;
+    _getFocusableItems(items: Array<SideNavigationItemBase>): Array<SideNavigationItemBase>;
+    _getAllItems(items: Array<SideNavigationItemBase>): Array<SideNavigationItemBase>;
+    _findSelectedItem(items: Array<SideNavigationItemBase>): SideNavigationSelectableItemBase | undefined;
+    get overflowItems(): Array<HTMLElement>;
+    _handleItemClick(e: KeyboardEvent | MouseEvent, item: SideNavigationSelectableItemBase): void;
+    _handleOverflowClick(): void;
+    _getOverflowItems(): Array<SideNavigationItem>;
+    _selectItem(item: SideNavigationSelectableItemBase): void;
+    get _overflowItem(): SideNavigationItem | null;
+    get isOverflow(): boolean;
+    captureRef(ref: HTMLElement & {
+        associatedItem?: UI5Element;
+    } | null): void;
+}
+export default SideNavigation;
+export type { SideNavigationSelectionChangeEventDetail, };