@openmfp/portal-ui-lib 0.192.53 → 0.193.0

package/fesm2022/openmfp-portal-ui-lib.mjs

@@ -871,10 +871,21 @@ class StaticSettingsConfigServiceImpl {
         });
         this.i18nService = inject(I18nService);
         this.iframeService = inject(IframeService);
+        this.luigiCoreService = inject(LuigiCoreService);
     }
     async getStaticSettingsConfig() {
         const logo = 'assets/images/logo.png';
         const favicon = 'assets/images/favicon.ico';
+        let designConfig = {
+            btpToolLayout: true,
+        };
+        if (this.luigiCoreService.isFeatureToggleActive('vega-design')) {
+            designConfig = {
+                btpToolLayout: false,
+                profileType: 'vega',
+                sideNav: { style: 'vega' },
+            };
+        }
         return {
             header: {
                 title: 'OpenMFP Portal',
@@ -886,7 +897,6 @@ class StaticSettingsConfigServiceImpl {
                 btpToolLayout: true,
                 globalNav: true,
             },
-            btpToolLayout: true,
             responsiveNavigation: 'Fiori3',
             featureToggles: {
                 queryStringParam: 'ft',
@@ -896,6 +906,7 @@ class StaticSettingsConfigServiceImpl {
             },
             iframeCreationInterceptor: this.iframeService.iFrameCreationInterceptor(),
             customTranslationImplementation: this.i18nService,
+            ...designConfig,
             ...(await this.customStaticSettingsConfigService?.getStaticSettingsConfig()),
         };
     }
@@ -1349,8 +1360,8 @@ class HeaderBarService {
         return {
             ...rest,
             renderer: (containerElement, nodeItems, clickHandler) => {
+                containerElement.style['padding-left'] = '0.25rem';
                 containerElement.style.display = 'flex';
-                containerElement.style.position = 'static';
                 containerElement.style.height = 'min-content';
                 const parrent = containerElement.parentElement;
                 if (parrent) {
@@ -1359,13 +1370,18 @@ class HeaderBarService {
                 const { rightContainer, leftContainer } = this.createRendererContainers();
                 containerElement.appendChild(leftContainer);
                 containerElement.appendChild(rightContainer);
-                this.executeRenderes(leftContainer, leftRenderers, [nodeItems, clickHandler]);
-                this.executeRenderes(rightContainer, rightRenderers, [nodeItems, clickHandler]);
+                this.executeRenderes(leftContainer, leftRenderers, [
+                    nodeItems,
+                    clickHandler,
+                ]);
+                this.executeRenderes(rightContainer, rightRenderers, [
+                    nodeItems,
+                    clickHandler,
+                ]);
                 return containerElement;
             },
         };
     }
-    ;
     setParrentStyles(parrent) {
         parrent.style.display = 'flex';
         parrent.style.flexDirection = 'column';
@@ -1984,22 +2000,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 class FeatureTogglesService {
     constructor() {
         this.configService = inject(ConfigService);
+        this.authService = inject(AuthService);
         this.envConfigService = inject(EnvConfigService);
         this.luigiCoreService = inject(LuigiCoreService);
     }
     async initFeatureToggles() {
         try {
             const { uiOptions } = await this.envConfigService.getEnvConfig();
-            const { featureToggles } = await this.configService.getPortalConfig();
+            let ft = {};
+            if (this.authService.getAuthData()) {
+                const { featureToggles } = await this.configService.getPortalConfig();
+                ft = featureToggles;
+            }
             if (uiOptions?.includes('enableFeatureToggleSetting')) {
                 const featureToggleSettings = featureToggleLocalStorage.read();
                 this.luigiCoreService.setFeatureToggles({
-                    ...featureToggles,
+                    ...ft,
                     ...featureToggleSettings,
                 });
                 return;
             }
-            this.luigiCoreService.setFeatureToggles(featureToggles);
+            this.luigiCoreService.setFeatureToggles(ft);
         }
         catch (e) {
             console.error('Failed to initialize feature toggles', e);
@@ -2609,8 +2630,10 @@ class LuigiComponent {
         this.routingConfigService = inject(RoutingConfigServiceImpl);
         this.authConfigService = inject(AuthConfigService);
         this.staticSettingsConfigService = inject(StaticSettingsConfigServiceImpl);
+        this.featureTogglesService = inject(FeatureTogglesService);
     }
     async ngOnInit() {
+        await this.featureTogglesService.initFeatureToggles();
         try {
             this.luigiCoreService.setConfig({
                 auth: await this.authConfigService.getAuthConfig(),
@@ -2638,11 +2661,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 document.body.classList.add('ui5-content-density-compact');
 class PortalComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: PortalComponent, isStandalone: true, selector: "app-portal", ngImport: i0, template: "<div class=\"fd-page__content\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [".fd-page__header{padding-left:1.5rem}.settings-icon-active{color:#0064d9!important}.local-development-settings-indication{position:absolute;top:-4px;right:-4px;width:12px;height:12px;font-size:12px}.entity-nav-header{padding-left:var(--fdNavigation_Padding_X);padding-right:var(--fdNavigation_Padding_X);padding-bottom:1.25rem!important;margin:10px 0 0 10px}.entity-nav-header-type{font-size:14px}.entity-nav-header-label{color:var(--sapAccentColor6);padding-top:8px}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{white-space:inherit!important}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: PortalComponent, isStandalone: true, selector: "app-portal", ngImport: i0, template: "<div class=\"fd-page__content\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [".fd-page__header{padding-left:1.5rem}.settings-icon-active{color:#0064d9!important}.local-development-settings-indication{position:absolute;top:-4px;right:-4px;width:12px;height:12px;font-size:12px}.entity-nav-header{padding-left:1rem;padding-right:var(--fdNavigation_Padding_X);padding-top:var(--fdNavigation_Padding_X)!important;padding-bottom:1.25rem!important}.entity-nav-header-type{font-size:14px}.entity-nav-header-label{color:var(--sapAccentColor6);padding-top:8px}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{white-space:inherit!important}#app:not(.vega) .lui-breadcrumb-container{position:static!important}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PortalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-portal', standalone: true, imports: [RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-page__content\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [".fd-page__header{padding-left:1.5rem}.settings-icon-active{color:#0064d9!important}.local-development-settings-indication{position:absolute;top:-4px;right:-4px;width:12px;height:12px;font-size:12px}.entity-nav-header{padding-left:var(--fdNavigation_Padding_X);padding-right:var(--fdNavigation_Padding_X);padding-bottom:1.25rem!important;margin:10px 0 0 10px}.entity-nav-header-type{font-size:14px}.entity-nav-header-label{color:var(--sapAccentColor6);padding-top:8px}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{white-space:inherit!important}\n"] }]
+            args: [{ selector: 'app-portal', standalone: true, imports: [RouterOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"fd-page__content\">\n  <router-outlet></router-outlet>\n</div>\n", styles: [".fd-page__header{padding-left:1.5rem}.settings-icon-active{color:#0064d9!important}.local-development-settings-indication{position:absolute;top:-4px;right:-4px;width:12px;height:12px;font-size:12px}.entity-nav-header{padding-left:1rem;padding-right:var(--fdNavigation_Padding_X);padding-top:var(--fdNavigation_Padding_X)!important;padding-bottom:1.25rem!important}.entity-nav-header-type{font-size:14px}.entity-nav-header-label{color:var(--sapAccentColor6);padding-top:8px}.fd-container.fd-form-layout-grid-container .fd-row .fd-col{white-space:inherit!important}#app:not(.vega) .lui-breadcrumb-container{position:static!important}\n"] }]
         }] });
 
 const portalRouts = [