@sapui5/sap.ushell 1.133.0 → 1.134.1

package/src/main/js/sap/ushell/thirdparty/UserMenu.js

@@ -0,0 +1,1809 @@
+sap.ui.define(['sap/ushell/thirdparty/webcomponents-base', 'sap/ushell/thirdparty/webcomponents', 'sap/ushell/thirdparty/webcomponents-fiori', 'sap/ushell/thirdparty/parameters-bundle.css25', 'sap/ushell/thirdparty/Icons'], (function (webcomponentsBase, webcomponents, webcomponentsFiori, parametersBundle_css, Icons) { 'use strict';
+
+    const o=e=>(t,r)=>{Object.defineProperty(t,r,{get(){return this.shadowRoot?.querySelector(e)}});};
+
+    function AvatarTemplate() {
+        return (parametersBundle_css.jsxs("div", { class: "ui5-avatar-root", tabindex: this.tabindex, "data-sap-focus-ref": true, role: this._role, "aria-haspopup": this._ariaHasPopup, "aria-label": this.accessibleNameText, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onClick: this._onclick, children: [this.hasImage ?
+                    parametersBundle_css.jsx("slot", {})
+                    :
+                        parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [this.icon && parametersBundle_css.jsx(parametersBundle_css.Icon, { class: "ui5-avatar-icon", name: this.icon, accessibleName: this.accessibleName }), this.initials &&
+                                    parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsx("span", { class: "ui5-avatar-initials ui5-avatar-initials-hidden", children: this.validInitials }), parametersBundle_css.jsx(parametersBundle_css.Icon, { name: this.fallbackIcon, class: "ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden" })] })] }), parametersBundle_css.jsx("slot", { name: "badge" })] }));
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var AvatarCss = `:host(:not([hidden])){display:inline-block;box-sizing:border-box;position:relative;font-family:"72override",var(--sapFontFamily)}:host(:not([hidden]).ui5_hovered){opacity:.7}:host([interactive]:not([disabled])){cursor:pointer}:host([interactive]:not([hidden]):active){background-color:var(--sapButton_Active_Background);border-color:var(--sapButton_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host([interactive]:not([hidden]):not([disabled]):not(:active):not([focused]):hover){box-shadow:var(--ui5-v2-8-0-avatar-hover-box-shadow-offset)}:host([interactive][desktop]:not([hidden])) .ui5-avatar-root:focus,:host([interactive]:not([hidden])) .ui5-avatar-root:focus-visible{outline:var(--_ui5-v2-8-0_avatar_outline);outline-offset:var(--_ui5-v2-8-0_avatar_focus_offset)}:host([disabled]){opacity:var(--sapContent_DisabledOpacity)}:host{height:3rem;width:3rem;border-radius:50%;border:var(--ui5-v2-8-0-avatar-initials-border);outline:none;color:var(--ui5-v2-8-0-avatar-initials-color)}.ui5-avatar-root{display:flex;align-items:center;justify-content:center;outline:none;height:100%;width:100%;border-radius:inherit}:host([_size="XS"]),:host([size="XS"]){height:2rem;width:2rem;min-height:2rem;min-width:2rem;font-size:var(--_ui5-v2-8-0_avatar_fontsize_XS)}:host(:not([size])),:host([_size="S"]),:host([size="S"]){min-height:3rem;min-width:3rem;font-size:var(--_ui5-v2-8-0_avatar_fontsize_S)}:host([_size="M"]),:host([size="M"]){min-height:4rem;min-width:4rem;font-size:var(--_ui5-v2-8-0_avatar_fontsize_M)}:host([_size="L"]),:host([size="L"]){min-height:5rem;min-width:5rem;font-size:var(--_ui5-v2-8-0_avatar_fontsize_L)}:host([_size="XL"]),:host([size="XL"]){min-height:7rem;min-width:7rem;font-size:var(--_ui5-v2-8-0_avatar_fontsize_XL)}:host .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_fontsize_S);width:var(--_ui5-v2-8-0_avatar_fontsize_S);color:inherit}:host([_size="XS"]) .ui5-avatar-icon,:host([size="XS"]) .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_icon_XS);width:var(--_ui5-v2-8-0_avatar_icon_XS)}:host([_size="S"]) .ui5-avatar-icon,:host([size="S"]) .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_icon_S);width:var(--_ui5-v2-8-0_avatar_icon_S)}:host([_size="M"]) .ui5-avatar-icon,:host([size="M"]) .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_icon_M);width:var(--_ui5-v2-8-0_avatar_icon_M)}:host([_size="L"]) .ui5-avatar-icon,:host([size="L"]) .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_icon_L);width:var(--_ui5-v2-8-0_avatar_icon_L)}:host([_size="XL"]) .ui5-avatar-icon,:host([size="XL"]) .ui5-avatar-icon{height:var(--_ui5-v2-8-0_avatar_icon_XL);width:var(--_ui5-v2-8-0_avatar_icon_XL)}::slotted(*){border-radius:50%;width:100%;height:100%;pointer-events:none}:host([shape="Square"]){border-radius:var(--ui5-v2-8-0-avatar-border-radius)}:host([shape="Square"]) ::slotted(*){border-radius:calc(var(--ui5-v2-8-0-avatar-border-radius) - var(--ui5-v2-8-0-avatar-border-radius-img-deduction))}:host(:not([color-scheme])),:host(:not([_has-image])),:host([_color-scheme="Accent6"]),:host([ui5-avatar][color-scheme="Accent6"]){background-color:var(--ui5-v2-8-0-avatar-accent6);color:var(--ui5-v2-8-0-avatar-accent6-color);border-color:var(--ui5-v2-8-0-avatar-accent6-border-color)}:host([_color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent6"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_6_Hover_Background)}:host([_color-scheme="Accent1"]),:host([ui5-avatar][color-scheme="Accent1"]){background-color:var(--ui5-v2-8-0-avatar-accent1);color:var(--ui5-v2-8-0-avatar-accent1-color);border-color:var(--ui5-v2-8-0-avatar-accent1-border-color)}:host([_color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent1"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_1_Hover_Background)}:host([_color-scheme="Accent2"]),:host([ui5-avatar][color-scheme="Accent2"]){background-color:var(--ui5-v2-8-0-avatar-accent2);color:var(--ui5-v2-8-0-avatar-accent2-color);border-color:var(--ui5-v2-8-0-avatar-accent2-border-color)}:host([_color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent2"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_2_Hover_Background)}:host([_color-scheme="Accent3"]),:host([ui5-avatar][color-scheme="Accent3"]){background-color:var(--ui5-v2-8-0-avatar-accent3);color:var(--ui5-v2-8-0-avatar-accent3-color);border-color:var(--ui5-v2-8-0-avatar-accent3-border-color)}:host([_color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent3"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_3_Hover_Background)}:host([_color-scheme="Accent4"]),:host([ui5-avatar][color-scheme="Accent4"]){background-color:var(--ui5-v2-8-0-avatar-accent4);color:var(--ui5-v2-8-0-avatar-accent4-color);border-color:var(--ui5-v2-8-0-avatar-accent4-border-color)}:host([_color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent4"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_4_Hover_Background)}:host([_color-scheme="Accent5"]),:host([ui5-avatar][color-scheme="Accent5"]){background-color:var(--ui5-v2-8-0-avatar-accent5);color:var(--ui5-v2-8-0-avatar-accent5-color);border-color:var(--ui5-v2-8-0-avatar-accent5-border-color)}:host([_color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent5"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_5_Hover_Background)}:host([_color-scheme="Accent7"]),:host([ui5-avatar][color-scheme="Accent7"]){background-color:var(--ui5-v2-8-0-avatar-accent7);color:var(--ui5-v2-8-0-avatar-accent7-color);border-color:var(--ui5-v2-8-0-avatar-accent7-border-color)}:host([_color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent7"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_7_Hover_Background)}:host([_color-scheme="Accent8"]),:host([ui5-avatar][color-scheme="Accent8"]){background-color:var(--ui5-v2-8-0-avatar-accent8);color:var(--ui5-v2-8-0-avatar-accent8-color);border-color:var(--ui5-v2-8-0-avatar-accent8-border-color)}:host([_color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent8"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_8_Hover_Background)}:host([_color-scheme="Accent9"]),:host([ui5-avatar][color-scheme="Accent9"]){background-color:var(--ui5-v2-8-0-avatar-accent9);color:var(--ui5-v2-8-0-avatar-accent9-color);border-color:var(--ui5-v2-8-0-avatar-accent9-border-color)}:host([_color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent9"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_9_Hover_Background)}:host([_color-scheme="Accent10"]),:host([ui5-avatar][color-scheme="Accent10"]){background-color:var(--ui5-v2-8-0-avatar-accent10);color:var(--ui5-v2-8-0-avatar-accent10-color);border-color:var(--ui5-v2-8-0-avatar-accent10-border-color)}:host([_color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover),:host([ui5-avatar][color-scheme="Accent10"][interactive]:not([hidden]):not([disabled]):not(:active):hover){background-color:var(--sapAvatar_10_Hover_Background)}:host([_color-scheme="Placeholder"]),:host([ui5-avatar][color-scheme="Placeholder"]){background-color:var(--ui5-v2-8-0-avatar-placeholder);color:var(--ui5-v2-8-0-avatar-placeholder-color);border-color:var(--sapAvatar_Lite_BorderColor)}:host([_has-image]){color:var(--ui5-v2-8-0-avatar-accent10-color);background-color:transparent;vertical-align:middle}.ui5-avatar-initials{color:inherit}.ui5-avatar-icon~.ui5-avatar-initials,.ui5-avatar-icon~.ui5-avatar-icon-fallback{display:none}.ui5-avatar-fallback-icon-hidden{display:none}.ui5-avatar-initials-hidden{position:absolute;visibility:hidden;z-index:0;pointer-events:none}::slotted([slot="badge"]){pointer-events:initial;position:absolute;bottom:0;right:0;width:1.125rem;height:1.125rem;font-family:"72override",var(--sapFontFamily);font-size:var(--sapFontSmallSize);color:var(--sapBackgroundColor);--_ui5-v2-8-0-tag-height: 1.125rem;--_ui5-v2-8-0-tag-border-radius: 50%}:host([_size="L"]) ::slotted([slot="badge"]),:host([size="L"]) ::slotted([slot="badge"]){width:1.25rem;height:1.25rem;--_ui5-v2-8-0-tag-height: 1.25rem;--_ui5-v2-8-0-tag-icon-width: .875rem}:host([_size="XL"]) ::slotted([slot="badge"]),:host([size="XL"]) ::slotted([slot="badge"]){width:1.75rem;height:1.75rem;--_ui5-v2-8-0-tag-height: 1.75rem;--_ui5-v2-8-0-tag-icon-width: 1rem}:host([shape="Square"]) ::slotted([slot="badge"]){bottom:-.125rem;right:-.125rem}:host([_size="L"][shape="Square"]) ::slotted([slot="badge"]),:host([size="L"][shape="Square"]) ::slotted([slot="badge"]){bottom:-.1875rem;right:-.1875rem}:host([_size="XL"][shape="Square"]) ::slotted([slot="badge"]),:host([size="XL"][shape="Square"]) ::slotted([slot="badge"]){bottom:-.25rem;right:-.25rem}
+`;
+
+    /**
+     * Different types of AvatarSize.
+     * @public
+     */
+    var AvatarSize;
+    (function (AvatarSize) {
+        /**
+         * component size - 2rem
+         * font size - 1rem
+         * @public
+         */
+        AvatarSize["XS"] = "XS";
+        /**
+         * component size - 3rem
+         * font size - 1.5rem
+         * @public
+         */
+        AvatarSize["S"] = "S";
+        /**
+         * component size - 4rem
+         * font size - 2rem
+         * @public
+         */
+        AvatarSize["M"] = "M";
+        /**
+         * component size - 5rem
+         * font size - 2.5rem
+         * @public
+         */
+        AvatarSize["L"] = "L";
+        /**
+         * component size - 7rem
+         * font size - 3rem
+         * @public
+         */
+        AvatarSize["XL"] = "XL";
+    })(AvatarSize || (AvatarSize = {}));
+    var AvatarSize$1 = AvatarSize;
+
+    const name$b = "employee";
+    const pathData$b = "M448 512H64V384q0-26 10-49.5t27.5-41T142 266t50-10h64q-27 0-50-10t-40.5-27.5T138 178t-10-50q0-26 10-49.5t27.5-41T206 10t50-10q26 0 49.5 10t41 27.5 27.5 41 10 49.5q0 27-10 50t-27.5 40.5-41 27.5-49.5 10h64q26 0 49.5 10t41 27.5 27.5 41 10 49.5v128zM96 384v96h320v-96q0-40-28-68t-68-28H192q-40 0-68 28t-28 68zm160-160q40 0 68-28t28-68-28-68-68-28-68 28-28 68 28 68 68 28zm32 192v-32h96v32h-96z";
+    const ltr$b = false;
+    const collection$b = "SAP-icons-v4";
+    const packageName$b = "@ui5/webcomponents-icons";
+
+    Icons.f(name$b, { pathData: pathData$b, ltr: ltr$b, collection: collection$b, packageName: packageName$b });
+
+    const name$a = "employee";
+    const pathData$a = "M342 255q48 23 77 67.5t29 99.5v32q0 11-7.5 18.5T422 480H90q-11 0-18.5-7.5T64 454v-32q0-55 29-99.5t77-67.5l-4-5q-19-17-28.5-40.5T128 160q0-27 10-50t27.5-40.5 41-27.5T256 32t49.5 10.5 41 28T374 111t10 49q0 27-11 52t-31 43zm-163-95q0 32 22.5 54.5T256 237t54.5-22.5T333 160t-22.5-54.5T256 83t-54.5 22.5T179 160zm51 181l-25-15q-13-7-13-19v-6q-34 17-55.5 49T115 422v7h115v-88zm167 81q0-40-21-72t-56-49v6q0 12-13 19l-26 15v88h116v-7zm-71-70q11 0 18.5 7.5T352 378t-7.5 18-18.5 7h-12q-11 0-18.5-7t-7.5-18 7.5-18.5T314 352h12z";
+    const ltr$a = false;
+    const collection$a = "SAP-icons-v5";
+    const packageName$a = "@ui5/webcomponents-icons";
+
+    Icons.f(name$a, { pathData: pathData$a, ltr: ltr$a, collection: collection$a, packageName: packageName$a });
+
+    var __decorate$6 = (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 Avatar_1;
+    /**
+     * @class
+     * ### Overview
+     *
+     * An image-like component that has different display options for representing images and icons
+     * in different shapes and sizes, depending on the use case.
+     *
+     * The shape can be circular or square. There are several predefined sizes, as well as an option to
+     * set a custom size.
+     *
+     * ### Keyboard Handling
+     *
+     * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+     * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.
+     *
+     * ### ES6 Module Import
+     * `import "@ui5/webcomponents/dist/Avatar.js";`
+     * @constructor
+     * @extends UI5Element
+     * @since 1.0.0-rc.6
+     * @implements {IAvatarGroupItem}
+     * @public
+     */
+    let Avatar = Avatar_1 = class Avatar extends webcomponentsBase.b {
+        constructor() {
+            super();
+            /**
+             * Defines whether the component is disabled.
+             * A disabled component can't be pressed or
+             * focused, and it is not in the tab chain.
+             * @default false
+             * @public
+             */
+            this.disabled = false;
+            /**
+             * Defines if the avatar is interactive (focusable and pressable).
+             *
+             * **Note:** This property won't have effect if the `disabled`
+             * property is set to `true`.
+             * @default false
+             * @public
+             */
+            this.interactive = false;
+            /**
+             * Defines the name of the fallback icon, which should be displayed in the following cases:
+             *
+             * 	- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
+             * 	- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+             * 	- If the image src is wrong.
+             *
+             * **Note:** If not set, a default fallback icon "employee" is displayed.
+             *
+             * **Note:** You should import the desired icon first, then use its name as "fallback-icon".
+             *
+             * `import "@ui5/webcomponents-icons/dist/{icon_name}.js"`
+             *
+             * `<ui5-avatar fallback-icon="alert">`
+             *
+             * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+             * @default "employee"
+             * @public
+             */
+            this.fallbackIcon = "employee";
+            /**
+             * Defines the shape of the component.
+             * @default "Circle"
+             * @public
+             */
+            this.shape = "Circle";
+            /**
+             * Defines predefined size of the component.
+             * @default "S"
+             * @public
+             */
+            this.size = "S";
+            /**
+             * Defines the background color of the desired image.
+             * @default "Accent6"
+             * @public
+             */
+            this.colorScheme = "Accent6";
+            /**
+             * @private
+             */
+            this._colorScheme = "Accent6";
+            /**
+             * Defines the additional accessibility attributes that will be applied to the component.
+             * The following field is supported:
+             *
+             * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+             * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+             *
+             * @public
+             * @since 2.0.0
+             * @default {}
+             */
+            this.accessibilityAttributes = {};
+            this._hasImage = false;
+            this._handleResizeBound = this.handleResize.bind(this);
+        }
+        get tabindex() {
+            if (this.forcedTabIndex) {
+                return parseInt(this.forcedTabIndex);
+            }
+            return this._interactive ? 0 : undefined;
+        }
+        /**
+         * Returns the effective avatar size.
+         * @default "S"
+         * @private
+         */
+        get effectiveSize() {
+            // we read the attribute, because the "size" property will always have a default value
+            return this.getAttribute("size") || AvatarSize$1.S;
+        }
+        /**
+         * Returns the effective background color.
+         * @default "Accent6"
+         * @private
+         */
+        get еffectiveBackgroundColor() {
+            // we read the attribute, because the "background-color" property will always have a default value
+            return this.getAttribute("color-scheme") || this._colorScheme;
+        }
+        get _role() {
+            return this._interactive ? "button" : "img";
+        }
+        get _ariaHasPopup() {
+            return this._getAriaHasPopup();
+        }
+        get _interactive() {
+            return this.interactive && !this.disabled;
+        }
+        get validInitials() {
+            // initials should consist of only 1,2 or 3 latin letters
+            const validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/, areInitialsValid = this.initials && validInitials.test(this.initials);
+            if (areInitialsValid) {
+                return this.initials;
+            }
+            return null;
+        }
+        get accessibleNameText() {
+            if (this.accessibleName) {
+                return this.accessibleName;
+            }
+            const defaultLabel = Avatar_1.i18nBundle.getText(parametersBundle_css.AVATAR_TOOLTIP);
+            return this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;
+        }
+        get hasImage() {
+            this._hasImage = !!this.image.length;
+            return this._hasImage;
+        }
+        get initialsContainer() {
+            return this.getDomRef().querySelector(".ui5-avatar-initials");
+        }
+        get fallBackIconDomRef() {
+            return this.getDomRef().querySelector(".ui5-avatar-icon-fallback");
+        }
+        async onAfterRendering() {
+            await Icons.f$1();
+            if (this.initials && !this.icon) {
+                this._checkInitials();
+            }
+        }
+        onEnterDOM() {
+            if (Icons.f$2()) {
+                this.setAttribute("desktop", "");
+            }
+            this.initialsContainer && webcomponentsBase.f$1.register(this.initialsContainer, this._handleResizeBound);
+        }
+        onExitDOM() {
+            this.initialsContainer && webcomponentsBase.f$1.deregister(this.initialsContainer, this._handleResizeBound);
+        }
+        handleResize() {
+            if (this.initials && !this.icon) {
+                this._checkInitials();
+            }
+        }
+        _checkInitials() {
+            const avatar = this.getDomRef();
+            const avatarInitials = avatar.querySelector(".ui5-avatar-initials");
+            const validInitials = this.validInitials && avatarInitials && avatarInitials.scrollWidth <= avatar.scrollWidth;
+            if (validInitials) {
+                this.showInitials();
+                return;
+            }
+            this.showFallbackIcon();
+        }
+        showFallbackIcon() {
+            this.initialsContainer?.classList.add("ui5-avatar-initials-hidden");
+            this.fallBackIconDomRef?.classList.remove("ui5-avatar-fallback-icon-hidden");
+        }
+        showInitials() {
+            this.initialsContainer?.classList.remove("ui5-avatar-initials-hidden");
+            this.fallBackIconDomRef?.classList.add("ui5-avatar-fallback-icon-hidden");
+        }
+        _onclick(e) {
+            e.stopPropagation();
+            this._fireClick();
+        }
+        _onkeydown(e) {
+            if (!this._interactive) {
+                return;
+            }
+            if (webcomponentsBase.b$1(e)) {
+                this._fireClick();
+            }
+            if (webcomponentsBase.i(e)) {
+                e.preventDefault(); // prevent scrolling
+            }
+        }
+        _onkeyup(e) {
+            if (this._interactive && !e.shiftKey && webcomponentsBase.i(e)) {
+                this._fireClick();
+            }
+        }
+        _fireClick() {
+            this.fireDecoratorEvent("click");
+        }
+        _getAriaHasPopup() {
+            const ariaHaspopup = this.accessibilityAttributes.hasPopup;
+            if (!this._interactive || !ariaHaspopup) {
+                return;
+            }
+            return ariaHaspopup;
+        }
+    };
+    __decorate$6([
+        webcomponentsBase.s({ type: Boolean })
+    ], Avatar.prototype, "disabled", void 0);
+    __decorate$6([
+        webcomponentsBase.s({ type: Boolean })
+    ], Avatar.prototype, "interactive", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "icon", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "fallbackIcon", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "initials", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "shape", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "size", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "colorScheme", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "_colorScheme", void 0);
+    __decorate$6([
+        webcomponentsBase.s()
+    ], Avatar.prototype, "accessibleName", void 0);
+    __decorate$6([
+        webcomponentsBase.s({ type: Object })
+    ], Avatar.prototype, "accessibilityAttributes", void 0);
+    __decorate$6([
+        webcomponentsBase.s({ noAttribute: true })
+    ], Avatar.prototype, "forcedTabIndex", void 0);
+    __decorate$6([
+        webcomponentsBase.s({ type: Boolean })
+    ], Avatar.prototype, "_hasImage", void 0);
+    __decorate$6([
+        webcomponentsBase.d({ type: HTMLElement, "default": true })
+    ], Avatar.prototype, "image", void 0);
+    __decorate$6([
+        webcomponentsBase.d()
+    ], Avatar.prototype, "badge", void 0);
+    __decorate$6([
+        parametersBundle_css.i("@ui5/webcomponents")
+    ], Avatar, "i18nBundle", void 0);
+    Avatar = Avatar_1 = __decorate$6([
+        webcomponentsBase.m({
+            tag: "ui5-avatar",
+            languageAware: true,
+            renderer: parametersBundle_css.d,
+            styles: AvatarCss,
+            template: AvatarTemplate,
+        })
+        /**
+         * Fired on mouseup, space and enter if avatar is interactive
+         *
+         * **Note:** The event will not be fired if the `disabled`
+         * property is set to `true`.
+         * @private
+         * @since 1.0.0-rc.11
+         */
+        ,
+        parametersBundle_css.l("click", {
+            bubbles: true,
+        })
+    ], Avatar);
+    Avatar.define();
+    var Avatar$1 = Avatar;
+
+    const name$9 = "sys-help-2";
+    const pathData$9 = "M256 0q53 0 99.5 20T437 74.5t55 81.5 20 100-20 99.5-55 81.5-81.5 55-99.5 20-100-20-81.5-55T20 355.5 0 256t20-100 54.5-81.5T156 20 256 0zm-5 425q15 0 26-11t11-26-11-25.5-26-10.5-25.5 10.5T215 388t10.5 26 25.5 11zm101-239q0-32-27-57t-77-25q-46 0-72.5 24T146 187h52q5-24 17.5-32.5T251 146t35 12.5 12 27.5q0 10-2.5 14T282 215l-20 17q-15 12-23 21t-11.5 18.5-4.5 21-1 27.5h50q0-12 .5-19t3-12.5T283 278t15-13l27-25 16-18 9-16z";
+    const ltr$9 = true;
+    const collection$9 = "SAP-icons-v4";
+    const packageName$9 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$9, { pathData: pathData$9, ltr: ltr$9, collection: collection$9, packageName: packageName$9 });
+
+    const name$8 = "sys-help-2";
+    const pathData$8 = "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm32 289q31-10 50.5-36.5T358 192q0-43-29.5-72.5T256 90q-21 0-39.5 8T184 118.5 162 148t-8 35q0 20 9 30.5t23 10.5q13 0 22.5-9t9.5-23q0-16 11-27t27-11 27 11 11 27-11 27-27 11q-14 0-23 9.5t-9 22.5v26q0 14 9 23t23 9q13 0 22-9t10-22zm-32 127q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9z";
+    const ltr$8 = true;
+    const collection$8 = "SAP-icons-v5";
+    const packageName$8 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$8, { pathData: pathData$8, ltr: ltr$8, collection: collection$8, packageName: packageName$8 });
+
+    /**
+     * Defines tag design types.
+     * @public
+     */
+    var TagDesign;
+    (function (TagDesign) {
+        /**
+         * Set1 of generic indication colors that are intended for industry-specific use cases
+         * @public
+         */
+        TagDesign["Set1"] = "Set1";
+        /**
+         * Set2 of generic indication colors that are intended for industry-specific use cases
+         * @public
+         */
+        TagDesign["Set2"] = "Set2";
+        /**
+         * Neutral design
+         * @public
+         */
+        TagDesign["Neutral"] = "Neutral";
+        /**
+         * Information design
+         * @public
+         */
+        TagDesign["Information"] = "Information";
+        /**
+         * Positive design
+         * @public
+         */
+        TagDesign["Positive"] = "Positive";
+        /**
+         * Negative design
+         * @public
+         */
+        TagDesign["Negative"] = "Negative";
+        /**
+         * Critical design
+         * @public
+         */
+        TagDesign["Critical"] = "Critical";
+    })(TagDesign || (TagDesign = {}));
+    var TagDesign$1 = TagDesign;
+
+    function TagTemplate() {
+        return (parametersBundle_css.jsx(parametersBundle_css.Fragment, { children: this.interactive ?
+                parametersBundle_css.jsx("button", { class: "ui5-tag-root", title: this._title, "aria-roledescription": this._roleDescription, "aria-description": this._valueState, onClick: this._onclick, part: "root", children: content.call(this) })
+                :
+                    parametersBundle_css.jsx("div", { class: "ui5-tag-root", title: this._title, part: "root", children: content.call(this) }) }));
+    }
+    function content() {
+        return (parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsx("slot", { name: "icon" }), this._semanticIconName &&
+                    parametersBundle_css.jsx(parametersBundle_css.Icon, { class: "ui5-tag-semantic-icon", name: this._semanticIconName }), parametersBundle_css.jsx("span", { class: "ui5-hidden-text", children: this.tagDescription }), this.hasText &&
+                    parametersBundle_css.jsx("span", { class: "ui5-tag-text", children: parametersBundle_css.jsx("slot", {}) })] }));
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var tagCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:inline-block}:host{font-size:var(--sapFontSmallSize);font-family:var(--sapFontBoldFamily);font-weight:var(--_ui5-v2-8-0-tag-font-weight);letter-spacing:var(--_ui5-v2-8-0-tag-letter-spacing);line-height:var(--_ui5-v2-8-0-tag-height)}.ui5-tag-root{display:flex;align-items:baseline;justify-content:center;width:100%;min-width:1.125em;max-width:100%;box-sizing:border-box;padding:var(--_ui5-v2-8-0-tag-text-padding);border:.0625rem solid;border-radius:var(--sapButton_BorderCornerRadius);white-space:normal;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}:host([interactive]) .ui5-tag-root:active{text-shadow:var(--ui5-v2-8-0-tag-text-shadow)}:host([interactive]) .ui5-tag-root{cursor:pointer}:host([desktop][interactive]) .ui5-tag-root:focus,:host([interactive]) .ui5-tag-root:focus-visible{outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:1px}:host([wrapping-type="None"]) .ui5-tag-root{white-space:nowrap}:host([_icon-only]) .ui5-tag-root{padding-inline:var(--_ui5-v2-8-0-tag-padding-inline-icon-only)}.ui5-tag-text{text-transform:var(--_ui5-v2-8-0-tag-text-transform);text-align:start;pointer-events:none;overflow:hidden;text-overflow:ellipsis}:host([_has-icon]) .ui5-tag-text{padding-inline-start:var(--_ui5-v2-8-0-tag-icon-gap)}[ui5-icon],::slotted([ui5-icon]){width:var(--_ui5-v2-8-0-tag-icon-width);min-width:var(--_ui5-v2-8-0-tag-icon-width);color:inherit;pointer-events:none;align-self:flex-start}.ui5-tag-root{background-color:var(--sapNeutralBackground);border-color:var(--sapNeutralBorderColor);color:var(--sapTextColor);text-shadow:var(--ui5-v2-8-0-tag-text-shadow)}:host([interactive]) .ui5-tag-root:hover{background-color:var(--sapButton_Neutral_Hover_Background);border-color:var(--sapButton_Neutral_Hover_BorderColor);color:var(--sapButton_Neutral_Hover_TextColor)}:host([interactive]) .ui5-tag-root:active{background-color:var(--sapButton_Neutral_Active_Background);border-color:var(--sapButton_Neutral_Active_BorderColor);color:var(--sapButton_Active_TextColor)}:host([design="Positive"]) .ui5-tag-root{background-color:var(--sapButton_Success_Background);border-color:var(--sapButton_Success_BorderColor);color:var(--sapButton_Success_TextColor);text-shadow:var(--ui5-v2-8-0-tag-contrast-text-shadow)}:host([interactive][design="Positive"]) .ui5-tag-root:hover{background-color:var(--sapButton_Success_Hover_Background);border-color:var(--sapButton_Success_Hover_BorderColor);color:var(--sapButton_Success_Hover_TextColor)}:host([interactive][design="Positive"]) .ui5-tag-root:active{background-color:var(--sapButton_Success_Active_Background);border-color:var(--sapButton_Success_Active_BorderColor);color:var(--sapButton_Accept_Selected_TextColor)}:host([design="Negative"]) .ui5-tag-root{background-color:var(--sapButton_Negative_Background);border-color:var(--sapButton_Negative_BorderColor);color:var(--sapButton_Negative_TextColor);text-shadow:var(--ui5-v2-8-0-tag-contrast-text-shadow)}:host([interactive][design="Negative"]) .ui5-tag-root:hover{background-color:var(--sapButton_Negative_Hover_Background);border-color:var(--sapButton_Negative_Hover_BorderColor);color:var(--sapButton_Negative_Hover_TextColor)}:host([interactive][design="Negative"]) .ui5-tag-root:active{background-color:var(--sapButton_Negative_Active_Background);border-color:var(--sapButton_Negative_Active_BorderColor);color:var(--sapButton_Reject_Selected_TextColor)}:host([design="Critical"]) .ui5-tag-root{background-color:var(--sapButton_Critical_Background);border-color:var(--sapButton_Critical_BorderColor);color:var(--sapButton_Critical_TextColor);text-shadow:var(--ui5-v2-8-0-tag-contrast-text-shadow)}:host([interactive][design="Critical"]) .ui5-tag-root:hover{background-color:var(--sapButton_Critical_Hover_Background);border-color:var(--sapButton_Critical_Hover_BorderColor);color:var(--sapButton_Critical_Hover_TextColor)}:host([interactive][design="Critical"]) .ui5-tag-root:active{background-color:var(--sapButton_Critical_Active_Background);border-color:var(--sapButton_Critical_Active_BorderColor);color:var(--sapButton_Attention_Selected_TextColor)}:host([design="Information"]) .ui5-tag-root{background-color:var(--sapButton_Information_Background);border-color:var(--sapButton_Information_BorderColor);color:var(--sapButton_Information_TextColor);text-shadow:var(--ui5-v2-8-0-tag-information-text-shadow)}:host([interactive][design="Information"]) .ui5-tag-root:hover{background-color:var(--sapButton_Information_Hover_Background);border-color:var(--sapButton_Information_Hover_BorderColor);color:var(--sapButton_Information_Hover_TextColor)}:host([interactive][design="Information"]) .ui5-tag-root:active{background-color:var(--sapButton_Information_Active_Background);border-color:var(--sapButton_Information_Active_BorderColor);color:var(--sapButton_Selected_TextColor)}:host([design="Set1"]) .ui5-tag-root{text-shadow:var(--ui5-v2-8-0-tag-contrast-text-shadow)}:host([design="Set1"]) .ui5-tag-root,:host([interactive][design="Set1"]) .ui5-tag-root{background-color:var(--sapIndicationColor_1_Background);border-color:var(--sapIndicationColor_1_BorderColor);color:var(--sapIndicationColor_1_TextColor)}:host([interactive][design="Set1"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_1_Hover_Background)}:host([interactive][design="Set1"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_1_Active_Background);border-color:var(--sapIndicationColor_1_Active_BorderColor);color:var(--sapIndicationColor_1_Active_TextColor)}:host([design="Set1"][color-scheme="2"]) .ui5-tag-root{background-color:var(--sapIndicationColor_2_Background);border-color:var(--sapIndicationColor_2_BorderColor);color:var(--sapIndicationColor_2_TextColor)}:host([interactive][design="Set1"][color-scheme="2"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_2_Hover_Background)}:host([interactive][design="Set1"][color-scheme="2"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_2_Active_Background);border-color:var(--sapIndicationColor_2_Active_BorderColor);color:var(--sapIndicationColor_2_Active_TextColor)}:host([design="Set1"][color-scheme="3"]) .ui5-tag-root{background-color:var(--sapIndicationColor_3_Background);border-color:var(--sapIndicationColor_3_BorderColor);color:var(--sapIndicationColor_3_TextColor)}:host([interactive][design="Set1"][color-scheme="3"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_3_Hover_Background)}:host([interactive][design="Set1"][color-scheme="3"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_3_Active_Background);border-color:var(--sapIndicationColor_3_Active_BorderColor);color:var(--sapIndicationColor_3_Active_TextColor)}:host([design="Set1"][color-scheme="4"]) .ui5-tag-root{background-color:var(--sapIndicationColor_4_Background);border-color:var(--sapIndicationColor_4_BorderColor);color:var(--sapIndicationColor_4_TextColor)}:host([interactive][design="Set1"][color-scheme="4"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_4_Hover_Background)}:host([interactive][design="Set1"][color-scheme="4"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_4_Active_Background);border-color:var(--sapIndicationColor_4_Active_BorderColor);color:var(--sapIndicationColor_4_Active_TextColor)}:host([design="Set1"][color-scheme="5"]) .ui5-tag-root{background-color:var(--sapIndicationColor_5_Background);border-color:var(--sapIndicationColor_5_BorderColor);color:var(--sapIndicationColor_5_TextColor)}:host([interactive][design="Set1"][color-scheme="5"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_5_Hover_Background)}:host([interactive][design="Set1"][color-scheme="5"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_5_Active_Background);border-color:var(--sapIndicationColor_5_Active_BorderColor);color:var(--sapIndicationColor_5_Active_TextColor)}:host([design="Set1"][color-scheme="6"]) .ui5-tag-root{background-color:var(--sapIndicationColor_6_Background);border-color:var(--sapIndicationColor_6_BorderColor);color:var(--sapIndicationColor_6_TextColor)}:host([interactive][design="Set1"][color-scheme="6"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_6_Hover_Background)}:host([interactive][design="Set1"][color-scheme="6"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_6_Active_Background);border-color:var(--sapIndicationColor_6_Active_BorderColor);color:var(--sapIndicationColor_6_Active_TextColor)}:host([design="Set1"][color-scheme="7"]) .ui5-tag-root{background-color:var(--sapIndicationColor_7_Background);border-color:var(--sapIndicationColor_7_BorderColor);color:var(--sapIndicationColor_7_TextColor)}:host([interactive][design="Set1"][color-scheme="7"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_7_Hover_Background)}:host([interactive][design="Set1"][color-scheme="7"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_7_Active_Background);border-color:var(--sapIndicationColor_7_Active_BorderColor);color:var(--sapIndicationColor_7_Active_TextColor)}:host([design="Set1"][color-scheme="8"]) .ui5-tag-root{background-color:var(--sapIndicationColor_8_Background);border-color:var(--sapIndicationColor_8_BorderColor);color:var(--sapIndicationColor_8_TextColor)}:host([interactive][design="Set1"][color-scheme="8"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_8_Hover_Background)}:host([interactive][design="Set1"][color-scheme="8"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_8_Active_Background);border-color:var(--sapIndicationColor_8_Active_BorderColor);color:var(--sapIndicationColor_8_Active_TextColor)}:host([design="Set1"][color-scheme="9"]) .ui5-tag-root{background-color:var(--sapIndicationColor_9_Background);border-color:var(--sapIndicationColor_9_BorderColor);color:var(--sapIndicationColor_9_TextColor)}:host([interactive][design="Set1"][color-scheme="9"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_9_Hover_Background)}:host([interactive][design="Set1"][color-scheme="9"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_9_Active_Background);border-color:var(--sapIndicationColor_9_Active_BorderColor);color:var(--sapIndicationColor_9_Active_TextColor)}:host([design="Set1"][color-scheme="10"]) .ui5-tag-root{background-color:var(--sapIndicationColor_10_Background);border-color:var(--sapIndicationColor_10_BorderColor);color:var(--sapIndicationColor_10_TextColor)}:host([interactive][design="Set1"][color-scheme="10"]) .ui5-tag-root:hover{background-color:var(--sapIndicationColor_10_Hover_Background)}:host([interactive][design="Set1"][color-scheme="10"]) .ui5-tag-root:active{background-color:var(--sapIndicationColor_10_Active_Background);border-color:var(--sapIndicationColor_10_Active_BorderColor);color:var(--sapIndicationColor_10_Active_TextColor)}:host([design="Set2"]) .ui5-tag-root{text-shadow:var(--ui5-v2-8-0-tag-text-shadow)}:host([design="Set2"]) .ui5-tag-root,:host([interactive][design="Set2"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-color)}:host([interactive][design="Set2"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-hover-background)}:host([interactive][design="Set2"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-1-active-color)}:host([design="Set2"][color-scheme="2"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-color)}:host([design="Set2"][color-scheme="3"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-color)}:host([interactive][design="Set2"][color-scheme="3"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-hover-background)}:host([interactive][design="Set2"][color-scheme="3"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-3-active-color)}:host([design="Set2"][color-scheme="4"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-color)}:host([interactive][design="Set2"][color-scheme="4"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-hover-background)}:host([interactive][design="Set2"][color-scheme="4"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-4-active-color)}:host([design="Set2"][color-scheme="5"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-color)}:host([interactive][design="Set2"][color-scheme="5"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-hover-background)}:host([interactive][design="Set2"][color-scheme="5"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-5-active-color)}:host([design="Set2"][color-scheme="6"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-color)}:host([interactive][design="Set2"][color-scheme="6"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-hover-background)}:host([interactive][design="Set2"][color-scheme="6"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-6-active-color)}:host([design="Set2"][color-scheme="7"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-color)}:host([interactive][design="Set2"][color-scheme="7"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-hover-background)}:host([interactive][design="Set2"][color-scheme="7"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-7-active-color)}:host([design="Set2"][color-scheme="8"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-color)}:host([interactive][design="Set2"][color-scheme="8"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-hover-background)}:host([interactive][design="Set2"][color-scheme="8"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-8-active-color)}:host([design="Set2"][color-scheme="9"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-color)}:host([interactive][design="Set2"][color-scheme="9"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-hover-background)}:host([interactive][design="Set2"][color-scheme="9"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-9-active-color)}:host([interactive][design="Set2"][color-scheme="10"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-hover-background)}:host([interactive][design="Set2"][color-scheme="10"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-active-color)}:host([design="Set2"][color-scheme="10"]) .ui5-tag-root{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-10-color)}:host([interactive][design="Set2"][color-scheme="2"]) .ui5-tag-root:hover{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-hover-background)}:host([interactive][design="Set2"][color-scheme="2"]) .ui5-tag-root:active{background-color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-active-background);border-color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-active-border);color:var(--ui5-v2-8-0-tag-set2-color-scheme-2-active-color)}:host([size="L"]){font-family:var(--sapFontSemiboldDuplexFamily);line-height:var(--_ui5-v2-8-0-tag-height_size_l)}:host([size="L"]) .ui5-tag-root{font-size:var(--_ui5-v2-8-0-tag-font-size_size_l);min-width:var(--_ui5-v2-8-0-tag-min-width_size_l);padding:var(--_ui5-v2-8-0-tag-text_padding_size_l)}:host([size="L"]) [ui5-icon],:host([size="L"]) ::slotted([ui5-icon]){min-width:var(--_ui5-v2-8-0-tag-icon_min_width_size_l);min-height:var(--_ui5-v2-8-0-tag-icon_min_height_size_l);height:var(--_ui5-v2-8-0-tag-icon_height_size_l)}
+`;
+
+    var __decorate$5 = (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 Tag_1;
+    /**
+     * @class
+     * ### Overview
+     *
+     * The `ui5-tag` is a component which serves
+     * the purpose to attract the user attention to some piece
+     * of information (state, quantity, condition, etc.).
+     * It can contain icon and text information, and its design can be chosen from specific design types.
+     *
+     * ### Usage Guidelines
+     *
+     * - If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.
+      * - Colors can be semantic or not semantic.
+     *
+     * ### ES6 Module Import
+     *
+     * `import "@ui5/webcomponents/dist/Tag.js";`
+     * @csspart root - Used to style the root element.
+     * @constructor
+     * @extends UI5Element
+     * @since 2.0.0
+     * @public
+     */
+    let Tag = Tag_1 = class Tag extends webcomponentsBase.b {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines the design type of the component.
+             * @default "Neutral"
+             * @public
+             * @since 1.22.0
+             */
+            this.design = "Neutral";
+            /**
+             * Defines the color scheme of the component.
+             * There are 10 predefined schemes.
+             * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+             * @default "1"
+             * @public
+             */
+            this.colorScheme = "1";
+            /**
+             * Defines if the default state icon is shown.
+             * @default false
+             * @public
+             * @since 1.22.0
+             */
+            this.hideStateIcon = false;
+            /**
+             * Defines if the component is interactive (focusable and pressable).
+             *
+             * @default false
+             * @public
+             * @since 1.22.0
+             */
+            this.interactive = false;
+            /**
+             * Defines how the text of a component will be displayed when there is not enough space.
+             *
+             * **Note:** For option "Normal" the text will wrap and the
+             * words will not be broken based on hyphenation.
+             * @default "Normal"
+             * @public
+             * @since 1.22.0
+             */
+            this.wrappingType = "Normal";
+            /**
+             * Defines predefined size of the component.
+             * @default "S"
+             * @public
+             * @since 2.0.0
+             */
+            this.size = "S";
+            /**
+             * Defines if the tag has an icon.
+             * @private
+             */
+            this._hasIcon = false;
+            /**
+             * Defines if the tag has only an icon (and no text).
+             * @private
+             */
+            this._iconOnly = false;
+        }
+        onEnterDOM() {
+            if (Icons.f$2()) {
+                this.setAttribute("desktop", "");
+            }
+        }
+        onBeforeRendering() {
+            this._hasIcon = this.hasIcon || !!this._semanticIconName;
+            this._iconOnly = this.iconOnly;
+        }
+        get _roleDescription() {
+            return Tag_1.i18nBundle.getText(parametersBundle_css.TAG_ROLE_DESCRIPTION);
+        }
+        get _valueState() {
+            switch (this.design) {
+                case TagDesign$1.Positive:
+                    return Tag_1.i18nBundle.getText(parametersBundle_css.TAG_SUCCESS);
+                case TagDesign$1.Negative:
+                    return Tag_1.i18nBundle.getText(parametersBundle_css.TAG_ERROR);
+                case TagDesign$1.Critical:
+                    return Tag_1.i18nBundle.getText(parametersBundle_css.TAG_WARNING);
+                case TagDesign$1.Information:
+                    return Tag_1.i18nBundle.getText(parametersBundle_css.TAG_INFORMATION);
+            }
+            return undefined;
+        }
+        get hasText() {
+            return parametersBundle_css.t(this.text);
+        }
+        get hasIcon() {
+            return !!this.icon.length;
+        }
+        get iconOnly() {
+            return this.hasIcon && !this.hasText;
+        }
+        get _title() {
+            return this.title || undefined;
+        }
+        get tagDescription() {
+            if (this.interactive) {
+                return undefined;
+            }
+            const valueState = this._valueState;
+            let description = Tag_1.i18nBundle.getText(parametersBundle_css.TAG_DESCRIPTION_TAG);
+            if (valueState) {
+                description = `${description} ${valueState}`;
+            }
+            return description;
+        }
+        get _semanticIconName() {
+            if (this.hideStateIcon || this.hasIcon) {
+                return null;
+            }
+            switch (this.design) {
+                case TagDesign$1.Neutral:
+                    return "sys-help-2";
+                case TagDesign$1.Positive:
+                    return "sys-enter-2";
+                case TagDesign$1.Negative:
+                    return "error";
+                case TagDesign$1.Critical:
+                    return "alert";
+                case TagDesign$1.Information:
+                    return "information";
+                default:
+                    return null;
+            }
+        }
+        _onclick() {
+            this.fireDecoratorEvent("click");
+        }
+    };
+    __decorate$5([
+        webcomponentsBase.s()
+    ], Tag.prototype, "design", void 0);
+    __decorate$5([
+        webcomponentsBase.s()
+    ], Tag.prototype, "colorScheme", void 0);
+    __decorate$5([
+        webcomponentsBase.s({ type: Boolean })
+    ], Tag.prototype, "hideStateIcon", void 0);
+    __decorate$5([
+        webcomponentsBase.s({ type: Boolean })
+    ], Tag.prototype, "interactive", void 0);
+    __decorate$5([
+        webcomponentsBase.s()
+    ], Tag.prototype, "wrappingType", void 0);
+    __decorate$5([
+        webcomponentsBase.s()
+    ], Tag.prototype, "size", void 0);
+    __decorate$5([
+        webcomponentsBase.s({ type: Boolean })
+    ], Tag.prototype, "_hasIcon", void 0);
+    __decorate$5([
+        webcomponentsBase.s({ type: Boolean })
+    ], Tag.prototype, "_iconOnly", void 0);
+    __decorate$5([
+        webcomponentsBase.d({ type: Node, "default": true })
+    ], Tag.prototype, "text", void 0);
+    __decorate$5([
+        webcomponentsBase.d()
+    ], Tag.prototype, "icon", void 0);
+    __decorate$5([
+        parametersBundle_css.i("@ui5/webcomponents")
+    ], Tag, "i18nBundle", void 0);
+    Tag = Tag_1 = __decorate$5([
+        webcomponentsBase.m({
+            tag: "ui5-tag",
+            languageAware: true,
+            renderer: parametersBundle_css.d,
+            template: TagTemplate,
+            styles: tagCss,
+        })
+        /**
+         * Fired when the user clicks on an interactive tag.
+         *
+         * **Note:** The event will be fired if the `interactive` property is `true`
+         * @public
+         * @since 1.22.0
+         */
+        ,
+        parametersBundle_css.l("click", {
+            bubbles: true,
+        })
+    ], Tag);
+    Tag.define();
+    var Tag$1 = Tag;
+
+    /**
+     * Empty Indicator Mode.
+     * @public
+     */
+    var TextEmptyIndicatorMode;
+    (function (TextEmptyIndicatorMode) {
+        /**
+         * Empty indicator is never rendered.
+         * @public
+         */
+        TextEmptyIndicatorMode["Off"] = "Off";
+        /**
+         * Empty indicator is rendered always when the component's content is empty.
+         * @public
+         */
+        TextEmptyIndicatorMode["On"] = "On";
+    })(TextEmptyIndicatorMode || (TextEmptyIndicatorMode = {}));
+    var TextEmptyIndicatorMode$1 = TextEmptyIndicatorMode;
+
+    function TextTemplate() {
+        return parametersBundle_css.jsx(parametersBundle_css.Fragment, { children: parametersBundle_css.jsx("span", { children: this._renderEmptyIndicator ?
+                    parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsx("span", { className: "empty-indicator", "aria-hidden": "true", children: this._emptyIndicatorSymbol }), parametersBundle_css.jsx("span", { className: "empty-indicator-aria-label", children: this._emptyIndicatorAriaLabel })] })
+                    :
+                        parametersBundle_css.jsx("slot", {}) }) });
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var styles = `:host{max-width:100%;font-size:var(--sapFontSize);font-family:var(--sapFontFamily);color:var(--sapTextColor);line-height:normal;cursor:text;overflow:hidden}:host([max-lines="1"]){display:inline-block;text-overflow:ellipsis;white-space:nowrap}:host(:not([max-lines="1"])){display:-webkit-box;-webkit-line-clamp:var(--_ui5-v2-8-0_text_max_lines);line-clamp:var(--_ui5-v2-8-0_text_max_lines);-webkit-box-orient:vertical;white-space:normal;word-wrap:break-word}.empty-indicator-aria-label{position:absolute!important;clip:rect(1px,1px,1px,1px);user-select:none;left:0;top:0;font-size:0}
+`;
+
+    var __decorate$4 = (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 Text_1;
+    /**
+     * @class
+     *
+     * <h3>Overview</h3>
+     *
+     * The `ui5-text` component displays text that can be used in any content area of an application.
+     *
+     * <h3>Usage</h3>
+     *
+     * - Use the `ui5-text` if you want to display text inside a form, table, or any other content area.
+     * - Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).
+     *
+     * <h3>Responsive behavior</h3>
+     *
+     * The `ui5-text` component is fully adaptive to all screen sizes.
+     * By default, the text will wrap when the space is not enough.
+     * In addition, the component supports truncation via the <code>max-lines</code> property,
+     * by defining the number of lines the text should wrap before start truncating.
+     *
+     * <h3>ES6 Module Import</h3>
+     *
+     * <code>import "@ui5/webcomponents/dist/Text";</code>
+     *
+     * @constructor
+     * @extends UI5Element
+     * @public
+     * @since 2.0.0
+     */
+    let Text = Text_1 = class Text extends webcomponentsBase.b {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines the number of lines the text should wrap before it truncates.
+             * @default Infinity
+             * @public
+             */
+            this.maxLines = Infinity;
+            /**
+             * Specifies if an empty indicator should be displayed when there is no text.
+             * @default "Off"
+             * @since 2.2.0
+             * @public
+             */
+            this.emptyIndicatorMode = "Off";
+        }
+        onBeforeRendering() {
+            this.style.setProperty(Icons.d$1("--_ui5_text_max_lines"), `${this.maxLines}`);
+        }
+        get hasText() {
+            return parametersBundle_css.t(this.text);
+        }
+        get _renderEmptyIndicator() {
+            return !this.hasText && this.emptyIndicatorMode === TextEmptyIndicatorMode$1.On;
+        }
+        get _emptyIndicatorAriaLabel() {
+            return Text_1.i18nBundle.getText(parametersBundle_css.EMPTY_INDICATOR_ACCESSIBLE_TEXT);
+        }
+        get _emptyIndicatorSymbol() {
+            return Text_1.i18nBundle.getText(parametersBundle_css.EMPTY_INDICATOR_SYMBOL);
+        }
+    };
+    __decorate$4([
+        webcomponentsBase.s({ type: Number })
+    ], Text.prototype, "maxLines", void 0);
+    __decorate$4([
+        webcomponentsBase.s()
+    ], Text.prototype, "emptyIndicatorMode", void 0);
+    __decorate$4([
+        webcomponentsBase.d({ type: Node, "default": true })
+    ], Text.prototype, "text", void 0);
+    __decorate$4([
+        parametersBundle_css.i("@ui5/webcomponents")
+    ], Text, "i18nBundle", void 0);
+    Text = Text_1 = __decorate$4([
+        webcomponentsBase.m({
+            tag: "ui5-text",
+            renderer: parametersBundle_css.d,
+            template: TextTemplate,
+            styles,
+        })
+    ], Text);
+    Text.define();
+    var Text$1 = Text;
+
+    const predefinedHooks = {
+        listItemContent,
+    };
+    function ListItemCustomTemplate(hooks) {
+        const currentHooks = { ...predefinedHooks, ...hooks };
+        return parametersBundle_css.ListItemTemplate.call(this, currentHooks);
+    }
+    function listItemContent() {
+        return parametersBundle_css.jsx("slot", {});
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var ListItemCustomCss = `:host(:not([hidden])){display:block}:host{min-height:var(--_ui5-v2-8-0_list_item_base_height);height:auto;box-sizing:border-box}.ui5-li-root.ui5-custom-li-root{pointer-events:inherit;min-height:inherit}.ui5-li-root.ui5-custom-li-root .ui5-li-content{pointer-events:inherit}[ui5-checkbox].ui5-li-singlesel-radiobtn,[ui5-radio-button].ui5-li-singlesel-radiobtn{display:flex;align-items:center}.ui5-li-root.ui5-custom-li-root,[ui5-checkbox].ui5-li-singlesel-radiobtn,[ui5-radio-button].ui5-li-singlesel-radiobtn{min-width:var(--_ui5-v2-8-0_custom_list_item_rb_min_width)}
+`;
+
+    var __decorate$3 = (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;
+    };
+    /**
+     * @class
+     *
+     * A component to be used as custom list item within the `ui5-list`
+     * the same way as the standard `ui5-li`.
+     *
+     * The component accepts arbitrary HTML content to allow full customization.
+     * @csspart native-li - Used to style the main li tag of the list item
+     * @csspart content - Used to style the content area of the list item
+     * @csspart detail-button - Used to style the button rendered when the list item is of type detail
+     * @csspart delete-button - Used to style the button rendered when the list item is in delete mode
+     * @csspart radio - Used to style the radio button rendered when the list item is in single selection mode
+     * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
+     * @slot {Node[]} default - Defines the content of the component.
+     * @constructor
+     * @extends ListItem
+     * @public
+     */
+    let ListItemCustom = class ListItemCustom extends parametersBundle_css.ListItem {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines whether the item is movable.
+             * @default false
+             * @public
+             * @since 2.0.0
+             */
+            this.movable = false;
+        }
+        async _onkeydown(e) {
+            const isTab = webcomponentsBase.B(e) || webcomponentsBase.m$1(e);
+            const isFocused = this.matches(":focus");
+            if (!isTab && !isFocused && !webcomponentsBase.so(e)) {
+                return;
+            }
+            await super._onkeydown(e);
+        }
+        _onkeyup(e) {
+            const isTab = webcomponentsBase.B(e) || webcomponentsBase.m$1(e);
+            const isFocused = this.matches(":focus");
+            if (!isTab && !isFocused && !webcomponentsBase.so(e)) {
+                return;
+            }
+            super._onkeyup(e);
+        }
+        get classes() {
+            const result = super.classes;
+            result.main["ui5-custom-li-root"] = true;
+            return result;
+        }
+    };
+    __decorate$3([
+        webcomponentsBase.s({ type: Boolean })
+    ], ListItemCustom.prototype, "movable", void 0);
+    __decorate$3([
+        webcomponentsBase.s()
+    ], ListItemCustom.prototype, "accessibleName", void 0);
+    ListItemCustom = __decorate$3([
+        webcomponentsBase.m({
+            tag: "ui5-li-custom",
+            template: ListItemCustomTemplate,
+            renderer: parametersBundle_css.d,
+            styles: [parametersBundle_css.ListItem.styles, ListItemCustomCss],
+        })
+    ], ListItemCustom);
+    ListItemCustom.define();
+    var ListItemCustom$1 = ListItemCustom;
+
+    function PanelTemplate() {
+        return (parametersBundle_css.jsx(parametersBundle_css.Fragment, { children: parametersBundle_css.jsxs("div", { class: "ui5-panel-root", role: this.accRole, "aria-label": this.effectiveAccessibleName, "aria-labelledby": this.fixedPanelAriaLabelledbyReference, children: [this.hasHeaderOrHeaderText &&
+                        // header: either header or h1 with header text
+                        parametersBundle_css.jsx("div", { class: {
+                                "ui5-panel-heading-wrapper": true,
+                                "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
+                            }, role: this.headingWrapperRole, "aria-level": this.headingWrapperAriaLevel, children: parametersBundle_css.jsxs("div", { onClick: this._headerClick, onKeyDown: this._headerKeyDown, onKeyUp: this._headerKeyUp, class: "ui5-panel-header", tabindex: this.headerTabIndex, role: this.accInfo.role, "aria-expanded": this.accInfo.ariaExpanded, "aria-controls": this.accInfo.ariaControls, "aria-labelledby": this.accInfo.ariaLabelledby, part: "header", children: [!this.fixed &&
+                                        parametersBundle_css.jsx("div", { class: "ui5-panel-header-button-root", children: this._hasHeader ?
+                                                parametersBundle_css.jsx(parametersBundle_css.Button, { design: "Transparent", class: "ui5-panel-header-button ui5-panel-header-button-with-icon", onClick: this._toggleButtonClick, accessibilityAttributes: this.accInfo.button.accessibilityAttributes, tooltip: this.accInfo.button.title, accessibleName: this.accInfo.button.ariaLabelButton, children: parametersBundle_css.jsx("div", { class: "ui5-panel-header-icon-wrapper", children: parametersBundle_css.jsx(parametersBundle_css.Icon, { class: {
+                                                                "ui5-panel-header-icon": true,
+                                                                "ui5-panel-header-button-animated": !this.shouldNotAnimate,
+                                                            }, name: parametersBundle_css.slimArrowRight }) }) })
+                                                : // else
+                                                    parametersBundle_css.jsx(parametersBundle_css.Icon, { class: {
+                                                            "ui5-panel-header-button": true,
+                                                            "ui5-panel-header-icon": true,
+                                                            "ui5-panel-header-button-animated": !this.shouldNotAnimate,
+                                                        }, name: parametersBundle_css.slimArrowRight, showTooltip: true, accessibleName: this.toggleButtonTitle }) }), this._hasHeader ?
+                                        parametersBundle_css.jsx("slot", { name: "header" })
+                                        : // else
+                                            parametersBundle_css.jsx("div", { id: `${this._id}-header-title`, class: "ui5-panel-header-title", children: this.headerText })] }) }), parametersBundle_css.jsx("div", { class: "ui5-panel-content", id: `${this._id}-content`, tabindex: -1, style: {
+                            display: this._contentExpanded ? "block" : "none",
+                        }, part: "content", children: parametersBundle_css.jsx("slot", {}) })] }) }));
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var panelCss = `.ui5-hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}:host(:not([hidden])){display:block}:host{font-family:"72override",var(--sapFontFamily);background-color:var(--sapGroup_TitleBackground);border-radius:var(--_ui5-v2-8-0_panel_border_radius)}:host(:not([collapsed])){border-bottom:var(--_ui5-v2-8-0_panel_border_bottom)}:host([fixed]) .ui5-panel-header{padding-left:1rem}.ui5-panel-header{min-height:var(--_ui5-v2-8-0_panel_header_height);width:100%;position:relative;display:flex;justify-content:flex-start;align-items:center;outline:none;box-sizing:border-box;padding-right:var(--_ui5-v2-8-0_panel_header_padding_right);font-family:"72override",var(--sapFontHeaderFamily);font-size:var(--sapGroup_Title_FontSize);font-weight:400;color:var(--sapGroup_TitleTextColor)}.ui5-panel-header-icon{color:var(--_ui5-v2-8-0_panel_icon_color)}.ui5-panel-header-button-animated{transition:transform .4s ease-out}:host(:not([_has-header]):not([fixed])) .ui5-panel-header{cursor:pointer}:host(:not([_has-header]):not([fixed])) .ui5-panel-header:focus:after{content:"";position:absolute;pointer-events:none;z-index:2;border:var(--_ui5-v2-8-0_panel_focus_border);border-radius:var(--_ui5-v2-8-0_panel_border_radius);top:var(--_ui5-v2-8-0_panel_focus_offset);bottom:var(--_ui5-v2-8-0_panel_focus_bottom_offset);left:var(--_ui5-v2-8-0_panel_focus_offset);right:var(--_ui5-v2-8-0_panel_focus_offset)}:host(:not([collapsed]):not([_has-header]):not([fixed])) .ui5-panel-header:focus:after{border-radius:var(--_ui5-v2-8-0_panel_border_radius_expanded)}:host(:not([collapsed])) .ui5-panel-header-button:not(.ui5-panel-header-button-with-icon),:host(:not([collapsed])) .ui5-panel-header-icon-wrapper [ui5-icon]{transform:var(--_ui5-v2-8-0_panel_toggle_btn_rotation)}:host([fixed]) .ui5-panel-header-title{width:100%}.ui5-panel-heading-wrapper.ui5-panel-heading-wrapper-sticky{position:sticky;top:0;background-color:var(--_ui5-v2-8-0_panel_header_background_color);z-index:100;border-radius:var(--_ui5-v2-8-0_panel_border_radius)}.ui5-panel-header-title{width:calc(100% - var(--_ui5-v2-8-0_panel_button_root_width));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui5-panel-content{padding:var(--_ui5-v2-8-0_panel_content_padding);background-color:var(--sapGroup_ContentBackground);outline:none;border-bottom-left-radius:var(--_ui5-v2-8-0_panel_border_radius);border-bottom-right-radius:var(--_ui5-v2-8-0_panel_border_radius);overflow:auto}.ui5-panel-header-button-root{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:var(--_ui5-v2-8-0_panel_button_root_width);height:var(--_ui5-v2-8-0_panel_button_root_height);padding:var(--_ui5-v2-8-0_panel_header_button_wrapper_padding);box-sizing:border-box}:host([fixed]:not([collapsed]):not([_has-header])) .ui5-panel-header,:host([collapsed]) .ui5-panel-header{border-bottom:.0625rem solid var(--sapGroup_TitleBorderColor)}:host([collapsed]) .ui5-panel-header{border-bottom-left-radius:var(--_ui5-v2-8-0_panel_border_radius);border-bottom-right-radius:var(--_ui5-v2-8-0_panel_border_radius)}:host(:not([fixed]):not([collapsed])) .ui5-panel-header{border-bottom:var(--_ui5-v2-8-0_panel_default_header_border)}[ui5-button].ui5-panel-header-button{display:flex;justify-content:center;align-items:center;min-width:initial;height:100%;width:100%}.ui5-panel-header-icon-wrapper{display:flex;justify-content:center;align-items:center}.ui5-panel-header-icon-wrapper,.ui5-panel-header-icon-wrapper .ui5-panel-header-icon{color:inherit}.ui5-panel-header-icon-wrapper,[ui5-button].ui5-panel-header-button-with-icon [ui5-icon]{pointer-events:none}.ui5-panel-root{height:100%;display:flex;flex-direction:column}
+`;
+
+    var __decorate$2 = (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 Panel_1;
+    /**
+     * @class
+     *
+     * ### Overview
+     *
+     * The `ui5-panel` component is a container which has a header and a
+     * content area and is used
+     * for grouping and displaying information. It can be collapsed to save space on the screen.
+     *
+     * ### Guidelines:
+     *
+     * - Nesting two or more panels is not recommended.
+     * - Do not stack too many panels on one page.
+     *
+     * ### Structure
+     * The panel's header area consists of a title bar with a header text or custom header.
+     *
+     * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.
+     *
+     * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.
+     *
+     * The content area can contain an arbitrary set of controls.
+     *
+     * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.
+     *
+     * ### Responsive Behavior
+     *
+     * - If the width of the panel is set to 100% (default), the panel and its children are
+     * resized responsively,
+     * depending on its parent container.
+     * - If the panel has a fixed height, it will take up the space even if the panel is
+     * collapsed.
+     * - When the panel is expandable (the `fixed` property is set to `false`),
+     * an arrow icon (pointing to the right) appears in front of the header.
+     * - When the animation is activated, expand/collapse uses a smooth animation to open or
+     * close the content area.
+     * - When the panel expands/collapses, the arrow icon rotates 90 degrees
+     * clockwise/counter-clockwise.
+     *
+     * ### 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/dist/Panel.js";`
+     * @constructor
+     * @extends UI5Element
+     * @public
+     * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.
+     * @csspart header - Used to style the wrapper of the header.
+     * @csspart content - Used to style the wrapper of the content.
+     */
+    let Panel = Panel_1 = class Panel extends webcomponentsBase.b {
+        constructor() {
+            super(...arguments);
+            /**
+             * Determines whether the component is in a fixed state that is not
+             * expandable/collapsible by user interaction.
+             * @default false
+             * @public
+             */
+            this.fixed = false;
+            /**
+             * Indicates whether the component is collapsed and only the header is displayed.
+             * @default false
+             * @public
+             */
+            this.collapsed = false;
+            /**
+             * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+             * @default false
+             * @public
+             * @since 1.0.0-rc.16
+             */
+            this.noAnimation = false;
+            /**
+             * Sets the accessible ARIA role of the component.
+             * Depending on the usage, you can change the role from the default `Form`
+             * to `Region` or `Complementary`.
+             * @default "Form"
+             * @public
+             */
+            this.accessibleRole = "Form";
+            /**
+             * Defines the "aria-level" of component heading,
+             * set by the `headerText`.
+             * @default "H2"
+             * @public
+            */
+            this.headerLevel = "H2";
+            /**
+             * Indicates whether the Panel header is sticky or not.
+             * If stickyHeader is set to true, then whenever you scroll the content or
+             * the application, the header of the panel will be always visible and
+             * a solid color will be used for its design.
+             * @default false
+             * @public
+             * @since 1.16.0-rc.1
+             */
+            this.stickyHeader = false;
+            /**
+             * When set to `true`, the `accessibleName` property will be
+             * applied not only on the panel root itself, but on its toggle button too.
+             * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.
+             * @default false
+             * @private
+              */
+            this.useAccessibleNameForToggleButton = false;
+            /**
+             * @private
+             */
+            this._hasHeader = false;
+            this._contentExpanded = false;
+            this._animationRunning = false;
+        }
+        onBeforeRendering() {
+            // If the animation is running, it will set the content expanded state at the end
+            if (!this._animationRunning) {
+                this._contentExpanded = !this.collapsed;
+            }
+            this._hasHeader = !!this.header.length;
+        }
+        shouldToggle(element) {
+            const customContent = this.header.length;
+            if (customContent) {
+                return element.classList.contains("ui5-panel-header-button");
+            }
+            return true;
+        }
+        get shouldNotAnimate() {
+            return this.noAnimation || webcomponentsBase.d$1() === Icons.u.None;
+        }
+        _headerClick(e) {
+            if (!this.shouldToggle(e.target)) {
+                return;
+            }
+            this._toggleOpen();
+        }
+        _toggleButtonClick(e) {
+            if (e.x === 0 && e.y === 0) {
+                e.stopImmediatePropagation();
+            }
+        }
+        _headerKeyDown(e) {
+            if (!this.shouldToggle(e.target)) {
+                return;
+            }
+            if (webcomponentsBase.b$1(e)) {
+                e.preventDefault();
+            }
+            if (webcomponentsBase.i(e)) {
+                e.preventDefault();
+            }
+        }
+        _headerKeyUp(e) {
+            if (!this.shouldToggle(e.target)) {
+                return;
+            }
+            if (webcomponentsBase.b$1(e)) {
+                this._toggleOpen();
+            }
+            if (webcomponentsBase.i(e)) {
+                this._toggleOpen();
+            }
+        }
+        _toggleOpen() {
+            if (this.fixed) {
+                return;
+            }
+            this.collapsed = !this.collapsed;
+            if (this.shouldNotAnimate) {
+                this.fireDecoratorEvent("toggle");
+                return;
+            }
+            this._animationRunning = true;
+            const elements = this.getDomRef().querySelectorAll(".ui5-panel-content");
+            const animations = [];
+            [].forEach.call(elements, oElement => {
+                if (this.collapsed) {
+                    animations.push(webcomponentsBase.u(oElement).promise());
+                }
+                else {
+                    animations.push(webcomponentsBase.b$2(oElement).promise());
+                }
+            });
+            Promise.all(animations).then(() => {
+                this._animationRunning = false;
+                this._contentExpanded = !this.collapsed;
+                this.fireDecoratorEvent("toggle");
+            });
+        }
+        _headerOnTarget(target) {
+            return target.classList.contains("sapMPanelWrappingDiv");
+        }
+        get toggleButtonTitle() {
+            return Panel_1.i18nBundle.getText(parametersBundle_css.PANEL_ICON);
+        }
+        get expanded() {
+            return !this.collapsed;
+        }
+        get accRole() {
+            return this.accessibleRole.toLowerCase();
+        }
+        get effectiveAccessibleName() {
+            return typeof this.accessibleName === "string" && this.accessibleName.length ? this.accessibleName : undefined;
+        }
+        get accInfo() {
+            return {
+                "button": {
+                    "accessibilityAttributes": {
+                        "expanded": this.expanded,
+                    },
+                    "title": this.toggleButtonTitle,
+                    "ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
+                },
+                "ariaExpanded": this.nonFixedInternalHeader ? this.expanded : undefined,
+                "ariaControls": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,
+                "ariaLabelledby": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,
+                "role": this.nonFixedInternalHeader ? "button" : undefined,
+            };
+        }
+        get ariaLabelledbyReference() {
+            return (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;
+        }
+        get fixedPanelAriaLabelledbyReference() {
+            return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
+        }
+        get headerAriaLevel() {
+            return Number.parseInt(this.headerLevel.slice(1));
+        }
+        get headerTabIndex() {
+            return (this.header.length || this.fixed) ? -1 : 0;
+        }
+        get headingWrapperAriaLevel() {
+            return !this._hasHeader ? this.headerAriaLevel : undefined;
+        }
+        get headingWrapperRole() {
+            return !this._hasHeader ? "heading" : undefined;
+        }
+        get nonFixedInternalHeader() {
+            return !this._hasHeader && !this.fixed;
+        }
+        get hasHeaderOrHeaderText() {
+            return this._hasHeader || this.headerText;
+        }
+        get nonFocusableButton() {
+            return !this.header.length;
+        }
+    };
+    __decorate$2([
+        webcomponentsBase.s()
+    ], Panel.prototype, "headerText", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "fixed", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "collapsed", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "noAnimation", void 0);
+    __decorate$2([
+        webcomponentsBase.s()
+    ], Panel.prototype, "accessibleRole", void 0);
+    __decorate$2([
+        webcomponentsBase.s()
+    ], Panel.prototype, "headerLevel", void 0);
+    __decorate$2([
+        webcomponentsBase.s()
+    ], Panel.prototype, "accessibleName", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "stickyHeader", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "useAccessibleNameForToggleButton", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean })
+    ], Panel.prototype, "_hasHeader", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean, noAttribute: true })
+    ], Panel.prototype, "_contentExpanded", void 0);
+    __decorate$2([
+        webcomponentsBase.s({ type: Boolean, noAttribute: true })
+    ], Panel.prototype, "_animationRunning", void 0);
+    __decorate$2([
+        webcomponentsBase.d()
+    ], Panel.prototype, "header", void 0);
+    __decorate$2([
+        parametersBundle_css.i("@ui5/webcomponents")
+    ], Panel, "i18nBundle", void 0);
+    Panel = Panel_1 = __decorate$2([
+        webcomponentsBase.m({
+            tag: "ui5-panel",
+            fastNavigation: true,
+            languageAware: true,
+            renderer: parametersBundle_css.d,
+            template: PanelTemplate,
+            styles: panelCss,
+        })
+        /**
+         * Fired when the component is expanded/collapsed by user interaction.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("toggle", {
+            bubbles: true,
+        })
+    ], Panel);
+    Panel.define();
+    var Panel$1 = Panel;
+
+    function BarTemplate() {
+        return (parametersBundle_css.jsxs("div", { class: "ui5-bar-root", "aria-label": this.accInfo.label, role: "toolbar", part: "bar", children: [parametersBundle_css.jsx("div", { class: "ui5-bar-content-container ui5-bar-startcontent-container", part: "startContent", children: parametersBundle_css.jsx("slot", { name: "startContent" }) }), parametersBundle_css.jsx("div", { class: "ui5-bar-content-container ui5-bar-midcontent-container", part: "midContent", children: parametersBundle_css.jsx("slot", {}) }), parametersBundle_css.jsx("div", { class: "ui5-bar-content-container ui5-bar-endcontent-container", part: "endContent", children: parametersBundle_css.jsx("slot", { name: "endContent" }) })] }));
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents", "sap_horizon", async () => parametersBundle_css.defaultTheme);
+    var BarCss = `:host{background-color:var(--sapPageHeader_Background);height:var(--_ui5-v2-8-0_bar_base_height);width:100%;box-shadow:var(--sapContent_HeaderShadow);display:block}.ui5-bar-root{container-type:size;display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;background-color:inherit;box-shadow:inherit;border-radius:inherit}.ui5-bar-root .ui5-bar-startcontent-container{padding-inline-start:var(--_ui5-v2-8-0_bar-start-container-padding-start);display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.ui5-bar-root .ui5-bar-content-container{min-width:calc(30% - calc(var(--_ui5-v2-8-0_bar-start-container-padding-start) + var(--_ui5-v2-8-0_bar-end-container-padding-end) + (2*var(--_ui5-v2-8-0_bar-mid-container-padding-start-end))))}.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container{min-width:0px;overflow:hidden;height:100%}.ui5-bar-root .ui5-bar-endcontent-container{padding-inline-end:var(--_ui5-v2-8-0_bar-end-container-padding-end);display:flex;flex-direction:row;align-items:center;justify-content:flex-end}.ui5-bar-root .ui5-bar-midcontent-container{padding:0 var(--_ui5-v2-8-0_bar-mid-container-padding-start-end);display:flex;flex-direction:row;align-items:center;justify-content:center}:host([design="Footer"]){background-color:var(--sapPageFooter_Background);border-top:.0625rem solid var(--sapPageFooter_BorderColor);box-shadow:none}:host([design="Subheader"]){height:var(--_ui5-v2-8-0_bar_subheader_height);margin-top:var(--_ui5-v2-8-0_bar_subheader_margin-top)}:host([design="FloatingFooter"]){border-radius:var(--sapElement_BorderCornerRadius);background-color:var(--sapPageFooter_Background);box-shadow:var(--sapContent_Shadow1);border:none}::slotted(*){margin:0 .25rem}@container (width < 600px){*{--_ui5-v2-8-0_bar-start-container-padding-start: var(--_ui5-v2-8-0_bar-start-container-padding-start_S);--_ui5-v2-8-0_bar-end-container-padding-end: var(--_ui5-v2-8-0_bar-end-container-padding-end_S) }}@container (width > 1439px){*{--_ui5-v2-8-0_bar-start-container-padding-start: var(--_ui5-v2-8-0_bar-start-container-padding-start_XL);--_ui5-v2-8-0_bar-end-container-padding-end: var(--_ui5-v2-8-0_bar-end-container-padding-end_XL)}}
+`;
+
+    var __decorate$1 = (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;
+    };
+    /**
+     * @class
+     *
+     * ### Overview
+     * The Bar is a container which is primarily used to hold titles, buttons and input elements
+     * and its design and functionality is the basis for page headers and footers.
+     * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.
+     * It has the capability to center content, such as a title, while having other components on the left and right side.
+     *
+     * ### Usage
+     * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.
+     *
+     * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
+     *
+     * ### Responsive Behavior
+     * The default slot will be centered in the available space between the startContent and the endContent areas,
+     * therefore it might not always be centered in the entire bar.
+     *
+     * ### 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/dist/Bar.js";`
+     * @csspart bar - Used to style the wrapper of the content of the component
+     * @csspart startContent - Used to style the wrapper of the start content of the component
+     * @csspart midContent - Used to style the wrapper of the middle content of the component
+     * @csspart endContent - Used to style the wrapper of the end content of the component
+     * @constructor
+     * @extends UI5Element
+     * @public
+     * @since 1.0.0-rc.11
+     */
+    let Bar = class Bar extends webcomponentsBase.b {
+        get accInfo() {
+            return {
+                "label": this.design,
+            };
+        }
+        constructor() {
+            super();
+            /**
+             * Defines the component's design.
+             * @default "Header"
+             * @public
+             */
+            this.design = "Header";
+            this._handleResizeBound = this.handleResize.bind(this);
+        }
+        handleResize() {
+            const bar = this.getDomRef();
+            const barWidth = bar.offsetWidth;
+            const needShrinked = Array.from(bar.children).some(child => {
+                return child.offsetWidth > barWidth / 3;
+            });
+            bar.classList.toggle("ui5-bar-root-shrinked", needShrinked);
+        }
+        onEnterDOM() {
+            webcomponentsBase.f$1.register(this, this._handleResizeBound);
+            this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(child => {
+                webcomponentsBase.f$1.register(child, this._handleResizeBound);
+            }, this);
+        }
+        onExitDOM() {
+            webcomponentsBase.f$1.deregister(this, this._handleResizeBound);
+            this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(child => {
+                webcomponentsBase.f$1.deregister(child, this._handleResizeBound);
+            }, this);
+        }
+    };
+    __decorate$1([
+        webcomponentsBase.s()
+    ], Bar.prototype, "design", void 0);
+    __decorate$1([
+        webcomponentsBase.d({ type: HTMLElement })
+    ], Bar.prototype, "startContent", void 0);
+    __decorate$1([
+        webcomponentsBase.d({ type: HTMLElement, "default": true })
+    ], Bar.prototype, "middleContent", void 0);
+    __decorate$1([
+        webcomponentsBase.d({ type: HTMLElement })
+    ], Bar.prototype, "endContent", void 0);
+    Bar = __decorate$1([
+        webcomponentsBase.m({
+            tag: "ui5-bar",
+            fastNavigation: true,
+            renderer: parametersBundle_css.d,
+            styles: BarCss,
+            template: BarTemplate,
+        })
+    ], Bar);
+    Bar.define();
+    var Bar$1 = Bar;
+
+    const name$7 = "person-placeholder";
+    const pathData$7 = "M64 512V384q0-26 10-49.5t27.5-41T142 266t50-10h64q-27 0-50-10t-40.5-27.5T138 178t-10-50q0-26 10-49.5t27.5-41T206 10t50-10q26 0 49.5 10t41 27.5 27.5 41 10 49.5q0 27-10 50t-27.5 40.5-41 27.5-49.5 10h64q26 0 49.5 10t41 27.5 27.5 41 10 49.5v128H64zm32-128v96h320v-96q0-40-28-68t-68-28H192q-40 0-68 28t-28 68zm64-256q0 40 28 68t68 28 68-28 28-68-28-68-68-28-68 28-28 68z";
+    const ltr$7 = false;
+    const collection$7 = "SAP-icons-v4";
+    const packageName$7 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$7, { pathData: pathData$7, ltr: ltr$7, collection: collection$7, packageName: packageName$7 });
+
+    const name$6 = "person-placeholder";
+    const pathData$6 = "M342 255q48 23 77 67.5t29 99.5v32q0 11-7.5 18.5T422 480H90q-11 0-18.5-7.5T64 454v-32q0-56 29-100t77-67q-20-18-31-42.5T128 160q0-27 10-50t27.5-40.5 41-27.5T256 32t49.5 10.5 41 28T374 111t10 49q0 27-11 52t-31 43zM256 83q-32 0-54.5 22.5T179 160t22.5 54.5T256 237t54.5-22.5T333 160t-22.5-54.5T256 83zm141 339q0-28-10.5-52.5t-29-42.5-43-28.5T262 288h-12q-28 0-52.5 10.5t-43 28.5-29 42.5T115 422v7h282v-7z";
+    const ltr$6 = false;
+    const collection$6 = "SAP-icons-v5";
+    const packageName$6 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$6, { pathData: pathData$6, ltr: ltr$6, collection: collection$6, packageName: packageName$6 });
+
+    var personPlaceholder = "person-placeholder";
+
+    const name$5 = "user-settings";
+    const pathData$5 = "M512 512H192v-64q0-27 10-50t27.5-40.5T270 330t50-10h32q-43 0-69.5-27T256 224q0-13 1-14 5-32 27-54t54-27q1-1 14-1 42 0 69 26.5t27 69.5q0 40-28 68t-68 28h32q26 0 49.5 10t41 27.5T502 398t10 50v64zM0 224q0-14 9-23t23-9h28q2-8 5.5-15t6.5-14l-20-20q-9-10-9-23t9-22l46-46q9-9 22-9 14 0 23 9l20 20q7-3 14-6.5t15-5.5V32q0-14 9-23t23-9h64q14 0 23 9t9 23v28q8 2 15 5.5t14 6.5l20-20q9-9 23-9 13 0 22 9l46 46q9 9 9 22t-9 23l-6 5-10-12-12-11 5-5-45-45-23 23q-5-1-8.5-1.5T352 96q-6 0-12 .5T328 98q-1-1-4-1-4-2-6.5-3l-7.5-3-22-8V32h-64v51l-22 8q-2 1-5 1.5t-5 2.5l-15 6-20 10-37-36-45 45 36 37-10 20q-3 6-5.5 12.5T91 202l-8 22H32v64h51l8 22q1 2 2 5t2 5q0 2 2 4 1 3 2 5.5t2 4.5l10 21-36 37 45 45 37-37 9 5q-5 18-6 37l-17 18q-9 9-23 9-13 0-22-9l-46-46q-9-9-9-22.5t9-22.5l20-20q-3-7-6.5-14T60 320H32q-14 0-23-9.5T0 288v-64zm480 256v-32q0-40-28-68t-68-28h-64q-40 0-68 28t-28 68v32h256zM288 224q0 27 18.5 45.5T352 288q26 0 45-19t19-45q0-27-18.5-45.5T352 160q-26 0-45 19t-19 45zm-128 37q0-35 16-59.5t48-36.5l8-2 9-2q-5 8-8.5 16.5T227 194q0 1-.5 2t-.5 3q-1 0-1 .5t-1 .5l-12 9q-11 11-15.5 21.5T192 256q0 4 .5 8t1.5 9q8 25 30 38l4 2 4 2q-4 1-8 5-5 4-9.5 8t-9.5 9q-4-2-7-5t-6-5q-4-3-7-7-13-15-18-27t-7-32z";
+    const ltr$5 = false;
+    const collection$5 = "SAP-icons-v4";
+    const packageName$5 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$5, { pathData: pathData$5, ltr: ltr$5, collection: collection$5, packageName: packageName$5 });
+
+    const name$4 = "user-settings";
+    const pathData$4 = "M166.907 396.779q10.994 0 18.49 6.996t7.495 17.99-7.495 18.49-18.49 7.495H25.985q-10.993 0-18.49-7.496T0 421.764v-31.982q0-55.968 28.984-99.944t76.957-66.962q-41.977-38.979-41.977-94.947 0-26.985 10.494-50.472t27.985-40.977T142.92 9.495 191.893 0q26.985 0 49.972 10.494t40.477 27.985 27.485 40.477 9.995 48.973-9.495 48.972-26.985 40.478-40.977 27.984-50.472 10.494h-5.997q-27.984 0-52.47 10.494T90.45 294.835t-28.984 42.477-10.494 52.47v6.997h115.935zm24.986-345.807q-31.982 0-54.47 22.487t-22.487 54.47 22.487 54.47 54.47 22.487q32.982 0 54.97-22.988t21.987-53.97q0-31.982-22.487-54.469t-54.47-22.487zm310.826 340.81q4.998 1.998 7.496 5.996t1.5 8.995l-3.998 16.99q-2 9.995-11.994 9.995l-27.984-3.998q-5.997 11.993-15.991 21.988l-6.996 6.996 9.994 26.985q0 1 .5 1.999t.5 1.999q0 8.995-7.996 11.993l-14.991 7.996q-2 0-2.5.5t-2.498.499q-7.995 0-10.994-6.996l-14.991-25.986q-4.997 1-8.995 1.5t-8.995.5q-3.998 0-7.496-.5t-8.495-.5l-14.992 26.985q-2.998 5.996-10.994 5.996-3.998 0-5.996-.999l-14.992-7.996q-6.996-2.998-6.996-10.993 0-3.998 1-4.998l9.994-26.985q-7.996-4.997-13.493-11.993t-10.494-14.991l-27.984 3.997q-10.994 0-12.993-9.994l-3.998-19.989q0-9.994 8.995-11.993l22.987-7.996q0-21.988 6.996-39.978l-16.99-15.99q-3.998-3.998-3.998-9.995 0-3.998 2.999-7.996l9.994-12.992q4.997-4.998 9.994-4.998 2.999 0 6.996 2l18.99 12.992q7.995-6.996 16.99-11.493t18.99-7.496l1.999-22.987q1.999-11.994 12.992-11.994h16.99q4.998 0 8.496 3.498t3.498 8.496l2 21.987q21.987 4.997 37.978 17.99l18.99-12.993q3.997-1.998 6.995-1.998 4.998 0 9.995 4.997l9.994 12.993q2.999 3.997 2.999 7.995 0 5.997-3.998 9.995l-15.991 14.991q7.995 20.988 7.995 40.977zm-163.908-7.996q0 18.99 12.993 31.982t31.982 12.993 31.982-12.993 12.993-31.982-12.993-31.982-31.982-12.993-31.982 12.993-12.993 31.982z";
+    const ltr$4 = false;
+    const collection$4 = "SAP-icons-v5";
+    const packageName$4 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$4, { pathData: pathData$4, ltr: ltr$4, collection: collection$4, packageName: packageName$4 });
+
+    var userSettings = "user-settings";
+
+    const name$3 = "log";
+    const pathData$3 = "M352 86q57 27 92.5 81T480 288q0 47-17.5 87.5t-48 71-71.5 48-87 17.5q-47 0-87.5-17.5t-71-48-48-71T32 288q0-67 35.5-121T160 86v36q-43 25-69.5 68.5T64 288q0 40 15 75t41 61 61 41 75 15 75-15 61-41 41-61 15-75q0-54-26.5-97.5T352 122V86zm-96 202q-14 0-23-9t-9-23V32q0-13 9-22.5T256 0q13 0 22.5 9.5T288 32v224q0 14-9.5 23t-22.5 9z";
+    const ltr$3 = false;
+    const collection$3 = "SAP-icons-v4";
+    const packageName$3 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$3, { pathData: pathData$3, ltr: ltr$3, collection: collection$3, packageName: packageName$3 });
+
+    const name$2 = "log";
+    const pathData$2 = "M256 256q-11 0-18.5-7.5T230 230V26q0-11 7.5-18.5T256 0t18.5 7.5T282 26v204q0 11-7.5 18.5T256 256zm0 256q-53 0-100-20t-81.5-54.5T20 356 0 256q0-67 31-125t82-90q9-6 13.5-7.5T134 32q11 0 18.5 7.5T160 58q0 13-12 21-46 29-71.5 76T51 256q0 43 16 80t44 65 65 44 80 16 80.5-16 65-44 43.5-65 16-80q0-54-26-101t-71-76q-12-8-12-21 0-11 7.5-18.5T378 32q3 0 7.5 1.5T399 41q51 32 82 90t31 126q0 53-20 99.5t-54.5 81T356 492t-100 20z";
+    const ltr$2 = false;
+    const collection$2 = "SAP-icons-v5";
+    const packageName$2 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$2, { pathData: pathData$2, ltr: ltr$2, collection: collection$2, packageName: packageName$2 });
+
+    var log = "log";
+
+    const name$1 = "user-edit";
+    const pathData$1 = "M151.25 384H.25v-64q0-26 10-49.5t27.5-41 40.5-27.5 50-10h32q-40 0-68-28t-28-68 28-68 68-28 68 28 28 68-28 68-68 28h32q31 0 57 14t44 37l-23 22q-13-19-33.5-30t-44.5-11h-64q-40 0-68 28t-28 68v32h151zm-9 128q2-4 8-20t12-34q4-10 7.5-21t8.5-24l261-260q5-5 11-5t11 5l45 45q11 11 0 22l-260 261q-1 1-17 6t-36 10q-22 8-51 15zm18-352q26 0 45-19t19-45-19-45-45-19q-27 0-45.5 19t-18.5 45 18.5 45 45.5 19zm45 271l23 22 181-181-22-22zm204-204l23 23 40-41-22-22z";
+    const ltr$1 = false;
+    const collection$1 = "SAP-icons-v4";
+    const packageName$1 = "@ui5/webcomponents-icons";
+
+    Icons.f(name$1, { pathData: pathData$1, ltr: ltr$1, collection: collection$1, packageName: packageName$1 });
+
+    const name = "user-edit";
+    const pathData = "M70 397q11 0 18.5 7t7.5 18-7.5 18.5T70 448H26q-11 0-18.5-7.5T0 422v-32q0-55 29-99.5t77-67.5l-4-5q-19-18-28.5-41T64 128q0-27 10.5-50.5t28-41 40.5-27T192 0q27 0 50 10.5t40.5 28T310 79t10 49-9.5 49-27 40.5-41 28T192 256h-6q-28 0-52.5 10.5t-43 28.5-29 42.5T51 390v7h19zM192 51q-32 0-54.5 22.5T115 128t22.5 54.5T192 205q33 0 55-23t22-54q0-32-22.5-54.5T192 51zm313 161q7 7 7 18t-7 18l-25 26q-8 8-19 8-10 0-18-8l-50-51q-7-7-7-18t7-18l25-26q7-7 18-7 12 0 19 7zm-75 77q7 9 7 18t-7 18L254 504q-8 8-18 8h-50q-11 0-18.5-7.5T160 486v-51q0-9 7-18l176-179q8-8 18-8 12 0 18 8zm-55 18l-14-14-150 153v15h14z";
+    const ltr = false;
+    const collection = "SAP-icons-v5";
+    const packageName = "@ui5/webcomponents-icons";
+
+    Icons.f(name, { pathData, ltr, collection, packageName });
+
+    var userEdit = "user-edit";
+
+    function UserMenuTemplate() {
+        return (parametersBundle_css.jsxs(parametersBundle_css.ResponsivePopover, { id: "user-menu-rp", class: "ui5-pm-rp", tabIndex: -1, placement: "Bottom", verticalAlign: "Bottom", horizontalAlign: "End", accessibleName: this.accessibleNameText, open: this.open, opener: this.opener, onClose: this._handlePopoverAfterClose, onOpen: this._handlePopoverAfterOpen, children: [this._isPhone ?
+                    parametersBundle_css.jsxs(parametersBundle_css.Fragment, { children: [parametersBundle_css.jsxs(Bar$1, { class: "ui5-pm-phone-header", slot: "header", children: [this._manageAccountVisibleInHeader &&
+                                        parametersBundle_css.jsx(parametersBundle_css.Button, { icon: userSettings, onClick: this._handleManageAccountClick, slot: "startContent" }), this._titleMovedToHeader &&
+                                        parametersBundle_css.jsx(parametersBundle_css.Title, { level: "H1", wrappingType: "None", children: this._selectedAccount.titleText }), parametersBundle_css.jsx(parametersBundle_css.Button, { icon: parametersBundle_css.declineIcon, design: "Transparent", accessibleName: this._closeDialogAriaLabel, onClick: this._closeUserMenu, slot: "endContent" })] }), parametersBundle_css.jsx("div", { class: "ui5-pm-header", children: headerContent.call(this) })] })
+                    :
+                        parametersBundle_css.jsx("div", { class: "ui5-pm-header", slot: "header", children: headerContent.call(this) }), this.showOtherAccounts &&
+                    parametersBundle_css.jsxs(Panel$1, { collapsed: true, class: "ui5-pm-other-accounts", children: [parametersBundle_css.jsxs("div", { slot: "header", class: "ui5-user-menu-account-header", children: [parametersBundle_css.jsxs(parametersBundle_css.Title, { slot: "header", level: "H4", children: [this._otherAccountsButtonText, " (", this._otherAccounts.length, ")"] }), this.showEditAccounts &&
+                                        parametersBundle_css.jsx(parametersBundle_css.Button, { slot: "header", class: "ui5-pm-add-account-btn", design: "Transparent", icon: userEdit, onClick: this._handleEditAccountsClick, tooltip: this._editAccountsTooltip })] }), this._otherAccounts.length > 0 &&
+                                parametersBundle_css.jsx(parametersBundle_css.List, { onItemClick: this._handleAccountSwitch, children: this._otherAccounts.map(account => parametersBundle_css.jsx(ListItemCustom$1, { ref: this.captureRef.bind(account), children: parametersBundle_css.jsxs("div", { class: "ui5-pm-other-accounts-content", children: [parametersBundle_css.jsx(Avatar$1, { slot: "image", size: "S", initials: account._initials, fallbackIcon: personPlaceholder, children: account.avatarSrc &&
+                                                        parametersBundle_css.jsx("img", { src: account.avatarSrc }) }), parametersBundle_css.jsxs("div", { children: [account.titleText &&
+                                                            parametersBundle_css.jsx(parametersBundle_css.Title, { children: account.titleText }), account.subtitleText &&
+                                                            parametersBundle_css.jsx(parametersBundle_css.Label, { children: account.subtitleText }), account.description &&
+                                                            parametersBundle_css.jsx(parametersBundle_css.Label, { children: account.description })] })] }) })) })] }), this.menuItems.length > 0 &&
+                    parametersBundle_css.jsx(parametersBundle_css.List, { class: "ui5-user-menu-list", selectionMode: "None", separators: "None", accessibleRole: "Menu", onItemClick: this._handleMenuItemClick, "onui5-close-menu": this._handleMenuItemClose, children: parametersBundle_css.jsx("slot", {}) }), parametersBundle_css.jsx("div", { slot: "footer", class: "ui5-pm-footer", children: parametersBundle_css.jsx(parametersBundle_css.Button, { class: "ui5-pm-sign-out-btn", design: "Transparent", icon: log, onClick: this._handleSignOutClick, children: this._signOutButtonText }) })] }));
+    }
+    function headerContent() {
+        return (parametersBundle_css.jsx(parametersBundle_css.Fragment, { children: this._selectedAccount &&
+                parametersBundle_css.jsxs("div", { class: "ui5-pm-selected-account", children: [parametersBundle_css.jsxs(Avatar$1, { size: "L", onClick: this._handleAvatarClick, initials: this._selectedAccount._initials, fallbackIcon: personPlaceholder, class: "ui5-pm--selected-account-avatar", children: [this._selectedAccount.avatarSrc &&
+                                    parametersBundle_css.jsx("img", { src: this._selectedAccount.avatarSrc }), this.showEditButton &&
+                                    parametersBundle_css.jsx(Tag$1, { slot: "badge", wrappingType: "None", design: "Set1", colorScheme: "5", title: this._editAvatarTooltip, children: parametersBundle_css.jsx(parametersBundle_css.Icon, { slot: "icon", name: parametersBundle_css.edit }) })] }), this._selectedAccount.titleText &&
+                            parametersBundle_css.jsx(parametersBundle_css.Title, { id: "selected-account-title", class: "ui5-pm-selected-account-title", children: this._selectedAccount.titleText }), this._selectedAccount.subtitleText &&
+                            parametersBundle_css.jsx(Text$1, { class: "ui5-pm-selected-account-subtitleText", children: this._selectedAccount.subtitleText }), this._selectedAccount.description &&
+                            parametersBundle_css.jsx(Text$1, { class: "ui5-pm-selected-account-description", children: this._selectedAccount.description }), this.showManageAccount &&
+                            parametersBundle_css.jsx(parametersBundle_css.Button, { id: "selected-account-manage-btn", icon: userSettings, class: "ui5-pm-manage-account-btn", onClick: this._handleManageAccountClick, children: this._manageAccountButtonText })] }) }));
+    }
+
+    Icons.p("@ui5/webcomponents-theming", "sap_horizon", async () => parametersBundle_css.defaultThemeBase);
+    Icons.p("@ui5/webcomponents-fiori", "sap_horizon", async () => parametersBundle_css.defaultTheme$1);
+    var UserMenuCss = `.ui5-pm-rp{width:20rem}.ui5-pm-rp::part(content),.ui5-pm-rp::part(footer){padding-inline:.5rem}.ui5-pm-rp::part(header){box-shadow:none;padding:0}.ui5-pm-header{width:100%;padding-block-start:1rem;padding-inline:.5rem;display:flex;flex-direction:column}[on-phone] .ui5-pm-header{padding-inline:0}.ui5-pm-phone-header::part(startContent),.ui5-pm-phone-header::part(endContent){padding:0}.ui5-pm-phone-header [ui5-button]{margin-inline:.5rem;font-family:var(--sapFontSemiboldFamily)}.ui5-pm-rp::part(content){padding-top:0;padding-bottom:.5rem}.ui5-pm-rp::part(footer){padding-block:.5rem}.ui5-pm-selected-account{display:flex;align-items:center;flex-direction:column;margin-bottom:1rem}.ui5-pm--selected-account-avatar{margin-block:.5rem}.ui5-pm-selected-account-title{margin-block:.25rem;font-family:var(--sapFontBoldFamily);font-size:var(--sapFontLargeSize);color:var(--sapTextColor)}.ui5-pm-selected-account-subtitleText{margin-block:.25rem;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapContent_LabelColor)}.ui5-pm-selected-account-description{margin-bottom:1rem;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapContent_LabelColor)}.ui5-pm-decline-btn{align-self:flex-end;font-family:var(--sapFontSemiboldFamily)}.ui5-pm-manage-account-btn{margin-top:.5rem;font-family:var(--sapFontSemiboldFamily)}.ui5-pm-sign-out-btn{font-family:var(--sapFontSemiboldFamily)}.ui5-pm-other-accounts{margin-bottom:1rem}.ui5-pm-other-accounts::part(content){padding:0}.ui5-pm-other-accounts-content{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding-block:1rem}.ui5-user-menu-account-header{display:flex;flex:1;justify-content:space-between;align-items:center}.ui5-pm-footer{display:flex;flex:1;justify-content:flex-end;align-items:center}
+`;
+
+    const USER_MENU_OTHER_ACCOUNT_BUTTON_TXT = { key: "USER_MENU_OTHER_ACCOUNT_BUTTON_TXT", defaultText: "Other Accounts" };
+    const USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT = { key: "USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT", defaultText: "Manage Account" };
+    const USER_MENU_SIGN_OUT_BUTTON_TXT = { key: "USER_MENU_SIGN_OUT_BUTTON_TXT", defaultText: "Sign Out" };
+    const USER_MENU_EDIT_AVATAR_TXT = { key: "USER_MENU_EDIT_AVATAR_TXT", defaultText: "Edit avatar" };
+    const USER_MENU_EDIT_ACCOUNTS_TXT = { key: "USER_MENU_EDIT_ACCOUNTS_TXT", defaultText: "Edit accounts" };
+    const USER_MENU_POPOVER_ACCESSIBLE_NAME = { key: "USER_MENU_POPOVER_ACCESSIBLE_NAME", defaultText: "User menu for" };
+    const USER_MENU_CLOSE_DIALOG_BUTTON = { key: "USER_MENU_CLOSE_DIALOG_BUTTON", defaultText: "Decline" };
+
+    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 UserMenu_1;
+    /**
+     * @class
+     * ### Overview
+     *
+     * The `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`
+     * and allows the user to easily see information and settings for the current user and all other logged in accounts.
+     *
+     * ### ES6 Module Import
+     * `import "@ui5/webcomponents-fiori/dist/UserMenu.js";`
+     *
+     * `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` (for `ui5-user-menu-item`)
+     *
+     * @constructor
+     * @extends UI5Element
+     * @experimental
+     * @public
+     * @since 2.5.0
+     */
+    let UserMenu = UserMenu_1 = class UserMenu extends webcomponentsBase.b {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines if the User Menu is opened.
+             *
+             * @default false
+             * @public
+             */
+            this.open = false;
+            /**
+             * Defines if the User Menu shows the Manage Account option.
+             *
+             * @default false
+             * @public
+             */
+            this.showManageAccount = false;
+            /**
+             * Defines if the User Menu shows the Other Accounts option.
+             *
+             * @default false
+             * @public
+             */
+            this.showOtherAccounts = false;
+            /**
+             * Defines if the User Menu shows the Edit Accounts option.
+             *
+             * @default false
+             * @public
+             */
+            this.showEditAccounts = false;
+            /**
+             * Defines if the User menu shows edit button.
+             *
+             * @default false
+             * @public
+             * @since 2.7.0
+             */
+            this.showEditButton = false;
+            /**
+             * @default false
+             * @private
+             */
+            this._titleMovedToHeader = false;
+            /**
+             * @default false
+             * @private
+             */
+            this._manageAccountMovedToHeader = false;
+        }
+        onBeforeRendering() {
+            this._selectedAccount = this.accounts.find(account => account.selected) || this.accounts[0];
+        }
+        onAfterRendering() {
+            if (this._isPhone && this._responsivePopover) {
+                const observerOptions = {
+                    threshold: [0.15],
+                };
+                this._observer?.disconnect();
+                this._observer = new IntersectionObserver(entries => this._handleIntersection(entries), observerOptions);
+                if (this._selectedAccountTitleEl) {
+                    this._observer.observe(this._selectedAccountTitleEl);
+                }
+                if (this._selectedAccountManageBtn) {
+                    this._observer.observe(this._selectedAccountManageBtn);
+                }
+            }
+        }
+        get _isPhone() {
+            return Icons.d();
+        }
+        _handleIntersection(entries) {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    if (entry.target.id === "selected-account-title") {
+                        this._titleMovedToHeader = false;
+                    }
+                    else if (entry.target.id === "selected-account-manage-btn") {
+                        this._manageAccountMovedToHeader = false;
+                    }
+                    return;
+                }
+                if (entry.target.id === "selected-account-title") {
+                    this._titleMovedToHeader = true;
+                }
+                else if (entry.target.id === "selected-account-manage-btn") {
+                    this._manageAccountMovedToHeader = true;
+                }
+            }, this);
+        }
+        _handleAvatarClick(e) {
+            if (e.type === "click") {
+                // TOFIX: Discuss this check: Fire the custom UserMenu#avatar-click only for Avatar#click (not for Avatar#ui5-click as well).
+                this.fireDecoratorEvent("avatar-click");
+            }
+        }
+        _handleManageAccountClick() {
+            this.fireDecoratorEvent("manage-account-click");
+        }
+        _handleEditAccountsClick() {
+            this.fireDecoratorEvent("edit-accounts-click");
+        }
+        _handleAccountSwitch(e) {
+            const item = e.detail.item;
+            const eventPrevented = !this.fireDecoratorEvent("change-account", {
+                prevSelectedAccount: this._selectedAccount,
+                selectedAccount: item.associatedAccount,
+            });
+            if (eventPrevented) {
+                return;
+            }
+            this._selectedAccount.selected = false;
+            item.associatedAccount.selected = true;
+        }
+        _handleSignOutClick() {
+            const eventPrevented = !this.fireDecoratorEvent("sign-out-click");
+            if (eventPrevented) {
+                return;
+            }
+            this._closeUserMenu();
+        }
+        _handleMenuItemClick(e) {
+            const item = e.detail.item; // imrove: improve this ideally without "as" cating
+            if (!item._popover) {
+                const eventPrevented = !this.fireDecoratorEvent("item-click", {
+                    "item": item,
+                });
+                if (!eventPrevented) {
+                    item.fireEvent("close-menu");
+                }
+            }
+            else {
+                this._openItemSubMenu(item);
+            }
+        }
+        _handleMenuItemClose() {
+            this._closeUserMenu();
+        }
+        _handlePopoverAfterOpen() {
+            this.fireDecoratorEvent("open");
+        }
+        _handlePopoverAfterClose() {
+            this.open = false;
+            this.fireDecoratorEvent("close");
+        }
+        _openItemSubMenu(item) {
+            if (!item._popover || item._popover.open) {
+                return;
+            }
+            item._popover.opener = item;
+            item._popover.open = true;
+            item.selected = true;
+        }
+        _closeUserMenu() {
+            this.open = false;
+        }
+        get _manageAccountVisibleInHeader() {
+            return this.showManageAccount && this._manageAccountMovedToHeader;
+        }
+        get _otherAccounts() {
+            return this.accounts.filter(account => account !== this._selectedAccount);
+        }
+        get _manageAccountButtonText() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT);
+        }
+        get _otherAccountsButtonText() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_OTHER_ACCOUNT_BUTTON_TXT);
+        }
+        get _signOutButtonText() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_SIGN_OUT_BUTTON_TXT);
+        }
+        get _editAvatarTooltip() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_EDIT_AVATAR_TXT);
+        }
+        get _editAccountsTooltip() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_EDIT_ACCOUNTS_TXT);
+        }
+        get _closeDialogAriaLabel() {
+            return UserMenu_1.i18nBundle.getText(USER_MENU_CLOSE_DIALOG_BUTTON);
+        }
+        get accessibleNameText() {
+            if (!this._selectedAccount) {
+                return "";
+            }
+            return `${UserMenu_1.i18nBundle.getText(USER_MENU_POPOVER_ACCESSIBLE_NAME)} ${this._selectedAccount.titleText}`;
+        }
+        getAccountByRefId(refId) {
+            return this.accounts.find(account => account._id === refId);
+        }
+        captureRef(ref) {
+            if (ref) {
+                ref.associatedAccount = this;
+            }
+        }
+    };
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "open", void 0);
+    __decorate([
+        webcomponentsBase.s({ converter: parametersBundle_css.e })
+    ], UserMenu.prototype, "opener", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "showManageAccount", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "showOtherAccounts", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "showEditAccounts", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "showEditButton", void 0);
+    __decorate([
+        webcomponentsBase.d({
+            type: HTMLElement,
+            "default": true,
+        })
+    ], UserMenu.prototype, "menuItems", void 0);
+    __decorate([
+        webcomponentsBase.d({
+            type: HTMLElement,
+            invalidateOnChildChange: {
+                properties: true,
+                slots: false,
+            },
+        })
+    ], UserMenu.prototype, "accounts", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "_titleMovedToHeader", void 0);
+    __decorate([
+        webcomponentsBase.s({ type: Boolean })
+    ], UserMenu.prototype, "_manageAccountMovedToHeader", void 0);
+    __decorate([
+        o("#user-menu-rp")
+    ], UserMenu.prototype, "_responsivePopover", void 0);
+    __decorate([
+        o("#selected-account-title")
+    ], UserMenu.prototype, "_selectedAccountTitleEl", void 0);
+    __decorate([
+        o("#selected-account-manage-btn")
+    ], UserMenu.prototype, "_selectedAccountManageBtn", void 0);
+    __decorate([
+        parametersBundle_css.i("@ui5/webcomponents-fiori")
+    ], UserMenu, "i18nBundle", void 0);
+    UserMenu = UserMenu_1 = __decorate([
+        webcomponentsBase.m({
+            tag: "ui5-user-menu",
+            languageAware: true,
+            renderer: parametersBundle_css.d,
+            template: UserMenuTemplate,
+            styles: [UserMenuCss],
+        })
+        /**
+         * Fired when the account avatar is selected.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("avatar-click")
+        /**
+         * Fired when the "Manage Account" button is selected.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("manage-account-click")
+        /**
+         * Fired when the "Edit Accounts" button is selected.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("edit-accounts-click")
+        /**
+         * Fired when the account is switched to a different one.
+         * @param {UserMenuAccount} prevSelectedAccount The previously selected account.
+         * @param {UserMenuAccount} selectedAccount The selected account.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("change-account", {
+            cancelable: true,
+        })
+        /**
+         * Fired when a menu item is selected.
+         * @param {UserMenuItem} item The selected `user menu item`.
+         * @public
+         */
+        ,
+        parametersBundle_css.l("item-click", {
+            cancelable: true,
+        })
+        /**
+         * Fired when a user menu is open.
+         * @public
+         * @since 2.6.0
+         */
+        ,
+        parametersBundle_css.l("open")
+        /**
+         * Fired when a user menu is close.
+         * @public
+         * @since 2.6.0
+         */
+        ,
+        parametersBundle_css.l("close")
+        /**
+         * Fired when the "Sign Out" button is selected.
+         * @public
+         * @since 2.6.0
+         */
+        ,
+        parametersBundle_css.l("sign-out-click", {
+            cancelable: true,
+        })
+    ], UserMenu);
+    UserMenu.define();
+    var UserMenu$1 = UserMenu;
+
+    return UserMenu$1;
+
+}));