@sapui5/sap.ushell 1.141.3 → 1.143.0

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/Component.js

@@ -8,15 +8,16 @@ sap.ui.define([
     "sap/ui/core/Component",
     "sap/base/Log",
     "sap/ushell/resources",
+    "sap/ushell/Config",
     "sap/ushell/Container",
     "sap/ushell/EventHub",
     "sap/ushell/components/shell/SearchCEPNew/SearchProviders/SearchProvider",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/IllustratedMessage",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/ShellBarSearch",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchItem",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchItemGroup",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/SearchMessageArea",
-    "sap/ushell/gen/ui5/webcomponents/dist/Button",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/IllustratedMessage",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/ShellBarSearch",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/SearchItem",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/SearchItemGroup",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/SearchMessageArea",
+    "sap/f/gen/ui5/webcomponents/dist/Button",
     "sap/ui/model/json/JSONModel",
     "sap/ui/thirdparty/hasher",
     "sap/ushell/api/performance/Extension",
@@ -27,6 +28,7 @@ sap.ui.define([
     Component,
     Log,
     resources,
+    Config,
     Container,
     EventHub,
     SearchProvider,
@@ -72,6 +74,7 @@ sap.ui.define([
 
         init: function () {
             this._init();
+            this.pInitialized = Promise.withResolvers();
         },
 
         /**
@@ -79,16 +82,19 @@ sap.ui.define([
          * @private
          */
         _init: async function () {
+            this._oSearchAPI = this.getComponentData()?.searchAPI;
             this._oSearchCEPService = await Container.getServiceAsync("SearchCEP");
             this._oResultModel = new JSONModel({});
             this._oI18nModel = await this.getModel("i18n").getResourceBundle();
             this._bIsMyHome = Container.getFLPPlatform(true) === "MYHOME";
             this._oShellHeader = Element.getElementById("shell-header");
-            this._initSearchField();
-            this._registerDefaultProviders();
+            await this._registerDefaultProviders();
+            await this._initSearchField();
             this._registerHandleHashChange();
 
-            if (this._oShellHeader.isLargeState() || this._oShellHeader.isExtraLargeState()) {
+            const bIsInitiallyCollapsed = Config.last("/core/search/initiallyCollapsed");
+
+            if (!bIsInitiallyCollapsed && (this._oShellHeader.isLargeState() || this._oShellHeader.isExtraLargeState())) {
                 this._fetchSuggestions();
                 this._toggleSearchFieldInput(true);
             }
@@ -96,20 +102,20 @@ sap.ui.define([
             this._aDoables = [];
             this._aDoables.push(EventHub.on("updateExtProviderLists").do(this._updateExtProviderLists.bind(this)));
             this._oExtension = new Extension();
+            this.pInitialized.resolve();
         },
 
         /**
          * Initializes the search field and binds the result model and actions.
          * @private
          */
-        _initSearchField: function () {
+        _initSearchField: async function () {
             try {
-                this._oSearchField = new ShellBarSearch({
-                    id: "newCEPShellBarSearch",
-                    placeholder: resources.i18n.getText("searchAppTitle"),
-                    autoOpen: true,
-                    showClearIcon: true
-                });
+                this._oSearchField = await this._oSearchAPI.getSearchField();
+                this._oSearchField.setPlaceholder(resources.i18n.getText("searchAppTitle"));
+                this._oSearchField.setAutoOpen(true);
+                this._oSearchField.setShowClearIcon(true);
+
                 this._oSearchField.setModel(this._oResultModel, "searchResults");
                 this._oSearchField.bindAggregation("items", {
                     path: "searchResults>/results",
@@ -117,7 +123,9 @@ sap.ui.define([
                 });
 
                 this._attachSearchEventHandlers();
-                this._oShellHeader.setSearch(this._oSearchField);
+                if (!Config.last("/core/shellBar/enabled")) {
+                    this._oShellHeader.setSearch(this._oSearchField);
+                }
             } catch (oError) {
                 Log.error("Failed to create CEP search field content", oError);
             }
@@ -132,6 +140,10 @@ sap.ui.define([
             this._fnBoundOnInputChange = this._onInputChange.bind(this);
             this._oSearchField.attachSearch(this._fnBoundOnSearch);
             this._oSearchField.attachInput(this._fnBoundOnInputChange);
+            if (this._oSearchField.getDomRef() === document.activeElement || this._oSearchField.getFocusDomRef() === document.activeElement) {
+                this._oSearchField.fireSearch();
+                this._oSearchField.setOpen(true);
+            }
         },
 
         /**
@@ -174,9 +186,10 @@ sap.ui.define([
          * @private
          * */
         _registerDefaultProviders: async function () {
-            Object.values(SearchProvider.getDefaultProviders(this._oI18nModel)).forEach(async (oProvider) => {
-                await this._oSearchCEPService.registerDefaultSearchProvider(oProvider);
-            });
+            const aProviders = Object.values(SearchProvider.getDefaultProviders(this._oI18nModel));
+            return Promise.all(aProviders.map((oProvider) => {
+                return this._oSearchCEPService.registerDefaultSearchProvider(oProvider);
+            }));
         },
 
         /**
@@ -531,12 +544,10 @@ sap.ui.define([
          */
         exit: function () {
             this._detachSearchEventHandlers();
-            this._oSearchField.destroy();
             this._aDoables.forEach((oDoable) => {
                 oDoable.off();
             });
             this._aDoables = [];
-            Component.prototype.exit.apply(this, arguments);
         }
     });
 });

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/FrequentActivityProvider.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview
- * @version 1.141.3
+ * @version 1.143.0
  */
 sap.ui.define([
     "sap/base/Log",

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/RecentSearchProvider.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview
- * @version 1.141.3
+ * @version 1.143.0
  */
 sap.ui.define([
     "sap/base/Log",

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/SearchProvider.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview This module is the search provider main interface
- * @version 1.141.3
+ * @version 1.143.0
  */
 sap.ui.define([
     "sap/ushell/components/shell/SearchCEPNew/SearchProviders/FrequentActivityProvider",

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/SearchProviders/SearchServiceProvider.js

@@ -2,7 +2,7 @@
 
 /**
  * @fileOverview This module handles the navigation service search actions
- * @version 1.141.3
+ * @version 1.143.0
  */
 sap.ui.define([
     "sap/base/Log",

package/src/main/js/sap/ushell/components/shell/SearchCEPNew/manifest.json

@@ -6,7 +6,7 @@
         "title": "SearchCEPNew",
         "ach": "CA-FLP-FE-UI",
         "applicationVersion": {
-            "version": "1.141.3"
+            "version": "1.143.0"
         }
     },
     "sap.ui": {

package/src/main/js/sap/ushell/components/shell/Settings/Component.js

@@ -47,7 +47,7 @@ sap.ui.define([
     return UIComponent.extend("sap.ushell.components.shell.Settings.Component", {
 
         metadata: {
-            version: "1.141.3",
+            version: "1.143.0",
             library: "sap.ushell",
             dependencies: {
                 libs: {
@@ -210,7 +210,7 @@ sap.ui.define([
         _addUserSettingsButton: async function () {
             let oUserSettingsButton;
             if (Config.last("/core/shellBar/enabled")) {
-                const [ShellBarItem] = await ushellUtils.requireAsync(["sap/ushell/gen/ui5/webcomponents-fiori/dist/ShellBarItem"]);
+                const [ShellBarItem] = await ushellUtils.requireAsync(["sap/f/gen/ui5/webcomponents_fiori/dist/ShellBarItem"]);
                 oUserSettingsButton = new ShellBarItem({
                     id: "userSettingsBtn",
                     icon: "sap-icon://action-settings",

package/src/main/js/sap/ushell/components/shell/Settings/UserSettings.view.xml

@@ -38,7 +38,6 @@
         <content>
             <SplitApp id="settingsApp"
                       defaultTransitionNameDetail="show"
-                      mode="{= ${device>/system/desktop} ? 'StretchCompressMode' : 'ShowHideMode'}"
                       afterMasterClose="._afterMasterClose">
                 <masterPages>
                     <Page id="userSettingMaster"

package/src/main/js/sap/ushell/components/shell/Settings/appearance/Appearance.controller.js

@@ -43,6 +43,8 @@ sap.ui.define([
 ) => {
     "use strict";
 
+    const sGroupKeySeparator = "###";
+
     return Controller.extend("sap.ushell.components.shell.Settings.appearance.Appearance", {
         TILE_SIZE: {
             Small: 0,
@@ -93,7 +95,7 @@ sap.ui.define([
 
         // Group header text for a set is a set label. Other themes not in a set are grouped under Individual Themes
         getThemeSetHeader: function (oGroup) {
-            const oSet = this.aThemeSets.find((set) => oGroup.key === set.id);
+            const oSet = this.aThemeSets.find((set) => oGroup.key?.split(sGroupKeySeparator)[2] === set.id);
             const sGroupTitle = oSet?.label || ushellResources.i18n.getText("AppearanceIndividualThemes");
             return new GroupHeaderListItem({ title: sGroupTitle });
         },
@@ -110,6 +112,30 @@ sap.ui.define([
             return this._getSelectedThemeData()?.id || this.oUser.getTheme();
         },
 
+        _getGroupKey: function (vendor, activationTime, setId) {
+            // we need to order and group ascending but descending by activation time. For the grouping, all the information
+            // must be present within one property. Hence, we invert the time value by subtracting it from the current time.
+            const sInvertedActivationTime = activationTime ? (new Date(Date.now() - new Date(activationTime))).getTime() : "";
+            if (!setId) {
+                if (this.aThemeSets?.length > 0) {
+                    // there is no set id but sets are supported in general. Hence, this is an individual theme.
+                    return [
+                        "individualThemes",
+                        sInvertedActivationTime,
+                        "" // setId
+                    ].join(sGroupKeySeparator);
+                }
+                // if there are no sets at all, do not group
+                return;
+            }
+
+            return [
+                (vendor === "SAP" ? "standardThemes" : "customThemes"),
+                sInvertedActivationTime,
+                setId
+            ].join(sGroupKeySeparator);
+        },
+
         // The main function. Builds the list of themes. Items are grouped by setId.
         _getThemeListData: function (sCurrentThemeId) {
             const aThemes = this.aThemeListFromServer || [];
@@ -132,7 +158,7 @@ sap.ui.define([
             this.bShowDeprecationMsg = false;
 
             // If the user is not allowed to change themes, return only the current theme
-            if (!this._isThemeCofigurable() || this.oUser.isSetThemePermitted() === false) {
+            if (!this._isThemeConfigurable() || this.oUser.isSetThemePermitted() === false) {
                 const oCurrentTheme = aThemes.find((theme) => theme?.id === sCurrentThemeId);
                 return [{
                     id: sCurrentThemeId,
@@ -163,7 +189,8 @@ sap.ui.define([
                         mode: "Image", // specific theme svg can be displayed with an img tag
                         deprecated: theme?.deprecated === true,
                         setId: set.id,
-                        isSelected: false
+                        isSelected: false,
+                        groupKey: this._getGroupKey(set?.vendor, set?.activationTime || set?.creationTime, set.id)
                     };
                     aListData.push(oItemData);
                 });
@@ -181,7 +208,8 @@ sap.ui.define([
                         mode: "InlineSvg", // combined svg files can be only shown with inline decomposition
                         deprecated: set.deprecated === true,
                         setId: set.id,
-                        isSelected: false
+                        isSelected: false,
+                        groupKey: this._getGroupKey(set?.vendor, set?.activationTime || set?.creationTime, set.id)
                     };
                     aListData.push(oItemData);
                 });
@@ -214,7 +242,7 @@ sap.ui.define([
             return aListData;
         },
 
-        _isThemeCofigurable: function () {
+        _isThemeConfigurable: function () {
             return Config.last("/core/shell/model/setTheme") !== false;
         },
 
@@ -229,7 +257,7 @@ sap.ui.define([
             const bDisplaySettingsTabVisible = bSizeBehaviorConfigurable || bContentDensityConfigurable || bShowContentProviderInfoConfigurable;
 
             const oConfigModel = new JSONModel({
-                themeConfigurable: this._isThemeCofigurable(),
+                themeConfigurable: this._isThemeConfigurable(),
                 sizeBehaviorConfigurable: bSizeBehaviorConfigurable,
                 tileSize: this.TILE_SIZE[Config.last("/core/home/sizeBehavior")],
                 contentDensityConfigurable: bContentDensityConfigurable,
@@ -246,7 +274,7 @@ sap.ui.define([
         getDarkModeModel: function () {
             const oUrlSearch = new URLSearchParams(window.location.search);
             const bDetectionSupported = !oUrlSearch.get("sap-theme") && !oUrlSearch.get("sap-ui-theme");
-            const bThemeConfigurable = this._isThemeCofigurable();
+            const bThemeConfigurable = this._isThemeConfigurable();
 
             const oDarkModeModel = new JSONModel({
                 enabled: bThemeConfigurable,

package/src/main/js/sap/ushell/components/shell/Settings/appearance/Appearance.view.xml

@@ -17,7 +17,7 @@
                     items="{
                         path: '/options',
                         sorter: [{
-                            path: 'setId',
+                            path: 'groupKey',
                             descending: false,
                             group: true
                         }, {

package/src/main/js/sap/ushell/components/shell/ShellBar/Component.js

@@ -5,6 +5,7 @@ sap.ui.define([
     "sap/ui/core/UIComponent",
     "sap/ui/Device",
     "sap/ui/model/json/JSONModel",
+    "sap/ushell/Config",
     "sap/ushell/Container",
     "sap/ushell/EventHub",
     "sap/ushell/renderer/ShellLayout",
@@ -14,6 +15,7 @@ sap.ui.define([
     UIComponent,
     Device,
     JSONModel,
+    Config,
     Container,
     EventHub,
     ShellLayout,
@@ -50,14 +52,6 @@ sap.ui.define([
         init: function () {
             // Call the init function of the parent
             UIComponent.prototype.init.apply(this, arguments);
-            const oModel = new JSONModel({
-                logo: {},
-                searchField: {
-                    show: false
-                }
-            });
-
-            this.setModel(oModel);
             this.FLPRangeSet = {
                 name: "Ushell",
                 rangeBorders: [600, 1024, 1440, 1920],
@@ -70,6 +64,14 @@ sap.ui.define([
                 this.FLPRangeSet.rangeNames
             );
 
+            const oModel = new JSONModel({
+                logo: {},
+                searchField: {
+                    show: (this.isLargeState() || this.isExtraLargeState()) && !Config.last("/core/search/initiallyCollapsed") && Config.last("/core/search/useWebComponents")
+                }
+            });
+            this.setModel(oModel);
+
             // handle initial state of the side content
             const bInitialValue = ShellLayout.hasAdjacentSideContentBeforeMain();
             ushellUtils.applySideContent.call(this, bInitialValue);
@@ -111,7 +113,10 @@ sap.ui.define([
 
                 const bShow = (sStateName !== "COL");
                 this.getModel().setProperty("/searchField/show", bShow);
-                document.body.classList.toggle(sSearchOverlayCSS, bShow && bWithOverlay);
+
+                if (!Config.last("/core/search/useWebComponents")) {
+                    document.body.classList.toggle(sSearchOverlayCSS, bShow && bWithOverlay);
+                }
 
                 // save for animation after rendering
                 _iSearchWidth = bShow ? iMaxRemSize || 35 : 0;

package/src/main/js/sap/ushell/components/shell/ShellBar/controller/ShellBar.controller.js

@@ -10,14 +10,14 @@ sap.ui.define([
     "sap/ushell/Container",
     "sap/ushell/EventHub",
     "sap/ushell/api/NewExperience",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/ShellBarItem",
-    "sap/ushell/gen/ui5/webcomponents-fiori/dist/ShellBarSpacer",
-    "sap/ushell/gen/ui5/webcomponents/dist/Button",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/ShellBarItem",
+    "sap/f/gen/ui5/webcomponents_fiori/dist/ShellBarSpacer",
+    "sap/f/gen/ui5/webcomponents/dist/Button",
     "sap/ushell/state/BindingHelper",
     "sap/ushell/state/modules/BackNavigation",
     "sap/ushell/state/ShellModel",
     "sap/ushell/ui/shell/ShellAppTitle",
-    "sap/ushell/utils"
+    "sap/ushell/utils/UrlParsing"
 ], (
     Device,
     Element,
@@ -36,7 +36,7 @@ sap.ui.define([
     BackNavigation,
     ShellModel,
     ShellAppTitle,
-    ushellUtils
+    UrlParsing
 ) => {
     "use strict";
 
@@ -98,8 +98,13 @@ sap.ui.define([
 
         getConfigurationModel: function () {
             const oModel = new JSONModel({
-                windowTitleExtension: Config.last("/core/shell/windowTitleExtension") || ""
+                windowTitleExtension: Config.last("/core/shell/windowTitleExtension") || "",
+                searchUseWebComponents: !!Config.last("/core/search/useWebComponents")
             });
+
+            this._aDoables.push(Config.on("/core/search/useWebComponents").do(() => {
+                oModel.setProperty("/searchUseWebComponents", !!Config.last("/core/search/useWebComponents"));
+            }));
             return oModel;
         },
 
@@ -192,20 +197,6 @@ sap.ui.define([
             return sItemIdUpperCase === "USERACTIONSMENUHEADERBUTTON";
         },
 
-        hasNotifications: function (aHeadEndItems) {
-            const bHasNotifications = aHeadEndItems.some((sItemId) => sItemId.toUpperCase() === "NOTIFICATIONSCOUNTBUTTON");
-            if (bHasNotifications) {
-                const oNotificationBtnModel = Element.getElementById("NotificationsCountButton").getModel("configModel");
-                this.getView().setModel(oNotificationBtnModel, "configModel");
-            }
-            return bHasNotifications;
-        },
-
-        onNotificationsClick: function () {
-            // delegate the click to the actual button, with this it can also be replaced with a custom control
-            return this._delegateHeadEndItemClick("NOTIFICATIONSCOUNTBUTTON");
-        },
-
         hasProducts: function (aHeadEndItems) {
             return aHeadEndItems.some((sItemId) => sItemId.toUpperCase() === "PRODUCTSWITCHBTN");
         },
@@ -237,7 +228,8 @@ sap.ui.define([
         _updateHomeUri: function (sHomeUri) {
             const oModel = this.getOwnerComponent().getModel();
             oModel.setProperty("/logo/homeUri", sHomeUri);
-            oModel.setProperty("/logo/isRootIntent", ushellUtils.isRootIntent(sHomeUri));
+            const oParsedHash = UrlParsing.parseShellHash(sHomeUri, true);
+            oModel.setProperty("/logo/isRootIntent", UrlParsing.isRootIntent(oParsedHash));
         },
 
         pressNavBackButton: async function () {
@@ -270,6 +262,8 @@ sap.ui.define([
                 if (!bSearchExpanded && oShellBarSearch.getValue()) {
                     oShellBarSearch.setValue("");
                 }
+            } else if (Element.getElementById("sf")) {
+                Element.getElementById("sf").fireEvent("click");
             }
         },
 

package/src/main/js/sap/ushell/components/shell/ShellBar/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.shell.ShellBar",
         "applicationVersion": {
-            "version": "1.141.3"
+            "version": "1.143.0"
         },
         "type": "component",
         "ach": "CA-FLP-FE-COR",

package/src/main/js/sap/ushell/components/shell/ShellBar/view/ShellBar.view.xml

@@ -4,13 +4,13 @@
     xmlns:mvc="sap.ui.core.mvc"
     xmlns:m="sap.m"
     xmlns:core="sap.ui.core"
-    xmlns:thirdparty="sap.ushell.gen.ui5.webcomponents-fiori.dist"
+    xmlns:thirdparty="sap.f.gen.ui5.webcomponents_fiori.dist"
     visible="{shellModel>/header/visible}"
     core:require="{
         BindingHelper: 'sap/ushell/state/BindingHelper',
-        icons: 'sap/ushell/thirdparty/ui5/webcomponents-icons/AllIcons',
-        iconsTnt: 'sap/ushell/thirdparty/ui5/webcomponents-icons-tnt/AllIcons',
-        iconsBusinessSuite: 'sap/ushell/thirdparty/ui5/webcomponents-icons-business-suite/AllIcons'
+        icons: 'sap/f/thirdparty/ui5/webcomponents_icons/AllIcons',
+        iconsTnt: 'sap/f/thirdparty/ui5/webcomponents_icons_tnt/AllIcons',
+        iconsBusinessSuite: 'sap/f/thirdparty/ui5/webcomponents_icons_business_suite/AllIcons'
     }"
 >
 <!-- The icons are imported to make sure they are available for e.g. custom shell bar items. -->
@@ -24,11 +24,7 @@
         hideSearchButton="{/searchField/show}"
         contentItemVisibilityChange=".onContentItemVisibilityChange"
         searchButtonClick=".onSearchButtonClick"
-        showNotifications="{
-            path: 'shellModel>/header/headEndItems',
-            formatter: '.hasNotifications'
-        }"
-        notificationsClick=".onNotificationsClick"
+        showNotifications="{shellModel>/header/notifications/visible}"
         notificationsCount="{= %{configModel>/notificationsCount} > 0 ? %{configModel>/notificationsCount} : ''}"
         showProductSwitch="{
             path: 'shellModel>/header/headEndItems',
@@ -56,15 +52,6 @@
             filters: [{ path: '', test: '.isProfileMenu' }]
         }"
     >
-        <thirdparty:searchField>
-            <!-- Create dummy search input for ESearch when ShellBar is enabled for the old ESH. -->
-            <!-- Make it busy to indicate that the search is not yet ready to be used. -->
-            <!-- If the Slot is empty, the Icon is missing; If the Slot content is invisible, the Icon is also missing. -->
-            <m:Input id="dummySearchInput"
-                     busy="true"
-                     busyIndicatorDelay="0"
-                     visible="{shellConfig>/searchAvailable}"/>
-        </thirdparty:searchField>
         <thirdparty:branding>
             <thirdparty:ShellBarBranding
                 href="{/logo/homeUri}"
@@ -79,6 +66,24 @@
                 </thirdparty:logo>
             </thirdparty:ShellBarBranding>
         </thirdparty:branding>
+
+        <thirdparty:searchField>
+            <!-- Create dummy search input for ESearch when ShellBar is enabled for the old ESH. -->
+            <!-- Make it busy to indicate that the search is not yet ready to be used. -->
+            <!-- If the Slot is empty, the Icon is missing; If the Slot content is invisible, the Icon is also missing.-->
+             <thirdparty:ShellBarSearch id="shellBarSearch" visible="{= ${shellConfig>/searchAvailable} &amp;&amp; ${config>/searchUseWebComponents}}" >
+                <thirdparty:customData>
+                    <core:CustomData
+                        key="help-id"
+                        value="toggle-search"
+                        writeToDom="true"
+                    />
+                </thirdparty:customData>
+             </thirdparty:ShellBarSearch>
+
+             <m:Input id="shellBarSearchInput" visible="{= ${shellConfig>/searchAvailable} &amp;&amp; !${config>/searchUseWebComponents}}" />
+        </thirdparty:searchField>
+
         <thirdparty:customData>
             <core:CustomData
                 key="help-id"

package/src/main/js/sap/ushell/components/shell/SideNavigation/Component.js

@@ -74,7 +74,7 @@ sap.ui.define([
             const oModel = this.getModel("viewConfiguration");
             let sValue = Config.last("/core/sideNavigation/mode");
 
-            if (Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD).name !== "Desktop") {
+            if (Device.media.getCurrentRange(Device.media.RANGESETS.SAP_STANDARD).name === "Phone") {
                 sValue = "Popover";
                 oModel.setProperty("/expanded", true);
             }

package/src/main/js/sap/ushell/components/shell/SideNavigation/manifest.json

@@ -3,7 +3,7 @@
     "sap.app": {
         "id": "sap.ushell.components.shell.SideNavigation",
         "applicationVersion": {
-            "version": "1.141.3"
+            "version": "1.143.0"
         },
         "i18n": {
             "bundleUrl": "./resources/resources.properties",

package/src/main/js/sap/ushell/components/shell/UserActionsMenu/Component.js

@@ -14,7 +14,7 @@ sap.ui.define([
     return UIComponent.extend("sap.ushell.components.shell.UserActionsMenu.Component", {
 
         metadata: {
-            version: "1.141.3",
+            version: "1.143.0",
             library: "sap.ushell",
             dependencies: {
                 libs: ["sap.m"]

package/src/main/js/sap/ushell/components/shell/UserActionsMenu/UserActionsMenu.controller.js

@@ -365,7 +365,7 @@ sap.ui.define([
                 if (this.getDisplayAvatar()) {
                     sFragmentName = "sap.ushell.components.shell.UserActionsMenu.UserActionsMenu";
 
-                    sap.ui.require(["sap/ushell/gen/ui5/webcomponents-fiori/dist/UserMenuItem"], () => {
+                    sap.ui.require(["sap/f/gen/ui5/webcomponents_fiori/dist/UserMenuItem"], () => {
                         resolve();
                     });
                 } else {
@@ -419,14 +419,14 @@ sap.ui.define([
          *
          * @param {string} sId ID of the control
          * @param {sap.ui.model.Context} oContext Binding context
-         * @returns {sap.ushell.gen.ui5.webcomponents-fiori.dist.UserMenuItem} User Menu Item
+         * @returns {sap.f.gen.ui5.webcomponents_fiori.dist.UserMenuItem} User Menu Item
          */
         userActionsMenuItemFactory: function (sId, oContext) {
             const oActionItem = Element.getElementById(oContext.getObject());
 
             // This module was already asynchronously loaded when the fragment was loaded. This factory is referenced in the fragment,
             // hence we can synchronously access the user menu item.
-            const UserMenuItem = sap.ui.require("sap/ushell/gen/ui5/webcomponents-fiori/dist/UserMenuItem");
+            const UserMenuItem = sap.ui.require("sap/f/gen/ui5/webcomponents_fiori/dist/UserMenuItem");
             return new UserMenuItem({
                 id: `${sId}-${oActionItem.getId()}`,
                 icon: oActionItem.getIcon(),
@@ -509,7 +509,7 @@ sap.ui.define([
         /**
          * Opens the UserActionsMenu popover
          *
-         * @returns {sap.m.Popover|sap.ushell.gen.ui5.webcomponents-fiori.dist.UserMenuItem} Returns the popover or the web component for chaining
+         * @returns {sap.m.Popover|sap.f.gen.ui5.webcomponents_fiori.dist.UserMenuItem} Returns the popover or the web component for chaining
          */
         popoverOpen: function () {
             if (this.getDisplayAvatar()) {
@@ -524,7 +524,7 @@ sap.ui.define([
         /**
          * Closes the UserActionsMenu popover
          *
-         * @returns {sap.m.Popover|sap.ushell.gen.ui5.webcomponents-fiori.dist.UserMenuItem} Returns the popover or the web component for chaining
+         * @returns {sap.m.Popover|sap.f.gen.ui5.webcomponents_fiori.dist.UserMenuItem} Returns the popover or the web component for chaining
          */
         popoverClose: function () {
             if (this.getDisplayAvatar()) {

package/src/main/js/sap/ushell/components/shell/UserActionsMenu/UserActionsMenu.fragment.xml

@@ -1,9 +1,9 @@
 <core:FragmentDefinition
     xmlns="sap.m"
     xmlns:core="sap.ui.core"
-    xmlns:thirdparty="sap.ushell.gen.ui5.webcomponents-fiori.dist"
+    xmlns:thirdparty="sap.f.gen.ui5.webcomponents_fiori.dist"
     core:require="{
-        iconSettings: 'sap/ushell/thirdparty/ui5/webcomponents-icons/AllIcons'
+        iconSettings: 'sap/f/thirdparty/ui5/webcomponents_icons/AllIcons'
     }"
 >
     <thirdparty:UserMenu

package/src/main/js/sap/ushell/components/shell/UserImage/Component.js

@@ -39,7 +39,7 @@ sap.ui.define([
     return UIComponent.extend("sap.ushell.components.shell.UserImage.Component", {
 
         metadata: {
-            version: "1.141.3",
+            version: "1.143.0",
             library: "sap.ushell.components.shell.UserImage",
             dependencies: {
                 libs: {