@ui5/webcomponents-fiori 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/ShellBarItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShellBarItemTemplate.js","sourceRoot":"","sources":["../src/ShellBarItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,gBAAgB,MAAM,6CAA6C,CAAC;AAG3E,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,CACN,KAAC,gBAAgB,IAChB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAChD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,KAAK,qBACL,IAAI,CAAC,YAAY,EAClC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,YAEpD,IAAI,CAAC,IAAI,GACQ,CACnB,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,IACN,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,aAAa,EACpB,cAAc,EAAE,IAAI,CAAC,IAAI,qBACR,IAAI,CAAC,YAAY,EAClC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,OAAO,EAAE,IAAI,CAAC,cAAc,YAE3B,IAAI,CAAC,KAAK,IAAI,CACd,KAAC,WAAW,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,CACnE,GACO,CACT,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonBadge from \"@ui5/webcomponents/dist/ButtonBadge.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport type ShellBarItem from \"./ShellBarItem.js\";\n\nexport default function ShellBarItemTemplate(this: ShellBarItem) {\n\tif (this.inOverflow) {\n\t\treturn (\n\t\t\t<ListItemStandard\n\t\t\t\ticon={this.icon ? `sap-icon://${this.icon}` : \"\"}\n\t\t\t\ttype=\"Active\"\n\t\t\t\tdata-count={this.count}\n\t\t\t\tdata-ui5-stable={this.stableDomRef}\n\t\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</ListItemStandard>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tclass=\"ui5-shellbar-action-button\"\n\t\t\ticon={this.icon}\n\t\t\tdesign=\"Transparent\"\n\t\t\taccessibleName={this.text}\n\t\t\tdata-ui5-stable={this.stableDomRef}\n\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\tonClick={this.fireClickEvent}\n\t\t>\n\t\t\t{this.count && (\n\t\t\t\t<ButtonBadge slot=\"badge\" design=\"OverlayText\" text={this.count} />\n\t\t\t)}\n\t\t</Button>\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,60 @@
+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 ButtonBadge from "@ui5/webcomponents/dist/ButtonBadge.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import ShellBarItem from "./ShellBarItem.js";
+import { ShellBarSearchField, ShellBarSearchFieldFullWidth } from "./shellbar/templates/ShellBarSearchTemplate.js";
+import { ShellBarSearchField as ShellBarSearchFieldLegacy, ShellBarSearchButton as ShellBarSearchButtonLegacy, ShellBarSearchFieldFullWidth as ShellBarSearchFieldFullWidthLegacy, } from "./shellbar/templates/ShellBarSearchLegacyTemplate.js";
+import { ShellBarLegacyBrandingArea, } from "./shellbar/templates/ShellBarLegacyTemplate.js";
+export default function ShellBarTemplate() {
+    const isLegacySearch = !this.isSelfCollapsibleSearch;
+    const SearchInBarTemplate = isLegacySearch ? ShellBarSearchFieldLegacy : ShellBarSearchField;
+    const SearchFullWidthTemplate = isLegacySearch ? ShellBarSearchFieldFullWidthLegacy : ShellBarSearchFieldFullWidth;
+    const profileAction = this.getAction("profile");
+    const overflowAction = this.getAction("overflow");
+    const assistantAction = this.getAction("assistant");
+    const notificationsAction = this.getAction("notifications");
+    const productSwitchAction = this.getAction("products");
+    const actionsAccInfo = this.actionsAccessibilityInfo;
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { class: "ui5-shellbar-root", part: "root", onKeyDown: this._onKeyDown, "aria-label": this.texts.shellbar, children: [this.showFullWidthSearch && SearchFullWidthTemplate.call(this), this.enabledFeatures.startButton && (_jsx("div", { class: "ui5-shellbar-start-button ui5-shellbar-gap-end", children: _jsx("slot", { name: "startButton" }) })), this.enabledFeatures.branding && (_jsx("div", { class: "ui5-shellbar-branding-area", children: _jsx("slot", { name: "branding" }) })), !this.enabledFeatures.branding && ShellBarLegacyBrandingArea.call(this), _jsx("div", { class: "ui5-shellbar-overflow-container", children: _jsxs("div", { class: "ui5-shellbar-overflow-container-inner", children: [this.enabledFeatures.content && (_jsxs("div", { class: "ui5-shellbar-content-area ui5-shellbar-content-items", role: this.contentRole, "aria-label": this.texts.contentItems, children: [this.separatorConfig.showStartSeparator && (_jsx("div", { class: "ui5-shellbar-separator ui5-shellbar-separator-start" })), this.startContent.map(item => {
+                                            const itemId = item._individualSlot;
+                                            const packedSep = this.getPackedSeparatorInfo(item, true);
+                                            return (_jsxs("div", { id: itemId, class: {
+                                                    "ui5-shellbar-content-item ui5-shellbar-gap-start": true,
+                                                    "ui5-shellbar-hidden": this.isHidden(itemId),
+                                                }, children: [packedSep.shouldPack && (_jsx("div", { class: "ui5-shellbar-separator ui5-shellbar-separator-start" })), _jsx("slot", { name: item._individualSlot })] }, itemId));
+                                        }), _jsx("div", { class: "ui5-shellbar-spacer" }), this.endContent.map(item => {
+                                            const itemId = item._individualSlot;
+                                            const packedSep = this.getPackedSeparatorInfo(item, false);
+                                            return (_jsxs("div", { id: itemId, class: {
+                                                    "ui5-shellbar-content-item ui5-shellbar-gap-start": true,
+                                                    "ui5-shellbar-hidden": this.isHidden(itemId),
+                                                }, children: [_jsx("slot", { name: itemId }), packedSep.shouldPack && (_jsx("div", { class: "ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start" }))] }, itemId));
+                                        }), this.separatorConfig.showEndSeparator && (_jsx("div", { class: "ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start" }))] })), this.enabledFeatures.search && SearchInBarTemplate.call(this), this.enabledFeatures.search && isLegacySearch && ShellBarSearchButtonLegacy.call(this), assistantAction && (_jsx("div", { class: {
+                                        "ui5-shellbar-assistant-button ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden("assistant")
+                                    }, children: _jsx("slot", { name: "assistant" }) })), notificationsAction && (_jsx(Button, { "data-ui5-stable": notificationsAction.stableDomRef, class: {
+                                        "ui5-shellbar-bell-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden("notifications")
+                                    }, icon: notificationsAction.icon, design: "Transparent", onClick: this.handleNotificationsClick, tooltip: actionsAccInfo.notifications.title, accessibilityAttributes: actionsAccInfo.notifications.accessibilityAttributes, children: notificationsAction?.count && (_jsx(ButtonBadge, { slot: "badge", design: "OverlayText", text: notificationsAction?.count })) })), this.sortItems(this.items).map(item => (_jsx("div", { class: {
+                                        "ui5-shellbar-custom-item ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden(item._id),
+                                    }, "data-ui5-stable": item.stableDomRef, children: !item.inOverflow ? _jsx("slot", { name: item._individualSlot }) : null }, item._id))), overflowAction && (_jsx(Button, { "data-ui5-stable": overflowAction.stableDomRef, id: "ui5-shellbar-overflow-button", class: {
+                                        "ui5-shellbar-overflow-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden("overflow")
+                                    }, icon: overflowAction.icon, design: "Transparent", onClick: this.handleOverflowClick, tooltip: actionsAccInfo.overflow.title, accessibilityAttributes: actionsAccInfo.overflow.accessibilityAttributes, children: this.overflowBadge && (_jsx(ButtonBadge, { slot: "badge", design: this.overflowBadge === " " ? "AttentionDot" : "OverlayText", text: this.overflowBadge === " " ? "" : this.overflowBadge })) })), profileAction && (_jsx(Button, { "data-profile-btn": true, "data-ui5-stable": profileAction.stableDomRef, class: {
+                                        "ui5-shellbar-image-button ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden("profile")
+                                    }, design: "Transparent", onClick: this.handleProfileClick, tooltip: actionsAccInfo.profile.title, accessibilityAttributes: actionsAccInfo.profile.accessibilityAttributes, children: _jsx("slot", { name: "profile" }) })), productSwitchAction && (_jsx(Button, { "data-ui5-stable": productSwitchAction.stableDomRef, class: {
+                                        "ui5-shellbar-button-product-switch ui5-shellbar-action-button ui5-shellbar-gap-start": true,
+                                        "ui5-shellbar-hidden": this.isHidden("products")
+                                    }, icon: productSwitchAction.icon, design: "Transparent", onClick: this.handleProductSwitchClick, tooltip: actionsAccInfo.products.title, accessibilityAttributes: actionsAccInfo.products.accessibilityAttributes }))] }) })] }), _jsx(Popover, { class: "ui5-shellbar-overflow-popover", open: this.overflowPopoverOpen, onClose: this.onPopoverClose, opener: "ui5-shellbar-overflow-button", placement: "Bottom", hideArrow: true, horizontalAlign: this.popoverHorizontalAlign, children: _jsx(List, { separators: "None", onClick: this.handleOverflowItemClick, children: this.overflowItems.map(item => {
+                        if (item.type === "action") {
+                            const actionData = item.data;
+                            return (_jsx(ShellBarItem, { icon: actionData.icon ? `sap-icon://${actionData.icon}` : "", "data-action-id": item.id, count: actionData.count, inOverflow: true, text: this.getActionOverflowText(item.id) }, item.id));
+                        }
+                        return _jsx("slot", { name: item.data._individualSlot }, item.id);
+                    }) }) })] }));
+}
+//# 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 Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonBadge from \"@ui5/webcomponents/dist/ButtonBadge.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport type ShellBar from \"./ShellBar.js\";\nimport ShellBarItem from \"./ShellBarItem.js\";\n\nimport {\n\tShellBarSearchField,\n\tShellBarSearchFieldFullWidth\n} from \"./shellbar/templates/ShellBarSearchTemplate.js\";\n\nimport {\n\tShellBarSearchField as ShellBarSearchFieldLegacy,\n\tShellBarSearchButton as ShellBarSearchButtonLegacy,\n\tShellBarSearchFieldFullWidth as ShellBarSearchFieldFullWidthLegacy,\n} from \"./shellbar/templates/ShellBarSearchLegacyTemplate.js\";\n\nimport {\n\tShellBarLegacyBrandingArea,\n} from \"./shellbar/templates/ShellBarLegacyTemplate.js\";\n\nexport default function ShellBarTemplate(this: ShellBar) {\n\tconst isLegacySearch = !this.isSelfCollapsibleSearch;\n\n\tconst SearchInBarTemplate = isLegacySearch ? ShellBarSearchFieldLegacy : ShellBarSearchField;\n\tconst SearchFullWidthTemplate = isLegacySearch ? ShellBarSearchFieldFullWidthLegacy : ShellBarSearchFieldFullWidth;\n\n\tconst profileAction = this.getAction(\"profile\");\n\tconst overflowAction = this.getAction(\"overflow\");\n\tconst assistantAction = this.getAction(\"assistant\");\n\tconst notificationsAction = this.getAction(\"notifications\");\n\tconst productSwitchAction = this.getAction(\"products\");\n\n\tconst actionsAccInfo = this.actionsAccessibilityInfo;\n\n\treturn (\n\t\t<>\n\t\t\t<header class=\"ui5-shellbar-root\" part=\"root\" onKeyDown={this._onKeyDown} aria-label={this.texts.shellbar}>\n\t\t\t\t{/* Full-width search overlay */}\n\t\t\t\t{this.showFullWidthSearch && SearchFullWidthTemplate.call(this)}\n\n\t\t\t\t{this.enabledFeatures.startButton && (\n\t\t\t\t\t<div class=\"ui5-shellbar-start-button ui5-shellbar-gap-end\">\n\t\t\t\t\t\t<slot name=\"startButton\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{this.enabledFeatures.branding && (\n\t\t\t\t\t<div class=\"ui5-shellbar-branding-area\">\n\t\t\t\t\t\t<slot name=\"branding\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Legacy branding (logo + primaryTitle) when no menu items */}\n\t\t\t\t{!this.enabledFeatures.branding && ShellBarLegacyBrandingArea.call(this)}\n\n\t\t\t\t<div class=\"ui5-shellbar-overflow-container\">\n\t\t\t\t\t<div class=\"ui5-shellbar-overflow-container-inner\">\n\n\t\t\t\t\t\t{this.enabledFeatures.content && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclass=\"ui5-shellbar-content-area ui5-shellbar-content-items\"\n\t\t\t\t\t\t\t\trole={this.contentRole}\n\t\t\t\t\t\t\t\taria-label={this.texts.contentItems}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Start separator */}\n\t\t\t\t\t\t\t\t{this.separatorConfig.showStartSeparator && (\n\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-separator ui5-shellbar-separator-start\"></div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Start content items */}\n\t\t\t\t\t\t\t\t{this.startContent.map(item => {\n\t\t\t\t\t\t\t\t\tconst itemId = (item as any)._individualSlot as string;\n\t\t\t\t\t\t\t\t\tconst packedSep = this.getPackedSeparatorInfo(item, true);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={itemId}\n\t\t\t\t\t\t\t\t\t\t\tid={itemId}\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-content-item ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(itemId),\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{packedSep.shouldPack && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-separator ui5-shellbar-separator-start\"></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\n\t\t\t\t\t\t\t\t{/* Spacer: Grows to fill available space, used to measure if space is tight, should be in DOM always */}\n\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-spacer\"></div>\n\n\t\t\t\t\t\t\t\t{/* End content items */}\n\t\t\t\t\t\t\t\t{this.endContent.map(item => {\n\t\t\t\t\t\t\t\t\tconst itemId = (item as any)._individualSlot as string;\n\t\t\t\t\t\t\t\t\tconst packedSep = this.getPackedSeparatorInfo(item, false);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={itemId}\n\t\t\t\t\t\t\t\t\t\t\tid={itemId}\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-content-item ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(itemId),\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<slot name={itemId}></slot>\n\t\t\t\t\t\t\t\t\t\t\t{packedSep.shouldPack && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start\"></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\n\t\t\t\t\t\t\t\t{/* End separator */}\n\t\t\t\t\t\t\t\t{this.separatorConfig.showEndSeparator && (\n\t\t\t\t\t\t\t\t\t<div class=\"ui5-shellbar-separator ui5-shellbar-separator-end ui5-shellbar-gap-start\"></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\n\t\t\t\t\t\t{this.enabledFeatures.search && SearchInBarTemplate.call(this)}\n\t\t\t\t\t\t{this.enabledFeatures.search && isLegacySearch && ShellBarSearchButtonLegacy.call(this)}\n\n\t\t\t\t\t\t{assistantAction && (\n\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\"ui5-shellbar-assistant-button ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"assistant\")\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t<slot name=\"assistant\"></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{notificationsAction && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-ui5-stable={notificationsAction.stableDomRef}\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-bell-button ui5-shellbar-action-button ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"notifications\")\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ticon={notificationsAction.icon}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this.handleNotificationsClick}\n\t\t\t\t\t\t\t\ttooltip={actionsAccInfo.notifications.title}\n\t\t\t\t\t\t\t\taccessibilityAttributes={actionsAccInfo.notifications.accessibilityAttributes}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{notificationsAction?.count && (\n\t\t\t\t\t\t\t\t\t<ButtonBadge slot=\"badge\" design=\"OverlayText\" text={notificationsAction?.count} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Custom Items */}\n\t\t\t\t\t\t{this.sortItems(this.items).map(item => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={item._id}\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-custom-item ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(item._id),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdata-ui5-stable={item.stableDomRef}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!item.inOverflow ? <slot name={(item as any)._individualSlot}></slot> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{overflowAction && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-ui5-stable={overflowAction.stableDomRef}\n\t\t\t\t\t\t\t\tid=\"ui5-shellbar-overflow-button\"\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-overflow-button ui5-shellbar-action-button ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"overflow\")\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ticon={overflowAction.icon}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this.handleOverflowClick}\n\t\t\t\t\t\t\t\ttooltip={actionsAccInfo.overflow.title}\n\t\t\t\t\t\t\t\taccessibilityAttributes={actionsAccInfo.overflow.accessibilityAttributes}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.overflowBadge && (\n\t\t\t\t\t\t\t\t\t<ButtonBadge\n\t\t\t\t\t\t\t\t\t\tslot=\"badge\"\n\t\t\t\t\t\t\t\t\t\tdesign={this.overflowBadge === \" \" ? \"AttentionDot\" : \"OverlayText\"}\n\t\t\t\t\t\t\t\t\t\ttext={this.overflowBadge === \" \" ? \"\" : this.overflowBadge}\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</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{profileAction && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-profile-btn\n\t\t\t\t\t\t\t\tdata-ui5-stable={profileAction.stableDomRef}\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-image-button ui5-shellbar-action-button ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"profile\")\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this.handleProfileClick}\n\t\t\t\t\t\t\t\ttooltip={actionsAccInfo.profile.title}\n\t\t\t\t\t\t\t\taccessibilityAttributes={actionsAccInfo.profile.accessibilityAttributes}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<slot name=\"profile\"></slot>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{productSwitchAction && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tdata-ui5-stable={productSwitchAction.stableDomRef}\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-button-product-switch ui5-shellbar-action-button ui5-shellbar-gap-start\": true,\n\t\t\t\t\t\t\t\t\t\"ui5-shellbar-hidden\": this.isHidden(\"products\")\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ticon={productSwitchAction.icon}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\tonClick={this.handleProductSwitchClick}\n\t\t\t\t\t\t\t\ttooltip={actionsAccInfo.products.title}\n\t\t\t\t\t\t\t\taccessibilityAttributes={actionsAccInfo.products.accessibilityAttributes}\n\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t{/* Overflow Popover */}\n\t\t\t<Popover\n\t\t\t\tclass=\"ui5-shellbar-overflow-popover\"\n\t\t\t\topen={this.overflowPopoverOpen}\n\t\t\t\tonClose={this.onPopoverClose}\n\t\t\t\topener=\"ui5-shellbar-overflow-button\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thideArrow={true}\n\t\t\t\thorizontalAlign={this.popoverHorizontalAlign} // TODO: add test\n\t\t\t>\n\t\t\t\t<List separators=\"None\" onClick={this.handleOverflowItemClick}>\n\t\t\t\t\t{this.overflowItems.map(item => {\n\t\t\t\t\t\tif (item.type === \"action\") {\n\t\t\t\t\t\t\tconst actionData = item.data;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ShellBarItem\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\ticon={actionData.icon ? `sap-icon://${actionData.icon}` : \"\"}\n\t\t\t\t\t\t\t\t\tdata-action-id={item.id}\n\t\t\t\t\t\t\t\t\tcount={actionData.count}\n\t\t\t\t\t\t\t\t\tinOverflow={true}\n\t\t\t\t\t\t\t\t\ttext={this.getActionOverflowText(item.id)}\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\treturn <slot key={item.id} name={item.data._individualSlot}></slot>;\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/SideNavigation.d.ts

@@ -0,0 +1,186 @@
+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;
+};
+type SideNavigationItemClickEventDetail = {
+    item: SideNavigationSelectableItemBase;
+};
+/**
+ * @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;
+        "item-click": SideNavigationItemClickEventDetail;
+    };
+    /**
+     * 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;
+    get _effectiveCollapsed(): boolean;
+    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>;
+    private _isSmallScreen;
+    _handleItemClick(e: KeyboardEvent | MouseEvent, item: SideNavigationSelectableItemBase): void;
+    _handleOverflowClick(): void;
+    _getOverflowItems(): Array<SideNavigationItem>;
+    _selectItem(item: SideNavigationSelectableItemBase): void;
+    get _overflowItem(): SideNavigationItem | null;
+    get isOverflow(): boolean;
+    get isSideNavigation(): boolean;
+    captureRef(ref: HTMLElement & {
+        associatedItem?: UI5Element;
+    } | null): void;
+}
+export declare const isInstanceOfSideNavigation: (object: any) => object is SideNavigation;
+export default SideNavigation;
+export type { SideNavigationSelectionChangeEventDetail, SideNavigationItemClickEventDetail, };